首页

src/layout/components/Sidebar/Logo.vue

@@ -112,7 +112,7 @@ export default {
       color: #fff;
       font-weight: 600;
       line-height: 50px;
-      font-size: 14px;
+      font-size: 18px;
       font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
       vertical-align: middle;
     }

src/layout/components/Sidebar/index.vue

@@ -1,23 +1,16 @@
 <template>
-  <div
-    :class="{ 'has-logo': showLogo }"
-    :style="{
-      backgroundColor:
-        settings.sideTheme === 'theme-dark'
-          ? variables.menuBackground
-          : variables.menuLightBackground,
-    }"
-  >
+  <div class="sidebar-container">
+    <!-- 背景图片层 -->
+    <div class="sidebar-bg" :style="{ backgroundImage: `url(${sidebarBg})` }"></div>
+    
+    <!-- 内容层 -->
+    <div class="sidebar-content" :class="{ 'has-logo': showLogo }">
       <logo v-if="showLogo" :collapse="isCollapse" />
       <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
         <el-menu
           :default-active="activeMenu"
           :collapse="isCollapse"
-        :background-color="
-          settings.sideTheme === 'theme-dark'
-            ? variables.menuBackground
-            : variables.menuLightBackground
-        "
+          :background-color="'transparent'"
           :text-color="
             settings.sideTheme === 'theme-dark'
               ? variables.menuColor
@@ -37,6 +30,7 @@
         </el-menu>
       </el-scrollbar>
     </div>
+  </div>
 </template>
 
 <script>
@@ -44,16 +38,18 @@ import { mapGetters, mapState } from "vuex";
 import Logo from "./Logo";
 import SidebarItem from "./SidebarItem";
 import variables from "@/assets/styles/variables.scss";
-
+import sidebarBg from "@/assets/images/mask_group.png";
 export default {
   components: { SidebarItem, Logo },
   computed: {
+    sidebarBg() {
+      return sidebarBg;
+    },
     ...mapState(["settings"]),
     ...mapGetters(["sidebarRouters", "sidebar"]),
     activeMenu() {
       const route = this.$route;
       const { meta, path } = route;
-      // if set path, the sidebar will highlight the path you set
       if (meta.activeMenu) {
         return meta.activeMenu;
       }
@@ -71,3 +67,70 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.sidebar-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.sidebar-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center center;
+  z-index: 1;
+}
+
+.sidebar-content {
+  position: relative;
+  z-index: 2;
+  height: 100%;
+}
+
+/* 修改菜单项背景色为透明 */
+:deep(.el-menu) {
+  background-color: transparent !important;
+  font-size: 16px !important;
+}
+
+:deep(.el-menu-item),
+:deep(.el-submenu__title) {
+  font-size: 16px !important;
+  background-color: transparent !important;
+}
+
+/* 展开的子菜单项背景色透明 */
+:deep(.el-menu--inline) {
+  background-color: transparent !important;
+}
+
+:deep(.el-menu--inline .el-menu-item),
+:deep(.el-menu--inline .el-submenu__title) {
+  font-size: 16px !important;
+  background-color: transparent !important;
+}
+
+:deep(.el-menu-item:hover),
+:deep(.el-submenu__title:hover),
+:deep(.el-menu--inline .el-menu-item:hover),
+:deep(.el-menu--inline .el-submenu__title:hover) {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+:deep(.el-menu-item.is-active),
+:deep(.el-menu--inline .el-menu-item.is-active) {
+  background-color: rgba(255, 186, 0, 0.2) !important;
+}
+
+/* 确保子菜单展开时的箭头图标颜色也适配 */
+:deep(.el-submenu .el-menu-item),
+:deep(.el-submenu__title) {
+  color: inherit !important;
+}
+</style>

src/views/search/lease/index.vue

@@ -113,8 +113,8 @@
         <template slot-scope="scope" >
           <el-button
             size="mini"
-            type="primary"
-            icon="el-icon-search"
+            type="text"
+            icon="el-icon-view"
             @click="handleDetail(scope.row)"
           >
             共享详情