SaiLun.Thermoelectricity/ruoyi-ui/src/views/board/index1.vue

<template>
  <div>
    <div class="content">
      <div class="title">赛轮智慧热电无人巡检系统</div>
      <div class="safe">已安全运行 <span style="color: #4667d0;font-size: 1.2vw;padding: 0 0.3vw"> 382 </span> 天</div>
      <div class="time">{{ parseTime(new Date(), '{y}.{m}.{d} {h}:{i}:{s} 周{a}') }}</div>

      <div class="list" v-for="(i,k) in list" :style="`left:${i.left}%`">
        <div class="itemTitle">{{ k + 1 }}#抽屉柜</div>
        <div class="items">
          <div class="item" v-for="(ii,kk) in 100">
            <div class="name">{{k+1}}#-{{kk+1}}</div>
            <div class="tem">温度：22℃</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      list: [
        {
          left: 7.7
        },
        {
          left: 19.8
        },
        {
          left: 31.9
        },
        {
          left: 44.0
        },
        {
          left: 56.1
        },
        {
          left: 68.2
        },
        {
          left: 80.3
        },
        {
          left: 92.4
        },
      ]
    }
  },
  mounted() {
  },
  methods: {}
}
</script>
<style scoped>
.content {
  background-image: url("~@/assets/board/bg1.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.title {
  position: absolute;
  top: 2.8%;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 1.5vw;
  color: #fff;
  font-weight: 700;
  letter-spacing: 10px;
  transform: translateY(-50%);
}

.safe {
  position: absolute;
  top: 2.4%;
  right: 2%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 0.7vw;
}

.time {
  position: absolute;
  top: 2.4%;
  left: 2%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 0.7vw;
  letter-spacing: 1px;
}

.list {
  position: absolute;
  width: 11%;
  height: 85%;
  top: 9.3%;
  transform: translateX(-50%);
  background-image: url("~@/assets/board/item.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.itemTitle {
  position: absolute;
  top: 4.3%;
  left: 15%;
  font-size: 0.8vw;
  color: #fefefe;
  transform: translateY(-50%);
}

.items {
  position: absolute;
  top: 8.4%;
  left: 0;
  width: 100%;
  height: 91.4%;
  overflow: auto;
}

.items::-webkit-scrollbar {
  display: none;
}

.item {
  position: relative;
  width: 100%;
  height: 16.7%;
  background-image: url("~@/assets/board/icon.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.name{
  position: absolute;
  top: 37.6%;
  left: 51%;
  transform: translateY(-50%);
  font-size: 0.95vw;
  color: #fefefe;
  letter-spacing: 2px;
}
.tem{
  position: absolute;
  top: 62.7%;
  left: 51%;
  transform: translateY(-50%);
  font-size: 0.7vw;
  color: #598fce;
  letter-spacing: 1px;
  white-space: nowrap;
}
</style>