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

src/components/OperationTip.vue

@@ -7,7 +7,7 @@
       <img
         class=""
         :src="
-          require(`@/assets/images/icon_operation_${props.direction}_${props.color}.png`)
+          require(`@/assets/images/icon_operation_${props.type}_${props.color}.png`)
         "
         alt=""
         draggable="false"
@@ -29,9 +29,9 @@ import { ref, computed, watch } from "vue"
 const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()
 
 const props = defineProps({
-  direction: {
+  type: {
     type: String,
-    default: "v", // h
+    default: "wheel", // 'wheel', 'click'
   },
   color: {
     type: String,

src/store/index.js

@@ -1,105 +1,28 @@
 import { createStore } from 'vuex'
-// import { reportVisitPage } from '@/api.js'
-
-// const loginStatusEnum = {
-//   notLogin: 'not-login',
-//   visitor: 'visitor',
-//   wxUser: 'wxUser',
-// }
 
 export default createStore({
   state: {
     haveShownStartup: process.env.VUE_APP_CLI_MODE === 'dev' ? true : false,
-    // haveShownStartup: false,
-    // loginStatus: loginStatusEnum.notLogin,
-    // token: '',
-    // userInfo: {
-    //   userName: '',
-    //   userId: null,
-    // },
-    // pageVisitRecord: {},
+    scrollPosInMoreContentPage: 0,
+    scrollPosInPaintingListPage: 0,
   },
   getters: {
-    // loginStatusEnum() {
-    //   return loginStatusEnum
-    // }
   },
   mutations: {
     setShowingStartup(state, value) {
       state.haveShownStartup = value
     },
-    // setLoginStatus(state, value) {
-    //   state.loginStatus = value
-    // },
-    // setUserName(state, value) {
-    //   state.userInfo.userName = value
-    // },
-    // setToken(state, value) {
-    //   state.token = value
-    //   localStorage.setItem('token', value)
-    // },
-    // setUserInfo(state, value) {
-    //   state.userInfo = value
-    //   localStorage.setItem('userInfo', JSON.stringify(value))
-    //   if (state.userInfo.score === null) {
-    //     state.userInfo.score = 0
-    //   }
-    // },
-    // logoutCallback(state) {
-    //   state.loginStatus = loginStatusEnum.notLogin
-    //   state.token = ''
-    //   localStorage.removeItem('token')
-    //   state.userInfo = {}
-    //   localStorage.removeItem('userInfo')
-    // },
-    // getPageVisitRecordFromStorage(state) {
-    //   let pageVisitRecordStr = localStorage.getItem('pageVisitRecord')
-    //   if (pageVisitRecordStr) {
-    //     state.pageVisitRecord = JSON.parse(pageVisitRecordStr)
-    //   }
-    // },
-    // setPageVisitRecord(state, value) {
-    //   state.pageVisitRecord = value
-    // }
+    setScrollPosInMoreContentPage(state, v) {
+      state.scrollPosInMoreContentPage = v
+    },
+    setScrollPosInPaintingListPage(state, v) {
+      state.scrollPosInPaintingListPage = v
+    },
   },
   actions: {
     recordShownStartup({ state, commit }) {
       commit('setShowingStartup', true)
     },
-    // recordPageVisitIfNeeded({ state, commit }, { pageId }) {
-    //   let needUpdateStorage = false
-
-    //   let userId = undefined
-    //   if (state.loginStatus !== loginStatusEnum.wxLogin) {
-    //     userId = 'visitor'
-    //   } else {
-    //     userId = state.userInfo.userId
-    //   }
-
-    //   if (!state.pageVisitRecord[userId]) {
-    //     state.pageVisitRecord[userId] = {}
-    //     needUpdateStorage = true
-    //   }
-
-    //   let lastVisitTime = undefined
-    //   lastVisitTime = state.pageVisitRecord[userId][pageId]
-    //   if (lastVisitTime === undefined) {
-    //     state.pageVisitRecord[userId][pageId] = 0
-    //     needUpdateStorage = true
-    //   }
-
-    //   let lastVisitTimeObj = new Date(lastVisitTime)
-    //   let thisVisitTimeObj = new Date()
-    //   if (!(lastVisitTimeObj.getFullYear() === thisVisitTimeObj.getFullYear() && lastVisitTimeObj.getMonth() === thisVisitTimeObj.getMonth() && lastVisitTimeObj.getDay() === thisVisitTimeObj.getDay())) {
-    //     state.pageVisitRecord[userId][pageId] = thisVisitTimeObj.getTime()
-    //     needUpdateStorage = true
-    //     reportVisitPage(pageId)
-    //   }
-
-    //   if (needUpdateStorage) {
-    //     localStorage.setItem('pageVisitRecord', JSON.stringify(state.pageVisitRecord))
-    //   }
-    // }
   },
   modules: {
   }

src/useFunctions/useSmoothSwipe.js

@@ -41,7 +41,8 @@ export default function useSmoothSwipe({
   viewportWidth = document.documentElement.clientWidth,
   speedFactor = 1,
   damping = 0.003,
-  enableAutoMoving = false
+  enableAutoMoving = false,
+  initialTranslateLength = 0
 } = {}) {
   const isOperating = ref(false)
   const haveSwipedThisTime = ref(false)
@@ -49,7 +50,7 @@ export default function useSmoothSwipe({
   let lastMoveEventTimeStamp = 0
   let lastCursorPos = 0
   let moveSpeed = ref(0)
-  let translateLength = ref(0)
+  let translateLength = ref(initialTranslateLength)
   let maxTranslateLengthInner = Infinity
   let isAutoMoving = ref(false)
   let beginAutoMoveIntervalId = null
@@ -58,7 +59,7 @@ export default function useSmoothSwipe({
 
   //
   watch(moveSpeed, (v) => {
-    if (!haveSwipedThisTime.value && v) {
+    if (!haveSwipedThisTime.value && Math.abs(v) > 0.1) {
       haveSwipedThisTime.value = true
     }
   })
@@ -93,7 +94,6 @@ export default function useSmoothSwipe({
   }
 
   function speedUp(v) {
-    console.log('sdf')
     moveSpeed.value += v
   }
 
@@ -259,10 +259,10 @@ export default function useSmoothSwipe({
     watch(scrollTargetRef, (v) => {
       if (v) {
         v.addEventListener('wheel', onWheel)
-        // v.addEventListener('mousedown', onMouseDown)
-        // v.addEventListener('mouseleave', onMouseLeave)
-        // v.addEventListener('mousemove', onMouseMove)
-        // v.addEventListener('mouseup', onMouseUp)
+        v.addEventListener('mousedown', onMouseDown)
+        v.addEventListener('mouseleave', onMouseLeave)
+        v.addEventListener('mousemove', onMouseMove)
+        v.addEventListener('mouseup', onMouseUp)
         // v.addEventListener('touchstart', onTouchStart)
         // v.addEventListener('touchmove', onTouchMove)
         // v.addEventListener('touchend', onTouchEnd)

src/views/BambooList.vue

@@ -203,7 +203,6 @@ const layer1Left = ref(layer1InitialLeft)
 watch(
   translateLength,
   (v) => {
-    console.log(v)
     layer1Left.value = layer1InitialLeft - v
   },
   {

src/views/GameView.vue

@@ -62,7 +62,7 @@ onMounted(() => {
   }
 
   window.closeGame = () => {
-    router.replace('/more-content?anchorIdx=2')
+    router.go('-1')
   }
 })
 </script>

src/views/HotspotDetail1.vue

@@ -18,7 +18,7 @@
     >
       <img
         class=""
-        :src="require(`@/assets/images/icon_white_click.png`)"
+        :src="require(`@/assets/images/icon_operation_click_white.png`)"
         alt=""
         draggable="false"
       >

src/views/MoreContent.vue

@@ -11,7 +11,7 @@
         :style="{
           left: bgLeft + 'px',
         }"
-        src="@/assets/images/fade-chapter-wood/bg-min.jpg"
+        src="@/assets/images/more-content-wood/bg-min.jpg"
         alt=""
         draggable="false"
       >
@@ -24,7 +24,7 @@
       >
         <img
           class="bamboo"
-          src="@/assets/images/fade-chapter-wood/4-min.png"
+          src="@/assets/images/more-content-wood/4-min.png"
           alt=""
           draggable="false"
         >
@@ -38,7 +38,7 @@
       >
         <img
           class="bamboo"
-          src="@/assets/images/fade-chapter-wood/3-min.png"
+          src="@/assets/images/more-content-wood/3-min.png"
           alt=""
           draggable="false"
         >
@@ -52,7 +52,7 @@
       >
         <img
           class="bamboo"
-          src="@/assets/images/fade-chapter-wood/2-min.png"
+          src="@/assets/images/more-content-wood/2-min.png"
           alt=""
           draggable="false"
         >
@@ -66,7 +66,7 @@
       >
         <img
           class="bamboo"
-          src="@/assets/images/fade-chapter-wood/1-min.png"
+          src="@/assets/images/more-content-wood/1-min.png"
           alt=""
           draggable="false"
         >
@@ -102,7 +102,7 @@
           <div class="button-group animation-show-long-hide">
             <img
               class="splitter"
-              src="@/assets/images/fade-chapter-wood/btn-splitter.png"
+              src="@/assets/images/more-content-wood/btn-splitter.png"
               alt=""
               draggable="false"
             >
@@ -114,7 +114,7 @@
             </button>
             <img
               class="splitter"
-              src="@/assets/images/fade-chapter-wood/btn-splitter.png"
+              src="@/assets/images/more-content-wood/btn-splitter.png"
               alt=""
               draggable="false"
             >
@@ -126,7 +126,7 @@
             </button>
             <img
               class="splitter"
-              src="@/assets/images/fade-chapter-wood/btn-splitter.png"
+              src="@/assets/images/more-content-wood/btn-splitter.png"
               alt=""
               draggable="false"
             >
@@ -138,7 +138,7 @@
             </button>
             <img
               class="splitter"
-              src="@/assets/images/fade-chapter-wood/btn-splitter.png"
+              src="@/assets/images/more-content-wood/btn-splitter.png"
               alt=""
               draggable="false"
             >
@@ -193,10 +193,7 @@
           </div>
           <div
             class="restart"
-            @click="() => {
-              store.state.haveShownStartup = false;
-              router.replace('/?back=1');
-            }"
+            @click="onClickRestart"
           >
             重新开始
           </div>
@@ -236,15 +233,16 @@
     <BtnBack @click="router.go('-1')" />
 
     <OperationTip
+      v-show="isShowOperationTip"
       class="operation-tip"
-      :text="'左右滑动'"
+      :text="'向下滑动滚轮'"
       :color="'green'"
     />
   </div>
 </template>
 
 <script setup>
-import { ref, computed, watch, onBeforeMount, nextTick } from "vue"
+import { ref, computed, watch, onBeforeMount, nextTick, onBeforeUnmount } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import useSmoothSwipe from "@/useFunctions/useSmoothSwipe.js"
@@ -262,15 +260,17 @@ const scrollTarget = ref(null)
 const { width: windowWidth, height: windowHeight } = useWindowSize()
 
 const maxTranslateLength = computed(() => {
-  return (windowHeight.value * windowWidthDesign) / windowHeightDesign - 110 // 有的图层不够长导致移动到最右侧不好看，隐藏掉。
+  return windowHeight.value * windowWidthDesign / windowHeightDesign - 200 * windowHeight.value / windowHeightDesign // 有的图层不够长导致移动到最右侧不好看，隐藏掉。
 })
 
 const {
   translateLength,
+  haveSwipedThisTime, // 用于在click事件中判断是否是鼠标按下后左右滑动导致的
 } = useSmoothSwipe({
   scrollTargetRef: scrollTarget,
   maxTranslateLength,
   viewportWidth: windowWidth,
+  initialTranslateLength: store.state.scrollPosInMoreContentPage
 })
 
 // 背景位移
@@ -312,12 +312,18 @@ watch(
 )
 
 function onClickShuangGouEntry() {
+  if (haveSwipedThisTime.value) {
+    return
+  }
   router.push({
     name: 'ShuangGou',
   })
 }
 
 function onClickEntryAtMoZhu(pathName) {
+  if (haveSwipedThisTime.value) {
+    return
+  }
   router.push({
     name: pathName,
   })
@@ -325,13 +331,34 @@ function onClickEntryAtMoZhu(pathName) {
 
 // 点击线上展厅
 const OpenScene = () => {
+  if (haveSwipedThisTime.value) {
+    return
+  }
   const musicDom = document.getElementById("bg-music")
   musicDom.pause()
   router.push('/scene')
 }
 
+function onClickRestart() {
+  if (haveSwipedThisTime.value) {
+    return
+  }
+  window.location.href = window.location.pathname
+}
+
 const isShowCast = ref(false)
 
+const isShowOperationTip = ref(true)
+const unwatch = watch(translateLength, (v) => {
+  if (v) {
+    isShowOperationTip.value = false
+    unwatch()
+  }
+})
+
+onBeforeUnmount(() => {
+  store.commit('setScrollPosInMoreContentPage', translateLength.value)
+})
 </script>
 
 <style lang="less" scoped>
@@ -422,7 +449,7 @@ const isShowCast = ref(false)
           );
           color: #474747;
           left: 0;
-          background-image: url(@/assets/images/fade-chapter-wood/btn-bg-big.png);
+          background-image: url(@/assets/images/more-content-wood/btn-bg-big.png);
           background-size: contain;
           background-repeat: no-repeat;
           background-position: center center;
@@ -493,7 +520,7 @@ const isShowCast = ref(false)
           > div {
             .button-common-style();
             color: #474747;
-            background-image: url(@/assets/images/fade-chapter-wood/btn-bg-big.png);
+            background-image: url(@/assets/images/more-content-wood/btn-bg-big.png);
             background-size: contain;
             background-repeat: no-repeat;
             background-position: center center;
@@ -607,14 +634,8 @@ const isShowCast = ref(false)
 
   > .operation-tip {
     position: absolute;
-    right: calc(
-      44 / v-bind("windowSizeWhenDesignForRef") *
-        v-bind("windowSizeInCssForRef")
-    );
-    bottom: calc(
-      74 / v-bind("windowSizeWhenDesignForRef") *
-        v-bind("windowSizeInCssForRef")
-    );
+    bottom: calc(234px  * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+    right: calc(507px  * v-bind("windowHeight") / v-bind("windowHeightDesign"));
   }
 }
 </style>

src/views/PaintingList.vue

@@ -118,6 +118,7 @@
               class="top-wrap-img"
             >
               <img
+                draggable="false"
                 :style="{height:item['音图'] == 'zhaomengfu1.png' ? '78%':''}"
                 :src="`${$env.BASE_URL}configMultiMedia/author/${item['音图']}`"
               >
@@ -201,15 +202,23 @@
       @click="router.go(-1)"
     />
     <OperationTip
-      class="operation-tip"
-      direction="h"
-      :is-show="isShowOperationTip"
+      v-show="isShowClickTip"
+      class="operation-tip-click"
+      :text="'点击收起'"
+      :color="'white'"
+      type="click"
+    />
+    <OperationTip
+      v-show="isShowWheelTip"
+      class="operation-tip-wheel"
+      :text="'向下滑动滚轮'"
+      :color="'green'"
     />
   </div>
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted, inject } from "vue"
+import { ref, computed, watch, onMounted, inject, onBeforeUnmount } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import useSmoothSwipe from "@/useFunctions/useSmoothSwipe.js"
@@ -224,7 +233,6 @@ const store = useStore()
 const $env = inject('$env')
 
 const menuEl = ref(null)
-const menuElScrollLeft = ref(0)
 
 const { width: windowWidth, height: windowHeight } = useWindowSize()
 const windowHeightDesign = 1080 - 71 - 37 // 设计稿里视口高度。注意要减去上下边栏
@@ -249,13 +257,16 @@ const {
   translateLength,
   computeMaxTranslateLengthInnerByScrollTarget,
   speedUp,
+  haveSwipedThisTime, // 用于在click事件中判断是否是鼠标按下后左右滑动导致的
 } = useSmoothSwipe({
   scrollTargetRef: menuEl,
   maxTranslateLength: undefined,
   viewportWidth: windowWidth,
+  initialTranslateLength: store.state.scrollPosInPaintingListPage
 })
 setTimeout(() => {
   computeMaxTranslateLengthInnerByScrollTarget()
+  menuEl.value.scrollLeft = translateLength.value
 }, 100)
 watch(translateLength, (v) => {
   menuEl.value.scrollLeft = v
@@ -304,6 +315,7 @@ const ageRenderInfo = {
 function getAuthorList(paintingGroup) {
   const temp = paintingGroup.map((item) => {
     let author = item['作者']
+    author = author.replace(new RegExp('（.*）', 'g'), '')
     return author
   })
   return Array.from(new Set(temp))
@@ -313,16 +325,16 @@ function getPaintingSizeStringForShow({ width, height }) {
   return `${width}\u00D7${height} 厘米`
 }
 
-const expandedAgeNameList = ref(new Set(['宋']))
-
-const isShowOperationTip = ref(true)
-const unwatch = watch(menuElScrollLeft, (v) => {
-  isShowOperationTip.value = false
-  unwatch()
-})
+const expandedAgeNameList = ref(new Set(['宋', '元', '明', '清']))
 
 function onClickAge(ageName, evt) {
-  isShowOperationTip.value = false
+  if (haveSwipedThisTime.value) {
+    return
+  }
+  if (isShowClickTip.value) {
+    isShowClickTip.value = false
+    isShowWheelTip.value = true
+  }
   if (expandedAgeNameList.value.has(ageName)) {
     expandedAgeNameList.value.delete(ageName)
   } else {
@@ -341,7 +353,9 @@ function onClickAge(ageName, evt) {
 const isShowPaintingStyleDesc = ref(false)
 
 function onClickPainting(item) {
-  console.log('sdfsdfsdf', item)
+  if (haveSwipedThisTime.value) {
+    return
+  }
   router.push({
     name: 'PaintingDetail',
     query: {
@@ -350,6 +364,17 @@ function onClickPainting(item) {
   })
 }
 
+const isShowClickTip = ref(true)
+const isShowWheelTip = ref(false)
+const unwatch = watch(translateLength, (v) => {
+  isShowClickTip.value = false
+  isShowWheelTip.value = false
+  unwatch()
+})
+
+onBeforeUnmount(() => {
+  store.commit('setScrollPosInPaintingListPage', translateLength.value)
+})
 </script>
 
 <style lang="less" scoped>
@@ -661,10 +686,16 @@ function onClickPainting(item) {
   >.button-back{
     z-index: 2;
   }
-  >.operation-tip{
+  > .operation-tip-click {
+    position: absolute;
+    left: calc(42px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+    bottom: calc(102px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+    z-index: 10;
+  }
+  > .operation-tip-wheel {
     position: absolute;
-    left: 43px;
-    bottom: 102px;
+    left: 50%;
+    bottom: calc(102px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
     transform: translateX(-50%);
     z-index: 10;
   }

src/views/PoemList.vue

@@ -138,8 +138,9 @@
     <BtnBack @click="router.go('-1')" />
 
     <OperationTip
+      v-show="isShowOperationTip"
       class="operation-tip"
-      :text="'左右滑动'"
+      :text="'向下滑动滚轮'"
       :color="'green'"
     />
   </div>
@@ -250,6 +251,14 @@ watch(translateLength, (v) => {
     }
   }
 })
+
+const isShowOperationTip = ref(true)
+const unwatch = watch(translateLength, (v) => {
+  if (v) {
+    isShowOperationTip.value = false
+    unwatch()
+  }
+})
 </script>
 
 <style lang="less" scoped>
@@ -511,14 +520,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")
-    );
+    left: 42%;
+    bottom: calc(234px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+    transform: translateX(-50%);
+
   }
 }
 </style>

src/views/SceneView.vue

@@ -9,7 +9,7 @@ const router = useRouter()
 const closeScene = () => {
   const musicDom = document.getElementById('bg-music')
   musicDom.play()
-  router.replace('/more-content?anchorIdx=3')
+  router.go('-1')
 }
 </script>
 

src/views/ShuangGou.vue

@@ -16,22 +16,13 @@
       }"
       @click="onClickHotspot"
     />
-    <img
-      class="para-1"
-      src="@/assets/images/shuang-gou-para-1.png"
-      alt=""
-      draggable="false"
-    >
-    <img
-      class="para-2"
-      src="@/assets/images/shuang-gou-para-2.png"
-      alt=""
-      draggable="false"
-    >
     <div class="title">
       <h1>双钩设色</h1>
     </div>
-
+    <div class="text">
+      <p><span>双钩</span>，中国画技法名。用线条钩描物象的轮廓，通称“勾勒”，因基本上是用左右或上下两笔钩描合拢，故亦称“双钩”。大部用于工笔花鸟画。又旧时摹搨法书。沿字的笔迹两边用细劲的墨线钩出轮廓，也叫“双钩”；双钩后填墨的称为“双钩廓填”。</p>
+      <p><span>设色</span>，国画中晕染彩色的意思，画面中只要出现彩色就可以说是设色作品。与设色相反的是“水墨”，指画面中不出现彩色，或者极少出现彩色的，以墨色为主绘制的作品。</p>
+    </div>
     <button
       class="play-video"
       @click="isShowVideos = true"
@@ -159,21 +150,7 @@ const activeVideoIdx = ref(0)
     width: 48px;
     height: 48px;
   }
-  >img.para-1{
-    position: absolute;
-    bottom: 50%;
-    left: 47vw;
-    height: 64.5vh;
-    width: 17.9vh;
-    transform: translate(0, 50%);
-  }
-  >img.para-2{
-    position: absolute;
-    bottom: 0;
-    left: calc(47vw + 17.9vh + 7.61vh);
-    height: 84.57vh;
-    width: 28.40vh;
-  }
+
   >.title{
     position: absolute;
     top: 8.13vh;
@@ -193,6 +170,35 @@ const activeVideoIdx = ref(0)
       right: 3vw;
     }
   }
+  >.text{
+    position: absolute;
+    left: 47vw;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 61.86vh;
+    @media (max-aspect-ratio: 1250/835) {
+      left: initial;
+      right: 11vw;
+    }
+    >p{
+      font-size: calc(30 / 970 * 100vh);
+      line-height: calc(36 / 970 * 100vh);
+      text-indent: 2em;
+      font-family: KaiTi, KaiTi;
+      font-weight: 400;
+      color: #707F48;
+      >span{
+        font-family: KaiTi, KaiTi;
+        font-weight: 400;
+        color: #707F48;
+        font-size: calc(42 / 970 * 100vh);
+        line-height: calc(50 / 970 * 100vh);
+      }
+    }
+    >p:nth-of-type(2) {
+      margin-top: 10vh;
+    }
+  }
 
   >button.play-video{
     position: absolute;