vent-template/src/views/vent/performance/fileIndex/index.vue

<template>
  <div class="performance">
    <div class="main-container">
      <div
        class="card"
        v-for="(item, index) in titleList"
        :class="index === active ? 'actived' : 'isActived'"
        :key="index"
        @click="getDetails(index)"
      >
        <div class="card-t">{{ item.sysOrgName }}</div>
        <div class="card-b">
          <div class="box" v-for="(items, ind) in item.tab" :key="ind" @click="getToggle(ind)">
            <div class="img" :class="ind === toggleItem ? 'isPic' : 'pic'"> <img :src="items.src" alt="" /> </div>
            <div class="text">{{ items.text }}</div>
            <div class="num" :class="ind === toggleItem ? 'isNum' : 'nums'">{{ items.num }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import leftImg from '../../../../assets/images/files/homes/file.svg';
  import rightImg from '../../../../assets/images/files/homes/sp.svg';
  import { list } from './fileIndex.api';
  let router = useRouter(); //路由
  let active = ref(); //当前选中项
  let toggleItem = ref(); //当前选中子项
  let titleList = reactive<any[]>([]);
  //获取首页数据
  let getPageList = async () => {
    let data = await list();
    console.log(data, '首页数据');
    if (data.length !== 0) {
      let datas = data.map((el) => {
        return {
          sysOrgName: el.sysOrgName,
          tab: [
            { src: leftImg, text: '文档总数', num: el.tolalNum },
            { src: rightImg, text: '待审批数', num: el.approveNum },
          ],
        };
      });
      titleList.push(...datas);
      console.log(titleList, '123456');
    }
  };

  //切换选项
  let getDetails = (index) => {
    console.log('详情跳转');
    active.value = index;
    router.push('/fileManager/fileDetail');
  };
  //切换左右选项
  let getToggle = (ind) => {
    console.log(ind);
    toggleItem.value = ind;
  };
  onMounted(() => {
    getPageList();
  });
</script>

<style lang="less" scoped>
  @font-face {
    font-family: 'douyuFont';
    src: url(../../../../assets/images/files/douyuFont.otf);
  }
  .performance {
    width: 100%;
    height: 100%;
    padding: 15px;
    position: relative;
    box-sizing: border-box;
    background: url(../../../../assets/images/files/homes/bd.png) no-repeat center;
    .main-container {
      width: 100%;
      height: calc(100% - 30px);
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;
      .card {
        width: 331px;
        height: 235px;
        background: url(../../../../assets/images/files/homes/default.png) no-repeat center;
        background-size: 100% 100%;
        margin: 0px 23px 15px 23px;
        cursor: pointer;
        .card-t {
          height: 50px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-family: '思源黑体', 'Microsoft Yahei';
          font-size: 20px;
          color: #fff;
        }
        .card-b {
          height: calc(100% - 65px);
          margin-top: 15px;
          display: flex;
          flex-direction: row;
          .box {
            display: flex;
            flex: 1;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            .img {
              position: relative;
              width: 72px;
              height: 78px;
              background: url(../../../../assets/images/files/homes/file1.png) no-repeat center;
              img {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -75%);
              }
            }
            .pic {
              width: 72px;
              height: 78px;
              background: url(../../../../assets/images/files/homes/file1.png) no-repeat center;
              background-size: 100% 100%;
            }
            .isPic {
              width: 72px;
              height: 78px;
              background: url(../../../../assets/images/files/homes/sp.png) no-repeat center;
              background-size: 100% 100%;
            }
            .text {
              margin: 5px 0px;
              font-family: '思源黑体', 'Microsoft Yahei';
              color: #fff;
              font-size: 14px;
            }
            .num {
              width: 120px;
              height: 30px;
              font-family: 'douyuFont';
              color: #fff;
              font-size: 20px;
              display: flex;
              justify-content: center;
              align-items: center;
              background: url(../../../../assets/images/files/homes/file2.png) no-repeat center;
            }
            .nums {
              width: 120px;
              height: 30px;
              background: url(../../../../assets/images/files/homes/file2.png) no-repeat center;
            }
            .isNum {
              width: 120px;
              height: 30px;
              background: url(../../../../assets/images/files/homes/sp2.png) no-repeat center;
            }
          }
        }
      }
      .actived {
        background: url(../../../../assets/images/files/homes/mouse.png) no-repeat center;
        background-size: 100% 100%;
      }
      .isActived {
        background: url(../../../../assets/images/files/homes/default.png) no-repeat center;
        background-size: 100% 100%;
      }
    }
  }
</style>