优化

README.md

@@ -11,8 +11,6 @@
 ### 优化
 内容扩展页 按钮边框 todo
 
-内容扩展页 标题装饰小圈
-
 内容扩展页 落叶开发
 
 内容扩展页 回到这一页时复原

src/components/BtnSkip.vue

@@ -0,0 +1,60 @@
+<template>
+  <div 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')
+</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;
+  >.text{
+    font-family: KingHwa_OldSong, 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,6 +18,7 @@ import BtnBack from '@/components/BtnBack.vue'
 import OperationTip from '@/components/OperationTip.vue'
 import HotspotComp from '@/components/HotspotComp.vue'
 import SerialFrames from '@/components/LongImageSerialFrames.vue'
+import BtnSkip from '@/components/BtnSkip.vue'
 
 console.log(`version: ${process.env.VUE_APP_VERSION}`)
 console.log(`Build time: ${process.env.VUE_APP_UPDATE_TIME}`)
@@ -89,6 +90,7 @@ app.use(store)
   .component('Swiper', Swiper)
   .component('SwiperSlide', SwiperSlide)
   .component('SerialFrames', SerialFrames)
+  .component('BtnSkip', BtnSkip)
   .mount('#app')
 
 //  you can reset the default options at any other time

src/views/HomeView.vue

@@ -255,6 +255,14 @@
         })"
       />
     </Transition>
+    <Transition name="fade-in">
+      <BtnSkip
+        v-if="isShowSkip"
+        @click="router.push({
+          name: 'MoreContent',
+        })"
+      />
+    </Transition>
   </div>
 </template>
 
@@ -468,6 +476,7 @@ function showBigPainting() {
  */
 const videoFadeToNextPageEl = ref(null)
 const isShowVideoFadeToNextPage = ref(false)
+const isShowSkip = ref(false)
 const fingerPosYWhenTouchStart = ref(0)
 const isAtBottomWhenTouchStart = ref(false)
 const handletouchstart = (event) => {
@@ -486,6 +495,9 @@ const touchMove = (event) => {
     nextTick(() => {
       videoFadeToNextPageEl.value.play()
     })
+    setTimeout(() => {
+      isShowSkip.value = true
+    }, 2000)
   }
 }
 

src/views/StartupView.vue

@@ -54,6 +54,12 @@
         @ended="onVideoEnd"
       />
     </Transition>
+    <Transition name="fade-in">
+      <BtnSkip
+        v-if="isShowSkip"
+        @click="onVideoEnd"
+      />
+    </Transition>
   </div>
 </template>
 
@@ -86,12 +92,16 @@ setTimeout(() => {
 }, 4000)
 
 const isShowVideo = ref(false)
+const isShowSkip = ref(false)
 const videoEl = ref(null)
 function onClickStart() {
   isShowVideo.value = true
   nextTick(() => {
     videoEl.value.play()
   })
+  setTimeout(() => {
+    isShowSkip.value = true
+  }, 2000)
 }
 function onVideoEnd() {
   store.dispatch('recordShownStartup')