bigdata_WX/pages/cb/wenshizs/components/element.vue

<template>
  <view class="element">
    <view class="element-header">
      <view class="element-title">1号环控</view>
      <view class="element-status">
        2024-01-25 16:05:05
        <u-icon name="reload" color="#14A478" style="margin-left: 20rpx" />
      </view>
    </view>
    <view class="element-body">
      <view class="element-row" v-for="(item, index) in list" :key="index">
        <image :src="item.url" class="element-col-icon" />
        <view class="element-col">
          <view class="element-col-title"
            >{{ item.content }}
            <text class="unit">{{ item.unit }}</text>
          </view>
          <view class="element-col-content">{{ item.title }}</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: 'Element',
  data() {
    return {
      list: [
        {
          url: 'https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/image/zhongshui/air-humidity.png',
          title: '空气温度',
          unit: '℃',
          content: '12',
        },
        {
          url: 'https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/image/zhongshui/air-temperature.png',
          title: '空气湿度',
          unit: '%',
          content: '80',
        },
        {
          url: 'https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/image/zhongshui/soil-temperature.png',
          title: '土壤温度',
          unit: '℃',
          content: '80',
        },
        {
          url: 'https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/image/zhongshui/soil-humidity.png',
          title: '土壤湿度',
          unit: '%',
          content: '80',
        },
        {
          url: 'https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/image/zhongshui/co2.png',
          title: '二氧化碳',
          unit: 'ppm',
          content: '80',
        },
        {
          url: 'https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/image/zhongshui/illumination.png',
          title: '光照',
          unit: 'LUX',
          content: '80',
        },
        {
          url: 'https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/image/zhongshui/ph.png',
          title: '土壤PH值',
          unit: '',
          content: '80',
        },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
.element {
  .element-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    color: #042118;
    font-family: 'Source Han Sans CN VF';
    font-size: 28rpx;
    font-weight: 700;
    .element-status {
      color: #687a74;
      text-align: center;
      font-family: 'Source Han Sans CN VF';
      font-size: 28rpx;
      font-weight: 400;
    }
  }
  .element-body {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20rpx;
    padding: 20rpx;
    .element-row {
      display: flex;
      margin-bottom: 20rpx;
      .element-col-icon {
        width: 100rpx;
        height: 100rpx;
        margin-right: 10rpx;
      }
      .element-col {
        .element-col-title {
          font-size: 28rpx;
          color: #042118;
          font-weight: 700;
          .unit {
            font-size: 24rpx;
            color: #999;
          }
        }
        .element-col-content {
          font-size: 24rpx;
          color: #666;
        }
      }
    }
  }
}
</style>