界面美化

src/assets/icons/svg/sr-dn-gl.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1652851896030" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1289" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M1021.71 81.9c0-3.04-0.18-6.04-0.51-8.99-1.68-22.26-13.11-41.8-30.06-54.33C977.32 7.59 959.84 1 940.81 1H84.07c-19.03 0-36.5 6.59-50.32 17.58C16.8 31.1 5.36 50.64 3.69 72.91a80.84 80.84 0 0 0-0.51 8.99v90.35c0 3.32 0.1 6.63 0.27 9.93v765.25c0 41.19 33.39 74.57 74.57 74.57h868.84c41.18 0 74.57-33.39 74.57-74.57V182.17c0.17-3.3 0.27-6.61 0.27-9.93V81.9zM554.65 678.71c0 23.28-18.93 42.21-42.21 42.21s-42.21-18.93-42.21-42.21 18.93-42.21 42.21-42.21 42.21 18.94 42.21 42.21z m-84.42-438.76c0-23.28 18.93-42.21 42.21-42.21s42.21 18.93 42.21 42.21-18.93 42.21-42.21 42.21-42.21-18.93-42.21-42.21z m85.43 104.83c41.17-16.99 70.15-57.52 70.15-104.83 0-62.61-50.75-113.36-113.36-113.36s-113.36 50.75-113.36 113.36c0 47.3 28.98 87.84 70.15 104.83v57.36C237.01 389.38 78.75 275.27 78.75 172.25V81.9c0-0.83 0.21-1.61 0.55-2.31h866.28c0.11 0.23 0.2 0.47 0.28 0.71l0.11 97.52c-5.57 101.53-162.28 211.79-390.32 224.32v-57.36zM79.03 947.43l-0.71-614.79c82.5 80.79 225.45 136.8 390.92 145.17v96.08c-41.17 16.99-70.15 57.52-70.15 104.83 0 62.61 50.75 113.36 113.36 113.36S625.8 741.32 625.8 678.71c0-47.31-28.98-87.84-70.15-104.83V477.8c165.19-8.36 307.93-64.19 390.5-144.76l0.71 613.38-867.83 1.01z" fill="#339CFF" p-id="1290"></path></svg>

src/assets/icons/svg/sr-dn-pz.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1652852242708" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2256" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M1024 546.93v-323h-0.57l0.57-0.63L868.1 80.89c-42.93-39.17-98.61-60.8-156.78-60.8h-395.8c-58.17 0-113.85 21.63-156.78 60.87L2.89 223.38l0.51 0.56h-0.51v664.04c0 52.05 42.19 94.24 94.24 94.24h832.63c52.05 0 94.24-42.19 94.24-94.24V546.93z m-391.12 75.78c-25.06 39.12-68.91 65.1-118.72 65.1s-93.66-25.98-118.72-65.1h237.44z m-554.22-323h230.67c31.33 80.95 111.34 138.65 204.84 138.65S687.68 380.65 719 299.71h229.22v244.08H78.66V299.71z m128.46-165.77c29.7-27.18 68.21-42.09 108.4-42.09h395.8c40.19 0 78.7 14.91 108.4 42.09l98.52 90H657.35c0 76.58-64.11 138.65-143.19 138.65s-143.19-62.07-143.19-138.65h-262.4l98.55-90z m741.11 754.04c0 10.18-8.29 18.47-18.47 18.47H97.13c-10.18 0-18.47-8.29-18.47-18.47V622.71h232.49c30.72 82.28 110.02 140.88 203.01 140.88s172.29-58.6 203.01-140.88h231.05v265.27z" fill="#339CFF" p-id="2257"></path></svg>

