From 0801fddd7940fece09d2e717b321b58f3e94630d Mon Sep 17 00:00:00 2001
From: bypanghu <bypanghu@163.com>
Date: Mon, 7 Dec 2020 21:33:45 +0800
Subject: [PATCH 1/3] =?UTF-8?q?scss=E5=8F=98=E9=87=8F=EF=BC=8C=E7=BD=91?=
 =?UTF-8?q?=E9=A1=B5=E6=A0=87=E7=AD=BE=EF=BC=8C=E9=A1=B5=E9=9D=A2=E5=88=B7?=
 =?UTF-8?q?=E6=96=B0=EF=BC=8C=E7=82=B9=E5=87=BB=E5=A4=B4=E5=83=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/permission.js                         |   3 +
 web/src/style/aside.scss                      | 146 ++++++++++++++++++
 web/src/style/main.scss                       |  49 +-----
 web/src/utils/page.js                         |   9 ++
 .../layout/aside/historyComponent/history.vue |   5 +
 web/src/view/layout/index.vue                 |  29 ++--
 web/src/view/person/person.vue                |  42 +++--
 7 files changed, 215 insertions(+), 68 deletions(-)
 create mode 100644 web/src/style/aside.scss
 create mode 100644 web/src/utils/page.js

diff --git a/web/src/permission.js b/web/src/permission.js
index 48a7dc5f..989b1aa4 100644
--- a/web/src/permission.js
+++ b/web/src/permission.js
@@ -1,5 +1,6 @@
 import router from './router'
 import { store } from '@/store/index'
+import getPageTitle from '@/utils/page'
 
 let asyncRouterFlag = 0
 
