弹幕相关功能优化调整

 <!--
 <!--
  * @Date: 2024-04-10 14:16:36
  * @Date: 2024-04-10 14:16:36
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-04-12 23:15:09
+ * @LastEditTime: 2024-04-13 10:40:09
  * @FilePath: /fxPark/src/components/danmaku.vue
  * @FilePath: /fxPark/src/components/danmaku.vue
  * @Description: 弹幕组件
  * @Description: 弹幕组件
 -->
 -->
@@ -52,9 +52,11 @@ watch(() => props.text, (v) => {
 watch(() => props.show, (v) => {
 watch(() => props.show, (v) => {
   nextTick(() => {
   nextTick(() => {
     if (v) {
     if (v) {
-      danmakuRef.value.show()
+      danmakuRef.value.show();
+      $('.danmu-boxer').css('zIndex', '10');
     } else {
     } else {
-      danmakuRef.value.hide()
+      danmakuRef.value.hide();
+      $('.danmu-boxer').css('zIndex', '0');
     }
     }
   })
   })
 }, {
 }, {

 <!--
 <!--
  * @Date: 2024-04-07 10:15:55
  * @Date: 2024-04-07 10:15:55
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-04-13 08:46:06
+ * @LastEditTime: 2024-04-14 10:05:55
  * @FilePath: /fxPark/src/views/fxPark/index.vue
  * @FilePath: /fxPark/src/views/fxPark/index.vue
  * @Description: 首页
  * @Description: 首页
 -->
 -->
@@ -23,12 +23,10 @@
       </div>
       </div>
     </div>
     </div>
     <div class="container" v-for="(item, index) in data_list" :key="index" @click="onChipClick()">
     <div class="container" v-for="(item, index) in data_list" :key="index" @click="onChipClick()">
-      <img :src="item.chip_src" class="img">
+      <img :src="item.chip_src" class="img" :style="{ zIndex: index }">
+      <!-- 示例范围标记 -->
+      <!-- <div class="range"></div> -->
     </div>
     </div>
-    <!-- <div style="position: fixed; bottom: 1rem; left: 0; right: 0; display: flex; z-index: 25;justify-content: space-evenly;"> -->
-      <!-- <div v-if="all_actived" @click="onShare" style="display: inline-flex; padding: 0.6rem 2rem; color: #F68015; background-color: #fff; align-items: center; border-radius: 1.5rem;">分享海报</div> -->
-      <!-- <div @click="commentsBtn" style="display: inline-flex; padding: 0.6rem 2rem; color: #fff; background-color: #F68015;align-items: center; border-radius: 1.5rem;">弹幕留言</div> -->
-    <!-- </div> -->
 
 
     <van-action-sheet v-model:show="show_danmu_message" title="留言" :round="false" :close-on-click-overlay="false" :closeable="false">
     <van-action-sheet v-model:show="show_danmu_message" title="留言" :round="false" :close-on-click-overlay="false" :closeable="false">
       <div class="danmu-input-wrapper" :style="{ height: space_height }">
       <div class="danmu-input-wrapper" :style="{ height: space_height }">
@@ -46,7 +44,11 @@
       <div v-if="spaceDiv" :style="{ height: space_height }"></div>
       <div v-if="spaceDiv" :style="{ height: space_height }"></div>
     </van-action-sheet>
     </van-action-sheet>
 
 
-    <van-floating-bubble icon="chat" @click="onCloseDanmu" />
+    <van-floating-bubble v-model:offset="offset" axis="xy" :gap="10" @click="onCloseDanmu">
+      <div style="font-size: 0.7rem;">
+        弹幕<br/>开关
+      </div>
+    </van-floating-bubble>
 
 
     <div v-if="show_danmu" class="danmu-boxer">
     <div v-if="show_danmu" class="danmu-boxer">
       <div class="danmu-boxer-btn" @click="commentsBtn">发一条友好的弹幕吧</div>
       <div class="danmu-boxer-btn" @click="commentsBtn">发一条友好的弹幕吧</div>
@@ -102,6 +104,8 @@ const TREE_CHIP = { // 碎片图结构
   },
   },
 };
 };
 
 
+const offset = ref({ x: -10, y: 500 });
+
 const data_list = ref([]);
 const data_list = ref([]);
 const all_actived = ref(false); // 全部激活
 const all_actived = ref(false); // 全部激活
 
 
@@ -132,6 +136,20 @@ onMounted(async () => {
     //
     //
     data_list.value = data;
     data_list.value = data;
   }
   }
+  //
+  // nextTick(() => {
+  //   $('.container').on('click', function(event) {
+  //     const rect = event.target.getBoundingClientRect(); // 获取图片位置信息
+  //     const x = event.clientX - rect.left; // 鼠标点击位置相对于图片左边的距离
+  //     const y = event.clientY - rect.top; // 鼠标点击位置相对于图片顶部的距离
+  //     // 示例范围标记位置
+  //     $('.range').css({ left: x + 'px', top: y + 'px' }).show(); // 更新范围标记位置并显示
+  //     // 判断点击范围是否在图片的矩形内
+  //     if (x >= 0 && x <= 50 && y >= 0 && y <= 50) {
+  //         alert('点击了图片的矩形范围内');
+  //     }
+  //   });
+  // });
 });
 });
 
 
 const RefDanmu = ref(null);
 const RefDanmu = ref(null);
@@ -241,10 +259,10 @@ const onCloseDanmu = () => { // 弹幕开关
   }
   }
   .container {
   .container {
     width: 100%;
     width: 100%;
-    height: 100%;
+    height: 100vh;
     background-size: contain;
     background-size: contain;
     position: absolute;
     position: absolute;
-    z-index: 1;
+    // z-index: 1;
     top: 0;
     top: 0;
     left: 0;
     left: 0;
     background-repeat: no-repeat;
     background-repeat: no-repeat;
@@ -256,6 +274,18 @@ const onCloseDanmu = () => { // 弹幕开关
       object-fit: cover;
       object-fit: cover;
     }
     }
   }
   }
+  /* 示例范围标记 */
+  .range {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 50px;
+    height: 50px;
+    border: 2px solid red;
+    pointer-events: none; /* 防止遮挡点击事件 */
+    display: none; /* 初始隐藏 */
+    z-index: 999;
+  }
 }
 }
 
 
 .danmu-input-wrapper {
 .danmu-input-wrapper {