upup

src/views/BambooBookView.vue

@@ -4,7 +4,6 @@ import { useRouter } from "vue-router"
 import useRollFu from "../rollFu.js"
 import { useWindowSize } from "@vueuse/core"
 
-
 const router = useRouter()
 
 const curState = ref("ye")
@@ -13,8 +12,7 @@ const $env = inject("$env")
 
 const { handleScroll } = useRollFu()
 
-
-const bigViewList = computed(()=>{
+const bigViewList = computed(() => {
   let resZhu = null
   if (curState.value == "ye") {
     resZhu = configZhuPu["叶"]
@@ -25,7 +23,7 @@ const bigViewList = computed(()=>{
   }
   const newList = resZhu.map((item) => {
     return `${$env.BASE_URL}configMultiMedia/zhupuImages/${
-      item['图片名称'] ? item['图片名称'] : item['名称']
+      item["图片名称"] ? item["图片名称"] : item["名称"]
     }.png`
   })
   return newList
@@ -62,12 +60,13 @@ const rowScroller = ref(null)
 const windowHeightDesign = 1080 - 71 - 37 // 设计稿里视口高度。注意要减去上下边栏
 const { width: windowWidth, height: windowHeight } = useWindowSize()
 
+const isShowBigView = ref(false)
 
+const isShowOperationTip = ref(true)
 
-const isShowClickTip = ref(true)
-const isShowBigView = ref(false)
 const handleWheel = (val) => {
   event.preventDefault()
+  isShowOperationTip.value = false
   if (isShowBigView.value) {
     return
   }
@@ -79,14 +78,13 @@ const handleWheel = (val) => {
     rowScroller.value.scrollLeft += scrollAmount
   }
 }
-
-const handleClose = () => {
-  setTimeout(() =>{isShowBigView.value = false}, 200)
-}
+// const handleClose = () => {
+//   setTimeout(() =>{isShowBigView.value = false}, 200)
+// }
 
 onMounted(() => {
   console.log("paintingData", paintingData.value)
-  console.log('看看', bigViewList.value)
+  console.log("看看", bigViewList.value)
 })
 </script>
 
@@ -115,6 +113,13 @@ onMounted(() => {
       >
     </div>
     <div class="right-box">
+      <!-- 滑动提示 -->
+      <OperationTip
+        class="operation-tip"
+        color="green"
+        text="向下滑动"
+        :is-show="isShowOperationTip"
+      />
       <div class="totle-painting-box">
         <div class="top">
           <img
@@ -214,7 +219,9 @@ onMounted(() => {
               @close="handleClose"
             /> -->
             <img
-              :src="`${$env.BASE_URL}configMultiMedia/zhupuImages/${item['图片名称'] ? item['图片名称'] : item['名称']}.png`"
+              :src="`${$env.BASE_URL}configMultiMedia/zhupuImages/${
+                item['图片名称'] ? item['图片名称'] : item['名称']
+              }.png`"
               alt=""
             >
             <div>{{ item["名称"] }}</div>
@@ -234,6 +241,14 @@ onMounted(() => {
   // background-position: top left;
   position: relative;
 
+  > .operation-tip {
+    position: absolute;
+    right: calc(30px / v-bind("windowHeightDesign") * v-bind("windowHeight"));
+    transform: translateX(-50%);
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
   .left-box {
     width: 27.3%;
     height: 100%;
@@ -253,17 +268,27 @@ onMounted(() => {
       top: 15vh;
       .title-box {
         // font-size: 2.8em;
-        font-size: calc(48px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
-        line-height:calc(56.25px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+        font-size: calc(
+          48px * v-bind("windowHeight") / v-bind("windowHeightDesign")
+        );
+        line-height: calc(
+          56.25px * v-bind("windowHeight") / v-bind("windowHeightDesign")
+        );
         // line-height: 56px;
         letter-spacing: 0.3em;
       }
       .zhupu-box {
         // margin-top: 10%;
-        margin-top: calc(20px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+        margin-top: calc(
+          20px * v-bind("windowHeight") / v-bind("windowHeightDesign")
+        );
         // font-size: 1.8em;
-        font-size: calc(24px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
-        line-height:calc(29px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+        font-size: calc(
+          24px * v-bind("windowHeight") / v-bind("windowHeightDesign")
+        );
+        line-height: calc(
+          29px * v-bind("windowHeight") / v-bind("windowHeightDesign")
+        );
         // line-height: 28.13px;
         letter-spacing: 0.2em;
       }
@@ -276,8 +301,12 @@ onMounted(() => {
       right: 12%;
       color: #7b916b;
       // opacity: 0.3;
-      font-size: calc(28px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
-      line-height:calc(38px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+      font-size: calc(
+        28px * v-bind("windowHeight") / v-bind("windowHeightDesign")
+      );
+      line-height: calc(
+        38px * v-bind("windowHeight") / v-bind("windowHeightDesign")
+      );
       font-family: "KaiTi";
       text-transform: none;
       text-align: justified;
@@ -302,6 +331,13 @@ onMounted(() => {
     align-items: center;
     justify-content: center;
 
+    .operation-tip{
+      position: absolute;
+      right: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
     .totle-painting-box {
       width: 50%;
       height: 60%;
@@ -312,7 +348,9 @@ onMounted(() => {
       justify-content: center;
       .top {
         width: 100%;
-        height: calc(100% - 60px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+        height: calc(
+          100% - 60px * v-bind("windowHeight") / v-bind("windowHeightDesign")
+        );
         position: relative;
         img {
           width: 100%;
@@ -330,11 +368,19 @@ onMounted(() => {
         display: flex;
         justify-content: space-evenly;
         .btn {
-          width: calc(60px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
-          height: calc(60px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+          width: calc(
+            60px * v-bind("windowHeight") / v-bind("windowHeightDesign")
+          );
+          height: calc(
+            60px * v-bind("windowHeight") / v-bind("windowHeightDesign")
+          );
           // font-size: 38px;
-          font-size:calc(38px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
-          line-height:calc(52px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+          font-size: calc(
+            38px * v-bind("windowHeight") / v-bind("windowHeightDesign")
+          );
+          line-height: calc(
+            52px * v-bind("windowHeight") / v-bind("windowHeightDesign")
+          );
           flood-color: #474747;
           display: flex;
           justify-content: center;
@@ -358,15 +404,15 @@ onMounted(() => {
       overflow-y: hidden;
       display: flex;
       position: relative;
+      scrollbar-width: none;
 
-      .operation-tip-click{
+      .operation-tip-click {
         position: absolute;
         top: 45%;
         left: 10%;
       }
       &::-webkit-scrollbar {
-        width: 0px;
-        height: 0;
+        display: none !important;
       }
       .category-box {
         // display: inline;
@@ -385,32 +431,52 @@ onMounted(() => {
           display: inline-flex;
           writing-mode: vertical-lr;
           // letter-spacing: 12px;
-          letter-spacing:calc(12px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+          letter-spacing: calc(
+            12px * v-bind("windowHeight") / v-bind("windowHeightDesign")
+          );
           color: #476446;
           background: url(@/assets/images/name-bg.png);
           background-size: 100% 100%;
           font-family: "KingHwa_OldSong";
           // font-size: 20px;
-          font-size:calc(20px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+          font-size: calc(
+            20px * v-bind("windowHeight") / v-bind("windowHeightDesign")
+          );
           // line-height: 48px;
-          padding: calc(10px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
-          margin: 0 calc(30px * v-bind("windowHeight") / v-bind("windowHeightDesign")) 0 calc(60px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+          padding: calc(
+            10px * v-bind("windowHeight") / v-bind("windowHeightDesign")
+          );
+          margin: 0
+            calc(30px * v-bind("windowHeight") / v-bind("windowHeightDesign")) 0
+            calc(60px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
           // height: 70%;
         }
         .category-item {
           display: flex;
           flex-direction: column;
           align-items: center;
-          margin: 0 calc(20px * v-bind("windowHeight") / v-bind("windowHeightDesign")) 0 calc(20px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+          margin: 0
+            calc(20px * v-bind("windowHeight") / v-bind("windowHeightDesign")) 0
+            calc(20px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
           .small-img {
-            width: calc(200px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
-            height: calc(150px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+            width: calc(
+              200px * v-bind("windowHeight") / v-bind("windowHeightDesign")
+            );
+            height: calc(
+              150px * v-bind("windowHeight") / v-bind("windowHeightDesign")
+            );
           }
           > div {
-            margin-top: calc(10px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+            margin-top: calc(
+              10px * v-bind("windowHeight") / v-bind("windowHeightDesign")
+            );
             color: #7b916b;
-            font-size:calc(20px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
-            line-height:calc(24px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+            font-size: calc(
+              20px * v-bind("windowHeight") / v-bind("windowHeightDesign")
+            );
+            line-height: calc(
+              24px * v-bind("windowHeight") / v-bind("windowHeightDesign")
+            );
             font-family: "KingHwa_OldSong";
           }
         }

src/views/HomeView.vue

@@ -260,6 +260,13 @@ onMounted(() => {
       >
       <img
         class="painting-stem"
+        src="@/assets/images/home-painting1.jpg"
+        alt=""
+        draggable="false"
+      >
+      <img
+        :style="{opacity: curPageIndex == 2 ? 1 : 0}"
+        class="painting-stem"
         src="@/assets/images/home-painting2.jpg"
         alt=""
         draggable="false"

src/views/HotspotDetail1.vue

@@ -76,12 +76,10 @@
       :class="`HD1_4 ${pageShow ? 'HD1_4Ac' : ''}`"
       :style="`opacity:${swChange && pageShow ? '1' : '0'}`"
     >
-      <p>{{ txtShow.desc }}</p>
-      <h3
-        :style="{
-          transform: `translate(${txtShow.title == '绫' ? '630%' :txtShow.title == '绢' ? '350%': '150%'}, -150%)`
-        }"
-      >
+      <div class="desc">
+        {{ txtShow.desc }}
+      </div>
+      <h3>
         {{ txtShow.title }}
       </h3>
     </div>
@@ -393,27 +391,27 @@ const imgBottomLoc = (nowId, itemId) => {
     font-family: KaiTi;
     font-weight: 400;
     color: #5e715d;
-    width: 70%;
+    width: 30%;
     height: 26%;
     opacity: 0;
     pointer-events: none;
     transition: bottom 1s, opacity 0.5s;
+    display: flex;
+    justify-content: center;
+    align-content: center;
 
     h3 {
       font-weight: 700;
       text-align: center;
       font-size: calc(48px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
-      position: absolute;
-      right: 0;
-      top: 0;
-      transform: translate(150%, -150%);
+      // position: absolute;
+      // right: 0;
+      // top: 0;
+      // transform: translate(150%, -150%);
+      margin-left: calc(35px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     }
-    p {
+    .desc {
       font-size: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
-      // position: absolute;
-      // top: 15%;
-      // left: -250%;
-      // transform: translateX(-50%);
       letter-spacing: calc(2px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
       height: 140%;
       writing-mode: vertical-rl;
@@ -424,7 +422,7 @@ const imgBottomLoc = (nowId, itemId) => {
   .HD1_4Ac {
     opacity: 1;
     bottom: 40%;
-    width: auto;
+    // width: auto;
     left: 20%;
   }
 }