1

mock/index.js

@@ -50,11 +50,7 @@ module.exports = function(app){
         })
 
 
-        app.get('//',(rep,res)=>{
-
-            let data = {}
-            res.json(response.error(data))
-        })
+       
     }
 }
 

src/App.vue

@@ -13,12 +13,7 @@ export default {
 
   },
   mounted(){
-    var time = new Date(this.$c.updateTime).getTime()
-    var time2 = new Date().getTime()
-    if(time2 < time){
-        this.$router.push({path: '/'})
-        return false
-    }
+    
   },
   methods: {
 
@@ -36,6 +31,8 @@ html, body, #app {
   padding: 0;
   margin: 0;
   background: #f4f4f4;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
+  overflow: hidden;
 }
 .margin-left_0 {
   margin-left: 0 !important;
@@ -150,8 +147,8 @@ html, body, #app {
   }
 }
 .scrollable {-webkit-overflow-scrolling: touch;}
-::-webkit-scrollbar {width: 5px;height: 5px;}
-::-webkit-scrollbar-thumb {background-color: rgba(50, 50, 50, 0.3);}
+::-webkit-scrollbar {width: 8px;height: 8px;}
+::-webkit-scrollbar-thumb {background-color: rgba(50, 50, 50, 0.3);border-radius: 20px;}
 ::-webkit-scrollbar-thumb:hover {background-color: rgba(50, 50, 50, 0.6);}
 ::-webkit-scrollbar-track {background-color: rgba(50, 50, 50, 0.1);}
 ::-webkit-scrollbar-track:hover {background-color: rgba(50, 50, 50, 0.2);}

src/components/Breadcrumb/index.vue

@@ -44,8 +44,14 @@ export default {
     line-height: 50px;
     margin-left: 10px;
     .no-redirect {
-      color: #97a8be;
+      // color: #97a8be;
+      color: black;
       cursor: text;
     }
   }
 </style>
+<style lang="scss">
+  .app-breadcrumb .el-breadcrumb__separator{
+    color: black;
+  }
+</style>

src/styles/index.scss

