fix(components): 修复手机端点击事件导致按钮状态异常

- 在 x-button 组件中添加 event.stopPropagation() 以防止事件冒泡- 更新 SideButton 组件中的事件处理方式，确保点击事件正确触发

app/components/x-button/index.vue

@@ -1,29 +1,27 @@
 <script setup>
-/*
+import { ref } from "vue";
-* 此组件的目的是使用该组件包裹的内容具有按压状态效果
-* */
-import {ref, defineEmits} from "vue";
-
-const emit = defineEmits(["click"]);
 
 const isButtonActive = ref(false);
 
-const handleButtonPress = () => {
+const handleButtonPress = (event) => {
+  event.stopPropagation();
   isButtonActive.value = true;
 };
-const handleButtonRelease = () => {
+
+const handleButtonRelease = (event) => {
+  event.stopPropagation();
   isButtonActive.value = false;
-  emit("click")
 };
 </script>
+
 <template>
   <div
       :class="[
       'transition-all duration-200',
       isButtonActive ? 'scale-95' : ''
     ]"
-      @touchstart="handleButtonPress"
+      @touchstart.stop="handleButtonPress"
-      @touchend="handleButtonRelease"
+      @touchend.stop="handleButtonRelease"
   >
     <slot></slot>
   </div>

app/pages/liveRoom/components/SideButton/index.vue

@@ -18,8 +18,8 @@ getSocketData()
 <template>
   <div class="bg-white w-60px rounded-l-4px overflow-hidden">
     <!-- 拍品信息 -->
-    <x-button>
+    <x-button @click="openOne">
-      <div @click="openOne" class="w-60px h-60px text-center border-b border-gray-300 flex flex-col justify-center items-center text-#7D7D7F text-12px">
+      <div  class="w-60px h-60px text-center border-b border-gray-300 flex flex-col justify-center items-center text-#7D7D7F text-12px">
         <div>拍品</div>
         <div>({{auctionData?.artwork?.index}}/{{pageRef.itemCount??0}})</div>
       </div>