修改首页样式

src/views/index.vue

@@ -33,13 +33,17 @@
       </div>
       <div class="contbody" id="contbody">
         <div class="cont-left">
-          <img src="../assets/images/ditu.png" alt=""  style="width: 100%;height:690px;">
+          <img
+            src="../assets/images/ditu.png"
+            alt=""
+            style="width: 100%; height: 690px"
+          />
         </div>
         <!-- <div class="chart-wrapper cont-left">
           <store-chart />
         </div> -->
         <div class="cont-right">
-          <twin-chart :rightData="rightData" :wheight="wheight"/>
+          <twin-chart :rightData="rightData" :wheight="wheight" />
         </div>
       </div>
     </div>
@@ -47,63 +51,64 @@
 </template>
 
 <script>
-import { indexTop,indexInfo} from "@/api/system/index";
+import { indexTop, indexInfo } from "@/api/system/index";
 import storeChart from "./dashboard/storeChart";
 import twinChart from "./dashboard/twinChart";
 export default {
   name: "Dict",
   components: {
     storeChart,
-    twinChart
+    twinChart,
   },
   data() {
     return {
       data: "sdff",
-      topData:{},
-      rightData:[],
-      wheight:0
+      topData: {},
+      rightData: [],
+      wheight: 0,
     };
   },
   created() {
-    this.$nextTick(()=>{
-    this.wheight=document.getElementById('contbody').clientHeight
-    })
-    this.getList()
-    this.getInfo()
+    this.$nextTick(() => {
+      this.wheight = document.getElementById("contbody").clientHeight;
+    });
+    this.getList();
+    this.getInfo();
   },
   methods: {
-    getList(){
+    getList() {
       indexTop().then((response) => {
-        this.rightData=response
+        this.rightData = response;
       });
     },
-    getInfo(){//头部
+    getInfo() {
+      //头部
       indexInfo().then((response) => {
-        this.topData=response
+        this.topData = response;
       });
-    }
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-.container{
-  background-color: #F6F6F6 !important;
+.container {
+  background-color: #f6f6f6 !important;
   height: 93vh;
   width: 100%;
 }
 .main {
   display: flex;
   flex-direction: column;
-  margin:0 32px 32px;
+  margin: 0 32px 32px;
   overflow: hidden;
   height: 100%;
 }
 .nav {
   display: flex;
   justify-content: space-around;
-  height: 160px;
-  margin:32px 0 24px;
+  min-height: 160px;
+  margin: 32px 0 24px;
   & > div {
     & > div {
       height: 80px;
@@ -123,6 +128,12 @@ export default {
       max-height: 80px;
       border-radius: 24px;
     }
+    // @media (max-height: 1600px) {
+    //   & > img {
+    //     width: 40px;
+    //     height: 40px;
+    //   }
+    // }
     @media (max-width: 1000px) {
       & > img {
         max-width: 60px;