整体首页

src/App.vue

@@ -92,8 +92,8 @@ export default {
     overflow: hidden;
   }
   .main {
-    height: 100vh;
+    height: calc(100% - 50px);
-    overflow: auto;
+    // 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,15 +6,15 @@
     </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>
+            <p>{{ one.name }}</p>
-              <font>
+            <font>
-                <span class="font24">{{ one.value }}</span>
+              <span class="font24">{{ one.value }}</span>
-                <span> {{ one.dw }}</span>
+              <span> {{ one.dw }}</span>
-              </font>
+            </font>
-              
+
           </div>
         </div>
       </li>
@@ -25,86 +25,90 @@
 <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: [{
+      menus: [
-        name: '处理&回用系统',
+        {
-        url: 'page',
+          name: '屋顶绿化系统',
-        parms: [{
+          url: 'green',
-          name: '节水量',
+          parms: [{
-          value: '4',
+            name: '径流系数',
-          dw: 'm³'
+            value: '0.6',
-        },{
+            dw: ''
-          name: '节碳量',
+          }, {
-          value: '0.67',
+            name: '热岛减率',
-          dw: 'kg'
+            value: '21',
+            dw: '%'
+          }]
+        },
+        {
+          name: '生物滞留&净化系统',
+          url: 'biology',
+          parms: [{
+            name: '区域面积',
+            value: '75',
+            dw: '㎡'
+          }, {
+            name: '滞留系统液位',
+            value: '323',
+            dw: 'mm'
+          }]
+        }, {
+          name: '透水铺装&入渗系统',
+          url: 'shentou',
+          parms: [{
+            name: '热岛消减率',
+            value: '19.6',
+            dw: '%'
+          }, {
+            name: '孔隙率',
+            value: '10',
+            dw: '%'
+          }]
+        }, {
+          name: '调蓄系统&溢流监测系统',
+          url: 'chuxu',
+          parms: [{
+            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'
+          }]
         }]
-      }, {
-        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'
-        }]
-      }, {
-        name: '透水铺装&入渗系统',
-        url: 'shentou',
-        parms: [{
-          name: '热岛消减率',
-          value: '19.6',
-          dw: '%'
-        },{
-          name: '孔隙率',
-          value: '10',
-          dw: '%'
-        }]
-      }, {
-        name: '调蓄系统&溢流监测系统',
-        url: 'chuxu',
-        parms: [{
-          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: '%'
-        }]
-      }]
     })
 
     onMounted(() => {
@@ -151,34 +155,37 @@ export default {
     position: absolute;
     cursor: pointer;
   }
-    .hot0 {
+
-      top: 0px;
+  .hot0 {
+    top: 0px;
     left: 597px;
-    }
+  }
 
-    .hot1 {
+  .hot1 {
-      top: 133px;
+    top: 133px;
     left: 1051px;
-    }
+  }
 
-    .hot4 {
+  .hot4 {
-      top: 524px;
+    top: 524px;
     left: 301px;
-    }
+  }
-    .hot5 {
-      top: 172px;
-    left: 300px;
-    }
-    .hot2 {
-      top: 580px;
-    left: 1061px;
-    }
 
-    .hot3 {
+  .hot5 {
-      top: 757px;
+    top: 172px;
+    left: 300px;
+  }
+
+  .hot2 {
+    top: 580px;
+    left: 1061px;
+  }
+
+  .hot3 {
+    top: 757px;
     left: 647px;
-    }
+  }
-  
+
   .menus {
     float: right;
     width: 20%;
@@ -186,82 +193,102 @@ 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;
+        background-size: 50% auto;
       }
+
       .menu2 {
         background: url(../assets/p3.png) center 40px no-repeat;
-        background-size: 50%  auto;
+        background-size: 50% auto;
       }
+
       .menu3 {
         background: url(../assets/p4.png) center 40px no-repeat;
-        background-size: 50%  auto;
+        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;
           }
         }
       }
     }
-    
+
   }
-}
+}</style>
-</style>