From 5f87d45ac2b88afe842a74e29db678e26ed3696b Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期一, 03 六月 2024 10:50:01 +0800
Subject: [PATCH] chore:搭建项目基础

---
 tailwind.config.js                      |   12 
 package-lock.json                       |  645 ++++++++++++++++++++++++++++++++++++++++++++++
 src/assets/image/teach/micClose.png     |    0 
 src/assets/image/teach/ban.png          |    0 
 src/assets/image/teach/stopHand.png     |    0 
 src/assets/image/teach/take_class.png   |    0 
 src/assets/image/exam/review.png        |    0 
 src/assets/image/manage/log.png         |    0 
 src/assets/image/teach/unban.png        |    0 
 src/assets/image/exam/exam.png          |    0 
 src/assets/image/teach/handUp.png       |    0 
 src/assets/image/teach/hand.png         |    0 
 src/assets/image/other/background.jpg   |    0 
 src/assets/image/manage/people.png      |    0 
 src/assets/image/exam/watch.png         |    0 
 src/assets/logo.png                     |    0 
 src/assets/image/exam/result.png        |    0 
 src/assets/image/manage/class.png       |    0 
 src/assets/image/teach/iconMicOpen.png  |    0 
 src/components/Header/index.vue         |   95 ++++++
 src/assets/image/exam/question.png      |    0 
 src/assets/image/teach/micOpen.png      |    0 
 src/router/index.js                     |   13 
 src/assets/image/teach/exit.png         |    0 
 src/views/menu/index.vue                |   13 
 src/assets/image/teach/history.png      |    0 
 src/views/home/index.vue                |    2 
 src/assets/image/avatar/avatar.png      |    0 
 src/style.css                           |    9 
 package.json                            |    4 
 src/assets/image/teach/iconMicClose.png |    0 
 src/assets/image/teach/classOver.png    |    0 
 src/assets/image/teach/book.png         |    0 
 src/App.vue                             |   10 
 src/assets/image/exam/appointment.png   |    0 
 postcss.config.js                       |    6 
 36 files changed, 792 insertions(+), 17 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 697fedb..693490d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,13 +18,29 @@
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.0.4",
+        "autoprefixer": "^10.4.19",
         "electron": "^30.0.9",
         "electron-builder": "^24.13.3",
         "electron-devtools-installer": "^3.2.0",
+        "postcss": "^8.4.38",
+        "sass": "^1.77.4",
+        "tailwindcss": "^3.4.3",
         "unplugin-auto-import": "^0.17.6",
         "unplugin-vue-components": "^0.27.0",
         "vite": "^5.2.0",
         "vite-plugin-electron": "^0.28.7"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmmirror.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/@antfu/utils": {
@@ -816,10 +832,52 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
+      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/set-array": "^1.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
       "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.25",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
     },
     "node_modules/@malept/cross-spawn-promise": {
       "version": "1.1.1",
@@ -1598,6 +1656,12 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true
+    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz",
@@ -1780,6 +1844,12 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmmirror.com/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/argparse/-/argparse-2.0.1.tgz",
@@ -1838,6 +1908,43 @@
       "dev": true,
       "engines": {
         "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.4.19",
+      "resolved": "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.19.tgz",
+      "integrity": "sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "browserslist": "^4.23.0",
+        "caniuse-lite": "^1.0.30001599",
+        "fraction.js": "^4.3.7",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
       }
     },
     "node_modules/axios": {
@@ -1941,6 +2048,38 @@
       },
       "engines": {
         "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.23.0",
+      "resolved": "https://registry.npmmirror.com/browserslist/-/browserslist-4.23.0.tgz",
+      "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001587",
+        "electron-to-chromium": "^1.4.668",
+        "node-releases": "^2.0.14",
+        "update-browserslist-db": "^1.0.13"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
     "node_modules/buffer": {
@@ -2089,6 +2228,35 @@
       "engines": {
         "node": ">=8"
       }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001626",
+      "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001626.tgz",
+      "integrity": "sha512-JRW7kAH8PFJzoPCJhLSHgDgKg5348hsQ68aqb+slnzuB5QFERv846oA/mRChmlLAOdEDeOkRn3ynb1gSFnjt3w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ]
     },
     "node_modules/chalk": {
       "version": "4.1.2",
@@ -2391,6 +2559,18 @@
         "node": ">= 8"
       }
     },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",
@@ -2505,6 +2685,12 @@
       "dev": true,
       "optional": true
     },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true
