更新功能

src/view/index/components/left.vue

@@ -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%;

src/view/index/components/right.vue

@@ -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>

src/view/index/index.vue

@@ -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>