1 rok temu · 963ca49883
--- a/cover-home/index.html
+++ b/cover-home/index.html
@@ -0,0 +1,17 @@
 
				+<!doctype html>
			
 
				+<html lang="en">
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <link rel="icon" href="/favicon.ico" />
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
			
 
				+    <meta
			
 
				+      name="viewport"
			
 
				+      content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
			
 
				+    />
			
 
				+    <title>中国大运河博物馆云展览</title>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <div id="app"></div>
			
 
				+    <script type="module" src="/cover-home/main.ts"></script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/cover-home/main.ts
+++ b/cover-home/main.ts
@@ -0,0 +1,18 @@
 
				+import { createApp } from 'vue'
			
 
				+import { createPinia } from 'pinia'
			
 
				+import { Lazyload } from 'vant'
			
 
				+
			
 
				+import HomeApp from '../src/cover-home.vue'
			
 
				+import router from '../src/router/cover-home'
			
 
				+
			
 
				+import 'lib-flexible'
			
 
				+
			
 
				+const app = createApp(HomeApp)
			
 
				+
			
 
				+app.use(createPinia())
			
 
				+app.use(router)
			
 
				+app.use(Lazyload, {
			
 
				+  lazyComponent: true
			
 
				+})
			
 
				+
			
 
				+app.mount('#app')
			
--- a/src/assets/images/cover-home/banner_beita@2x-min.jpg
+++ b/src/assets/images/cover-home/banner_beita@2x-min.jpg
--- a/src/assets/images/cover-home/banner_hongzhuang@2x-min.jpg
+++ b/src/assets/images/cover-home/banner_hongzhuang@2x-min.jpg
--- a/src/assets/images/cover-home/banner_hudie@2x-min.jpg
+++ b/src/assets/images/cover-home/banner_hudie@2x-min.jpg
--- a/src/assets/images/cover-home/banner_niaolei@2x-min.jpg
+++ b/src/assets/images/cover-home/banner_niaolei@2x-min.jpg
--- a/src/assets/images/cover-home/banner_ninglu@2x-min.jpg
+++ b/src/assets/images/cover-home/banner_ninglu@2x-min.jpg
--- a/src/assets/images/cover-home/banner_qianfan@2x-min.jpg
+++ b/src/assets/images/cover-home/banner_qianfan@2x-min.jpg
--- a/src/assets/images/cover-home/banner_tongyan@2x-min.jpg
+++ b/src/assets/images/cover-home/banner_tongyan@2x-min.jpg
--- a/src/assets/images/cover-home/banner_zhouji@2x-min.jpg
+++ b/src/assets/images/cover-home/banner_zhouji@2x-min.jpg
--- a/src/assets/images/cover-home/bg@2x-min.png
+++ b/src/assets/images/cover-home/bg@2x-min.png
--- a/src/assets/images/cover-home/bg_home@2x-min.jpg
+++ b/src/assets/images/cover-home/bg_home@2x-min.jpg
--- a/src/assets/images/cover-home/btn@2x-min.png
+++ b/src/assets/images/cover-home/btn@2x-min.png
--- a/src/assets/images/cover-home/btn_beita@2x-min.png
+++ b/src/assets/images/cover-home/btn_beita@2x-min.png
--- a/src/assets/images/cover-home/btn_hongzhuang@2x-min.png
+++ b/src/assets/images/cover-home/btn_hongzhuang@2x-min.png
--- a/src/assets/images/cover-home/btn_hudie@2x-min.png
+++ b/src/assets/images/cover-home/btn_hudie@2x-min.png
--- a/src/assets/images/cover-home/btn_niaolei@2x-min.png
+++ b/src/assets/images/cover-home/btn_niaolei@2x-min.png
--- a/src/assets/images/cover-home/btn_ningzhu@2x-min.png
+++ b/src/assets/images/cover-home/btn_ningzhu@2x-min.png
--- a/src/assets/images/cover-home/btn_qianfan@2x-min.png
+++ b/src/assets/images/cover-home/btn_qianfan@2x-min.png
--- a/src/assets/images/cover-home/btn_tongyan@2x-min.png
+++ b/src/assets/images/cover-home/btn_tongyan@2x-min.png
--- a/src/assets/images/cover-home/btn_zhouji@2x-min.png
+++ b/src/assets/images/cover-home/btn_zhouji@2x-min.png
--- a/src/assets/images/cover-home/icon_enter@2x.png
+++ b/src/assets/images/cover-home/icon_enter@2x.png
--- a/src/assets/images/cover-home/mob_title@2x-min.png
+++ b/src/assets/images/cover-home/mob_title@2x-min.png
--- a/src/birds.vue
+++ b/src/birds.vue
@@ -1,22 +1,13 @@
 
				 <script setup lang="ts">
			
 
				 import { computed } from 'vue'
			
 
				 import { ref } from 'vue'
			
 
				-import { RouterView, useRoute, useRouter } from 'vue-router'
			
 
				+import { RouterView, useRoute } from 'vue-router'
			
 
				+import { useBack } from './utils'
			
 
				 
			
 
				 const route = useRoute()
			
 
				-const router = useRouter()
			
 
				+const back = useBack()
			
 
				 const offset = ref({ x: 22, y: window.innerHeight - 100 })
			
 
				 const showBackIcon = computed(() => !['home'].includes((route.name || '') as string))
			
 
				-
			
 
				-const back = () => {
			
 
				-  if (window.history.state.back) {
			
 
				-    router.go(-1)
			
 
				-  } else {
			
 
				-    router.replace({
			
 
				-      name: 'home'
			
 
				-    })
			
 
				-  }
			
 
				-}
			
 
				 </script>
			
 
				 
			
 
				 <template>
			
