<script setup>
|
import FlexLayout from "@/components/FlexLayout.vue";
|
import CardBox from "@/components/CardBox.vue";
|
import {ref} from "vue";
|
|
const homeInfo = ref([]);
|
for(let i=1; i<10; i++) {
|
homeInfo.value.push({
|
name: "#"+i+"室",
|
temp: 32,
|
hum: 7,
|
diffPre: 1
|
});
|
}
|
</script>
|
|
<template>
|
<flex-layout>
|
<div class="home-content">
|
<div class="card-box-list">
|
<div
|
class="card-box-item"
|
v-for="(item, index) in homeInfo" :key="'key'+index">
|
<card-box>
|
<div class="home-info-list">
|
<div class="home-info-item">
|
{{ item.name }}温度：{{ item.temp }}
|
</div>
|
<div class="home-info-item">
|
{{ item.name }}湿度：{{ item.hum }}
|
</div>
|
<div class="home-info-item">
|
{{ item.name }}压差：{{ item.diffPre }}
|
</div>
|
</div>
|
</card-box>
|
</div>
|
</div>
|
|
</div>
|
</flex-layout>
|
</template>
|
|
<style scoped>
|
.home-content {
|
position: relative;
|
height: 100%;
|
background-image: url("./images/home.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
}
|
.card-box-list {
|
text-align: center;
|
.card-box-item {
|
display: inline-block;
|
margin-left: 16px;
|
}
|
}
|
|
.home-info-list {
|
padding: 8px;
|
}
|
</style>
|
