2 周之前 · aeb5150260
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,30 @@
 
				+# Logs
			
 
				+logs
			
 
				+*.log
			
 
				+npm-debug.log*
			
 
				+yarn-debug.log*
			
 
				+yarn-error.log*
			
 
				+pnpm-debug.log*
			
 
				+lerna-debug.log*
			
 
				+
			
 
				+node_modules
			
 
				+.DS_Store
			
 
				+dist
			
 
				+dist-ssr
			
 
				+coverage
			
 
				+*.local
			
 
				+
			
 
				+/cypress/videos/
			
 
				+/cypress/screenshots/
			
 
				+
			
 
				+# Editor directories and files
			
 
				+.vscode/*
			
 
				+!.vscode/extensions.json
			
 
				+.idea
			
 
				+*.suo
			
 
				+*.ntvs*
			
 
				+*.njsproj
			
 
				+*.sln
			
 
				+*.sw?
			
 
				+
			
 
				+*.tsbuildinfo
			
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -0,0 +1,3 @@
 
				+{
			
 
				+  "recommendations": ["Vue.volar"]
			
 
				+}
			
--- a/README.md
+++ b/README.md
@@ -0,0 +1,33 @@
 
				+# mingnan-website
			
 
				+
			
 
				+This template should help get you started developing with Vue 3 in Vite.
			
 
				+
			
 
				+## Recommended IDE Setup
			
 
				+
			
 
				+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
			
 
				+
			
 
				+## Type Support for `.vue` Imports in TS
			
 
				+
			
 
				+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
			
 
				+
			
 
				+## Customize configuration
			
 
				+
			
 
				+See [Vite Configuration Reference](https://vite.dev/config/).
			
 
				+
			
 
				+## Project Setup
			
 
				+
			
 
				+```sh
			
 
				+npm install
			
 
				+```
			
 
				+
			
 
				+### Compile and Hot-Reload for Development
			
 
				+
			
 
				+```sh
			
 
				+npm run dev
			
 
				+```
			
 
				+
			
 
				+### Type-Check, Compile and Minify for Production
			
 
				+
			
 
				+```sh
			
 
				+npm run build
			
 
				+```
			
--- a/env.d.ts
+++ b/env.d.ts
@@ -0,0 +1 @@
 
				+/// <reference types="vite/client" />
			
--- a/index.html
+++ b/index.html
@@ -0,0 +1,13 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="">
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <link rel="icon" href="/favicon.ico">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Vite App</title>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <div id="app"></div>
			
 
				+    <script type="module" src="/src/main.ts"></script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,33 @@
 
				+{
			
 
				+  "name": "mingnan-website",
			
 
				+  "version": "0.0.0",
			
 
				+  "private": true,
			
 
				+  "type": "module",
			
 
				+  "scripts": {
			
 
				+    "dev": "vite",
			
 
				+    "build": "run-p type-check \"build-only {@}\" --",
			
 
				+    "preview": "vite preview",
			
 
				+    "build-only": "vite build",
			
 
				+    "type-check": "vue-tsc --build"
			
 
				+  },
			
 
				+  "dependencies": {
			
 
				+    "bootstrap": "^5.3.0",
			
 
				+    "pinia": "^3.0.1",
			
 
				+    "vue": "^3.5.13",
			
 
				+    "vue-router": "^4.5.0",
			
 
				+    "vue3-carousel": "^0.15.0"
			
 
				+  },
			
 
				+  "devDependencies": {
			
 
				+    "@tsconfig/node22": "^22.0.1",
			
 
				+    "@types/node": "^22.14.0",
			
 
				+    "@vitejs/plugin-vue": "^5.2.3",
			
 
				+    "@vitejs/plugin-vue-jsx": "^4.1.2",
			
 
				+    "@vue/tsconfig": "^0.7.0",
			
 
				+    "npm-run-all2": "^7.0.2",
			
 
				+    "sass": "^1.87.0",
			
 
				+    "typescript": "~5.8.0",
			
 
				+    "vite": "^6.2.4",
			
 
				+    "vite-plugin-vue-devtools": "^7.7.2",
			
 
				+    "vue-tsc": "^2.2.8"
			
 
				+  }
			
 
				+}
			
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,14 @@
 
				+<template>
			
 
				+  <NavBar />
			
 
				+  <main>
			
 
				+    <RouterView />
			
 
				+  </main>
			
 
				+  <Footer />
			
 
				+</template>
			
 
				+
			
 
				+<script setup lang="ts">
			
 
				+import { RouterLink, RouterView } from 'vue-router'
			
 
				+import NavBar from './components/NavBar.vue';
			
 
				+import Footer from './components/Footer.vue';
			
 
				+
			
 
				+</script>
			
--- a/src/assets/fonts/Impact.ttf
+++ b/src/assets/fonts/Impact.ttf
--- a/src/assets/fonts/Impact.woff
+++ b/src/assets/fonts/Impact.woff
--- a/src/assets/fonts/Impact.woff2
+++ b/src/assets/fonts/Impact.woff2
--- a/src/assets/fonts/STSongti-SC-Black.ttf
+++ b/src/assets/fonts/STSongti-SC-Black.ttf
--- a/src/assets/fonts/STSongti-SC-Black.woff
+++ b/src/assets/fonts/STSongti-SC-Black.woff
--- a/src/assets/fonts/STSongti-SC-Black.woff2
+++ b/src/assets/fonts/STSongti-SC-Black.woff2
--- a/src/assets/fonts/SourceHanSerifCN-Bold.otf
+++ b/src/assets/fonts/SourceHanSerifCN-Bold.otf
--- a/src/assets/fonts/SourceHanSerifCN-Bold.ttf
+++ b/src/assets/fonts/SourceHanSerifCN-Bold.ttf
--- a/src/assets/fonts/SourceHanSerifCN-Bold.woff
+++ b/src/assets/fonts/SourceHanSerifCN-Bold.woff
--- a/src/assets/fonts/SourceHanSerifCN-Bold.woff2
+++ b/src/assets/fonts/SourceHanSerifCN-Bold.woff2
--- a/src/assets/fonts/nzgrRuyinZouZhangKai.ttf
+++ b/src/assets/fonts/nzgrRuyinZouZhangKai.ttf
--- a/src/assets/fonts/nzgrRuyinZouZhangKai.woff
+++ b/src/assets/fonts/nzgrRuyinZouZhangKai.woff
--- a/src/assets/fonts/nzgrRuyinZouZhangKai.woff2
+++ b/src/assets/fonts/nzgrRuyinZouZhangKai.woff2
--- a/src/assets/images/Bg1.png
+++ b/src/assets/images/Bg1.png
--- a/src/assets/images/Bg2.png
+++ b/src/assets/images/Bg2.png
--- a/src/assets/images/Icon@2x.png
+++ b/src/assets/images/Icon@2x.png
--- a/src/assets/images/LargeTitle1.png
+++ b/src/assets/images/LargeTitle1.png
--- a/src/assets/images/LargeTitle2.png
+++ b/src/assets/images/LargeTitle2.png
--- a/src/assets/images/LargeTitle3.png
+++ b/src/assets/images/LargeTitle3.png
--- a/src/assets/images/LogoIcon.png
+++ b/src/assets/images/LogoIcon.png
--- a/src/assets/images/TitleMiniHeader.png
+++ b/src/assets/images/TitleMiniHeader.png
--- a/src/assets/images/footer/FooterPrinting.png
+++ b/src/assets/images/footer/FooterPrinting.png
--- a/src/assets/images/footer/GonganLogo.png
+++ b/src/assets/images/footer/GonganLogo.png
--- a/src/assets/images/index/Box1.png
+++ b/src/assets/images/index/Box1.png
--- a/src/assets/images/index/Box2.png
+++ b/src/assets/images/index/Box2.png
--- a/src/assets/images/index/Box3.png
+++ b/src/assets/images/index/Box3.png
--- a/src/assets/images/index/BoxPrinting1.png
+++ b/src/assets/images/index/BoxPrinting1.png
--- a/src/assets/images/index/BoxPrinting2.png
+++ b/src/assets/images/index/BoxPrinting2.png
--- a/src/assets/images/index/BoxPrinting4.png
+++ b/src/assets/images/index/BoxPrinting4.png
--- a/src/assets/images/index/ButtonMore.png
+++ b/src/assets/images/index/ButtonMore.png
--- a/src/assets/images/index/IntrodLeft.png
+++ b/src/assets/images/index/IntrodLeft.png
--- a/src/assets/images/index/IntrodRight.png
+++ b/src/assets/images/index/IntrodRight.png
--- a/src/assets/images/placeholder/Large.jpg
+++ b/src/assets/images/placeholder/Large.jpg
--- a/src/assets/images/placeholder/Large2.jpg
+++ b/src/assets/images/placeholder/Large2.jpg
--- a/src/assets/images/placeholder/Midium.jpg
+++ b/src/assets/images/placeholder/Midium.jpg
--- a/src/assets/scss/colors.scss
+++ b/src/assets/scss/colors.scss
@@ -0,0 +1,4 @@
 
				+$primary-color: #bd4b36;
			
 
				+$text-color: #333;
			
 
				+$text-second-color: #6d6d6d;
			
 
				+$selection-max-width: 1250px;
			
--- a/src/assets/scss/components.scss
+++ b/src/assets/scss/components.scss
@@ -0,0 +1,22 @@
 
				+@use "./colors.scss" as *;
			
 
				+
			
 
				+.simple-carousel2-left-right {
			
 
				+  display: flex;
			
 
				+  flex-direction: row;
			
 
				+  align-items: center;
			
 
				+  justify-content: space-between;
			
 
				+  width: 100px;
			
 
				+  margin-top: 40px;
			
 
				+
			
 
				+  div {
			
 
				+    width: 30px;
			
 
				+    height: 30px;
			
 
				+    font-size: 25px;
			
 
				+    text-align: center;
			
 
				+    line-height: 30px;
			
 
				+    cursor: pointer;
			
 
				+    -webkit-user-select: none;
			
 
				+    user-select: none;
			
 
				+    color: $primary-color;
			
 
				+  }
			
 
				+}
			
--- a/src/assets/scss/fix.scss
+++ b/src/assets/scss/fix.scss
@@ -0,0 +1,7 @@
 
				+.carousel-light {
			
 
				+  --vc-nav-color: #fff;
			
 
				+  --vc-clr-primary: #fff;
			
 
				+  --vc-clr-secondary: #cfcfcf7f;
			
 
				+  --vc-clr-white: #333333;
			
 
				+  --vc-pgn-active-color: var(--vc-clr-primary)
			
 
				+}
			
--- a/src/assets/scss/fonts.scss
+++ b/src/assets/scss/fonts.scss
@@ -0,0 +1,32 @@
 
				+@font-face {
			
 
				+  font-family: nzgrRuyinZouZhangKai;
			
 
				+  src: 
			
 
				+    url('@/assets/fonts/nzgrRuyinZouZhangKai.woff') format('woff')
			
 
				+    url('@/assets/fonts/nzgrRuyinZouZhangKai.ttf') format('truetype')
			
 
				+    url('@/assets/fonts/nzgrRuyinZouZhangKai.woff2') format('woff2');
			
 
				+  font-weight: normal;
			
 
				+}
			
 
				+@font-face {
			
 
				+  font-family: STSongtiSCBlack;
			
 
				+  src: 
			
 
				+    url('@/assets/fonts/STSongti-SC-Black.woff') format('woff') 
			
 
				+    url('@/assets/fonts/STSongti-SC-Black.ttf') format('truetype')
			
 
				+    url('@/assets/fonts/STSongti-SC-Black.woff2') format('woff2');
			
 
				+  font-weight: normal;
			
 
				+}
			
 
				+@font-face {
			
 
				+  font-family: Impact;
			
 
				+  src: 
			
 
				+    url('@/assets/fonts/Impact.woff') format('woff') 
			
 
				+    url('@/assets/fonts/Impact.ttf') format('truetype')
			
 
				+    url('@/assets/fonts/Impact.woff2') format('woff2');
			
 
				+  font-weight: normal;
			
 
				+}
			
 
				+@font-face {
			
 
				+  font-family: SourceHanSerifCNBold;
			
 
				+  src: 
			
 
				+    url('@/assets/fonts/SourceHanSerifCN-Bold.woff') format('woff') 
			
 
				+    //url('@/assets/fonts/SourceHanSerifCN-Bold.ttf') format('truetype')
			
 
				+    ;//url('@/assets/fonts/SourceHanSerifCN-Bold.woff2') format('woff2');
			
 
				+  font-weight: normal;
			
 
				+}
			
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -0,0 +1,176 @@
 
				+@use "./fonts.scss";
			
 
				+@use "./fix.scss";
			
 
				+@use "./components.scss";
			
 
				+@use "./colors.scss" as *;
			
 
				+
			
 
				+body,
			
 
				+html {
			
 
				+  font-size: 16px;
			
 
				+  font-weight: normal;  
			
 
				+  margin: 0;
			
 
				+  padding: 0;
			
 
				+  color: $text-color;
			
 
				+}
			
 
				+main {
			
 
				+
			
 
				+}
			
 
				+
			
 
				+//Header
			
 
				+
			
 
				+.main-header-box {
			
 
				+  position: relative;
			
 
				+  width: 100%;
			
 
				+  min-height: 600px;
			
 
				+  background-color: $primary-color;
			
 
				+
			
 
				+  img {
			
 
				+    position: absolute;
			
 
				+    top: 0;
			
 
				+    left: 0;
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    object-fit: cover;
			
 
				+    z-index: 0;
			
 
				+  }
			
 
				+}
			
 
				+.main-center-text {
			
 
				+  position: absolute;
			
 
				+  top: 50%;
			
 
				+  left: 50%;
			
 
				+  transform: translate(-50%, -50%);
			
 
				+  text-align: center;
			
 
				+}
			
 
				+
			
 
				+//Utitles
			
 
				+
			
 
				+.main-background {
			
 
				+  background-size: 100% auto;
			
 
				+  background-repeat: repeat;
			
 
				+  background-position: center;
			
 
				+
			
 
				+  &-type1 {
			
 
				+    background-image: url('@/assets/images/Bg1.png');;
			
 
				+  }
			
 
				+  &-type2 {
			
 
				+    background-image: url('@/assets/images/Bg2.png');;
			
 
				+  }
			
 
				+  &-type3 {
			
 
				+    background-image: url('@/assets/images/index/IntrodRight.png');;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+//Boxs
			
 
				+
			
 
				+.main-news-box {
			
 
				+  position: relative;
			
 
				+  padding: 24px;
			
 
				+  background-color: #fff;
			
 
				+  background-size: cover;
			
 
				+  background-position: center;
			
 
				+  width: 400px;
			
 
				+  height: 270px;
			
 
				+  margin-right: 24px;
			
 
				+
			
 
				+  &::before {
			
 
				+    content: '';
			
 
				+    display: block;
			
 
				+    position: absolute;
			
 
				+    right: 0;
			
 
				+    left: 0;
			
 
				+    bottom: 0;
			
 
				+    height: 120px;
			
 
				+    background: linear-gradient(
			
 
				+      180deg,
			
 
				+      rgba(#000, 0) 0%,
			
 
				+      rgba(#000, 0.5) 100%
			
 
				+    )
			
 
				+  }
			
 
				+
			
 
				+  .desc {
			
 
				+    position: absolute;
			
 
				+    right: 0;
			
 
				+    left: 0;
			
 
				+    bottom: 0;
			
 
				+    display: flex;
			
 
				+    flex-direction: column;
			
 
				+    padding: 24px;
			
 
				+    color: #fff;
			
 
				+
			
 
				+    h5 {
			
 
				+      font-family: SourceHanSerifCNBold;
			
 
				+      font-size: 1.1rem;
			
 
				+      margin-bottom: 5px;
			
 
				+    }
			
 
				+    p {
			
 
				+      font-size: 0.8rem;
			
 
				+      margin: 0;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+//Section
			
 
				+
			
 
				+.main-section {
			
 
				+  position: relative;
			
 
				+  padding: 120px 100px;
			
 
				+
			
 
				+
			
 
				+  h2 {
			
 
				+    display: flex;
			
 
				+    flex-direction: row;
			
 
				+    align-items: center;
			
 
				+    margin: 0;
			
 
				+    font-size: 2rem;
			
 
				+    font-family: SourceHanSerifCNBold;
			
 
				+
			
 
				+    &::after, &::before {
			
 
				+      content: '';
			
 
				+      display: inline-block;
			
 
				+      width: 20px;
			
 
				+      height: 20px;
			
 
				+      background-size: 20px;
			
 
				+      background-image: url('@/assets/images/TitleMiniHeader.png');
			
 
				+    }
			
 
				+    &::after {
			
 
				+      margin-left: 10px;
			
 
				+    } 
			
 
				+    &::before {
			
 
				+      margin-right: 10px;
			
 
				+    }
			
 
				+  }
			
 
				+  
			
 
				+  .content {
			
 
				+    max-width: $selection-max-width;
			
 
				+    margin: 0 auto;
			
 
				+
			
 
				+    .title {
			
 
				+
			
 
				+      display: flex;
			
 
				+      flex-direction: row;
			
 
				+      align-items: center;
			
 
				+      justify-content: center;
			
 
				+
			
 
				+      margin-bottom: 40px;
			
 
				+
			
 
				+      &.left-right {
			
 
				+        justify-content: space-between;
			
 
				+      }
			
 
				+
			
 
				+      .small-more {
			
 
				+        display: flex;
			
 
				+        flex-direction: row;
			
 
				+        align-items: center;
			
 
				+        font-size: 0.9rem;
			
 
				+        color: $text-second-color;
			
 
				+        cursor: pointer;
			
 
				+        -webkit-user-select: none;
			
 
				+        user-select: none;
			
 
				+
			
 
				+        img {
			
 
				+          width: 80px;
			
 
				+          margin-left: 20px;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -0,0 +1,91 @@
 
				+<template>
			
 
				+  <footer class="main-footer">
			
 
				+    <div>
			
 
				+      <div class="row">
			
 
				+        <div class="col-sm-12 col-md-6">
			
 
				+          <div class="logo">
			
 
				+            <img src="@/assets/images/LogoIcon.png" />
			
 
				+            <h2>闽南(厦门)文化生态保护区</h2>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+        <div class="col-sm-12 col-md-6">
			
 
				+          <div class="d-block links text-end">
			
 
				+            <span>友情链接：</span>
			
 
				+            <a href="#">厦门市文化馆</a>
			
 
				+            <a href="#">厦门市图书馆</a>
			
 
				+            <a href="#">厦门市博物馆</a>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      <div class="row">
			
 
				+        <div class="links">
			
 
				+          <a href="#"><img src="@/assets/images/footer/GonganLogo.png" />闽公网安备 44040202000131号</a>
			
 
				+          <a href="#">闽ICP备09020130号</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </footer>
			
 
				+</template>
			
 
				+
			
 
				+<script setup lang="ts">
			
 
				+
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss">
			
 
				+@use '@/assets/scss/colors.scss' as *;
			
 
				+
			
 
				+.main-footer {
			
 
				+  background-color: $primary-color;
			
 
				+  color: #fff;
			
 
				+
			
 
				+  > div {
			
 
				+    padding: 60px 55px;
			
 
				+    background-image: url("@/assets/images/footer/FooterPrinting.png");
			
 
				+    background-position: bottom 0 right 11px;
			
 
				+    background-repeat: no-repeat;
			
 
				+    background-size: 533px;
			
 
				+  }
			
 
				+
			
 
				+  .logo {
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    margin-bottom: 10px;
			
 
				+    font-family: nzgrRuyinZouZhangKai;
			
 
				+    margin-bottom: 48px;
			
 
				+
			
 
				+    h2 {
			
 
				+      margin: 0;
			
 
				+    }
			
 
				+    img {
			
 
				+      width: 30px;
			
 
				+      height: 30px;
			
 
				+      margin-right: 10px;
			
 
				+    }
			
 
				+  }
			
 
				+  .links {
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+  }
			
 
				+
			
 
				+  span {
			
 
				+    font-size: 0.9rem;
			
 
				+    margin-right: 40px;
			
 
				+  }
			
 
				+
			
 
				+  a {
			
 
				+    text-decoration: none;
			
 
				+    color: #F9EDD3;
			
 
				+    font-size: 0.9rem;
			
 
				+    margin-right: 40px;
			
 
				+
			
 
				+    &:hover {
			
 
				+      color: #fff;
			
 
				+    }
			
 
				+
			
 
				+    img {
			
 
				+      margin-right: 10px;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -0,0 +1,134 @@
 
				+<template>
			
 
				+  <nav 
			
 
				+    :class="[
			
 
				+      scrollValue > 200 ? 'nav-scrolled' : 'nav-not-scrolled',
			
 
				+    ]"
			
 
				+  >
			
 
				+    <div class="group">
			
 
				+      <RouterLink to="/">首页</RouterLink>
			
 
				+      <RouterLink to="/news">资讯动态</RouterLink>
			
 
				+      <RouterLink to="/introduction">文化概况</RouterLink>
			
 
				+      <RouterLink to="/inheritor">保护传承</RouterLink>
			
 
				+    </div>
			
 
				+    <div class="group">
			
 
				+      <div class="headerlogos">
			
 
				+        <img src="@/assets/images/LogoIcon.png" />
			
 
				+        <div>
			
 
				+          <p class="large">闽南文化生态保护区<span>(厦门市)</span></p>
			
 
				+          <p>Minnan Cultural Ecological Protection Area</p>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="group">
			
 
				+      <RouterLink to="/communicate">传播交流</RouterLink>
			
 
				+      <RouterLink to="/research">理论研究</RouterLink>
			
 
				+      <RouterLink to="/fusion">文旅融合</RouterLink>
			
 
				+      <RouterLink to="/about">关于我们</RouterLink> 
			
 
				+    </div>
			
 
				+  </nav>
			
 
				+</template>
			
 
				+
			
 
				+<script setup lang="ts">
			
 
				+import { onBeforeUnmount, onMounted, ref } from 'vue';
			
 
				+
			
 
				+const scrollValue = ref(0);
			
 
				+
			
 
				+function onScroll() {
			
 
				+  scrollValue.value = window.scrollY;
			
 
				+}
			
 
				+
			
 
				+onMounted(() => {
			
 
				+  window.addEventListener('scroll', onScroll);
			
 
				+});
			
 
				+onBeforeUnmount(() => {
			
 
				+  window.removeEventListener('scroll', onScroll);
			
 
				+});
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss">
			
 
				+@use '@/assets/scss/colors.scss' as *;
			
 
				+
			
 
				+nav {
			
 
				+  $nav-height: 65px;
			
 
				+
			
 
				+  position: fixed;
			
 
				+  display: flex;
			
 
				+  justify-content: space-around;
			
 
				+  align-items: center;
			
 
				+  z-index: 100;
			
 
				+  width: 100%;
			
 
				+  height: $nav-height;
			
 
				+  background-color: transparent;
			
 
				+  border-bottom: 1px solid rgba(#fff, 0.2);
			
 
				+  color: #fff;
			
 
				+  transition: all ease-in-out 0.3s;
			
 
				+
			
 
				+  &.nav-scrolled {
			
 
				+    background-color: $primary-color;
			
 
				+  }
			
 
				+
			
 
				+  .group {
			
 
				+    display: flex;
			
 
				+    gap: 1rem; 
			
 
				+
			
 
				+    a {
			
 
				+      color: rgba(#fff, 0.8);
			
 
				+      width: 100px;
			
 
				+      height: $nav-height;
			
 
				+      line-height: $nav-height;
			
 
				+      text-align: center;
			
 
				+      text-decoration: none;
			
 
				+
			
 
				+      &:focus {
			
 
				+        outline: none;
			
 
				+      }
			
 
				+      &.router-link-active, &.router-link-exact-active, &:hover {
			
 
				+        color: #fff;
			
 
				+      }
			
 
				+      &.router-link-exact-active {
			
 
				+        font-weight: bold;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+  }
			
 
				+  .headerlogos {
			
 
				+    display: flex;
			
 
				+    flex-direction: row;
			
 
				+    align-items: center;
			
 
				+
			
 
				+    img {
			
 
				+      width: 45px;
			
 
				+      height: 45px; 
			
 
				+      margin-right: 10px;
			
 
				+    }
			
 
				+    > div {
			
 
				+      display: flex;
			
 
				+      flex-direction: column;
			
 
				+      justify-content: center;
			
 
				+      font-family: nzgrRuyinZouZhangKai;
			
 
				+      margin-bottom: 6px;
			
 
				+
			
 
				+      p {
			
 
				+        margin: 0;
			
 
				+        font-size: 1rem;
			
 
				+        height: 20px;
			
 
				+
			
 
				+        span {
			
 
				+          font-size: 1rem;
			
 
				+          margin-left: 10px;
			
 
				+        }
			
 
				+        &.large {
			
 
				+          height: 33px;
			
 
				+          font-size: 1.8rem;
			
 
				+          letter-spacing: -0.1rem;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+@media (min-width: 1024px) {
			
 
				+ 
			
 
				+}
			
 
				+</style>
			
--- a/src/main.ts
+++ b/src/main.ts
@@ -0,0 +1,19 @@
 
				+
			
 
				+import 'bootstrap/dist/css/bootstrap.css'
			
 
				+import 'bootstrap/dist/css/bootstrap-grid.css'
			
 
				+import 'bootstrap/dist/css/bootstrap-utilities.css'
			
 
				+import './assets/scss/main.scss'
			
 
				+import 'vue3-carousel/carousel.css'
			
 
				+
			
 
				+import { createApp } from 'vue'
			
 
				+import { createPinia } from 'pinia'
			
 
				+
			
 
				+import App from './App.vue'
			
 
				+import router from './router'
			
 
				+
			
 
				+const app = createApp(App)
			
 
				+
			
 
				+app.use(createPinia())
			
 
				+app.use(router)
			
 
				+
			
 
				+app.mount('#app')
			
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -0,0 +1,33 @@
 
				+import { createRouter, createWebHistory } from 'vue-router'
			
 
				+import HomeView from '../views/HomeView.vue'
			
 
				+import NotFoundView from '../views/NotFoundView.vue'
			
 
				+
			
 
				+const router = createRouter({
			
 
				+  history: createWebHistory(import.meta.env.BASE_URL),
			
 
				+  routes: [
			
 
				+    {
			
 
				+      path: '/',
			
 
				+      name: 'home',
			
 
				+      component: HomeView,
			
 
				+    },
			
 
				+    {
			
 
				+      path: '/about',
			
 
				+      name: 'about',
			
 
				+      // route level code-splitting
			
 
				+      // this generates a separate chunk (About.[hash].js) for this route
			
 
				+      // which is lazy-loaded when the route is visited.
			
 
				+      component: () => import('../views/AboutView.vue'),
			
 
				+    },
			
 
				+    {
			
 
				+      path: '/404',
			
 
				+      name: 'NotFound',
			
 
				+      component: NotFoundView
			
 
				+    },
			
 
				+    {
			
 
				+      path: '/:pathMatch(.*)*', // 匹配所有不存在的路径
			
 
				+      redirect: '/404'
			
 
				+    }
			
 
				+  ],
			
 
				+})
			
 
				+
			
 
				+export default router
			
--- a/src/stores/counter.ts
+++ b/src/stores/counter.ts
@@ -0,0 +1,12 @@
 
				+import { ref, computed } from 'vue'
			
 
				+import { defineStore } from 'pinia'
			
 
				+
			
 
				+export const useCounterStore = defineStore('counter', () => {
			
 
				+  const count = ref(0)
			
 
				+  const doubleCount = computed(() => count.value * 2)
			
 
				+  function increment() {
			
 
				+    count.value++
			
 
				+  }
			
 
				+
			
 
				+  return { count, doubleCount, increment }
			
 
				+})
			
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -0,0 +1,15 @@
 
				+<template>
			
 
				+  <div class="about">
			
 
				+    <h1>This is an about page</h1>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<style>
			
 
				+@media (min-width: 1024px) {
			
 
				+  .about {
			
 
				+    min-height: 100vh;
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
--- a/src/views/NotFoundView.vue
+++ b/src/views/NotFoundView.vue
@@ -0,0 +1,15 @@
 
				+<template>
			
 
				+  <div class="about">
			
 
				+    <h1>This is an about page</h1>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<style>
			
 
				+@media (min-width: 1024px) {
			
 
				+  .about {
			
 
				+    min-height: 100vh;
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -0,0 +1,12 @@
 
				+{
			
 
				+  "extends": "@vue/tsconfig/tsconfig.dom.json",
			
 
				+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
			
 
				+  "exclude": ["src/**/__tests__/*"],
			
 
				+  "compilerOptions": {
			
 
				+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
			
 
				+
			
 
				+    "paths": {
			
 
				+      "@/*": ["./src/*"]
			
 
				+    }
			
 
				+  }
			
 
				+}
			
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,11 @@
 
				+{
			
 
				+  "files": [],
			
 
				+  "references": [
			
 
				+    {
			
 
				+      "path": "./tsconfig.node.json"
			
 
				+    },
			
 
				+    {
			
 
				+      "path": "./tsconfig.app.json"
			
 
				+    }
			
 
				+  ]
			
 
				+}
			
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,19 @@
 
				+{
			
 
				+  "extends": "@tsconfig/node22/tsconfig.json",
			
 
				+  "include": [
			
 
				+    "vite.config.*",
			
 
				+    "vitest.config.*",
			
 
				+    "cypress.config.*",
			
 
				+    "nightwatch.conf.*",
			
 
				+    "playwright.config.*",
			
 
				+    "eslint.config.*"
			
 
				+  ],
			
 
				+  "compilerOptions": {
			
 
				+    "noEmit": true,
			
 
				+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
			
 
				+
			
 
				+    "module": "ESNext",
			
 
				+    "moduleResolution": "Bundler",
			
 
				+    "types": ["node"]
			
 
				+  }
			
 
				+}
			
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,20 @@
 
				+import { fileURLToPath, URL } from 'node:url'
			
 
				+
			
 
				+import { defineConfig } from 'vite'
			
 
				+import vue from '@vitejs/plugin-vue'
			
 
				+import vueJsx from '@vitejs/plugin-vue-jsx'
			
 
				+import vueDevTools from 'vite-plugin-vue-devtools'
			
 
				+
			
 
				+// https://vite.dev/config/
			
 
				+export default defineConfig({
			
 
				+  plugins: [
			
 
				+    vue(),
			
 
				+    vueJsx(),
			
 
				+    vueDevTools(),
			
 
				+  ],
			
 
				+  resolve: {
			
 
				+    alias: {
			
 
				+      '@': fileURLToPath(new URL('./src', import.meta.url))
			
 
				+    },
			
 
				+  },
			
 
				+})