feat: 返回按钮加文字提示；画作详情页添加操作提示。

src/components/BtnBack.vue

@@ -8,6 +8,7 @@
         draggable="false"
       >
     </button>
+    <span class="text">返回</span>
   </div>
 </template>
 
@@ -44,7 +45,10 @@ const props = defineProps({
   top: 37px;
   width: 48px;
   height: 48px;
+  display: flex;
+  align-items: center;
   >button{
+    flex: 0 0 auto;
     width: 100%;
     height: 100%;
     >img{
@@ -52,5 +56,13 @@ const props = defineProps({
       height: 100%;
     }
   }
+  >.text{
+    flex: 0 0 auto;
+    font-family: KaiTi, KaiTi;
+    font-weight: 400;
+    font-size: 24px;
+    color: #FFFFFF;
+    line-height: 28px;
+  }
 }
 </style>

src/components/OperationTip.vue

@@ -77,12 +77,14 @@ watch(propIsShow, (v) => {
   display: flex;
   flex-direction: column;
   align-items: center;
+  pointer-events: none;
   > .text {
     color: v-bind("color");
     margin-right: 5px;
     font-family: KaiTi;
     font-weight: 400;
     font-size: 20px;
+    white-space: pre;
   }
   > img {
     width: 40px;

src/components/PaintingInfoBox.vue

@@ -1,6 +1,9 @@
 <script setup>
-import { ref, computed, onMounted } from "vue"
+import { ref, computed, onMounted, onBeforeUnmount } from "vue"
 import { useRoute } from 'vue-router'
+import { useStore } from "vuex"
+
+const store = useStore()
 
 const route = useRoute()
 
@@ -93,7 +96,11 @@ const changeCloseFu = () => {
     isShowInfoText.value = false
   }
   isCloseInfo.value = !isCloseInfo.value
-
+  if (isShowOperationTip.value) {
+    isShowOperationTip.value = false
+    clearTimeout(timeoutIdOpTip)
+    timeoutIdOpTip = null
+  }
 }
 
 onMounted(() => {
@@ -113,6 +120,20 @@ const exChangeFu = () => {
     curState.value = 1
   }
 }
+
+store.dispatch('recordShownPaintingDetailOpTip')
+console.log(store.state.paintingDetailOpTipShowCount)
+const isShowOperationTip = ref(store.state.paintingDetailOpTipShowCount <= 2)
+// const isShowOperationTip = ref(true)
+let timeoutIdOpTip = null
+timeoutIdOpTip = setTimeout(() => {
+  isShowOperationTip.value = false
+  timeoutIdOpTip = null
+}, 2000)
+onBeforeUnmount(() => {
+  clearTimeout(timeoutIdOpTip)
+  timeoutIdOpTip = null
+})
 </script>
 
 <template>
@@ -178,6 +199,13 @@ const exChangeFu = () => {
         <p v-html="FormatAuthorDesc.length > 0 ? FormatAuthorDesc :'暂无信息'" />
       </div>
     </div>
+    <OperationTip
+      v-show="isShowOperationTip"
+      class="operation-tip-click"
+      :text="'点击收起'"
+      :color="'white'"
+      type="click"
+    />
   </div>
 </template>
 
@@ -263,6 +291,12 @@ const exChangeFu = () => {
       }
     }
   }
+  >.operation-tip-click{
+    position: absolute;
+    left: 2%;
+    top: 56%;
+    transform: translate(-50%, -50%);
+  }
 }
 .info-box-close{
   width: 2%;

src/store/index.js

@@ -5,6 +5,7 @@ export default createStore({
     haveShownStartup: process.env.VUE_APP_CLI_MODE === 'dev' ? true : false,
     scrollPosInMoreContentPage: 0,
     scrollPosInPaintingListPage: 0,
+    paintingDetailOpTipShowCount: 0,
   },
   getters: {
   },
@@ -23,6 +24,9 @@ export default createStore({
     recordShownStartup({ state, commit }) {
       commit('setShowingStartup', true)
     },
+    recordShownPaintingDetailOpTip({ state, commit }) {
+      state.paintingDetailOpTipShowCount++
+    }
   },
   modules: {
   }

src/views/PaintingDetail.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, inject, computed } from 'vue'
+import { onMounted, onBeforeUnmount, inject, computed, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import PaintingDetailBox from '@/components/PaintingDetailBox.vue'
 import paintingInfoBox from '@/components/PaintingInfoBox.vue'
@@ -65,6 +65,7 @@ onMounted(() => {
   // }
   console.log('看看检索', props.state == '2', realState.value, paintingInfo['作者简介'])
 })
+
 </script>
 
 <template>