✨ feat: 活动详情页新增分享选择弹框

+.activity-detail-page {
+  background-color: #FFFFFF;
+  .share-wrapper {
+    position: relative;
+    .share-button {
+      position: absolute;
+      top: 1rem;
+      right: 0;
+      background-color: #199A74;
+      border-top-left-radius: 1rem;
+      border-bottom-left-radius: 1rem;
+      padding: 0.5rem;
+      color: #FFFFFF;
+    }
+  }
+  .title {
+    border-bottom: 1px solid #F6F6F6;
+    padding: 1rem;
+    font-size: 1.15rem;
+  }
+}
 .bg-gradient {
 .bg-gradient {
   background: linear-gradient(#B3DDC9, #B3DDC9) no-repeat;
   background: linear-gradient(#B3DDC9, #B3DDC9) no-repeat;
   /*调整下划线的宽度占百分之百  高度是3px */
   /*调整下划线的宽度占百分之百  高度是3px */

 <!--
 <!--
  * @Date: 2022-09-26 14:36:57
  * @Date: 2022-09-26 14:36:57
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-26 16:54:36
+ * @LastEditTime: 2022-09-26 17:37:54
  * @FilePath: /swx/src/pages/activityDetail/index.vue
  * @FilePath: /swx/src/pages/activityDetail/index.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
 <template>
 <template>
-  <view style="background-color: #FFFFFF;">
-    <view style="position: relative;">
+  <view class="activity-detail-page">
+    <view class="share-wrapper">
       <van-image
       <van-image
         width="100%"
         width="100%"
         height="15rem"
         height="15rem"
         fit="cover"
         fit="cover"
         :src="img_demo"
         :src="img_demo"
       />
       />
-      <view style="position: absolute; top: 1rem; right: 0; background-color: #199A74; border-top-left-radius: 1rem;border-bottom-left-radius: 1rem; padding: 0.5rem; color: #FFFFFF;">
+      <view @tap="shareActivity" class="share-button">
         <van-icon name="share-o" />
         <van-icon name="share-o" />
         <text>分享</text>
         <text>分享</text>
       </view>
       </view>
     </view>
     </view>
-    <view style="border-bottom: 1px solid #F6F6F6; padding: 1rem; font-size: 1.15rem;">八段锦</view>
+    <view class="title">八段锦</view>
     <view class="activity-title">
     <view class="activity-title">
       <view class="box">
       <view class="box">
         <text class="bg-gradient" style="font-size: 1.25rem;">活动信息</text>
         <text class="bg-gradient" style="font-size: 1.25rem;">活动信息</text>
@@ -120,6 +120,14 @@
   </view>
   </view>
   <view style="height: 6rem;"></view>
   <view style="height: 6rem;"></view>
   <activity-bar />
   <activity-bar />
+
+  <van-action-sheet
+    :show="show_share"
+    :actions="actions_share"
+    cancel-text="取消"
+    @cancel="onCancelShare"
+    @select="onSelectShare"
+  />
 </template>
 </template>
 
 
 <script setup>
 <script setup>
@@ -128,7 +136,24 @@ import img_demo1 from '@/images/demo@2x-1.png'
 import activityBar from '@/components/activity-bar.vue'
 import activityBar from '@/components/activity-bar.vue'
 
 
 import { ref } from "vue";
 import { ref } from "vue";
-const str = ref('demo')
+
+const show_share = ref(false);
+const actions_share = ref([{
+  name: '分享朋友'
+}, {
+  name: '生成海报'
+}]);
+const shareActivity = () => {
+  show_share.value = true;
+}
+const onCancelShare = () => {
+  show_share.value = false;
+}
+const onSelectShare = (event) => {
+  // TODO: 需要完善 分享朋友和生成海报功能
+  console.warn(event.detail);
+  show_share.value = false;
+}
 </script>
 </script>
 
 
 <script>
 <script>