样式修改

src/layout/components/AppMain/index.vue

@@ -30,7 +30,7 @@ const cachedViews = computed(() => useTagsViewStore().cachedViews); // 缓存页
   min-height: calc(100vh - $navbar-height);
   overflow: hidden;
   // background-color: var(--el-bg-color-page);
-  background-color: #f5f9ff;
+  background-color: var(--ohos-bg);
 }
 
 .hasTagsView .app-main {

src/layout/components/Settings/index.vue

@@ -84,7 +84,7 @@ function changeThemeColor(color: string) {
 /**
  * 切换主题
  */
-const isDark = ref<boolean>(settingsStore.theme === ThemeEnum.DARK);
+const isDark = ref<boolean>(true);
 const changeTheme = (val: any) => {
   isDark.value = val;
   settingsStore.changeTheme(isDark.value ? ThemeEnum.DARK : ThemeEnum.LIGHT);
@@ -136,6 +136,9 @@ function findOutermostParent(tree: any[], findName: string) {
 
   return null;
 }
+onMounted(() => {
+  changeTheme(true);
+});
 </script>
 
 <style lang="scss" scoped>

src/layout/components/Sidebar/components/SidebarMenu.vue

@@ -9,6 +9,7 @@
     :unique-opened="false"
     :collapse-transition="false"
     :mode="layout === 'top' ? 'horizontal' : 'vertical'"
+    style="border-right: 1px solid #fff"
   >
     <SidebarMenuItem
       v-for="route in menuList"
@@ -16,6 +17,7 @@
       :item="route"
       :base-path="resolvePath(route.path)"
       :is-collapse="!appStore.sidebar.opened"
+    
     />
   </el-menu>
 </template>

src/layout/components/Sidebar/components/SidebarMenuItem.vue

@@ -1,5 +1,8 @@
 <template>
-  <div v-if="!item.meta || !item.meta.hidden">
+  <div
+    v-if="!item.meta || !item.meta.hidden"
+    style="border-bottom: 1px solid #fff"
+  >
     <!-- 显示具有单个子路由的菜单项或没有子路由的父路由 -->
     <template
       v-if="

src/layout/components/Sidebar/index.vue

@@ -1,10 +1,44 @@
 <template>
   <div :class="{ 'has-logo': sidebarLogo }">
     <!--混合布局-->
-    <div class="flex w-full" v-if="layout == 'mix'">
-      <SidebarLogo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
-      <SidebarMixTopMenu class="flex-1" />
-      <NavbarRight />
+    <div
+      class="flex w-full"
+      style="
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 20px;
+        border-bottom: 1px solid #fff;
+      "
+      v-if="layout == 'mix'"
+    >
+      <!-- <SidebarLogo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" /> -->
+      <div class="viewTitle">{{ title }}</div>
+      <SidebarMixTopMenu class="flex-1" v-show="false" />
+      <div>
+        <el-space>
+          <div
+            style="
+              border-radius: 50%;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            "
+          >
+            <svg-icon
+              class="activeNotice"
+              icon-class="closeI"
+              size="47"
+              @click="toExitApp"
+            />
+          </div>
+
+          <div>
+            <div class="name">李明华</div>
+          </div>
+        </el-space>
+      </div>
+      <!-- <NavbarRight /> -->
     </div>
     <!--左侧布局 || 顶部布局 -->
     <template v-else>
@@ -19,13 +53,30 @@
 
 <script setup lang="ts">
 import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
-
+const route = useRoute();
 const appStore = useAppStore();
 const settingsStore = useSettingsStore();
 const permissionStore = usePermissionStore();
-
+const title = ref("");
 const sidebarLogo = computed(() => settingsStore.sidebarLogo);
 const layout = computed(() => settingsStore.layout);
+const toExitApp = () => {
+  if (window.openHarmonyBridge && window.openHarmonyBridge.exitApp) {
+    window.openHarmonyBridge.exitApp("");
+  }
+};
+const setTitle = () => {
+  const path = route.fullPath;
+  console.log(path);
+  switch (path) {
+    case "/deviceList":
+      title.value = "设备列表";
+      break;
+  }
+};
+onMounted(() => {
+  setTitle();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -34,4 +85,12 @@ const layout = computed(() => settingsStore.layout);
     height: calc(100vh - $navbar-height);
   }
 }
+.name {
+  font-size: 20px;
+  color: white;
+}
+.viewTitle {
+  font-size: 30px;
+  color: white;
+}
 </style>

src/layout/components/TagsView/index.vue

@@ -376,8 +376,7 @@ onMounted(() => {
 .tags-container {
   width: 100%;
   height: 34px;
-  background-color: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-light);
+  border-bottom: 1px solid #fff;
   box-shadow: 0 1px 1px var(--el-box-shadow-light);
 
   .tags-item {
@@ -385,6 +384,7 @@ onMounted(() => {
     padding: 3px 8px;
     margin: 4px 0 0 5px;
     font-size: 12px;
+    color: var(--ohos-text);
     cursor: pointer;
     border: 1px solid var(--el-border-color-light);
 

src/layout/index.vue

@@ -13,20 +13,18 @@
     <!-- 混合布局 -->
     <div v-if="layout === 'mix'" class="mix-container">
       <div class="mix-container__left">
-        <el-scrollbar style="height: 100%; background-color: #304156">
+        <el-scrollbar style="height: 100%; background-color: #000">
           <SidebarMenu
             :base-path="activeTopMenuPath"
             :menu-list="mixLeftMenus"
           />
-          <div
-            style="width: 100%; height: 50px; background-color: #304156"
-          ></div>
-          <div class="sidebar-toggle" style="background-color: #304156">
+          <div style="width: 100%; height: 50px; background-color: #000"></div>
+          <!-- <div class="sidebar-toggle" style="background-color: #000">
             <hamburger
               :is-active="appStore.sidebar.opened"
               @toggle-click="toggleSidebar"
             />
-          </div>
+          </div> -->
         </el-scrollbar>
       </div>
 

src/styles/index.scss

@@ -37,4 +37,14 @@
   border-radius: 10px;
 }
 
+.mainContentBox {
+  background-color: var(--ohos-area-bg);
+}
 
+.avue-crud__header {
+  background-color: var(--ohos-area-bg);
+}
+.el-table__cell {
+  background-color: var(--ohos-area-bg) !important;
+  color: white !important;
+}

src/styles/variables.scss

@@ -1,11 +1,19 @@
 /** 全局SCSS变量 */
 
 :root {
-  --menu-background: #304156;
-  --menu-text: #bfcbd9;
+  --menu-background: #000;
+  --menu-text: #fff;
   --menu-active-text: var(--el-menu-active-color);
   --menu-hover: #263445;
   --sidebar-logo-background: #2d3748;
+  //ohos 颜色样式更改
+  --ohos-bg: #000;
+  --ohos-text: #ffffff;
+  --ohos-area-bg: #191919;
+  --ohos-box-bg: #ffffff40;
+  --ohos-box-active-bg: #64bb5c80;
+  --ohos-area-active-bg: #e5e5e5;
+  --ohos-text-green: #3d0158;
 }
 
 /** 暗黑主题 */