首页导航栏样式

gassafety-web/src/assets/icons/svg/user.svg

-<svg width="130" height="130" xmlns="http://www.w3.org/2000/svg"><path d="M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z" stroke="#979797"/></svg>
+<svg width="130" height="130" xmlns="http://www.w3.org/2000/svg"><path d="M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z" stroke="&#xe60a;"/></svg>
\ No newline at end of file

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

@@ -11,19 +11,30 @@
     -webkit-transition: width .28s;
     transition: width 0.28s;
     width: $sideBarWidth !important;
-    background-color: $menuBg;
+    background-color: #053B6A;
     height: 100%;
     position: fixed;
     font-size: 0px;
-    top: 0;
+    top: 85px;
     bottom: 0;
     left: 0;
     z-index: 1001;
     overflow: hidden;
     -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
     box-shadow: 2px 0 6px rgba(0,21,41,.35);
-
-    // reset element-ui css
+    .el-menu-item{
+      margin-top: 5px;
+      height: 84px;
+      line-height: 30px !important;
+      text-align: center;
+      .svg-icon{
+        margin-top: 10px;
+        font-size: 30px;
+        // width: 30px !important;
+      }
+      
+    }
+    reset element-ui css
     .horizontal-collapse-transition {
       transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
     }
@@ -57,10 +68,11 @@
     }
 
     .svg-icon {
-      margin-right: 16px;
+      margin-right: 5px;
     }
 
     .el-menu {
+      background-color: #053B6A;
       border: none;
       height: 100%;
       width: 100% !important;
@@ -69,7 +81,7 @@
     .el-menu-item, .el-submenu__title {
       overflow: hidden !important;
       text-overflow: ellipsis !important;
-      white-space: nowrap !important;
+      // white-space: nowrap !important;
     }
 
     // menu hover
@@ -81,7 +93,7 @@
     }
 
     & .theme-dark .is-active > .el-submenu__title {
-      color: $subMenuActiveText !important;
+      color: #5CD9D4 !important;
     }
 
     & .nest-menu .el-submenu>.el-submenu__title,
@@ -95,10 +107,10 @@
 
     & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
     & .theme-dark .el-submenu .el-menu-item {
-      background-color: $subMenuBg !important;
+      background-color: #053B6A !important;
 
       &:hover {
-        background-color: $subMenuHover !important;
+        background-color: rgba(0, 0, 0, 0.06) !important;
       }
     }
   }

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

@@ -24,7 +24,7 @@ $sidebarLightTitle: #001529;
 $subMenuBg:#1f2d3d;
 $subMenuHover:#001528;
 
-$sideBarWidth: 200px;
+$sideBarWidth: 100px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

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

@@ -5,10 +5,12 @@
     @select="handleSelect"
   >
     <template v-for="(item, index) in topMenus">
-      <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber"
-        ><svg-icon :icon-class="item.meta.icon" />
-        {{ item.meta.title }}</el-menu-item
-      >
+      <!-- <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber" -->
+        <el-menu-item :style="" :index="item.path" :key="index" v-if="index < visibleNumber">
+
+          <!-- 导航栏左侧图标 -->
+          <!-- <svg-icon :icon-class="item.meta.icon" /> -->
+        {{ item.meta.title }}</el-menu-item>
     </template>
 
     <!-- 顶部菜单超出数量折叠 -->
@@ -160,18 +162,25 @@ export default {
 <style lang="scss">
 .el-menu--horizontal > .el-menu-item {
   float: left;
-  height: 50px;
-  line-height: 50px;
+  width: 150px;
+  height: 80px;
+  text-align: center;
+  line-height: 80px;
   margin: 0;
-  border-bottom: 3px solid transparent;
-  color: #999093;
+  font-size: 18px;
+  font-weight: 600;
+  color: #fff;
+  /* background-color: #053B6A; */
+  /* border-bottom: 3px solid transparent; */
+  /* color: #999093; */
   padding: 0 5px;
-  margin: 0 10px;
+  margin: 0 20px;
 }
 
 .el-menu--horizontal > .el-menu-item.is-active {
   border-bottom: 3px solid #{'var(--theme)'};
-  color: #303133;
+  box-shadow: inset 2px 2px 20px #5CD9D4;
+  color: #5CD9D4;
 }
 
 /* submenu item */
@@ -179,4 +188,10 @@ export default {
 	height: 50px !important;
 	line-height: 50px !important;
 }
+.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;
+}
 </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"/>
 