+    },
     "node_modules/dir-compare": {
       "version": "3.3.0",
       "resolved": "https://registry.npmmirror.com/dir-compare/-/dir-compare-3.3.0.tgz",
@@ -2536,6 +2722,12 @@
       "engines": {
         "node": "*"
       }
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmmirror.com/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true
     },
     "node_modules/dmg-builder": {
       "version": "24.13.3",
@@ -2855,6 +3047,12 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/electron-to-chromium": {
+      "version": "1.4.788",
+      "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.788.tgz",
+      "integrity": "sha512-ubp5+Ev/VV8KuRoWnfP2QF2Bg+O2ZFdb49DiiNbz2VmgkIqrnyYaqIOqj8A6K/3p1xV0QcU5hBQ1+BmB6ot1OA==",
+      "dev": true
+    },
     "node_modules/element-plus": {
       "version": "2.7.3",
       "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.7.3.tgz",
@@ -3164,6 +3362,19 @@
       },
       "engines": {
         "node": ">= 6"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmmirror.com/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
       }
     },
     "node_modules/fs-constants": {
@@ -3604,6 +3815,12 @@
       "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
       "dev": true
     },
+    "node_modules/immutable": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.6.tgz",
+      "integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==",
+      "dev": true
+    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmmirror.com/inflight/-/inflight-1.0.6.tgz",
@@ -3775,6 +3992,15 @@
         "node": "*"
       }
     },
+    "node_modules/jiti": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmmirror.com/jiti/-/jiti-1.21.0.tgz",
+      "integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==",
+      "dev": true,
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "9.0.0",
       "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-9.0.0.tgz",
@@ -3944,6 +4170,21 @@
       "dependencies": {
         "immediate": "~3.0.5"
       }
+    },
+    "node_modules/lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmmirror.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true
     },
     "node_modules/local-pkg": {
       "version": "0.5.0",
@@ -4210,6 +4451,17 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmmirror.com/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.7.tgz",
@@ -4234,10 +4486,25 @@
       "dev": true,
       "optional": true
     },
+    "node_modules/node-releases": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmmirror.com/node-releases/-/node-releases-2.0.14.tgz",
+      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
+      "dev": true
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmmirror.com/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
       "dev": true,
       "engines": {
         "node": ">=0.10.0"
@@ -4259,6 +4526,24 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
       "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
     },
     "node_modules/object-keys": {
       "version": "1.1.1",
@@ -4372,6 +4657,15 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/pinia": {
       "version": "2.1.7",
       "resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.1.7.tgz",
@@ -4420,6 +4714,15 @@
         "@vue/composition-api": {
           "optional": true
         }
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmmirror.com/pirates/-/pirates-4.0.6.tgz",
+      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
       }
     },
     "node_modules/pkg-types": {
@@ -4473,6 +4776,127 @@
       "engines": {
         "node": "^10 || ^12 || >=14"
       }
+    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmmirror.com/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dev": true,
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-load-config/node_modules/lilconfig": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/lilconfig/-/lilconfig-3.1.1.tgz",
+      "integrity": "sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmmirror.com/postcss-nested/-/postcss-nested-6.0.1.tgz",
+      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.11"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmmirror.com/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz",
+      "integrity": "sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true
     },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
@@ -4556,6 +4980,15 @@
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "dependencies": {
+        "pify": "^2.3.0"
       }
     },
     "node_modules/read-config-file": {
@@ -4801,6 +5234,23 @@
       "dev": true,
       "dependencies": {
         "truncate-utf8-bytes": "^1.0.0"
+      }
+    },
+    "node_modules/sass": {
+      "version": "1.77.4",
+      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.77.4.tgz",
+      "integrity": "sha512-vcF3Ckow6g939GMA4PeU7b2K/9FALXk2KF9J87txdHzXbUF9XRQRwSxcAs/fGaTnJeBFd7UoV22j3lzMLdM0Pw==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
       }
     },
     "node_modules/sax": {
@@ -5052,6 +5502,83 @@
         "js-tokens": "^9.0.0"
       }
     },
