OhPlay/components/device-manager/deviceItem/deviceItem.vue

<template>
  <view class="flex-row device-item" :class="{ dih164: showBtn }"  :hover-class="showBtn ? 'none' : 'view-hover'" @click="goDeviceInfo">
    <image
      class="device-x1 ml32"
      :src="
        'https://airsmart-photo1.oss-cn-shanghai.aliyuncs.com/wx/productModel/2X/' +
        device.ProdModel +
        '.png'
      "
      mode="aspectFit"
    />
    <battery :battery="device.Power" class="di-battery" :class="showBtn ? 'dimb26':'dimb62'"></battery>
    <view class="di-text-view" :class="showBtn ? 'dimb26':'dimb62'">
      <view class="flex-row di-product">
        <text class="gray-normal-24rpx">型号 {{ device.ProdModel }}</text>
        <text class="gray-normal-24rpx" :class="{ online: device.online }">{{
          device.online ? "在线" : "离线"
        }}</text>
      </view>
      <text class="black-mudium-30rpx" style="margin-bottom: 6rpx">{{
        device.devName
      }}</text>
    </view>
    <view v-if="!showBtn" class="line di-bottom-line"></view>
    <view class="di-right-view">
      <button v-if="showBtn" class="btn-mini di-release" plain='true' @click.self="releaseClick">注销设备</button>
      <image
        v-if="!showBtn"
        class="di-right-img"
        src="../../../static/common/right.svg"
        mode="aspectFit"
      />
      <view v-if="!showBtn && device.hasNewVer" class="di-red-point" />
    </view>
  </view>
</template>

<script>
import battery from "../../battery/battery.vue";
//MW-V(4G)
export default {
  components: { battery },
  props: {
    // 设备信息的对象
    device: {
      type: Object,
      default: function () {
        return {
          devName: "猫王· 旅行者1号",
          ProdModel: "MW-V",
          Power: 50,
        };
      },
    },
    //是否显示右侧的注销按钮
    showBtn:{
      type:Boolean,
      default:false
    }

  },
  data: () => ({}),
  computed: {},
  methods: {
    //item点击
    goDeviceInfo() {
      this.$emit("onclick");
    },
    //注销按钮点击
    releaseClick(){
      this.$emit("onrelease");
    }
  },
  watch: {},

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

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

<style>
.device-item {
  width: 100vw;
  height: 236rpx;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}
.dih164{
  height: 164rpx
}
.dimb26{
  margin-bottom: 26rpx;
}
.dimb62{
  margin-bottom: 62rpx;
}
.ml32 {
  margin-left: 32rpx;
}
.di-battery {
  margin-left: 6rpx;
  align-self: flex-end;
}
.di-text-view {
  margin-left: 42rpx;
  align-self: flex-end;
  display: flex;
  flex-direction: column-reverse;
}
.di-product {
  width: 40vw;
  justify-content: space-between;
}

.online {
  color: #684bbe;
}

.di-bottom-line {
  position: absolute;
  bottom: 0;
  left: 4vw;
  width: 92vw;
}
.di-right-view {
  position: absolute;
  right: 0;
  height: 100%;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}
.di-right-img {
  width: 13rpx;
  height: 21rpx;
  margin-right: 34rpx;
}
.di-red-point {
  width: 12rpx;
  height: 12rpx;
  background: #fb0202;
  border-radius: 8rpx;
  margin-right: 30rpx;
}
.di-release{
  background-color: #979797;
  color: #353535;
  align-self: flex-end;
  margin-right: 44rpx;
  margin-bottom: 30rpx;
}
</style>