8 місяців тому · 337f2a1022
--- 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 @@
 
																+扬州大运河-洪泽湖黑陶展
															
--- 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>洪泽湖黑陶展</title>
															
 
																+  </head>
															
 
																+  <body>
															
 
																+    <div id="app"></div>
															
 
																+    <script type="module" src="/src/main.js"></script>
															
 
																+  </body>
															
 
																+</html>
															
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -0,0 +1,8 @@
 
																+{
															
 
																+  "compilerOptions": {
															
 
																+    "paths": {
															
 
																+      "@/*": ["./src/*"]
															
 
																+    }
															
 
																+  },
															
 
																+  "exclude": ["node_modules", "dist"]
															
 
																+}
															
--- a/package.json
+++ b/package.json
@@ -0,0 +1,24 @@
 
																+{
															
 
																+  "name": "hongze-lake-exhibition",
															
 
																+  "version": "0.0.0",
															
 
																+  "private": true,
															
 
																+  "type": "module",
															
 
																+  "scripts": {
															
 
																+    "dev": "vite",
															
 
																+    "build": "vite build",
															
 
																+    "preview": "vite preview"
															
 
																+  },
															
 
																+  "dependencies": {
															
 
																+    "amfe-flexible": "^2.2.1",
															
 
																+    "pinia": "^2.2.6",
															
 
																+    "vue": "^3.5.13",
															
 
																+    "vue-router": "^4.4.5"
															
 
																+  },
															
 
																+  "devDependencies": {
															
 
																+    "@vitejs/plugin-vue": "^5.2.1",
															
 
																+    "postcss-pxtorem": "^6.1.0",
															
 
																+    "sass": "^1.82.0",
															
 
																+    "vite": "^6.0.1",
															
 
																+    "vite-plugin-vue-devtools": "^7.6.5"
															
 
																+  }
															
 
																+}
															
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,26 @@
 
																+<script setup>
															
 
																+import { RouterView } from "vue-router";
															
 
																+</script>
															
 
																+
															
 
																+<template>
															
 
																+  <RouterView />
															
 
																+</template>
															
 
																+
															
 
																+<style>
															
 
																+:root {
															
 
																+  --design-width: 1920;
															
 
																+  --design-height: 1080;
															
 
																+}
															
 
																+
															
 
																+.chapter__bg {
															
 
																+  display: block;
															
 
																+  width: 100%;
															
 
																+}
															
 
																+
															
 
																+@media screen and (max-width: 768px) {
															
 
																+  :root {
															
 
																+    --design-width: 750;
															
 
																+    --design-height: 1624;
															
 
																+  }
															
 
																+}
															
 
																+</style>
															
