carInsightSystem/src/components/v-label-table/index.vue

<!--
 * @Author: your name
 * @Date: 2021-10-09 09:19:06
 * @LastEditTime: 2021-10-28 13:08:21
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/components/v-label-ctx/index.vue
-->
<template>
  <div class="v-l-c-outter" :style="eStyle">
    <div class="d1">
      <span class="s1" :style="{background: color}"></span>
      <span class="s2">{{label}}</span>
    </div>
    <div class="d3">
      <span class="s1">粉丝数>1000W</span>
      <span class="s2">{{cont[0]}}</span>
    </div>
    <div class="d2">
      <span class="s1">粉丝数>500W</span>
      <span class="s2">{{cont[1]}}</span>
    </div>
    <div class="d2">
      <span class="s1">粉丝数>100W</span>
      <span class="s2">{{cont[2]}}</span>
    </div>
    <div class="d2">
      <span class="s1">粉丝数>50W</span>
      <span class="s2">{{cont[3]}}</span>
    </div>
    <div class="d2">
      <span class="s1">粉丝数>20W</span>
      <span class="s2">{{cont[4]}}</span>
    </div>
    <div class="d2">
      <span class="s1">粉丝数>10W</span>
      <span class="s2">{{cont[5]}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "v-label-table",
  props: {
      label: {
          type: String,
          default: ""
      },
      contLabel: {
        type: String,
        default: "数量"
      },
      cont: {
          type: Array,
          default: []
      },
      percentage: {
          type: String,
          default: "0%"
      },
      color: {
          type: String,
          default: "#3373CC"
      },
      eStyle: {
        type: Object,
        default: () => {
          return {}
        }
      }
  }
};
</script>

<style lang="less" scoped>
.v-l-c-outter {
  width: 100%;
  height: 88px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #0F2A4D;
  .d1 {
    display: block;
    width: 14%;
    .s1 {
      display: block;
      width: 66%;
      height: 8px;
      background: red;
    }
    .s2 {
      display: block;
      font-size: 18px;
      color: #fff;
      margin-top: 10px;
    }
  }
  .d2 {
    width: 12%;
    .s1 {
      display: block;
      font-size: 12px;
      color: #7a8289;
    }
    .s2 {
      display: block;
      font-family: Bebas;
      font-size: 18px;
      color: #fff;
    }
  }
  .d3 {
    width: 14%;
    .s1 {
      display: block;
      font-size: 12px;
      color: #7a8289;
    }
    .s2 {
      display: block;
      font-family: Bebas;
      font-size: 18px;
      color: #fff;
    }
  }
}
</style>