MqttDemo/components/deviceCard/deviceCard.vue

<template>
  <view class="box"  @click="goDeviceInfo">
    <view class="topBox">
      <text>{{device.devName}}</text>
      <text>{{device.online ? '在线':'离线'}}</text>
    </view>
    <text>电量：{{device.Power}}%</text>
    <text class="iccid" space="ensp">uuid: {{device.uuid}}</text>
  </view>
</template>

<script>

export default {
  props: {
    device:{
      type:Object,
      default:function(){
        return {
          name:'',
          ssid:''
        }
      }
    }
  },
  data: () => ({}),
  computed: {},
  methods: {
    goDeviceInfo() {
      console.log("goDeviceInfo");
      uni.navigateTo({
        url: "../deviceInfo/deviceInfo",
        complete(res){
          console.warn(res);
        }
      });
    },
  },
  watch: {},

  // 组件周期函数--监听组件挂载完毕
  mounted() {},

  // 组件周期函数--监听组件激活(显示)
  activated() {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() {},
};
</script>

<style>
.box{
  display: flex;
  flex-direction:column;
  justify-content: space-between;
  width: 40vw;
  height: 25vw;
  border: 1rpx solid #333333;
}
.topBox{
  display: flex;
  flex-direction:row;
  justify-content: space-between;
}
.iccid{
  word-break: break-all;
   /* text-overflow:ellipsis;
  overflow: hidden;
  white-space: nowrap; */
}


</style>