--- a/src/assets/fonts/SOURCEHANSERIFCN-BOLD.OTF
+++ b/src/assets/fonts/SOURCEHANSERIFCN-BOLD.OTF
--- a/src/assets/fonts/SOURCEHANSERIFCN-REGULAR.OTF
+++ b/src/assets/fonts/SOURCEHANSERIFCN-REGULAR.OTF
--- a/src/assets/images/bg-min.jpg
+++ b/src/assets/images/bg-min.jpg
--- a/src/assets/images/bg/BG_01-min.jpg
+++ b/src/assets/images/bg/BG_01-min.jpg
--- a/src/assets/images/bg/BG_02-min.jpg
+++ b/src/assets/images/bg/BG_02-min.jpg
--- a/src/assets/images/bg/BG_03-min.jpg
+++ b/src/assets/images/bg/BG_03-min.jpg
--- a/src/assets/images/bg/BG_04-min.jpg
+++ b/src/assets/images/bg/BG_04-min.jpg
--- a/src/assets/images/bg/BG_05-min.jpg
+++ b/src/assets/images/bg/BG_05-min.jpg
--- a/src/assets/images/bg/BG_06-min.jpg
+++ b/src/assets/images/bg/BG_06-min.jpg
--- a/src/assets/images/bg2-min.png
+++ b/src/assets/images/bg2-min.png
--- a/src/assets/images/bg3-min.png
+++ b/src/assets/images/bg3-min.png
--- a/src/assets/images/bg4-min.png
+++ b/src/assets/images/bg4-min.png
--- a/src/assets/images/chapter-card-min.png
+++ b/src/assets/images/chapter-card-min.png
--- a/src/assets/images/chapter-img-min.png
+++ b/src/assets/images/chapter-img-min.png
--- a/src/assets/images/chapter-img2-min.png
+++ b/src/assets/images/chapter-img2-min.png
--- a/src/assets/images/chapter-label-bg-min.png
+++ b/src/assets/images/chapter-label-bg-min.png
--- a/src/assets/images/chapter1-min.png
+++ b/src/assets/images/chapter1-min.png
--- a/src/assets/images/h1-min.png
+++ b/src/assets/images/h1-min.png
--- a/src/assets/images/h2-min.png
+++ b/src/assets/images/h2-min.png
--- a/src/assets/images/h3-min.png
+++ b/src/assets/images/h3-min.png
--- a/src/assets/images/h4-min.png
+++ b/src/assets/images/h4-min.png
--- a/src/assets/images/label-bg-min.png
+++ b/src/assets/images/label-bg-min.png
--- a/src/assets/images/logo-min.png
+++ b/src/assets/images/logo-min.png
--- a/src/assets/images/logo2-min.png
+++ b/src/assets/images/logo2-min.png
--- a/src/assets/images/mb-bg-min.jpg
+++ b/src/assets/images/mb-bg-min.jpg
--- a/src/assets/images/preface-min.png
+++ b/src/assets/images/preface-min.png
--- a/src/assets/images/title-min.png
+++ b/src/assets/images/title-min.png
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -0,0 +1,111 @@
 
																+:root {
															
 
																+  --z-index-normal: 1;
															
 
																+  --z-index-top: 1000;
															
 
																+  --z-index-popper: 2000;
															
 
																+  --z-hot-popper: 3000;
															
 
																+}
															
 
																+
															
 
																+body,
															
 
																+ol,
															
 
																+ul,
															
 
																+h1,
															
 
																+h2,
															
 
																+h3,
															
 
																+h4,
															
 
																+h5,
															
 
																+h6,
															
 
																+p,
															
 
																+th,
															
 
																+td,
															
 
																+dl,
															
 
																+dd,
															
 
																+form,
															
 
																+fieldset,
															
 
																+legend,
															
 
																+input,
															
 
																+textarea,
															
 
																+select {
															
 
																+  margin: 0;
															
 
																+  padding: 0;
															
 
																+}
															
 
																+* {
															
 
																+  box-sizing: border-box;
															
 
																+  user-select: none;
															
 
																+}
															
 
																+body {
															
 
																+  color: #333333;
															
 
																+  font-family: "SourceHanSerifSC-Regular";
															
 
																+  -webkit-tap-highlight-color: transparent;
															
 
																+}
															
 
																+a {
															
 
																+  color: #fff;
															
 
																+  cursor: pointer;
															
 
																+  text-decoration: none;
															
 
																+}
															
 
																+em {
															
 
																+  font-style: normal;
															
 
																+}
															
 
																+li {
															
 
																+  list-style: none;
															
 
																+}
															
 
																+img {
															
 
																+  border: 0;
															
 
																+  vertical-align: middle;
															
 
																+}
															
 
																+table {
															
 
																+  border-collapse: collapse;
															
 
																+  border-spacing: 0;
															
 
																+}
															
 
																+p {
															
 
																+  word-wrap: break-word;
															
 
																+}
															
 
																+iframe {
															
 
																+  border: none;
															
 
																+}
															
 
																+
															
 
																+@font-face {
															
 
																+  font-family: "SourceHanSerifSC-Bold";
															
 
																+  src: url("./fonts/SOURCEHANSERIFCN-BOLD.otf");
															
 
																+}
															
 
																+@font-face {
															
 
																+  font-family: "SourceHanSerifSC-Regular";
															
 
																+  src: url("./fonts/SOURCEHANSERIFCN-REGULAR.otf");
															
 
																+}
															
 
																+
															
 
																+.limit-line {
															
 
																+  display: -webkit-box;
															
 
																+  overflow: hidden;
															
 
																+  text-overflow: ellipsis;
															
 
																+  -webkit-line-clamp: 1;
															
 
																+  -webkit-box-orient: vertical;
															
 
																+  word-break: break-all;
															
 
																+  word-wrap: break-word;
															
 
																+}
															
 
																+
															
 
																+.line-2 {
															
 
																+  -webkit-line-clamp: 2;
															
 
																+}
															
 
																+
															
 
																+.line-3 {
															
 
																+  -webkit-line-clamp: 3;
															
 
																+}
															
 
																+
															
 
																+.hidden {
															
 
																+  display: none !important;
															
 
																+  visibility: hidden !important;
															
 
																+}
															
 
																+
															
 
																+.darkGlass {
															
 
																+  background-color: rgba(0, 0, 0, 0.5);
															
 
																+}
															
 
																+
															
 
																+.message-outer {
															
 
																+  position: absolute;
															
 
																+  display: table;
															
 
																+  height: 100%;
															
 
																+  width: 100%;
															
 
																+
															
 
																+  * {
															
 
																+    transition: all 0.3s;
															
 
																+  }
															
 
																+}
															
--- a/src/assets/utils.scss
+++ b/src/assets/utils.scss
@@ -0,0 +1,7 @@
 
																+@function vh-calc($num) {

															
 
																+  @return calc(100vh * ($num / var(--design-height)));

															
 
																+}

															
 
																+

															
 
																+@function vw-calc($num) {

															
 
																+  @return calc(100vw * ($num / var(--design-width)));

															
 
																+}

															
--- a/src/data.json
+++ b/src/data.json
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,15 @@
 
																+import "./assets/main.css";
															
 
																+
															
 
																+// import 'amfe-flexible'
															
 
																+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.js
+++ b/src/router/index.js
@@ -0,0 +1,19 @@
 
																+import { createRouter, createWebHashHistory } from "vue-router";
															
 
																+
															
 
																+const router = createRouter({
															
 
																+  history: createWebHashHistory(import.meta.env.BASE_URL),
															
 
																+  routes: [
															
 
																+    {
															
 
																+      path: "/",
															
 
																+      name: "home",
															
 
																+      component: () => import("../views/Home/index.vue"),
															
 
																+    },
															
 
																+    {
															
 
																+      path: "/index",
															
 
																+      name: "index",
															
 
																+      component: () => import("../views/Index/index.vue"),
															
 
																+    },
															
 
																+  ],
															
 
																+});
															
 
																+
															
 
																+export default router;
															
