premier/src/components/business/energy/index.vue

<template>
   <el-col :span="24" class="energy modular">
      <el-col class="title">能源</el-col>
      <el-col class="left">
         <el-col class="itemWrap" :span="12" v-for="(item , index) in list" :key="index">
            <el-col class="item" :span="12" >
               <el-col class="img" :span="8">
                  <el-image :src="`/assets/svg/energy${index}.svg`"  class="img" v-if="loading"> </el-image>
               </el-col>
               <el-col class="attribute" :span="16">
                  <el-col class="name">{{item.name1}}</el-col>
                  <el-col class="value">{{item.num}}</el-col>
               </el-col>
            </el-col>
            <el-col class="item" :span="12">
               <el-col class="img" :span="8">
                  <el-image :src="`/assets/svg/energy${index}.svg`"  class="img" v-if="loading"> </el-image>
               </el-col>
               <el-col class="attribute" :span="16">
                  <el-col class="name">{{item.name2}}</el-col>
                  <el-col class="value" v-if="loading">{{Math.abs(item.compare)}}%
                     <el-image :src="`/assets/svg/xj.svg`"  class="compare fill1" v-if="item.compare < 0 "  />
                     <el-image :src="`/assets/svg/ss.svg`"  class="compare fill2" v-if="item.compare >= 0" />
                  </el-col>
               </el-col>
            </el-col>
         </el-col>
      </el-col>
 </el-col>
</template>
<script setup name="Dept">
const props = defineProps({
   resData: Object,
})
const list = props.resData
const loading = ref(false)
setTimeout(()=>{
   loading.value = ref(true)
},800)
</script>
<style lang="scss" scoped >
.energy{
   width:626px;
   height:270px;
   overflow: hidden;
   box-sizing: border-box;
   .left{
      width:100%;
      display: inline-block;
      .itemWrap{
         .item{
            padding:0px 0;
            overflow: hidden;
            .img{
               width:20px;
               height:20px;
               margin:5px 8px 0 3px;
               display: inline-block;
               vertical-align: middle; 
               position: relative;
               left: -80px;
               filter: drop-shadow(#ffffff 80px 0); //设置颜色，并将阴影偏移至未溢出区域
               -webkit-filter: drop-shadow(#fff 80px 0);
               
            }
            .attribute{
               vertical-align: middle;
               display: inline-block;
               .name{
                  font-size: 11px;
               }
               .value{
                  font-size: 14px;
                  margin-top:5px;
                  font-weight: 700;
                  display: inline-block;
                  overflow: hidden;
                  span{
                     font-size: 8px;
                  }
                  .compare{
                     font-size: 10px !important;
                     width:15px;
                     height:20px;
                     display: inline-block;
                     margin-left:10px;
                     vertical-align: middle;
                  }
                  .fill1{
                     position: relative;
                     left: -80px;
                     filter: drop-shadow(red 80px 0); //设置颜色，并将阴影偏移至未溢出区域
                     -webkit-filter: drop-shadow(red 80px 0);
                  }
                  .fill2{
                     position: relative;
                     left: -80px;
                     filter: drop-shadow(green 80px 0); //设置颜色，并将阴影偏移至未溢出区域
                     -webkit-filter: drop-shadow(green 80px 0);
                  }
               }
               .introduce{
                     font-size: 10px !important;
                     width:15px;
                     height:20px;
                     display: inline-block;
                     margin-left:10px;
                     vertical-align: middle;
                  }
            }
           
         }
         .item:nth-child(2){
            border-right:1px solid rgba(255,255,255,.1);
         }
      }
      .itemWrap:nth-child(1),.itemWrap:nth-child(2){
         margin-top:0px;
      }
      .itemWrap:nth-child(3),.itemWrap:nth-child(4){
         margin-top:60px;
      }
      .itemWrap:nth-child(2),.itemWrap:nth-child(4){
         .item:nth-child(2){
            border-right:none;
         }
      }
      
   }

}
</style>