Hall.vue

<template>
    <CellWrapper title="电子大厅" :cellContentHeight="cellContentHeight">
      <template v-slot:header>
        <span class="el-icon-refresh" title="刷新"></span>
        <span class="el-icon-more" title="操作" ></span> 
      </template>

      

      <div class="cell-content">
       <div class="card-item1">
          <div class="dept-name">
            <div class="first-word1">资</div>
            <div class="dz-title" @click="openassInfo">资产信息</div>      
        </div>
        <div class="display1">
           <div class="type-count" v-for="(item, idx) in itemList" :key="idx">
              <div class="count-item">{{item.name}}</div>
              <div class="count-number">{{item.count}}</div>
           </div>  
        </div>     
      </div>
      <div class="card-item2">
        <div class="dept-name">
          <div class="first-word2">
            资
          </div>
          <div class="dz-title" @click="openassInfoPub">资产发布信息</div>      
        </div>
        <div class="display2">
           <div class="type-count" v-for="(item, idx) in apub" :key="idx">
               <div class="count-item" >{{item.name}}</div>
               <div class="count-number">{{item.count}}</div>
           </div>     
        </div>
         
      </div>
      <div class="card-item3">
        <div class="dept-name">
          <div class="first-word3">
            资
          </div>
          <div class="dz-title" @click="openfund">资金信息</div>      
        </div>
        <div class="display3">
          <div class="type-count" v-for="(item, idx) in fund" :key="idx">
            <div class="count-item">{{item.name}}</div>
            <div class="count-number">{{item.count}}</div>
          </div>   
        </div>
           
      </div>
      
    </div>
  </CellWrapper>
</template>

<script>
import CellHeader from "../common/CellHeader.vue";
import CellWrapper from "../common/CellWrapper.vue";
import { asset } from "~/service/elec";
import { assetpub } from "~/service/elec";
import { fund } from "~/service/elec";



export default {
  name: "Hall",
   props: ['cellContentHeight'],
  components: { CellHeader,CellWrapper},
  data() {
    return {
     // colors: ['#2073ef','rgb(28 190 241)','rgb(243, 195, 12)'],
      //titles:['资产信息','资产发布信息','资金信息'],
      itemList: [   ],
      apub:[],
      fund:[],

      
      
    };
  },
    created() {
      
      asset().then(res => {
  
          this.itemList=res
       
      }),

        assetpub().then(res =>{
         this.apub = res;
      }),

        fund().then(res =>{
         this.fund = res;
      })
      
  },
  methods: {
    openassInfo(){
      window.location.href="#/business/AssetInfo"
    },
    openassInfoPub(){
      window.location.href="#/business/AssetPub"
    },
    openfund(){
      window.location.href="#/business/Fund"
    }
  },

 


};
</script>

<style scoped>


 .cell-content {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  
 
}
.cell-content {
  justify-content: space-around;
  align-items: center;
}
.cell-content .card-item1 {
  width: 30%;
  height: 85%;
  background-color: #e6e8ef; 
  border-radius: 12px;
  padding: 0 10px 0 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  
}

 .cell-content .card-item2 {
  width: 30%;
  height: 85%;
  background-color: #e6e8ef;
  border-radius: 12px;
  padding: 0 10px 0 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

 .cell-content .card-item3 {
  width: 30%;
  height: 85%;
  background-color: #e6e8ef;
  border-radius: 12px;
  padding: 0 10px 0 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

.dept-name {
  display: flex;
  align-items: center;
  /* margin-top: 20px; */
}
.dept-name,
.type-count {
  flex: 1;
}
.first-word1 {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: bolder;
  font-family: emoji;
  border-radius: 8px;
  font-size: 20px;
  background-color: #2073ef;
}

.first-word2 {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: bolder;
  font-family: emoji;
  border-radius: 8px;
  font-size: 20px;
  background-color:rgb(28 190 241);
}

.first-word3 {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: bolder;
  font-family: emoji;
  border-radius: 8px;
  font-size: 20px;
  background-color:rgb(243, 195, 12);
}

.dz-title {
  margin-left: 10px;
  font-weight: bold;
}

.display1 {
    padding: 5px 0 35px 0;
}

.display2 {
    padding: 5px 0 55px 0;
}

.display3 {
    padding: 5px 0 55px 0;
}


.type-count .count-item {
  display: flex;
  align-items: center;
  /* font-weight: 400; */
  color: #6c6f72;
  float: left;
  

}
.type-count .count-number {
  /* font-size: 20px;*/
  /* margin-left: 10px;  */
  color: #000;
  font-size: 18px;
  margin-top: 2px; 

}
</style>