写个物联网设备界面uniapp

好的，以下是一个简单的物联网设备界面的uniapp代码：

<template>
  <view class="container">
    <!-- 设备信息 -->
    <view class="device-info">
      <text>{{ device.name }}</text>
      <text class="status" :class="{online: device.status === 'online', offline: device.status === 'offline'}">{{ device.status }}</text>
    </view>

    <!-- 控制面板 -->
    <view class="control-panel">
      <view class="control-group">
        <text>开关：</text>
        <switch :checked="device.switch" @change="toggleSwitch"></switch>
      </view>

      <view class="control-group">
        <text>亮度：</text>
        <slider :value="device.brightness" @change="changeBrightness"></slider>
      </view>

      <view class="control-group">
        <text>颜色：</text>
        <color-picker :value="device.color" @change="changeColor"></color-picker>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        device: {
          name: '智能灯',
          status: 'online',
          switch: true,
          brightness: 50,
          color: '#ff0000'
        }
      }
    },

    methods: {
      toggleSwitch(checked) {
        this.device.switch = checked;
        // 发送控制指令到设备
        this.sendCommand('switch', checked);
      },

      changeBrightness(value) {
        this.device.brightness = value;
        // 发送控制指令到设备
        this.sendCommand('brightness', value);
      },

      changeColor(value) {
        this.device.color = value;
        // 发送控制指令到设备
        this.sendCommand('color', value);
      },

      sendCommand(action, value) {
        // 发送控制指令到设备的代码
        // ...
      }
    }
  }
</script>

<style>
  .container {
    padding: 20px;
  }

  .device-info {
    display: flex;
    align-items: center;
  }

  .device-info text {
    font-size: 24px;
    font-weight: bold;
    margin-right: 10px;
  }

  .device-info .status {
    font-size: 20px;
    color: #666;
  }

  .device-info .status.online {
    color: green;
  }

  .device-info .status.offline {
    color: red;
  }

  .control-panel {
    margin-top: 20px;
  }

  .control-group {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .control-group text {
    font-size: 20px;
    margin-right: 10px;
  }

  .control-group switch,
  .control-group slider,
  .control-group color-picker {
    flex: 1;
  }
</style>

以上代码实现了一个简单的智能灯设备界面，包括设备信息、开关、亮度和颜色控制。你可以根据自己的需求进行修改和扩展。