--- a/src/stores/counter.js
+++ b/src/stores/counter.js
@@ -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/Home/index.scss
+++ b/src/views/Home/index.scss
@@ -0,0 +1,217 @@
 
																+@use "@/assets/utils.scss";

															
 
																+

															
 
																+.home {

															
 
																+  width: 100vw;

															
 
																+  height: 100vh;

															
 
																+  overflow: hidden;

															
 
																+

															
 
																+  &-header {

															
 
																+    display: flex;

															
 
																+    align-items: center;

															
 
																+    padding: 0 utils.vh-calc(30);

															
 
																+    height: utils.vh-calc(80);

															
 
																+    background: #404a4c;

															
 
																+  }

															
 
																+  &-wrap {

															
 
																+    position: relative;

															
 
																+    width: 100%;

															
 
																+    height: calc(100vh - utils.vh-calc(80));

															
 
																+    background: url("@/assets/images/bg-min.jpg") no-repeat center / cover;

															
 
																+

															
 
																+    &::after {

															
 
																+      content: "";

															
 
																+      position: absolute;

															
 
																+      right: utils.vh-calc(-330);

															
 
																+      bottom: utils.vh-calc(-70);

															
 
																+      width: utils.vh-calc(663);

															
 
																+      height: utils.vh-calc(1002);

															
 
																+      background: url("@/assets/images/bg3-min.png") no-repeat center / contain;

															
 
																+    }

															
 
																+    &::before {

															
 
																+      content: "";

															
 
																+      position: absolute;

															
 
																+      top: utils.vh-calc(29);

															
 
																+      left: 50%;

															
 
																+      width: utils.vh-calc(467);

															
 
																+      height: utils.vh-calc(263);

															
 
																+      transform: translateX(calc(-50% + 100px));

															
 
																+      background: url("@/assets/images/bg2-min.png") no-repeat center / contain;

															
 
																+    }

															
 
																+  }

															
 
																+  &__title {

															
 
																+    position: absolute;

															
 
																+    top: utils.vh-calc(7);

															
 
																+    left: utils.vh-calc(90);

															
 
																+    width: utils.vh-calc(550);

															
 
																+    height: utils.vh-calc(553);

															
 
																+  }

															
 
																+  &-info {

															
 
																+    position: absolute;

															
 
																+    top: utils.vh-calc(143);

															
 
																+    right: utils.vh-calc(230);

															
 
																+    text-align: right;

															
 
																+    font-size: utils.vh-calc(24);

															
 
																+    line-height: utils.vh-calc(30);

															
 
																+

															
 
																+    &__label {

															
 
																+      font-family: "SourceHanSerifSC-Bold";

															
 
																+    }

															
 
																+    &__text {

															
 
																+      font-size: utils.vh-calc(18);

															
 
																+    }

															
 
																+    p:nth-child(3) {

															
 
																+      margin-top: utils.vh-calc(50);

															
 
																+    }

															
 
																+  }

															
 
																+  &-nav {

															
 
																+    position: absolute;

															
 
																+    left: utils.vw-calc(360);

															
 
																+    right: utils.vw-calc(360);

															
 
																+    bottom: utils.vh-calc(115);

															
 
																+    display: flex;

															
 
																+    align-items: center;

															
 
																+    justify-content: space-between;

															
 
																+    gap: utils.vw-calc(275);

															
 
																+    z-index: 1;

															
 
																+

															
 
																+    &__item {

															
 
																+      position: relative;

															
 
																+      cursor: pointer;

															
 
																+

															
 
																+      &:nth-child(1) img {

															
 
																+        bottom: utils.vh-calc(-40);

															
 
																+        margin-left: utils.vh-calc(5);

															
 
																+      }

															
 
																+      &:nth-child(2) img {

															
 
																+        bottom: utils.vh-calc(-60);

															
 
																+        margin-left: utils.vh-calc(10);

															
 
																+      }

															
 
																+      &:nth-child(3) img {

															
 
																+        bottom: utils.vh-calc(-60);

															
 
																+        margin-left: utils.vh-calc(36);

															
 
																+      }

															
 
																+      &:nth-child(4) img {

															
 
																+        bottom: utils.vh-calc(-75);

															
 
																+        margin-left: utils.vh-calc(5);

															
 
																+      }

															
 
																+      img {

															
 
																+        position: absolute;

															
 
																+        left: 50%;

															
 
																+        bottom: 0;

															
 
																+        transform: translateX(-50%);

															
 
																+        z-index: 1;

															
 
																+      }

															
 
																+      span {

															
 
																+        display: block;

															
 
																+        padding-top: utils.vh-calc(9);

															
 
																+        width: utils.vh-calc(46);

															
 
																+        height: utils.vh-calc(158);

															
 
																+        color: #000000;

															
 
																+        text-align: center;

															
 
																+        line-height: utils.vh-calc(30);

															
 
																+        font-size: utils.vh-calc(24);

															
 
																+        font-family: "SourceHanSerifSC-Bold";

															
 
																+        background: url("@/assets/images/label-bg-min.png") no-repeat center /

															
 
																+          contain;

															
 
																+        box-sizing: border-box;

															
 
																+      }

															
 
																+    }

															
 
																+  }

															
 
																+}

															
 
																+

															
 
																+@media screen and (max-width: 768px) {

															
 
																+  .home {

															
 
																+    &-header {

															
 
																+      padding: 0 utils.vh-calc(20);

															
 
																+      height: utils.vh-calc(80);

															
 
																+

															
 
																+      img {

															
 
																+        width: utils.vh-calc(226);

															
 
																+        height: utils.vh-calc(42);

															
 
																+      }

															
 
																+    }

															
 
																+    &-wrap {

															
 
																+      height: calc(100vh - utils.vh-calc(80));

															
 
																+      background-image: url("@/assets/images/mb-bg-min.jpg");

															
 
																+

															
 
																+      &::after {

															
 
																+        top: utils.vh-calc(420);

															
 
																+        left: 0;

															
 
																+        right: unset;

															
 
																+        bottom: unset;

															
 
																+        width: utils.vh-calc(281);

															
 
																+        height: utils.vh-calc(971);

															
 
																+        background-image: url("@/assets/images/bg4-min.png");

															
 
																+      }

															
 
																+      &::before {

															
 
																+        top: utils.vh-calc(428);

															
 
																+        left: unset;

															
 
																+        right: utils.vw-calc(24);

															
 
																+        width: utils.vh-calc(467);

															
 
																+        height: utils.vh-calc(263);

															
 
																+        transform: none;

															
 
																+      }

															
 
																+    }

															
 
																+    &__title {

															
 
																+      top: utils.vh-calc(47);

															
 
																+      left: 50%;

															
 
																+      width: utils.vw-calc(432);

															
 
																+      height: utils.vw-calc(435);

															
 
																+      transform: translateX(-50%);

															
 
																+      z-index: 1;

															
 
																+    }

															
 
																+    &-info {

															
 
																+      top: utils.vh-calc(666);

															
 
																+      right: utils.vw-calc(106);

															
 
																+      font-size: utils.vh-calc(32);

															
 
																+      line-height: utils.vh-calc(40);

															
 
																+

															
 
																+      &__text {

															
 
																+        font-size: utils.vh-calc(24);

															
 
																+      }

															
 
																+      p:nth-child(3) {

															
 
																+        margin-top: utils.vh-calc(38);

															
 
																+      }

															
 
																+    }

															
 
																+    &-nav {

															
 
																+      left: utils.vw-calc(70);

															
 
																+      right: utils.vw-calc(70);

															
 
																+      bottom: utils.vh-calc(240);

															
 
																+      gap: utils.vw-calc(142);

															
 
																+

															
 
																+      &__item {

															
 
																+        &:nth-child(1) img {

															
 
																+          bottom: utils.vh-calc(-68);

															
 
																+          margin-left: utils.vh-calc(5);

															
 
																+          width: utils.vw-calc(160);

															
 
																+          height: utils.vw-calc(100);

															
 
																+        }

															
 
																+        &:nth-child(2) img {

															
 
																+          bottom: utils.vh-calc(-60);

															
 
																+          margin-left: utils.vh-calc(10);

															
 
																+          width: utils.vw-calc(185);

															
 
																+          height: utils.vw-calc(162);

															
 
																+        }

															
 
																+        &:nth-child(3) img {

															
 
																+          bottom: utils.vh-calc(-60);

															
 
																+          margin-left: utils.vh-calc(36);

															
 
																+          width: utils.vw-calc(75);

															
 
																+          height: utils.vw-calc(160);

															
 
																+        }

															
 
																+        &:nth-child(4) img {

															
 
																+          bottom: utils.vh-calc(-75);

															
 
																+          margin-left: utils.vh-calc(5);

															
 
																+          width: utils.vw-calc(147);

															
 
																+          height: utils.vw-calc(98);

															
 
																+        }

															
 
																+        span {

															
 
																+          padding-top: utils.vh-calc(15);

															
 
																+          width: utils.vw-calc(46);

															
 
																+          height: utils.vw-calc(158);

															
 
																+          line-height: utils.vh-calc(32);

															
 
																+          font-size: utils.vw-calc(24);

															
 
																+        }

															
 
																+      }

															
 
																+    }

															
 
																+  }

															
 
																+}

															
