style: layout样式修改

src/layout/components/appMain.vue

@@ -98,6 +98,7 @@ const transitionMain = defineComponent({
 <template>
   <section
     :class="[props.fixedHeader ? 'app-main' : 'app-main-nofixed-header']"
+    class="mainBG"
     :style="getSectionStyle"
   >
     <router-view>
@@ -188,6 +189,7 @@ const transitionMain = defineComponent({
   width: 100%;
   height: 100vh;
   overflow-x: hidden;
+
   /* border: 1px solid blue; */
 }
 
@@ -201,4 +203,9 @@ const transitionMain = defineComponent({
 .main-content {
   margin: 24px;
 }
+
+.mainBG {
+  /* z-index: 1; */
+  background: white !important;
+}
 </style>

src/layout/components/footer/index.vue

@@ -27,6 +27,8 @@ const TITLE = getConfig("Title");
   height: 45px;
   padding: 0 0 8px;
   font-size: 14px;
-  background: #d5e8fb !important;
+  // background: #d5e8fb !important;
+  // background: #d5e8fb00 !important;
+  background: linear-gradient(to right, #d5e8fb, white, #d5e8fb);
 }
 </style>

src/layout/components/sidebar/breadCrumb.vue

@@ -104,17 +104,24 @@ watch(
 </script>
 
 <template>
-  <el-breadcrumb class="!leading-[50px] select-none" separator="/">
-    <transition-group name="breadcrumb">
-      <el-breadcrumb-item
-        v-for="item in levelList"
-        :key="item.path"
-        class="!inline !items-stretch"
-      >
-        <a @click.prevent="handleLink(item)">
-          {{ item.meta.title }}
-        </a>
-      </el-breadcrumb-item>
-    </transition-group>
-  </el-breadcrumb>
+  <div class="bg">
+    <el-breadcrumb class="!leading-[50px] select-none" separator="/">
+      <transition-group name="breadcrumb">
+        <el-breadcrumb-item
+          v-for="item in levelList"
+          :key="item.path"
+          class="!inline !items-stretch"
+        >
+          <a @click.prevent="handleLink(item)">
+            {{ item.meta.title }}
+          </a>
+        </el-breadcrumb-item>
+      </transition-group>
+    </el-breadcrumb>
+  </div>
 </template>
+<style scoped lang="scss">
+.bg {
+  background: linear-gradient(to right, #d5e8fb, white, #d5e8fb);
+}
+</style>

src/layout/components/sidebar/logo.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { getTopMenu } from "@/router/utils";
 import { useNav } from "@/layout/hooks/useNav";
-
+import logoImg from "@/assets/logo.png";
+import logoImg2x from "@/assets/logo@2x.png";
 const props = defineProps({
   collapse: Boolean
 });
@@ -30,7 +31,9 @@ const { title, getLogo } = useNav();
         :to="getTopMenu()?.path ?? '/'"
       >
         <!-- <img :src="getLogo()" alt="logo" /> -->
-        <span class="sidebar-title">医院运营管理系统</span>
+        <img :src="logoImg" alt="logo" class="imgbg" />
+        <!-- <img :src:"logoImg" alt="logo"/> -->
+        <!-- <span class="sidebar-title">医院运营管理系统</span> -->
       </router-link>
     </transition>
   </div>
@@ -53,7 +56,7 @@ const { title, getLogo } = useNav();
 
     img {
       display: inline-block;
-      height: 32px;
+      // height: 32px;
     }
 
     .sidebar-title {

src/layout/components/sidebar/mixNav.vue

@@ -68,6 +68,7 @@ const changePassword = () => {
       mode="horizontal"
       popper-class="pure-scrollbar"
       class="horizontal-header-menu"
+      active-text-color="#d5e8fb00"
       :default-active="defaultActive"
     >
       <el-menu-item
@@ -167,6 +168,7 @@ const changePassword = () => {
 
 .el-menu-item.is-active {
   z-index: 999;
+  border-bottom-color: none !important;
 }
 
 .el-menu-item.is-active::before {

src/layout/components/tag/index.scss

@@ -26,7 +26,8 @@
   font-size: 14px;
   color: var(--el-text-color-primary);
   background: #fff;
-  box-shadow: 0 0 1px #888;
+
+  // box-shadow: 0 0 1px #888;
 
   .scroll-item {
     position: relative;

src/layout/components/tag/index.vue

@@ -20,7 +20,7 @@ import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
 import ArrowDown from "@iconify-icons/ri/arrow-down-s-line";
 import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
 import ArrowLeftSLine from "@iconify-icons/ri/arrow-left-s-line";
-
+import breadCrumb from "../sidebar/breadCrumb.vue";
 const {
   Close,
   route,
@@ -533,11 +533,11 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div v-if="!showTags" ref="containerDom" class="tags-view">
+  <div v-if="!showTags" ref="containerDom" class="tags-view bg">
     <span v-show="isShowArrow" class="arrow-left">
       <IconifyIconOffline :icon="ArrowLeftSLine" @click="handleScroll(200)" />
     </span>
-    <div
+    <!-- <div
       ref="scrollbarDom"
       class="scroll-container"
       @wheel.prevent="handleWheel"
@@ -575,7 +575,8 @@ onBeforeUnmount(() => {
           />
         </div>
       </div>
-    </div>
+    </div> -->
+    <breadCrumb class="scroll-container pl-3" />
     <span v-show="isShowArrow" class="arrow-right">
       <IconifyIconOffline :icon="ArrowRightSLine" @click="handleScroll(-200)" />
     </span>
@@ -630,4 +631,9 @@ onBeforeUnmount(() => {
 
 <style lang="scss" scoped>
 @import url("./index.scss");
+
+.bg {
+  // background-color: #d5e8fb;
+  background-color: #d5e8fb00;
+}
 </style>

src/layout/index.vue

@@ -157,46 +157,51 @@ const layoutHeader = defineComponent({
 
 <template>
   <div ref="appWrapperRef" :class="['app-wrapper', set.classes]">
-    <div
-      v-show="
-        set.device === 'mobile' &&
-        set.sidebar.opened &&
-        layout.includes('vertical')
-      "
-      class="app-mask"
-      @click="useAppStoreHook().toggleSideBar()"
-    />
-    <Vertical
-      v-show="
-        !pureSetting.hiddenSideBar &&
-        (layout.includes('vertical') || layout.includes('mix'))
-      "
-    />
-    <div
-      :class="[
-        'main-container',
-        pureSetting.hiddenSideBar ? 'main-hidden' : ''
-      ]"
-    >
-      <div v-if="set.fixedHeader">
-        <layout-header />
-        <!-- 主体内容 -->
-        <app-main :fixed-header="set.fixedHeader" />
+    <div class="z-10">
+      <div
+        v-show="
+          set.device === 'mobile' &&
+          set.sidebar.opened &&
+          layout.includes('vertical')
+        "
+        class="app-mask"
+        @click="useAppStoreHook().toggleSideBar()"
+      />
+      <Vertical
+        v-show="
+          !pureSetting.hiddenSideBar &&
+          (layout.includes('vertical') || layout.includes('mix'))
+        "
+      />
+      <div
+        :class="[
+          'main-container',
+          pureSetting.hiddenSideBar ? 'main-hidden' : ''
+        ]"
+      >
+        <div v-if="set.fixedHeader">
+          <layout-header />
+          <!-- 主体内容 -->
+          <app-main :fixed-header="set.fixedHeader" />
+        </div>
+        <el-scrollbar v-else>
+          <el-backtop
+            title="回到顶部"
+            target=".main-container .el-scrollbar__wrap"
+          >
+            <backTop />
+          </el-backtop>
+          <layout-header />
+          <!-- 主体内容 -->
+          <app-main :fixed-header="set.fixedHeader" />
+        </el-scrollbar>
       </div>
-      <el-scrollbar v-else>
-        <el-backtop
-          title="回到顶部"
-          target=".main-container .el-scrollbar__wrap"
-        >
-          <backTop />
-        </el-backtop>
-        <layout-header />
-        <!-- 主体内容 -->
-        <app-main :fixed-header="set.fixedHeader" />
-      </el-scrollbar>
+      <!-- 系统设置 -->
+      <setting />
+    </div>
+    <div class="projectBG">
+      <!-- 背景色 -->
     </div>
-    <!-- 系统设置 -->
-    <setting />
   </div>
 </template>
 
@@ -231,4 +236,17 @@ const layoutHeader = defineComponent({
 .re-screen {
   margin-top: 12px;
 }
+
+.projectBG {
+  position: absolute;
+  top: 0;
+  left: 0;
+  // background: blue;
+  z-index: -1;
+  width: 100vw;
+  height: 100vh;
+  // background: linear-gradient(to center, blue, white);
+  background: radial-gradient(circle, white, #d2e6fa);
+  background: linear-gradient(to right, #d2e6fa, white, #d2e6fa);
+}
 </style>

src/layout/theme/index.ts

@@ -19,7 +19,7 @@ const themeColors = {
   //   menuActiveBefore: "#4091f7"
   // },
   light: {
-    subMenuActiveText: "blue", // 菜单选择颜色及其设置颜色
+    subMenuActiveText: "#0052D9", // 菜单选择颜色及其设置颜色
     menuBg: "#fff", //菜单背景色
     menuHover: "#F2F2F2", //右侧设置菜单悬浮色
     subMenuBg: "#F0F5FD", //子菜单背景色

src/style/sidebar.scss

@@ -52,6 +52,8 @@
     width: 45px; /* 与 padding-right 相同 */
     height: 100%;
     content: "";
+
+    // background-color: #d5e8fb; /* 背景颜色设置为蓝色 */
     background-color: #d5e8fb; /* 背景颜色设置为蓝色 */
     // z-index: -1; /* 确保伪元素位于背景之后 */
   }