样式调整

src/components/Lengend/Lengend.vue

@@ -24,43 +24,43 @@
 <script>
 export default {
   data() {
-    return {};
+    return {}
   },
   props: {
     title: {
-      type: String,
+      type: String
     },
     colors: {
-      type: Array,
+      type: Array
     },
     range: {
-      type: Array,
-    },
+      type: Array
+    }
   },
   computed: {
     getCode() {
       return function (index) {
         if (index === 0) {
-          return "<";
+          return '<'
         }
         if (index === this.colors.length - 1) {
-          return ">";
+          return '>'
         }
-        return "-";
-      };
-    },
-  },
-};
+        return '-'
+      }
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped>
 .legend {
-  position: absolute;
-  right: 1vh;
-  bottom: 1vh;
+  padding: 10px;
+  background-color: rgba(1, 1, 1, 0.3);
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
+  border-radius: 3px;
 
   .title {
     width: 100%;
@@ -73,19 +73,17 @@ export default {
   .item {
     display: flex;
     align-items: center;
+    margin-bottom: .3vh;
     .circle {
       border-radius: 2px;
-      width: 17px;
-      height: 10px;
-      margin-right: 0.5vh;
+      width: 30px;
+      height: 15px;
+      margin-right: 14px;
     }
     label {
       color: @main-color;
       font-size: 1.2vh;
     }
   }
-  .item + .item {
-    margin-top: 0.3vh;
-  }
 }
 </style>

src/components/Map/Map.vue

@@ -106,7 +106,7 @@ export default {
         layout: {
           "text-font": ["open-sans"],
           "text-field": "{PXZQMC}",
-          "text-size": 17,
+          "text-size": 16,
           "text-max-width": 5,
         },
         // maxzoom: 7,

src/pages/biogasManureEcoAgriculture/index.vue

@@ -78,7 +78,11 @@
         :title="statusValue.value + '(万吨)'"
       >
         <div style="width: 100%; height: 23vh">
-          <Echart ref="echart3" :options="bottom_option" @barClick="echartBarClick"/>
+          <Echart
+            ref="echart3"
+            :options="bottom_option"
+            @barClick="echartBarClick"
+          />
         </div>
       </PartWrap>
     </div>
@@ -168,7 +172,7 @@ export default {
         grid: { bottom: '10%' },
         series: [
           {
-            barWidth: 40,
+            // barWidth: 40,
             data: [],
             type: 'bar',
             itemStyle: {
@@ -215,12 +219,13 @@ export default {
           [135.087387, 53.561602]
         ],
         {
-          padding: { bottom: 500, top: 20, left: 200, right: 200 }
+          padding: { bottom: 500, top: 120, left: 200, right: 200 }
         }
       )
     },
     async echartBarClick(e) {
       console.log(e)
+      console.log(this.cityConfig)
       this.thisCity = this.cityConfig.find(item => {
         return item.name == e.name
       })
@@ -248,9 +253,7 @@ export default {
             [73.487345, 17.397329],
             [135.087387, 53.561602]
           ],
-          {
-            padding: { bottom: 500, top: 20, left: 100, right: 400 }
-          }
+          { padding: { bottom: 500, top: 120, left: 200, right: 200 } }
         )
       }
     },
@@ -281,7 +284,7 @@ export default {
         a.push(this.getColorOfProvince(Number(item[this.statusValue.key])))
       })
       console.log(a)
-      a.push('#ccc')
+      a.push('rgba(0,0,0,0)')
       this.$refs.map.setBackground(a)
     },
     getColorOfProvince(count) {
@@ -367,18 +370,18 @@ export default {
     z-index: 100;
     .left-part-item {
       height: 5vh;
-      margin-bottom: 2vh;
+      margin-bottom: 1vh;
     }
   }
   .bottom-part {
     z-index: 99;
-    width: 97vw;
+    width: 98vw;
     display: flex;
     justify-content: space-between;
     position: absolute;
     height: 27vh;
-    bottom: 2vh;
-    left: 2vh;
+    bottom: 1vh;
+    left: 1vw;
     z-index: 21;
     display: flex;
     .bottom-part-table {
@@ -395,13 +398,12 @@ export default {
   .legend-part {
     position: absolute;
     z-index: 11;
-    left: 300px;
-    bottom: 33vh;
+    right: 1vw;
+    bottom: 29vh;
   }
-
   .status-control {
     position: absolute;
-    right: 2vw;
+    right: 1vw;
     top: 12vh;
     z-index: 99;
   }

src/pages/methaneUpgrade/index.vue

@@ -83,7 +83,7 @@
     <Lengend class="legend-part" :colors="colors" :range="colorLabel" />
     <div class="right-part">
       <PartWrap class="right-part-echart" :title="'年末累计(处)'">
-        <div style="width: 13vw; height: 38vh">
+        <div style="width: 12vw; height: 38vh">
           <Echart
             ref="echart3"
             :options="echart1_option"
@@ -92,7 +92,7 @@
         </div>
       </PartWrap>
       <PartWrap class="right-part-echart" :title="'总池容(万立方米)'">
-        <div style="width: 13vw; height: 38vh">
+        <div style="width: 12vw; height: 38vh">
           <Echart
             ref="echart3"
             :options="echart2_option"
@@ -101,7 +101,7 @@
         </div>
       </PartWrap>
       <PartWrap class="right-part-echart" :title="'供气户数(万户)'">
-        <div style="width: 13vw; height: 38vh">
+        <div style="width: 12vw; height: 38vh">
           <Echart
             ref="echart3"
             :options="echart3_option"
@@ -110,7 +110,7 @@
         </div>
       </PartWrap>
       <PartWrap class="right-part-echart" :title="'装机容量(千瓦)'">
-        <div style="width: 13vw; height: 38vh">
+        <div style="width: 12vw; height: 38vh">
           <Echart
             ref="echart3"
             :options="echart4_option"
@@ -457,7 +457,7 @@ export default {
           [135.087387, 53.561602]
         ],
         {
-          padding: { bottom: 500, top: 20, left: 100, right: 400 }
+          padding: { bottom: 500, top: 120, left: 80, right: 470 }
         }
       )
     },
@@ -491,7 +491,7 @@ export default {
             [135.087387, 53.561602]
           ],
           {
-            padding: { bottom: 500, top: 20, left: 100, right: 400 }
+            padding: { bottom: 500, top: 120, left: 80, right: 450 }
           }
         )
       }
@@ -543,7 +543,7 @@ export default {
         a.push(this.getColorOfProvince(Number(item[this.statusValue1.key])))
       })
       console.log(a)
