MqttDemo/components/deviceCard/deviceCard.vue

<template>
  <view class="box">
    <view class="topBox">
      <text>{{device.name}}</text>
      <text>{{device.online ? '在线':'离线'}}</text>
    </view>
    <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: {},
  watch: {},

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

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

<style>
.box{
  display: flex;
  flex-direction:column;
  justify-content: space-between;
  width: 35vw;
  height: 22vw;
  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>