+    "node_modules/sucrase": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmmirror.com/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "^10.3.10",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/sucrase/node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/sucrase/node_modules/glob": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmmirror.com/glob/-/glob-10.4.1.tgz",
+      "integrity": "sha512-2jelhlq3E4ho74ZyVLN03oKdAZVUa6UDZzFLVH1H7dnoax+y9qyaq8zBkfDIggjniU19z0wU18y16jMB2eyVIw==",
+      "dev": true,
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/sucrase/node_modules/minimatch": {
+      "version": "9.0.4",
+      "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.4.tgz",
+      "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/sucrase/node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmmirror.com/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/sumchecker": {
       "version": "3.0.1",
       "resolved": "https://registry.npmmirror.com/sumchecker/-/sumchecker-3.0.1.tgz",
@@ -5086,6 +5613,55 @@
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmmirror.com/tailwindcss/-/tailwindcss-3.4.3.tgz",
+      "integrity": "sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==",
+      "dev": true,
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.0",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.0",
+        "lilconfig": "^2.1.0",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.23",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-selector-parser": "^6.0.11",
+        "resolve": "^1.22.2",
+        "sucrase": "^3.32.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmmirror.com/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
       }
     },
     "node_modules/tar": {
@@ -5167,6 +5743,27 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmmirror.com/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmmirror.com/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/tmp": {
       "version": "0.2.3",
       "resolved": "https://registry.npmmirror.com/tmp/-/tmp-0.2.3.tgz",
@@ -5205,6 +5802,12 @@
       "dependencies": {
         "utf8-byte-length": "^1.0.1"
       }
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmmirror.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true
     },
     "node_modules/tslib": {
       "version": "2.6.2",
@@ -5438,6 +6041,36 @@
       },
       "bin": {
         "mkdirp": "bin/cmd.js"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.0.16",
+      "resolved": "https://registry.npmmirror.com/update-browserslist-db/-/update-browserslist-db-1.0.16.tgz",
+      "integrity": "sha512-KVbTxlBYlckhF5wgfyZXTWnMn7MMZjMu9XG8bPlliUOP9ThaF4QnhP8qrjrH7DRzHfSk0oQv1wToW+iA5GajEQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "escalade": "^3.1.2",
+        "picocolors": "^1.0.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
       }
     },
     "node_modules/uri-js": {
@@ -5680,6 +6313,18 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "node_modules/yaml": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmmirror.com/yaml/-/yaml-2.4.3.tgz",
+      "integrity": "sha512-sntgmxj8o7DE7g/Qi60cqpLBA3HG3STcDA0kO+WfB05jEKhZMbY7umNm2rBpQvsmZ16/lPXCJGW2672dgOUkrg==",
+      "dev": true,
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/yargs": {
       "version": "17.7.2",
       "resolved": "https://registry.npmmirror.com/yargs/-/yargs-17.7.2.tgz",
diff --git a/package.json b/package.json
index cfc27fe..4b74a76 100644
--- a/package.json
+++ b/package.json
@@ -20,9 +20,13 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
+    "autoprefixer": "^10.4.19",
     "electron": "^30.0.9",
     "electron-builder": "^24.13.3",
     "electron-devtools-installer": "^3.2.0",
+    "postcss": "^8.4.38",
+    "sass": "^1.77.4",
+    "tailwindcss": "^3.4.3",
     "unplugin-auto-import": "^0.17.6",
     "unplugin-vue-components": "^0.27.0",
     "vite": "^5.2.0",
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..33ad091
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/App.vue b/src/App.vue
index aadaf6a..b93b427 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,9 +2,17 @@
 </script>
 
 <template>
+  <div class="page-container w-screen h-screen flex flex-col">
+    <Header></Header>
+    <div class="page-content w-screen grow relative">
+      <div class="page-wrapper bg-slate-50 absolute top-0 left-0 right-0 bottom-0 overflow-y-auto">
+        <RouterView />
+      </div>
+    </div>
+  </div>
 
-  <RouterView />
 </template>
 
 <style scoped>
+
 </style>
diff --git a/src/assets/image/avatar/avatar.png b/src/assets/image/avatar/avatar.png
new file mode 100644
index 0000000..4d28e4c
--- /dev/null
+++ b/src/assets/image/avatar/avatar.png
Binary files differ
diff --git a/src/assets/image/exam/appointment.png b/src/assets/image/exam/appointment.png
new file mode 100644
index 0000000..e2cffbb
--- /dev/null
+++ b/src/assets/image/exam/appointment.png
Binary files differ
diff --git a/src/assets/image/exam/exam.png b/src/assets/image/exam/exam.png
new file mode 100644
index 0000000..da6589e
--- /dev/null
+++ b/src/assets/image/exam/exam.png
Binary files differ
diff --git a/src/assets/image/exam/question.png b/src/assets/image/exam/question.png
new file mode 100644
index 0000000..9aa5a54
--- /dev/null
+++ b/src/assets/image/exam/question.png
Binary files differ
diff --git a/src/assets/image/exam/result.png b/src/assets/image/exam/result.png
new file mode 100644
index 0000000..2dd610b
--- /dev/null
+++ b/src/assets/image/exam/result.png
Binary files differ
diff --git a/src/assets/image/exam/review.png b/src/assets/image/exam/review.png
new file mode 100644
index 0000000..ec870ef
--- /dev/null
+++ b/src/assets/image/exam/review.png
Binary files differ
diff --git a/src/assets/image/exam/watch.png b/src/assets/image/exam/watch.png
new file mode 100644
index 0000000..d758455
--- /dev/null
+++ b/src/assets/image/exam/watch.png
Binary files differ
diff --git a/src/assets/image/manage/class.png b/src/assets/image/manage/class.png
new file mode 100644
index 0000000..3050749
--- /dev/null
+++ b/src/assets/image/manage/class.png
Binary files differ
diff --git a/src/assets/image/manage/log.png b/src/assets/image/manage/log.png
new file mode 100644
index 0000000..499281e
--- /dev/null
+++ b/src/assets/image/manage/log.png
Binary files differ
diff --git a/src/assets/image/manage/people.png b/src/assets/image/manage/people.png
new file mode 100644
index 0000000..5954ac0
--- /dev/null
+++ b/src/assets/image/manage/people.png
Binary files differ
diff --git a/src/assets/image/other/background.jpg b/src/assets/image/other/background.jpg
new file mode 100644
index 0000000..b821e3f
--- /dev/null
+++ b/src/assets/image/other/background.jpg
Binary files differ
diff --git a/src/assets/image/teach/ban.png b/src/assets/image/teach/ban.png
new file mode 100644
index 0000000..b69d4b7
--- /dev/null
+++ b/src/assets/image/teach/ban.png
Binary files differ
diff --git a/src/assets/image/teach/book.png b/src/assets/image/teach/book.png
new file mode 100644
index 0000000..36ee1c8
--- /dev/null
+++ b/src/assets/image/teach/book.png
Binary files differ
diff --git a/src/assets/image/teach/classOver.png b/src/assets/image/teach/classOver.png
new file mode 100644
index 0000000..25f46c5
--- /dev/null
+++ b/src/assets/image/teach/classOver.png
Binary files differ
diff --git a/src/assets/image/teach/exit.png b/src/assets/image/teach/exit.png
new file mode 100644
index 0000000..3f661d4
--- /dev/null
+++ b/src/assets/image/teach/exit.png
Binary files differ
diff --git a/src/assets/image/teach/hand.png b/src/assets/image/teach/hand.png
new file mode 100644
index 0000000..ba70e7a
--- /dev/null
+++ b/src/assets/image/teach/hand.png
Binary files differ
diff --git a/src/assets/image/teach/handUp.png b/src/assets/image/teach/handUp.png
new file mode 100644
index 0000000..eef86f8
--- /dev/null
+++ b/src/assets/image/teach/handUp.png
Binary files differ
diff --git a/src/assets/image/teach/history.png b/src/assets/image/teach/history.png
new file mode 100644
index 0000000..72f5b0b
--- /dev/null
+++ b/src/assets/image/teach/history.png
Binary files differ
diff --git a/src/assets/image/teach/iconMicClose.png b/src/assets/image/teach/iconMicClose.png
new file mode 100644
index 0000000..7a37a56
--- /dev/null
+++ b/src/assets/image/teach/iconMicClose.png
Binary files differ
diff --git a/src/assets/image/teach/iconMicOpen.png b/src/assets/image/teach/iconMicOpen.png
new file mode 100644
index 0000000..81f976d
--- /dev/null
+++ b/src/assets/image/teach/iconMicOpen.png
Binary files differ
diff --git a/src/assets/image/teach/micClose.png b/src/assets/image/teach/micClose.png
new file mode 100644
index 0000000..e9998e8
--- /dev/null
+++ b/src/assets/image/teach/micClose.png
Binary files differ
diff --git a/src/assets/image/teach/micOpen.png b/src/assets/image/teach/micOpen.png
new file mode 100644
index 0000000..efbf996
--- /dev/null
+++ b/src/assets/image/teach/micOpen.png
Binary files differ
diff --git a/src/assets/image/teach/stopHand.png b/src/assets/image/teach/stopHand.png
new file mode 100644
index 0000000..4d9f0e6
--- /dev/null
+++ b/src/assets/image/teach/stopHand.png
Binary files differ
diff --git a/src/assets/image/teach/take_class.png b/src/assets/image/teach/take_class.png
new file mode 100644
index 0000000..4702361
--- /dev/null
+++ b/src/assets/image/teach/take_class.png
Binary files differ
diff --git a/src/assets/image/teach/unban.png b/src/assets/image/teach/unban.png
new file mode 100644
index 0000000..cdfdbd5
--- /dev/null
+++ b/src/assets/image/teach/unban.png
Binary files differ
diff --git a/src/assets/logo.png b/src/assets/logo.png
new file mode 100644
index 0000000..f3d2503
--- /dev/null
+++ b/src/assets/logo.png
Binary files differ
diff --git a/src/components/Header/index.vue b/src/components/Header/index.vue
index 36bad8a..c1fccf3 100644
--- a/src/components/Header/index.vue
+++ b/src/components/Header/index.vue
@@ -1,26 +1,99 @@
 <template>
-  <div class="header-container">
-    <div class="head-item">
-      <div class="logo-container">
-
+  <div class="header-container w-screen py-1">
+    <div class="header-content container h-16 flex items-center mx-auto">
+      <div class="head-item w-56">
+        <div class="logo-container flex items-center">
+          <svg t="1645066822185" class="icon" viewBox="0 0 1210 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+            p-id="3196" width="50" height="50">
+            <path
+              d="M1052.079312 583.421799c16.988424 75.666705-1.067278 155.023037-49.058109 215.637823-47.994499 60.603782-120.712436 95.882636-197.585788 95.853295H193.808871c-67.72447-0.055014-130.273926-36.569857-164.086464-95.790946a192.825215 192.825215 0 0 1 0.151106-191.303152c33.913765-59.158739 96.517868-95.567221 164.243805-95.512206 2.006923 0 3.942693 0.234728 5.932378 0.297078 23.541731-117.45192 110.322063-211.686327 224.671542-243.970201 114.356447-32.290842 236.990716 2.824069 317.506017 90.902372 1.067278-80.33192 42.966189-154.466659 110.930888-196.293318a229.606693 229.606693 0 0 1 223.706591-9.626406c-48.306246 11.244928-82.294097 54.97765-81.600917 105.006212 0.685845 50.022693 35.862006 92.787163 84.457994 102.673971s97.448711-15.778842 117.294212-61.62008c33.423037 118.358189-30.012149 242.565868-144.937077 283.745925z m-552.307163-241.25616c-133.849857 0.006235-242.356447 109.515186-242.356447 244.598464 0 8.032092 0.410407 15.987163 1.157501 23.817536a115.155989 115.155989 0 0 0-130.677363 16.152206c-36.016046 32.227393-48.559312 83.559427-31.525777 129.001261 17.035003 45.434499 60.115622 75.527335 108.253158 75.619026 3.438029 0 6.826544-0.157708 10.191587-0.462121v0.462121H784.166877v-0.583152c3.498911 0.205387 6.953811 0.583152 10.504069 0.583152 59.760229 0 115.581433-30.092837 148.806418-80.225559a182.086785 182.086785 0 0 0 16.662006-169.433123c-0.722521-1.760458-1.551404-3.46957-2.32894-5.200688-1.423037-3.194499-2.897421-6.352321-4.50384-9.455129-0.935244-1.892493-1.965845-3.693295-2.996447-5.519771-1.646762-2.934097-3.388883-5.813181-5.19702-8.640916-1.085616-1.690774-2.149226-3.396218-3.282521-5.04298q-3.317364-4.797249-6.939141-9.363439c-0.861891-1.107622-1.6651-2.262923-2.556332-3.344871q-4.956791-6.018567-10.427049-11.575014c-1.096619-1.12596-2.284928-2.160229-3.418223-3.260516q-4.010544-3.900516-8.230144-7.558968c-1.492722-1.272665-3.02212-2.490315-4.547851-3.707966q-4.016046-3.212837-8.226475-6.201948c-1.580745-1.12596-3.172493-2.262923-4.804585-3.326533q-4.703725-3.097307-9.601834-5.890201c-1.35702-0.773868-2.670029-1.621089-4.045386-2.361948-4.687221-2.519656-9.370774-4.844928-14.285387-6.946476-0.935244-0.399771-1.94384-0.722521-2.893754-1.111289q-6.007564-2.475645-12.180172-4.511175c-1.74212-0.564814-3.524585-1.045272-5.285043-1.569742q-8.092607-2.360115-16.383266-3.968367c-3.744642-0.711519-7.489284-1.26533-11.307278-1.738453-1.74212-0.220057-3.458567-0.480458-5.226361-0.652837q-8.400688-0.825215-16.860057-0.861891c-5.18235 0-10.306017 0.407106-15.323324 0.850889-3.16149 0.311748-6.293639 0.66384-9.370774 1.107621a178.337009 178.337009 0 0 0-49.237822 14.369743c-39.162865-87.670831-125.612378-144.040711-220.908195-144.046946z m431.935817-117.110831a205.230946 205.230946 0 0 1 1.415702-23.148928c-75.575014 26.069822-119.945903 104.99961-103.35725 183.846876 79.488367 7.731347 150.687908 52.912779 192.036677 121.860402 44.084814-10.878166 81.424871-40.329169 102.535702-80.874728-107.490659-4.038052-192.583152-93.120917-192.630831-201.682522z m0 0"
+              fill="#0AC164" p-id="3197"></path>
+          </svg>
+          <h1 class="mt-1 ml-3 text-lg font-semibold">璇煶瑙嗛鍩硅绯荤粺</h1>
+        </div>
       </div>
+      <div class="head-item h-full grow flex justify-center">
+        <div class="menu-container flex items-center">
+          <div class="menu-item h-full mx-2" v-for="item in menuList">
+            <router-link :to="item.path" class="menu-link text-lg flex items-center h-full px-5"
+              :class="{ active: item.isActive }">
+              {{ item.name }}
+            </router-link>
+          </div>
+        </div>
+      </div>
+      <div class="head-item w-56"></div>
     </div>
-    <div class="head-item"></div>
-    <div class="head-item"></div>
   </div>
 </template>
 
 <script setup>
+import { ref, watchEffect } from 'vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+
+const menuList = ref([
+  {
+    name: '棣栭〉',
+    path: '/index',
+    isActive: false
+  },
+  {
+    name: '鑿滃崟',
+    path: '/menu',
+    isActive: false
+  },
+]);
+const resetMenu = () => {
+  menuList.value.forEach(item => {
+    item.isActive = false;
+  });
+};
+
+watchEffect(() => {
+  const menu = menuList.value.find(item => item.path === route.path);
+  if (menu) {
+    resetMenu();
+    menu.isActive = true;
+  }
+});
 
 </script>
 
 <style lang="scss" scoped>
 .header-container {
-  width: 100%;
-  display: flex;
-  box-shadow: 0 2px 20px ;
-  .head-item {
-    flex-shrink: 0;
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.5)
+}
+
+@media (min-width: 1836px) {
+  .container {
+    max-width: 1724px;
+  }
+}
+
+.menu-link {
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    width: 7px;
+    height: 7px;
+    border: none;
+    background: #0AC164;
+    border-radius: 7px;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 5%;
+    opacity: 0;
+  }
+}
+
+.active {
+  font-weight: 600;
+  &::after {
+    opacity: 1;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 61191be..37356bd 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,13 +1,18 @@
-import { createMemoryHistory, createRouter } from 'vue-router'
+import { createMemoryHistory, createRouter } from 'vue-router';
 
 
 const routes = [
-  { path: '/', component: () => import('@/views/home/index.vue') },
-]
+  {
+    path: '/',
+    redirect: '/index'
+  },
+  { path: '/index', component: () => import('@/views/home/index.vue') },
+  { path: '/menu', component: () => import('@/views/menu/index.vue') },
+];
 
 const router = createRouter({
   history: createMemoryHistory(),
   routes,
-})
+});
 
 export default router;
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
index 0f0bba9..8a89425 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 html,body {
   width: 100%;
   height: 100%;
@@ -11,3 +15,8 @@
   margin: 0;
 }
 
+
+.width-img {
+  width: 100%;
+  display: block;
+}
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 9f83882..a116b22 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,5 +1,5 @@
 <template>
-  
+  123
 </template>
 
 <script setup>
diff --git a/src/views/menu/index.vue b/src/views/menu/index.vue
new file mode 100644
index 0000000..aaf3acb
--- /dev/null
+++ b/src/views/menu/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+123
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..55d1fb9
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+

--
Gitblit v1.8.0