refactor(ShareButton): 重构分享按钮组件为独立按钮形式

移除原有的气泡弹窗设计，改为直接显示分享活动和分享海报两个独立按钮
简化组件逻辑，删除不必要的状态管理和动画样式
优化按钮样式，使用更明显的颜色区分不同功能

 <!--
 <!--
+ * @Date: 2025-09-03 14:34:58
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-09-08 11:16:47
+ * @FilePath: /lls_program/src/components/ShareButton/index.vue
+ * @Description: 文件描述
+-->
+<!--
  * @Description: 分享按钮组件 - 点击后弹出分享选项
  * @Description: 分享按钮组件 - 点击后弹出分享选项
 -->
 -->
 <template>
 <template>
   <view class="share-button-container">
   <view class="share-button-container">
-    <!-- 分享按钮 -->
-    <view @tap="toggleShareOptions" class="share-button">
-      <text>分享</text>
-    </view>
-
-    <!-- 分享选项气泡弹窗 -->
-    <view v-if="showOptions" class="share-popover">
-      <view class="popover-arrow"></view>
-      <view class="popover-content">
-        <view class="popover-item" style="padding: 0; padding-top: 8rpx;">
-          <button id="share" data-name="shareBtn" open-type="share" class="share-native-button">活动</button>
-        </view>
-        <view class="popover-divider"></view>
-        <view @tap="handleSharePoster" class="popover-item">
-          <text>海报</text>
-        </view>
-      </view>
+    <!-- 分享活动按钮 -->
+    <button id="share" data-name="shareBtn" open-type="share" class="share-button share-activity-btn">
+      分享活动
+    </button>
+
+    <!-- 分享海报按钮 -->
+    <view @tap="handleSharePoster" class="share-button share-poster-btn">
+      分享海报
     </view>
     </view>
-
-    <!-- 遮罩层 -->
-    <view v-if="showOptions" class="popover-mask" @tap="hideShareOptions"></view>
   </view>
   </view>
 </template>
 </template>
 
 
@@ -43,36 +38,10 @@ const props = defineProps({
 // 组件事件
 // 组件事件
 const emit = defineEmits(['shareActivity', 'sharePoster'])
 const emit = defineEmits(['shareActivity', 'sharePoster'])
 
 
-// 响应式数据
-const showOptions = ref(false)
-
-/**
- * 切换分享选项显示状态
- */
-const toggleShareOptions = () => {
-  showOptions.value = !showOptions.value
-}
-
-/**
- * 隐藏分享选项
- */
-const hideShareOptions = () => {
-  showOptions.value = false
-}
-
-/**
- * 处理活动分享
- */
-const handleShareActivity = () => {
-  hideShareOptions()
-  emit('shareActivity', props.activityData)
-}
-
 /**
 /**
  * 处理海报分享
  * 处理海报分享
  */
  */
 const handleSharePoster = () => {
 const handleSharePoster = () => {
-  hideShareOptions()
   emit('sharePoster', props.activityData)
   emit('sharePoster', props.activityData)
 }
 }
 </script>
 </script>
@@ -83,121 +52,73 @@ const handleSharePoster = () => {
   top: 40rpx;
   top: 40rpx;
   right: 40rpx;
   right: 40rpx;
   z-index: 1000;
   z-index: 1000;
-}
-
-.share-button {
-  color: white;
-  width: 80rpx;
-  height: 80rpx;
-  border-radius: 50%;
-  background: rgba(0, 0, 0, 0.6);
   display: flex;
   display: flex;
+  flex-direction: column;
+  gap: 16rpx;
   align-items: center;
   align-items: center;
-  justify-content: center;
-  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
-  transition: all 0.3s ease;
-  backdrop-filter: blur(10rpx);
-
-  &:active {
-    transform: scale(0.95);
-    background: rgba(0, 0, 0, 0.8);
-  }
 }
 }
 
 
-.share-icon {
-  font-size: 32rpx;
-  color: white;
-}
-
-// 气泡弹窗样式
-.share-popover {
-  position: fixed;
-  top: 140rpx;
-  right: 40rpx;
-  z-index: 9999;
-  animation: popoverFadeIn 0.2s ease;
-}
-
-.popover-arrow {
-  position: absolute;
-  top: -12rpx;
-  right: 30rpx;
-  width: 0;
-  height: 0;
-  border-left: 12rpx solid transparent;
-  border-right: 12rpx solid transparent;
-  border-bottom: 12rpx solid white;
-}
-
-.popover-content {
-  background: white;
-  border-radius: 16rpx;
-  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
-  overflow: hidden;
-  min-width: 160rpx;
-}
-
-.popover-item {
-  padding: 24rpx 32rpx;
-  font-size: 28rpx;
-  color: #333;
-  text-align: center;
-  transition: background-color 0.2s ease;
-
-  &:active {
-    background-color: #f5f5f5;
-  }
-}
-
-.popover-divider {
-  height: 1rpx;
-  background-color: #f0f0f0;
-  margin: 0 16rpx;
-}
-
-.popover-mask {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 9998;
-}
-
-// 原生button样式重置
-.share-native-button {
+.share-button {
+  // 重置所有默认样式 - 使用!important强制覆盖
+  margin: 0 !important;
+  padding: 0 !important;
   border: none !important;
   border: none !important;
   outline: none !important;
   outline: none !important;
-  background: transparent !important;
-  padding: 0 !important;
-  margin: 0 !important;
-  font-size: 28rpx !important;
-  line-height: 2 !important;
-  color: #333 !important;
-  width: 100% !important;
-  height: auto !important;
-  text-align: center !important;
+  background: none !important;
+  font: inherit !important;
+  position: relative !important;
+  display: inline-block !important;
   
   
+  // 应用自定义样式
+  color: white !important;
+  padding: 12rpx 20rpx !important;
+  border-radius: 32rpx !important;
+  background: rgba(0, 0, 0, 0.6) !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2) !important;
+  transition: all 0.3s ease !important;
+  backdrop-filter: blur(10rpx) !important;
+  font-size: 24rpx !important;
+  width: 140rpx !important;
+  height: 60rpx !important;
+  white-space: nowrap !important;
+  flex-shrink: 0 !important;
+  box-sizing: border-box !important;
+  line-height: normal !important;
+  text-align: center !important;
+
+  &:active {
+    transform: scale(0.95) !important;
+    background: rgba(0, 0, 0, 0.8) !important;
+  }
+   
   // 去除微信小程序button的默认样式
   // 去除微信小程序button的默认样式
   &::after {
   &::after {
     border: none !important;
     border: none !important;
+    content: none !important;
   }
   }
   
   
-  // 去除点击态样式
-  &:active {
-    background: transparent !important;
+  // 去除button默认的点击效果
+  &.button-hover {
+    background: rgba(0, 0, 0, 0.8) !important;
   }
   }
 }
 }
 
 
-// 动画
-@keyframes popoverFadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(-10rpx);
+.share-activity-btn {
+  background: rgba(74, 144, 226, 0.9);
+
+  &:active {
+    background: rgba(74, 144, 226, 1);
   }
   }
-  to {
-    opacity: 1;
-    transform: translateY(0);
+}
+
+.share-poster-btn {
+  background: rgba(52, 199, 89, 0.9);
+
+  &:active {
+    background: rgba(52, 199, 89, 1);
   }
   }
 }
 }
 </style>
 </style>