页面修改

src/views/MainLayout.vue

@@ -2,7 +2,7 @@
   <div class="layout">
     <el-container>
       <el-header style="height: 180px; background-color: #438EB9">
-        <h1 class="font-h1">浙江省数字畜牧应用系统养殖管理模块</h1>
+        <h1 class="font-h1">浙江省数字畜牧应用 * 能繁母猪管理</h1>
         <div class="menu">
           <div class="menu-item">
             <div class="item_box" v-for="item in menuList" :key="item.id" @click="jump(item.id)">
@@ -12,11 +12,11 @@
           </div>
         </div>
       </el-header>
-      <el-container style="height: calc(100vh - 180px);">
-        <el-aside width="230px" style="background-color: #EAEDF1">
+      <el-container style="height: calc(100vh - 170px); margin-top: 10px">
+        <el-aside width="220px">
           <sideMenu :navIndex="navIndex" :defaultUrl="defaultUrl" :menuItem="menuItem"></sideMenu>
         </el-aside>
-        <el-main style="background-color: #F9F9F9">
+        <el-main>
           <div class="header_title">{{title}}</div>
           <div class="overY">
             <router-view></router-view>
@@ -40,12 +40,12 @@ export default {
         {
           id: 1,
           img: require('../assets/u19.png'),
-          name: '数据'
+          name: '汇总数据'
         },
         {
           id: 2,
           img: require('../assets/u20.png'),
-          name: '汇总数据'
+          name: '数据分析'
         },
         {
           id: 3,
@@ -56,7 +56,7 @@ export default {
       menuItem: [
         {
           id: '1',
-          name: '数据',
+          name: '汇总数据',
           parentId: 1,
           children: [
             {
@@ -78,12 +78,12 @@ export default {
         },
         {
           id: '2',
-          name: '汇总数据',
+          name: '数据分析',
           parentId: 2,
           children: [
             {
               id: '21',
-              name: '汇总数据',
+              name: '数据分析',
               url: '/collectData'
             }
           ]
@@ -131,7 +131,45 @@ export default {
     padding: 0;
   }
   /deep/.el-main {
-    padding: 0;
+    /*padding: 0;*/
+    padding: 0 20px;
+    background-color: #fff;
+  }
+  /deep/.el-menu {
+    width: 200px;
+    background-color: #fff !important;
+    border: 0;
+  }
+  /deep/.el-submenu__title {
+    background-color: #74C59E !important;
+    font-size: 20px;
+    color: #fff;
+    font-weight: 600;
+    position: relative;
+    border-radius: 5px;
+  }
+  /deep/.el-submenu__title::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    top: 0px; right: -16px;
+    border: 28px solid transparent;
+    border-left-color: #74C59E;
+    border-right-width: 0;
+  }
+  /deep/.el-submenu .el-menu-item {
+    background-color: #D4E7F0 !important;
+    color: #7E7CA2;
+    margin-top: 10px;
+    min-width: 180px !important;
+    width: 180px !important;
+    height: 40px;
+    line-height: 40px;
+    margin-left: 20px;
+  }
+  /deep/ .el-submenu .el-menu-item.is-active {
+    background-color: #F1E5E1 !important;
   }
   .layout {
     width: 100%;
@@ -149,8 +187,9 @@ export default {
   .menu {
     width: 100%;
     height: 93px;
-    background-image: url('../assets/u3.svg');
+    background-image: url('../assets/u3.png');
     background-size: 100% 100%;
+    /*background-color: #f3f3f3;*/
   }
   .menu-item {
     width: 800px;
@@ -160,7 +199,7 @@ export default {
     justify-content: space-between;
   }
   .item_box {
-    width: 150px;
+    width: 90px;
     height: 100%;
     text-align: center;
     cursor: pointer;
@@ -172,16 +211,20 @@ export default {
   .line {
     line-height: 30px;
     color: #4098CA;
+    border-radius: 10px;
   }
   .active {
     background-color: #4098CA;
     color: white;
   }
   .header_title {
-    height: 50px;
-    background-color: #F3F3F3;
-    border-bottom: 1px solid #ddd;
-    border-top: 1px solid #ddd;
+    height: 40px;
+    background-color: #F7F7F7;
+    border: 1px solid #ddd;
+    line-height: 40px;
+    color: #6FA8C8;
+    margin-bottom: 10px;
+    padding-left: 20px;
   }
   .overY {
     height: calc(100vh - 180px - 52px);

src/views/pastureData/Home.vue

@@ -222,6 +222,7 @@ export default {
     display: flex;
     justify-content: space-around;
     align-items: center;
+    margin-bottom: 10px;
   }
   .box_item {
     width: 198px;
@@ -238,14 +239,14 @@ export default {
     width: 100%;
     height: 60px;
     background-color: #fff;
-    border-top: 1px solid #ddd;
-    border-bottom: 1px solid #ddd;
+    border: 1px solid #ddd;
     box-sizing: border-box;
-    padding: 10px 5px;
+    padding: 10px;
   }
   .box_table {
     width: 100%;
     box-sizing: border-box;
-    padding: 10px;
+    margin-top: 10px;
+    /*padding: 10px;*/
   }
 </style>

src/views/pastureData/dayData.vue

@@ -229,7 +229,7 @@ export default {
   border-top: 1px solid #ddd;
   border-bottom: 1px solid #ddd;
   box-sizing: border-box;
-  padding: 10px 5px 0 5px;
+  padding: 10px 5px 0 12px;
 }
 .box_table {
   width: 100%;