change color

2024-07-13 09:40:04 +08:00
4 changed files with 349 additions and 49 deletions
--- a/src/components/AsideMenu.vue
+++ b/src/components/AsideMenu.vue
@ -1,6 +1,7 @@
 <!-- /**用于显示sidebar的页面 */ -->
 <template>
  <!-- 这一层用来放边栏 -->
+<<<<<<< Updated upstream
  <el-container
    style="height: 100%; border: 0px; background-color: #f5f6fa; width: 100%"
  >
@ -49,12 +50,45 @@
      <el-menu-item index="/test">
        <el-icon><View /></el-icon>
        <span v-show="!isFold">测试专用</span>
+=======
+  <el-container style="height: 100%; border: 0px; background-color: #f5f6fa; width:100%">
+    <el-header class = "containerSystemName">
+      <!-- 这里要放两个部件，一个是系统名称一个是折叠按钮 -->
+       <!-- 这里主要调整el-container的布局模式就直接写在这里了 -->
+       <el-container style = 'padding: 0'>
+        <el-container class = 'text-systemName'>
+          <el-text v-show = '!isFold' style="color: white; font-size: 16px;">线索库系统</el-text>
+        </el-container>
+        <el-button class ='btnFold' @click = 'handleFold'><el-icon><Fold /></el-icon></el-button>
+       </el-container>
+    </el-header>
+    <el-menu class = 'containerSelections' 
+      router
+      >
+      <el-menu-item index="/Home">
+        <el-icon><HomeFilled /></el-icon>
+        <span v-show = '!isFold'>首页</span>
+      </el-menu-item>
+      <el-menu-item index="/Delete">
+        <el-icon><DeleteFilled /></el-icon>
+        <span v-show = '!isFold'>回收站</span>
+      </el-menu-item>
+      <!--
+        @brief: 用于调试我设计的各种界面，相当于一个画板
+        @date: 2024年6月29日
+        @author: myz
+      -->
+      <el-menu-item index="/test">
+        <el-icon><View /></el-icon>
+        <span v-show = '!isFold'>测试专用</span>
+>>>>>>> Stashed changes
      </el-menu-item>
    </el-menu>
  </el-container>
 </template>

 <script>
