gas-injection/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" >
            <div class="img" > <img :src="items.src" alt="" /> </div>
            <div class="text">{{ items.text }}</div>
            <div class="num" >{{ 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;
    justify-content: center;
    align-items: center;
    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;

          &:first-child .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%);
            }
          }
          &:last-child .img {
            position: relative;
            width: 72px;
            height: 78px;
            background: url(../../../../assets/images/files/homes/sp.png) no-repeat center;
            img {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -75%);
            }
          }

      
          .text {
            margin: 5px 0px;
            font-family: '思源黑体', 'Microsoft Yahei';
            color: #fff;
            font-size: 14px;
          }

          &:first-child .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;
          }
          &:last-child .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/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>