--- a/src/views/Home/index.vue
+++ b/src/views/Home/index.vue
@@ -0,0 +1,47 @@
 
																+<template>

															
 
																+  <div class="home">

															
 
																+    <div class="home-header">

															
 
																+      <img draggable="false" src="@/assets/images/logo-min.png" />

															
 
																+    </div>

															
 
																+    <div class="home-wrap">

															
 
																+      <img

															
 
																+        class="home__title"

															
 
																+        draggable="false"

															
 
																+        src="@/assets/images/title-min.png"

															
 
																+      />

															
 
																+

															
 
																+      <div class="home-info">

															
 
																+        <p class="home-info__label">主办单位</p>

															
 
																+        <p class="home-info__text">中国大运河博物馆</p>

															
 
																+

															
 
																+        <p class="home-info__label">支持单位</p>

															
 
																+        <p class="home-info__text">

															
 
																+          江苏省泗洪洪泽湖湿地国家级自然保护区管理处

															
 
																+        </p>

															
 
																+      </div>

															
 
																+

															
 
																+      <ul class="home-nav">

															
 
																+        <li class="home-nav__item">

															
 
																+          <img draggable="false" src="@/assets/images/h1-min.png" />

															
 
																+          <span>因运而生</span>

															
 
																+        </li>

															
 
																+        <li class="home-nav__item">

															
 
																+          <img draggable="false" src="@/assets/images/h2-min.png" />

															
 
																+          <span>碧波飞羽</span>

															
 
																+        </li>

															
 
																+        <li class="home-nav__item">

															
 
																+          <img draggable="false" src="@/assets/images/h3-min.png" />

															
 
																+          <span>水域绿茵</span>

															
 
																+        </li>

															
 
																+        <li class="home-nav__item">

															
 
																+          <img draggable="false" src="@/assets/images/h4-min.png" />

															
 
																+          <span>涟漪之下</span>

															
 
																+        </li>

															
 
																+      </ul>

															
 
																+    </div>

															
 
																+  </div>

															
 
																+</template>

															
 
																+

															
 
																+<style lang="scss" scoped>

															
 
																+@use "./index.scss";

															
 
																+</style>

															
