顶部导航中英文双排显示

src/assets/styles/sidebar.scss

@@ -84,28 +84,30 @@
     // menu hover
     .sub-menu-title-noDropdown,
     .el-sub-menu__title {
+      color: #FFFFFF;
       &:hover {
-        background-color: rgba(0, 0, 0, 0.1) !important;
+        background-color: #1E3277 !important;
       }
     }
 
     & .theme-dark .is-active > .el-sub-menu__title {
-      color: $base-menu-color-active !important;
+      //color: $base-menu-color-active !important;
+      background-color: #0D2B63;
     }
 
     & .nest-menu .el-sub-menu > .el-sub-menu__title,
     & .el-sub-menu .el-menu-item {
       min-width: $base-sidebar-width !important;
-
+      color: #0C214D;
       &:hover {
-        background-color: rgba(0, 0, 0, 0.1) !important;
+        background-color: #1E3277 !important;
+        color: #0154FB;
       }
     }
 
     & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
     & .theme-dark .el-sub-menu .el-menu-item {
       background-color: $base-sub-menu-background;
-
       &:hover {
         background-color: $base-sub-menu-hover !important;
       }

src/assets/styles/variables.module.scss

@@ -10,7 +10,7 @@ $panGreen: #30b08f;
 
 // 默认主题变量
 //$menuText: #FFFFFF; //侧边栏各菜单文字颜色引用颜色
-$menuText: rgb(155, 155, 155); //侧边栏各菜单文字颜色引用颜色（子和父颜色相同）
+$menuText: rgb(155, 155, 155); //
 $menuActiveText: #409eff;
 $menuBg: #123881;
 $menuHover: #1B51B4;
@@ -27,10 +27,10 @@ $sideBarWidth: 200px;
 
 // 菜单暗色变量
 $base-menu-color: #bfcbd9;
-$base-menu-color-active: #FFFFFF; //选中菜单标题背景色
+$base-menu-color-active: #FFFFFF; //选中菜单标题文字颜色
 $base-menu-background: #143468;
 $base-sub-menu-background: #ffffff; //选中展开的子菜单背景色
-$base-sub-menu-hover: #f4f4f5; //鼠标悬停处子菜单背景色
+$base-sub-menu-hover: #f4f4f9; //鼠标悬停处子菜单背景色
 
 // 组件变量
 $--color-primary: #409eff;
@@ -92,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": "奇瑞后台管理框架"
-}

src/languageSwitch/en.json

-{
-  "title": "Chery back office management framework",
-  "logo": "Chery consistency"
-
-}

src/layout/components/Navbar.vue

@@ -6,40 +6,46 @@
       class="hamburger-container"
       @toggle-click="toggleSideBar"
     />
+    <el-scrollbar class="navbar-scrollbar">
     <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>{{cn.controlPlanManagement}}<br>{{en.controlPlanManagement}}</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>{{cn.completeVehicleValidationInspection}}<br>{{en.completeVehicleValidationInspection}}</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>{{cn.productionAssemblyConsistency}}<br>{{en.productionAssemblyConsistency}}</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>{{cn.componentConsistency}}<br>{{en.componentConsistency}}</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>{{cn.vehicleProductConsistency}}<br>{{en.vehicleProductConsistency}}</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>{{cn.serviceDataQuery}}<br>{{en.serviceDataQuery}}</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>{{cn.managementOfOtherMatters}}<br>{{en.managementOfOtherMatters}}</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>{{cn.externalAuditManagement}}<br>{{en.externalAuditManagement}}</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>{{cn.systemManagement}}<br>{{en.systemManagement}}</div>
       </div>
     </div>
+    </el-scrollbar>
 <!--    <breadcrumb-->
 <!--      v-if="!settingsStore.topNav"-->
 <!--      id="breadcrumb-container"-->
@@ -125,6 +131,9 @@ import RuoYiDoc from '@/components/RuoYi/Doc'
 import useAppStore from '@/store/modules/app'
 import useUserStore from '@/store/modules/user'
 import useSettingsStore from '@/store/modules/settings'
+//  中英文页面文字引入
+import cn from '@/locales/menu/cn.json';
+import en from '@/locales/menu/en.json';
 
 const appStore = useAppStore()
 const userStore = useUserStore()