--- a/src/book-fair.vue
+++ b/src/book-fair.vue
@@ -1,22 +1,13 @@
 
				 <script setup lang="ts">
			
 
				 import { computed } from 'vue'
			
 
				 import { ref } from 'vue'
			
 
				-import { RouterView, useRoute, useRouter } from 'vue-router'
			
 
				+import { RouterView, useRoute } from 'vue-router'
			
 
				+import { useBack } from './utils'
			
 
				 
			
 
				 const route = useRoute()
			
 
				-const router = useRouter()
			
 
				+const back = useBack()
			
 
				 const offset = ref({ x: 32, y: window.innerHeight - 100 })
			
 
				 const showBackIcon = computed(() => !['home'].includes((route.name || '') as string))
			
 
				-
			
 
				-const back = () => {
			
 
				-  if (window.history.state.back) {
			
 
				-    router.go(-1)
			
 
				-  } else {
			
 
				-    router.replace({
			
 
				-      name: 'home'
			
 
				-    })
			
 
				-  }
			
 
				-}
			
 
				 </script>
			
 
				 
			
 
				 <template>
			
--- a/src/cover-home.vue
+++ b/src/cover-home.vue
@@ -0,0 +1,11 @@
 
				+<script setup lang="ts">
			
 
				+import { RouterView } from 'vue-router'
			
 
				+</script>
			
 
				+
			
 
				+<template>
			
 
				+  <router-view />
			
 
				+</template>
			
 
				+
			
 
				+<style lang="scss">
			
 
				+@import '@/assets/base.scss';
			
 
				+</style>
			
