1 year ago · 4acfd3411a
--- a/components.d.ts
+++ b/components.d.ts
@@ -13,7 +13,6 @@ declare module 'vue' {
 
				     VanImage: typeof import('vant/es')['Image']
			
 
				     VanImagePreview: typeof import('vant/es')['ImagePreview']
			
 
				     VanLoading: typeof import('vant/es')['Loading']
			
 
				-    VanPopup: typeof import('vant/es')['Popup']
			
 
				     VanSwipe: typeof import('vant/es')['Swipe']
			
 
				     VanSwipeItem: typeof import('vant/es')['SwipeItem']
			
 
				     VanTab: typeof import('vant/es')['Tab']
			
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
 
				       name="viewport"
			
 
				       content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
			
 
				     />
			
 
				-    <title>扬州中国大运河博物馆线上图文展</title>
			
 
				+    <title>扬州中国大运河博物馆</title>
			
 
				   </head>
			
 
				   <body>
			
 
				     <div id="app"></div>
			
--- a/public/beituo/01@2x-min.png
+++ b/public/beituo/01@2x-min.png
--- a/public/beituo/02@2x-min.png
+++ b/public/beituo/02@2x-min.png
--- a/public/beituo/03@2x-min.png
+++ b/public/beituo/03@2x-min.png
--- a/public/beituo/04@2x-min.png
+++ b/public/beituo/04@2x-min.png
--- a/public/beituo/icon_frame_blue@2x.png
+++ b/public/beituo/icon_frame_blue@2x.png
--- a/public/beituo/icon_frame_blue_r@2x.png
+++ b/public/beituo/icon_frame_blue_r@2x.png
--- a/public/beituo/icon_frame_golden@2x.png
+++ b/public/beituo/icon_frame_golden@2x.png
--- a/public/beituo/icon_frame_golden_r@2x.png
+++ b/public/beituo/icon_frame_golden_r@2x.png
--- a/public/beituo/icon_frame_white@2x.png
+++ b/public/beituo/icon_frame_white@2x.png
--- a/public/beituo/icon_frame_white_r@2x.png
+++ b/public/beituo/icon_frame_white_r@2x.png
--- a/public/bookFairData.json
+++ b/public/bookFairData.json
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/fonts/SIMKAI.TTF
+++ b/public/fonts/SIMKAI.TTF
--- a/public/monumentData.json
+++ b/public/monumentData.json
--- a/public/zhouji/12.png
+++ b/public/zhouji/12.png
--- a/public/zhouji/13.png
+++ b/public/zhouji/13.png
--- a/public/zhouji/15.png
+++ b/public/zhouji/15.png
--- a/public/zhouji/16.png
+++ b/public/zhouji/16.png
--- a/public/zhouji/19.png
+++ b/public/zhouji/19.png
--- a/public/zhouji/20.png
+++ b/public/zhouji/20.png
--- a/public/zhouji/21.png
+++ b/public/zhouji/21.png
--- a/public/zhouji/23.png
+++ b/public/zhouji/23.png
--- a/public/zhouji/25.png
+++ b/public/zhouji/25.png
--- a/public/zhouji/26.png
+++ b/public/zhouji/26.png
--- a/public/zhouji/30.png
+++ b/public/zhouji/30.png
--- a/public/zhouji/31.png
+++ b/public/zhouji/31.png
--- a/public/zhouji/33.png
+++ b/public/zhouji/33.png
--- a/public/zhouji/35.png
+++ b/public/zhouji/35.png
--- a/public/zhouji/36.png
+++ b/public/zhouji/36.png
--- a/public/zhouji/38.png
+++ b/public/zhouji/38.png
--- a/public/zhouji/40.png
+++ b/public/zhouji/40.png
--- a/public/zhouji/41.png
+++ b/public/zhouji/41.png
--- a/public/zhouji/43.png
+++ b/public/zhouji/43.png
--- a/public/zhouji/46.png
+++ b/public/zhouji/46.png
--- a/public/zhouji/47.png
+++ b/public/zhouji/47.png
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,7 +15,7 @@ const back = () => {
 
				     router.go(-1)
			
 
				   } else {
			
 
				     router.replace({
			
 
				-      name: ((route.name || '') as string).indexOf('monument') ? 'home' : 'book-fair-home'
			
 
				+      name: ((route.name || '') as string).indexOf('monument') > -1 ? 'home' : 'book-fair-home'
			
 
				     })
			
 
				   }
			
 
				 }
			