-      a.push('#ccc')
+      a.push('rgba(0,0,0,0)')
       this.$refs.map.setBackground(a)
     },
     getColorOfProvince(count) {
@@ -745,32 +745,30 @@ export default {
   }
   .left-part {
     z-index: 99;
-    // display: flex;
-    // flex-direction: column;
     height: 55vh;
-    // width: 250px;
     position: absolute;
     top: 11vh;
     left: 1vw;
     z-index: 100;
     .date-widget {
-      position: absolute;
-      left: 280px;
+      position: relative;
+      // right: calc(-100% - 1vw);
+      margin-bottom: 3vh;
     }
     .left-part-item {
       height: 5vh;
-      margin-bottom: 2vh;
+      margin-bottom: 1vh;
     }
   }
   .bottom-part {
     z-index: 99;
-    width: 70vw;
+    width: 71vw;
     display: flex;
     justify-content: space-between;
     position: absolute;
     height: 27vh;
-    bottom: 2vh;
-    left: 2vh;
+    bottom: 1vh;
+    left: 1vw;
     z-index: 21;
     display: flex;
     .bottom-part-table {
@@ -788,31 +786,32 @@ export default {
     position: absolute;
     z-index: 11;
     left: 300px;
-    bottom: 33vh;
+    bottom: 29vh;
   }
   .right-part {
+    margin-right: 1vw;
     z-index: 99;
     position: absolute;
     right: 0;
-    top: 12vh;
+    bottom: 1vh;
     display: flex;
-    width: 28vw;
+    width: 26vw;
     flex-wrap: wrap;
     justify-content: space-around;
     .right-part-echart {
-      margin-bottom: 1vh;
+      margin-top: 1vh;
     }
   }
   .status-control {
     position: absolute;
-    right: 29vw;
-    top: 12vh;
+    right: 28vw;
+    top: 13vh;
     z-index: 99;
   }
   .status-control1 {
     position: absolute;
-    right: 29vw;
-    bottom: 33vh;
+    right: 28vw;
+    bottom: 29vh;
     z-index: 99;
   }
 }

src/router/index.js

@@ -5,6 +5,7 @@ import Home from "../views/Home.vue";
 Vue.use(VueRouter);
 
 const routes = [
+  { path: "/", redirect: "/methane_upgrade" },
   {
     path: "/",
     name: "Home",

src/views/Home.vue

@@ -7,23 +7,41 @@
           <h3>农村农业生态建设</h3>
         </div>
         <div class="menu">
-          <div class="a-menu" @click="$router.push('/methane_upgrade')">
-            沼气
+          <div
+            :class="[
+              'a-menu',
+              $route.path == '/methane_upgrade' ? 'active' : ''
+            ]"
+            @click="$router.push('/methane_upgrade')"
+          >
+            农村沼气转型升级
           </div>
-          <div class="a-menu" @click="$router.push('/biomass_energy_warm')">
-            生物
+          <div
+            :class="[
+              'a-menu',
+              $route.path == '/biomass_energy_warm' ? 'active' : ''
+            ]"
+            @click="$router.push('/biomass_energy_warm')"
+          >
+            生物质能清洁取暖
           </div>
           <div
-            class="a-menu"
+            :class="[
+              'a-menu',
+              $route.path == '/biogas_manure_eco_agriculture' ? 'active' : ''
+            ]"
             @click="$router.push('/biogas_manure_eco_agriculture')"
           >
-            沼肥
+            沼肥生态农业
           </div>
           <div
-            class="a-menu"
+            :class="[
+              'a-menu',
+              $route.path == '/renewable_energy_village' ? 'active' : ''
+            ]"
             @click="$router.push('/renewable_energy_village')"
           >
