更新功能
|
After Width: | Height: | Size: 529 B |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
|
@ -237,7 +237,7 @@ onMounted(() => {
|
|||
width: 96%;
|
||||
box-sizing: border-box !important;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
.box-title {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,175 @@
|
|||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue"
|
||||
|
||||
const dataList = ref([
|
||||
{
|
||||
icon: '/src/assets/index_img/data1.png',
|
||||
name: '噪音'
|
||||
},
|
||||
{
|
||||
icon: '/src/assets/index_img/data2.png',
|
||||
name: '防火'
|
||||
},
|
||||
{
|
||||
icon: '/src/assets/index_img/data3.png',
|
||||
name: '空气湿度'
|
||||
},
|
||||
{
|
||||
icon: '/src/assets/index_img/data4.png',
|
||||
name: '甲烷'
|
||||
},
|
||||
{
|
||||
icon: '/src/assets/index_img/data5.png',
|
||||
name: '氮气'
|
||||
},
|
||||
{
|
||||
icon: '/src/assets/index_img/data6.png',
|
||||
name: '空气温度'
|
||||
},
|
||||
])
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="box">
|
||||
<div class="view box1">
|
||||
<div class="box-title">
|
||||
<div class="text">硬件产品展示</div>
|
||||
<div class="bg"></div>
|
||||
</div>
|
||||
<div class="c-box">
|
||||
<div class="c-item" v-for="(item, index) in 6" :key="index">
|
||||
<div class="name">
|
||||
<img src="/src/assets/index_img/icon2.png" />
|
||||
<div>4G中转站</div>
|
||||
</div>
|
||||
<div class="tip">
|
||||
主要功能详细介绍,主要功能详细介绍,主要功能详细介绍,主要功能详细介绍,主要功能详细介绍,主要功能详细介绍,主要功能详细介绍,主要功能详细介绍,
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="view box2">
|
||||
<div class="box-title">
|
||||
<div class="text">智能监测数据</div>
|
||||
<div class="bg"></div>
|
||||
</div>
|
||||
<div class="c-box">
|
||||
<div class="c-item" v-for="(item, index) in dataList" :key="index">
|
||||
<img :src="item.icon" />
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
position: relative;
|
||||
.view {
|
||||
/* border: 1px solid red; */
|
||||
width: 96%;
|
||||
box-sizing: border-box !important;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-direction: column;
|
||||
.box-title {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
.text {
|
||||
text-align: left;
|
||||
font-family: "ifonts";
|
||||
padding: 0.2rem 0.8rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.bg {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
background-image: url(../../../assets/index_img/title1.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.box1 {
|
||||
height: 60%;
|
||||
.c-box {
|
||||
height: 90%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 0.8rem;
|
||||
box-sizing: border-box;
|
||||
padding-top: 0.6rem;
|
||||
.c-item {
|
||||
width: 50%;
|
||||
height: 33%;
|
||||
.name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: calc(100% - 3rem);
|
||||
img {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
}
|
||||
.tip {
|
||||
height: 3rem;
|
||||
width: 100%;
|
||||
font-size: 0.7rem;
|
||||
text-align: start;
|
||||
box-sizing: border-box;
|
||||
padding-left: 1rem;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3; /* 这里的数字表示要显示的行数 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.box2 {
|
||||
height: 38%;
|
||||
.c-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 0.9rem;
|
||||
.c-item {
|
||||
width: 33%;
|
||||
height: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img {
|
||||
height: 70%;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.border {
|
||||
background-image: url(../../../assets/img/border1.png);
|
||||
background-size: 100% 100%;
|
||||
height: 100%;
|
||||
width: 0.4rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<script setup>
|
||||
import leftItme from "./components/left.vue";
|
||||
import rightItme from "./components/right.vue";
|
||||
import centerItme from "./components/center.vue";
|
||||
import test from "./components/test.vue";
|
||||
</script>
|
||||
|
|
@ -12,7 +13,7 @@ import test from "./components/test.vue";
|
|||
<div class="item item_c">
|
||||
<div style="height: 61%; display: flex; justify-content: space-between">
|
||||
<centerItme style="width: 64%; border: 1px solid red"></centerItme>
|
||||
<div style="width: 35%; border: 1px solid red"></div>
|
||||
<rightItme style="width: 35%"></rightItme>
|
||||
</div>
|
||||
<div style="height: 36%; border: 1px solid red"></div>
|
||||
</div>
|
||||
|
|
|
|||