整体首页

src/App.vue

@@ -92,8 +92,8 @@ export default {
     overflow: hidden;
   }
   .main {
-    height: 100vh;
-    overflow: auto;
+    height: calc(100% - 50px);
+    // overflow: auto;
   }
    ::v-deep .el-card__body {
     height: 100%;

src/css/index.scss

@@ -235,7 +235,7 @@ s {
 ::-webkit-scrollbar-thumb {
   /*滚动条里面小方块*/
   border-radius: 5px;
-  -webkit-box-shadow: inset 0 0 5px #00ffff;
+  // -webkit-box-shadow: inset 0 0 5px #00ffff;
   background: rgba(0, 0, 0, 0.2);
 }
 ::-webkit-scrollbar-track {

src/views/Home.vue

@@ -6,7 +6,7 @@
     </div>
     <ul class="menus">
       <li class="one-card" v-for="(item, i) in menus" :key="i" @click="go(item)">
-        <div class="one-card-left" :class="'menu' + i" >{{ item.name }}</div>
+        <div class="one-card-left" :class="'menu' + i">{{ item.name }}</div>
         <div class="one-card-right" :class="'color' + i">
           <div class="parm" v-for="one in item.parms" :key="one.name">
             <p>{{ one.name }}</p>
@@ -25,45 +25,35 @@
 <script>
 import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
 import { useRouter } from "vue-router";
-import {useStore} from 'vuex';
+import { useStore } from 'vuex';
 export default {
   name: 'home',
   setup() {
     const router = useRouter();
     const store = useStore();
     const state = reactive({
-      menus: [{
-        name: '处理&回用系统',
-        url: 'page',
-        parms: [{
-          name: '节水量',
-          value: '4',
-          dw: 'm³'
-        },{
-          name: '节碳量',
-          value: '0.67',
-          dw: 'kg'
-        }]
-      }, {
+      menus: [
+        {
           name: '屋顶绿化系统',
           url: 'green',
           parms: [{
             name: '径流系数',
             value: '0.6',
             dw: ''
-        },{
+          }, {
             name: '热岛减率',
             value: '21',
             dw: '%'
           }]
-      }, {
+        },
+        {
           name: '生物滞留&净化系统',
           url: 'biology',
           parms: [{
             name: '区域面积',
             value: '75',
             dw: '㎡'
-        },{
+          }, {
             name: '滞留系统液位',
             value: '323',
             dw: 'mm'
@@ -75,7 +65,7 @@ export default {
             name: '热岛消减率',
             value: '19.6',
             dw: '%'
-        },{
+          }, {
             name: '孔隙率',
             value: '10',
             dw: '%'
@@ -87,23 +77,37 @@ export default {
             name: '溢流量',
             value: '1.25',
             dw: 'L/s'
-        },{
+          }, {
             name: '氨氮',
             value: '12.5',
             dw: 'mg/L'
           },]
-      }, {
+        }, 
+        {
           name: '气象监测系统',
           url: 'weather',
           parms: [{
             name: '温度',
             value: '23',
             dw: '℃'
-        },{
+          }, {
             name: '空气湿度',
             value: '22',
             dw: '%'
           }]
+        },
+        {
+          name: '处理&回用系统',
+          url: 'page',
+          parms: [{
+            name: '节水量',
+            value: '4',
+            dw: 'm³'
+          }, {
+            name: '节碳量',
+            value: '0.67',
+            dw: 'kg'
+          }]
         }]
     })
 
@@ -151,6 +155,7 @@ export default {
     position: absolute;
     cursor: pointer;
   }
+
   .hot0 {
     top: 0px;
     left: 597px;
@@ -165,10 +170,12 @@ export default {
     top: 524px;
     left: 301px;
   }
+
   .hot5 {
     top: 172px;
     left: 300px;
   }
+
   .hot2 {
     top: 580px;
     left: 1061px;
@@ -186,76 +193,97 @@ export default {
     flex-direction: column;
     // border: 1px solid rgb(27, 187, 21);
     justify-content: space-between;
+    padding: 10px;
+
     .one-card {
       width: 100%;
       height: 140px;
-      // border: 1px solid red;
+      background: #fff;
       display: flex;
       justify-content: space-between;
-      box-shadow: 0 0 8px #99ACB0 inset;
+      box-shadow: 0px 0px 5px rgba(154, 204, 235, 1);
       cursor: pointer;
-      // color: #fff;
       .one-card-left {
         width: 80%;
         padding: 10px;
         font-weight: 800;
 
       }
+
       .menu0 {
         background: url(../assets/p1.png) center 40px no-repeat;
         background-size: 50% auto;
       }
+
       .menu1 {
         background: url(../assets/p2.png) center 40px no-repeat;
         background-size: 50% auto;
       }
+
       .menu2 {
         background: url(../assets/p3.png) center 40px no-repeat;
         background-size: 50% auto;
       }
+
       .menu3 {
         background: url(../assets/p4.png) center 40px no-repeat;
         background-size: 50% auto;
       }
+
       .menu4 {
         background: url(../assets/p5.png) center 40px no-repeat;
         background-size: 50% auto;
       }
+
       .menu5 {
         background: url(../assets/p6.png) center 40px no-repeat;
         background-size: 50% auto;
       }
+
       .color0 {
-        background: linear-gradient(to right, rgb(171, 187, 187), #7BB7B7);
+        // background: linear-gradient(to right, rgb(171, 187, 187), #7BB7B7);
+        background: #92cd6f;
       }
+
       .color1 {
-        background: linear-gradient(to right, #e2eff1, #99ACB0);
+        // background: linear-gradient(to right, #e2eff1, #99ACB0);
+        background: #73b47c;
       }
+
       .color2 {
-        background: linear-gradient(to right, #b8e5f5, #6ED2F6);
+        // background: linear-gradient(to right, #b8e5f5, #6ED2F6);
+        background: #539c88;
       }
+
       .color3 {
-        background: linear-gradient(to right, #bfdad9, #A3D8D6);
+        // background: linear-gradient(to right, #bfdad9, #A3D8D6);
+        background: #2294a4;
       }
+
       .color4 {
-        background: linear-gradient(to right, #c3d4cb, #81CFA3);
+        // background: linear-gradient(to right, #c3d4cb, #81CFA3);
+        background: #21acc5;
       }
+
       .color5 {
-        background: linear-gradient(to right, #c3d4cb, #81CFA3);
+        // background: linear-gradient(to right, #c3d4cb, #81CFA3);
+        background: #2b79aa;
       }
+
       .one-card-right {
         width: 40%;
-        color: #3E9537;
+        color: #fff;
         padding: 10px;
+
         .parm {
           display: flex;
           flex-direction: column;
           line-height: 30px;
           align-items: start;
           justify-content: space-around;
+
           .font24 {
             font-size: 24px;
-            color: #00646C;
             font-size: 800;
           }
         }
@@ -263,5 +291,4 @@ export default {
     }
 
   }
-}
-</style>
+}</style>