主题色

src/router/index.ts

@@ -22,6 +22,7 @@ const routes = [
       isMenu: true,
       title: '首页',
       fa: 'fa-home',
+      theme: 'main',
     },
   },
   {
@@ -32,6 +33,7 @@ const routes = [
       isMenu: true,
       title: '语文',
       fa: 'fa-book',
+      theme: 'chinese',
     },
   },
   {
@@ -41,6 +43,7 @@ const routes = [
     meta: {
       root: 'chinese',
       title: '语文题目',
+      theme: 'chinese',
     },
   },
   {
@@ -50,6 +53,7 @@ const routes = [
     meta: {
       root: 'chinese',
       title: '语文题目',
+      theme: 'chinese',
     },
   },
   {
@@ -60,6 +64,7 @@ const routes = [
       isMenu: true,
       title: '数学',
       fa: 'fa-calculator',
+      theme: 'math',
     },
   },
   {
@@ -70,6 +75,7 @@ const routes = [
       isMenu: true,
       title: '英语',
       fa: 'fa-language',
+      theme: 'english',
     },
   },
 ]

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

@@ -2,7 +2,8 @@
   <div class="flex h-full w-full flex-col">
     <!-- 顶部 -->
     <div
-      class="flex w-full items-center bg-[var(--czr-main-color)] px-4 text-lg text-white shadow-md"
+      class="flex w-full items-center px-4 text-lg text-white shadow-md"
+      :class="`bg-[var(--czr-${$route.meta.theme}-color)]`"
     >
       <div class="flex items-center">
         <div class="text-xl font-bold">学习系统</div>