前端框架主题颜色修改

src/assets/styles/element-ui.scss

@@ -3,6 +3,7 @@
 .el-breadcrumb__inner,
 .el-breadcrumb__inner a {
   font-weight: 400 !important;
+  color: #FFFFFF;  //
 }
 
 .el-upload {

src/assets/styles/variables.module.scss

@@ -9,7 +9,8 @@ $yellow: #fec171;
 $panGreen: #30b08f;
 
 // 默认主题变量
-$menuText: #bfcbd9;
+//$menuText: #FFFFFF; //侧边栏各菜单文字颜色引用颜色
+$menuText: rgb(155, 155, 155); //侧边栏各菜单文字颜色引用颜色（子和父颜色相同）
 $menuActiveText: #409eff;
 $menuBg: #123881;
 $menuHover: #1B51B4;
@@ -91,7 +92,7 @@ html.dark {
 
   /* 侧边栏 */
   --sidebar-bg: #141414;
-  --sidebar-text: #ffffff;
+--sidebar-text: #ffffff;//////////////
   --menu-hover: #2d2d2d;
   --menu-active-text: #{$menuActiveText};
 

src/languageSwitch/cn.json

 {
-  "title": "Chery back office management framework"
+  "title": "奇瑞后台管理框架"
 }

src/languageSwitch/en.json

 {
-  "title": "奇瑞后台管理框架"
+  "title": "Chery back office management framework",
+  "logo": "Chery consistency"
 
 }

src/layout/components/Navbar.vue

@@ -6,16 +6,50 @@
       class="hamburger-container"
       @toggle-click="toggleSideBar"
     />
-    <breadcrumb
-      v-if="!settingsStore.topNav"
-      id="breadcrumb-container"
-      class="breadcrumb-container"
-    />
-    <top-nav
-      v-if="settingsStore.topNav"
-      id="topmenu-container"
-      class="topmenu-container"
-    />
+    <div class="navbar-item-menu">
+      <div @click="switchMenu" class="navbar-item-menu-div">
+        <div class="navbar-item-menu-div-img"><img src="@/assets/icons/svg/whitesquare.png"></div>
+        <div>控制计划管理</div>
+      </div>
+      <div @click="switchMenu" class="navbar-item-menu-div">
+        <div class="navbar-item-menu-div-img"><img src="@/assets/icons/svg/whitesquare.png"></div>
+        <div>整车确认检验</div>
+      </div>
+      <div @click="switchMenu" class="navbar-item-menu-div">
+        <div class="navbar-item-menu-div-img"><img src="@/assets/icons/svg/whitesquare.png"></div>
+        <div>生产装配一致性</div>
+      </div>
+      <div @click="switchMenu" class="navbar-item-menu-div">
+        <div class="navbar-item-menu-div-img"><img src="@/assets/icons/svg/whitesquare.png"></div>
+        <div>零部件一致性</div>
+      </div>
+      <div @click="switchMenu" class="navbar-item-menu-div">
+        <div class="navbar-item-menu-div-img"><img src="@/assets/icons/svg/whitesquare.png"></div>
+        <div>业务数据查询</div>
+      </div>
+      <div @click="switchMenu" class="navbar-item-menu-div">
+        <div class="navbar-item-menu-div-img"><img src="@/assets/icons/svg/whitesquare.png"></div>
+        <div>其他事项管理</div>
+      </div>
+      <div @click="switchMenu" class="navbar-item-menu-div">
+        <div class="navbar-item-menu-div-img"><img src="@/assets/icons/svg/whitesquare.png"></div>
+        <div>外审管理</div>
+      </div>
+      <div @click="switchMenu" class="navbar-item-menu-div">
+        <div class="navbar-item-menu-div-img"><img src="@/assets/icons/svg/whitesquare.png"></div>
+        <div>系统管理</div>
+      </div>
+    </div>
+<!--    <breadcrumb-->
+<!--      v-if="!settingsStore.topNav"-->
+<!--      id="breadcrumb-container"-->
+<!--      class="breadcrumb-container"-->
+<!--    />-->
+<!--    <top-nav-->
+<!--      v-if="settingsStore.topNav"-->
+<!--      id="topmenu-container"-->
+<!--      class="topmenu-container"-->
+<!--    />-->
 
     <div class="right-menu">
 <!--      <template v-if="appStore.device !== 'mobile'">-->
@@ -96,6 +130,11 @@ const appStore = useAppStore()
 const userStore = useUserStore()
 const settingsStore = useSettingsStore()
 
+/* 切换左侧菜单栏 */
+function switchMenu(){
+
+}
+
 function toggleSideBar() {
   appStore.toggleSideBar()
 }
@@ -142,16 +181,34 @@ function toggleTheme() {
   height: 60px;
   overflow: hidden;
   position: relative;
-  background: var(--navbar-bg);
-  background-color: #123881;
+  //background: var(--navbar-bg);
+  background: #123881;   //
+  color: #FFFFFF;    //
+  display: flex; //
   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 
+  .navbar-item-menu{  //
+    cursor: pointer;
+    display: flex;
+    margin: 18px 0 15px 23px;
+    .navbar-item-menu-div{
+      display: flex;
+      padding-right: 32px;
+      font-size: 14px;
+      .navbar-item-menu-div-img{
+        margin-right: 8px;
+        margin-top: 1px;
+      }
+    }
+  }
+
   .hamburger-container {
     line-height: 46px;
     height: 100%;
     float: left;
     cursor: pointer;
     transition: background 0.3s;
+    color: #FFFFFF; //
     -webkit-tap-highlight-color: transparent;
 
     &:hover {
@@ -178,7 +235,7 @@ function toggleTheme() {
     height: 100%;
     line-height: 50px;
     display: flex;
-
+    margin-left: 400px;  //
     &:focus {
       outline: none;
     }

src/layout/components/Sidebar/Logo.vue

@@ -11,8 +11,9 @@
         <h1 v-else class="sidebar-title">{{ title }}</h1>
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo" />
+<!--        <img v-if="logo" :src="logo" class="sidebar-logo" />-->
         <h1 class="sidebar-title">{{ title }}</h1>
+        <h1 class="sidebar-title">{{ en.logo }}</h1>
       </router-link>
     </transition>
   </div>
@@ -22,7 +23,9 @@
 import logo from '@/assets/logo/logo.png'
 import useSettingsStore from '@/store/modules/settings'
 import variables from '@/assets/styles/variables.module.scss'
-
+//  中英文页面文字引入
+import cn from '@/languageSwitch/cn.json';
+import en from '@/languageSwitch/en.json';
 defineProps({
   collapse: {
     type: Boolean,
@@ -66,12 +69,12 @@ const getLogoTextColor = computed(() => {
 }
 
 .sidebar-logo-container {
-  background-color: #123881;
   position: relative;
   width: 100%;
-  height: 60px;
+  height: 120px;
   line-height: 50px;
   //background: v-bind(getLogoBackground);
+  background-color: #123881;
   text-align: center;
   overflow: hidden;
 
@@ -89,15 +92,13 @@ const getLogoTextColor = computed(() => {
     & .sidebar-title {
       display: inline-block;
       margin: 0;
-      color: v-bind(getLogoTextColor);
+      //color: v-bind(getLogoTextColor);
+      color: #FFFFFF;
       font-weight: 600;
       line-height: 50px;
-      font-size: 14px;
+      font-size: 20px;
       font-family:
-        Avenir,
-        Helvetica Neue,
-        Arial,
-        Helvetica,
+        "思源黑体",
         sans-serif;
       vertical-align: middle;
     }

src/layout/components/Sidebar/index.vue

@@ -96,7 +96,7 @@ const activeMenu = computed(() => {
       color: v-bind(getMenuTextColor);
 
       &.is-active {
-        color: var(--menu-active-text, #409eff);
+        //color: var(--menu-active-text, #409eff);
         background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;
       }
     }