src/assets/icons/svg/sr-home.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1652851714248" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1154" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M64.59464 484.756c-17.8 9.49-39.75 5.83-53.51-8.92-15.36-16.2-14.67-41.79 1.53-57.15l0.81-0.75 467.85-407.6c17.15-13.52 41.33-13.52 58.48 0l469.97 409.8c16.56 13.43 19.09 37.73 5.67 54.29a37.871 37.871 0 0 1-3.33 3.61c-13.64 14.97-35.75 18.66-53.51 8.92v291.75c-2.71 138.01-116.78 247.69-254.78 244.98-0.36-0.01-0.71-0.01-1.07-0.02H320.45464c-137.99 3.3-252.53-105.9-255.83-243.89-0.01-0.36-0.02-0.71-0.02-1.07v-293.95z m809.6-71.27l-363.24-318.5-362.88 316.23v367.48c1.56 92.33 77.48 166.02 169.81 164.84h383.85c91.74 2.02 167.76-70.71 169.78-162.46 0.02-0.79 0.03-1.59 0.04-2.38l2.34-365.5 0.3 0.29z m-179.47 180.41v80.41c-4.44 97.64-87.19 173.19-184.84 168.75-91.42-4.16-164.6-77.33-168.75-168.75v-120.54h353.59v40.13z m-269.89 40.06v37.94c0 50.1 40.62 90.72 90.72 90.72s90.72-40.62 90.72-90.72v-37.94H424.83464z" fill="#339CFF" p-id="1155"></path></svg>

src/assets/icons/svg/sr-kf.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1652852218772" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2119" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M947.59 326.53L620.01 64.51c-31.57-25.26-69.79-37.88-108-37.88-38.21 0-76.43 12.63-108 37.88L76.41 326.53A192.904 192.904 0 0 0 4 477.17v519.81h354.64V667.5c0-84.7 68.66-153.36 153.36-153.36S665.37 582.8 665.37 667.5v329.47H1020v-519.8c0-58.61-26.64-114.04-72.41-150.64z m-3.17 594.86H740.95V667.5c0-126.24-102.7-228.95-228.95-228.95S283.06 541.26 283.06 667.5v253.89H79.58V477.17c0-35.84 16.05-69.23 44.04-91.62l327.59-262.02c17.19-13.75 38.78-21.32 60.79-21.32 22.01 0 43.6 7.57 60.79 21.32l327.58 262.01c27.99 22.39 44.04 55.78 44.04 91.62v444.23z" fill="#339CFF" p-id="2120"></path><path d="M512 659.34c-28.41 0-51.44 23.03-51.44 51.44v234.76c0 28.41 23.03 51.44 51.44 51.44 28.41 0 51.44-23.03 51.44-51.44V710.77c0-28.4-23.03-51.43-51.44-51.43z" fill="#339CFF" p-id="2121"></path></svg>

src/assets/icons/svg/sr-ml.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1652852179181" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1982" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M339.37 550.33H131.1c-68.65 0-124.31 55.66-124.31 124.31v208c0 68.66 55.66 124.32 124.31 124.32h208c68.51 0 124.04-55.54 124.04-124.04V674.65c0.15-68.51-55.26-124.17-123.77-124.32z m50.65 124.31v208c0 28.17-22.75 51.04-50.91 51.19h-208c-28.27 0-51.19-22.92-51.19-51.19v-208c0-28.27 22.92-51.19 51.19-51.19h208c28.12 0 50.91 22.8 50.91 50.91v0.28zM988.85 189.61c-0.01-0.01-0.02-0.01-0.03-0.02l-1.08 0.27L850.97 52.81a119.99 119.99 0 0 0-85.31-35.21h-97.77c-87.8-0.3-159.22 70.63-159.52 158.44v98.86c-0.06 15.81 3.08 31.47 9.21 46.04a118.72 118.72 0 0 0 27.08 39L681.7 496.71c46.96 46.97 123.09 46.98 170.06 0.02 0-0.01 0.01-0.01 0.02-0.02l137.04-137.04c46.98-46.96 46.98-123.09 0.03-170.06z m-58.52 112.91L793.28 439.56c-15.16 14.44-39 14.44-54.17 0L602.08 302.52a37.47 37.47 0 0 1-8.4-12.73c-2.32-4.65-3.7-9.71-4.06-14.89v-97.77c0.15-43.17 35.1-78.13 78.27-78.27h97.77c10.17 0.12 19.88 4.2 27.08 11.38l137.04 137.04c14.44 15.16 14.44 39 0 54.17l0.55 1.07zM339.11 56.07h-208C62.62 56.21 7.09 111.62 6.79 180.11v208.54c0.15 68.59 55.72 124.16 124.31 124.31h208c68.55-0.15 124.04-55.76 124.04-124.31V180.11c-0.14-68.45-55.59-123.9-124.03-124.04z m50.91 332.58c0 28.12-22.8 50.92-50.91 50.92h-208c-28.16 0-51.04-22.76-51.19-50.92V180.11c0-28.27 22.92-51.19 51.19-51.19h208c28.16 0.15 50.91 23.02 50.91 51.19v208.54zM840.41 551.19h-208c-68.3 0-123.74 55.2-124.04 123.5v208c-0.15 68.51 55.26 124.16 123.77 124.31h208.27c68.65 0 124.31-55.66 124.31-124.31v-208c-0.45-68.34-55.98-123.5-124.31-123.5z m51.18 331.5c0 28.27-22.92 51.19-51.19 51.19h-208c-28.12 0-50.92-22.8-50.92-50.92V675.5c0-28.16 22.75-51.04 50.92-51.19h208c27.96 0 50.74 22.42 51.19 50.37v208.01z" fill="#339CFF" p-id="1983"></path><path d="M702.52 207.19m-49.52 0a49.52 49.52 0 1 0 99.04 0 49.52 49.52 0 1 0-99.04 0Z" fill="#339CFF" p-id="1984"></path></svg>