@@ -40,7 +40,7 @@ const back = () => {
 
				       class="back-icon"
			
 
				       src="@/assets/images/btn_back_beita@2x.png"
			
 
				     />
			
 
				-    <img v-else class="back-icon" src="@/assets/images/btn_back_zhouji@2x.png" />
			
 
				+    <img draggable="false" v-else class="back-icon" src="@/assets/images/btn_back_zhouji@2x.png" />
			
 
				   </van-floating-bubble>
			
 
				 </template>
			
 
				 
			
--- a/src/assets/base.scss
+++ b/src/assets/base.scss
@@ -73,6 +73,11 @@ iframe {
 
				   font-display: swap;
			
 
				 }
			
 
				 
			
 
				+@font-face {
			
 
				+  font-family: 'KaiTi-Regular';
			
 
				+  src: url('/fonts/SIMKAI.TTF');
			
 
				+}
			
 
				+
			
 
				 .limit-line {
			
 
				   display: -webkit-box;
			
 
				   overflow: hidden;
			
--- a/src/assets/images/diwen_beita@2x.png
+++ b/src/assets/images/diwen_beita@2x.png
--- a/src/assets/images/tab_part@2x.png
+++ b/src/assets/images/tab_part@2x.png
--- a/src/assets/images/tab_preface@2x.png
+++ b/src/assets/images/tab_preface@2x.png
--- a/src/stores/types.ts
+++ b/src/stores/types.ts
@@ -3,13 +3,18 @@ export interface IData {
 
				   type: 'book-fair' | 'monument'
			
 
				   title: string
			
 
				   preface: string
			
 
				+  epilogue: string
			
 
				   list: IList[]
			
 
				 }
			
 
				 
			
 
				 export interface IList {
			
 
				   id: number
			
 
				+  bgColor?: string
			
 
				   label: string
			
 
				+  labelIconPath: string
			
 
				+  labelBgPath: string
			
 
				   info: string
			
 
				+  infoColor: string
			
 
				   list: {
			
 
				     id: number
			
 
				     imgs: string[]
			
--- a/src/views/BookFair/index.vue
+++ b/src/views/BookFair/index.vue
@@ -21,7 +21,7 @@
 
				         <div v-if="!item.showFullInfo" class="book-fair__more">
			
 
				           <div @click="item.showFullInfo = true">
			
 
				             <span>查看详情</span>
			
 
				-            <img src="@/assets/images/icon_more@2x.png" />
			
 
				+            <img draggable="false" src="@/assets/images/icon_more@2x.png" />
			
 
				           </div>
			
 
				         </div>
			
 
				       </div>
			
--- a/src/views/BookFairHome/index.vue
+++ b/src/views/BookFairHome/index.vue
@@ -1,7 +1,7 @@
 
				 <template>
			
 
				   <div class="home">
			
 
				-    <img class="home__img1" :src="Image1" />
			
 
				-    <img class="home__start" :src="ButtonIcon" @click="handleStart" />
			
 
				+    <img draggable="false" class="home__img1" :src="Image1" />
			
 
				+    <img draggable="false" class="home__start" :src="ButtonIcon" @click="handleStart" />
			
 
				   </div>
			
 
				 </template>
			
 
				 
			
--- a/src/views/Home/index.vue
+++ b/src/views/Home/index.vue
@@ -1,9 +1,9 @@
 
				 <template>
			
 
				   <div class="home">
			
 
				-    <img class="home__img1" :src="Image1" />
			
 
				-    <img class="home__img2" :src="Image2" />
			
 
				-    <img class="home__img3" :src="Image3" />
			
 
				-    <img class="home__start" :src="ButtonIcon" @click="handleStart" />
			
 
				+    <img draggable="false" class="home__img1" :src="Image1" />
			
 
				+    <img draggable="false" class="home__img2" :src="Image2" />
			
 
				+    <img draggable="false" class="home__img3" :src="Image3" />
			
 
				+    <img draggable="false" class="home__start" :src="ButtonIcon" @click="handleStart" />
			
 
				   </div>
			
 
				 </template>
			
 
				 
			
--- a/src/views/Monument/index.scss
+++ b/src/views/Monument/index.scss
@@ -5,7 +5,7 @@
 
				   --van-tabs-line-height: 112px;
			
 
				   --van-padding-sm: 40px;
			
 
				   --van-padding-xs: 38px;
			
 
				-  --van-tabs-nav-background: RGBA(228, 219, 208, 0.7);
			
 
				+  --van-tabs-nav-background: RGBA(228, 219, 208, 0.4);
			
 
				 
			
 
				   &::after {
			
 
				     content: '';
			
@@ -15,56 +15,107 @@
 
				     width: 100vw;
			
 
				     height: 100vh;
			
 
				     background: url('@/assets/images/bg_preface_beita@2x-min.jpg') no-repeat center / cover;
			
 
				-    z-index: -1;
			
 
				+    z-index: -2;
			
 
				   }
			
 
				 
			
 
				   &__title {
			
 
				-    margin-bottom: 40px;
			
 
				+    position: relative;
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    justify-content: center;
			
 
				+    gap: 18px;
			
 
				+    margin: 0 auto 30px;
			
 
				+    width: 572px;
			
 
				     text-align: center;
			
 
				     font-size: 72px;
			
 
				-    color: #140c0b;
			
 
				-    font-family: KaiTi-Regular, KaiTi;
			
 
				-  }
			
 
				-  &__preface {
			
 
				-    position: relative;
			
 
				-    margin-bottom: 40px;
			
 
				-    color: #e3dacf;
			
 
				-    line-height: 48px;
			
 
				-    font-size: 28px;
			
 
				+    font-family: KaiTi-Regular;
			
 
				 
			
 
				-    img {
			
 
				-      width: 100%;
			
 
				+    &.gap {
			
 
				+      padding-top: 130px;
			
 
				     }
			
 
				-    p {
			
 
				+    &__bg {
			
 
				       position: absolute;
			
 
				-      top: 72px;
			
 
				+      top: 84px;
			
 
				       left: 0;
			
 
				       right: 0;
			
 
				-      bottom: 72px;
			
 
				-      padding: 0 50px;
			
 
				-      overflow-y: auto;
			
 
				-      text-indent: 2em;
			
 
				+      height: 228px;
			
 
				+    }
			
 
				+    span {
			
 
				+      position: relative;
			
 
				+      color: white;
			
 
				+      z-index: 1;
			
 
				+    }
			
 
				+    &__icon-lf,
			
 
				+    &__icon-rg {
			
 
				+      width: 60px;
			
 
				     }
			
 
				   }
			
 
				-  &__info {
			
 
				+  &__preface {
			
 
				     position: relative;
			
 
				-    margin-bottom: 40px;
			
 
				+    margin: 0 -30px;
			
 
				     color: #e3dacf;
			
 
				-    line-height: 48px;
			
 
				+    line-height: 50px;
			
 
				+    font-size: 28px;
			
 
				+    overflow: hidden;
			
 
				 
			
 
				     img {
			
 
				       width: 100%;
			
 
				     }
			
 
				-    p {
			
 
				+    &__title {
			
 
				       position: absolute;
			
 
				       top: 50px;
			
 
				       left: 0;
			
 
				       right: 0;
			
 
				-      bottom: 50px;
			
 
				-      padding: 0 40px;
			
 
				+      text-align: center;
			
 
				+      font-size: 72px;
			
 
				+      color: #fff;
			
 
				+      font-family: KaiTi-Regular;
			
 
				+    }
			
 
				+    &__inner {
			
 
				+      position: absolute;
			
 
				+      top: 150px;
			
 
				+      left: 0;
			
 
				+      right: 0;
			
 
				+      bottom: 0;
			
 
				+      padding: 0 70px;
			
 
				       overflow-y: auto;
			
 
				+      text-indent: 2em;
			
 
				     }
			
 
				   }
			
 
				+  &__epilogue {
			
 
				+    display: flex;
			
 
				+    flex-direction: column;
			
 
				+    align-items: center;
			
 
				+    margin: 0 -30px;
			
 
				+    padding: 0 70px;
			
 
				+    height: 716px;
			
 
				+    background: url('@/assets/images/diwen_beita@2x.png') no-repeat top / cover;
			
 
				+
			
 
				+    &__title {
			
 
				+      margin: 44px 0 40px;
			
 
				+      font-size: 72px;
			
 
				+      color: #ffffff;
			
 
				+      line-height: 84px;
			
 
				+      font-family: KaiTi-Regular;
			
 
				+    }
			
 
				+    &__inner {
			
 
				+      font-size: 28px;
			
 
				+      color: #e3dacf;
			
 
				+      line-height: 50px;
			
 
				+      text-indent: 2em;
			
 
				+    }
			
 
				+  }
			
 
				+  &__info {
			
 
				+    position: relative;
			
 
				+    padding: 55px;
			
 
				+    margin-bottom: 20px;
			
 
				+    color: #434142;
			
 
				+    line-height: 50px;
			
 
				+    text-indent: 2em;
			
 
				+  }
			
 
				+  &-cards {
			
 
				+    padding-bottom: 20px;
			
 
				+  }
			
 
				   &-card {
			
 
				     display: flex;
			
 
				     flex-direction: column;
			
@@ -81,10 +132,31 @@
 
				       font-size: 24px;
			
 
				       opacity: 0.5;
			
 
				     }
			
 
				+    &:last-child {
			
 
				+      margin-bottom: 0;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  &__bg {
			
 
				+    position: absolute;
			
 
				+    top: 0;
			
 
				+    left: 0;
			
 
				+    right: 0;
			
 
				+    bottom: 0;
			
 
				+    z-index: -1;
			
 
				   }
			
 
				 
			
 
				   .van-tab {
			
 
				     z-index: 2;
			
 
				+
			
 
				+    &__panel {
			
 
				+      position: relative;
			
 
				+      padding: 0 30px;
			
 
				+
			
 
				+      &__last-child {
			
 
				+        padding-bottom: 130px;
			
 
				+      }
			
 
				+    }
			
 
				   }
			
 
				   .van-tabs {
			
 
				     &__line {
			
@@ -95,8 +167,5 @@
 
				       border: none;
			
 
				       background: url('@/assets/images/btn_active_beita@2x.png') no-repeat center / contain;
			
 
				     }
			
 
				-    &__content {
			
 
				-      padding: 0 30px;
			
 
				-    }
			
 
				   }
			
 
				 }
			
--- a/src/views/Monument/index.vue
+++ b/src/views/Monument/index.vue
@@ -1,18 +1,26 @@
 
				 <template>
			
 
				   <van-tabs v-if="model" ref="tabsRef" v-model:active="active" scrollspy sticky class="monument">
			
 
				     <van-tab title="前言" :name="0">
			
 
				-      <p class="monument__title">前言</p>
			
 
				       <div class="monument__preface">
			
 
				-        <p>{{ model.preface }}</p>
			
 
				-        <img src="@/assets/images/tab_preface@2x.png" />
			
 
				+        <p class="monument__preface__title">前言</p>
			
 
				+        <p class="monument__preface__inner">{{ model.preface }}</p>
			
 
				+        <img draggable="false" src="@/assets/images/diwen_beita@2x.png" />
			
 
				       </div>
			
 
				     </van-tab>
			
 
				+
			
 
				     <van-tab v-for="item in model.list" :title="item.label" :key="item.id" :name="item.id">
			
 
				-      <p class="monument__title">{{ item.label }}</p>
			
 
				+      <div class="monument__title gap">
			
 
				+        <div
			
 
				+          class="monument__title__bg"
			
 
				+          :style="{ background: `url(${item.labelBgPath}) no-repeat center / contain` }"
			
 
				+        />
			
 
				+        <img class="monument__title__icon-lf" :src="item.labelIconPath + '@2x.png'" />
			
 
				+        <span>{{ item.label }}</span>
			
 
				+        <img class="monument__title__icon-rg" :src="`${item.labelIconPath}_r@2x.png`" />
			
 
				+      </div>
			
 
				 
			
 
				       <div v-if="item.info" class="monument__info">
			
 
				-        <p>{{ item.info }}</p>
			
 
				-        <img src="@/assets/images/tab_part@2x.png" />
			
 
				+        <p :style="{ color: item.infoColor }">{{ item.info }}</p>
			
 
				       </div>
			
 
				 
			
 
				       <div class="monument-cards">
			
@@ -27,6 +35,15 @@
 
				           <p class="monument-card__subtitle limit-line">{{ subItem.subtitle }}</p>
			
 
				         </div>
			
 
				       </div>
			
 
				+
			
 
				+      <div v-if="item.bgColor" class="monument__bg" :style="{ background: item.bgColor }" />
			
 
				+    </van-tab>
			
 
				+
			
 
				+    <van-tab title="结语">
			
 
				+      <div class="monument__epilogue">
			
 
				+        <p class="monument__epilogue__title">结语</p>
			
 
				+        <p class="monument__epilogue__inner">{{ model.epilogue }}</p>
			
 
				+      </div>
			
 
				     </van-tab>
			
 
				   </van-tabs>
			
 
				 
			
@@ -42,7 +59,7 @@ export default {
 
				 </script>
			
 
				 
			
 
				 <script lang="ts" setup>
			
 
				-import { ref, onMounted, computed } from 'vue'
			
 
				+import { ref, onMounted, onBeforeMount, computed } from 'vue'
			
 
				 import { useRoute, useRouter } from 'vue-router'
			
 
				 import type { TabsInstance } from 'vant'
			
 
				 import useStore from '@/stores'
			
@@ -55,6 +72,10 @@ const { monument } = useStore()
 
				 const tabsRef = ref<TabsInstance>()
			
 
				 const model = computed(() => monument.data.find((item) => item.id === Number(route.params.id)))
			
 
				 
			
 
				+onBeforeMount(() => {
			
 
				+  document.title = '运河沿线碑拓展'
			
 
				+})
			
 
				+
			
 
				 onMounted(() => {
			
 
				   setTimeout(() => {
			
 
				     tabsRef.value?.scrollTo(Number(route.params.secondId))
			
--- a/src/views/MonumentDetail/index.vue
+++ b/src/views/MonumentDetail/index.vue
@@ -28,7 +28,11 @@
 
				       />
			
 
				     </div>
			
 
				 
			
 
				-    <img class="monument-detail-main-bd" src="@/assets/images/label_beita@2x.png" />
			
 
				+    <img
			
 
				+      draggable="false"
			
 
				+      class="monument-detail-main-bd"
			
 
				+      src="@/assets/images/label_beita@2x.png"
			
 
				+    />
			
 
				     <div class="monument-detail-main">
			
 
				       <p class="monument-detail-main__title">{{ detail.title }}</p>
			
 
				       <p class="monument-detail-main__subtitle">{{ detail.subtitle }}</p>