+
+    <!-- 顶部导航 -->
+    <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
+   
     <div class="right-menu">
-      <template v-if="device!=='mobile'">
+      <!-- <template v-if="device!=='mobile'">
         <search id="header-search" class="right-menu-item" />
 
-        <!--<el-tooltip content="源码地址" effect="dark" placement="bottom">
+        <el-tooltip content="源码地址" effect="dark" placement="bottom">
           <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
         </el-tooltip>
 
         <el-tooltip content="文档地址" effect="dark" placement="bottom">
           <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
-        </el-tooltip>-->
+        </el-tooltip>
 
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
 
@@ -23,8 +36,13 @@
           <size-select id="size-select" class="right-menu-item hover-effect" />
         </el-tooltip>
 
-      </template>
-
+      </template> -->
+      
+      <div class="formatDate">
+        <img src="@/assets/logo/formleft.png" alt="">
+        <span>{{ nowDate }}</span>
+      </div>
+      <div class="yhm">用户名</div>
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
           <img :src="avatar" class="user-avatar">
@@ -64,6 +82,11 @@ export default {
     SizeSelect,
     Search
   },
+  data() {
+    return {
+      nowDate: "", // 当前日期
+    };
+  },
   computed: {
     ...mapGetters([
       'sidebar',
@@ -101,6 +124,32 @@ export default {
           location.href = '/index';
         })
       }).catch(() => {});
+    },
+    currentTime() {
+      setInterval(this.formatDate, 500);
+    },
+    formatDate() {
+      let date = new Date();
+      let year = date.getFullYear(); // 年
+      let month = date.getMonth() + 1; // 月
+      let day = date.getDate(); // 日
+      let week = date.getDay(); // 星期
+      let weekArr = [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ];
+      let hour = date.getHours(); // 时
+      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
+      let minute = date.getMinutes(); // 分
+      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
+      let second = date.getSeconds(); // 秒
+      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
+      this.nowDate = `${year}/${month}/${day}`;
+    }
+  },
+  mounted() {
+    this.currentTime();
+  },
+  beforeDestroy() {
+    if (this.formatDate) {
+      clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
     }
   }
 }
