dvcp_v2_wxcp_app/src/project/saas/AppDataStatistics/AppDataStatistics.vue

<template>
  <div class="AppDataStatistics">
    <AiTopFixed>
      <div class="area-content">
        <AiAreaPicker v-model="areaId" :name.sync="areaName">
          <div flex>
            <img src="./img/location.png" alt="" class="icon-img">
            <AiMore v-model="areaName" icon="arrow-down"/>
          </div>
        </AiAreaPicker>
      </div>
    </AiTopFixed>
    <div class="tab-list">
      <div :class="index == tabIndex ? 'tab-item active' : 'tab-item'" v-for="(item, index) in tabList" :key="index" @click="tabClick(index)">{{ item.text }}<span></span></div>
    </div>
    <component :is="tabList[tabIndex].component" class="component" />
  </div>
</template>

<script>
import resident from './components/resident.vue'
import update from './components/update'
import wechat from './components/wechat'
import message from './components/message'

export default {
  name: "AppDataStatistics",
  appName: "数据统计",
  data() {
    return {
      tabList: [
        {
          text: '居民统计',
          component: resident
        },
        {
          text: '更新统计',
          component: update
        },
        {
          text: '微信统计',
          component: wechat
        },
        {
          text: '会话统计',
          component: message
        },
      ],
      tabIndex: 1,
      areaId: '',
      areaName: '',
    }
  },
  components: {resident, update, wechat, message},
  methods: {
    tabClick(index) {
      this.tabIndex = index
    },
  },
  onShow() {
    document.title = "数据统计"
  },
}
</script>

<style lang="scss" scoped>
.AppDataStatistics {
  width: 100%;
  height: 100%;
  background-color: #F5F6F7;
  padding-bottom: 112px;
  ::v-deep .AiTopFixed {
    .content {
      background-color: #3975C6;
      color: #fff;
    }
    .icon-img{
      width: 48px;
      height: 48px;
    }
  }
  ::v-deep .AiMore{
    span{
      color: #fff;
    }
  }
  .tab-list {
    width: 100%;
    line-height: 88px;
    display: flex;
    background-color: #fff;
    position: fixed;
    z-index: 9;

    .tab-item {
      flex: 1;
      text-align: center;
      font-size: 28px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #666;
      position: relative;
    }
    .active {
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #000;
      span {
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -25px;
        width: 50px;
        height: 6px;
        background: #3399FF;
        border-radius: 4px;
      }
    }
  }
  .component{
    padding-top: 88px;
  }
}
</style>