thoth-frontend-test/src/views/dataBigManage/components/dataItem/index.vue

<template>
  <div class="dataItem flex-center-start" :style="{ background: data.bgColor, padding: data.padding }">
    <addIcon :inner-color="data.innerColor" :out-color="data.outColor" />
    <div class="textWord">
      <div>
        <span>{{ data.label }}</span>
        <span class="title">{{ data.title }}</span>
        <span>{{ data.titleUnit }}</span>
      </div>
      <!-- <div class="ellipsis" v-html="subTitle" /> -->
      <div class="subTitleName">
        <span v-if="data.subTitleUnit === 'rate'">
          <span>环比：</span>
          <span :class="Number(data.subTitle) > 0 ? 'item-up' : 'item-down'">
            <i class="el-icon-caret-top" v-if="Number(data.subTitle) > 0" />
            <i class="el-icon-caret-bottom" v-else />
            {{ data.subTitle }}%
          </span>
        </span>
        <span v-else v-html="data.subTitle" />
      </div>
    </div>
  </div>
</template>
<script>
import addIcon from '@/components/addIcon'
export default {
  components: {
    addIcon
  },
  props: {
    data: {
      type: Object,
      required: false,
      default: () => {}
    }
  }
}
</script>
<style scoped lang='less'>
.dataItem {
  border-radius: 6px;
  padding: 8px 12px;
  .textWord {
    padding-left: 10px;
    width: 90%;
    .title {
      color: #333;
      font-size: 18px;
      font-weight: 600;
    }
    .subTitleName {
      color: #999;
      font-size: 12px;
     .item-up {
        color:#F32850
      }
      .item-down {
        color:#9FFF39
      }
    }
  }
}
</style>