样式优化

gassafety-web/src/assets/styles/sidebar.scss

@@ -15,7 +15,7 @@
     height: 100%;
     position: fixed;
     font-size: 0px;
-    top: 85px;
+    top: 80px;
     bottom: 0;
     left: 0;
     z-index: 1001;

gassafety-web/src/common/font/font.css

+@font-face {
+    font-family: 'pingfang'; 
+    /* src: url('/assets/fonts/PingFang.ttc'); */
+    src: url('pingfang1.ttf');
+    font-weight: normal;
+    font-style: normal;
+  }
+
+html,body { font-family: pingfang, sans-serif; }
\ No newline at end of file

gassafety-web/src/components/TopNav/index.vue

@@ -11,6 +11,7 @@
           <!-- 导航栏左侧图标 -->
           <!-- <svg-icon :icon-class="item.meta.icon" /> -->
         {{ item.meta.title }}</el-menu-item>
+        <div class="menu-item-div"></div>
     </template>
 
     <!-- 顶部菜单超出数量折叠 -->
@@ -31,7 +32,7 @@
 
 <script>
 import { constantRoutes } from "@/router";
-
+import '../../common/font/font.css'
 export default {
   data() {
     return {
@@ -162,24 +163,21 @@ export default {
 <style lang="scss">
 .el-menu--horizontal > .el-menu-item {
   float: left;
-  width: 150px;
   height: 80px;
   text-align: center;
   line-height: 80px;
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
+  margin: 0 20px;
   color: #fff;
-  /* background-color: #053B6A; */
-  /* border-bottom: 3px solid transparent; */
-  /* color: #999093; */
+  font-size: 22px;
+  font-family: "pingfang";
+  font-weight: 600;
+  text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
   padding: 0 5px;
-  margin: 0 20px;
 }
 
 .el-menu--horizontal > .el-menu-item.is-active {
   border-bottom: 3px solid #{'var(--theme)'};
-  box-shadow: inset 2px 2px 20px #5CD9D4;
+  /* box-shadow: inset 2px 2px 20px #5CD9D4; */
   color: #5CD9D4;
 }
 
@@ -191,7 +189,20 @@ export default {
 .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover, .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus{
   background-color: rgba(0, 0, 0, 0);
   /* opacity: 0; */
-  box-shadow: inset 2px 2px 20px #5CD9D4;
-  color: #5CD9D4;
+  /* box-shadow: inset 2px 2px 20px #5CD9D4; */
+  color: #fff;
+}
+.menu-item-div{
+  width: 2px;
+  height: 30px;
+  margin-top: 25px; 
+  background-color: rgb(190, 189, 189);
+  float: left;
+  background:  linear-gradient(130deg, rgba(0, 0, 0, 0) 0%,rgba(255,255,255,0.7) 50%, rgba(0, 0, 0, 0) 100%);
+
+    &:last-child {
+      width: 0px;
+      height: 0px;
+    }
 }
 </style>

gassafety-web/src/layout/components/Navbar.vue

 <template>
   <div class="navbar">
-    <div style="float: left;padding: 5px;">
-      <span style="width: 288px;
-      height: 43px;
-      font-size: 30px;
-      font-family: eryaxindahei;
-      font-weight: 600;
-      line-height: 43px;
-      color: #0FC7C0;
-      opacity: 1;">燃气综合管理平台</span></div>
     
-    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
 
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
-
-
-    <!-- 顶部导航 -->
-    <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
-   
+    <el-row :gutter="20">
+      <el-col :span="18">
+        <div style="float: left;padding: 5px;">
+          <img src="@/assets/logo/top-left-logo.png" alt="" style="margin-top: 15px;">
+        </div>
+    
+          <!-- 点击左侧二级菜单滑开 -->
+        <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    
+        <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
+    
+    
+        <!-- 顶部导航 -->
+        <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
+      </el-col>
+      <el-col :span="6" style="float: right;">
     <div class="right-menu">
       <!-- <template v-if="device!=='mobile'">
         <search id="header-search" class="right-menu-item" />
@@ -38,11 +38,12 @@
 
       </template> -->
       
-      <div class="formatDate">
-        <img src="@/assets/logo/formleft.png" alt="">
-        <span>{{ nowDate }}</span>
-      </div>
-      <div class="yhm">用户名</div>
+          <div class="formatDate">
+            <span>{{ nowDate }}</span>
+          </div>
+          <div class="yhm">{{showUserName}}</div>
+        
+      
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
           <img :src="avatar" class="user-avatar">
@@ -60,7 +61,10 @@
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
+  
     </div>
+  </el-col>
+</el-row>
   </div>
 </template>
 
@@ -72,7 +76,7 @@ import Hamburger from '@/components/Hamburger'
 import Screenfull from '@/components/Screenfull'
 import SizeSelect from '@/components/SizeSelect'
 import Search from '@/components/HeaderSearch'
-
+import Cookie from 'js-cookie'
 export default {
   components: {
     Breadcrumb,
@@ -88,6 +92,9 @@ export default {
     };
   },
   computed: {
+    showUserName(){
+      return Cookie.get('username')
+    },
     ...mapGetters([
       'sidebar',
       'avatar',
@@ -109,6 +116,7 @@ export default {
         return this.$store.state.settings.topNav
       }
     }
+    
   },
   methods: {
     toggleSideBar() {
@@ -184,7 +192,6 @@ export default {
   }
 
   .topmenu-container {
-    width: 1100px;
     background-color: red;
     position: absolute;
     left: 350px;
@@ -196,7 +203,6 @@ export default {
     vertical-align: top;
   }
   .right-menu {
-    width: 366px;
     float: right;
     height: 100%;
     line-height: 80px;
@@ -207,23 +213,20 @@ export default {
       outline: none;
     }
     .formatDate{
-      width: 200px;
       float: left;
-      font-size: 24px;
-      font-family: PingFang SC;
-      font-weight: 400;
+      font-size: 20px;
       color: #fff;
-      img{
-        height: 100%;
-        float: left;
-      }
+      margin-right: 30px;
     }
     .yhm{
-      font-size: 24px;
-      font-family: PingFang SC;
-      font-weight: 400;
+      font-size: 20px;
       color: #fff;
       float: left;
+      text-overflow:ellipsis; 
+      white-space: nowrap;
+      overflow: hidden;
+      text-align: center;
+      margin-right: 20px;
     }
     .right-menu-item {
       display: inline-block;
@@ -246,7 +249,7 @@ export default {
     }
 
     .avatar-container {
-      margin-right: 30px;
+      margin-right: 15px;
 
       .avatar-wrapper {
         margin-top: 5px;

gassafety-web/src/layout/components/Sidebar/SidebarItem.vue

@@ -97,7 +97,8 @@ export default {
 </script>
 <style lang="scss">
   #app .sidebar-container .submenu-title-noDropdown:hover, #app .sidebar-container .el-submenu__title:hover {
-    box-shadow: inset 2px 2px 20px #5CD9D4;
+    /* box-shadow: inset 2px 2px 20px #5CD9D4; */
+    background: rgba(0, 0, 0, 0);
 }
 #app .sidebar-container .el-menu-item, #app .sidebar-container .el-submenu__title {
     overflow: hidden !important;
@@ -106,7 +107,10 @@ export default {
 }
 .el-menu-item:hover, .el-menu-item:focus,.is-active  {
     outline: none;
-    box-shadow: inset 2px 2px 20px #5CD9D4;
-    color: #5CD9D4 !important;
+    background-image: url("../../../assets/logo/item-background.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    /* background: rgba(0, 0, 0, 0); */
+    color: #fff !important;
 }
 </style>
\ No newline at end of file

gassafety-web/src/views/login.vue

@@ -106,7 +106,7 @@ export default {
     getCookie() {
       const username = Cookies.get("username");
       const password = Cookies.get("password");
-      const rememberMe = Cookies.get('rememberMe')
+      const rememberMe = Cookies.get('rememberMe');
       this.loginForm = {
         username: username === undefined ? this.loginForm.username : username,
         password: password === undefined ? this.loginForm.password : decrypt(password),
@@ -117,15 +117,22 @@ export default {
       this.$refs.loginForm.validate(valid => {
         if (valid) {
           this.loading = true;
-          if (this.loginForm.rememberMe) {
-            Cookies.set("username", this.loginForm.username, { expires: 30 });
-            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
-            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
-          } else {
-            Cookies.remove("username");
-            Cookies.remove("password");
-            Cookies.remove('rememberMe');
-          }
+          // if (this.loginForm.rememberMe) {
+          //   Cookies.set("username", this.loginForm.username, { expires: 30 });
+          //   Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
+          //   Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
+          // } else {
+          //   Cookies.remove("username");
+          //   Cookies.remove("password");
+          //   Cookies.remove('rememberMe');
+          // }
+          Cookies.remove("username");
+          Cookies.remove("password");
+          Cookies.remove('rememberMe');
+          Cookies.set("username", this.loginForm.username, { expires: 30 });
+          Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
+          Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
+
           this.$store.dispatch("Login", this.loginForm).then(() => {
             this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
           }).catch(() => {