Add about page head

README.md

@@ -19,17 +19,17 @@
 - [x] Add Loading Cat Animation
 - [ ] Design the Logo
 - [x] Add Analytics for the Clicks
-- [ ] Add About Page
+- [x] Add About Page
 - [ ] Add Broken Link list for School Pages
 - [ ] Add Issues, Feedback and Contact
 - [ ] Allow Users to Change the Background
 - [ ] Add detailed introduction for each link
 - [ ] Beautify the Layout
-- [ ] Add Dark Mode
+- [x] Add Dark Mode Support
 - [ ] Allow Users to Change the Layout through Dragging
 - [ ] Add E-guide for Newcomers
 - [ ] Add Icons for links
-- [ ] Global Language Support
+- [ ] ~~Global Language Support~~
 - [ ] Deploy on Individual Domain and Server
 - [ ] Add Search Function(Maybe)
 
@@ -89,11 +89,12 @@ ts file.After that, the page will be deployed on GitHub Pages.
 
 ## Thanks
 
-- The Project is created by [Vue 3](https://vuejs.org/) + [TypeScript](https://www.typescriptlang.org/) .
-- The Loading Cat Animation is from [TouNeko](https://codepen.io/touneko).
-- This project is inspired by [ZJUers轻首页](https://zjuers.com/).
-- Some idea of functions is from [BYR-Navi](https://github.com/BYR-Navi/BYR-Navi).
-- All the codes are done by myself.
+- The Project is created by [Vue 3](https://vuejs.org/) + [TypeScript](https://www.typescriptlang.org/)
+- The Loading Cat animation is by [TouNeko](https://codepen.io/touneko)
+- The dark mode toggle button is by [MarvinRudolph](https://codepen.io/MarvinRudolph)
+- This project is inspired by [ZJUers轻首页](https://zjuers.com/)
+- Some idea of functions is from [BYR-Navi](https://github.com/BYR-Navi/BYR-Navi)
+- All the codes are done by myself
 
 ---
 

README.zh-Hans.md

@@ -16,17 +16,18 @@
 - [x] 添加猫猫加载动画
 - [ ] 设计Logo
 - [x] 添加网站点击量分析
-- [ ] 添加"关于"页
+- [x] 添加"关于"页
+- [ ] 展示网站访问量和点击量等统计数据
 - [ ] 添加学校失效链接列表
 - [ ] 添加问题反馈和联系方式
 - [ ] 允许用户更改背景
 - [ ] 为每个链接添加详细介绍
 - [ ] 美化布局
-- [ ] 添加深色模式
+- [x] 添加深色模式
 - [ ] 允许用户通过拖拽来更改布局
 - [ ] 撰写新生电子指南
 - [ ] 为链接添加图标
-- [ ] 多语言支持
+- [ ] ~~多语言支持~~
 - [ ] 部署在独立域名和服务器上
 - [ ] 增加搜索功能（也许）
 
@@ -86,11 +87,12 @@ Actions 应自动运行 python 脚本以生成
 
 ## 致谢
 
-- 项目通过 [Vue 3](https://vuejs.org/) + [TypeScript](https://www.typescriptlang.org/) 构建。
-- 猫猫动画的作者是 [TouNeko](https://codepen.io/touneko)。
-- 本项目思路来源于 [ZJUers轻首页](https://zjuers.com/)。
-- 一些功能思路来源于 [BYR-Navi](https://github.com/BYR-Navi/BYR-Navi)。
-- 全部代码由我独立完成。
+- 项目使用 [Vue 3](https://vuejs.org/) + [TypeScript](https://www.typescriptlang.org/) 构建
+- 猫猫动画的原作者是 [TouNeko](https://codepen.io/touneko)
+- 暗黑模式按钮的原作者是 [MarvinRudolph](https://codepen.io/MarvinRudolph)
+- 本项目思路来源于 [ZJUers轻首页](https://zjuers.com/)
+- 一些功能思路来源于 [BYR-Navi](https://github.com/BYR-Navi/BYR-Navi)
+- 全部代码由我独立完成
 
 ---
 

components.d.ts

@@ -16,6 +16,7 @@ declare module 'vue' {
     ElFooter: typeof import('element-plus/es')['ElFooter']
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElMain: typeof import('element-plus/es')['ElMain']
+    ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSpace: typeof import('element-plus/es')['ElSpace']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']

src/views/about.vue

@@ -1,9 +1,31 @@
 <script lang="ts" setup>
 
+
+import {useRouter} from "vue-router";
+
+const router = useRouter()
+const goBack = () => {
+  router.push('/index')
+}
+
 </script>
 
 <template>
-  <p>Aboyt test</p>
+  <el-page-header @back="goBack">
+    <template #content>
+      <span> About </span>
+    </template>
+  </el-page-header>
+  <el-container class="container">
+    <el-main>
+      <el-card>
+        <div class="about">
+          <p>CSU-Index is a navigation that provides a list of useful links for students of Central South
+            University.</p>
+        </div>
+      </el-card>
+    </el-main>
+  </el-container>
 </template>
 
 <style scoped>