style;首页样式修改

 <template>
   <!-- 地图 -->
-  <Echart
-    id="centreLeft2Chart"
-    class="centreLeft2Chart"
-    :key="key"
-    ref="centreLeft2ChartRef"
-    width="100%"
-    height="100%"
+  <Echart id="centreLeft2Chart" class="centreLeft2Chart" :key="key" ref="centreLeft2ChartRef" width="100%" height="100%"
     :options="options"></Echart>
 </template>
 
 <script>
-  import Echart from "@/common/echart";
-  import { mapGetters } from "vuex";
-  export default {
-    data () {
-      return {
-        options: {},
-        max: "5000", //最大value值
-        min: "1", // 最小value值
-        key: 0,
-        mapjson: "",
-      };
+import Echart from "@/common/echart";
+import { mapGetters } from "vuex";
+export default {
+  data () {
+    return {
+      options: {},
+      max: "5000", //最大value值
+      min: "1", // 最小value值
+      key: 0,
+      mapjson: "",
+    };
+  },
+  components: {
+    Echart,
+  },
+  created () { },
+  props: {
+    cdata: {
+      type: Array,
+      default: () => [],
     },
-    components: {
-      Echart,
-    },
-    created () { },
-    props: {
-      cdata: {
-        type: Array,
-        default: () => [],
-      },
-    },
-    mounted () {
-
-      window.addEventListener("resize", () => {
-        this.key++;
-      });
-      this.getDistrictcode();
-    },
-    watch: {
-      cdata: {
-        handler (newData) {
-          let _this = this;
-          // 设置点的位置(经纬度)
-          const geoCoordMap = {
-            汉台区: [107.03187, 33.06774, 20],
-            南郑区: [106.94024, 33.00299, 20],
-            城固县: [107.33367, 33.15661, 20],
-            洋县: [107.545837, 33.222739, 20],
-            西乡县: [107.76867, 32.98411, 20],
-            镇巴县: [107.89648, 32.53487, 20],
-            勉县: [106.673221, 33.153553, 20],
-            留坝县: [106.92233, 33.61606, 20],
-            佛坪县: [107.98974, 33.52496, 20],
-            宁强县: [106.25958, 32.82881, 20],
-            略阳县: [106.15399, 33.33009, 20],
-          };
-          this.options = {
-            showLegendSymbol: true,
-            tooltip: {
-              trigger: "item",
-              textStyle: {
-                fontSize: 14,
-                lineHeight: 22,
-              },
-              position: (point) => {
-                // 固定在顶部
-                return [point[0] + 50, point[1] - 20];
-              },
-              // 如果需要自定义 tooltip样式，需要使用formatter
-              formatter: (params) => {
-                return `<div style="">${params.name}:${params.value + "个"
-                  }</div>`;
-              },
+  },
+  mounted () {
+    window.addEventListener("resize", () => {
+      this.key++;
+    });
+    this.getDistrictcode();
+  },
+  watch: {
+    cdata: {
+      handler (newData) {
+        let _this = this;
+        // 设置点的位置(经纬度)
+        const geoCoordMap = {
+          汉台区: [107.03187, 33.06774, 20],
+          南郑区: [106.94024, 33.00299, 20],
+          城固县: [107.33367, 33.15661, 20],
+          洋县: [107.545837, 33.222739, 20],
+          西乡县: [107.76867, 32.98411, 20],
+          镇巴县: [107.89648, 32.53487, 20],
+          勉县: [106.673221, 33.153553, 20],
+          留坝县: [106.92233, 33.61606, 20],
+          佛坪县: [107.98974, 33.52496, 20],
+          宁强县: [106.25958, 32.82881, 20],
+          略阳县: [106.15399, 33.33009, 20],
+        };
+        this.options = {
+          showLegendSymbol: true,
+          tooltip: {
+            trigger: "item",
+            textStyle: {
+              fontSize: 14,
+              lineHeight: 22,
+            },
+            position: (point) => {
+              // 固定在顶部
+              return [point[0] + 50, point[1] - 20];
+            },
+            // 如果需要自定义 tooltip样式，需要使用formatter
+            formatter: (params) => {
+              return `<div style="">${params.name}:${params.value + "个"
+                }</div>`;
             },
-            visualMap: {
-              min: 0,
-              max: _this.max,
-              bottom: "13%",
-              left: 50,
-              splitNumber: 6,
-              seriesIndex: [0],
-              itemWidth: 20, // 每个图元的宽度
-              itemGap: 2, // 每两个图元之间的间隔距离，单位为px
-              pieces: [
-                // 自定义每一段的范围，以及每一段的文字
-                { gte: 100, label: "5000以上", color: "#035cf5" }, // 不指定 max，表示 max 为无限大（Infinity）。
-                { gte: 50, lte: 6000, label: "1000-5000", color: "#3375e4" },
-                { gte: 20, lte: 2000, label: "500-1000", color: "#6797ef" },
-                { gte: 1, lte: 1000, label: "0-500", color: "#96b5ef" },
-              ],
-              textStyle: {
-                color: "#737373",
+          },
+          visualMap: {
+            min: 0,
+            max: _this.max,
+            bottom: "12%",
+            left: 50,
+            splitNumber: 6,
+            seriesIndex: [0],
+            itemWidth: 20, // 每个图元的宽度
+            itemGap: 2, // 每两个图元之间的间隔距离，单位为px
+            pieces: [
+              // 自定义每一段的范围，以及每一段的文字
+              { gte: 100, label: "5000以上", color: "#035cf5" }, // 不指定 max，表示 max 为无限大（Infinity）。
+              { gte: 50, lte: 6000, label: "1000-5000", color: "#3375e4" },
+              { gte: 20, lte: 2000, label: "500-1000", color: "#6797ef" },
+              { gte: 1, lte: 1000, label: "0-500", color: "#96b5ef" },
+            ],
+            textStyle: {
+              color: "#737373",
+            },
+          },
+          geo: {
+            aspectScale: 1, //长宽比
+            zoom: 1.1,
+            mapType: "", // 自定义扩展图表类型
+            top: "15%",
+            left: "10%",
+            map: "汉中市",
+            itemStyle: {
+              normal: {
+                //阴影
+                areaColor: "#5689FD ",
+                shadowColor: "#21371d",
+                borderWidth: 0,
+                shadowOffsetX: 2,
+                shadowOffsetY: 25,
               },
             },
-            geo: {
+          },
+          series: [
+            {
+              type: "map",
               aspectScale: 1, //长宽比
               zoom: 1.1,
-              mapType: "", // 自定义扩展图表类型
+              mapType: "汉中市", // 自定义扩展图表类型
               top: "15%",
               left: "10%",
-              map: "汉中市",
               itemStyle: {
                 normal: {
-                  //阴影
-                  areaColor: "#5689FD ",
-                  shadowColor: "#21371d",
-                  borderWidth: 0,
-                  shadowOffsetX: 2,
-                  shadowOffsetY: 25,
+                  areaColor: "rgba(19,54,162,.5)",
+                  borderColor: "rgba(0,242,252,.5)",
+                  borderWidth: 2,
+                  shadowBlur: 1,
+                  borderColor: "rgb(155, 200, 200)",
+                  shadowColor: "#44f2fc",
                 },
               },
-            },
-            series: [
-              {
-                type: "map",
-                aspectScale: 1, //长宽比
-                zoom: 1.1,
-                mapType: "汉中市", // 自定义扩展图表类型
-                top: "15%",
-                left: "10%",
-                itemStyle: {
-                  normal: {
-                    areaColor: "rgba(19,54,162,.5)",
-                    borderColor: "rgba(0,242,252,.5)",
-                    borderWidth: 2,
-                    shadowBlur: 1,
-                    borderColor: "rgb(155, 200, 200)",
-                    shadowColor: "#44f2fc",
-                  },
+              label: {
+                formatter: (params) => {
+                  return `${params.name}\n${params.value + "个"}`;
                 },
-                label: {
-                  formatter: (params) => {
-                    return `${params.name}\n${params.value + "个"}`;
-                  },
-                  show: true,
-                  position: "insideRight",
+                show: true,
+                position: "insideRight",
+                textStyle: {
+                  fontSize: 14,
+                  color: "#efefef",
+                },
+                emphasis: {
                   textStyle: {
-                    fontSize: 14,
-                    color: "#efefef",
-                  },
-                  emphasis: {
-                    textStyle: {
-                      color: "#fff",
-                    },
+                    color: "#fff",
                   },
                 },
-                data: newData,
               },
-            ],
-          };
-          // 重新选择区域
-          this.handleMapRandomSelect();
-        },
-
-        immediate: true,
-        deep: true,
+              data: newData,
+            },
+          ],
+        };
+        // 重新选择区域
+        this.handleMapRandomSelect();
       },
+
+      immediate: true,
+      deep: true,
     },
-    computed: {
-      ...mapGetters(["sidebar", "dicData"]),
-      logoName () {
-        return (
-          this.dicData["sysCode"].filter((item) => { return item.DCODE == "areaMap" })
-        );
-      },
+  },
+  computed: {
+    ...mapGetters(["sidebar", "dicData"]),
+    logoName () {
+      return (
+        this.dicData["sysCode"].filter((item) => { return item.DCODE == "areaMap" })
+      );
     },
-    methods: {
-      // 根据行政区代码匹配行政区
-      getDistrictcode () {
-        this.mapjson = ""
-        if (this.logoName[0].DNAME) {
-          this.mapjson = this.logoName[0].DNAME;
-          require(`@/common/map/${this.mapjson}.js`);
-        }
-      },
-      // 开启定时器
-      startInterval () {
-        const _self = this;
-        // 应通过接口获取配置时间，暂时写死5s
-        const time = 2000;
-        if (this.intervalId !== null) {
-          clearInterval(this.intervalId);
+  },
+  methods: {
+    // 根据行政区代码匹配行政区
+    getDistrictcode () {
+      this.mapjson = ""
+      if (this.logoName[0].DNAME) {
+        this.mapjson = this.logoName[0].DNAME;
+        require(`@/common/map/${this.mapjson}.js`);
+      }
+    },
+    // 开启定时器
+    startInterval () {
+      const _self = this;
+      // 应通过接口获取配置时间，暂时写死5s
+      const time = 2000;
+      if (this.intervalId !== null) {
+        clearInterval(this.intervalId);
+      }
+      this.intervalId = setInterval(() => {
+        this.$refs.centreLeft2ChartRef && _self.reSelectMapRandomArea();
+      }, time);
+    },
+    // 重新随机选中地图区域
+    reSelectMapRandomArea () {
+      const length = 9;
+      this.$nextTick(() => {
+        try {
+          const map = this.$refs.centreLeft2ChartRef.chart;
+          let index = Math.floor(Math.random() * length);
+          while (index === this.preSelectMapIndex || index >= length) {
+            index = Math.floor(Math.random() * length);
+          }
+          map.dispatchAction({
+            type: "mapUnSelect",
+            seriesIndex: 0,
+            dataIndex: this.preSelectMapIndex,
+          });
+          map.dispatchAction({
+            type: "showTip",
+            seriesIndex: 0,
+            dataIndex: index,
+          });
+          map.dispatchAction({
+            type: "mapSelect",
+            seriesIndex: 0,
+            dataIndex: index,
+          });
+          this.preSelectMapIndex = index;
+        } catch (error) {
+          console.log(error);
         }
-        this.intervalId = setInterval(() => {
-          this.$refs.centreLeft2ChartRef && _self.reSelectMapRandomArea();
-        }, time);
-      },
-      // 重新随机选中地图区域
-      reSelectMapRandomArea () {
-        const length = 9;
-        this.$nextTick(() => {
-          try {
-            const map = this.$refs.centreLeft2ChartRef.chart;
-            let index = Math.floor(Math.random() * length);
-            while (index === this.preSelectMapIndex || index >= length) {
-              index = Math.floor(Math.random() * length);
-            }
+      });
+    },
+    handleMapRandomSelect () {
+      this.$nextTick(() => {
+        try {
+          const map = this.$refs.centreLeft2ChartRef.chart;
+          const _self = this;
+          setTimeout(() => {
+            _self.reSelectMapRandomArea();
+          }, 0);
+          // 移入区域，清除定时器、取消之前选中并选中当前
+          map.on("mouseover", function (params) {
+            clearInterval(_self.intervalId);
             map.dispatchAction({
               type: "mapUnSelect",
               seriesIndex: 0,
-              dataIndex: this.preSelectMapIndex,
-            });
-            map.dispatchAction({
-              type: "showTip",
-              seriesIndex: 0,
-              dataIndex: index,
+              dataIndex: _self.preSelectMapIndex,
             });
             map.dispatchAction({
               type: "mapSelect",
               seriesIndex: 0,
-              dataIndex: index,
-            });
-            this.preSelectMapIndex = index;
-          } catch (error) {
-            console.log(error);
-          }
-        });
-      },
-      handleMapRandomSelect () {
-        this.$nextTick(() => {
-          try {
-            const map = this.$refs.centreLeft2ChartRef.chart;
-            const _self = this;
-            setTimeout(() => {
-              _self.reSelectMapRandomArea();
-            }, 0);
-            // 移入区域，清除定时器、取消之前选中并选中当前
-            map.on("mouseover", function (params) {
-              clearInterval(_self.intervalId);
-              map.dispatchAction({
-                type: "mapUnSelect",
-                seriesIndex: 0,
-                dataIndex: _self.preSelectMapIndex,
-              });
-              map.dispatchAction({
-                type: "mapSelect",
-                seriesIndex: 0,
-                dataIndex: params.dataIndex,
-              });
-              _self.preSelectMapIndex = params.dataIndex;
+              dataIndex: params.dataIndex,
             });
-            // 移出区域重新随机选中地图区域，并开启定时器
-            map.on("globalout", function () {
-              _self.reSelectMapRandomArea();
-              _self.startInterval();
-            });
-            this.startInterval();
-          } catch (error) {
-            console.log(error);
-          }
-        });
-      },
+            _self.preSelectMapIndex = params.dataIndex;
+          });
+          // 移出区域重新随机选中地图区域，并开启定时器
+          map.on("globalout", function () {
+            _self.reSelectMapRandomArea();
+            _self.startInterval();
+          });
+          this.startInterval();
+        } catch (error) {
+          console.log(error);
+        }
+      });
     },
-  };
+  },
+};
 </script>
 <style></style>

@@ -78,7 +78,7 @@ export default {
 }
 
 .rightcard {
-  width: 30%;
+  width: 32%;
   display: flex;
   height: calc(100vh - 114px);
   flex-direction: column;