菜单风格样式调整

src/config/website.js

@@ -5,7 +5,7 @@ export default {
   title: 'Saber',
   logo: 'X',
   key: 'saber', //配置主键,目前用于存储
-  indexTitle: '中航光电',
+  indexTitle: '电镀智能化生产管理',
   clientId: 'saber3', // 客户端id
   clientSecret: 'saber3_secret', // 客户端密钥
   tenantMode: true, // 是否开启租户模式

src/page/index/logo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="avue-logo">
+  <div class="avue-logo" :class="setting.styleRadio=='4'?'logo_bg':''">
     <transition name="fade">
       <span v-if="getScreen(isCollapse)" class="avue-logo_subtitle" key="0">
         <img class="logo-img" src="@/assets/logo.png" />
@@ -23,22 +23,25 @@ export default {
   },
   created() {},
   computed: {
-    ...mapGetters(['isCollapse']),
+    ...mapGetters(['isCollapse','setting']),
   },
   methods: {},
 };
 </script>
 <style scoped>
 .logo-title {
-  font-size: 20px;
+  font-size: 18px;
   background-image: linear-gradient(120deg, #54b6d0 16%, #3f8bdb, #2c77f1);
   -webkit-background-clip: text;
   /* -webkit-text-fill-color: transparent; */
   font-weight: 700;
-  padding-left: 30px;
+  padding-left: 15px;
 }
 .logo-img {
   width: 40px;
   margin-top: 5px;
 }
+.logo_bg{
+  background: #000 !important;
+}
 </style>

src/page/index/sidebar/index.vue

@@ -5,7 +5,7 @@
   </el-menu>
 
   <el-menu unique-opened :default-active="activeMenu" :mode="setting.sidebar" :collapse="isCollapse"
-    v-if="setting.styleRadio == '4'">
+    v-if="setting.styleRadio == '4'" class="el-menu-title">
     <sidebar-item :menu="leftMenu"></sidebar-item>
   </el-menu>
 
@@ -227,6 +227,7 @@ export default {
   }
 
 }
+
 </style>
 <style lang="scss">
 .third_box {

src/page/index/sidebar/sidebarItem.vue

@@ -90,3 +90,4 @@ export default {
   },
 };
 </script>
+

src/page/index/top/index.vue

@@ -1,16 +1,13 @@
 <template>
-  <div class="avue-top">
+  <div class="avue-top" :class="setting.styleRadio == '4' ? 'logo_bg' : ''">
     <div class="top-bar__left">
-      <div
-        class="avue-breadcrumb"
-        :class="[{ 'avue-breadcrumb--active': isCollapse }]"
-        v-if="setting.collapse && !isHorizontal"
-      >
+      <div class="avue-breadcrumb" :class="[{ 'avue-breadcrumb--active': isCollapse }]"
+        v-if="setting.collapse && !isHorizontal">
         <i class="icon-navicon" @click="setCollapse"></i>
       </div>
     </div>
     <div class="top-bar__title">
-      <top-menu ref="topMenu" v-if="setting.menu&&(setting.styleRadio=='3'||setting.styleRadio=='4')"></top-menu>
+      <top-menu ref="topMenu" v-if="setting.menu && (setting.styleRadio == '3' || setting.styleRadio == '4')"></top-menu>
       <top-search class="top-bar__item" v-if="setting.search"></top-search>
     </div>
     <div class="top-bar__right">
@@ -61,12 +58,8 @@
                   </strong>
                 </el-tooltip>
               </el-dropdown-item>
-              <el-dropdown-item
-                v-if="Object.keys(roleObj).length < 5"
-                v-for="(name, id) in roleObj"
-                :key="id"
-                @click="toRole(id, name)"
-              >
+              <el-dropdown-item v-if="Object.keys(roleObj).length < 5" v-for="(name, id) in roleObj" :key="id"
+                @click="toRole(id, name)">
                 <i class="icon-changjingguanli" />
                 {{ $t('navbar.switchRoleTo') }}: {{ name }}
               </el-dropdown-item>
@@ -86,12 +79,8 @@
                   </strong>
                 </el-tooltip>
               </el-dropdown-item>
-              <el-dropdown-item
-                v-if="Object.keys(deptObj).length < 5"
-                v-for="(name, id) in deptObj"
-                :key="id"
-                @click="toDept(id, name)"
-              >
+              <el-dropdown-item v-if="Object.keys(deptObj).length < 5" v-for="(name, id) in deptObj" :key="id"
+                @click="toDept(id, name)">
                 <i class="icon-guanlianshebei" />
                 {{ $t('navbar.switchDeptTo') }}: {{ name }}
               </el-dropdown-item>
@@ -353,4 +342,11 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.logo_bg {
+  background: #000 !important;
+}
+:deep(.el-sub-menu .el-icon.el-sub-menu__icon-more){
+  color: #fff !important;
+}
+</style>

src/styles/variables.scss

@@ -1,3 +1,3 @@
-$sidebar_width: 230px;
+$sidebar_width: 200px;
 $sidebar_collapse: 60px;
 $top_height: 50px;