ldt-manger-web/src/views/ldt_bills/comps/iconfont.vue

<template>
  <el-row style="width: 100%">
    <el-col :span="option.span" v-for="(data,index) in option.data" :key="index">
      <div :style="{height: `${height}px`,
            minWidth:'200px',
            backgroundColor: 'rgb(245, 247, 249)',
            borderRadius: '5px',
            margin: '4px 5px',
            // boxShadow: '2px 2px 2px 2px rgba(0, 0, 0,0.3)'
        }">
        <!-- 图标内容 -->
        <div :style="{
            height: '100%',
            width:'50%',
            display: 'inline-block',
            float: 'left'
         }">
          <div :style="{
            width: `${height/3}px`,
            height: `${height/3}px`,
            margin: `${height/2 - height/3/2 - height/2/5}px`,
            lineHeight: `${height/3+height/2/5}px`,
            boxShadow: `0px 0px 5px 5px rgba(${data.color?data.color:'0,0,0'},0.3)`,
            textAlign: 'center',
            border:`${height/2/5}px solid rgb(${data.color?data.color:'0,0,0'})`,
            borderRadius: '50%',
            backgroundColor: `rgb(${data.color?data.color:'0,0,0'})`
          }">
            <i :class="data.icon" :style="{
              fontSize: `${height/3}px`,
              color: 'white',
            }"></i>
          </div>
        </div>
        <!-- 描述内容 -->
        <div :style="{
            height: '100%',
            width:'50%',
            display: 'inline-block',
         }">
          <h4 :style="{
            marginTop: `${(height/2-10)/2}px`,
            marginBottom: '10px',
          }">{{data.title}}</h4>
          <p :style="{
            color:'gary',
            margin: '10px 0',
          }">{{data.decimals?parseFloat(data.count).toFixed(2):data.count}}</p>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "iconfont",
  props:{
    option:{
      type: "Object",
      default: {}
    },
    height:{
      type:"Number",
      default: 80
    }
  }
}
</script>

<style scoped>

</style>