bigdata_WX/pages/cbd/components/pestDiscern.vue

<template>
  <view class="pest-discern">
    <view class="pest-discern__header">
      <view class="pest-discern__title">
        虫害识别
      </view>
    </view>
    <view class="pest-discern__content">
      <view class="pest-discern__item" v-for="(item,index) in pests" :key="index">
        <view class="pest-discern__item-title">
          {{ item.name }}
        </view>
        <view class="pest-discern__item-content">
          <u-line-progress :active-color="item.color" :percent="item.percent" :show-percent="false" height="8"></u-line-progress>
        </view>
        <view class="pest-discern__item-count">
          6521
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      pests: [
        {
          color:'#FF3546',
          name: '叶蝉',
          percent: 90
        },
        {
          color:'#F69B47',
          name: '稻飞虱',
          percent: 80
        },
        {
          color:'#EEAC19',
          name: '水龟虫',
          percent: 70
        },
        {
          color:'#0085FF',
          name: '蝼蛄',
          percent: 60
        }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.pest-discern {
  width: 100%;
  padding: 32rpx;
  box-sizing: border-box;
  background: #fff;
  border-radius: 16rpx;
}
.pest-discern__header {
  padding: 20rpx 0rpx;
  font-size: 32rpx;
  color: #042118;
  font-family: 'Source Han Sans CN VF';
  font-weight: 700;
}
.pest-discern__title {
  font-size: 32rpx;
  color: #042118;
  font-family: 'Source Han Sans CN VF';
  font-weight: 700;
}
.pest-discern__item {
  display: flex;
  width: 100%;
  margin-bottom: 20rpx;
  align-items: center;
  .pest-discern__item-title{
    width: 120rpx;
    font-size: 28rpx;
    color: #042118;
    font-family: 'Source Han Sans CN VF';
    font-weight: 400;
    // 超出隐藏
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pest-discern__item-content{
    flex: 1;
    margin: 0 20rpx;
  }
  .pest-discern__item-count{
    width: 80rpx;
    font-size: 28rpx;
    color: #042118;
    text-align: right;
  }
}
</style>