--- a/src/views/Index/components/Chapter1/index.scss
+++ b/src/views/Index/components/Chapter1/index.scss
@@ -0,0 +1,75 @@
 
																+@use "@/assets/utils.scss";

															
 
																+

															
 
																+.chapter1 {

															
 
																+  position: relative;

															
 
																+

															
 
																+  &-wrap {

															
 
																+    position: absolute;

															
 
																+    top: 0;

															
 
																+    left: 0;

															
 
																+    right: 0;

															
 
																+    bottom: 0;

															
 
																+    z-index: 1;

															
 
																+  }

															
 
																+  &__title {

															
 
																+    position: absolute;

															
 
																+    top: utils.vw-calc(90);

															
 
																+    left: utils.vw-calc(83);

															
 
																+    width: utils.vw-calc(580);

															
 
																+    height: utils.vw-calc(605);

															
 
																+  }

															
 
																+  &::after {

															
 
																+    content: "";

															
 
																+    position: absolute;

															
 
																+    top: utils.vw-calc(98);

															
 
																+    right: utils.vw-calc(85);

															
 
																+    width: utils.vw-calc(190);

															
 
																+    height: utils.vw-calc(597);

															
 
																+    background: url("@/assets/images/chapter-img2-min.png") center / contain;

															
 
																+  }

															
 
																+  &-card {

															
 
																+    position: absolute;

															
 
																+    display: flex;

															
 
																+    flex-direction: column;

															
 
																+    align-items: center;

															
 
																+    top: utils.vw-calc(815);

															
 
																+    left: 50%;

															
 
																+    width: utils.vw-calc(1621);

															
 
																+    height: utils.vw-calc(2092);

															
 
																+    transform: translateX(-50%);

															
 
																+    background: url("@/assets/images/chapter-card-min.png") center / contain;

															
 
																+

															
 
																+    &-info {

															
 
																+      display: flex;

															
 
																+      align-items: center;

															
 
																+      padding: utils.vw-calc(206) utils.vw-calc(185) utils.vw-calc(259);

															
 
																+      gap: utils.vw-calc(82);

															
 
																+      font-size: utils.vw-calc(24);

															
 
																+      text-indent: 2em;

															
 
																+      line-height: utils.vw-calc(36);

															
 
																+

															
 
																+      img {

															
 
																+        width: utils.vw-calc(487);

															
 
																+        height: utils.vw-calc(487);

															
 
																+      }

															
 
																+    }

															
 
																+    &-nav {

															
 
																+      display: inline-flex;

															
 
																+      align-items: center;

															
 
																+

															
 
																+      &-item {

															
 
																+        padding-top: utils.vw-calc(100);

															
 
																+        width: utils.vw-calc(345);

															
 
																+        height: utils.vw-calc(793);

															
 
																+        line-height: utils.vw-calc(432);

															
 
																+        font-family: "SourceHanSerifSC-Bold";

															
 
																+        font-size: utils.vw-calc(44);

															
 
																+        writing-mode: vertical-lr;

															
 
																+        letter-spacing: utils.vw-calc(4);

															
 
																+        cursor: pointer;

															
 
																+        background: url("@/assets/images/chapter-label-bg-min.png") center /

															
 
																+          contain;

															
 
																+      }

															
 
																+    }

															
 
																+  }

															
 
																+}

															
--- a/src/views/Index/components/Chapter1/index.vue
+++ b/src/views/Index/components/Chapter1/index.vue
@@ -0,0 +1,43 @@
 
																+<template>

															
 
																+  <div class="chapter1">

															
 
																+    <div class="chapter1-wrap">

															
 
																+      <img

															
 
																+        class="chapter1__title"

															
 
																+        draggable="false"

															
 
																+        src="@/assets/images/chapter1-min.png"

															
 
																+      />

															
 
																+

															
 
																+      <div class="chapter1-card">

															
 
																+        <div class="chapter1-card-info">

															
 
																+          <img draggable="false" src="@/assets/images/chapter-img-min.png" />

															
 
																+          <p>{{ data.chapter1.description }}</p>

															
 
																+        </div>

															
 
																+

															
 
																+        <div class="chapter1-card-nav">

															
 
																+          <p class="chapter1-card-nav-item">

															
 
																+            炀帝南下&nbsp;&nbsp;&nbsp;&nbsp;洪泽初名

															
 
																+          </p>

															
 
																+          <p class="chapter1-card-nav-item">

															
 
																+            炀帝南下&nbsp;&nbsp;&nbsp;&nbsp;洪泽初名

															
 
																+          </p>

															
 
																+          <p class="chapter1-card-nav-item">

															
 
																+            炀帝南下&nbsp;&nbsp;&nbsp;&nbsp;洪泽初名

															
 
																+          </p>

															
 
																+          <p class="chapter1-card-nav-item">

															
 
																+            炀帝南下&nbsp;&nbsp;&nbsp;&nbsp;洪泽初名

															
 
																+          </p>

															
 
																+        </div>

															
 
																+      </div>

															
 
																+    </div>

															
 
																+

															
 
																+    <img class="chapter__bg" src="@/assets/images/bg/BG_02-min.jpg" />

															
 
																+  </div>

															
 
																+</template>

															
 
																+

															
 
																+<script setup>

															
 
																+import data from "@/data.json";

															
 
																+</script>

															
 
																+

															
 
																+<style lang="scss" scoped>

															
 
																+@use "./index.scss";

															
 
																+</style>

															
