Merge branch 'master' of http://192.168.0.115:3000/renyicun/NanjingMuseumWuJinZang

README.md

@@ -4,10 +4,22 @@
 访问url：https://culture.4dage.com/NanjingMuseumWuJinZang/index.html#/
 
 ## 任一存的todos
-内容扩展页 滚动行为原理开发
 
-内容扩展页开发
+### 优化
+拼音问题
+
+首页热点详情的背景色问题
+
+内容扩展页 落叶开发
+
+内容扩展页 滚动锚定效果开发
 
-启动页
+### 功能
+启动页开发
+
+转场视频
+
+内容扩展页开发
 
+### 成果
 保存组件：序列帧

src/store/index.js

@@ -9,7 +9,7 @@ import { createStore } from 'vuex'
 
 export default createStore({
   state: {
-    haveShownStartup: true,
+    haveShownStartup: process.env.VUE_APP_CLI_MODE === 'dev' ? false : false,
     isStartupInvisible: true,
     // loginStatus: loginStatusEnum.notLogin,
     // token: '',

src/views/HomeView.vue

@@ -67,7 +67,7 @@
       </div>
       <img
         class="painting-border"
-        src="@/assets/images/painting-border.png"
+        src="@/assets/images/painting-border-new.png"
         alt=""
         draggable="false"
       >
@@ -468,7 +468,7 @@ function showBigPainting() {
   >.title-wrap{
     position: absolute;
     left: 50%;
-    top: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    top: calc(6 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     transform: translate(-50%);
     width: calc(43 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     height: calc(180 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -557,9 +557,9 @@ function showBigPainting() {
     >img.painting, img.painting-stem, img.painting-leaf, img.painting-stone{
       position: absolute;
       left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      width: 90%;
+      top: calc(103 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      transform: translate(-50%, 0);
+      width: calc(245 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     }
   }
   >.hotspot-wrap{
@@ -572,14 +572,14 @@ function showBigPainting() {
     pointer-events: none;
     >.hotspot-1{
       position: absolute;
-      top: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      top: calc(54 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       right: calc(0 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       pointer-events: initial;
     }
     >.hotspot-2{
       position: absolute;
-      left: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      top: calc(125 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      left: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      top: calc(222 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       pointer-events: initial;
     }
     >.hotspot-3{

src/views/PaintingList.vue

@@ -9,7 +9,7 @@
       :total-width="13194"
       :height="865"
       :frame-number="33"
-      :frame-duration="50"
+      :frame-duration="55"
     />
     <SerialFrames
       class="bg-serial-frames-bottom"
@@ -17,7 +17,7 @@
       :total-width="13194"
       :height="865"
       :frame-number="33"
-      :frame-duration="50"
+      :frame-duration="55"
     />
 
     <ul
@@ -219,7 +219,8 @@ const ageRenderInfo = {
 function getAuthorList(paintingGroup) {
   const temp = paintingGroup.map((item) => {
     let author = item['作者']
-    return author.split('（')[0]
+    // return author.split('（')[0]
+    return author
   })
   return Array.from(new Set(temp))
 }

src/views/PoemList.vue

@@ -9,7 +9,7 @@
         :total-width="13001"
         :height="852"
         :frame-number="33"
-        :frame-duration="50"
+        :frame-duration="55"
       />
       <SerialFrames
         v-else-if="getTypesettingIdx(currentPoem['类型']) === 2"
@@ -18,7 +18,7 @@
         :total-width="13001"
         :height="852"
         :frame-number="33"
-        :frame-duration="50"
+        :frame-duration="55"
       />
       <SerialFrames
         v-else-if="getTypesettingIdx(currentPoem['类型']) === 3"
@@ -27,7 +27,7 @@
         :total-width="13001"
         :height="852"
         :frame-number="33"
-        :frame-duration="50"
+        :frame-duration="55"
       />
       <SerialFrames
         v-else-if="getTypesettingIdx(currentPoem['类型']) === 4"
@@ -36,7 +36,7 @@
         :total-width="13001"
         :height="852"
         :frame-number="33"
-        :frame-duration="50"
+        :frame-duration="55"
       />
     </Transition>
 

src/views/StartupView.vue

@@ -1,23 +1,65 @@
 <template>
   <div class="startup-view">
     <span class="font-load-trigger">这是为了尽早触发字体文件加载</span>
-    <Transition
-      name="fade-in"
+
+    <!-- 背景序列帧 -->
+    <SerialFrames
+      class="bg-serial-frames"
+      :image-src="require(`@/assets/images/serial-frame-startup.png`)"
+      :total-width="22950"
+      :height="675"
+      :frame-number="51"
+      :frame-duration="55"
+    />
+
+    <img
+      class="title"
+      src="@/assets/images/startup-title.png"
+      alt=""
+      draggable="false"
     >
+
+    <Transition name="fade-in-out">
+      <div
+        v-if="isShowLoadingTip"
+        class="loading-tip animation-show-hide"
+      >
+        loading...
+      </div>
       <button
-        v-show="isShowStartBtn"
+        v-else-if="isShowStartBtn"
         class="start"
-        @click="onclickStart"
+        @click="onClickStart"
       >
+        <img
+          class="bg"
+          src="@/assets/images/start-btn-bg.png"
+          alt=""
+          draggable="false"
+        >
         开始
       </button>
     </Transition>
+
+    <Transition name="fade-in">
+      <video
+        v-if="isShowVideo"
+        ref="videoEl"
+        class="transition-video"
+        src="@/assets/videos/startup.mp4"
+        playsinline
+        webkit-playsinline="true"
+        x5-video-player-type="h5"
+        muted
+        @ended="onVideoEnd"
+      />
+    </Transition>
   </div>
 </template>
 
 <script setup>
 import useSizeAdapt from "@/useFunctions/useSizeAdapt"
-import { ref, computed, watch, onMounted, inject } from "vue"
+import { ref, computed, watch, onMounted, inject, nextTick } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 
@@ -32,11 +74,26 @@ const {
   windowSizeWhenDesignForRef,
 } = useSizeAdapt()
 
+
+
+const isShowLoadingTip = ref(true)
 const isShowStartBtn = ref(false)
 setTimeout(() => {
-  isShowStartBtn.value = true
+  isShowLoadingTip.value = false
 }, 2000)
-function onclickStart() {
+setTimeout(() => {
+  isShowStartBtn.value = true
+}, 4000)
+
+const isShowVideo = ref(false)
+const videoEl = ref(null)
+function onClickStart() {
+  isShowVideo.value = true
+  nextTick(() => {
+    videoEl.value.play()
+  })
+}
+function onVideoEnd() {
   store.dispatch('recordShownStartup')
 }
 </script>
@@ -57,6 +114,33 @@ function onclickStart() {
     opacity: 0;
     font-family: KaiTi, KaiTi;
   }
+
+  >.bg-serial-frames{
+    position: absolute;
+    left: 0;
+    top: 0;
+    mix-blend-mode: multiply;
+  }
+
+  >img.title{
+    position: absolute;
+    left: 50%;
+    top: 40%;
+    transform: translate(-50%, -50%);
+    width: calc(152 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+
+  >.loading-tip{
+    position: absolute;
+    left: 50%;
+    bottom: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translateX(-50%);
+    font-family: KingHwa_OldSong, KingHwa_OldSong;
+    font-weight: 400;
+    font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    color: #FFFFFF;
+    line-height: 1.5em;
+  }
   >button.start{
     position: absolute;
     left: 50%;
@@ -64,15 +148,40 @@ function onclickStart() {
     transform: translateX(-50%);
     width: calc(71 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     height: calc(69 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    background-image: url(@/assets/images/start-btn-bg.png);
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center center;
     font-family: KaiTi, KaiTi;
     font-weight: 400;
     font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     color: #FFFFFF;
     line-height: calc(29 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    >img.bg{
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      animation-name: spin;
+      animation-duration: 1s;
+      animation-timing-function: linear;
+      animation-iteration-count: infinite;
+    }
+  }
+
+  >video.transition-video{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
   }
 }
 </style>