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

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