shabi

README.md

@@ -20,6 +20,8 @@
 
 内容扩展页 标题装饰小圈
 
+内容扩展页 操作提示文字竖着
+
 ### 功能
 转场视频
 

src/store/index.js

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

src/views/MoreContent.vue

@@ -84,6 +84,14 @@
     <BtnBack
       @click="router.go(-1)"
     />
+
+    <OperationTip
+      class="operation-tip"
+      :direction="'h'"
+      :text="'下一章'"
+      :is-show="isShowOperationTip"
+      :color="'green'"
+    />
   </div>
 </template>
 
@@ -95,6 +103,8 @@ import PoemList from '@/views/PoemList.vue'
 import paintingList from '@/views/PaintingList.vue'
 import useSmoothSwipe from '@/useFunctions/useSmoothSwipe.js'
 import { useWindowSize } from '@vueuse/core'
+import OperationTip from "@/components/OperationTip.vue"
+import useSizeAdapt from "@/useFunctions/useSizeAdapt.js"
 
 const route = useRoute()
 const router = useRouter()
@@ -102,6 +112,11 @@ const store = useStore()
 
 const $env = inject('$env')
 
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
 const windowWidthDesign = 1560
 const windowHeightDesign = 844
 
@@ -140,7 +155,17 @@ watch(translateLength, (v) => {
   moZhuGroupLeft.value = moZhuGroupInitialLeft - v
 })
 
-
+const isShowOperationTip = ref(true)
+const unwatch = watch(translateLength, (v) => {
+  console.log(v)
+  isShowOperationTip.value = false
+  unwatch()
+  // if (Math.abs(v - (scrollerEl.value.scrollHeight - scrollerEl.value.clientHeight)) <= 1) {
+  //   router.push({
+  //     name: 'MoreContent',
+  //   })
+  // }
+})
 </script>
 
 <style lang="less" scoped>
@@ -222,5 +247,10 @@ watch(translateLength, (v) => {
       }
     }
   }
+  .operation-tip{
+    position: absolute;
+    right: calc(44 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    bottom: calc(74 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
 }
 </style>

src/views/PaintingDetail.vue

@@ -174,10 +174,9 @@ onMounted(() => {
     descTextElScrollTop.value = descTextEl.value.scrollTop
   })
 })
-watch(descTextElScrollTop, (v) => {
-  if (v > 0) {
-    isShowOperationTip.value = false
-  }
+const unwatch = watch(descTextElScrollTop, (v) => {
+  isShowOperationTip.value = false
+  unwatch()
 })
 
 const isAnimating = ref(true)

src/views/PaintingList.vue

@@ -258,10 +258,9 @@ const specialDesc = configExcel['其他'][4]['修篁树石图'][1]['作品简介
 const isShowPaintingStyleDesc = ref(false)
 
 const isShowOperationTip = ref(true)
-watch(menuElScrollLeft, (v) => {
-  if (v > 0) {
-    isShowOperationTip.value = false
-  }
+const unwatch = watch(menuElScrollLeft, (v) => {
+  isShowOperationTip.value = false
+  unwatch()
 })
 
 </script>

src/views/PoemList.vue

@@ -224,11 +224,10 @@ const onSlideChange = (e) => {
  * 操作提示
  */
 const isShowOperationTip = ref(true)
-watch(currentIdx, (v) => {
-  if (isShowOperationTip.value) {
-    isShowOperationTip.value = false
-    isShowOperationTipShadow.value = false
-  }
+const unwatch = watch(currentIdx, (v) => {
+  isShowOperationTip.value = false
+  isShowOperationTipShadow.value = false
+  unwatch()
 })
 const isShowOperationTipShadow = ref(true)
 setTimeout(() => {