shabi

README.md

@@ -8,10 +8,8 @@
 ### bug fix
 邵总
 
-左右滑
-
 ### 优化
-内容扩展页 按钮边框
+内容扩展页 按钮边框 todo
 
 内容扩展页 标题装饰小圈
 

src/store/index.js

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

src/views/MoreContent.vue

@@ -5,8 +5,6 @@
     <div
       ref="scrollTarget"
       class="scroll-target"
-      @touchstart="handletouchstart($event)"
-      @touchmove="touchMove($event)"
     >
       <img
         class="bg"
@@ -136,14 +134,20 @@
           class="shuang-gou-she-se-group"
         >
           <button
-            class="watch-detail"
+            class="watch-detail animation-show-hide"
             @click="onClickShuangGouEntry"
           >
             查看详情
           </button>
-          <h2 class="group-title">
+          <div class="group-title">
             双钩设色
-          </h2>
+            <img
+              class="deco"
+              src="@/assets/images/more-content-deco.png"
+              alt=""
+              draggable="false"
+            >
+          </div>
         </div>
         <img
           class="bamboo-1_02"
@@ -156,25 +160,33 @@
         >
           <div class="button-group">
             <button
-              class="poem"
+              class="poem animation-show-hide"
               @click="onClickEntryAtMoZhu('PoemList')"
             >
               人文
             </button>
             <button
+              class="animation-show-hide"
               @click="onClickEntryAtMoZhu('PaintingList')"
             >
               画作
             </button>
             <button
+              class="animation-show-hide"
               @click="onClickEntryAtMoZhu('BambooBook')"
             >
               竹谱
             </button>
           </div>
-          <h2 class="group-title">
+          <div class="group-title">
             墨竹
-          </h2>
+            <img
+              class="deco"
+              src="@/assets/images/more-content-deco.png"
+              alt=""
+              draggable="false"
+            >
+          </div>
         </div>
         <img
           class="bamboo-1_03"
@@ -351,27 +363,34 @@ function onClickEntryAtMoZhu(pathName) {
 }
 
 /**
- * 左滑跳转新页面
+ * 跳转下一个页面
  */
-const fingerPosXWhenTouchStart = ref(0)
-const isAtBorderWhenTouchStart = ref(false)
-const handletouchstart = (event) => {
-  fingerPosXWhenTouchStart.value = event.changedTouches[0].pageX
-  if (Math.abs(maxTranslateLength.value - translateLength.value - windowWidth.value) < 1) {
-    isAtBorderWhenTouchStart.value = true
-  } else {
-    isAtBorderWhenTouchStart.value = false
-  }
-}
-const touchMove = (event) => {
-  let currentX = event.changedTouches[0].pageX
-  let tX = currentX - fingerPosXWhenTouchStart.value
-  if (tX < -1 && isAtBorderWhenTouchStart.value) {
+// const fingerPosXWhenTouchStart = ref(0)
+// const isAtBorderWhenTouchStart = ref(false)
+// const handletouchstart = (event) => {
+//   fingerPosXWhenTouchStart.value = event.changedTouches[0].pageX
+//   if (Math.abs(maxTranslateLength.value - translateLength.value - windowWidth.value) < 1) {
+//     isAtBorderWhenTouchStart.value = true
+//   } else {
+//     isAtBorderWhenTouchStart.value = false
+//   }
+// }
+// const touchMove = (event) => {
+//   let currentX = event.changedTouches[0].pageX
+//   let tX = currentX - fingerPosXWhenTouchStart.value
+//   if (tX < -1 && isAtBorderWhenTouchStart.value) {
+//     router.push({
+//       name: 'Game',
+//     })
+//   }
+// }
+watch(currentAnchorIdx, (v) => {
+  if (v === 2) {
     router.push({
       name: 'Game',
     })
   }
-}
+})
 </script>
 
 <style lang="less" scoped>
@@ -464,7 +483,7 @@ const touchMove = (event) => {
         position: absolute;
         top: 0;
         height: 100%;
-        left: calc(479px * v-bind('layer3SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        left: calc(393px * v-bind('layer3SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
       >.bamboo-3_02{
         position: absolute;
@@ -486,13 +505,13 @@ const touchMove = (event) => {
         position: absolute;
         top: 0;
         height: 100%;
-        left: calc(503px * v-bind('layer2SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        left: calc(420px * v-bind('layer2SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
       >.bamboo-2_02{
         position: absolute;
         top: 0;
         height: 100%;
-        left: calc(894px * v-bind('layer2SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        left: calc(920px * v-bind('layer2SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
     }
     >.layer-1{
@@ -517,13 +536,25 @@ const touchMove = (event) => {
           position: absolute;
           top: calc(182px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
           left: 0;
+          background-image: url(@/assets/images/fade-chapter-btn-bg-big.png);
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center center;
+          padding-top: calc(3px / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           .button-common-style();
         }
-        >h2.group-title{
+        >div.group-title{
           position: absolute;
           top: 0;
           left: calc(41px * v-bind('windowHeight') / v-bind('windowHeightDesign'));;
           .group-title-common-style();
+          >img.deco{
+            position: absolute;
+            bottom: 0.9em;
+            right: -0.05em;
+            width: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            height: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          }
         }
       }
       >.bamboo-1_02{
@@ -542,15 +573,28 @@ const touchMove = (event) => {
           left: 0;
           display: flex;
           flex-direction: column;
+          gap: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           >button{
             .button-common-style();
+            background-image: url(@/assets/images/fade-chapter-btn-bg-small.png);
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center center;
+            padding-top: calc(3px / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           }
         }
-        >h2.group-title{
+        >div.group-title{
           position: absolute;
           top: 0;
           left: calc(41px * v-bind('windowHeight') / v-bind('windowHeightDesign'));;
           .group-title-common-style();
+          >img.deco{
+            position: absolute;
+            bottom: 0.9em;
+            right: 0.1em;
+            width: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            height: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          }
         }
       }
       >.bamboo-1_03{

src/views/StartupView.vue

@@ -20,12 +20,13 @@
     >
 
     <Transition name="fade-in-out">
-      <div
+      <img
         v-if="isShowLoadingTip"
-        class="loading-tip animation-show-hide"
+        class="loading-tip"
+        src="@/assets/images/loading.png"
+        alt=""
+        draggable="false"
       >
-        loading...
-      </div>
       <button
         v-else-if="isShowStartBtn"
         class="start"
@@ -37,7 +38,6 @@
           alt=""
           draggable="false"
         >
-        <span class="text">开始</span>
       </button>
     </Transition>
 
@@ -134,12 +134,9 @@ function onVideoEnd() {
     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;
+    transform: translateX(-48%);
+    width: calc(72 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(72 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
   }
   >button.start{
     position: absolute;
@@ -165,12 +162,6 @@ function onVideoEnd() {
       // animation-timing-function: linear;
       // animation-iteration-count: infinite;
     }
-    >.text{
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-    }
   }
 
   >video.transition-video{