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

<template>
  <view class="content" @click="goDeviceInfo">
    <image
      class="device-img"
      :src="'https://airsmart-photo1.oss-cn-shanghai.aliyuncs.com/wx/productModel/2X/'+device.ProdModel+'.png'"
      mode="aspectFit"
    />
    <battery :battery="device.Power" class="battery"></battery>
    <view class="text-view">
      <view class="product">
        <text class="product-font">型号 {{device.ProdModel}}</text>
        <text class="product-font" :class="{online:device.online}">{{device.online ? '在线':'离线'}}</text>
      </view>
      <text class="name-font">{{device.devName}}</text>
    </view>
    <view class="bottom-line"></view>
    <view class="right-view">
      <image
        class="right-img"
        src="../../../static/common/right.svg"
        mode="aspectFit"
      />
      <view class="red-point" v-if="false"/>
    </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-X',
          Power:50,
          
        }
      }
    }
  },
  data: () => ({}),
  computed: {},
  methods: {
	  goDeviceInfo() {
	    this.$emit('onclick')
	  },
  },
  watch: {},

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

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

<style>
.content {
  width: 100vw;
  height: 236rpx;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}
.device-img {
  width: 120rpx;
  height: 111rpx;
  margin-left: 32rpx;
}
.battery {
  margin-left: 6rpx;
  margin-bottom: 62rpx;
  align-self: flex-end;
}
.text-view {
  margin-left: 42rpx;
  margin-bottom: 62rpx;
  align-self: flex-end;
  display: flex;
  flex-direction: column-reverse;
}
.product {
  width: 40vw;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.product-font {
  font-size: 24rpx;
  font-weight: 400;
  color: #999999;
}
.online{
  color: #684BBE;
}

.name-font {
  font-size: 30rpx;
  font-weight: 600;
  color: #353535;
  margin-bottom: 6rpx;
}
.bottom-line {
  position: absolute;
  bottom: 0;
  left: 4vw;
  width: 92vw;
  height: 1px;
  opacity: 0.2;
  background-image: linear-gradient(to right, #c8c8c8, #484848, #979797);
}
.right-view {
  position: absolute;
  right: 0;
  height: 100%;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}
.right-img {
  width: 13rpx;
  height: 21rpx;
  margin-right: 34rpx;
}
.red-point {
  width: 12rpx;
  height: 12rpx;
  background: #fb0202;
  border-radius: 8rpx;
  margin-right: 30rpx;
}
</style>