头部UI调整，智慧场景右下角图片错位BUG修复。

src/components/dashboard/more/space/DataSituation.vue

@@ -2,8 +2,12 @@
   <div class="dataSituation">
     <div class="dataSituation-title">{{ title }}</div>
     <div class="dataSituation-canvas-border" style="height: auto">
-      <img class="dataSituation-canvas-circle" :src="circleBg" />
-      <div ref="dataSituation-canvas" class="dataSituation-canvas" :style="{height: canvasHeight+'px'}"></div>
+      <img
+        class="dataSituation-canvas-circle"
+        :src="circleBg"
+        :style="{ width: canvasHeight + 'px', height: canvasHeight + 'px' }"
+      />
+      <div ref="dataSituation-canvas" class="dataSituation-canvas" :style="{ height: canvasHeight + 'px' }"></div>
     </div>
     <div class="dataSituation-detail-label">{{ totalTitle }}</div>
     <div class="dataSituation-detail">
@@ -17,11 +21,11 @@
 </template>
 
 <script>
-import 'echarts-liquidfill'
+import "echarts-liquidfill";
 
-import yellowCircle from '@/assets/images/dashboard/circleWorkBg.png'
-import blueCircle from '@/assets/images/dashboard/circleMeetingBg.png'
-import greenCircle from '@/assets/images/dashboard/circleParkingBg.png'
+import yellowCircle from "@/assets/images/dashboard/circleWorkBg.png";
+import blueCircle from "@/assets/images/dashboard/circleMeetingBg.png";
+import greenCircle from "@/assets/images/dashboard/circleParkingBg.png";
 
 export default {
   data() {
@@ -30,28 +34,28 @@ export default {
       canvasHeight: 0,
       colors: {
         blue: {
-          value: '#00AAFF',
-          circle: blueCircle,
+          value: "#00AAFF",
+          circle: blueCircle
         },
         green: {
-          value: '#3CC7B2',
-          circle: greenCircle,
+          value: "#3CC7B2",
+          circle: greenCircle
         },
         yellow: {
-          value: '#F6A870',
-          circle: yellowCircle,
-        },
+          value: "#F6A870",
+          circle: yellowCircle
+        }
       }
-    }
+    };
   },
   props: {
     color: {
       type: String,
-      default: 'blue'
+      default: "blue"
     },
     title: {
       type: String,
-      default: '态势'
+      default: "态势"
     },
     percent: {
       type: Number,
@@ -59,7 +63,7 @@ export default {
     },
     totalTitle: {
       type: String,
-      default: '总数量'
+      default: "总数量"
     },
     totalNum: {
       type: Number,
@@ -67,80 +71,79 @@ export default {
     },
     usedTitle: {
       type: String,
-      default: '已使用数量'
+      default: "已使用数量"
     },
     usedNum: {
       type: Number,
       default: 0
-    },
+    }
   },
   watch: {
-    "percent": function (val) {
+    percent: function(val) {
       this.initChart(val);
     }
   },
-  components: {
-  },
-  created() {
-  },
+  components: {},
+  created() {},
   mounted() {
-    this.$nextTick(()=>{
+    this.$nextTick(() => {
       let canvasWidth = document.getElementsByClassName("dataSituation-canvas")[0].clientWidth;
-      this.canvasHeight = Number(canvasWidth)
-      this.circleBg = this.colors[this.color].circle
-      this.$forceUpdate()
+      this.canvasHeight = Number(canvasWidth);
+      this.circleBg = this.colors[this.color].circle;
+      this.$forceUpdate();
       let app = this;
-      setTimeout(()=>{
-        app.initChart(this.percent)
-      },50)
-      setTimeout(()=>{
-        app.initChart(this.percent)
-      },300)
-    })
-
+      setTimeout(() => {
+        app.initChart(this.percent);
+      }, 50);
+      setTimeout(() => {
+        app.initChart(this.percent);
+      }, 300);
+    });
   },
   methods: {
     initChart(num) {
-      let echarts = this.$echarts.init(this.$refs['dataSituation-canvas'])
+      let echarts = this.$echarts.init(this.$refs["dataSituation-canvas"]);
       let primaryColor = this.colors[this.color].value;
       let option = {
-        series: [{
-          type: 'liquidFill',
-          data: [num],
-          color: [primaryColor],
-          radius: '75%',
-          animationDuration: 800,
-          animationDurationUpdate: 500,
-          amplitude: '5%',
-          waveLength: '50%',
-          label: {
-            show: true,
-            color: primaryColor,
-            insideColor: 'white',
-            fontSize: '0.8rem',
-            fontWeight: 'normal',
-            align: 'center',
-            baseline: 'middle',
-            position: ['50%', '50%']
-          },
-          itemStyle: {
-            opacity: 1,
-            shadowColor: '#eaf2ff'
-          },
-          emphasis: {
+        series: [
+          {
+            type: "liquidFill",
+            data: [num],
+            color: [primaryColor],
+            radius: "75%",
+            animationDuration: 800,
+            animationDurationUpdate: 500,
+            amplitude: "5%",
+            waveLength: "50%",
+            label: {
+              show: true,
+              color: primaryColor,
+              insideColor: "white",
+              fontSize: "0.8rem",
+              fontWeight: "normal",
+              align: "center",
+              baseline: "middle",
+              position: ["50%", "50%"]
+            },
             itemStyle: {
-              opacity: 1
+              opacity: 1,
+              shadowColor: "#eaf2ff"
+            },
+            emphasis: {
+              itemStyle: {
+                opacity: 1
+              }
+            },
+            outline: {
+              show: false
             }
-          },
-          outline: {
-            show: false,
           }
-        }],
+        ]
       };
-      echarts.setOption(option)
-    },
+      echarts.setOption(option);
+    }
   }
-}
+};
 </script>
 
 <style lang="less" scoped>
