新增better-scroll

src/components/Loading.vue

@@ -18,7 +18,7 @@ onMounted(() => {
     name: "加载页资源",
     imgs: loadImg,
     callback: (progress) => {
-      console.log('进度：', progress);
+      // console.log('进度：', progress);
     },
   }).then((res) => {
     gsap.to(".LoadPage", {

src/components/Rule.vue

@@ -1,16 +1,24 @@
 <script setup>
 import { debounceTap } from "@/plugins";
 import gsap from "gsap";
+import BScroll from '@better-scroll/core'
 
 // 页面配置初始化
 const emit = defineEmits(["RulePage"]);
 
 const hide = (event) => {
     debounceTap(event.target, () => {
+        scroll.value.destroy()
         emit("RulePage", { action: "hide" });
     });
 };
+
+let scroll = ref()
 onMounted(() => {
+
+    let wrapper = document.querySelector('.wrapper')
+     scroll.value = new BScroll(wrapper)
+
     gsap.from(".RulePage", { duration: 0.2, autoAlpha: 0 });
     gsap.from(".rule-container", { duration: 0.5, autoAlpha: 0, scale: 0.7 });
     gsap.to(".rule-arrow", { duration: 2.5, y: 10,repeat:-1,yoyo:true  });
@@ -18,11 +26,12 @@ onMounted(() => {
 </script>
 
 <template>
-    <div class="RulePage">
+    <div class="RulePage" @touchmove.prevent>
         <div class="rule-container">
             <div class="content">
                 <div class="rule-content">
-                    <div class="rule-text-area">
+                    <div class="rule-text-area wrapper">
+                        <div>
                         <div class="part">
                             <div>活动时间：2024年2月23日——2月25日</div>
                             <div>活动奖励：微信红包</div>
@@ -68,9 +77,9 @@ onMounted(() => {
                                 3、用户参与本活动，即视为理解并同意本活动细则。在法律规定的范围内，平安理财有权对活动规则进行解释，并根据活动实际情况对本活动的规则进行变动或调整，相关变动或调整将公布在规则页面，并于公布时即时生效。
                             </div>
                         </div>
-                            
                         <div class="margin-bottom-area"></div>
                     </div>
+                    </div>
                 </div>
                 <div class="rule-bottom-bg"></div>
                 <div class="rule-arrow"></div>
@@ -101,9 +110,8 @@ onMounted(() => {
 
                 .rule-text-area {
                     @include pos(612px, 676px, 0px, 101px);
-                    // background-color: #000000;
                     overflow: hidden;
-                    overflow-y: scroll;
+                    // overflow-y: scroll;
                     padding: 0px 20px;
                     
 
@@ -123,7 +131,8 @@ onMounted(() => {
                     }
 
                     .margin-bottom-area{
-                        margin-bottom: 100px;
+                        // margin-bottom: 100px;
+                        height: 100px;
                     }
                 }
             }