From 4de2be6e2e6ae15005fc6fea7256b2a2afcb4c43 Mon Sep 17 00:00:00 2001 From: BoBoooooo <17746714@qq.com> Date: Fri, 28 Dec 2018 19:57:41 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=8D=A2ui=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 2 +- src/components/Breadcrumb/index.vue | 3 +- src/components/Hamburger/index.vue | 2 +- src/components/Screenfull/index.vue | 2 +- src/icons/svg/logo.svg | 1 + src/styles/index.scss | 2 +- src/styles/{sidebar.scss => layout.scss} | 73 +++++++++++++++++------- src/styles/variables.scss | 2 +- src/views/layout/Layout.vue | 37 ++---------- src/views/layout/components/AppMain.vue | 8 --- src/views/layout/components/Navbar.vue | 38 +++++++----- src/views/layout/components/Sidebar.vue | 10 +--- src/views/layout/components/TagsView.vue | 7 +-- 13 files changed, 96 insertions(+), 91 deletions(-) create mode 100644 src/icons/svg/logo.svg rename src/styles/{sidebar.scss => layout.scss} (68%) diff --git a/public/index.html b/public/index.html index 34417fd..4d45899 100644 --- a/public/index.html +++ b/public/index.html @@ -6,7 +6,7 @@ AnshareAdmin diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue index 4e7ff11..2be5f31 100644 --- a/src/components/Breadcrumb/index.vue +++ b/src/components/Breadcrumb/index.vue @@ -54,8 +54,9 @@ export default { font-size: 14px; line-height: 50px; margin-left: 10px; + .no-redirect { - color: #97a8be; + color: #4ae387; cursor: text; } } diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue index b46c36e..d06b663 100644 --- a/src/components/Hamburger/index.vue +++ b/src/components/Hamburger/index.vue @@ -4,7 +4,7 @@ :class="{'is-active':isActive}" t="1492500959545" class="svg-icon hamburger" - style="" + style="fill:#4ae387" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" diff --git a/src/components/Screenfull/index.vue b/src/components/Screenfull/index.vue index ff4acf1..e8f3348 100644 --- a/src/components/Screenfull/index.vue +++ b/src/components/Screenfull/index.vue @@ -70,7 +70,7 @@ export default { .screenfull-svg { display: inline-block; cursor: pointer; - fill: #5a5e66;; + fill: #4ae387; width: 20px; height: 20px; vertical-align: 10px; diff --git a/src/icons/svg/logo.svg b/src/icons/svg/logo.svg new file mode 100644 index 0000000..a52b59d --- /dev/null +++ b/src/icons/svg/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss index b6fd924..a4aed5f 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -2,7 +2,7 @@ @import './mixin.scss'; @import './transition.scss'; @import './element-ui.scss'; -@import './sidebar.scss'; +@import './layout.scss'; @import './btn.scss'; body { diff --git a/src/styles/sidebar.scss b/src/styles/layout.scss similarity index 68% rename from src/styles/sidebar.scss rename to src/styles/layout.scss index daa8be1..e001252 100644 --- a/src/styles/sidebar.scss +++ b/src/styles/layout.scss @@ -1,30 +1,62 @@ #app { - // 主体区域 - .main-container { - height: 100%; - transition: margin-left .28s; - margin-left: 180px; + @import "src/styles/mixin.scss"; + .app-wrapper { + @include clearfix; position: relative; + min-height: 100%; + width: 100%; + background:#eee; + + .drawer-bg { + background: #000; + opacity: 0.3; + width: 100%; + top: 0; + min-height: 100%; + position: absolute; + z-index: 999; + } + + .main-container { + min-height: calc(100% - 72px); + transition: margin-left .28s; + overflow: auto; + margin-left:284px; + padding:24px 44px 24px 0 ; + position: relative; + .app-main { + margin-top:1.875rem; + width: 100%; + box-shadow: 0 4px 70px -18px #707070; + + background: white; + height:100%; + position: relative; + overflow: auto; + } + } + + &.mobile.openSidebar{ + position: fixed; + top: 0; + } + + } + - .content-container{ - position:absolute; - top:84px; - bottom:0px; - left:0px; - right:0px; - } // 侧边栏 .sidebar-container { transition: width 0.28s; - width: 180px !important; - height: 100%; - position: fixed; + width: 225px !important; + min-height: calc(70% - 120px); + background: #333; + box-shadow: 0 8px 14.72px 1.28px rgba(101,169,119,.3); + position: absolute; font-size: 0px; - top: 0; - bottom: 0; - left: 0; + top: 96px; + left: 24px; z-index: 1001; overflow: hidden; //reset element-ui css @@ -50,6 +82,7 @@ } .svg-icon { margin-right: 16px; + fill:$primary; } .el-menu { border: none; @@ -103,7 +136,7 @@ // } // } .el-menu--collapse .el-menu .el-submenu { - min-width: 180px !important; + min-width: 225px !important; } //适配移动端 @@ -113,7 +146,7 @@ } .sidebar-container { transition: transform .28s; - width: 180px !important; + width: 225px !important; } &.hideSidebar { .sidebar-container { diff --git a/src/styles/variables.scss b/src/styles/variables.scss index b77a992..3d3aff8 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -6,7 +6,7 @@ $green: #30B08F; $tiffany: #4AB7BD; $yellow:#FEC171; $panGreen: #30B08F; - +$primary:#4ae387; //sidebar $menuBg:#292421; $subMenuBg:#292421; diff --git a/src/views/layout/Layout.vue b/src/views/layout/Layout.vue index 3397074..c409dd2 100644 --- a/src/views/layout/Layout.vue +++ b/src/views/layout/Layout.vue @@ -2,15 +2,12 @@
-
- -
-
- - -
+ + + +
+ -
@@ -63,27 +60,3 @@ export default { } - - diff --git a/src/views/layout/components/AppMain.vue b/src/views/layout/components/AppMain.vue index ef71fbc..f772e3c 100644 --- a/src/views/layout/components/AppMain.vue +++ b/src/views/layout/components/AppMain.vue @@ -26,11 +26,3 @@ export default { }, } - diff --git a/src/views/layout/components/Navbar.vue b/src/views/layout/components/Navbar.vue index 8525e0c..dc72fc1 100644 --- a/src/views/layout/components/Navbar.vue +++ b/src/views/layout/components/Navbar.vue @@ -7,8 +7,10 @@ :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/> - - + + Anshare Tech + + @@ -47,12 +49,11 @@ import { mapGetters, } from 'vuex' import Hamburger from '@/components/Hamburger' -import Breadcrumb from '@/components/Breadcrumb' +// import Breadcrumb from '@/components/Breadcrumb' import Screenfull from '@/components/Screenfull' export default { components: { - Breadcrumb, Screenfull, Hamburger, }, @@ -88,14 +89,22 @@ export default { diff --git a/src/views/layout/components/TagsView.vue b/src/views/layout/components/TagsView.vue index bb6458c..692e5b2 100644 --- a/src/views/layout/components/TagsView.vue +++ b/src/views/layout/components/TagsView.vue @@ -9,7 +9,6 @@ :class="isActive(tag)?'active':''" :to="tag.path" :key="tag.path" - style="border-radius:4px" class="tags-view-item" @contextmenu.prevent.native="openMenu(tag,$event)"> {{ tag.title }} @@ -144,9 +143,9 @@ export default { .tags-view-container { .tags-view-wrapper { background: #fff; - height: 34px; + height: 54px; border-bottom: 1px solid #d8dce5; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); + box-shadow: 0 4px 70px -18px #707070; .tags-view-item { display: inline-block; position: relative; @@ -158,7 +157,7 @@ export default { padding: 0 8px; font-size: 12px; margin-left: 5px; - margin-top: 4px; + margin-top: 14px; &:first-of-type { margin-left: 15px; }