更换ui布局

BoBoooooo · Dec 28, 2018 · 4de2be6 · 4de2be6
1 parent 76deb1d
commit 4de2be6
Show file tree

Hide file tree

Showing 13 changed files with 96 additions and 91 deletions.
diff --git a/public/index.html b/public/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>AnshareAdmin</title>
     <style>
-      html,body{width: 100%;height: 100%;margin:0}
+      html,body{margin:0}
       a{text-decoration: none;color:black}
     </style>
   </head>

diff --git 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
@@ -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
@@ -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
diff --git 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 → src/styles/layout.scss b/src/styles/sidebar.scss → 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
@@ -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
@@ -2,15 +2,12 @@
   <div
     :class="classObj"
     class="app-wrapper">
-    <div class="sidebar-wrapper">
-      <sidebar class="sidebar-container"/>
-    </div>
-    <div class="main-container">
-      <navbar/>
-      <TagsView/>
-      <div class="content-container">
+        <navbar/>
+
+        <sidebar class="sidebar-container"/>
+        <div class="main-container">
+        <TagsView/>
         <app-main/>
-      </div>
     </div>
     <BackToTop/>
   </div>
@@ -63,27 +60,3 @@ export default {
 }
 
 </script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  @import "src/styles/mixin.scss";
-  .app-wrapper {
-    @include clearfix;
-    position: relative;
-    height: 100%;
-    width: 100%;
-    s
-    &.mobile.openSidebar{
-      position: fixed;
-      top: 0;
-    }
-  }
-  .drawer-bg {
-    background: #000;
-    opacity: 0.3;
-    width: 100%;
-    top: 0;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-  }
-</style>
diff --git a/src/views/layout/components/AppMain.vue b/src/views/layout/components/AppMain.vue
@@ -26,11 +26,3 @@ export default {
   },
 }
 </script>
-<style scoped>
-.app-main {
-  width: 100%;
-  height:100%;
-  position: relative;
-  overflow: auto;
-}
-</style>
diff --git 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"/>
-    <breadcrumb class="breadcrumb-container"/>
-    <Screenfull class="screenfull"/>
+    <!-- <breadcrumb class="breadcrumb-container"/> -->
+    <span style="display:inline-block;width:70%;margin:0 auto;text-align:center">Anshare Tech</span>
+        <Screenfull class="screenfull"/>
+
     <el-dropdown
       class="avatar-container"
       trigger="click">
@@ -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 {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .navbar {
 
-    height: 50px;
-    line-height: 50px;
+@import '~@/styles/index.scss';
+  .navbar {
+      padding-left:24px;
+      padding-right:44px;
+      background:#333;
+    height: 72px;
+    line-height: 72px;
+    color:white;
+    position:relative;
     border-radius: 0px !important;
     .hamburger-container {
-      line-height: 58px;
-      height: 50px;
+      line-height: 72px;
+      height: 72px;
+          color:white;
+
       float: left;
       outline:none;
       padding: 0 10px;
@@ -106,14 +115,14 @@ export default {
     .errLog-container {
       display: inline-block;
       position: absolute;
-      right: 150px;
+      right: 172px;
     }
     .screenfull {
       position: absolute;
       right: 120px;
       top: 14px;
+    color:white;
 
-      color: red;
 
       &:focus{
              outline: none;
@@ -122,10 +131,12 @@ export default {
     }
 
     .avatar-container {
-      height: 50px;
+      height: 72px;
       display: inline-block;
       position: absolute;
       right: 35px;
+          color:white;
+
       .avatar-wrapper {
         cursor: pointer;
         position: relative;
@@ -137,7 +148,8 @@ export default {
         .el-icon-caret-bottom {
           position: absolute;
           right: -20px;
-          top: 20px;
+          top: 28px;
+          color:$primary;
           font-size: 12px;
         }
       }

diff --git a/src/views/layout/components/Sidebar.vue b/src/views/layout/components/Sidebar.vue
@@ -4,9 +4,9 @@
       :collapse="isCollapse"
       :default-active="$route.path"
       mode="vertical"
-     background-color="#324157"
+     background-color="#333"
       text-color="#fff"
-      active-text-color="#ffd04b"
+      active-text-color="#4ae387"
 
       style="border:none">
 
@@ -33,9 +33,3 @@ export default {
   },
 };
 </script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.el-menu {
-  min-height: 100%;
-}
-</style>
diff --git 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;
       }