首页

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,41 +1,35 @@
 <template>
-  <div
+  <div class="sidebar-container">
-    :class="{ 'has-logo': showLogo }"
+    <!-- 背景图片层 -->
-    :style="{
+    <div class="sidebar-bg" :style="{ backgroundImage: `url(${sidebarBg})` }"></div>
-      backgroundColor:
+    
-        settings.sideTheme === 'theme-dark'
+    <!-- 内容层 -->
-          ? variables.menuBackground
+    <div class="sidebar-content" :class="{ 'has-logo': showLogo }">
-          : variables.menuLightBackground,
+      <logo v-if="showLogo" :collapse="isCollapse" />
-    }"
+      <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
-  >
+        <el-menu
-    <logo v-if="showLogo" :collapse="isCollapse" />
+          :default-active="activeMenu"
-    <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
+          :collapse="isCollapse"
-      <el-menu
+          :background-color="'transparent'"
-        :default-active="activeMenu"
+          :text-color="
-        :collapse="isCollapse"
+            settings.sideTheme === 'theme-dark'
-        :background-color="
+              ? variables.menuColor
-          settings.sideTheme === 'theme-dark'
+              : variables.menuLightColor
-            ? variables.menuBackground
+          "
-            : variables.menuLightBackground
+          :unique-opened="true"
-        "
+          active-text-color="#ffba00"
-        :text-color="
+          :collapse-transition="false"
-          settings.sideTheme === 'theme-dark'
+          mode="vertical"
-            ? variables.menuColor
+        >
-            : variables.menuLightColor
+          <sidebar-item
-        "
+            v-for="(route, index) in sidebarRouters"
-        :unique-opened="true"
+            :key="route.path + index"
-        active-text-color="#ffba00"
+            :item="route"
-        :collapse-transition="false"
+            :base-path="route.path"
-        mode="vertical"
+          />
-      >
+        </el-menu>
-        <sidebar-item
+      </el-scrollbar>
-          v-for="(route, index) in sidebarRouters"
+    </div>
-          :key="route.path + index"
-          :item="route"
-          :base-path="route.path"
-        />
-      </el-menu>
-    </el-scrollbar>
   </div>
 </template>
 
@@ -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"
+            type="text"
-            icon="el-icon-search"
+            icon="el-icon-view"
             @click="handleDetail(scope.row)"
           >
             共享详情