@@ -179,25 +188,48 @@ function toggleTheme() {
 <style lang="scss" scoped>
 .navbar {
   height: 60px;
-  overflow: hidden;
-  position: relative;
-  //background: var(--navbar-bg);
-  background: #123881;   //
-  color: #FFFFFF;    //
-  display: flex; //
+  background: #123881;
+  color: #FFFFFF;
+  display: flex;
   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 
-  .navbar-item-menu{  //
-    cursor: pointer;
+  .navbar-scrollbar {
+    width: calc(100% - 40px);
+    margin-right: 40px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
     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;
+    align-items: center;
+    justify-content: flex-start;
+
+    .navbar-item-menu {
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+
+      .navbar-item-menu-div {
+        width: 250px;
+        margin-right: 32px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+
+        .navbar-item-menu-div-img {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 8px;
+        }
+
+        div {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-align: center;
+          white-space: pre-line;
+        }
       }
     }
   }
@@ -235,7 +267,7 @@ function toggleTheme() {
     height: 100%;
     line-height: 50px;
     display: flex;
-    margin-left: 400px;  //
+    //margin-left: 400px;  //
     &:focus {
       outline: none;
     }

src/layout/components/Sidebar/Logo.vue

@@ -8,11 +8,11 @@
         to="/"
       >
         <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 v-else class="sidebar-title">{{ title }}</h1>
+        <h1 v-else class="sidebar-title">{{ cn.logo }}</h1>
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
 <!--        <img v-if="logo" :src="logo" class="sidebar-logo" />-->
-        <h1 class="sidebar-title">{{ title }}</h1>
+        <h1 class="sidebar-title">{{ cn.logo }}</h1>
         <h1 class="sidebar-title">{{ en.logo }}</h1>
       </router-link>
     </transition>
@@ -24,8 +24,8 @@ 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';
+import cn from '@/locales/menu/cn.json';
+import en from '@/locales/menu/en.json';
 defineProps({
   collapse: {
     type: Boolean,

src/locales/menu/cn.json

+{
+  "title": "奇瑞后台管理框架",
+  "logo": "奇瑞一致性",
+  "index": "首页",
+  "controlPlanManagement": "控制计划管理",
+  "completeVehicleValidationInspection": "整车确认检验",
+  "productionAssemblyConsistency": "生产装配一致性",
+  "componentConsistency": "零部件一致性",
+  "vehicleProductConsistency": "整车产品一致性",
+  "serviceDataQuery": "业务数据查询",
+  "managementOfOtherMatters": "其他事项管理",
+  "externalAuditManagement": "外审管理",
+  "systemManagement": "系统管理"
+}

src/locales/menu/en.json

+{
+  "title": "Chery back office management framework",
+  "logo": "Chery consistency",
+  "index": "Home Page",
+  "controlPlanManagement": "Control Plan Management",
+  "completeVehicleValidationInspection": "Complete vehicle validation inspection",
+  "productionAssemblyConsistency": "Production assembly consistency",
+  "componentConsistency": "Component consistency",
+  "vehicleProductConsistency": "Vehicle product consistency",
+  "serviceDataQuery": "Service data query",
+  "managementOfOtherMatters": "Management of other matters",
+  "externalAuditManagement": "External audit management",
+  "systemManagement": "System Management"
+}

src/router/index.js

@@ -23,6 +23,10 @@ import Layout from '@/layout'
     activeMenu: '/system/user'      // 当路由设置了该属性，则会高亮相对应的侧边栏。
   }
  */
+// 引入 en.json  cn.json 文件
+import menuCnJson from '@/locales/menu/cn.json';
+import menuEnJson from '@/locales/menu/en.json';
+
 
 // 公共路由
 export const constantRoutes = [
@@ -66,7 +70,7 @@ export const constantRoutes = [
         path: '/index',
         component: () => import('@/views/index'),
         name: 'Index',
-        meta: { title: '首页', icon: 'dashboard', affix: true },
+        meta: { title: "首页", icon: 'dashboard', affix: true },
       },
     ],
   },

src/views/index.vue

@@ -72,8 +72,8 @@
 
 <script setup name="Index">
 //  中英文页面文字引入
-import cn from '@/languageSwitch/cn.json';
-import en from '@/languageSwitch/en.json';
+import cn from '@/locales/menu/cn.json';
+import en from '@/locales/menu/en.json';