更新一些组件和图片

src/components/BtnSkip.vue

@@ -0,0 +1,74 @@
+<template>
+  <div
+    :style="{
+      opacity: isReady ? 1 : 0,
+    }"
+    class="btn-skip"
+  >
+    <div class="text">
+      跳过
+    </div>
+    <img
+      class="arrow"
+      src="@/assets/images/icon_arrow-right.png"
+      alt=""
+      draggable="false"
+    >
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onBeforeUnmount, inject } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+import useSizeAdapt from '@/useFunctions/useSizeAdapt.js'
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
+const $env = inject('$env')
+
+const isReady = ref(false)
+
+onMounted(()=>{
+  setTimeout(() => {
+    isReady.value = true
+  }, 1500)
+})
+</script>
+
+<style lang="less" scoped>
+.btn-skip{
+  position: absolute;
+  width: calc(74 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  height: calc(37 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  right: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  bottom: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  background-image: url(@/assets/images/btn_skip.png);
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 30;
+  cursor: pointer;
+  >.text{
+    // font-family: KingHwa_OldSong;
+    font-weight: 400;
+    font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    color: #FFFFFF;
+  }
+  >img.arrow{
+    margin-left: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    width: calc(12 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(12 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+}
+</style>

src/main.js

@@ -18,7 +18,7 @@ import VueLazyLoad from 'vue3-lazyload'
 // import HotspotComp from '@/components/HotspotComp.vue'
 // import HotspotForHomepage from '@/components/HotspotForHomepage.vue'
 import SerialFrames from '@/components/LongImageSerialFrames.vue'
-// import BtnSkip from '@/components/BtnSkip.vue'
+import BtnSkip from '@/components/BtnSkip.vue'
 // import PaginationComp from '@/components/PaginationComp.vue'
 // import ProgressBar from '@/components/ProgressBar.vue'
 
@@ -95,7 +95,7 @@ app.use(store)
 //   .component('Swiper', Swiper)
 //   .component('SwiperSlide', SwiperSlide)
   .component('SerialFrames', SerialFrames)
-//   .component('BtnSkip', BtnSkip)
+  .component('BtnSkip', BtnSkip)
 //   .component('PaginationComp', PaginationComp)
 //   .component('ProgressBar', ProgressBar)
   .mount('#app')

src/store/index.js

@@ -9,6 +9,8 @@ import { createStore } from 'vuex'
 
 export default createStore({
   state: {
+    haveShownStartup: process.env.VUE_APP_CLI_MODE === 'dev' ? true : false,
+    // haveShownStartup: false,
     // loginStatus: loginStatusEnum.notLogin,
     // token: '',
     // userInfo: {
@@ -23,6 +25,9 @@ export default createStore({
     // }
   },
   mutations: {
+    setShowingStartup(state, value) {
+      state.haveShownStartup = value
+    },
     // setLoginStatus(state, value) {
     //   state.loginStatus = value
     // },
@@ -58,6 +63,9 @@ export default createStore({
     // }
   },
   actions: {
+    recordShownStartup({ state, commit }) {
+      commit('setShowingStartup', true)
+    },
     // recordPageVisitIfNeeded({ state, commit }, { pageId }) {
     //   let needUpdateStorage = false
 

src/views/HomeView.vue

@@ -1,3 +1,20 @@
+
+<script setup>
+import { ref, computed, watch, onMounted, inject } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+import Startup from "@/views/StartupView.vue"
+
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const $env = inject("$env")
+
+const curPageIndex = ref(0)
+</script>
+
 <template>
   <div class="home">
     <!-- 背景 -->
@@ -8,25 +25,65 @@
     <!-- 开场动画 -->
     <Transition name="fade-out">
       <Startup
+        v-if="!store.state.haveShownStartup"
         class="startup"
       />
     </Transition>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, watch, onMounted, inject } from "vue"
-import { useRoute, useRouter } from "vue-router"
-import { useStore } from "vuex"
-import Startup from "@/views/StartupView.vue"
+    <!-- 首页标题 -->
+    <div
+      class="title-wrap"
+      :style="{
+        opacity: curPageIndex == 0 ? 1 : 0,
+      }"
+    >
+      <img
+        class="title"
+        src="@/assets/images/home-title.png"
+        alt=""
+        draggable="false"
+      >
+      <div class="sub-text">
+        南京博物院<br>
+        绢本 墨笔<br>
+        元 李衎<br>
+      </div>
+    </div>
 
+    <!-- 作品、作者简介 -->
+    <div
+      ref="longDesc"
+      class="long-desc"
+      :class="{ 'long-desc-ac': curPageIndex == 0 }"
+      @touchstart="handletouchstart($event)"
+      @touchend="touchEnd($event)"
+    >
+      <div
+        class="page2-box"
+        @click="isShowPaintingDesc = true"
+      >
+        <img
+          src="@/assets/images/icon_home_detail-min.png"
+          alt=""
+        >
+        <div>作品简介</div>
+      </div>
+      <div
+        class="page2-box"
+        style="margin-top: 10px"
+        @click="isShowAuthorDesc = true"
+      >
+        <img
+          src="@/assets/images/icon_home_author-min.png"
+          alt=""
+        >
+        <div>作者简介</div>
+      </div>
+    </div>
 
-const route = useRoute()
-const router = useRouter()
-const store = useStore()
+    <!-- 滑动提示 -->
+  </div>
+</template>
 
-const $env = inject("$env")
-</script>
 
 <style lang="less" scoped>
 .home {
@@ -38,17 +95,89 @@ const $env = inject("$env")
     top: 0;
     width: 100%;
     height: 100%;
-    background: rgba(60, 89, 71, 0.65);
-    backdrop-filter: blur(
-      calc(
-        22 / v-bind("windowSizeWhenDesignForRef") *
-          v-bind("windowSizeInCssForRef")
-      )
-    );
+    // background: rgba(60, 89, 71, 0.65);
+    background: url(@/assets/images/bg-mask.png);
+    background-size: 100% 100%;
+    // backdrop-filter: blur(
+    //   calc(
+    //     22 / v-bind("windowSizeWhenDesignForRef") *
+    //       v-bind("windowSizeInCssForRef")
+    //   )
+    // );
   }
 
   > .startup {
     z-index: 20;
   }
+
+  > .title-wrap {
+    position: absolute;
+    right: 20%;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 100px;
+    height: 45%;
+    z-index: 5;
+
+    > img.title {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    > .sub-text {
+      position: absolute;
+      left: 110%;
+      top: 46%;
+      transform: translateY(-50%);
+      writing-mode: vertical-lr;
+      font-family: KaiTi;
+      font-weight: 400;
+      font-size: 20px;
+      color: #ffffff;
+      line-height:30px;
+      white-space: pre;
+      letter-spacing: 0.2em;
+      text-align: center;
+    }
+  }
+  > .long-desc {
+    position: absolute;
+    bottom: 30px;
+    right: 30px;
+    color: white;
+    overflow: hidden;
+    font-family: KaiTi;
+    color: #ffffff;
+    animation: none;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    z-index: 2;
+
+    > .page2-box {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+
+      > img {
+        width: 75%;
+        margin-bottom: 10px;
+      }
+
+      > div {
+        font-size: calc(
+          20 / v-bind("windowSizeWhenDesignForRef") *
+            v-bind("windowSizeInCssForRef")
+        );
+        font-family: KaiTi;
+      }
+    }
+  }
+
 }
 </style>

src/views/StartupView.vue

@@ -19,12 +19,12 @@
       draggable="false"
     > -->
 
-    <img
+    <!-- <img
       class="title"
       src="@/assets/images/startup-title.png"
       alt=""
       draggable="false"
-    >
+    > -->
 
     <Transition name="fade-in">
       <img
@@ -47,6 +47,9 @@
       @over="isStartBtnBlink = true"
       @click="onClickStart"
     />
+    <div class="start-title">
+      点击开始
+    </div>
 
     <Transition name="fade-in">
       <video
@@ -129,7 +132,7 @@ function onVideoEnd() {
   width: 100%;
   height: 100%;
   background-color: #fff;
-  background-image: url(@/assets/images/startup-bg.jpg);
+  background-image: url(@/assets/images/startup-bg.png);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
@@ -154,21 +157,31 @@ function onVideoEnd() {
     left: 50%;
     top: 40%;
     transform: translate(-50%, -50%);
-    width: calc(152 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    width: 152px;
   }
 
   >.loading-tip{
     position: absolute;
     left: 50%;
-    bottom: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    bottom: 100px;
     transform: translateX(-48%);
-    width: calc(72 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    height: calc(72 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    width: 72px;
+    height: 72px;
   }
   >.btn-start{
     position: absolute;
     left: 50%;
-    bottom: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    bottom: 100px;
+    transform: translateX(-48%);
+    cursor: pointer;
+  }
+  >.start-title{
+    color: #FFFFFF;
+    font-size: 24px;
+    font-family: KaiTi;
+    position: absolute;
+    bottom: 60px;
+    left: 50%;
     transform: translateX(-48%);
   }