--- a/src/monument.vue
+++ b/src/monument.vue
@@ -1,22 +1,13 @@
 
				 <script setup lang="ts">
			
 
				 import { computed } from 'vue'
			
 
				 import { ref } from 'vue'
			
 
				-import { RouterView, useRoute, useRouter } from 'vue-router'
			
 
				+import { RouterView, useRoute } from 'vue-router'
			
 
				+import { useBack } from '@/utils'
			
 
				 
			
 
				 const route = useRoute()
			
 
				-const router = useRouter()
			
 
				+const back = useBack()
			
 
				 const offset = ref({ x: 32, y: window.innerHeight - 100 })
			
 
				 const showBackIcon = computed(() => !['home'].includes((route.name || '') as string))
			
 
				-
			
 
				-const back = () => {
			
 
				-  if (window.history.state.back) {
			
 
				-    router.go(-1)
			
 
				-  } else {
			
 
				-    router.replace({
			
 
				-      name: 'home'
			
 
				-    })
			
 
				-  }
			
 
				-}
			
 
				 </script>
			
 
				 
			
 
				 <template>
			
--- a/src/router/cover-home.ts
+++ b/src/router/cover-home.ts
@@ -0,0 +1,21 @@
 
				+import { createRouter, createWebHashHistory } from 'vue-router'
			
 
				+import Home from '../views/CoverHome/index.vue'
			
 
				+import List from '../views/CoverHomeList/index.vue'
			
 
				+
			
 
				+const router = createRouter({
			
 
				+  history: createWebHashHistory(import.meta.env.BASE_URL),
			
 
				+  routes: [
			
 
				+    {
			
 
				+      path: '/',
			
 
				+      name: 'home',
			
 
				+      component: Home
			
 
				+    },
			
 
				+    {
			
 
				+      path: '/list',
			
 
				+      name: 'list',
			
 
				+      component: List
			
 
				+    }
			
 
				+  ]
			
 
				+})
			
 
				+
			
 
				+export default router
			
