1 месяц назад · 67f4ffd276
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,24 @@
 
				+# Logs
			
 
				+logs
			
 
				+*.log
			
 
				+npm-debug.log*
			
 
				+yarn-debug.log*
			
 
				+yarn-error.log*
			
 
				+pnpm-debug.log*
			
 
				+lerna-debug.log*
			
 
				+
			
 
				+node_modules
			
 
				+dist
			
 
				+dist-ssr
			
 
				+*.local
			
 
				+
			
 
				+# Editor directories and files
			
 
				+.vscode/*
			
 
				+!.vscode/extensions.json
			
 
				+.idea
			
 
				+.DS_Store
			
 
				+*.suo
			
 
				+*.ntvs*
			
 
				+*.njsproj
			
 
				+*.sln
			
 
				+*.sw?
			
--- a/index.html
+++ b/index.html
@@ -0,0 +1,13 @@
 
				+<!doctype html>
			
 
				+<html lang="en">
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
			
 
				+    <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/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,22 @@
 
				+{
			
 
				+  "name": "lcbwg",
			
 
				+  "private": true,
			
 
				+  "version": "0.0.0",
			
 
				+  "type": "module",
			
 
				+  "scripts": {
			
 
				+    "dev": "vite",
			
 
				+    "build": "vite build",
			
 
				+    "preview": "vite preview"
			
 
				+  },
			
 
				+  "devDependencies": {
			
 
				+    "@vitejs/plugin-vue": "^6.0.7",
			
 
				+    "vite": "^8.1.1"
			
 
				+  },
			
 
				+  "dependencies": {
			
 
				+    "swiper": "^14.0.5",
			
 
				+    "vue": "^3.5.39",
			
 
				+    "vue-router": "^4.6.4",
			
 
				+    "vuex": "^4.1.0"
			
 
				+  },
			
 
				+  "packageManager": "pnpm@10.32.1+sha512.a706938f0e89ac1456b6563eab4edf1d1faf3368d1191fc5c59790e96dc918e4456ab2e67d613de1043d2e8c81f87303e6b40d4ffeca9df15ef1ad567348f2be"
			
 
				+}
			
--- a/public/favicon.svg
+++ b/public/favicon.svg
--- a/public/icons.svg
+++ b/public/icons.svg
--- a/public/static/data/data.json
+++ b/public/static/data/data.json
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,7 @@
 
				+<template>
			
 
				+  <div class="app-shell">
			
 
				+    <main class="main-content">
			
 
				+      <RouterView />
			
 
				+    </main>
			
 
				+  </div>
			
 
				+</template>
			
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,7 @@
 
				+import { createApp } from 'vue'
			
 
				+import App from './App.vue'
			
 
				+import router from './router'
			
 
				+import store from './store'
			
 
				+import './style.css'
			
 
				+
			
 
				+createApp(App).use(store).use(router).mount('#app')
			
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -0,0 +1,23 @@
 
				+import { createRouter, createWebHistory } from "vue-router";
			
 
				+import Home from "../views/Home.vue";
			
 
				+import List from "../views/List.vue";
			
 
				+
			
 
				+const routes = [
			
 
				+  {
			
 
				+    path: "/",
			
 
				+    name: "home",
			
 
				+    component: Home,
			
 
				+  },
			
 
				+  {
			
 
				+    path: "/list",
			
 
				+    name: "list",
			
 
				+    component: List,
			
 
				+  },
			
 
				+];
			
 
				+
			
 
				+const router = createRouter({
			
 
				+  history: createWebHistory(),
			
 
				+  routes,
			
 
				+});
			
 
				+
			
 
				+export default router;
			
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -0,0 +1,16 @@
 
				+import { createStore } from 'vuex'
			
 
				+
			
 
				+const store = createStore({
			
 
				+  state() {
			
 
				+    return {
			
 
				+      count: 0,
			
 
				+    }
			
 
				+  },
			
 
				+  mutations: {
			
 
				+    increment(state) {
			
 
				+      state.count += 1
			
 
				+    },
			
 
				+  },
			
 
				+})
			
 
				+
			
 
				+export default store
			
--- a/src/style.css
+++ b/src/style.css
@@ -0,0 +1,129 @@
 
				+* {
			
 
				+  box-sizing: border-box;
			
 
				+}
			
 
				+
			
 
				+body {
			
 
				+  margin: 0;
			
 
				+  min-width: 320px;
			
 
				+  min-height: 100vh;
			
 
				+  color: #1f2937;
			
 
				+  background: #f8fafc;
			
 
				+  font-family:
			
 
				+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
			
 
				+    sans-serif;
			
 
				+}
			
 
				+
			
 
				+a {
			
 
				+  color: inherit;
			
 
				+  text-decoration: none;
			
 
				+}
			
 
				+
			
 
				+h1 {
			
 
				+  margin: 0;
			
 
				+  color: #111827;
			
 
				+  font-size: 40px;
			
 
				+  line-height: 1.15;
			
 
				+  font-weight: 700;
			
 
				+  letter-spacing: 0;
			
 
				+}
			
 
				+
			
 
				+button {
			
 
				+  border: 0;
			
 
				+  border-radius: 6px;
			
 
				+  padding: 10px 16px;
			
 
				+  color: #ffffff;
			
 
				+  background: #2563eb;
			
 
				+  font: inherit;
			
 
				+  cursor: pointer;
			
 
				+}
			
 
				+
			
 
				+button:hover {
			
 
				+  background: #1d4ed8;
			
 
				+}
			
 
				+
			
 
				+.app-shell {
			
 
				+  min-height: 100vh;
			
 
				+}
			
 
				+
			
 
				+.site-header {
			
 
				+  display: flex;
			
 
				+  align-items: center;
			
 
				+  justify-content: space-between;
			
 
				+  gap: 24px;
			
 
				+  max-width: 1040px;
			
 
				+  margin: 0 auto;
			
 
				+  padding: 24px;
			
 
				+}
			
 
				+
			
 
				+.brand {
			
 
				+  color: #111827;
			
 
				+  font-size: 20px;
			
 
				+  font-weight: 800;
			
 
				+}
			
 
				+
			
 
				+.site-nav {
			
 
				+  display: flex;
			
 
				+  gap: 8px;
			
 
				+}
			
 
				+
			
 
				+.site-nav a {
			
 
				+  border-radius: 6px;
			
 
				+  padding: 8px 12px;
			
 
				+  color: #4b5563;
			
 
				+  font-weight: 600;
			
 
				+}
			
 
				+
			
 
				+.site-nav a.router-link-active {
			
 
				+  color: #1d4ed8;
			
 
				+  background: #dbeafe;
			
 
				+}
			
 
				+
			
 
				+.main-content {
			
 
				+  max-width: 1040px;
			
 
				+  margin: 0 auto;
			
 
				+  padding: 72px 24px;
			
 
				+}
			
 
				+
			
 
				+.page {
			
 
				+  max-width: 760px;
			
 
				+}
			
 
				+
			
 
				+.eyebrow {
			
 
				+  margin: 0 0 12px;
			
 
				+  color: #2563eb;
			
 
				+  font-size: 14px;
			
 
				+  font-weight: 800;
			
 
				+  letter-spacing: 0;
			
 
				+  text-transform: uppercase;
			
 
				+}
			
 
				+
			
 
				+.lead {
			
 
				+  margin: 20px 0 0;
			
 
				+  color: #4b5563;
			
 
				+  font-size: 18px;
			
 
				+  line-height: 1.7;
			
 
				+}
			
 
				+
			
 
				+.counter-panel {
			
 
				+  display: flex;
			
 
				+  align-items: center;
			
 
				+  gap: 16px;
			
 
				+  width: fit-content;
			
 
				+  margin-top: 32px;
			
 
				+  border: 1px solid #e5e7eb;
			
 
				+  border-radius: 8px;
			
 
				+  padding: 16px;
			
 
				+  background: #ffffff;
			
 
				+}
			
 
				+
			
 
				+@media (max-width: 640px) {
			
 
				+  .site-header,
			
 
				+  .counter-panel {
			
 
				+    align-items: flex-start;
			
 
				+    flex-direction: column;
			
 
				+  }
			
 
				+
			
 
				+  h1 {
			
 
				+    font-size: 32px;
			
 
				+  }
			
 
				+}
			
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -0,0 +1,7 @@
 
				+<template>
			
 
				+  <div>home</div>
			
 
				+</template>
			
 
				+<script setup>
			
 
				+import { ref, onMounted, nextTick } from "vue";
			
 
				+</script>
			
 
				+<style lang="scss" scoped></style>
			
--- a/src/views/List.vue
+++ b/src/views/List.vue
@@ -0,0 +1,90 @@
 
				+<template>
			
 
				+  <section class="list-page">
			
 
				+    <Swiper
			
 
				+      class="list-swiper"
			
 
				+      :modules="modules"
			
 
				+      :slides-per-view="3"
			
 
				+      :slides-per-group="1"
			
 
				+      :space-between="0"
			
 
				+      :speed="520"
			
 
				+      :loop="true"
			
 
				+      :mousewheel="mousewheelOptions"
			
 
				+      :simulate-touch="true"
			
 
				+      :grab-cursor="true"
			
 
				+      :watch-overflow="false"
			
 
				+    >
			
 
				+      <SwiperSlide
			
 
				+        v-for="(slide, index) in swiperSlides"
			
 
				+        :key="`${slide.title}-${index}`"
			
 
				+        class="list-slide"
			
 
				+        :style="{ background: slide.color }"
			
 
				+      >
			
 
				+        <span class="slide-index">{{ (index % slides.length) + 1 }}</span>
			
 
				+      </SwiperSlide>
			
 
				+    </Swiper>
			
 
				+  </section>
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+import { onBeforeUnmount, onMounted } from "vue";
			
 
				+import { Mousewheel } from "swiper/modules";
			
 
				+import { Swiper, SwiperSlide } from "swiper/vue";
			
 
				+import "swiper/css";
			
 
				+
			
 
				+const modules = [Mousewheel];
			
 
				+
			
 
				+const slides = [
			
 
				+  { title: "slide-1", color: "#2563eb" },
			
 
				+  { title: "slide-2", color: "#16a34a" },
			
 
				+  { title: "slide-3", color: "#f97316" },
			
 
				+];
			
 
				+
			
 
				+const swiperSlides = [...slides, ...slides, ...slides];
			
 
				+const mousewheelOptions = {
			
 
				+  enabled: true,
			
 
				+  forceToAxis: false,
			
 
				+  thresholdDelta: 20,
			
 
				+  thresholdTime: 420,
			
 
				+};
			
 
				+
			
 
				+let previousBodyOverflow = "";
			
 
				+
			
 
				+onMounted(() => {
			
 
				+  previousBodyOverflow = document.body.style.overflow;
			
 
				+  document.body.style.overflow = "hidden";
			
 
				+});
			
 
				+
			
 
				+onBeforeUnmount(() => {
			
 
				+  document.body.style.overflow = previousBodyOverflow;
			
 
				+});
			
 
				+</script>
			
 
				+
			
 
				+<style scoped>
			
 
				+.list-page {
			
 
				+  position: fixed;
			
 
				+  inset: 0;
			
 
				+  z-index: 10;
			
 
				+  width: 100vw;
			
 
				+  height: 100vh;
			
 
				+  overflow: hidden;
			
 
				+  background: #111827;
			
 
				+}
			
 
				+
			
 
				+.list-swiper {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+}
			
 
				+
			
 
				+.list-slide {
			
 
				+  display: grid;
			
 
				+  height: 100vh;
			
 
				+  place-items: center;
			
 
				+}
			
 
				+
			
 
				+.slide-index {
			
 
				+  color: rgba(255, 255, 255, 0.86);
			
 
				+  font-size: 72px;
			
 
				+  font-weight: 800;
			
 
				+  line-height: 1;
			
 
				+}
			
 
				+</style>
			
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,6 @@
 
				+import { defineConfig } from 'vite'
			
 
				+import vue from '@vitejs/plugin-vue'
			
 
				+
			
 
				+export default defineConfig({
			
 
				+  plugins: [vue()],
			
 
				+})