@@ -108,14 +157,17 @@ export default {
 
 <style lang="scss" scoped>
 .navbar {
-  height: 50px;
+  height: 80px;
+  width: 100%;
+  left: 0;
+  line-height: 80px;
   overflow: hidden;
-  position: relative;
-  background: #fff;
+  position: fixed;
+  background: #053B6A;
   box-shadow: 0 1px 4px rgba(0,21,41,.08);
 
   .hamburger-container {
-    line-height: 46px;
+    line-height: 80px;
     height: 100%;
     float: left;
     cursor: pointer;
@@ -132,27 +184,52 @@ export default {
   }
 
   .topmenu-container {
+    width: 1100px;
+    background-color: red;
     position: absolute;
-    left: 50px;
+    left: 350px;
+    background-color: #053B6A;
   }
 
   .errLog-container {
     display: inline-block;
     vertical-align: top;
   }
-
   .right-menu {
+    width: 366px;
     float: right;
     height: 100%;
-    line-height: 50px;
+    line-height: 80px;
+      
+    
 
     &:focus {
       outline: none;
     }
-
+    .formatDate{
+      width: 200px;
+      float: left;
+      font-size: 24px;
+      font-family: PingFang SC;
+      font-weight: 400;
+      color: #fff;
+      img{
+        height: 100%;
+        float: left;
+      }
+    }
+    .yhm{
+      font-size: 24px;
+      font-family: PingFang SC;
+      font-weight: 400;
+      color: #fff;
+      float: left;
+    }
     .right-menu-item {
       display: inline-block;
+      margin-top: 8px;
       padding: 0 8px;
+      float: right;
       height: 100%;
       font-size: 18px;
       color: #5a5e66;

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

@@ -3,7 +3,8 @@
     <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
+          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)"/><br>
+          <item :title="onlyOneChild.meta.title" />
         </el-menu-item>
       </app-link>
     </template>
@@ -94,3 +95,18 @@ 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;
+}
+#app .sidebar-container .el-menu-item, #app .sidebar-container .el-submenu__title {
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    background: rgba(0, 0, 0, 0);
+}
+.el-menu-item:hover, .el-menu-item:focus,.is-active  {
+    outline: none;
+    box-shadow: inset 2px 2px 20px #5CD9D4;
+    color: #5CD9D4 !important;
+}
+</style>
\ No newline at end of file

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

 <template>
-    <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg }">
-        <logo v-if="showLogo" :collapse="isCollapse" />
+    <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables : variables.menuLightBg }">
+        <!-- <logo v-if="showLogo" :collapse="isCollapse" /> -->
         <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
             <el-menu
                 :default-active="activeMenu"
                 :collapse="isCollapse"
-                :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg"
+                :background-color="settings.sideTheme === 'theme-dark' ? variables : variables.menuLightBg"
                 :text-color="settings.sideTheme === 'theme-dark' ? variables.menuText : 'rgba(0,0,0,.65)'"
                 :unique-opened="true"
                 :active-text-color="settings.theme"

gassafety-web/src/layout/index.vue

 <template>
   <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
-    <sidebar class="sidebar-container" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg }" />
-    <div :class="{hasTagsView:needTagsView}" class="main-container">
-      <div :class="{'fixed-header':fixedHeader}">
-        <navbar />
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+    <div class="main-container" :class="{ 'hyseNo':!meunStyle,'hyse':meunStyle,hasTagsView:needTagsView}" >
+      <div :class="{'fixed-header':fixedHeader,'hyfixedNo':fixedHeader,'hyfixed':!fixedHeader}" v-if="!meunStyle">
+        <navbar :style=""/>
+         <sidebar class="sidebar-container" v-if="!meunStyle"/> 
+        
+        <!-- <tags-view v-if="needTagsView" style="width:100%"/> -->
+      </div>
+       <div  v-if="meunStyle">
+        <head-navbar  v-if="meunStyle" />
         <tags-view v-if="needTagsView" />
       </div>
       <app-main />

gassafety-web/src/settings.js

@@ -14,7 +14,7 @@ module.exports = {
   /**
    * 是否显示顶部导航
    */
-  topNav: false,
+  topNav: true,
 
   /**
    * 是否显示 tagsView
@@ -24,7 +24,7 @@ module.exports = {
   /**
    * 是否固定头部
    */
-  fixedHeader: false,
+  fixedHeader: true,
 
   /**
    * 是否显示logo

gassafety-web/src/views/tool/build/index.vue

@@ -400,7 +400,7 @@ input, textarea{
   background: #121315;
   .el-tabs__header{
     margin: 0;
-    border-bottom-color: #121315;
+    /* border-bottom-color: #121315; */
     .el-tabs__nav{
       border-color: #121315;
     }
@@ -415,9 +415,9 @@ input, textarea{
     user-select: none;
   }
   .el-tabs__item.is-active{
-    background: #1e1e1e;
-    border-bottom-color: #1e1e1e!important;
-    color: #fff;
+    background: rgba(0, 0, 0, 0);
+    /* border-bottom-color: #1e1e1e!important; */
+    color: #5CD9D4;
   }
   .el-icon-edit{
     color: #f1fa8c;