--- a/src/tongyan.vue
+++ b/src/tongyan.vue
@@ -1,22 +1,13 @@
 
				 <script setup lang="ts">
			
 
				 import { computed } from 'vue'
			
 
				 import { ref } from 'vue'
			
 
				-import { RouterView, useRoute, useRouter } from 'vue-router'
			
 
				+import { RouterView, useRoute } from 'vue-router'
			
 
				+import { useBack } from './utils'
			
 
				 
			
 
				 const route = useRoute()
			
 
				-const router = useRouter()
			
 
				+const back = useBack()
			
 
				 const offset = ref({ x: 22, y: window.innerHeight - 100 })
			
 
				 const showBackIcon = computed(() => !['home'].includes((route.name || '') as string))
			
 
				-
			
 
				-const back = () => {
			
 
				-  if (window.history.state.back) {
			
 
				-    router.go(-1)
			
 
				-  } else {
			
 
				-    router.replace({
			
 
				-      name: 'home'
			
 
				-    })
			
 
				-  }
			
 
				-}
			
 
				 </script>
			
 
				 
			
 
				 <template>
			
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -0,0 +1,20 @@
 
				+import { useRoute, useRouter } from 'vue-router'
			
 
				+
			
 
				+export const useBack = () => {
			
 
				+  const router = useRouter()
			
 
				+  const route = useRoute()
			
 
				+
			
 
				+  const back = () => {
			
 
				+    if (route.query.backTo) {
			
 
				+      history.back()
			
 
				+    } else if (window.history.state.back) {
			
 
				+      router.go(-1)
			
 
				+    } else {
			
 
				+      router.replace({
			
 
				+        name: 'home'
			
 
				+      })
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  return back
			
 
				+}
			
--- a/src/views/CoverHome/index.scss
+++ b/src/views/CoverHome/index.scss
@@ -0,0 +1,30 @@
 
				+.home {
			
 
				+  width: 100vw;
			
 
				+  height: 100vh;
			
 
				+  overflow: hidden;
			
 
				+  background: url('@/assets/images/cover-home/bg_home@2x-min.jpg') no-repeat center / cover;
			
 
				+
			
 
				+  &__start {
			
 
				+    position: absolute;
			
 
				+    right: 58px;
			
 
				+    bottom: 100px;
			
 
				+    width: 217px;
			
 
				+    z-index: 1;
			
 
				+  }
			
 
				+  &__img1 {
			
 
				+    position: absolute;
			
 
				+    top: 68px;
			
 
				+    right: 74px;
			
 
				+    width: 300px;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.video {
			
 
				+  position: absolute;
			
 
				+  top: 0;
			
 
				+  left: 0;
			
 
				+  width: 100vw;
			
 
				+  height: 100vh;
			
 
				+  object-fit: cover;
			
 
				+  z-index: 9999;
			
 
				+}
			
--- a/src/views/CoverHome/index.vue
+++ b/src/views/CoverHome/index.vue
@@ -0,0 +1,45 @@
 
				+<template>
			
 
				+  <div class="home">
			
 
				+    <img draggable="false" class="home__img1" :src="Image1" />
			
 
				+    <img draggable="false" class="home__start" :src="ButtonIcon" @click="handleStart" />
			
 
				+  </div>
			
 
				+
			
 
				+  <video
			
 
				+    v-if="!videoLoaded"
			
 
				+    class="video"
			
 
				+    muted
			
 
				+    autoplay
			
 
				+    src="@/assets/videos/video.mp4"
			
 
				+    @play="videoPlaying = true"
			
 
				+    @ended="handleEnded"
			
 
				+  />
			
 
				+
			
 
				+  <div v-if="!videoLoaded && !videoPlaying" class="loading-page" style="z-index: 10000">
			
 
				+    <van-loading color="#8AA8CC" :size="48" />
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script lang="ts" setup>
			
 
				+import { useRouter } from 'vue-router'
			
 
				+import Image1 from '@/assets/images/cover-home/mob_title@2x-min.png'
			
 
				+import ButtonIcon from '@/assets/images/cover-home/btn@2x-min.png'
			
 
				+import { ref } from 'vue'
			
 
				+
			
 
				+const router = useRouter()
			
 
				+const videoLoaded = ref(false)
			
 
				+const videoPlaying = ref(false)
			
 
				+
			
 
				+const handleStart = () => {
			
 
				+  router.push({
			
 
				+    name: 'list'
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+const handleEnded = () => {
			
 
				+  videoLoaded.value = true
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss" scoped>
			
 
				+@import './index.scss';
			
 
				+</style>
			
--- a/src/views/CoverHomeList/index.scss
+++ b/src/views/CoverHomeList/index.scss
@@ -0,0 +1,84 @@
 
				+.list-swiper {
			
 
				+  position: fixed;
			
 
				+  top: 0;
			
 
				+  left: 0;
			
 
				+  right: 0;
			
 
				+  --van-swipe-indicator-size: 16px;
			
 
				+  --van-swipe-indicator-margin: 62px;
			
 
				+  --van-swipe-indicator-inactive-background: none;
			
 
				+}
			
 
				+
			
 
				+:deep(.van-swipe__indicator) {
			
 
				+  border: 2px solid #ffffff;
			
 
				+}
			
 
				+
			
 
				+.list {
			
 
				+  position: relative;
			
 
				+  top: 438px;
			
 
				+  padding: 50px 45px;
			
 
				+  min-height: calc(100vh - 438px);
			
 
				+  overflow: hidden;
			
 
				+  background: url('@/assets/images/cover-home/bg@2x-min.png') no-repeat center top / 100% auto;
			
 
				+  background-color: #f6f2e6;
			
 
				+  z-index: 1;
			
 
				+  font-size: 40px;
			
 
				+  font-family: Source Han Serif CN-Bold;
			
 
				+  border-top-right-radius: 35px;
			
 
				+  border-top-left-radius: 35px;
			
 
				+
			
 
				+  h2 {
			
 
				+    margin-bottom: 50px;
			
 
				+    color: #623d18;
			
 
				+    font-size: inherit;
			
 
				+  }
			
 
				+  &__item {
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    margin-bottom: 30px;
			
 
				+    padding: 0 36px;
			
 
				+    width: 100%;
			
 
				+    height: 160px;
			
 
				+    color: white;
			
 
				+    background-size: cover;
			
 
				+    background-position: center;
			
 
				+
			
 
				+    p {
			
 
				+      flex: 1;
			
 
				+    }
			
 
				+    &::after {
			
 
				+      content: '';
			
 
				+      display: block;
			
 
				+      width: 36px;
			
 
				+      height: 36px;
			
 
				+      background: url('@/assets/images/cover-home/icon_enter@2x.png') no-repeat center / contain;
			
 
				+    }
			
 
				+    &:last-child {
			
 
				+      margin-bottom: 0;
			
 
				+    }
			
 
				+    &.bt {
			
 
				+      color: #454344;
			
 
				+      background-image: url('@/assets/images/cover-home/btn_beita@2x-min.png');
			
 
				+    }
			
 
				+    &.zxql {
			
 
				+      background-image: url('@/assets/images/cover-home/btn_zhouji@2x-min.png');
			
 
				+    }
			
 
				+    &.ty {
			
 
				+      background-image: url('@/assets/images/cover-home/btn_tongyan@2x-min.png');
			
 
				+    }
			
 
				+    &.fy {
			
 
				+      background-image: url('@/assets/images/cover-home/btn_niaolei@2x-min.png');
			
 
				+    }
			
 
				+    &.hz {
			
 
				+      background-image: url('@/assets/images/cover-home/btn_hongzhuang@2x-min.png');
			
 
				+    }
			
 
				+    &.pxdy {
			
 
				+      background-image: url('@/assets/images/cover-home/btn_hudie@2x-min.png');
			
 
				+    }
			
 
				+    &.nlcz {
			
 
				+      background-image: url('@/assets/images/cover-home/btn_ningzhu@2x-min.png');
			
 
				+    }
			
 
				+    &.gjqf {
			
 
				+      background-image: url('@/assets/images/cover-home/btn_qianfan@2x-min.png');
			
 
				+    }
			
 
				+  }
			
 
				+}
			
--- a/src/views/CoverHomeList/index.vue
+++ b/src/views/CoverHomeList/index.vue
@@ -0,0 +1,94 @@
 
				+<template>
			
 
				+  <van-swipe class="list-swiper" height="234" indicator-color="white" :autoplay="5000">
			
 
				+    <van-swipe-item v-for="item in list" :key="item.title">
			
 
				+      <van-image lazy-load fit="cover" width="100%" height="100%" :src="item.banner" />
			
 
				+    </van-swipe-item>
			
 
				+  </van-swipe>
			
 
				+
			
 
				+  <div class="list">
			
 
				+    <h2>中国大运河博物馆云展览</h2>
			
 
				+
			
 
				+    <div
			
 
				+      v-for="item in list"
			
 
				+      :key="item.title"
			
 
				+      :class="['list__item', item.class]"
			
 
				+      @click="handleRoute(item.href)"
			
 
				+    >
			
 
				+      <p v-html="item.title" />
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script lang="ts" setup>
			
 
				+import { reactive } from 'vue'
			
 
				+import banner1 from '@/assets/images/cover-home/banner_beita@2x-min.jpg'
			
 
				+import banner2 from '@/assets/images/cover-home/banner_zhouji@2x-min.jpg'
			
 
				+import banner3 from '@/assets/images/cover-home/banner_hongzhuang@2x-min.jpg'
			
 
				+import banner4 from '@/assets/images/cover-home/banner_niaolei@2x-min.jpg'
			
 
				+import banner5 from '@/assets/images/cover-home/banner_ninglu@2x-min.jpg'
			
 
				+import banner6 from '@/assets/images/cover-home/banner_qianfan@2x-min.jpg'
			
 
				+import banner7 from '@/assets/images/cover-home/banner_tongyan@2x-min.jpg'
			
 
				+import banner8 from '@/assets/images/cover-home/banner_hudie@2x-min.jpg'
			
 
				+
			
 
				+const dynamicPathRegex = /\/[^/]+\/index\.html(#.*)?/
			
 
				+const path = location.href.replace(dynamicPathRegex, '')
			
 
				+
			
 
				+const list = reactive([
			
 
				+  {
			
 
				+    title: '运河镌石——<br/>大运河沿线碑拓展',
			
 
				+    class: 'bt',
			
 
				+    banner: banner1,
			
 
				+    href: path + '/monument/index.html#/list/1/0'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '舟行千里<br/>船文化专题展',
			
 
				+    class: 'zxql',
			
 
				+    banner: banner2,
			
 
				+    href: path + '/book-fair/index.html#/list/1/0'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '童眼看运河——<br/>我心中的大运河',
			
 
				+    class: 'ty',
			
 
				+    banner: banner7,
			
 
				+    href: path + '/tongyan/index.html#/list/1/0'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '飞羽世界——<br/>馆藏鸟类标本展',
			
 
				+    class: 'fy',
			
 
				+    banner: banner4,
			
 
				+    href: path + '/birds/index.html#/list/1/0'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '十里红妆闺阁情——<br/>馆藏婚俗文物展',
			
 
				+    class: 'hz',
			
 
				+    banner: banner3,
			
 
				+    href: path + '/wedding/index.html#/list/1/0'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '蹁跹蝶影——<br/>馆藏蝴蝶标本展',
			
 
				+    class: 'pxdy',
			
 
				+    banner: banner8,
			
 
				+    href: 'http://www.4dmodel.com/SuperTwoCustom/SuperTwo1420/index.html'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '凝露成珠—中国大运河博物馆<br/>2022年藏品征集精品展',
			
 
				+    class: 'nlcz',
			
 
				+    banner: banner5,
			
 
				+    href: 'http://www.4dmodel.com/SuperTwoCustom/SuperTwo1421/index.html'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '过尽千帆——<br/>近代影像里的大运河',
			
 
				+    class: 'gjqf',
			
 
				+    banner: banner6,
			
 
				+    href: 'http://www.4dmodel.com/SuperTwoCustom/SuperTwo1422/index.html'
			
 
				+  }
			
 
				+])
			
 
				+
			
 
				+const handleRoute = (href: string) => {
			
 
				+  location.href = href + `?backTo=${encodeURIComponent(path + '/cover-home/index.html/#/list')}`
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss" scoped>
			
 
				+@import './index.scss';
			
 
				+</style>
			
--- a/src/wedding.vue
+++ b/src/wedding.vue
@@ -1,22 +1,13 @@
 
				 <script setup lang="ts">
			
 
				 import { computed } from 'vue'
			
 
				 import { ref } from 'vue'
			
 
				-import { RouterView, useRoute, useRouter } from 'vue-router'
			
 
				+import { RouterView, useRoute } from 'vue-router'
			
 
				+import { useBack } from './utils'
			
 
				 
			
 
				 const route = useRoute()
			
 
				-const router = useRouter()
			
 
				+const back = useBack()
			
 
				 const offset = ref({ x: 22, y: window.innerHeight - 100 })
			
 
				 const showBackIcon = computed(() => !['home'].includes((route.name || '') as string))
			
 
				-
			
 
				-const back = () => {
			
 
				-  if (window.history.state.back) {
			
 
				-    router.go(-1)
			
 
				-  } else {
			
 
				-    router.replace({
			
 
				-      name: 'home'
			
 
				-    })
			
 
				-  }
			
 
				-}
			
 
				 </script>
			
 
				 
			
 
				 <template>
			
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -25,6 +25,7 @@ export default defineConfig({
 
				   build: {
			
 
				     rollupOptions: {
			
 
				       input: {
			
 
				+        coverHome: resolve(__dirname, 'cover-home/index.html'),
			
 
				         monument: resolve(__dirname, 'monument/index.html'),
			
 
				         bookFair: resolve(__dirname, 'book-fair/index.html'),
			
 
				         tongyan: resolve(__dirname, 'tongyan/index.html'),