diff --git a/src/assets/icons/iconfont.js b/src/assets/icons/iconfont.js new file mode 100644 index 0000000..71f898a --- /dev/null +++ b/src/assets/icons/iconfont.js @@ -0,0 +1 @@ +!function(c){var t,e,l,o,i,n='',a=(a=document.getElementsByTagName("script"))[a.length-1].getAttribute("data-injectcss"),h=function(c,t){t.parentNode.insertBefore(c,t)};if(a&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}function s(){i||(i=!0,l())}function d(){try{o.documentElement.doScroll("left")}catch(c){return void setTimeout(d,50)}s()}t=function(){var c,t=document.createElement("div");t.innerHTML=n,n=null,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(c=document.body).firstChild?h(t,c.firstChild):c.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(e=function(){document.removeEventListener("DOMContentLoaded",e,!1),t()},document.addEventListener("DOMContentLoaded",e,!1)):document.attachEvent&&(l=t,o=c.document,i=!1,d(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,s())})}(window); \ No newline at end of file diff --git a/src/assets/icons/svg/sr-dn-gl.svg b/src/assets/icons/svg/sr-dn-gl.svg new file mode 100644 index 0000000..c7fdcf4 --- /dev/null +++ b/src/assets/icons/svg/sr-dn-gl.svg @@ -0,0 +1,2 @@ + \ No newline at end of file diff --git a/src/assets/icons/svg/sr-dn-pz.svg b/src/assets/icons/svg/sr-dn-pz.svg new file mode 100644 index 0000000..557d8bc --- /dev/null +++ b/src/assets/icons/svg/sr-dn-pz.svg @@ -0,0 +1,2 @@ + \ No newline at end of file diff --git a/src/assets/icons/svg/sr-home.svg b/src/assets/icons/svg/sr-home.svg new file mode 100644 index 0000000..7767704 --- /dev/null +++ b/src/assets/icons/svg/sr-home.svg @@ -0,0 +1,2 @@ + \ No newline at end of file diff --git a/src/assets/icons/svg/sr-kf.svg b/src/assets/icons/svg/sr-kf.svg new file mode 100644 index 0000000..5694b26 --- /dev/null +++ b/src/assets/icons/svg/sr-kf.svg @@ -0,0 +1,2 @@ + \ No newline at end of file diff --git a/src/assets/icons/svg/sr-ml.svg b/src/assets/icons/svg/sr-ml.svg new file mode 100644 index 0000000..16323c1 --- /dev/null +++ b/src/assets/icons/svg/sr-ml.svg @@ -0,0 +1,2 @@ + \ No newline at end of file diff --git a/src/assets/icons/svg/sr-system.svg b/src/assets/icons/svg/sr-system.svg new file mode 100644 index 0000000..f1b7e36 --- /dev/null +++ b/src/assets/icons/svg/sr-system.svg @@ -0,0 +1,2 @@ + \ No newline at end of file diff --git a/src/assets/images/sidebar_bg.png b/src/assets/images/sidebar_bg.png new file mode 100644 index 0000000..cec680b Binary files /dev/null and b/src/assets/images/sidebar_bg.png differ diff --git a/src/assets/styles/element-ui.scss b/src/assets/styles/element-ui.scss index 8f7881c..43255b3 100644 --- a/src/assets/styles/element-ui.scss +++ b/src/assets/styles/element-ui.scss @@ -2,6 +2,7 @@ .el-breadcrumb__inner, .el-breadcrumb__inner a { + color: #339CFF; font-weight: 400 !important; } diff --git a/src/assets/styles/iconfont.css b/src/assets/styles/iconfont.css new file mode 100644 index 0000000..0d3d758 --- /dev/null +++ b/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; +} + diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 028c9a4..968a93e 100644 --- a/src/assets/styles/index.scss +++ b/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; @@ -179,4 +185,4 @@ aside { .multiselect--active { z-index: 1000 !important; -} +} \ No newline at end of file diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss index 17381fc..5c3e0ad 100644 --- a/src/assets/styles/sidebar.scss +++ b/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 { diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss index 41de79c..880f7e5 100644 --- a/src/assets/styles/variables.scss +++ b/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; } diff --git a/src/assets/styles/yxk-admin.scss b/src/assets/styles/yxk-admin.scss index 464c695..931cf39 100644 --- a/src/assets/styles/yxk-admin.scss +++ b/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; + } + } +} \ No newline at end of file diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue index 204ea59..8f7d991 100644 --- a/src/components/Breadcrumb/index.vue +++ b/src/components/Breadcrumb/index.vue @@ -69,13 +69,36 @@ export default { diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue index 368b002..1456bb4 100644 --- a/src/components/Hamburger/index.vue +++ b/src/components/Hamburger/index.vue @@ -8,7 +8,7 @@ width="64" height="64" > - + diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue index 92229f1..1af5877 100644 --- a/src/layout/components/AppMain.vue +++ b/src/layout/components/AppMain.vue @@ -29,25 +29,25 @@ export default { diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index f3cd392..2235b35 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -1,8 +1,9 @@