调整颜色与背景

smsb-plus-ui/src/components/TopNav/index.vue

@@ -1,19 +1,17 @@
 <template>
   <el-menu :default-active="activeMenu" mode="horizontal" :ellipsis="false" @select="handleSelect">
     <template v-for="(item, index) in topMenus">
-      <el-menu-item v-if="index < visibleNumber" :key="index" :style="{ '--theme': theme }" :index="item.path"
-        ><svg-icon v-if="item.meta && item.meta.icon && item.meta.icon !== '#'" :icon-class="item.meta ? item.meta.icon : ''" />
-        {{ item.meta?.title }}</el-menu-item
-      >
+      <el-menu-item v-if="index < visibleNumber" :key="index" :style="{ '--theme': theme }" :index="item.path"><svg-icon
+          v-if="item.meta && item.meta.icon && item.meta.icon !== '#'" :icon-class="item.meta ? item.meta.icon : ''" />
+        {{ item.meta?.title }}</el-menu-item>
     </template>
 
     <!-- 顶部菜单超出数量折叠 -->
     <el-sub-menu v-if="topMenus.length > visibleNumber" :style="{ '--theme': theme }" index="more">
       <template #title>更多菜单</template>
       <template v-for="(item, index) in topMenus">
-        <el-menu-item v-if="index >= visibleNumber" :key="index" :index="item.path"
-          ><svg-icon :icon-class="item.meta ? item.meta.icon : ''" /> {{ item.meta?.title }}</el-menu-item
-        >
+        <el-menu-item v-if="index >= visibleNumber" :key="index" :index="item.path"><svg-icon
+            :icon-class="item.meta ? item.meta.icon : ''" /> {{ item.meta?.title }}</el-menu-item>
       </template>
     </el-sub-menu>
   </el-menu>
@@ -169,36 +167,41 @@ onMounted(() => {
 </script>
 
 <style lang="scss">
-.topmenu-container.el-menu--horizontal > .el-menu-item {
+.topmenu-container.el-menu--horizontal>.el-menu-item {
   float: left;
   height: 50px !important;
   line-height: 50px !important;
-  color: #999093 !important;
+  color: #ffffff !important;
   padding: 0 5px !important;
   margin: 0 10px !important;
 }
 
-.topmenu-container.el-menu--horizontal > .el-menu-item.is-active,
-.el-menu--horizontal > .el-sub-menu.is-active .el-submenu__title {
+.topmenu-container.el-menu--horizontal>.el-menu-item.is-active,
+.el-menu--horizontal>.el-sub-menu.is-active .el-submenu__title {
   border-bottom: 2px solid #{'var(--theme)'} !important;
   color: #303133;
 }
 
 /* sub-menu item */
-.topmenu-container.el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
+.topmenu-container.el-menu--horizontal>.el-sub-menu .el-sub-menu__title {
   float: left;
   height: 50px !important;
   line-height: 50px !important;
-  color: #999093 !important;
+  color: #ffffff !important;
   padding: 0 5px !important;
   margin: 0 10px !important;
 }
 
+.el-card {
+  border-radius: 0 !important;
+  --el-card-radius: 0 !important;
+}
+
 /* 背景色隐藏 */
-.topmenu-container.el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
-.topmenu-container.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
-.topmenu-container.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
-  background-color: #ffffff !important;
+.topmenu-container.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus,
+.topmenu-container.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,
+.topmenu-container.el-menu--horizontal>.el-submenu .el-submenu__title:hover {
+  background-color: transparent;
 }
 
 /* 图标右间距 */

smsb-plus-ui/src/layout/components/Navbar.vue

@@ -233,6 +233,7 @@ watch(
 
   .topmenu-container {
     position: absolute;
+    background-color: transparent;
     left: 50px;
   }
 
@@ -301,7 +302,7 @@ watch(
   align-items: center;
   height: 60px;
   width: 100%;
-  background: #fff;
+  background: #2282ff;
   box-sizing: border-box;
   padding: 0 20px;
 }
@@ -353,8 +354,6 @@ watch(
   justify-content: flex-end;
 }
 
-
-
 .navbar-logo-title {
   display: flex;
   align-items: center;
@@ -369,8 +368,8 @@ watch(
 
 .navbar-title {
   font-size: 18px;
-  font-weight: bold;
-  color: #222;
+  font-weight: normal;
+  color: #ffffff;
   letter-spacing: 2px;
 }