--- a/src/views/Index/components/Chapter2/images/chapter2-btn-min.png
+++ b/src/views/Index/components/Chapter2/images/chapter2-btn-min.png
--- a/src/views/Index/components/Chapter2/images/chapter2-card-bg-min.png
+++ b/src/views/Index/components/Chapter2/images/chapter2-card-bg-min.png
--- a/src/views/Index/components/Chapter2/images/chapter2-img-min.png
+++ b/src/views/Index/components/Chapter2/images/chapter2-img-min.png
--- a/src/views/Index/components/Chapter2/images/chapter2-img2-min.png
+++ b/src/views/Index/components/Chapter2/images/chapter2-img2-min.png
--- a/src/views/Index/components/Chapter2/images/chapter2-img3-min.png
+++ b/src/views/Index/components/Chapter2/images/chapter2-img3-min.png
--- a/src/views/Index/components/Chapter2/images/chapter2-img4-min.png
+++ b/src/views/Index/components/Chapter2/images/chapter2-img4-min.png
--- a/src/views/Index/components/Chapter2/images/chapter2-img5-min.png
+++ b/src/views/Index/components/Chapter2/images/chapter2-img5-min.png
--- a/src/views/Index/components/Chapter2/images/chapter2-img6-min.png
+++ b/src/views/Index/components/Chapter2/images/chapter2-img6-min.png
--- a/src/views/Index/components/Chapter2/images/chapter2-img7-min.png
+++ b/src/views/Index/components/Chapter2/images/chapter2-img7-min.png
--- a/src/views/Index/components/Chapter2/images/label-min.png
+++ b/src/views/Index/components/Chapter2/images/label-min.png
--- a/src/views/Index/components/Chapter2/images/title2-min.png
+++ b/src/views/Index/components/Chapter2/images/title2-min.png
--- a/src/views/Index/components/Chapter2/index.scss
+++ b/src/views/Index/components/Chapter2/index.scss
@@ -0,0 +1,57 @@
 
																+@use "@/assets/utils.scss";

															
 
																+

															
 
																+.chapter2 {

															
 
																+  position: relative;

															
 
																+  font-size: utils.vw-calc(24);

															
 
																+

															
 
																+  &-wrap {

															
 
																+    position: absolute;

															
 
																+    top: 0;

															
 
																+    left: 0;

															
 
																+    right: 0;

															
 
																+    bottom: 0;

															
 
																+    z-index: 1;

															
 
																+  }

															
 
																+  &__title {

															
 
																+    position: absolute;

															
 
																+    top: utils.vw-calc(170);

															
 
																+    right: utils.vw-calc(92);

															
 
																+    width: utils.vw-calc(592);

															
 
																+    height: utils.vw-calc(612);

															
 
																+  }

															
 
																+  &::after {

															
 
																+    content: "";

															
 
																+    position: absolute;

															
 
																+    top: utils.vw-calc(170);

															
 
																+    left: utils.vw-calc(88);

															
 
																+    width: utils.vw-calc(192);

															
 
																+    height: utils.vw-calc(588);

															
 
																+    background: url("./images/chapter2-img-min.png") no-repeat center / contain;

															
 
																+  }

															
 
																+  &-card {

															
 
																+    position: absolute;

															
 
																+    top: utils.vw-calc(1110);

															
 
																+    left: 50%;

															
 
																+    width: utils.vw-calc(1785);

															
 
																+    height: utils.vw-calc(772);

															
 
																+    transform: translateX(-50%);

															
 
																+    background: url("./images/chapter2-card-bg-min.png") no-repeat center /

															
 
																+      contain;

															
 
																+

															
 
																+    &__content {

															
 
																+      position: absolute;

															
 
																+      top: utils.vw-calc(144);

															
 
																+      left: utils.vw-calc(82);

															
 
																+      width: utils.vw-calc(688);

															
 
																+      text-indent: 2em;

															
 
																+      line-height: utils.vw-calc(36);

															
 
																+    }

															
 
																+    > img {

															
 
																+      position: absolute;

															
 
																+      top: utils.vw-calc(89);

															
 
																+      right: utils.vw-calc(166);

															
 
																+      width: utils.vw-calc(706);

															
 
																+      height: utils.vw-calc(595);

															
 
																+    }

															
 
																+  }

															
 
																+}

															
--- a/src/views/Index/components/Chapter2/index.vue
+++ b/src/views/Index/components/Chapter2/index.vue
@@ -0,0 +1,30 @@
 
																+<template>

															
 
																+  <div class="chapter2">

															
 
																+    <div class="chapter2-wrap">

															
 
																+      <img

															
 
																+        class="chapter2__title"

															
 
																+        draggable="false"

															
 
																+        src="./images/title2-min.png"

															
 
																+      />

															
 
																+

															
 
																+      <div class="chapter2-card">

															
 
																+        <div

															
 
																+          class="chapter2-card__content"

															
 
																+          v-html="data.chapter2.description"

															
 
																+        />

															
 
																+

															
 
																+        <img src="./images/chapter2-img2-min.png" />

															
 
																+      </div>

															
 
																+    </div>

															
 
																+

															
 
																+    <img class="chapter__bg" src="@/assets/images/bg/BG_03-min.jpg" />

															
 
																+  </div>

															
 
																+</template>

															
 
																+

															
 
																+<script setup>

															
 
																+import data from "@/data.json";

															
 
																+</script>

															
 
																+

															
 
																+<style lang="scss" scoped>

															
 
																+@use "./index.scss";

															
 
																+</style>

															
--- a/src/views/Index/components/Chapter3/index.scss
+++ b/src/views/Index/components/Chapter3/index.scss
@@ -0,0 +1,10 @@
 
																+.chapter3 {

															
 
																+  &-wrap {

															
 
																+    position: absolute;

															
 
																+    top: 0;

															
 
																+    left: 0;

															
 
																+    right: 0;

															
 
																+    bottom: 0;

															
 
																+    z-index: 1;

															
 
																+  }

															
 
																+}

															
--- a/src/views/Index/components/Chapter3/index.vue
+++ b/src/views/Index/components/Chapter3/index.vue
@@ -0,0 +1,11 @@
 
																+<template>

															
 
																+  <div class="chapter3">

															
 
																+    <div class="chapter3-wrap"></div>

															
 
																+

															
 
																+    <img class="chapter__bg" src="@/assets/images/bg/BG_04-min.jpg" />

															
 
																+  </div>

															
 
																+</template>

															
 
																+

															
 
																+<style lang="scss" scoped>

															
 
																+@use "./index.scss";

															
 
																+</style>

															