+<<<<<<< Updated upstream
 export default {
  name: "AsideMenu",
  props: {
@ -126,6 +160,100 @@ export default {
 .btnFold:hover {
  background-color: transparent;
  color: #1ad4c4d4;
+=======
+export default{
+name:'AsideMenu',
+props: {
+  isCollapse: Boolean
+},
+data(){
+  // 控制折叠状态变量:
+  return {
+    isFold:false,
+  }
+},
+methods:{
+  // 控制折叠状态
+  handleFold(){
+    this.isFold = !this.isFold;
+    // 向indexPage传递边栏的折叠状态
+    if(this.isFold)
+      this.$emit('update:isCollapse',true);
+    else
+      this.$emit('update:isCollapse',false);
+  }
+},
+}
+</script>
+
+/**
+@brief: CSS设计
+@date: 2024年6月20日
+@author: myz
+*/
+<style scoped>
+.containerSystemName{
+color:white;    /**字体颜色为白色 */
+background-color: #158484; /* 容器背景颜色 */
+display: flex;
+justify-content: center; /**水平居中 */
+align-items: center;  /**竖直居中 */
+font-weight: bolder; /** 字体加粗 */
+font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /*设置字体*/
+font-size: 14px;  /**字体大小 */
+height:6%;
+width: 100%;
+padding-left:0;
+padding-right:3px;
+}
+.el-text{
+color:white
+}
+.text-systemName{
+background-color: #158484; /* 容器背景颜色 */
+display: flex;
+/**竖直居中 */
+align-items: center;  
+/**水平居中 */
+justify-content: center; 
+height:100%;
+padding:0;
+}
+.containerSelections{
+color: white;
+background-color: #1DAFAF;
+height: 94%;
+width:100%;
+border:0px;
+}
+
+.el-menu-item{
+color:white;
+font-weight: bold;
+width: 100%;
+}
+/**覆写悬浮，选中等样式 */
+:deep .el-menu-item:hover{
+background-color: #1ad4c4d4;
+color: antiquewhite;
+}
+:deep  .el-menu-item.is-active{
+color: #158484;
+}
+
+.btnFold{
+display: flex;
+align-items: center;
+color: #0E5858;
+font-size: 28px;
+background-color: transparent;
+border: 0;
+}
+
+.btnFold:hover{
+background-color: transparent;
+color:#1ad4c4d4;
+>>>>>>> Stashed changes
 }
 .el-menu--line {
  background-color: #000c17 !important;
--- a/src/components/lqs_AsideMenu.vue
+++ b/src/components/lqs_AsideMenu.vue
@ -0,0 +1,159 @@
+<!-- /**用于显示sidebar的页面 */ -->
+<template>
+  <!-- 这一层用来放边栏 -->
+  <el-container
+    style="height: 100%; border: 0px; background-color: #f5f6fa; width: 100%"
+  >
+    <el-header class="containerSystemName">
+      <!-- 这里要放两个部件，一个是系统名称一个是折叠按钮 -->
+      <!-- 这里主要调整el-container的布局模式就直接写在这里了 -->
+      <el-container style="padding: 0">
+        <el-container class="text-systemName">
+          <img
+            src="@/assets/logo.png"
+            alt=""
+            style="width: 40px; height: 40px"
+          />
+          <el-text v-show="!isFold" style="color: white; font-size: 16px"
+            >线索库系统</el-text
+          >
+        </el-container>
+        <el-button class="btnFold" @click="handleFold"
+          ><el-icon><Fold /></el-icon
+        ></el-button>
+      </el-container>
+    </el-header>
+    <el-menu
+      style="border: none; height: 100vh"
+      text-color="rgba(255,255,255,0.65)"
+      active-text-color="#ffd04b"
+      default-active="/Home"
+      :collapse="isCollapse"
+      :collapse-transition="false"
+      class="containerSelections"
+      router
+    >
+      <el-menu-item index="/Home">
+        <el-icon><HomeFilled /></el-icon>
+        <span v-show="!isFold">系统首页</span>
+      </el-menu-item>
+      <el-menu-item index="/Delete">
+        <el-icon><DeleteFilled /></el-icon>
+        <span v-show="!isFold">回收站</span>
+      </el-menu-item>
+      <!--
+          @brief: 用于调试我设计的各种界面，相当于一个画板
+          @date: 2024年6月29日
+          @author: myz
+        -->
+      <el-menu-item index="/test">
+        <el-icon><View /></el-icon>
+        <span v-show="!isFold">测试专用</span>
+      </el-menu-item>
+    </el-menu>
+  </el-container>
+</template>
+
+<script>
+export default {
+  name: "AsideMenu",
+  props: {
+    isCollapse: Boolean,
+  },
+  data() {
+    // 控制折叠状态变量:
+    return {
+      isFold: false,
+    };
+  },
+  methods: {
+    // 控制折叠状态
+    handleFold() {
+      this.isFold = !this.isFold;
+      // 向indexPage传递边栏的折叠状态
+      if (this.isFold) this.$emit("update:isCollapse", true);
+      else this.$emit("update:isCollapse", false);
+    },
+  },
+};
+</script>
+
+/** @brief: CSS设计 @date: 2024年6月20日 @author: myz */
+<style scoped>
+.containerSystemName {
+  color: white; /**字体颜色为白色 */
+  background-color: #090470; /* 容器背景颜色 */
+  display: flex;
+  justify-content: center; /**水平居中 */
+  align-items: center; /**竖直居中 */
+  font-weight: bolder; /** 字体加粗 */
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; /*设置字体*/
+  font-size: 14px; /**字体大小 */
+  height: 8%;
+  width: 100%;
+  padding-left: 0;
+  padding-right: 3px;
+}
+
+.text-systemName {
+  background-color: #090470; /* 容器背景颜色 */
+  display: flex;
+  /**竖直居中 */
+  align-items: center;
+  /**水平居中 */
+  justify-content: center;
+  height: 100%;
+  padding: 0;
+}
+.containerSelections {
+  background-color: #000c17;
+  height: 92%;
+  width: 100%;
+  border: 0px;
+}
+
+/**覆写悬浮，选中等样式 */
+
+.btnFold {
+  display: flex;
+  align-items: center;
+  color: #8f9191;
+  font-size: 28px;
+  background-color: transparent;
+  border: 0;
+}
+
+.btnFold:hover {
+  background-color: transparent;
+  color: #1ad4c4d4;
+}
+.el-menu--line {
+  background-color: #000c17 !important;
+}
+.el-menu--line.el-menu-item {
+  background-color: #000c17 !important;
+  padding-left: 49px !important;
+}
+.el-menu-item:hover {
+  color: #ffd04b !important;
+}
+.el-menu-item:hover i {
+  color: #ffd04b;
+}
+.el-menu-item.is-active {
+  background-color: #1890ff !important;
+  border-radius: 5px;
+  margin-right: 1px;
+  margin-left: 1px;
+}
+.el-menu-item {
+  font-size: 17px !important;
+  height: 48px;
+  line-height: 47px;
+  margin-right: 1px;
+  margin-left: 1px;
+}
+.el-menu-item i {
+  font-size: 20px !important;
+}
+</style>
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -1,5 +1,6 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
-
+import AsidemenuDark from '@/components/lqs_AsideMenu.vue'; // 假设这是您要跳转到的组件
+import Asidemenu from '@/components/AsideMenu.vue';

 const routes: Array<RouteRecordRaw> = [
  {
@ -28,6 +29,17 @@ const routes: Array<RouteRecordRaw> = [
        path:'/Delete',
        name:'Delete',
        component:()=>import('@/views/WithDraw.vue')
+      }, 
+      // change to 深浅色
+      {
+        path: '/asidemenu',
+        name: 'Asidemenu',
+        component: Asidemenu
+      },
+      {
+        path: '/asidemenu-dark',
+        name: 'AsidemenuDark',
+        component: AsidemenuDark
      },
      // 这里添加一个按钮用于调试所有需要绘制的东西
      {
--- a/src/views/IndexPage.vue
+++ b/src/views/IndexPage.vue
@ -1,67 +1,68 @@
 <template>
-  <!-- 添加router属性，确保页面跳转不会嵌套 -->
-  <el-container class ='containerAll' :router="true"  >
-    <el-aside class ='containerSidebar' :style = "asideMenuCss">
-      <AsideMenu v-model:isCollapse = "isCollapse"></AsideMenu>
+  <el-container class="containerAll" :router="true">
+    <el-aside class="containerSidebar" :class="{ 'darkTheme': isDarkTheme }" :style="asideMenuCss">
+      <AsideMenu v-model:isCollapse="isCollapse"></AsideMenu>
+      <!-- 切换主题按钮放在el-aside内部 -->
+      <button class="themeButton" @click="toggleTheme">
+        {{ isDarkTheme ? '切换浅色主题' : '切换深色主题' }}
+      </button>
    </el-aside>
-    <el-main class = 'containerRight'>
+    <el-main class="containerRight">
      <router-view></router-view>
    </el-main>
  </el-container>
 </template>

-<style scoped>  
-/* 使用Vue 3的::v-deep穿透Scoped CSS */  
-:deep .el-header + .el-main {  
-  margin-top: 0 !important;  
-  padding-top: 0 !important; 
-}  
+<style scoped>
+/* 使用Vue 3的::v-deep穿透Scoped CSS */
+::v-deep .containerSidebar {
+  /* 在侧边栏内部样式 */
+  /* 这里可以定义侧边栏内部的样式 */
+}
+
+.themeButton {
+  margin-top: 10px; /* 举例：添加按钮上方的外边距 */
+}
+
+/* 定义深色主题下的样式 */
+.darkTheme .containerSidebar {
+  background-color: #333; /* 深色背景示例 */
+  color: #fff; /* 深色文字示例 */
+}
 </style>

 <script>
-import AsideMenu from '@/components/AsideMenu.vue' 
+import AsideMenu from '@/components/AsideMenu.vue';

-
-export default{
+export default {
  name: 'IndexPage',
  components: {
    AsideMenu,
  },
-  data(){
-    return{
-      // 接收AsideMenu传来的更新值
+  data() {
+    return {
      isCollapse: false,
-      // 用于设置宽度
-      asideMenuCss:{
-        width: "15%"
+      asideMenuCss: {
+        width: "15%",
      },
-    }
+      isDarkTheme: false, // 添加一个状态来控制深浅色主题
+    };
  },
-  watch:{
-    isCollapse(newVal){
-      // 如果折叠
-      if(newVal)
-        this.asideMenuCss.width = "4.5%";
-      else
-        this.asideMenuCss.width = "15%";
-    }
-  }
-}
+  methods: {
+    toggleTheme() {
+      this.isDarkTheme = !this.isDarkTheme;
+    },
+  },
+  watch: {
+    isCollapse(newVal) {
+      // 监听侧边栏折叠状态改变宽度
+      this.asideMenuCss.width = newVal ? "4.5%" : "15%";
+    },
+    isDarkTheme(newVal) {
+      // 根据深浅色主题切换侧边栏样式
+      // 这里可以根据实际需求来处理样式的变化
+      // 例如切换背景色、文字色等
+    },
+  },
+};
 </script>
-
-<style scoped>
-.containerAll{
-  height:100vh;
-  width: 100%;
-}
-.containerRight{
-  padding: 0;
-  width: auto;
-}
-.containerSidebar{
-  /* 平滑过渡 */
-  transition: width 0.3s ease;
-  /* 隐藏因长度调整导致的滑动条出现 */
-  overflow: hidden;
-}
-</style>