切换主题

src/router/index.ts

@@ -39,6 +39,7 @@ const routes = [
     path: '/chinese-question',
     component: () => import('@/views/study/chinese/question/index.vue'),
     meta: {
+      root: 'chinese',
       title: '语文题目',
     },
   },

src/style/index.scss

@@ -128,11 +128,3 @@ body,
 }
 
 
-
-.q-tree__node--selected,
-.q-tree__node--selected .q-tree__node-header-content {
-  color: var(--czr-main-color) !important;
-}
-// FILE (create it): src/quasar-variables.sass
-
-

src/views/study/chinese/question/index.vue

@@ -725,4 +725,10 @@ $primary: red;
     color: #ffffff;
   }
 }
+
+:deep(.q-tree__node--selected),
+:deep(.q-tree__node--selected .q-tree__node-header-content) {
+  color: var(--czr-main-color) !important;
+}
+// FILE (create it): src/quasar-variables.sass
 </style>

src/views/study/components/study-layout.vue

@@ -2,7 +2,7 @@
   <div class="flex h-full w-full flex-col">
     <!-- 顶部 -->
     <div
-      class="flex w-full items-center bg-[var(--czr-main-color)] px-4 text-white shadow-md"
+      class="flex w-full items-center bg-[var(--czr-main-color)] px-4 text-lg text-white shadow-md"
     >
       <div class="flex items-center">
         <div class="text-xl font-bold">学习系统</div>
@@ -10,7 +10,11 @@
       <div class="ml-auto flex h-16 items-center">
         <template v-for="item in menusCpt">
           <div
-            class="mr-6 cursor-pointer py-2"
+            class="nav-link mr-2 cursor-pointer py-2"
+            :class="{
+              active:
+                $route.name === item.name || $route.meta?.root === item.name,
+            }"
             @click="$router.push({ name: item.name })"
           >
             <i class="fas mr-1" :class="item.meta?.fa"></i>
@@ -21,6 +25,16 @@
       <div class="py-2">
         <i class="fas fa-user mr-1"></i>
         <span>个人中心</span>
+        <q-menu>
+          <q-list>
+            <q-item clickable @click="onSwitchTheme">
+              <q-item-section>切换主题</q-item-section>
+            </q-item>
+            <q-item clickable v-close-popup>
+              <q-item-section>个人信息</q-item-section>
+            </q-item>
+          </q-list>
+        </q-menu>
       </div>
     </div>
     <div class="flex-1 overflow-hidden">
@@ -38,6 +52,67 @@ const state: any = reactive({})
 const menusCpt = computed(() => {
   return router.options.routes.filter((v) => v.meta?.isMenu)
 })
+const onSwitchTheme = () => {
+  const rgb = getComputedStyle(document.documentElement).getPropertyValue(
+    '--czr-main-color-rgb',
+  )
+  console.log(rgb)
+  switch (rgb) {
+    case '235, 92, 32':
+      {
+        const rgb_ = '102, 212, 200'
+        document.documentElement.style.setProperty(
+          '--czr-main-color',
+          `rgba(${rgb_}, 1)`,
+        )
+        document.documentElement.style.setProperty('--czr-main-color-rgb', rgb_)
+      }
+      break
+    case '102, 212, 200':
+      {
+        const rgb_ = '235, 92, 32'
+        document.documentElement.style.setProperty(
+          '--czr-main-color',
+          `rgba(${rgb_}, 1)`,
+        )
+        document.documentElement.style.setProperty('--czr-main-color-rgb', rgb_)
+      }
+      break
+  }
+}
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.nav-link {
+  position: relative;
+  padding: 0.5rem 1rem; /* 增加内边距 */
+  border-radius: 4px; /* 添加圆角 */
+  transition: all 0.3s ease; /* 添加过渡效果 */
+}
+
+.nav-link::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background-color: white; /* 修改为白色下划线 */
+  transition: width 0.3s ease;
+}
+
+.nav-link:hover::after {
+  width: 100%;
+}
+
+/* 增强顶部菜单选中样式 */
+.nav-link.active {
+  background-color: rgba(0, 0, 0, 0.1); /* 选中项背景色变化 */
+  font-weight: bold; /* 文字加粗 */
+}
+
+.nav-link.active::after {
+  width: 100%;
+  height: 3px; /* 增加下划线高度 */
+}
+</style>