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

<template>
  <div class="dataItem" :style="{ background: item.bgColor, padding: item.padding, alignItems: item.type === 'circle' && 'baseline' }">
    <div v-if="item" class=" flex-center-start">
      <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" @click.stop="$emit('subCountListClick', { index: 1, subIndex: 0})">{{ 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'" @click.stop="$emit('subCountListClick', { index: 0, subIndex: 0})">
            <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>
    <div v-if="item.subListCountList" class="subCountList">
      <div v-for="(subItem, subItemIndex) in item.subListCountList" :key="subItemIndex" class="subCountItem" @click.stop="$emit('subCountListClick', { index: subItemIndex + 1, subIndex: 0})">
          <span v-for="(subItemItem, subItemIndexIndex) in subItem" :key="subItemIndex + subItemIndexIndex">
            <span>{{ subItemItem.label }}</span><span>{{ subItemItem.beforeLabel }}</span>&nbsp;&nbsp;<span class="isHove title" @click.stop="$emit('subCountListClick', { index: subItemIndex + 1, subIndex: subItemIndexIndex})">{{ subItemItem.countStr }}{{ subItemItem.unit }}</span>&nbsp;&nbsp;<span>{{ subItemItem.afterLabel }}</span>
          </span>
      </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;
      }
    }
  }
  .subCountList {
    font-size: 12px;
    color: #666;
    font-weight: 500;
    margin-top: 10px;
    .subCountItem {
      margin-bottom: 1px;
      cursor: pointer;
      &:last-child{
        margin-bottom: 0;
      }
    }
  }
}
</style>