src/assets/icons/svg/sr-system.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1652852263671" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2392" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M818.45 518.01l7.16 3.29 172.53 99.55a50.159 50.159 0 0 1 24.64 35.81l0.57 7.66V863.5a50.115 50.115 0 0 1-18.84 39.25l-6.3 4.3-172.6 99.91a50.132 50.132 0 0 1-43.47 3.29l-7.16-3.29-172.53-99.56a50.159 50.159 0 0 1-24.64-35.81l-0.57-7.66V664.47a50.115 50.115 0 0 1 18.84-39.25l6.3-4.3 172.53-99.55a50.132 50.132 0 0 1 43.47-3.29l0.07-0.07zM469.38 874.24c19.78 0 35.81 16.03 35.81 35.81s-16.03 35.81-35.81 35.81H109.93c-19.78 0-35.81-16.03-35.81-35.81s16.03-35.81 35.81-35.81h359.45z m330.81-284.47l-150.76 87.3v174.32l151.04 87.09 150.83-87.02V677.07l-150.9-87.02-0.21-0.28z m-7.16 104.56c39.55 0 71.62 32.06 71.62 71.62s-32.06 71.62-71.62 71.62-71.62-32.06-71.62-71.62c0.04-39.55 32.14-71.59 71.69-71.55h0.22l-0.29-0.07zM915.92 11.02c55.58 0 102.08 42.22 107.43 97.54l0.5 10.38v357.59c1.78 19.78-12.81 37.25-32.59 39.03-19.78 1.78-37.25-12.81-39.03-32.59l-0.57-6.52V119.09c0.06-17.39-12.38-32.32-29.51-35.38l-6.23-1.07H109.93c-17.39-0.06-32.32 12.38-35.38 29.51l-0.57 6.45v575.3l0.64 6.45A35.816 35.816 0 0 0 103.7 729l6.45 0.5 287.33-1.79c19.75-1.11 36.65 14 37.76 33.75 1.04 18.52-12.24 34.77-30.6 37.44l-6.45 0.72-287.33 1.79c-55.66 0.32-102.43-41.74-108-97.11L2 694.41V118.95C2 63.37 44.22 16.87 99.54 11.52l10.38-0.5h806z" fill="#339CFF" p-id="2393"></path></svg>

src/assets/styles/element-ui.scss

@@ -2,6 +2,7 @@
 
 .el-breadcrumb__inner,
 .el-breadcrumb__inner a {
+  color: #339CFF;
   font-weight: 400 !important;
 }
 

src/assets/styles/iconfont.css

