upup 更新

public/configText.js

@@ -15,13 +15,13 @@ var configText = {
   homepagePaintingDetailDescStem2: '<span>坡石一隅的三竿修竹，两竿近，一竿远，近低</span><span style="font-size:1.3em">远高</span><span>，近开</span><span style="font-size:1.3em">远合</span><span>，两竿向右，一竿向左，</span><span style="font-size:1.3em">一聚</span><span>一分，构图稳定，法度森严。</span>',
   homepagePaintingDetailDescStem1: '<span>坡石一隅的三竿修竹，两竿近，一竿远，</span><span style="font-size:1.3em">近低</span><span>远高，</span><span style="font-size:1.3em">近开</span><span>远合，两竿向右，一竿向左，一聚</span><span style="font-size:1.3em">一分</span><span>，构图稳定，法度森严。</span>',
   homepagePaintingDetailDescStem: '<span>坡石一隅的三竿修竹，两竿近，一竿远，</span><span style="font-size:1.3em">近低远高</span><span>，</span><span style="font-size:1.3em">近开远合</span><span>，两竿向右，一竿向左，</span><span style="font-size:1.3em">一聚一分</span><span>，构图稳定，法度森严。</span>',
-  homepagePaintingDetailDescLeaf1: '<span>竹叶的画法以</span><span style="font-size:1.3em" >“个”</span><span>“介"“分”\n字法叠加、穿插、组合而成，叶叶不乱、有条不紊，每片都交代清楚。以书法用笔写出，看似类似，实则每一笔都有变化，细腻微妙。</span>',
+  homepagePaintingDetailDescLeaf1: '<span >竹叶的画法以</span><span style="font-size:1.3em" >“个”</span><span>“介"“分”\n字法叠加、穿插、组合而成，叶叶不乱、有条不紊，每片都交代清楚。以书法用笔写出，看似类似，实则每一笔都有变化，细腻微妙。</span>',
   homepagePaintingDetailDescLeaf2: '<span>竹叶的画法以“个”</span><span style="font-size:1.3em">“介"</span><span>“分”\n字法叠加、穿插、组合而成，叶叶不乱、有条不紊，每片都交代清楚。以书法用笔写出，看似类似，实则每一笔都有变化，细腻微妙。</span>',
   homepagePaintingDetailDescLeaf3: '<span>竹叶的画法以“个”“介"</span><span style="font-size:1.3em" >“分”</span><span>\n字法叠加、穿插、组合而成，叶叶不乱、有条不紊，每片都交代清楚。以书法用笔写出，看似类似，实则每一笔都有变化，细腻微妙。</span>',
-  homepagePaintingDetailDescLeaf: '<span>竹叶的画法以</span><span style="font-size:1.3em" >“个”“介"“分”</span><span>\n字法叠加、穿插、组合而成，叶叶不乱、有条不紊，每片都交代清楚。以书法用笔写出，看似类似，实则每一笔都有变化，细腻微妙。</span>',
+  homepagePaintingDetailDescLeaf: '<span style="">竹自根部开始出枝，完全符合竹子自然生长的状态，竹叶的画法以</span><span style="font-size:1.3em" >“个”“介"“分”</span><span>\n字法叠加、穿插、组合而成，叶叶不乱、有条不紊，每片都交代清楚。以书法用笔写出，看似类似，实则每一笔都有变化，细腻微妙。</span>',
 
   homepagePaintingDetailDescStone: '<span style="font-size:1.3em">卧石、枯树和灌木</span><span>在竹下方，用低矮、枯梗、虚淡来衬托竹的挺拔、润泽和沉着。图中弥漫着敦厚温润、不瘟不火、从容淡定的神韵。</span>',
-  homepagePaintingSummary: '赵孟頫对李衎的墨竹评价极高：“吾友李仲宾为此君写真，冥搜极讨，盖欲尽得竹之情状，二百年来，以画竹称者，皆未必能用意精深如仲宾也。”',
+  homepagePaintingSummary: '&nbsp&nbsp赵孟頫对李衎的墨竹评价极高：“吾友李仲宾为此君写真，冥搜极讨，盖欲尽得竹之情状，二百年来，以画竹称者，皆未必能用意精深如仲宾也。”',
   craft: [
     {
       title: '轴',

src/components/BtnBack.vue

@@ -41,7 +41,7 @@ const props = defineProps({
 .btn-back{
   position: fixed;
   left: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-  bottom: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  bottom: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
   width: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
   height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
   >button{
@@ -51,8 +51,8 @@ const props = defineProps({
     justify-content: center;
     align-items: center;
     >img{
-      width: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      width: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     }
   }
 }

src/views/BambooBookScene1.vue

@@ -63,11 +63,14 @@ const innerHeight = ref(window.innerHeight + "px")
         direction="h"
         :is-show="isShowOperationTip"
       />
-      <img
+      <!-- <img
         class="disc-img"
         src="@/assets/images/zhupu-disc.png"
         alt=""
-      >
+      > -->
+      <div class="text">
+        《芥子园画传》又称《芥子园画谱》是清代绘画技法图谱，它较系统地介绍了中国画的基本技法。清代文学家李渔曾在南京营造“芥子园”，并支持其婿沈心友及王氏三兄弟（王概、王著、王臬）编绘画谱，故成书出版之时便以此园命名。
+      </div>
       <div class="system-btns">
         <BtnBack
           :color="`green`"
@@ -205,6 +208,39 @@ const innerHeight = ref(window.innerHeight + "px")
       // margin-right: calc(170 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       // margin-bottom: calc(250 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     }
+    >.text{
+      width: calc(
+        170 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
+      height: calc(
+        456 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
+      position: absolute;
+      left: calc(
+        75 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
+      top: calc(
+        153 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
+      font-size:  calc(
+        20 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
+      line-height:  calc(
+        30 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
+      text-indent: 2em;
+      color: #7B916B;
+      font-family: 'KaiTi';
+      writing-mode: initial;
+      direction: ltr;
+
+    }
 
     > .system-btns {
       width: 100%;

src/views/HomeView.vue

@@ -55,7 +55,14 @@ const isShowOperationTip = ref(true)
 const touchEnd = (event) => {
   let currentY = event.changedTouches[0].pageY
   let ty = currentY - lastY.value
-  if (ty > 0 && curPageIndex.value == 1 && !isShowHotspotDetail1.value && !isShowHotspotDetail3.value && !isShowPaintingDesc.value && ! isShowAuthorDesc.value) {
+  if (
+    ty > 0 &&
+    curPageIndex.value == 1 &&
+    !isShowHotspotDetail1.value &&
+    !isShowHotspotDetail3.value &&
+    !isShowPaintingDesc.value &&
+    !isShowAuthorDesc.value
+  ) {
     isShowOperationTip.value = true
     curPageIndex.value = 0
   } else if (ty < 0 && curPageIndex.value == 0) {
@@ -132,7 +139,17 @@ const backFu = () => {
 </script>
 
 <template>
-  <div style="opacity: 0; pointer-events: none;font-family: KingHwa_OldSong;position: absolute;top:0;left:0;z-index: -1;">
+  <div
+    style="
+      opacity: 0;
+      pointer-events: none;
+      font-family: KingHwa_OldSong;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: -1;
+    "
+  >
     123
   </div>
   <div
@@ -302,7 +319,10 @@ const backFu = () => {
         @click="curPageIndex = 5"
       />
       <img
-        :style="{ opacity: curPageIndex == 2 ? 1 : 0,display: curPageIndex == 2 ? 'block' : 'none' }"
+        :style="{
+          opacity: curPageIndex == 2 ? 1 : 0,
+          display: curPageIndex == 2 ? 'block' : 'none',
+        }"
         class="icon_scale"
         src="@/assets/images/icon_scale.png"
         alt=""
@@ -330,7 +350,7 @@ const backFu = () => {
     <div
       class="center-text"
       :style="{ opacity: curPageIndex == 3 || curPageIndex == 4 ? 1 : 0 }"
-      :class="{'center-text4': curPageIndex == 4}"
+      :class="{ 'center-text4': curPageIndex == 4 }"
     >
       {{ curCenterTag }}
     </div>
@@ -338,8 +358,8 @@ const backFu = () => {
     <!-- 底部文字介绍 -->
     <div
       class="fixed-desc"
-      :class="{'fixed-desc4': curPageIndex == 4}"
-      :style="{ opacity: curPageIndex == 3 || curPageIndex == 4 ? 1 : 0 }"
+      :class="{ 'fixed-desc4': curPageIndex == 4 }"
+      :style="{ opacity: curPageIndex == 3 || curPageIndex == 4 ? 1 : 0,textIndent:'2em' }"
       v-html="curFixedDesc"
     />
     <!-- 左滑提示 -->
@@ -400,7 +420,7 @@ const backFu = () => {
       class="learn-more"
       @click="onClickGoNextPage"
     >
-      了解更多
+      知识探索
     </div>
 
     <!-- 返回按钮 -->
@@ -466,6 +486,8 @@ const backFu = () => {
           {{ item }}
         </p>
       </div>
+      <!-- 遮罩 -->
+      <div class="shandow-box" />
       <!-- <div class="bottom-box" /> -->
       <BtnBack
         class="back-btn"
@@ -506,8 +528,8 @@ const backFu = () => {
           </p>
         </div>
       </div>
-      <!-- 底部遮罩 -->
-      <!-- <div class="bottom-box" /> -->
+      <!-- 遮罩 -->
+      <div class="shandow-box" />
       <BtnBack
         class="back-btn"
         @click="isShowAuthorDesc = false"
@@ -931,9 +953,9 @@ div {
     text-align: justify;
     z-index: 2;
   }
-  > .center-text4{
+  > .center-text4 {
     top: calc(
-      630 / v-bind("windowSizeWhenDesignForRef") *
+      616 / v-bind("windowSizeWhenDesignForRef") *
         v-bind("windowSizeInCssForRef")
     );
   }
@@ -973,9 +995,9 @@ div {
         v-bind("windowSizeInCssForRef")
     );
   }
-  > .fixed-desc4{
+  > .fixed-desc4 {
     top: calc(
-      645 / v-bind("windowSizeWhenDesignForRef") *
+      627 / v-bind("windowSizeWhenDesignForRef") *
         v-bind("windowSizeInCssForRef")
     );
   }
@@ -1032,7 +1054,7 @@ div {
     z-index: 3;
     width: calc(
       224 / v-bind("windowSizeWhenDesignForRef") *
-      v-bind("windowSizeInCssForRef")
+        v-bind("windowSizeInCssForRef")
     );
     background: linear-gradient(78deg, rgba(0, 0, 0, 0) 38%, #00000087 75%);
     height: 100%;
@@ -1091,14 +1113,14 @@ div {
   > .back-btn-main {
     position: absolute;
     z-index: 3;
-    left: calc(
-        17 / v-bind("windowSizeWhenDesignForRef") *
-          v-bind("windowSizeInCssForRef")
-      );
-      bottom: calc(
-        17 / v-bind("windowSizeWhenDesignForRef") *
-          v-bind("windowSizeInCssForRef")
-      );
+    // left: calc(
+    //   17 / v-bind("windowSizeWhenDesignForRef") *
+    //     v-bind("windowSizeInCssForRef")
+    // );
+    // bottom: calc(
+    //   25 / v-bind("windowSizeWhenDesignForRef") *
+    //     v-bind("windowSizeInCssForRef")
+    // );
   }
 
   > .long-desc {
@@ -1171,15 +1193,26 @@ div {
     padding-left: 10%;
     padding-right: 10%;
 
+    > .shandow-box {
+      width: 100%;
+      height: 140px;
+      left: 0;
+      background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
+      position: absolute;
+      bottom: 0;
+      pointer-events: none;
+      // z-index: 1;
+    }
+
     > .back-btn {
-      left: calc(
-        17 / v-bind("windowSizeWhenDesignForRef") *
-          v-bind("windowSizeInCssForRef")
-      );
-      bottom: calc(
-        17 / v-bind("windowSizeWhenDesignForRef") *
-          v-bind("windowSizeInCssForRef")
-      );
+      // left: calc(
+      //   17 / v-bind("windowSizeWhenDesignForRef") *
+      //     v-bind("windowSizeInCssForRef")
+      // );
+      // bottom: calc(
+      //   25 / v-bind("windowSizeWhenDesignForRef") *
+      //     v-bind("windowSizeInCssForRef")
+      // );
       position: absolute;
     }
 
@@ -1191,9 +1224,10 @@ div {
     > .text-box {
       width: 100%;
       overflow: auto;
+      padding:0 0px 40px 0px;
       &::-webkit-scrollbar {
-      display: none;
-    }
+        display: none;
+      }
 
       > p {
         text-indent: 2em;
@@ -1256,14 +1290,25 @@ div {
     padding-top: 15%;
     padding-left: 10%;
     padding-right: 10%;
+    > .shandow-box {
+      width: 100%;
+      height: 140px;
+      left: 0;
+      background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
+      // background: linear-gradient( 180deg, #d9d9d93f 0%, rgba(115,115,115,0) 100%);
+      position: absolute;
+      bottom: 0;
+      pointer-events: none;
+      // z-index: 1;
+    }
 
     > .author-content {
       width: 100%;
       height: 100%;
       overflow: auto;
       &::-webkit-scrollbar {
-      display: none;
-    }
+        display: none;
+      }
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -1301,6 +1346,7 @@ div {
 
       > .text-box {
         width: 100%;
+        padding-bottom: 40px;
 
         > p {
           text-indent: 2em;
@@ -1333,14 +1379,14 @@ div {
     }
 
     > .back-btn {
-      left: calc(
-        17 / v-bind("windowSizeWhenDesignForRef") *
-          v-bind("windowSizeInCssForRef")
-      );
-      bottom: calc(
-        17 / v-bind("windowSizeWhenDesignForRef") *
-          v-bind("windowSizeInCssForRef")
-      );
+      // left: calc(
+      //   17 / v-bind("windowSizeWhenDesignForRef") *
+      //     v-bind("windowSizeInCssForRef")
+      // );
+      // bottom: calc(
+      //   25 / v-bind("windowSizeWhenDesignForRef") *
+      //     v-bind("windowSizeInCssForRef")
+      // );
       position: absolute;
     }
 

src/views/HotspotDetail3.vue

@@ -82,7 +82,10 @@
         @click="state = 3"
       >
     </div>
-    <BtnBack @click="emit('close')" />
+    <BtnBack
+      :color="`green`"
+      @click="emit('close')"
+    />
   </div>
 </template>
 

src/views/MoreContent.vue

@@ -49,6 +49,7 @@
             <div
               v-for="(item2, index2) in item1.nameArr"
               :key="index2"
+              :style="{background: item2.txt == '画作'?'none':''}"
               class="ROWtxtTab animation-show-long-hide"
               @click="item2.fu()"
             >
@@ -141,6 +142,9 @@
         >
       </div>
     </div>
+    <!-- 全局遮罩 -->
+    <div class="shandow-box" />
+
     <!-- 指示器 -->
     <ProgressBar
       class="pagination"
@@ -489,6 +493,8 @@ body {
             white-space: pre;
             color: #b8ae7a;
             margin-bottom: 10px;
+            font-size: 20px;
+            margin-bottom: 0;
           }
         }
 
@@ -775,6 +781,15 @@ body {
       width: 100%;
     }
   }
+  .shandow-box{
+    width: 100%;
+    height:100px;
+    left:0;
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%);
+    position:absolute;
+    bottom: 0;
+    z-index: 2;
+  }
   // 指示器
   .pagination {
     position: absolute;

src/views/PaintingDetail.vue

@@ -132,8 +132,13 @@
         <h2 v-if="paintingDesc">
           作品简介：
         </h2>
-        <div class="normal-text">
-          {{ paintingDesc }}
+        <div
+          class="normal-text"
+        >
+          <p
+            v-html="FormatPaintingDesc"
+          />
+          <!-- {{ paintingDesc }} -->
         </div>
         <h2 v-if="authorDesc">
           作者简介：
@@ -241,6 +246,11 @@ const props = defineProps({
   },
 })
 
+// 格式化作品简介/作者简介
+const FormatPaintingDesc = computed(() => {
+  return props.paintingDesc.replace(/\n/g, "<br>").split('<br>').map((line) => `<p>${line}</p>`).join('')
+})
+
 const lastY = ref(0)
 // 开始滑动
 const handletouchstartUp = (event) => {
@@ -574,6 +584,7 @@ function showBigPainting() {
         );
         text-align: justify;
         white-space: pre-line;
+        text-indent: 2em;
       }
     }
 
@@ -662,6 +673,7 @@ function showBigPainting() {
         );
         text-align: justify;
         white-space: pre-line;
+        text-indent: 2em;
       }
     }
     > .info-content-up {

src/views/PaintingList.vue

@@ -22,6 +22,7 @@
 
     <ul
       ref="menuEl"
+      @touchend="handleScroll"
     >
       <div
         v-for="(paintingGroup, ageName) in menuInfo"
@@ -174,11 +175,18 @@
       })"
     />
     <OperationTip
+      v-show="isShowOperationTipLeft"
       class="operation-tip"
       direction="h"
-      :is-show="isShowOperationTip"
+      :is-show="isShowOperationTipLeft"
     />
 
+    <img
+      v-show="isShowClickTip"
+      class="click-tip"
+      src="@/assets/images/icon-click-tip.png"
+    >
+
     <Transition name="fade-in-out">
       <PaintingStyleDesc
         v-if="isShowPaintingStyleDesc"
@@ -274,14 +282,23 @@ function getHiddenContentWidth(paintingGroup, ageName) {
 }
 
 const expandedAgeNameList = ref(new Set())
-
+const isShowClickTip = ref(true)
+const isShowOperationTipLeft = ref(false)
 const isShowOperationTip = ref(true)
 const unwatch = watch(menuElScrollLeft, (v) => {
   isShowOperationTip.value = false
+  console.log('在左滑')
   unwatch()
 })
+
+const handleScroll = () => {
+  console.log('在左滑')
+  isShowOperationTipLeft.value = false
+}
 function onClickAge(ageName) {
-  isShowOperationTip.value = false
+  // 显示左滑按钮
+  isShowOperationTipLeft.value = true
+  isShowClickTip.value = false
   if (expandedAgeNameList.value.has(ageName)) {
     expandedAgeNameList.value.delete(ageName)
   } else {
@@ -294,6 +311,7 @@ function onClickAge(ageName) {
   }
 }
 
+
 watch(expandedAgeNameList, (v) => {
   // alert(String(v))
   console.log('kankan', v)
@@ -592,5 +610,13 @@ const isShowPaintingStyleDesc = ref(false)
     transform: translateX(-50%);
     z-index: 10;
   }
+  >.click-tip{
+    width: 50px;
+    position: absolute;
+    left: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    bottom: calc(120 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    // transform: translateX(-50%);
+    z-index: 10;
+  }
 }
 </style>

src/views/PaintingStyleDesc.vue

@@ -7,8 +7,10 @@
       alt=""
       draggable="false"
     >
-    <div class="text">
-      {{ specialDesc }}
+    <div
+      class="text"
+    >
+      <p v-html="FormatPaintingDesc" />
     </div>
     <BtnBack
       class="button-back"
@@ -37,6 +39,11 @@ const {
 } = useSizeAdapt()
 
 const specialDesc = configExcel['其他'][4]['修篁树石图'][1]['作品简介']
+
+// 格式化作品简介/作者简介
+const FormatPaintingDesc = computed(() => {
+  return specialDesc.replace(/\n/g, "<br>").split('<br>').map((line) => `<p>${line}</p>`).join('')
+})
 </script>
 
 <style lang="less" scoped>
@@ -68,7 +75,7 @@ const specialDesc = configExcel['其他'][4]['修篁树石图'][1]['作品简介
     position: absolute;
     top: 24%;
     right: 9.5%;
-    width: 67%;
+    width: 65%;
     height: 66%;
     font-family: KaiTi;
     font-weight: 400;
@@ -77,6 +84,7 @@ const specialDesc = configExcel['其他'][4]['修篁树石图'][1]['作品简介
     line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     white-space: pre-line;
     overflow: auto;
+    text-indent: 2em;
     &::-webkit-scrollbar {
       display: none;
     }

src/views/PoemList.vue

@@ -83,6 +83,9 @@
       />
     </div>
 
+    <!-- 全局遮罩 -->
+    <div class="shandow-box" />
+
     <!-- 返回按钮 -->
     <div class="RWback">
       <BtnBack
@@ -332,14 +335,14 @@ const isMoveFu = (index, num) => {
     width: 30px;
     height: 30px;
     border-radius: 50%;
-    background-color: rgba(0, 0, 0, 0.5);
+    // background-color: rgba(0, 0, 0, 0.5);
     display: flex;
     justify-content: center;
     align-items: center;
     opacity: 1;
     transition: all 0.5s;
     & > img {
-      width: 20px;
+      width: 40px;
     }
   }
   .RWsBtnHide {
@@ -747,7 +750,7 @@ const isMoveFu = (index, num) => {
     width: 30px;
     height: 30px;
     border-radius: 50%;
-    background-color: rgba(0, 0, 0, 0.5);
+    // background-color: rgba(0, 0, 0, 0.5);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -760,5 +763,15 @@ const isMoveFu = (index, num) => {
     max-width: 100%;
     max-height: 100%;
   }
+
+  .shandow-box{
+    width: 100%;
+    height:130px;
+    left:0;
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
+    position:absolute;
+    bottom: 0;
+    z-index: 2;
+  }
 }
 </style>

src/views/ShuangGouSheSeDetail.vue

@@ -95,14 +95,14 @@ const isShowOperationTip2 = ref(false)
 const openVideoBox = () => {
   isShowVideoBox.value = true
   // 背景音乐打开
-  const audioEl = document.getElementById('bg-music')
+  const audioEl = document.getElementById("bg-music")
   audioEl.pause()
   isShowOperationTip2.value = true
 }
 const closeVieoBox = () => {
   isShowVideoBox.value = false
   // 背景音乐打开
-  const audioEl = document.getElementById('bg-music')
+  const audioEl = document.getElementById("bg-music")
   audioEl.play()
 }
 
@@ -118,13 +118,56 @@ const curPercentage = computed(() => {
     @touchend="touchEnd($event)"
   >
     <div class="title">
-      <span :style="{ color: curIndex == 1 ? 'rgba(71, 71, 71, 0.50)' : '' }">双钩</span>
-      <span :style="{ color: curIndex == 0 ? 'rgba(71, 71, 71, 0.50)' : '' }">设色</span>
-      <img
+      <span
+        :style="{ color: curIndex == 1 ? 'rgba(71, 71, 71, 0.15)' : '' }"
+        @click="curIndex == 0? openVideoBox():''"
+      >双钩</span>
+      <span
+        :style="{ color: curIndex == 0 ? 'rgba(71, 71, 71, 0.15)' : '' }"
+        @click="curIndex == 1? openVideoBox():''"
+      >设色</span>
+      <!-- <img
         src="@/assets/images/icon_video.png"
         class="icon-video"
         @click="openVideoBox"
+      > -->
+      <!-- 两个提示 -->
+      <div
+        v-show="curIndex == 0"
+        class="operation-video-tip"
+        style="top:-55%;right: -50%"
       >
+        <div>
+          点击查看
+        </div>
+        <img
+          class=""
+          :src="require(`@/assets/images/icon-click-tip-green.png`)"
+          alt=""
+          draggable="false"
+        >
+      </div>
+      <div
+        v-show="curIndex == 1"
+        class="operation-video-tip"
+        style="bottom:-55%;right: -50%;"
+      >
+        <img
+          class=""
+          :src="require(`@/assets/images/icon-click-tip-green.png`)"
+          alt=""
+          draggable="false"
+        >
+        <div>
+          点击查看
+        </div>
+      </div>
+      <!-- <img
+        class=""
+        :src="require(`@/assets/images/icon-click-tip-green.png`)"
+        alt=""
+        draggable="false"
+      > -->
     </div>
 
     <div class="shuanggou-yezi">
@@ -166,7 +209,9 @@ const curPercentage = computed(() => {
         playsinline
         webkit-playsinline="true"
         x5-video-player-type="h5"
-        :poster="`${$env.BASE_URL}configMultiMedia/video/${curIndex == 0 ? 'shuanggou' : 'shese'}.png`"
+        :poster="`${$env.BASE_URL}configMultiMedia/video/${
+          curIndex == 0 ? 'shuanggou' : 'shese'
+        }.png`"
         :src="`${$env.BASE_URL}configMultiMedia/video/${
           curIndex == 0 ? 'shuanggou' : 'shese'
         }.mp4`"
@@ -197,7 +242,7 @@ const curPercentage = computed(() => {
     </div> -->
     <div
       class="text"
-      :style="{ top: x > 0.5 ? 'auto' : '', bottom: x > 0.5 ? '15vh' : 'auto' }"
+      :style="{ top: x > 0.5 ? 'auto' : '', bottom: x > 0.5 ? '20vh' : 'auto' }"
     >
       {{ text2[curIndex] }}
     </div>
@@ -279,6 +324,27 @@ const curPercentage = computed(() => {
           v-bind("windowSizeInCssForRef")
       );
     }
+    .operation-video-tip {
+      position: absolute;
+      right: 0;
+      display: flex;
+      align-items: center;
+      & > img {
+        width: 40px;
+      }
+      & > div {
+        margin-top: 4px;
+        // position: relative;
+        // line-height: 20px;
+        // left: 9px;
+        font-weight: 400;
+        font-family: KaiTi;
+        color: #7B916B;
+        text-align: center;
+        font-size: 18px;
+        writing-mode:vertical-rl;
+      }
+    }
   }
 
   .shuanggou-yezi {
@@ -318,7 +384,7 @@ const curPercentage = computed(() => {
     top: 0;
     left: 0;
     z-index: 10;
-    .operation-h-video{
+    .operation-h-video {
       position: fixed;
       left: 50%;
       transform: translateX(-50%);
@@ -380,10 +446,12 @@ const curPercentage = computed(() => {
         v-bind("windowSizeInCssForRef")
     );
     font-family: "KaiTi";
-    writing-mode: vertical-rl;
+    // writing-mode: vertical-rl;
     letter-spacing: 2px;
     text-align: justify;
-    height: 40vh;
+    height: 30vh;
+    width: 50%;
+    text-indent: 2em;
   }
 
   .right-bottom {
@@ -432,5 +500,5 @@ const curPercentage = computed(() => {
   }
 }
 </style>
-import { transform } from 'lodash';import { transform } from 'lodash';import { translate } from "element-plus";
-
+import { transform } from 'lodash';import { transform } from 'lodash';import {
+translate } from "element-plus";