<!--
 * @Author: your name
 * @Date: 2021-10-25 14:53:19
 * @LastEditTime: 2021-10-25 15:16:41
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \hyyfScreen\src\views\Zoology\leftTop\SwiperContent.vue
-->
<template>
  <div class="swiper-content" @mouseover="onEnter" @mouseout="onLeave">
    <div  class="content" @click.stop="jump(list.roomId)">
      <div class="title">{{ list.room }}</div>
      <div class="item">
        <div class="temp-icon"></div>
        <div class="data">{{ list.temperature != null ? list.temperature + '℃' : '设备暂无数据' }}</div>
      </div>
      <div class="item">
        <div class="rh-icon"></div>
        <div class="data">{{ list.humidity != null ? list.humidity + 'RH' : '设备暂无数据' }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    list: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  methods: {
    jump(id) {
      this.$emit('getRoomId', id);
    },
    onEnter() {
      this.$emit('onEnter')
    },
    onLeave() {
      this.$emit('onLeave')
    }
  }
}
</script>
<style scoped>
.content {
  display: inline-block;
  width: 110px;
  margin: 10px;
  background-color: rgb(15,21,43);
  color: #66FFFF;
  font-weight: 200;
  padding: 20px;
  height: 150px;
}
.title {
  font-size: 14px;
}
.item {
  display: flex;
  padding: 20px 10px 5px;
}
.temp-icon {
  width: 35px;
  height: 35px;
  background: url("../../../assets/Zoology/u4898.svg") no-repeat;
  background-size: contain;
  /* display: inline-block; */
}
.rh-icon {
  width: 35px;
  height: 35px;
  background: url("../../../assets/Zoology/u4899.svg") no-repeat;
  background-size: contain;
  /* display: inline-block; */
}
.data {
  margin-left: 5px;
}
</style>