@@ -0,0 +1,23 @@
+@font-face {
+  font-family: 'iconfont';  /* project id 3409379 */
+  src: url('?#iefix') format('embedded-opentype'),
+  url('//at.alicdn.com/t/font_3409379_8kgavncra7e.woff2') format('woff2'),
+  url('//at.alicdn.com/t/font_3409379_8kgavncra7e.woff') format('woff'),
+  url('//at.alicdn.com/t/font_3409379_8kgavncra7e.ttf') format('truetype'),
+  url('#iconfont') format('svg');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: .16rem;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.font-icon {
+  width: 2em;
+  height: 2em;
+  fill: currentColor;
+  overflow: hidden;
+}
+

src/assets/styles/index.scss

@@ -4,6 +4,7 @@
 @import 'element-ui';
 @import 'sidebar';
 @import 'btn';
+@import 'iconfont.css';
 @import 'yxk-admin';
 
 body {
@@ -121,10 +122,15 @@ aside {
 }
 
 //main-container全局样式
+.app-wrapper{
+  background-color: $menuBg;
+}
+
 .app-container {
-  padding: 20px 20px 45px 20px;
+  margin: 30px;
 }
 
+
 .components-container {
   margin: 30px 50px;
   position: relative;

src/assets/styles/sidebar.scss

@@ -5,6 +5,7 @@
     transition: margin-left .28s;
     margin-left: $sideBarWidth;
     position: relative;
+    padding-top: 100px;
   }
 
   .sidebar-container {
@@ -14,10 +15,13 @@
     height: 100%;
     position: fixed;
     font-size: 0;
-    top: 0;
+    top: 100px;
     bottom: 0;
     left: 0;
-    z-index: 1001;
+    z-index: 99;
+    background: url(~@/assets/images/sidebar_bg.png) #031435 no-repeat right bottom;
+    background-size: contain;
+    box-shadow: 5px 2px 10px 1px rgba(15,164,222,0.16);
     overflow: hidden;
 
     // reset element-ui css
@@ -54,36 +58,94 @@
     }
 
     .svg-icon {
-      margin-right: 16px;
+      margin-right: 10px;
+    }
+
+    .el-submenu__icon-arrow{
+      font-size: 18px;
+      color: #339CFF;
+      right: 60px;
     }
 
     .el-menu {
       border: none;
       height: 100%;
       width: 100% !important;
+      background-color: transparent !important;
     }
 
     // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {
+      font-size: 16px;
+      height: 60px !important;
+      line-height: 60px !important;
+      padding: 0 60px 0 58px !important;
+      background-color: transparent !important;
       &:hover {
-        background-color: $menuHover !important;
+        background-image: $menuActiveBg !important;
+        &::before{
+          content: "";
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 5px;
+          height: 60px;
+          background-color: #339CFF;
+        }
       }
     }
 
-    .is-active>.el-submenu__title {
+    .is-active>.el-submenu__title,
+    .is-active.submenu-title-noDropdown {
+      position: relative;
       color: $subMenuActiveText !important;
+      background-image: $menuActiveBg !important;
+      &::before{
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 5px;
+        height: 60px;
+        background-color: #339CFF;
+      }
+    }
+    .is-active.el-menu-item {
+      background-image: $subMenuActiveBg !important;
     }
 
     & .nest-menu .el-submenu>.el-submenu__title,
     & .el-submenu .el-menu-item {
       min-width: $sideBarWidth !important;
-      background-color: $subMenuBg !important;
+      background-color: transparent !important;
 
       &:hover {
-        background-color: $subMenuHover !important;
+        background-image: $subMenuHover !important;
+      }
+    }
+
+    & .el-submenu .el-menu-item{
+      position: relative;
+      padding: 0 60px 0 82px !important;
+      height: 40px !important;
+      line-height: 40px;
+      &::before{
+        content: "";
+        position: absolute;
+        left: 56px;
+        top: 50%;
+        width: 6px;
+        height: 6px;
+        background-color: #fff;
+        border-radius: 50%;
+        transform: translateY(-50%);
+      }
+      .svg-icon {
+        display: none;
       }
     }
+
   }
 
   .hideSidebar {

src/assets/styles/variables.scss

@@ -9,17 +9,24 @@ $yellow:#FEC171;
 $panGreen: #30B08F;
 
 // sidebar
-$menuText:#bfcbd9;
-$menuActiveText:#409EFF;
-$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951
+$menuText:#359AFC;
+$menuActiveText:#fff;
+$menuActiveBg: linear-gradient(90deg, rgba(59, 160, 255, 0.3) 0% 0%, rgba(42,112,177,0.3) 43%, rgba(51, 156, 255, 0) 100%);
+$subMenuActiveText:#339CFF; // https://github.com/ElemeFE/element/issues/12951
+$subMenuActiveBg: linear-gradient(90deg, rgba(59, 160, 255, 0) 0%, rgba(42,112,177,0.3) 43%, rgba(51, 156, 255, 0) 100%);
 
-$menuBg:#304156;
+$menuBg:#031435;
 $menuHover:#263445;
 
-$subMenuBg:#1f2d3d;
-$subMenuHover:#001528;
+$subMenuBg:#031435;
+$subMenuHover: linear-gradient(90deg, rgba(59, 160, 255, 0) 0%, rgba(42,112,177,0.3) 43%, rgba(51, 156, 255, 0) 100%);
 
-$sideBarWidth: 205px;
+$sideBarWidth: 300px;
+
+$mainContainerBg: #021941;
+$mainContainerBorder: 1px solid #113D72;
+
+$inputBorder: #339CFF;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
@@ -30,6 +37,11 @@ $sideBarWidth: 205px;
   menuBg: $menuBg;
   menuHover: $menuHover;
   subMenuBg: $subMenuBg;
+  menuActiveBg: $menuActiveBg;
   subMenuHover: $subMenuHover;
   sideBarWidth: $sideBarWidth;
+  subMenuActiveBg: $subMenuActiveBg;
+  mainContainerBorder: $mainContainerBorder;
+  mainContainerBg: $mainContainerBg;
+  inputBorder: $inputBorder;
 }

src/assets/styles/yxk-admin.scss

@@ -1,12 +1,15 @@
 .head-container {
-  padding-bottom: 10px;
+  padding: 20px;
   .filter-item {
     display: inline-block;
     vertical-align: middle;
     margin: 0 3px 10px 0;
     input {
-      height: 30.5px;
-      line-height: 30.5px;
+      border: 1px solid $inputBorder;
+      background-color: $mainContainerBg;
+      height: 32px;
+      line-height: 32px;
+      color: #fff;
     }
   }
   .el-form-item-label {
@@ -28,8 +31,10 @@
   .date-item {
     display: inline-block;
     vertical-align: middle;
+    border: 1px solid $inputBorder;
+    background-color: $mainContainerBg;
     margin-bottom: 10px;
-    height: 30.5px !important;
+    height: 32px !important;
     width: 230px !important;
   }
 }
@@ -115,3 +120,86 @@
 .el-tabs{
   margin-bottom: 25px;
 }
+
+// xu
+// 四角边线
+.container-main{
+  display: flex;
+  justify-content: space-between;
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+.container-left{
+  margin-right: 30px;
+}
+.container-left,
+.container-right{
+  position: relative;
+  min-height: 100%;
+  padding: 0 !important;
+  background-color: $mainContainerBg;
+  border: $mainContainerBorder;
+  height: calc(100vh - 210px);
+  &::before,
+  &::after{
+    content: "";
+    position: absolute;
+    width: 17px;
+    height: 17px;
+    z-index: 999;
+  }
+  &::before{
+    top: -1px;
+    left: -1px;
+    border-top: 1px solid #339CFF;
+    border-left: 1px solid #339CFF;
+  }
+  &::after{
+    right: -1px;
+    bottom: -1px;
+    border-right: 1px solid #339CFF;
+    border-bottom: 1px solid #339CFF;
+  }
+}
+
+.right-top-line,
+.left-bottom-line{
+  display: block;
+  position: absolute;
+  width: 17px;
+  height: 17px;
+  z-index: 999;
+}
+
+.left-bottom-line{
+  bottom: -1px;
+  left: -1px;
+  border-bottom: 1px solid #339CFF;
+  border-left: 1px solid #339CFF;
+}
+
+.right-top-line{
+  right: -1px;
+  top: -1px;
+  border-right: 1px solid #339CFF;
+  border-top: 1px solid #339CFF;
+}
+
+.el-tree{
+  background: transparent;
+}
+
+.el-date-editor .el-range-input{
+  background: transparent;
+  color: #fff;
+}
+
+.el-table{
+  background: transparent;
+  tr{
+    background: transparent;
+    .el-table__cell{
+      background-color: transparent;
+    }
+  }
+}

src/components/Breadcrumb/index.vue

@@ -69,13 +69,36 @@ export default {
 
 <style lang="scss" scoped>
 .app-breadcrumb.el-breadcrumb {
-  display: inline-block;
+  position: relative;
+  flex: 1;
   font-size: 14px;
   line-height: 50px;
-  margin-left: 8px;
+  padding-left: 30px;
+  &::before {
+    position: absolute;
+    left: 6px;
+    top: 50%;
+    font-family: "iconfont" !important;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    content: "\e60d";
+    color: #339CFF;
+    transform: translateY(-50%);
+  }
+  .el-breadcrumb__item:last-child{
+    .el-breadcrumb__inner .no-redirect{
+      color: #fff;
+    }
+  }
+  ::v-deep .el-breadcrumb__separator{
+    color: #339CFF;
+  }
   .no-redirect {
-    color: #97a8be;
+    color: #339CFF;
     cursor: text;
+
   }
+
 }
 </style>

src/components/Hamburger/index.vue

@@ -8,7 +8,7 @@
       width="64"
       height="64"
     >
-      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
+      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" fill="rgb(255, 255, 255)" />
     </svg>
   </div>
 </template>

src/layout/components/AppMain.vue

@@ -29,25 +29,25 @@ export default {
 
 <style lang="scss" scoped>
 .app-main {
-  /* 50= navbar  50  */
-  min-height: calc(100vh - 50px);
+  /* 100= navbar  100  */
+  min-height: calc(100vh - 150px);
   width: 100%;
   position: relative;
   overflow: hidden;
 }
 
 .fixed-header+.app-main {
-  padding-top: 50px;
+  padding-top: 150px;
 }
 
 .hasTagsView {
   .app-main {
-    /* 84 = navbar + tags-view = 50 + 34 */
-    min-height: calc(100vh - 84px);
+    /* 84 = navbar + tags-view = 100 + 50 */
+    min-height: calc(100vh - 150px);
   }
 
   .fixed-header+.app-main {
-    padding-top: 84px;
+    padding-top: 150px;
   }
 }
 </style>

src/layout/components/Navbar.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <!-- <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> -->
 
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
+    <!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" /> -->
+    <logo v-if="showLogo" :collapse="isCollapse" />
 
     <div class="right-menu">
       <template v-if="device!=='mobile'">
@@ -51,8 +52,9 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
-import Hamburger from '@/components/Hamburger'
+import Logo from '@/layout/components/Sidebar/Logo'
+// import Breadcrumb from '@/components/Breadcrumb'
+// import Hamburger from '@/components/Hamburger'
 import Doc from '@/components/Doc'
 import Screenfull from '@/components/Screenfull'
 import SizeSelect from '@/components/SizeSelect'
@@ -61,12 +63,13 @@ import Avatar from '@/assets/images/avatar.png'
 
 export default {
   components: {
-    Breadcrumb,
-    Hamburger,
+    // Breadcrumb,
+    // Hamburger,
     Screenfull,
     SizeSelect,
     Search,
-    Doc
+    Doc,
+    Logo
   },
   data() {
     return {
@@ -91,6 +94,12 @@ export default {
           value: val
         })
       }
+    },
+    showLogo() {
+      return this.$store.state.settings.sidebarLogo
+    },
+    isCollapse() {
+      return !this.sidebar.opened
     }
   },
   methods: {
@@ -117,11 +126,15 @@ export default {
 
 <style lang="scss" scoped>
 .navbar {
-  height: 50px;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height: 100px;
   overflow: hidden;
   position: relative;
-  background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  // background: #fff;
+  // box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  box-shadow: 5px 2px 10px 1px rgba(15,164,222,0.16);
 
   .hamburger-container {
     line-height: 46px;
@@ -136,18 +149,14 @@ export default {
     }
   }
 
-  .breadcrumb-container {
-    float: left;
-  }
-
   .errLog-container {
     display: inline-block;
     vertical-align: top;
   }
 
   .right-menu {
-    float: right;
-    height: 100%;
+    // height: 100%;
+    padding-top: 25px;
     line-height: 50px;
 
     &:focus {
@@ -173,7 +182,7 @@ export default {
     }
 
     .avatar-container {
-      margin-right: 30px;
+      margin-right: 60px;
 
       .avatar-wrapper {
         margin-top: 5px;

src/layout/components/Sidebar/Logo.vue

@@ -1,15 +1,16 @@
 <template>
-  <div class="sidebar-logo-container" :class="{'collapse':collapse}">
-    <transition name="sidebarLogoFade">
+  <div class="sidebar-logo-container">
+    <!-- :class="{'collapse':collapse}" -->
+    <!-- <transition name="sidebarLogoFade"> -->
     <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo">
-        <h1 v-else class="sidebar-title">{{ title }} </h1>
+      <!-- <img v-if="logo" :src="logo" class="sidebar-logo"> -->
+      <h1 class="sidebar-title">{{ title }} </h1>
     </router-link>
     <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo">
+      <!-- <img v-if="logo" :src="logo" class="sidebar-logo"> -->
       <h1 class="sidebar-title">{{ title }} </h1>
     </router-link>
-    </transition>
+    <!-- </transition> -->
   </div>
 </template>
 
@@ -25,7 +26,7 @@ export default {
   },
   data() {
     return {
-      title: '库房综合管理系统',
+      title: '智能库房综合管理系统',
       logo: Logo
     }
   }
@@ -33,6 +34,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "~@/assets/styles/mixin.scss";
+@import "~@/assets/styles/variables.scss";
 .sidebarLogoFade-enter-active {
   transition: opacity 1.5s;
 }
@@ -44,9 +47,9 @@ export default {
 
 .sidebar-logo-container {
   position: relative;
-  width: 100%;
-  height: 50px;
-  line-height: 50px;
+  width: $sideBarWidth;
+  height: 100px;
+  line-height: 100px;
   text-align: center;
   overflow: hidden;
 
@@ -65,10 +68,9 @@ export default {
       display: inline-block;
       margin: 0;
       color: #fff;
-      font-weight: 600;
-      line-height: 50px;
-      font-size: 14px;
-      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+      font-weight: normal;
+      font-size: 20px;
+      letter-spacing: 3px;
       vertical-align: middle;
     }
   }

src/layout/components/Sidebar/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="{'has-logo':showLogo}">
-    <logo v-if="showLogo" :collapse="isCollapse" />
+    <!-- <logo v-if="showLogo" :collapse="isCollapse" /> -->
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu
         :default-active="activeMenu"
@@ -20,12 +20,12 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import Logo from './Logo'
+// import Logo from './Logo'
 import SidebarItem from './SidebarItem'
 import variables from '@/assets/styles/variables.scss'
 
 export default {
-  components: { SidebarItem, Logo },
+  components: { SidebarItem },
   computed: {
     ...mapGetters([
       'sidebarRouters',

src/layout/index.vue

@@ -1,17 +1,21 @@
 <template>
   <div :class="classObj" class="app-wrapper">
     <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
-    <sidebar class="sidebar-container" />
-    <div :class="{hasTagsView:needTagsView}" class="main-container">
     <div :class="{'fixed-header':fixedHeader}">
       <navbar />
-        <tags-view v-if="needTagsView" />
+      <!-- <tags-view v-if="needTagsView" /> -->
+    </div>
+    <div :class="{hasTagsView:needTagsView}" class="main-container">
+      <div class="main-breadcrumb">
+        <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+        <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
       </div>
       <app-main />
       <right-panel v-if="showSettings">
         <settings />
       </right-panel>
     </div>
+    <sidebar class="sidebar-container" />
     <!--  防止刷新后主题丢失  -->
     <Theme v-show="false" ref="theme" />
   </div>
@@ -19,7 +23,9 @@
 
 <script>
 import RightPanel from '@/components/RightPanel'
-import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+import { AppMain, Navbar, Settings, Sidebar } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
 import { mapState } from 'vuex'
 import Theme from '@/components/ThemePicker'
@@ -32,7 +38,9 @@ export default {
     RightPanel,
     Settings,
     Sidebar,
-    TagsView,
+    // TagsView,
+    Breadcrumb,
+    Hamburger,
     Theme
   },
   mixins: [ResizeMixin],
@@ -65,6 +73,9 @@ export default {
   methods: {
     handleClickOutside() {
       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
+    },
+    toggleSideBar() {
+      this.$store.dispatch('app/toggleSideBar')
     }
   }
 }
@@ -100,17 +111,32 @@ export default {
     position: fixed;
     top: 0;
     right: 0;
-    z-index: 9;
-    width: calc(100% - #{$sideBarWidth});
+    z-index: 999;
+    // width: calc(100% - #{$sideBarWidth});
+    width: 100%;
     transition: width 0.28s;
     padding: 0;
-  }
-
-  .hideSidebar .fixed-header {
-    width: calc(100% - 54px)
+    background-color: $menuBg;
+    box-shadow: 5px 2px 10px 1px rgba(15,164,222,0.16);
   }
 
   .mobile .fixed-header {
     width: 100%;
   }
+
+  .main-breadcrumb{
+    display: flex;
+    justify-content:flex-start;
+    box-shadow: 0px 0px 6px 1px rgba(15,164,222,0.16);
+    .hamburger-container {
+      line-height: 46px;
+      height: 100%;
+      cursor: pointer;
+      transition: background .3s;
+      -webkit-tap-highlight-color:transparent;
+      &:hover {
+        background: rgba(0, 0, 0, .025)
+      }
+    }
+  }
 </style>

src/main.js

@@ -18,6 +18,7 @@ import permission from './components/Permission'
 import './assets/styles/element-variables.scss'
 // global css
 import './assets/styles/index.scss'
+import './assets/icons/iconfont.js'
 
 // 代码高亮
 import VueHighlightJS from 'vue-highlightjs'

src/router/routers.js

@@ -40,7 +40,7 @@ export const constantRouterMap = [
         path: 'dashboard',
         component: (resolve) => require(['@/views/home'], resolve),
         name: 'Dashboard',
-        meta: { title: '首页', icon: 'index', affix: true, noCache: true }
+        meta: { title: '首页', icon: 'sr-home', affix: true, noCache: true }
       }
     ]
   },

src/settings.js

@@ -38,7 +38,7 @@ module.exports = {
   /**
    * 是否显示设置的底部信息
    */
-  showFooter: true,
+  showFooter: false,
   /**
    * 底部文字，支持html语法
    */

src/views/system/user/index.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="app-container">
-    <el-row :gutter="20">
+    <el-row class="container-main" :gutter="20">
       <!--侧边部门数据-->
-      <el-col :xs="9" :sm="6" :md="5" :lg="4" :xl="4">
+      <el-col class="container-left" :xs="9" :sm="6" :md="5" :lg="4" :xl="4">
+        <span class="right-top-line" />
+        <span class="left-bottom-line" />
         <div class="head-container">
           <el-input
             v-model="deptName"
@@ -24,7 +26,9 @@
         />
       </el-col>
       <!--用户数据-->
-      <el-col :xs="15" :sm="18" :md="19" :lg="20" :xl="20">
+      <el-col class="container-right" :xs="15" :sm="18" :md="19" :lg="20" :xl="20">
+        <span class="right-top-line" />
+        <span class="left-bottom-line" />
         <!--工具栏-->
         <div class="head-container">
           <div v-if="crud.props.searchToggle">