--- a/src/views/Index/components/Chapter4/index.scss
+++ b/src/views/Index/components/Chapter4/index.scss
@@ -0,0 +1,10 @@
 
																+.chapter4 {

															
 
																+  &-wrap {

															
 
																+    position: absolute;

															
 
																+    top: 0;

															
 
																+    left: 0;

															
 
																+    right: 0;

															
 
																+    bottom: 0;

															
 
																+    z-index: 1;

															
 
																+  }

															
 
																+}

															
--- a/src/views/Index/components/Chapter4/index.vue
+++ b/src/views/Index/components/Chapter4/index.vue
@@ -0,0 +1,11 @@
 
																+<template>

															
 
																+  <div class="chapter4">

															
 
																+    <div class="chapter4-wrap"></div>

															
 
																+

															
 
																+    <img class="chapter__bg" src="@/assets/images/bg/BG_05-min.jpg" />

															
 
																+  </div>

															
 
																+</template>

															
 
																+

															
 
																+<style lang="scss" scoped>

															
 
																+@use "./index.scss";

															
 
																+</style>

															
--- a/src/views/Index/components/Epilogue/index.scss
+++ b/src/views/Index/components/Epilogue/index.scss
@@ -0,0 +1,10 @@
 
																+.epilogue {

															
 
																+  &-wrap {

															
 
																+    position: absolute;

															
 
																+    top: 0;

															
 
																+    left: 0;

															
 
																+    right: 0;

															
 
																+    bottom: 0;

															
 
																+    z-index: 1;

															
 
																+  }

															
 
																+}

															
--- a/src/views/Index/components/Epilogue/index.vue
+++ b/src/views/Index/components/Epilogue/index.vue
@@ -0,0 +1,11 @@
 
																+<template>

															
 
																+  <div class="epilogue">

															
 
																+    <div class="epilogue-wrap"></div>

															
 
																+

															
 
																+    <img class="chapter__bg" src="@/assets/images/bg/BG_06-min.jpg" />

															
 
																+  </div>

															
 
																+</template>

															
 
																+

															
 
																+<style lang="scss" scoped>

															
 
																+@use "./index.scss";

															
 
																+</style>

															
--- a/src/views/Index/components/Preface/index.scss
+++ b/src/views/Index/components/Preface/index.scss
@@ -0,0 +1,123 @@
 
																+@use "@/assets/utils.scss";

															
 
																+

															
 
																+.mt50 {

															
 
																+  margin-top: utils.vw-calc(50);

															
 
																+}

															
 
																+

															
 
																+.preface {

															
 
																+  position: relative;

															
 
																+

															
 
																+  &-wrap {

															
 
																+    position: absolute;

															
 
																+    top: 0;

															
 
																+    left: 0;

															
 
																+    right: 0;

															
 
																+    bottom: 0;

															
 
																+    z-index: 1;

															
 
																+  }

															
 
																+  &__logo {

															
 
																+    position: absolute;

															
 
																+    top: utils.vw-calc(109);

															
 
																+    left: utils.vw-calc(90);

															
 
																+    width: utils.vw-calc(226);

															
 
																+    height: utils.vw-calc(42);

															
 
																+  }

															
 
																+  &-info {

															
 
																+    position: absolute;

															
 
																+    top: utils.vw-calc(298);

															
 
																+    left: utils.vw-calc(90);

															
 
																+    font-size: utils.vw-calc(18);

															
 
																+    line-height: utils.vw-calc(30);

															
 
																+

															
 
																+    &__label {

															
 
																+      font-family: "SourceHanSerifSC-Bold";

															
 
																+      font-size: utils.vw-calc(24);

															
 
																+    }

															
 
																+  }

															
 
																+  &__title {

															
 
																+    position: absolute;

															
 
																+    top: utils.vw-calc(270);

															
 
																+    right: utils.vw-calc(94);

															
 
																+    width: utils.vw-calc(550);

															
 
																+    height: utils.vw-calc(553);

															
 
																+  }

															
 
																+  &::before {

															
 
																+    content: "";

															
 
																+    position: absolute;

															
 
																+    top: utils.vw-calc(767);

															
 
																+    left: utils.vw-calc(346);

															
 
																+    width: utils.vw-calc(142);

															
 
																+    height: utils.vw-calc(325);

															
 
																+    background: url("@/assets/images/preface-min.png") no-repeat center /

															
 
																+      contain;

															
 
																+  }

															
 
																+  &-content {

															
 
																+    position: absolute;

															
 
																+    top: utils.vw-calc(928);

															
 
																+    right: utils.vw-calc(392);

															
 
																+    width: utils.vw-calc(688);

															
 
																+    font-size: utils.vw-calc(24);

															
 
																+    line-height: utils.vw-calc(36);

															
 
																+    text-indent: 2em;

															
 
																+    color: #0c0c0c;

															
 
																+

															
 
																+    ::v-deep(p:not(:first-child)) {

															
 
																+      margin-top: utils.vw-calc(16);

															
 
																+    }

															
 
																+    > div:not(:first-child) {

															
 
																+      margin-top: utils.vw-calc(50);

															
 
																+    }

															
 
																+  }

															
 
																+}

															
 
																+

															
 
																+@media screen and (max-width: 768px) {

															
 
																+  .mt50 {

															
 
																+    margin-top: utils.vw-calc(25);

															
 
																+  }

															
 
																+

															
 
																+  .preface {

															
 
																+    &__logo {

															
 
																+      top: utils.vw-calc(21);

															
 
																+      left: utils.vw-calc(20);

															
 
																+      width: utils.vw-calc(226);

															
 
																+      height: utils.vw-calc(42);

															
 
																+    }

															
 
																+    &-info {

															
 
																+      top: utils.vw-calc(205);

															
 
																+      left: utils.vw-calc(24);

															
 
																+      font-size: utils.vw-calc(18);

															
 
																+      line-height: utils.vw-calc(30);

															
 
																+

															
 
																+      &__label {

															
 
																+        font-size: utils.vw-calc(24);

															
 
																+      }

															
 
																+    }

															
 
																+    &__title {

															
 
																+      top: utils.vw-calc(298);

															
 
																+      right: utils.vw-calc(55);

															
 
																+      width: utils.vw-calc(276);

															
 
																+      height: utils.vw-calc(276);

															
 
																+    }

															
 
																+    &::before {

															
 
																+      top: utils.vw-calc(452);

															
 
																+      left: utils.vw-calc(163);

															
 
																+      width: utils.vw-calc(68);

															
 
																+      height: utils.vw-calc(156);

															
 
																+    }

															
 
																+    &-content {

															
 
																+      top: utils.vw-calc(690);

															
 
																+      left: utils.vw-calc(90);

															
 
																+      right: utils.vw-calc(85);

															
 
																+      width: unset;

															
 
																+      font-size: utils.vw-calc(18);

															
 
																+      line-height: utils.vw-calc(36);

															
 
																+

															
 
																+      ::v-deep(p:not(:first-child)) {

															
 
																+        margin-top: utils.vw-calc(10);

															
 
																+      }

															
 
																+      > div:not(:first-child) {

															
 
																+        margin-top: utils.vw-calc(40);

															
 
																+      }

															
 
																+    }

															
 
																+  }

															
 
																+}

															
