(自用)自定义卡片样式组件

 

 

<template>
<!--
        传入一个data的数组
        data:[{
          title: '全部订单', // 数值名
          num: 34, // 数值
          back: '#e4ecff', // 背景色
          fore: '#4d7cfe', // 前景色
          icon: 'el-icon-s-order' // icon图标
          bColor:'#f5f7f9'
        }]
 -->
  <div>
    <el-card shadow="never" style="padding:10px 0 10px 20px">
      <div v-for="(item,index) in data" class="cardStyle" :style="{background:item.bColor||'f5f7f9'}">
        <div class="circle" :style="{background:item.back||'#e4ecff'}">
          <div class="circleContent" :style="{background:item.fore||'#4d7cfe'}">
            <i :class="item.icon||'el-icon-s-order'"></i>
          </div>
        </div>
        <div class="circleSpan">
          <span>
            <count-to
              :start-val="0"
              :end-val="item.num"
              :duration="1000"
              class="card-panel-num"
            />
          </span>
          <span>{{ item.title }}</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import countTo from 'vue-count-to'

export default {
  name: 'MyCard-1',
  props: {
    data: {
      default: () => [],
      type: Array
    },
    cStyle:{
      default: () => {},
      type: Object
    }
  },
  components: {
    countTo
  },
  data() {
    return {

    }
  },

  methods: {},
  watch: {
    cStyle(nal){
      console.log(nal)
    }
  }

}
</script>

<style scoped>
.userHead {
  border-radius: 50%;
  width: 130px;
  height: 130px;
  float: left;
}

.cardStyle {
  margin: 10px 0 10px 45px;
  float: left;
  width: 300px;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 4px;
  background: #f5f7f9;
}

.circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #e4ecff;
}

.circleContent {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  background: #4d7cfe;
  line-height: 55px;
}

.circleContent i {
  font-size: 24px;

}

.circleSpan {
  display: block;
  color: #252631;
  font-size: 24px;
  line-height: 37px;
}

.circleSpan span:nth-child(2) {
  display: block;
  color: #98a9bc;
  font-size: 12px;
}


</style>