@@ -51,7 +51,9 @@ a:hover {
 
 //main-container全局样式
 .app-main{
-  min-height: 100%
+  height: 100%;
+  padding: 8px;
+  overflow: auto;
 }
 
 .app-container {

src/styles/sidebar.scss

@@ -3,6 +3,7 @@
   // 主体区域
   .main-container {
     min-height: 100%;
+    max-height: 100%;
     transition: margin-left .28s;
     margin-left: 180px;
   }
@@ -15,11 +16,13 @@
     transition: width .28s;
     width: 180px !important;
     height: 100%;
-    position: fixed;
-    font-size: 0px;
-    top: 0;
-    bottom: 0;
-    left: 0;
+    // position: fixed;
+    // font-size: 0px;
+    // top: 0;
+    // bottom: 0;
+    // left: 0;
+    float: left;
+    border-radius: $border_radius 0 0 $border_radius;
     z-index: 1001;
     overflow: hidden;
     a {
@@ -74,6 +77,8 @@
       background-color: $menuHover !important;
     }
   }
+
+
   .el-menu--collapse .el-menu .el-submenu {
     min-width: 180px !important;
   }

src/styles/variables.scss

@@ -1,4 +1,7 @@
 //sidebar
-$menuBg:#304156;
-$subMenuBg:#1f2d3d;
-$menuHover:#001528;
+$menuBg:rgba(black,0.23);
+$subMenuBg:transparent;
+$menuHover:rgba(black,0.3);
+$padding_top:30px;
+$padding_left:20px;
+$border_radius:15px;

src/views/backStageManage/layout/Layout.vue

@@ -1,10 +1,15 @@
 <template>
-  <div class="app-wrapper" :class="classObj">
+  <div class="app-wrapper" :style="`background-image:url(${require('@/assets/image/background_admin.png')})`" :class="classObj">
     <sidebar class="sidebar-container"></sidebar>
     <div class="main-container">
-      <navbar></navbar>
-      <history></history>
-      <app-main></app-main>
+      <div style="position: sticky;top: 0;">
+        <navbar></navbar>
+        <history></history>
+      </div>
+      <div class="appMain">
+        <app-main></app-main>
+      </div>
+      
     </div>
   </div>
 </template>
@@ -45,10 +50,24 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss" scoped>
   @import "../../../styles/mixin.scss";
+  @import "../../../styles/variables.scss";
   .app-wrapper {
     @include clearfix;
     position: relative;
-    height: 100%;
-    width: 100%;
+    height: calc(100% - $padding_top - $padding_top);
+    width: calc(100% - $padding_left - $padding_left);
+    // height: 100%;
+    // width: 100%;
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+    padding: $padding_top $padding_left;
+  }
+  .appMain{
+    height: calc(100vh - $padding_top - $padding_top - 102px);
+  }
+  .main-container{
+    background-color: rgba($color: white, $alpha: 0.6);
+    border-radius: 0 $border_radius $border_radius 0;
   }
 </style>

src/views/backStageManage/layout/components/Navbar.vue

@@ -2,9 +2,9 @@
   <el-menu class="navbar" mode="horizontal">
       <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
       <breadcrumb></breadcrumb>
-    <div class="screenfull" @click="toggleFullScreen" v-if="!isScreenFull">
+    <!-- <div class="screenfull" @click="toggleFullScreen" v-if="!isScreenFull">
       全屏
-    </div>
+    </div> -->
       <el-dropdown class="avatar-container" trigger="click">
         <div class="avatar-wrapper">
           <img class="user-avatar" :src="$commonJS.getFile(avatar)">
@@ -94,7 +94,8 @@ export default {
 .navbar {
   position: sticky;
   top: 0;
-  background-color: white;
+  background-color: rgba($color: white, $alpha: 0);
+  border-bottom: 1px solid #e4e7ed !important;
   z-index: 999;
   width: auto;
   height: 50px;
@@ -102,7 +103,7 @@ export default {
   border-radius: 0px !important;
   .hamburger-container {
     line-height: 58px;
-    height: 50px;
+    height: 50px; 
     float: left;
     padding: 0 10px;
   }

src/views/backStageManage/layout/components/Sidebar/SidebarItem.vue

@@ -63,3 +63,11 @@ export default {
   }
 }
 </script>
+<style lang="scss">
+@import "../../../../../styles/variables.scss";;
+  .menu-wrapper{
+    .el-submenu__title:hover,.el-menu-item:hover{
+      background-color: $menuHover !important;
+    }
+  }
+</style>

src/views/backStageManage/layout/components/Sidebar/index.vue

@@ -1,12 +1,15 @@
 <template>
   <scroll-bar>
+    <div class="logo">
+        <el-image :src="require('@/assets/image/logo3.png')" class="img" fit="contain"></el-image>
+    </div>
     <el-menu
       mode="vertical"
       :show-timeout="200"
       :default-active="$route.path"
       :collapse="isCollapse"
-      background-color="#304156"
-      text-color="#bfcbd9"
+      background-color="transparent"
+      text-color="#fff"
       active-text-color="#409EFF"
     >
       <sidebar-item :routes="routes"></sidebar-item>
@@ -36,3 +39,19 @@ export default {
   }
 }
 </script>
+<style lang="scss" scoped>
+  .logo{
+    
+    width: 100%;
+    min-width: 76px;
+    max-width: 140px;
+    width: fit-content;
+    margin: auto;
+    margin-top:10px;
+    // z-index: 9999;
+    .img{
+        width: 100%;
+        height: 100%;
+    }
+  }
+</style>

src/views/backStageManage/layout/components/history.vue

@@ -1,15 +1,10 @@
 <template>
-  <el-tabs type="card" v-if="history&&history.length>0"
-           :value="currentPath"
-           @tab-click="tabClick"
-           @tab-remove="tabRemove"
-           closable class="content">
-    <el-tab-pane v-for="item in history"
-                 :key="item.path"
-                 :label="item.name"
-                 :name="item.path">
-    </el-tab-pane>
-  </el-tabs>
+  <div class="tabs">
+    <div class="tab-header">
+      <div  v-for="item in history" :key="item.path" @click="tabClick(item)" :class="['tab_item',item.path==currentPath?'tab_item_active':'']">{{ item.name }} <span @click.stop="tabRemove(item.path)" class="el-icon-close"></span></div>
+    </div>
+  </div>
+  
 </template>
 
 <script>
@@ -27,7 +22,8 @@ export default {
   mounted(){
   },
   methods:{
-    tabClick({name}){
+    tabClick(item){
+      var name = item.path
       this.$store.commit('addHistoryPath',name);
       if(name!==this.$route.path){
         //跳转历史的路由
@@ -44,53 +40,57 @@ export default {
     tabRemove(path){
       this.$store.commit('removeHistoryPath',path);
       this.$store.commit('removeHistory',path);
-      this.tabClick({name:this.currentPath})
+      if(this.currentPath == path){
+        this.tabClick(this.history[this.history.length-1])
+      }
+      
     }
   }
 }
 </script>
-
-<style scoped>
-.content{
-  margin-top: 5px;
-  /* height: 35px; */
-  user-select: none;
-}
-:deep(.el-tabs__nav-wrap){
-  height: 35px !important;
-  line-height: 35px !important;
-}
-:deep(.el-tabs__nav-next) , :deep(.el-tabs__nav-prev){
-  line-height: 35px !important;
-}
-:deep(.el-tabs__header){
-  height: 35px !important;
-  margin: 0;
-  border: none;
-}
-:deep(.el-tabs__item){
-  height: 30px;
-  margin-top: 2px;
-  margin-bottom: 2px;
-  border: 1px solid grey !important;
-  line-height: 30px;
-  padding: 0 10px 0 10px !important;
-  border-radius: 2px;
-}
-
-:deep(.el-tabs__item:not(:last-child)){
-  margin-right: 10px;
-}
-
-:deep(.is-active){
-  border-bottom:inherit;
-  background-color: lightcyan;
-}
-:deep(.el-tabs__nav){
-  border: none !important;
-  /*height: 35px;*/
-  /*1px solid #E4E7ED*/
-}
-
+<style lang="scss" scoped>
+  .tabs{
+    overflow-x: auto;
+    overflow-y: hidden;
+    width: 100%;
+    color: #303133;
+    font-size: 14px;
+    .tab-header::after{
+      content: "";
+      display: block;
+      width: 100%;
+      height: 1px;
+      background: #e4e7ed;
+      margin-top: -1px;
+    }
+    .tab_item{
+      padding: 0 13px;
+      line-height: 35px;
+      text-align: center;
+      height: 35px;
+      min-width: 80px;
+      border-right: 1px solid #e4e7ed;
+      display: inline-block;
+      position: relative;
+      cursor: pointer;
+      z-index: 9999;
+      .el-icon-close{
+        display: none;
+      }
+    }
+    .tab_item:hover{
+        .el-icon-close{
+          display: inline;
+        }
+      }
+    .tab_item_active{
+      border-bottom: 1px solid #b6b6d7;
+      font-weight: bold;
+      .el-icon-close{
+        display: inline;
+      }
+     
+    }
+  }
 </style>
 

src/views/index/index.vue

@@ -12,6 +12,7 @@ export default {
   watch:{
   },
   mounted() {
+    console.log(2)
     this.$router.push({path: '/home'})
   }
 }