bigdata_WX/pages/cbd/components/DeviceControl.vue

<template>
  <view class="device-control-container">
    <view class="device-status">
      <view class="status-item">
        <text class="status-label">环境温度</text>
        <text class="status-value">{{ deviceStatus.temp }}°C</text>
      </view>
      <view class="status-item">
        <text class="status-label">环境湿度</text>
        <text class="status-value">{{ deviceStatus.humidity }}%</text>
      </view>
      <view class="status-item">
        <text class="status-label">环境光照</text>
        <text class="status-value">{{ deviceStatus.light }}Lux</text>
      </view>
      <view class="status-item">
        <text class="status-label">环境湿度</text>
        <text class="status-value">{{ deviceStatus.moisture }}%</text>
      </view>
      <view class="status-item">
        <text class="status-label">环境湿度</text>
        <text class="status-value">{{ deviceStatus.pest }}%</text>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      deviceStatus: {
        temp: 25,
        humidity: 50,
        light: 800,
        moisture: 300,
        pest: 10
      }
    }
  }
}
</script>
<style scoped lang="scss">
.device-control-container {
  padding: 24rpx;
  background-color: #F7F8FA;
  border-radius: 12rpx;
}
</style>