--- a/src/views/Index/components/Preface/index.vue
+++ b/src/views/Index/components/Preface/index.vue
@@ -0,0 +1,43 @@
 
																+<template>

															
 
																+  <div class="preface">

															
 
																+    <div class="preface-wrap">

															
 
																+      <img

															
 
																+        class="preface__logo"

															
 
																+        draggable="false"

															
 
																+        src="@/assets/images/logo2-min.png"

															
 
																+      />

															
 
																+

															
 
																+      <div class="preface-info">

															
 
																+        <p class="preface-info__label">主办单位</p>

															
 
																+        <p class="preface-info__text">中国大运河博物馆</p>

															
 
																+

															
 
																+        <p class="preface-info__label mt50">支持单位</p>

															
 
																+        <p class="preface-info__text">

															
 
																+          江苏省泗洪洪泽湖湿地国家级自然保护区管理处

															
 
																+        </p>

															
 
																+      </div>

															
 
																+

															
 
																+      <img

															
 
																+        class="preface__title"

															
 
																+        draggable="false"

															
 
																+        src="@/assets/images/title-min.png"

															
 
																+      />

															
 
																+

															
 
																+      <div class="preface-content">

															
 
																+        <template v-for="item in data.preface.content">

															
 
																+          <div v-html="item" />

															
 
																+        </template>

															
 
																+      </div>

															
 
																+    </div>

															
 
																+

															
 
																+    <img class="chapter__bg" src="@/assets/images/bg/BG_01-min.jpg" />

															
 
																+  </div>

															
 
																+</template>

															
 
																+

															
 
																+<script setup>

															
 
																+import data from "@/data.json";

															
 
																+</script>

															
 
																+

															
 
																+<style lang="scss" scoped>

															
 
																+@use "./index.scss";

															
 
																+</style>

															
--- a/src/views/Index/index.vue
+++ b/src/views/Index/index.vue
@@ -0,0 +1,21 @@
 
																+<template>

															
 
																+  <div class="index">

															
 
																+    <Preface />

															
 
																+    <Chapter1 />

															
 
																+    <Chapter2 />

															
 
																+    <Chapter3 />

															
 
																+    <Chapter4 />

															
 
																+    <Epilogue />

															
 
																+  </div>

															
 
																+</template>

															
 
																+

															
 
																+<script setup>

															
 
																+import Preface from "./components/Preface/index.vue";

															
 
																+import Chapter1 from "./components/Chapter1/index.vue";

															
 
																+import Chapter2 from "./components/Chapter2/index.vue";

															
 
																+import Chapter3 from "./components/Chapter3/index.vue";

															
 
																+import Chapter4 from "./components/Chapter4/index.vue";

															
 
																+import Epilogue from "./components/Epilogue/index.vue";

															
 
																+</script>

															
 
																+

															
 
																+<style lang="scss" scoped></style>

															
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,26 @@
 
																+import { fileURLToPath, URL } from "node:url";
															
 
																+
															
 
																+import { defineConfig } from "vite";
															
 
																+import vue from "@vitejs/plugin-vue";
															
 
																+// import postCssPxToRem from "postcss-pxtorem";
															
 
																+
															
 
																+// https://vite.dev/config/
															
 
																+export default defineConfig({
															
 
																+  plugins: [vue()],
															
 
																+  // css: {
															
 
																+  //   postcss: {
															
 
																+  //     plugins: [
															
 
																+  //       postCssPxToRem({
															
 
																+  //         rootValue: 75,
															
 
																+  //         propList: ["*"],
															
 
																+  //         exclude: ["/node_modules"],
															
 
																+  //       }),
															
 
																+  //     ],
															
 
																+  //   },
															
 
																+  // },
															
 
																+  resolve: {
															
 
																+    alias: {
															
 
																+      "@": fileURLToPath(new URL("./src", import.meta.url)),
															
 
																+    },
															
 
																+  },
															
 
																+});