@@ -7,6 +8,8 @@ const whiteList = ['login']
 
 router.beforeEach(async(to, from, next) => {
     const token = store.getters['user/token']
+    //修改网页标签名称
+    document.title = getPageTitle(to.meta.title)
         // 在白名单中的判断情况
     if (whiteList.indexOf(to.name) > -1) {
         if (token) {
diff --git a/web/src/style/aside.scss b/web/src/style/aside.scss
new file mode 100644
index 00000000..658819c3
--- /dev/null
+++ b/web/src/style/aside.scss
@@ -0,0 +1,146 @@
+
+@import '@/style/basics.scss';
+    .aside {
+        background-color: $bg-aside !important;
+        .el-menu {
+            border: none;
+            height: 100%;
+            background-color: $bg-aside !important;
+          }
+            .el-menu-item {
+                background-color: $bg-aside !important;
+                color: $aside-title !important;
+              &:hover{
+                background-color: $aside-active !important;
+                }
+                &.is-active{
+                background-color: $aside-active !important;
+                box-shadow: 2px 6px 10px 1px,#EBEEF5;
+                &.is-opend{
+                    ul{
+                    border: none;
+                    }
+                }
+            }
+               
+        }
+            
+            
+    
+    
+    
+          // menu hover
+          .submenu-title-noDropdown,
+          .el-submenu__title {
+            color: $aside-title !important;
+            &:hover {
+              background-color: $aside-hover !important;
+            }
+          }
+      
+          .is-active>.el-submenu__title {
+            color: $aside-title-active !important;
+          }
+      
+          & .nest-menu .el-submenu>.el-submenu__title,
+          & .el-submenu .el-menu-item {
+            color: $aside-title !important;
+            background-color: $bg-aside !important;
+      
+            &:hover {
+              background-color: $aside-hover !important;
+            }
+            &.is-active{
+              background-color:$aside-active !important;
+            }
+          }
+        }
+      
+        .hideSidebar {
+          .sidebar-container {
+            width: 54px !important;
+          }
+      
+          .main-container {
+            margin-left: 54px;
+          }
+      
+          .submenu-title-noDropdown {
+            padding: 0 !important;
+            position: relative;
+      
+            .el-tooltip {
+              padding: 0 !important;
+      
+              .svg-icon {
+                margin-left: 20px;
+              }
+            }
+          }
+      
+          .el-submenu {
+            overflow: hidden;
+      
+            &>.el-submenu__title {
+              padding: 0 !important;
+      
+              .svg-icon {
+                margin-left: 20px;
+              }
+      
+              .el-submenu__icon-arrow {
+                display: none;
+              }
+            }
+          }
+      
+          .el-menu--collapse {
+            .el-submenu {
+              &>.el-submenu__title {
+                &>span {
+                  height: 0;
+                  width: 0;
+                  overflow: hidden;
+                  visibility: hidden;
+                  display: inline-block;
+                }
+              }
+            }
+          }
+        }
+      
+      // when menu collapsed
+      .el-menu--vertical {
+        &>.el-menu {
+          .svg-icon {
+            margin-right: 16px;
+          }
+        }
+      
+        .nest-menu .el-submenu>.el-submenu__title,
+        .el-menu-item {
+          &:hover {
+            // you can use $subMenuHover
+            background-color: #3788ee !important;
+          }
+        }
+      
+        // the scroll bar appears when the subMenu is too long
+        >.el-menu--popup {
+          max-height: 100vh;
+          overflow-y: auto;
+      
+          &::-webkit-scrollbar-track-piece {
+            background: $aside-hover;
+          }
+      
+          &::-webkit-scrollbar {
+            width: 6px;
+          }
+      
+          &::-webkit-scrollbar-thumb {
+            background: #99a9bf;
+          }
+        }
+
+    }
\ No newline at end of file
diff --git a/web/src/style/main.scss b/web/src/style/main.scss
index 2789fd36..2dc458dd 100644
--- a/web/src/style/main.scss
+++ b/web/src/style/main.scss
@@ -7,7 +7,7 @@
  * 2. Prevent adjustments of font size after orientation changes in iOS.
  */
 
-@import '@/style/basics.scss';
+ @import '@/style/basics.scss';
 
 html {
     line-height: 1.15;
@@ -591,54 +591,7 @@ li {
 
     }
 
-    .aside {
-        .el-menu-vertical {
-            background-color: $bg-aside;
-        }
-        .el-submenu {
-            background-color: $bg-aside;
-            .el-menu {
-                .el-menu-item {
-                    background-color: #000408;
-                    height: 44px;
-                    line-height: 44px;
-                }
-                .is-active {    
-                    background-color: #1890ff;
-                    // 关闭三级菜单二级菜单样式
-                    ul{
-                        border:none;
-                    }
-                }
-                // 关闭三级菜单二级菜单样式
-                .is-active.is-opened{
-                    background-color: #191a23;
-                    ul{
-                        border:none;
-                    }
-                }
-            }
-        }
-        .el-menu-item:focus, .el-menu-item:hover{
-            background-color: transparent;
-        }
-        .el-menu-item:hover i,
-        .el-menu-item:hover span {
-            color: #fff;
-        }
-
-        .el-submenu__title:hover {
-            background-color: $bg-aside;
-        }
 
-        .el-submenu__title:hover i,
-        .el-submenu__title:hover span {
-            color: #fff;
-        }
-        .el-menu--inline {
-            border-left: 5px solid #2c3b41;
-        }
-    }
 
     .hideside {
         .aside {
diff --git a/web/src/utils/page.js b/web/src/utils/page.js
new file mode 100644
index 00000000..dddad4a7
--- /dev/null
+++ b/web/src/utils/page.js
@@ -0,0 +1,9 @@
+
+const title = 'GIN-VUE-ADMIN'
+
+export default function getPageTitle(pageTitle) {
+  if (pageTitle) {
+    return `${pageTitle} - ${title}`
+  }
+  return `${title}`
+}
diff --git a/web/src/view/layout/aside/historyComponent/history.vue b/web/src/view/layout/aside/historyComponent/history.vue
index 0e96f20e..0e93e760 100644
--- a/web/src/view/layout/aside/historyComponent/history.vue
+++ b/web/src/view/layout/aside/historyComponent/history.vue
@@ -19,6 +19,7 @@
 
     <!--自定义右键菜单html代码-->
     <ul :style="{left:left+'px',top:top+'px'}" class="contextmenu" v-show="contextMenuVisible">
+      <li @click="refreshSelectedTag">刷新页面</li>
       <li @click="closeAll">关闭所有</li>
       <li @click="closeLeft">关闭左侧</li>
       <li @click="closeRight">关闭右侧</li>
@@ -28,6 +29,7 @@
 </template>
 <script>
 export default {
+  inject :['reload'],
   name: 'HistoryComponent',
   data() {
     return {
@@ -150,6 +152,9 @@ export default {
       this.$router.push(right)
       sessionStorage.setItem('historys', JSON.stringify(this.historys))
     },
+    refreshSelectedTag(){
+      this.reload()
+    },
     setTab(route) {
       if (!this.historys.some(item => item.name == route.name)) {
         const obj = {}
diff --git a/web/src/view/layout/index.vue b/web/src/view/layout/index.vue
index 6749b46e..56ff7697 100644
--- a/web/src/view/layout/index.vue
+++ b/web/src/view/layout/index.vue
@@ -66,13 +66,13 @@
           </div>
         </transition>
         <transition mode="out-in" name="el-fade-in-linear">
-          <keep-alive>
-            <router-view  v-loading="loadingFlag"  element-loading-text="正在加载中" class="admin-box" v-if="$route.meta.keepAlive"></router-view>
-          </keep-alive>
-        </transition>
-        <transition mode="out-in" name="el-fade-in-linear">
-          <router-view  v-loading="loadingFlag"  element-loading-text="正在加载中" class="admin-box" v-if="!$route.meta.keepAlive"></router-view>
-        </transition>
+            <keep-alive>
+              <router-view  v-loading="loadingFlag"  element-loading-text="正在加载中" class="admin-box" v-if="$route.meta.keepAlive"></router-view>
+            </keep-alive>
+          </transition>
+          <transition mode="out-in" name="el-fade-in-linear">
+            <router-view   v-loading="loadingFlag"  element-loading-text="正在加载中" class="admin-box" v-if="!$route.meta.keepAlive &&  isRouterAlive"></router-view>
+          </transition>
        <BottomInfo />
       </el-main>
     </el-container>
@@ -90,6 +90,11 @@ import { mapGetters, mapActions } from 'vuex'
 import CustomPic from '@/components/customPic'
 export default {
   name: 'Layout',
+  provide(){
+    return {
+      reload : this.reload
+    }
+  },
   data() {
     return {
       show: false,
@@ -98,8 +103,8 @@ export default {
       isMobile: false,
       isShadowBg: false,
       loadingFlag:false,
-      
-      value: ''
+      value: '',
+      isRouterAlive: true
     }
   },
   components: {
@@ -126,6 +131,12 @@ export default {
       this.isSider = !!this.isCollapse
       this.totalCollapse()
     },
+    reload(){
+     this.isRouterAlive = false
+     this.$nextTick(function(){
+       this.isRouterAlive = true
+     })
+   }
   },
   computed: {
     ...mapGetters('user', ['userInfo']),
diff --git a/web/src/view/person/person.vue b/web/src/view/person/person.vue
index 9be6d49d..20ba3bcb 100644
--- a/web/src/view/person/person.vue
+++ b/web/src/view/person/person.vue
@@ -4,13 +4,11 @@
       <el-col :span="6">
         <div class="fl-left avatar-box">
           <div class="user-card">
-            <el-avatar
-              class="user-avatar"
-              :size="160"
-              :src="userInfo.headerImg"
-              shape="square"
-              @click.native="openChooseImg"
-            ></el-avatar>
+            <div class="user-headpic-update" :style="{ 'background-image': 'url(' + userInfo.headerImg + ')','background-repeat':'no-repeat','background-size':'cover' }" >
+              <span class="update" @click="openChooseImg">
+                <i class="el-icon-edit"></i>
+                重新上传</span>
+              </div>
             <div class="user-personality">
               <p class="nickname">{{userInfo.nickName}}</p>
               <p class="person-info">这个家伙很懒，什么都没有留下</p>
@@ -18,7 +16,7 @@
             <div class="user-information">
               <ul>
                 <li>
-                  <i class="el-icon-user"></i>资深前端工程师
+                  <i class="el-icon-user"></i>{{userInfo.nickName}}
                 </li>
                 <li>
                   <i class="el-icon-data-analysis"></i>北京反转极光科技有限公司-技术部-前端事业群
@@ -216,9 +214,6 @@ export default {
   box-shadow: -2px 0 20px -16px;
   width: 80%;
   height: 100%;
-  .user-avatar{
-    cursor: pointer;
-  }
   .user-card {
     min-height: calc(90vh - 200px);
     padding: 30px 20px;
@@ -282,4 +277,29 @@ export default {
     }
   }
 }
+
+.user-headpic-update{
+    width: 120px;
+    height: 120px;
+    line-height: 120px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    border-radius: 20px;
+     &:hover{
+      color: #fff;
+      background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
+      background-blend-mode: multiply,multiply;
+      .update{
+        color:#fff ;
+      }
+    }
+    .update{
+      height: 120px;
+      width: 120px;
+      text-align: center;
+      color:transparent;
+    }
+  }
+
 </style>
\ No newline at end of file
-- 
Gitee


From c2d847aeb7a5b62cf06c46f59efcca1faefd6a42 Mon Sep 17 00:00:00 2001
From: bypanghu <bypanghu@163.com>
Date: Mon, 7 Dec 2020 21:34:43 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E5=BC=95=E5=85=A5scss=E5=8F=98=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/App.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/src/App.vue b/web/src/App.vue
index 4564d38a..4a4bb234 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -16,6 +16,7 @@ export default {
 @import '@/style/main.scss';
 @import '@/style/base.scss';
 @import '@/style/mobile.scss';
+@import '@/style/aside.scss';
 #app {
   background: #eee;
   height: 100vh;
-- 
Gitee


From e3fa0e476058b4c336d42a0a46b0e9101d74a156 Mon Sep 17 00:00:00 2001
From: bypanghu <bypanghu@163.com>
Date: Mon, 7 Dec 2020 21:39:45 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E4=B8=8A=E4=BC=A0scss=E5=8F=98=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/style/basics.scss | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/web/src/style/basics.scss b/web/src/style/basics.scss
index 767a99e5..5845d92e 100644
--- a/web/src/style/basics.scss
+++ b/web/src/style/basics.scss
@@ -14,10 +14,16 @@ $width-mobile-aside:210px;
 $color-aside:rgba(255, 255, 255,.9);
 $icon-arrow-size-aside:12px;
 $width-submenu-aside:55px;
-$bg-aside:#191a23;
+
 $height-aside-tilte:64px;
 $height-aside-img:30px;
 $width-aside-img:30px;
+
+$bg-aside:#191a23;
+$aside-active:#4facfe;
+$aside-hover:#595959;
+$aside-title:#fff;
+$aside-title-active:#4facfe;
 // header
 $height-header: 60px;
 // nav-scroll
-- 
Gitee