@@ -152,15 +155,27 @@ export default {
   height: 210px;
   background-color: #f7fcff;
   border: 1px solid #f8ffff;
-  @keyframes roate{
-    0%{ transform:rotateZ(360deg);-ms-transform:rotateZ(360deg);-moz-transform:rotateZ(360deg);-webkit-transform:rotateZ(360deg);-o-transform:rotateZ(360deg);}
-    100%{ transform:rotateZ(0);-ms-transform:rotateZ(0);-moz-transform:rotateZ(0);-webkit-transform:rotateZ(0);-o-transform:rotateZ(0); }
+  @keyframes roate {
+    0% {
+      transform: rotateZ(360deg);
+      -ms-transform: rotateZ(360deg);
+      -moz-transform: rotateZ(360deg);
+      -webkit-transform: rotateZ(360deg);
+      -o-transform: rotateZ(360deg);
+    }
+    100% {
+      transform: rotateZ(0);
+      -ms-transform: rotateZ(0);
+      -moz-transform: rotateZ(0);
+      -webkit-transform: rotateZ(0);
+      -o-transform: rotateZ(0);
+    }
   }
   .dataSituation-title {
     line-height: 36px;
     font-size: 14px;
     text-align: center;
-    color: #B2B2B2;
+    color: #b2b2b2;
   }
   .dataSituation-canvas-border {
     width: 60%;
@@ -170,19 +185,17 @@ export default {
       margin: 0 auto;
     }
     .dataSituation-canvas-circle {
-      width: 100%;
       margin: 0 auto;
       position: absolute;
       border-radius: 50%;
       animation: roate 3s infinite linear;
     }
-
   }
   .dataSituation-detail-label {
     text-align: center;
     font-weight: bold;
     font-size: 12px;
-    color: #B2B2B2;
+    color: #b2b2b2;
   }
   .dataSituation-detail {
     margin: 5px 15px;

src/components/home/HomeAside.vue

@@ -1,87 +1,90 @@
 <script>
-import menuList from '@/data/json/menuList.json'
-import {requireImg} from "@/utils/requireImg";
+import menuList from "@/data/json/menuList.json";
+import { requireImg } from "@/utils/requireImg";
 
 export default {
   props: {
-    collapse: Boolean,
+    collapse: Boolean
   },
   data() {
     return {
       selectedKey: [],
-      iconVerticalAlign: '',
+      iconVerticalAlign: "",
       asideStyle: {},
-      menuList,
-    }
+      menuList
+    };
   },
   watch: {
     collapse(val) {
-      this.suitHeight(val)
+      this.suitHeight(val);
     },
     $route() {
-      this.getCurrRoute()
+      this.getCurrRoute();
       this.$forceUpdate();
     }
   },
   mounted() {
-    this.suitHeight(this.collapse)
+    this.suitHeight(this.collapse);
   },
-  emits: ['update:collapse'],
+  emits: ["update:collapse"],
   setup(props, context) {
     const methods = {
       toggleCollapse() {
-        const val = !props.collapse
-        context.emit('update:collapse', val)
-      },
-    }
-    return methods
+        const val = !props.collapse;
+        context.emit("update:collapse", val);
+      }
+    };
+    return methods;
   },
   methods: {
     requireImg,
     suitHeight(val) {
-      this.getCurrRoute()
+      this.getCurrRoute();
       this.$nextTick(() => {
-        this.asideStyle = { height: `100%` }
-        if (val)
-          this.asideStyle.width = '60px'
-      })
+        this.asideStyle = { height: `100%` };
+        if (val) this.asideStyle.width = "60px";
+      });
     },
     getCurrRoute() {
-      this.$nextTick(()=>{
-        if (this.$route.matched.length>1) {
-          this.selectedKey = [this.$route.matched[1].path+'']
+      this.$nextTick(() => {
+        if (this.$route.matched.length > 1) {
+          this.selectedKey = [this.$route.matched[1].path + ""];
         }
-        let index = this.menuList.findIndex(i=>i.router==this.selectedKey)
-        this.handleClickMenuItem(this.menuList[index])
-        this.$forceUpdate()
-      })
-
+        let index = this.menuList.findIndex(i => i.router == this.selectedKey);
+        this.handleClickMenuItem(this.menuList[index]);
+        this.$forceUpdate();
+      });
     },
     handleClickMenuItem(item) {
       this.$store.menuStore().currMenu = item;
     },
     handleSelected(item) {
-      this.$router.push({path: item.key})
-    },
-  },
-}
+      this.$router.push({ path: item.key });
+    }
+  }
+};
 </script>
 
 <template>
   <div class="ioc-aside">
