• wuhao's avatar
    kasdl · 900a8b1a
    wuhao authored
    900a8b1a
counter-grid.vue 2.52 KB
<script setup>
const state=reactive({
  arry:[
    {title:"软件销售额",icon:"i carbon:ibm-z-cloud-mod-stack",unit:"万元",total:"1874"},
    {title:"硬件销售额",icon:"i carbon:chip",unit:"万元",total:"3276"},
    {title:"技术服务",icon:"i carbon:user-speaker",unit:"万元",total:"315"},
    {title:"安全服务",icon:"i carbon:rule",unit:"万元",total:"769"},
  ],
})

const borderConfig=(index)=>{
  let rotate
  if(index==0){
    rotate="x";
  }else if(index==1){
    rotate="all";
  }else if(index==2){
    rotate=null;
  }else if(index==3){
    rotate="y";
  }
  return {
    dur: 3,
    opacity: 0.7,
    // decoration: false,
    rotate
  }
}

</script>
<template>
  <div class="screenA-counterGrid">
    <aYinTechBorderB3 :config="borderConfig(index)" v-for="(item,index) in state.arry" :key="index">
      <div class="inner-content">
        <div class="block-title">{{item.title}} <span v-if="item.unit">({{item.unit}})</span></div>
        <div class="total">
          <i :class="[item.icon,'icon']"></i>
          <!-- <DigitalTransform class="numbers" :value="123210"  :interval="$vuex.state.globalConfig.ani?3000:0"></DigitalTransform> -->
          <DigitalTransform class="numbers" :value="item.total" :useGrouping="true" :interval="3000"></DigitalTransform>
          <!-- <span class="unit">{{item.unit}}</span> -->
        </div>
      </div>
    </aYinTechBorderB3>
    <!-- <div class="block" > <div class="bdTechBottom"></div> </div> -->
  </div>
</template>
<style lang="less">
.screenA-counterGrid{display: grid; grid-template-columns: repeat(2,1fr); height: 100%; grid-template-rows: repeat(2,1fr); grid-gap: 12px;  position: relative;
  .aYinTechBorderB3{ padding:0;   position: relative; 
    //&:nth-child(1){ grid-area: 1 / 1 / 2 / 3;  }
    .inner-content{
      .block-title{position: absolute;.ff("cn1"); left:0; right:0; text-align: center; top:10px;.fc(var(--font-normal)); font-size: 14px; }
      .total{margin: 0; text-align: center; line-height: 30px; .poa; left:0; right:0; top:60%; .fixc("y");
        i{display:inline-block;font-size:32px; vertical-align: text-top; margin-right: 10px;.fc(var(--font-normal));}
        .numbers{display:inline-block; text-align: center; font-size: 32px; .ff("en0");  position: relative; vertical-align: text-top; .fc(var(--font-strong));
          .badge{position: absolute; left:100%; top:-10px; font-size: 14px; width: 30px; height:30px; padding:0; line-height: 1; }
        }
        .unit{font-size: 14px; margin:0 0 0 10px;.fc(var(--font-strong));}
      }
    }
  }
}
</style>