-            示范村
+            可再生能源示范村
           </div>
         </div>
       </div>
@@ -40,16 +58,16 @@
 
 <script>
 export default {
-  name: "Home",
+  name: 'Home',
   data() {
     return {
       // baseUrl: process.env.BASE_URL
-    };
+    }
   },
   components: {
     // HelloWorld,
-  },
-};
+  }
+}
 </script>
 
 <style scoped lang="less">
@@ -91,26 +109,42 @@ export default {
         }
         h3 {
           font-size: 4.7vh;
-          line-height: 10vh;
+          line-height: 8vh;
           font-weight: 700;
           letter-spacing: 0.1vh;
           color: @main-color;
-          font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
       }
       .menu {
         display: flex;
         align-items: center;
         margin-right: 40px;
+
         .a-menu {
-          width: 50px;
-          height: 50px;
-          background-color: @main-color;
-          margin-right: 20px;
-          border-radius: 50%;
-          line-height: 50px;
+          // width: 50px;
+          height: 8vh;
+          // background-color: @main-color;
+          // margin-right: 20px;
+          // border-radius: 50%;
+          line-height: 7vh;
+          font-size: 2vh;
+          font-weight: 600;
+          padding: 10px;
+          box-sizing: border-box;
           text-align: center;
-          color: aliceblue;
+          color: @main-color;
+          &:hover {
+            // background-color: rgb(206, 206, 206);
+          }
+        }
+        .active {
+          color: #fff;
+          background: linear-gradient(
+            to bottom,
+            rgba(0, 100, 200, 0.4),
+            rgba(0, 200, 100, 0)
+          );
         }
       }
     }