-    <div title="收起" class="collapse-btn" style="right: 0;background-color: #23608c;border-radius: 15px 0px 0px 15px" @click="toggleCollapse" v-if="!collapse">
-      <div style="margin-top: 30px;margin-left: 2px" >
-        <a-icon title="收起" style="color: white;font-size: 12px;vertical-align: text-top" type="menu-fold"  />
+    <div
+      title="收起"
+      class="collapse-btn"
+      style="right: 0;background-color: #23608c;border-radius: 15px 0px 0px 15px"
+      @click="toggleCollapse"
+      v-if="!collapse"
+    >
+      <div style="margin-top: 30px;margin-left: 2px">
+        <a-icon title="收起" style="color: white;font-size: 12px;vertical-align: text-top" type="menu-fold" />
       </div>
     </div>
 
-    <div title="展开" class="collapse-btn"  @click="toggleCollapse" v-if="collapse">
-      <div style="margin-top: 30px;" >
+    <div title="展开" class="collapse-btn" @click="toggleCollapse" v-if="collapse">
+      <div style="margin-top: 30px;">
         <a-icon title="展开" style="color: white;font-size: 12px;vertical-align: text-top;" type="menu-unfold" />
       </div>
     </div>
 
-
     <a-menu
       class="menu"
       theme="dark"
@@ -90,13 +93,11 @@ export default {
       mode="inline"
       @select="handleSelected"
     >
-      <a-menu-item v-for="item in menuList" :key="item.router" @click="handleClickMenuItem(item)" >
-        <span class="anticon" :style="{verticalAlign: iconVerticalAlign}">
-          <a-avatar class="function-avatar" shape="square" :size="20" :src="requireImg('function/'+item.icon)"></a-avatar>
+      <a-menu-item v-for="item in menuList" :key="item.router" @click="handleClickMenuItem(item)">
+        <span class="anticon" :style="{ verticalAlign: iconVerticalAlign }">
+          <a-avatar class="function-avatar" shape="square" :size="20" :src="requireImg('function/' + item.icon)"></a-avatar>
         </span>
-        <span >
-            {{ item.name }}
-          </span>
+        <span> {{ item.name }} </span>
       </a-menu-item>
     </a-menu>
   </div>
@@ -156,6 +157,5 @@ export default {
     margin-left: 0 !important;
     padding-left: 33% !important;
   }
-
 }
 </style>

src/components/home/HomeHeader.vue

@@ -163,9 +163,9 @@ export default {
   width: 100%;
   height: 60px;
   padding-left: 2px;
-  border-bottom: 1px solid @primary-color;
-  background: url("@/assets/images/header-bg.png");
-
+  // border-bottom: 1px solid @primary-color;
+  // background: url("@/assets/images/header-bg.png");
+  background-image: linear-gradient(45deg, #005bea, #00c6fb);
   > div {
     display: inline-flex;
   }
@@ -173,7 +173,7 @@ export default {
   .fold {
     margin: 0px;
     width: 60px;
-    background: #266a99;
+    background: #0053cb;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -183,7 +183,7 @@ export default {
     vertical-align: top;
     color: white;
     letter-spacing: 4px;
-    margin-left: 12px;
+    margin-left: 14px;
 
     .logo {
       vertical-align: top;
@@ -260,9 +260,12 @@ export default {
 }
 
 /deep/ .ant-select-selection {
-  background-color: #2f8cc8;
-  border: 1px solid #2f8cc8;
-  border-radius: 12px;
+  // background-color: #2f8cc8;
+  background-color: #003d8364;
+  border: none;
+  // border: 1px solid #2f8cc8;
+  // border-radius: 12px;
+  border-radius: 20px;
   padding: 0px 12px;
   color: white;
 }