更新 菜单样式;首页布局

src/App.vue

@@ -4,10 +4,22 @@
     <div class="main-app">
       <div class="aside"><AsideVue></AsideVue></div>
       <div class="section">
-        <div class="first-title">
+        <div class="first-title" v-if="this.$store.state.firstTitle != '主页'">
           {{ this.$store.state.firstTitle }}
         </div>
-        <div class="main-section"><router-view></router-view></div>
+        <div
+          class="main-section"
+          :style="{
+            margin:
+              this.$store.state.firstTitle == '主页' ? 0 : '24px 0 0 24px',
+            height:
+              this.$store.state.firstTitle == '主页'
+                ? 'calc(100vh - 60px)'
+                : 'calc(100vh - 136px)',
+          }"
+        >
+          <router-view></router-view>
+        </div>
       </div>
     </div>
     <!-- <FooterVue></FooterVue> -->
@@ -45,7 +57,7 @@ export default {
 }
 
 .aside {
-  width: 220px;
+  /* width: 220px; */
 }
 
 .footer {

src/auth/menuData.js

@@ -1,6 +1,6 @@
 let menuData = [
   {
-    icon: "el-icon-s-data",
+    icon: "menuIcons/ship.png",
     title: "航次管理",
     code: "VOYAGEMANAGE",
     items: [
@@ -12,7 +12,7 @@ let menuData = [
     ],
   },
   {
-    icon: "el-icon-s-data",
+    icon: "menuIcons/agency.png",
     title: "代理管理",
     code: "PROXYMANAGE",
     items: [
@@ -24,7 +24,7 @@ let menuData = [
     ],
   },
   {
-    icon: "el-icon-s-data",
+    icon: "menuIcons/cargo.png",
     title: "货种管理",
     code: "CARGOMANAGE",
     items: [
@@ -36,7 +36,7 @@ let menuData = [
     ],
   },
   {
-    icon: "el-icon-s-data",
+    icon: "menuIcons/account.png",
     title: "账户管理",
     code: "ACCOUNTMANAGE",
     items: [
@@ -53,7 +53,7 @@ let menuData = [
     ],
   },
   {
-    icon: "el-icon-s-data",
+    icon: "menuIcons/setting.png",
     title: "权限管理",
     code: "PERMISSIONMANAGE",
     items: [

src/components/Aside.vue

@@ -1,11 +1,12 @@
 <template>
   <el-menu
     :default-active="this.$store.state.currentMenuItem"
-    style="width: 220px; height: 100%"
+    style="height: 100%"
     background-color="#141B29"
     text-color="#fff"
     active-text-color="#ffd04b"
     :router="true"
+    :collapse="true"
   >
     <el-sub-menu
       v-for="(item, index) in this.$store.state.menuData"
@@ -13,7 +14,11 @@
       :index="`${index}`"
     >
       <template v-slot:title>
-        <i :class="item.icon"></i>
+        <img
+          style="width: 30px; height: 30px; background: #fff; padding: 1px"
+          :src="item.icon"
+          alt=""
+        />
         <span>{{ item.title }}</span>
       </template>
       <el-menu-item v-for="son in item.items" :index="son.path" :key="son">

src/views/index/Index.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="df">
-    <div class="left-top">
+    <div
+      class="left-top"
+      :style="{
+        height:
+          this.$store.state.firstTitle == '主页'
+            ? 'calc(100vh - 142px)'
+            : 'calc(100vh - 238px)',
+      }"
+    >
       <div id="map-container" class="map-container"></div>
       <div class="df aic tabs">
         <div
@@ -41,7 +49,15 @@
         </div>
       </div>
     </div>
-    <div class="right-top">
+    <div
+      class="right-top"
+      :style="{
+        height:
+          this.$store.state.firstTitle == '主页'
+            ? 'calc(100vh - 142px)'
+            : 'calc(100vh - 238px)',
+      }"
+    >
       <div class="cards card-1">
         <div>总航次数</div>
         <div>{{ indexData.totalVoyageNum }}</div>
@@ -397,7 +413,7 @@ function drawPie(type) {
     },
     series: [
       {
-        center: ["50%", "65%"],
+        center: ["50%", "50%"],
         type: "pie",
         radius: "80%",
         data: [
@@ -605,13 +621,13 @@ onMounted(() => {
 }
 
 .left-top {
-  width: calc(100% - 280px);
+  width: calc(100% - 400px);
   height: calc(100vh - 238px);
   position: relative;
 }
 
 .right-top {
-  width: 280px;
+  width: 400px;
   height: calc(100vh - 238px);
   background: #fff;
   text-align: center;
@@ -619,16 +635,16 @@ onMounted(() => {
 }
 
 .left-bottom {
-  width: calc(100% - 280px);
-  height: 100px;
+  width: calc(100% - 400px);
+  height: 80px;
   background: #fff;
   display: flex;
   justify-content: center;
 }
 
 .right-bottom {
-  width: 280px;
-  height: 100px;
+  width: 400px;
+  height: 80px;
   text-align: center;
   display: flex;
   justify-content: space-around;
@@ -639,31 +655,21 @@ onMounted(() => {
   width: 800px;
 }
 .cards {
-  height: 12%;
+  height: 10%;
   border-bottom: 1px solid grey;
 }
 
 .cards > div:first-child {
-  font-size: 2vh;
-  padding-top: 6%;
-  padding-bottom: 6%;
+  font-size: 1.8vh;
+  padding-top: 4%;
+  padding-bottom: 2%;
 }
 
 .cards > div:last-child {
   font-size: 1.5vh;
 }
-/* 
-.cards {
-}
-.card-1 {
-}
-.card-2 {
-}
-.card-3 {
-}
-.card-4 {
-} */
+
 .card-5 {
-  height: 40%;
+  height: 50%;
 }
 </style>