diff --git a/src/assets/img/p_1.png b/src/assets/img/p_1.png
new file mode 100644
index 0000000..ede058e
Binary files /dev/null and b/src/assets/img/p_1.png differ
diff --git a/src/assets/img/p_2.png b/src/assets/img/p_2.png
new file mode 100644
index 0000000..8d4ac57
Binary files /dev/null and b/src/assets/img/p_2.png differ
diff --git a/src/assets/img/p_3.png b/src/assets/img/p_3.png
new file mode 100644
index 0000000..76e52f3
Binary files /dev/null and b/src/assets/img/p_3.png differ
diff --git a/src/assets/img/p_4.png b/src/assets/img/p_4.png
new file mode 100644
index 0000000..834bbbe
Binary files /dev/null and b/src/assets/img/p_4.png differ
diff --git a/src/assets/img/p_5.png b/src/assets/img/p_5.png
new file mode 100644
index 0000000..a8d02fc
Binary files /dev/null and b/src/assets/img/p_5.png differ
diff --git a/src/components/Index.vue b/src/components/Index.vue
index 6a3c254..77a46c2 100644
--- a/src/components/Index.vue
+++ b/src/components/Index.vue
@@ -1,96 +1,100 @@
 <template>
-  <div class="indexPage">
-    <div class="indexCon">
-      <div class="logo"></div>
-      <div class="title_main"></div>
-      <div class="cloud_left_1"></div>
-      <div class="cloud_right_1"></div>
-      <div class="luckybag_left"></div>
-      <div class="luckybag_right"></div>
-      <div class="icon_left_1"></div>
-      <div class="lucky_bag"></div>
-      <div class="lucky_bag_2">
-        <div class="prize_num">{{ prizeResult }}<span>元</span></div>
-      </div>
-      <div class="notice">
-        <span class="icon"
-          ><img src="../assets/img/laba.png" alt="" srcset=""
-        /></span>
-        <span class="num">活动已有{{ participantNum }}人参与</span>
-      </div>
-      <div class="cloud_left_2"></div>
-      <div class="icon_left_2"></div>
-      <div class="cloud_right_2"></div>
-      <!-- 大转盘 -->
-      <div class="zhuanpan">
-        <!-- <div class="liwu">
+	<div class="indexPage">
+		<div class="indexCon">
+			<div class="logo"></div>
+			<div class="title_main"></div>
+			<div class="cloud_left_1"></div>
+			<div class="cloud_right_1"></div>
+			<div class="luckybag_left"></div>
+			<div class="luckybag_right"></div>
+			<div class="icon_left_1"></div>
+			<div class="lucky_bag"></div>
+			<div class="lucky_bag_2">
+				<div class="prize_num">{{ prizeResult }}<span>元</span></div>
+			</div>
+			<div class="notice">
+				<span class="icon"
+					><img src="../assets/img/laba.png" alt="" srcset=""
+				/></span>
+				<span class="num">活动已有{{ participantNum }}人参与</span>
+			</div>
+			<div class="cloud_left_2"></div>
+			<div class="icon_left_2"></div>
+			<div class="cloud_right_2"></div>
+			<!-- 大转盘 -->
+			<div class="zhuanpan">
+				<!-- <div class="liwu">
                     <div>1.99</div>
                     <div>2.99</div>
                     <div>3.99</div>
                     <div>4.99</div>
                     <div>5.99</div>
                 </div> -->
-      </div>
-      <div class="icon_right_2"></div>
-      <div class="icon_right_3"></div>
-      <div class="cloud_left_3"></div>
-      <div class="cloud_right_3"></div>
-      <div class="icon_right_1"></div>
-      <div class="select_box"></div>
-      <div class="draw_btn" @click="drawBtn"></div>
-      <div class="rule_btn" @click="showRluesBtn"></div>
-      <div class="prize_btn" @click="showMyPrizePop"></div>
-      <div class="rule_btn_text"></div>
-      <div class="prize_btn_text"></div>
-      <div class="caidai"></div>
-    </div>
-    <!-- 活动列表 -->
-    <div class="activityCon">
-      <div class="activity_box">
-        <div class="activity_title">
-          <img src="../assets/img/activity_title.png" alt="" />
-        </div>
-        <div class="activity_list">
-          <div
-            class="activity_li"
-            v-for="(item, index) in activityList"
-            :key="index"
-            :style="{ 'background-image': 'url(' + item.banner + ')' }"
-            v-show="item.show"
-          >
-            <div
-              class="btn"
-              :style="{ 'background-image': 'url(' + item.btnImg + ')' }"
-              @click="activityBtn(item)"
-            ></div>
-          </div>
-        </div>
-      </div>
-      <div class="cloud_bottom"></div>
-    </div>
+			</div>
+			<div class="icon_right_2"></div>
+			<div class="icon_right_3"></div>
+			<div class="cloud_left_3"></div>
+			<div class="cloud_right_3"></div>
+			<div class="icon_right_1"></div>
+			<div class="select_box"></div>
+			<div class="draw_btn" @click="drawBtn"></div>
+			<div class="rule_btn" @click="showRluesBtn"></div>
+			<div class="prize_btn" @click="showMyPrizePop"></div>
+			<div class="rule_btn_text"></div>
+			<div class="prize_btn_text"></div>
+			<div class="caidai"></div>
+		</div>
+		<!-- 活动列表 -->
+		<div class="activityCon">
+			<div class="activity_box">
+				<div class="activity_title">
+					<img src="../assets/img/activity_title.png" alt="" />
+				</div>
+				<div class="activity_list">
+					<div
+						class="activity_li"
+						v-for="(item, index) in activityList"
+						:key="index"
+						:style="{
+							'background-image': 'url(' + item.banner + ')',
+						}"
+						v-show="item.show"
+					>
+						<div
+							class="btn"
+							:style="{
+								'background-image': 'url(' + item.btnImg + ')',
+							}"
+							@click="activityBtn(item)"
+						></div>
+					</div>
+				</div>
+			</div>
+			<div class="cloud_bottom"></div>
+		</div>
 
-    <!-- 活动规则弹窗 -->
-    <Rules v-if="showRulesPop" @RulesPop="hideRulesPop" />
-    <!-- 我的奖品弹窗 -->
-    <MyPrize v-if="showMyPrize" @MyPrize="myPrizePop" />
-    <!-- 添加专属服务人员企微弹窗 -->
-    <ServiceList v-if="showServicePop" @ServicePop="hideServicePop" />
+		<!-- 活动规则弹窗 -->
+		<Rules v-if="showRulesPop" @RulesPop="hideRulesPop" />
+		<!-- 我的奖品弹窗 -->
+		<MyPrize v-if="showMyPrize" @MyPrize="myPrizePop" />
+		<!-- 添加专属服务人员企微弹窗 -->
+		<ServiceList v-if="showServicePop" @ServicePop="hideServicePop" />
 
-    <LuckyWheel v-if="false" />
-  </div>
+		<LuckyWheel v-if="false" />
+	</div>
 </template>
 
 <script setup>
 import {
-  onBeforeMount,
-  onMounted,
-  defineEmits,
-  defineProps,
-  reactive,
-  ref,
-  toRefs,
-  getCurrentInstance,
-  computed,
+	onBeforeMount,
+	onMounted,
+	defineEmits,
+	defineProps,
+	reactive,
+	ref,
+	toRefs,
+	getCurrentInstance,
+	computed,
 } from "vue";
 import gsap from "gsap";
 import axios from "axios";
@@ -122,36 +126,36 @@ const showServicePop = ref(false);
 
 // 活动列表
 const activityList = reactive([
-  {
-    id: 1,
-    show: true,
-    banner: require("../assets/img/activity_1.png"),
-    btnImg: require("../assets/img/li_btn_1.png"),
-  },
-  {
-    id: 2,
-    show: true,
-    banner: require("../assets/img/activity_2.png"),
-    btnImg: require("../assets/img/li_btn_2.png"),
-  },
-  {
-    id: 3,
-    show: true,
-    banner: require("../assets/img/activity_3.png"),
-    btnImg: require("../assets/img/li_btn_3.png"),
-  },
-  {
-    id: 4,
-    show: true,
-    banner: require("../assets/img/activity_4.png"),
-    btnImg: require("../assets/img/li_btn_4.png"),
-  },
-  {
-    id: 5,
-    show: true,
-    banner: require("../assets/img/activity_5.png"),
-    btnImg: require("../assets/img/li_btn_5.png"),
-  },
+	{
+		id: 1,
+		show: true,
+		banner: require("../assets/img/activity_1.png"),
+		btnImg: require("../assets/img/li_btn_1.png"),
+	},
+	{
+		id: 2,
+		show: true,
+		banner: require("../assets/img/activity_2.png"),
+		btnImg: require("../assets/img/li_btn_2.png"),
+	},
+	{
+		id: 3,
+		show: true,
+		banner: require("../assets/img/activity_3.png"),
+		btnImg: require("../assets/img/li_btn_3.png"),
+	},
+	{
+		id: 4,
+		show: true,
+		banner: require("../assets/img/activity_4.png"),
+		btnImg: require("../assets/img/li_btn_4.png"),
+	},
+	{
+		id: 5,
+		show: true,
+		banner: require("../assets/img/activity_5.png"),
+		btnImg: require("../assets/img/li_btn_5.png"),
+	},
 ]);
 
 // 页面挂载前
@@ -161,384 +165,387 @@ onBeforeMount(() => {});
 onMounted(() => {});
 
 const btn = () => {
-  // Toast('项目开发中');
-  emit("indexPage", "hello");
+	// Toast('项目开发中');
+	emit("indexPage", "hello");
 
-  Dialog.alert({
-    title: "招商证券88司庆活动",
-    message: "项目开发中",
-    confirmButtonText: "确定",
-    showCancelButton: true,
-  })
-    .then((e) => {
-      // 更新openid
-      store.commit({ type: "updateOpenid", openid: "openid110" });
+	Dialog.alert({
+		title: "招商证券88司庆活动",
+		message: "项目开发中",
+		confirmButtonText: "确定",
+		showCancelButton: true,
+	})
+		.then((e) => {
+			// 更新openid
+			store.commit({ type: "updateOpenid", openid: "openid110" });
 
-      console.log(e, store.state.userAccount);
-    })
-    .catch((e) => {
-      console.log(e);
-    });
+			console.log(e, store.state.userAccount);
+		})
+		.catch((e) => {
+			console.log(e);
+		});
 };
 
 // 抽奖按钮
 const drawBtn = () => {
-  console.log("抽奖22：");
+	console.log("抽奖22：");
 
-  service.get(process.env.VUE_APP_API + '/cms88/card/qrcode/',cardId=store.state.userAccount.cardId )
-  .then((res) => {
+	service
+		.get(
+			process.env.VUE_APP_API + "/cms88/card/qrcode/",
+			(cardId = store.state.userAccount.cardId)
+		)
+		.then((res) => {
+			console.log(res);
+		});
 
-    console.log(res);
-  })
-
-  //   console.log("授权：",getAuthorize(1));
-  // if (h5plugin.getQueryString("forceauth")) {
-  //   console.log("yes-forceauth");
-  //   getAuthorize(0);
-  // } else {
-  //   console.log("no-forceauth");
-  //   getAuthorize(1);
-  // }
+	//   console.log("授权：",getAuthorize(1));
+	// if (h5plugin.getQueryString("forceauth")) {
+	//   console.log("yes-forceauth");
+	//   getAuthorize(0);
+	// } else {
+	//   console.log("no-forceauth");
+	//   getAuthorize(1);
+	// }
 };
 
 // 活动点击
 const activityBtn = (item) => {
-  console.log(item.id);
+	console.log(item.id);
 
-  if (item.id == 1) {
-    showServicePop.value = true;
-  }
+	if (item.id == 1) {
+		showServicePop.value = true;
+	}
 };
 
 // 活动规则弹窗
 const showRluesBtn = () => {
-  showRulesPop.value = true;
+	showRulesPop.value = true;
 };
 const hideRulesPop = () => {
-  showRulesPop.value = false;
+	showRulesPop.value = false;
 };
 
 // 我的奖品页面
 const showMyPrizePop = () => {
-  showMyPrize.value = true;
+	showMyPrize.value = true;
 };
 const myPrizePop = () => {
-  showMyPrize.value = false;
+	showMyPrize.value = false;
 };
 
 // 企微弹窗
 const hideServicePop = () => {
-  showServicePop.value = false;
+	showServicePop.value = false;
 };
 
 // 招商证券授权
 const getAuthorize = (scopeState) => {
-  let href = window.location.href;
-  let h_idx = window.location.href.indexOf("#");
-  let out_href = href.slice(0, h_idx);
-  // return `${process.env.VUE_APP_ZS_DOMAIN}/wxauth/official/account/authorize?redirectUrl=${out_href}&scope=${1}"`;
-  window.location.href = `${process.env.VUE_APP_ZS_DOMAIN}/wxauth/official/account/authorize?redirectUrl=${out_href}&scope=${scopeState}`;
+	let href = window.location.href;
+	let h_idx = window.location.href.indexOf("#");
+	let out_href = href.slice(0, h_idx);
+	// return `${process.env.VUE_APP_ZS_DOMAIN}/wxauth/official/account/authorize?redirectUrl=${out_href}&scope=${1}"`;
+	window.location.href = `${process.env.VUE_APP_ZS_DOMAIN}/wxauth/official/account/authorize?redirectUrl=${out_href}&scope=${scopeState}`;
 };
 </script>
 
 <style lang="scss" scoped>
 .indexPage {
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  overflow: hidden;
-  overflow-y: scroll;
+	width: 100%;
+	height: 100%;
+	position: fixed;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	overflow: hidden;
+	overflow-y: scroll;
 
-  .indexCon {
-    // @include pos(100%, 1090px, 0, 0);
-    width: 100%;
-    height: 1090px;
-    position: relative;
-    top: 0;
-    left: 0;
-    @include bg_pos("../assets/img/top_bg.jpg");
-    // overflow: hidden;
+	.indexCon {
+		// @include pos(100%, 1090px, 0, 0);
+		width: 100%;
+		height: 1090px;
+		position: relative;
+		top: 0;
+		left: 0;
+		@include bg_pos("../assets/img/top_bg.jpg");
+		// overflow: hidden;
 
-    .logo {
-      @include pos(241px, 36px, 31px, 41px);
-      @include bg_pos("../assets/img/logo.png");
-      pointer-events: none;
-    }
+		.logo {
+			@include pos(241px, 36px, 31px, 41px);
+			@include bg_pos("../assets/img/logo.png");
+			pointer-events: none;
+		}
 
-    .notice {
-      @include pos(350px, 48px, 200px, 592px);
-      @include bg_pos("../assets/img/notice_box.png");
-      pointer-events: none;
-      align-self: center;
-      justify-content: center;
+		.notice {
+			@include pos(350px, 48px, 200px, 592px);
+			@include bg_pos("../assets/img/notice_box.png");
+			pointer-events: none;
+			align-self: center;
+			justify-content: center;
 
-      display: flex;
-      font-size: 20px;
+			display: flex;
+			font-size: 20px;
 
-      .icon {
-        width: 26px;
-        height: 48px;
-        // @include bg_pos('../assets/img/laba.png');
+			.icon {
+				width: 26px;
+				height: 48px;
+				// @include bg_pos('../assets/img/laba.png');
 
-        line-height: 54px;
+				line-height: 54px;
 
-        img {
-          width: 26px;
-          height: 25px;
-        }
-      }
+				img {
+					width: 26px;
+					height: 25px;
+				}
+			}
 
-      .num {
-        height: 48px;
-        line-height: 48px;
-      }
-    }
+			.num {
+				height: 48px;
+				line-height: 48px;
+			}
+		}
 
-    .title_main {
-      @include pos(547px, 221px, 107px, 108px);
-      @include bg_pos("../assets/img/title_main.png");
-      pointer-events: none;
-    }
+		.title_main {
+			@include pos(547px, 221px, 107px, 108px);
+			@include bg_pos("../assets/img/title_main.png");
+			pointer-events: none;
+		}
 
-    .caidai {
-      @include pos(641px, 503px, 47px, 79px);
-      @include bg_pos("../assets/img/caidai.png");
-      pointer-events: none;
-    }
+		.caidai {
+			@include pos(641px, 503px, 47px, 79px);
+			@include bg_pos("../assets/img/caidai.png");
+			pointer-events: none;
+		}
 
-    .luckybag_left {
-      @include pos(144px, 138px, 0px, 551px);
-      @include bg_pos("../assets/img/luckybag_left.png");
-      pointer-events: none;
-    }
+		.luckybag_left {
+			@include pos(144px, 138px, 0px, 551px);
+			@include bg_pos("../assets/img/luckybag_left.png");
+			pointer-events: none;
+		}
 
-    .luckybag_right {
-      @include pos(118px, 110px, 615px, 503px);
-      @include bg_pos("../assets/img/luckybag_right_2.png");
-      pointer-events: none;
-    }
+		.luckybag_right {
+			@include pos(118px, 110px, 615px, 503px);
+			@include bg_pos("../assets/img/luckybag_right_2.png");
+			pointer-events: none;
+		}
 
-    .icon_left_1 {
-      @include pos(54px, 52px, 104px, 605px);
-      @include bg_pos("../assets/img/icon_left_1.png");
-      pointer-events: none;
-    }
+		.icon_left_1 {
+			@include pos(54px, 52px, 104px, 605px);
+			@include bg_pos("../assets/img/icon_left_1.png");
+			pointer-events: none;
+		}
 
-    .icon_left_2 {
-      @include pos(63px, 61px, 11px, 652px);
-      @include bg_pos("../assets/img/icon_left_2.png");
-      pointer-events: none;
-    }
+		.icon_left_2 {
+			@include pos(63px, 61px, 11px, 652px);
+			@include bg_pos("../assets/img/icon_left_2.png");
+			pointer-events: none;
+		}
 
-    .icon_right_1 {
-      @include pos(81px, 80px, 556px, 400px);
-      @include bg_pos("../assets/img/icon_right_1.png");
-      pointer-events: none;
-    }
+		.icon_right_1 {
+			@include pos(81px, 80px, 556px, 400px);
+			@include bg_pos("../assets/img/icon_right_1.png");
+			pointer-events: none;
+		}
 
-    .icon_right_2 {
-      @include pos(70px, 65px, 567px, 573px);
-      @include bg_pos("../assets/img/icon_right_2.png");
-      pointer-events: none;
-    }
+		.icon_right_2 {
+			@include pos(70px, 65px, 567px, 573px);
+			@include bg_pos("../assets/img/icon_right_2.png");
+			pointer-events: none;
+		}
 
-    .icon_right_3 {
-      @include pos(103px, 108px, 633px, 600px);
-      @include bg_pos("../assets/img/luckybag_right.png");
-      pointer-events: none;
-    }
+		.icon_right_3 {
+			@include pos(103px, 108px, 633px, 600px);
+			@include bg_pos("../assets/img/luckybag_right.png");
+			pointer-events: none;
+		}
 
-    .cloud_left_1 {
-      @include pos(214px, 147px, 0px, 523px);
-      @include bg_pos("../assets/img/cloud_left_1.png");
-      pointer-events: none;
-    }
+		.cloud_left_1 {
+			@include pos(214px, 147px, 0px, 523px);
+			@include bg_pos("../assets/img/cloud_left_1.png");
+			pointer-events: none;
+		}
 
-    .cloud_left_2 {
-      @include pos(375px, 176px, 0px, 616px);
-      @include bg_pos("../assets/img/cloud_left_2.png");
-      pointer-events: none;
-    }
+		.cloud_left_2 {
+			@include pos(375px, 176px, 0px, 616px);
+			@include bg_pos("../assets/img/cloud_left_2.png");
+			pointer-events: none;
+		}
 
-    .cloud_left_3 {
-      @include pos(151px, 136px, 0px, 645px);
-      @include bg_pos("../assets/img/cloud_left_3.png");
-      pointer-events: none;
-    }
+		.cloud_left_3 {
+			@include pos(151px, 136px, 0px, 645px);
+			@include bg_pos("../assets/img/cloud_left_3.png");
+			pointer-events: none;
+		}
 
-    .cloud_right_1 {
-      @include pos(270px, 215px, 480px, 477px);
-      @include bg_pos("../assets/img/cloud_right_1.png");
-      pointer-events: none;
-    }
+		.cloud_right_1 {
+			@include pos(270px, 215px, 480px, 477px);
+			@include bg_pos("../assets/img/cloud_right_1.png");
+			pointer-events: none;
+		}
 
-    .cloud_right_2 {
-      @include pos(375px, 202px, 375px, 595px);
-      @include bg_pos("../assets/img/cloud_right_2.png");
-      pointer-events: none;
-    }
+		.cloud_right_2 {
+			@include pos(375px, 202px, 375px, 595px);
+			@include bg_pos("../assets/img/cloud_right_2.png");
+			pointer-events: none;
+		}
 
-    .cloud_right_3 {
-      @include pos(113px, 108px, 639px, 686px);
-      @include bg_pos("../assets/img/cloud_right_3.png");
-      pointer-events: none;
-    }
+		.cloud_right_3 {
+			@include pos(113px, 108px, 639px, 686px);
+			@include bg_pos("../assets/img/cloud_right_3.png");
+			pointer-events: none;
+		}
 
-    .lucky_bag {
-      @include pos(308px, 355px, 227px, 356px);
-      @include bg_pos("../assets/img/luckybag.png");
-      pointer-events: none;
-      visibility: hidden;
-    }
+		.lucky_bag {
+			@include pos(308px, 355px, 227px, 356px);
+			@include bg_pos("../assets/img/luckybag.png");
+			pointer-events: none;
+			visibility: hidden;
+		}
 
-    .lucky_bag_2 {
-      @include pos(330px, 345px, 210px, 348px);
-      @include bg_pos("../assets/img/luckybag_2.png");
-      pointer-events: none;
+		.lucky_bag_2 {
+			@include pos(330px, 345px, 210px, 348px);
+			@include bg_pos("../assets/img/luckybag_2.png");
+			pointer-events: none;
 
-      // display: flex;
+			// display: flex;
 
-      .prize_num {
-        @include pos(330px, 50px, 0px, 79px);
-        font-weight: 700;
-        font-size: 59px;
-        color: #ff480e;
-        text-align: center;
+			.prize_num {
+				@include pos(330px, 50px, 0px, 79px);
+				font-weight: 700;
+				font-size: 59px;
+				color: #ff480e;
+				text-align: center;
 
-        span {
-          color: #ca2f0a;
-          font-size: 24px;
-          font-weight: 700;
-        }
-      }
-    }
+				span {
+					color: #ca2f0a;
+					font-size: 24px;
+					font-weight: 700;
+				}
+			}
+		}
 
-    .select_box {
-      @include pos(270px, 325px, 239px, 666px);
-      @include bg_pos("../assets/img/select_box.png");
-      pointer-events: none;
-    }
+		.select_box {
+			@include pos(270px, 325px, 239px, 666px);
+			@include bg_pos("../assets/img/select_box.png");
+			pointer-events: none;
+		}
 
-    .draw_btn {
-      @include pos(216px, 252px, 273px, 810px);
-      @include bg_pos("../assets/img/draw_btn.png");
-    }
+		.draw_btn {
+			@include pos(216px, 252px, 273px, 810px);
+			@include bg_pos("../assets/img/draw_btn.png");
+		}
 
-    .rule_btn {
-      @include pos(137px, 153px, 75px, 883px);
-      @include bg_pos("../assets/img/rule_btn.png");
-    }
+		.rule_btn {
+			@include pos(137px, 153px, 75px, 883px);
+			@include bg_pos("../assets/img/rule_btn.png");
+		}
 
-    .rule_btn_text {
-      @include pos(98px, 26px, 92px, 1035px);
-      @include bg_pos("../assets/img/rule_btn_text.png");
-    }
+		.rule_btn_text {
+			@include pos(98px, 26px, 92px, 1035px);
+			@include bg_pos("../assets/img/rule_btn_text.png");
+		}
 
-    .prize_btn {
-      @include pos(137px, 153px, 541px, 883px);
-      @include bg_pos("../assets/img/prize_btn.png");
-    }
+		.prize_btn {
+			@include pos(137px, 153px, 541px, 883px);
+			@include bg_pos("../assets/img/prize_btn.png");
+		}
 
-    .prize_btn_text {
-      @include pos(98px, 26px, 558px, 1035px);
-      @include bg_pos("../assets/img/prize_btn_text.png");
-    }
+		.prize_btn_text {
+			@include pos(98px, 26px, 558px, 1035px);
+			@include bg_pos("../assets/img/prize_btn_text.png");
+		}
 
-    .zhuanpan {
-      @include pos(750px, 465px, 0px, 657px);
-      @include bg_pos("../assets/img/zhuanpan.png");
-      pointer-events: none;
-      overflow: hidden;
+		.zhuanpan {
+			@include pos(750px, 465px, 0px, 657px);
+			@include bg_pos("../assets/img/zhuanpan.png");
+			pointer-events: none;
+			overflow: hidden;
 
-      .liwu {
-        @include pos(750px, 465px, 0px, 40px);
-        display: flex;
-        border-radius: 50%;
-        // background-color: rgb(255, 0, 0);
-        // width: 1146px;
-        // height: 812px;
+			.liwu {
+				@include pos(750px, 465px, 0px, 40px);
+				display: flex;
+				border-radius: 50%;
+				// background-color: rgb(255, 0, 0);
+				// width: 1146px;
+				// height: 812px;
 
-        div {
-          border: 2px solid #000;
-          width: 20%;
-          height: 110px;
-          font-size: 36px;
-          font-weight: 700;
-          color: #fc4638;
-          text-align: center;
-          line-height: 110px;
-          border-radius: 50%;
-          transform: rotate(30deg);
-        }
-      }
-    }
-  }
+				div {
+					border: 2px solid #000;
+					width: 20%;
+					height: 110px;
+					font-size: 36px;
+					font-weight: 700;
+					color: #fc4638;
+					text-align: center;
+					line-height: 110px;
+					border-radius: 50%;
+					transform: rotate(30deg);
+				}
+			}
+		}
+	}
 
-  .activityCon {
-    width: 750px;
-    @include bg_pos("../assets/img/activity_bg.jpg");
+	.activityCon {
+		width: 750px;
+		@include bg_pos("../assets/img/activity_bg.jpg");
 
-    .activity_box {
-      width: 700px;
-      // height: 100%;
-      margin: 0 auto;
-      margin-top: 30px;
-      @include bg_pos("../assets/img/activity_box.png");
-      box-sizing: border-box;
+		.activity_box {
+			width: 700px;
+			// height: 100%;
+			margin: 0 auto;
+			margin-top: 30px;
+			@include bg_pos("../assets/img/activity_box.png");
+			box-sizing: border-box;
 
-      .activity_title {
-        width: 633px;
-        height: 120px;
-        margin: 0 auto;
-        // margin-top: 55px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
+			.activity_title {
+				width: 633px;
+				height: 120px;
+				margin: 0 auto;
+				// margin-top: 55px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
 
-        img {
-          width: 633px;
-          height: 29px;
-        }
+				img {
+					width: 633px;
+					height: 29px;
+				}
 
-        // @include bg_pos('../assets/img/activity_title.png');
-      }
+				// @include bg_pos('../assets/img/activity_title.png');
+			}
 
-      .activity_list {
-        width: 633px;
-        margin: 0 auto;
-        display: flex;
-        flex-direction: column;
-        margin-top: 20px;
+			.activity_list {
+				width: 633px;
+				margin: 0 auto;
+				display: flex;
+				flex-direction: column;
+				margin-top: 20px;
 
-        .activity_li {
-          width: 633px;
-          height: 166px;
-          margin-bottom: 30px;
-          background-size: 100%;
-          position: relative;
+				.activity_li {
+					width: 633px;
+					height: 166px;
+					margin-bottom: 30px;
+					background-size: 100%;
+					position: relative;
 
-          .btn {
-            width: 121px;
-            height: 121px;
-            position: absolute;
-            top: 16px;
-            left: 479px;
-            background-size: 100%;
-          }
-        }
-      }
-    }
+					.btn {
+						width: 121px;
+						height: 121px;
+						position: absolute;
+						top: 16px;
+						left: 479px;
+						background-size: 100%;
+					}
+				}
+			}
+		}
 
-    .cloud_bottom {
-      width: 750px;
-      height: 255px;
-      margin-top: -160px;
-      @include bg_pos("../assets/img/cloud_bottom.png");
-    }
-  }
+		.cloud_bottom {
+			width: 750px;
+			height: 255px;
+			margin-top: -160px;
+			@include bg_pos("../assets/img/cloud_bottom.png");
+		}
+	}
 }
 </style>
\ No newline at end of file
diff --git a/src/components/LuckyWheel.vue b/src/components/LuckyWheel.vue
index f598180..f9399cf 100644
--- a/src/components/LuckyWheel.vue
+++ b/src/components/LuckyWheel.vue
@@ -1,128 +1,247 @@
 <template>
-    <div class="LuckyWheelCon" @touchmove.prevent>
-        <div class="LuckyWheel_container">
-            <div class="LuckyWheel_box">
-                <svg width="100%" height="100%" viewBox="-20 0 557 190" id="svg">
-                    <circle cx="100" cy="100" r="3" />
-                    <circle cx="300" cy="20" r="3" />
-                    <path id="path"
-                        d="M9,100c0,0,18.53-41.58,49.91-65.11c30-22.5,65.81-24.88,77.39-24.88c33.87,0,57.55,11.71,77.05,28.47c23.09,19.85,40.33,46.79,61.71,69.77c24.09,25.89,53.44,46.75,102.37,46.75c22.23,0,40.62-2.83,55.84-7.43c27.97-8.45,44.21-22.88,54.78-36.7c14.35-18.75,16.43-36.37,16.43-36.37" />
-                    <g id="rect">
-                        <rect width="85" height="30" fill="dodgerblue" />
-                        <text x="10" y="19" font-size="14">SVG &lt;rect&gt;</text>
-                    </g>
-                </svg>
-                <div id="div">#div</div>
-            </div>
-            <div class="btn" @click="btn">开始抽奖</div>
-        </div>
-    </div>
+	<div class="LuckyWheelCon" @touchmove.prevent>
+		<div class="LuckyWheel_container">
+			<div class="LuckyWheel_box">
+				<div class="prize p-1" ref="p1"></div>
+				<div class="prize p-2" ref="p2"></div>
+				<div class="prize p-3" ref="p3"></div>
+				<div class="prize p-4" ref="p4"></div>
+				<div class="prize p-5" ref="p5"></div>
+				<div class="prize p-1" ref="p6"></div>
+				<div class="prize p-2" ref="p7"></div>
+				<div class="prize p-3" ref="p8"></div>
+				<div class="prize p-4" ref="p9"></div>
+				<div class="prize p-5" ref="p10"></div>
+				<div class="prize p-1" ref="p11"></div>
+				<div class="prize p-2" ref="p12"></div>
+				<div class="prize p-3" ref="p13"></div>
+				<div class="prize p-4" ref="p14"></div>
+				<div class="prize p-5" ref="p15"></div>
+				<div class="prize p-5" ref="p16"></div>
+				<div class="prize p-5" ref="p17"></div>
+				<div class="prize p-5" ref="p18"></div>
+				<div class="prize p-5" ref="p19"></div>
+				<!-- <div class="prize p-3" ref="p20"></div> -->
+			</div>
+			<div class="btn" @click="btn">开始抽奖</div>
+		</div>
+	</div>
 </template>
 
 <script setup>
-import { onBeforeMount, onMounted, defineEmits, defineProps, reactive, ref, toRefs } from 'vue'
+import {
+	onBeforeMount,
+	onMounted,
+	defineEmits,
+	defineProps,
+	reactive,
+	ref,
+	toRefs,
+} from "vue";
 import gsap from "gsap";
-import axios from 'axios'
-import { Toast } from 'vant';
+import axios from "axios";
+import { Toast } from "vant";
 import { useStore } from "vuex";
 
-import { PixiPlugin } from "gsap/PixiPlugin.js";
+// import { PixiPlugin } from "gsap/PixiPlugin.js";
 import { MotionPathPlugin } from "gsap/MotionPathPlugin.js";
 // import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";
 
-gsap.registerPlugin(PixiPlugin, MotionPathPlugin)
-
+gsap.registerPlugin(MotionPathPlugin);
 
 // 初始化
 const emit = defineEmits(["ServicePop"]); // 声明触发事件，对应父组件上面的方法
 const props = defineProps({ sendMessage: Object }); // 获取props
-const store = useStore()
-
-
-const eqcode = ref(require('../assets/img/pop/eqcode.png'))
+const store = useStore();
+const p1 = ref(null);
+const p2 = ref(null);
+const p3 = ref(null);
+const p4 = ref(null);
+const p5 = ref(null);
+const p6 = ref(null);
+const p7 = ref(null);
+const p8 = ref(null);
+const p9 = ref(null);
+const p10 = ref(null);
+const p11 = ref(null);
+const p12 = ref(null);
+const p13 = ref(null);
+const p14 = ref(null);
+const p15 = ref(null);
+const p16 = ref(null);
+const p17 = ref(null);
+const p18 = ref(null);
+const p19 = ref(null);
+const aniGroup = ref([]);
 
+const eqcode = ref(require("../assets/img/pop/eqcode.png"));
 
 // 页面挂载前
-onBeforeMount(() => { })
-
+onBeforeMount(() => {});
 
+onMounted(() => {
+	showDrawAni();
+});
 
+// bingo 为中奖index  对应 pArr的index
+const showDrawAni = (bingo, repeat) => {
+	const pArr = [
+		p1, // 1.08
+		p2, // 2.68
+		p3, // 6.66
+		p4, // 8.88
+		p5, // 谢谢  默认选中值
+		p6, //以下皆为填充奖品 可随便填充
+		p7,
+		p8,
+		p9,
+		p10,
+		p11,
+		p12,
+		p13,
+		p14,
+		p15,
+		p16,
+		p17,
+		p18,
+		p19,
+	];
+	const singleRate = 1 / pArr.length; // 路径平均分 单个元素在路径上的位置
+	const delta = singleRate + 0.068; // 修正偏移量
+	let rotateDelta = 0; //转到哪一个停止 | 默认为第五个奖品 谢谢参与
+	if (bingo) {
+		rotateDelta = (5 - bingo) * singleRate;
+	}
+	for (let i = 1; i < pArr.length + 1; i++) {
+		let ani = gsap.to(
+			[pArr[i - 1].value],
+			{
+				duration: 10,
+				paused: bingo ? false : true, //没有中奖结果则为初始化
+				// repeat: -1,
+				// delay: i * 0.5 - 1,
+				// stagger: 0.5,
+				// repeatDelay: 3,
+				// yoyo: true,
+				ease: "back.out(1.4)",
+				motionPath: {
+					path: "M115.37,73.45C177.05-25.14,462-22.69,535,70,686.45,248.93,797.17,321.7,324.48,321.7-121,321.7-20.39,248.93,115.37,73.45Z",
+					// align: [1, 1],
+					autoRotate: true,
+					start: i * singleRate + rotateDelta - delta, // 动画开始于路径的位置 0-1
+					end: i * singleRate + 1 + rotateDelta - delta, // 动画结束于路径的位置 0-无穷
+					offsetX: -177,
+					offsetY: -43,
+					alignOrigin: [0.5, 0],
+				},
+				onUpdate: () => {
+					// if (i === 1) console.log(ani.progress());
+				},
+			},
+			"same"
+		);
+		// 更新视图
+		ani.seek(0);
+		if (bingo && repeat) {
+			setTimeout(() => {
+				showDrawAni(bingo, false);
+			}, 800);
+		}
+	}
+};
 
 const btn = () => {
-    console.log('抽奖');
-    // gsap.to('.LuckyWheel_box', { duration: 10, repeat: -1, "rotation": '+=360' })
-    gsap.to("#rect", {
-        duration: 5,
-        repeat: 12,
-        repeatDelay: 3,
-        yoyo: true,
-        ease: "power1.inOut",
-        motionPath: {
-            path: "#path",
-            align: "#path",
-            autoRotate: true,
-            alignOrigin: [0.5, 0.5]
-        }
-    });
-
-}
-
-
+	console.log("抽奖");
+	// 中奖奖品ID
+	// 奖品 1 - 1.08
+	// 奖品 2 - 2.68
+	// 奖品 3 - 6.66
+	// 奖品 4 - 8.88
+	// 奖品 5 - 谢谢参与
+	// 第一个参数 对应奖品对应id, 第二个参数是是否多旋转一会儿 fasle旋转一圈就停止
+	showDrawAni(1, true);
+};
 </script>
 
 <style lang="scss" scoped>
 .LuckyWheelCon {
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: rgba(0, 0, 0, 0.7);
+	width: 100%;
+	height: 100%;
+	position: fixed;
+	z-index: 10;
+	top: 0;
+	left: 0;
+	// right: 0;
+	// bottom: 0;
+	// display: flex;
+	// justify-content: center;
+	// align-items: center;
+	background-color: rgba(0, 0, 0, 0.3);
 
+	.LuckyWheel_container {
+		position: absolute;
+		top: 770px;
+		left: 0;
+		width: 760px;
+		height: 500px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
 
-    .LuckyWheel_container {
-        width: 750px;
-        height: 1180px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
+		.LuckyWheel_box {
+			// // border-width: 123px;
+			// border-style: solid;
+			// border-radius: 50%;
+			// // box-shadow: -1.569px -17.932px 16px 0px rgba(234, 6, 16, 0.16);
+			// width: 831px;
+			// height: 305px;
 
-        .LuckyWheel_box {
-
-            border-width: 123px;
-            border-style: solid;
-            border-radius: 50%;
-            box-shadow: -1.569px -17.932px 16px 0px rgba(234, 6, 16, 0.16);
-            width: 831px;
-            height: 305px;
-
-            .li {
-                width: 100px;
-                height: 100px;
-                background-color: #ff6000;
-
-            }
-
-
-        }
-
-        .btn {
-            width: 200px;
-            height: 100px;
-            text-align: center;
-            line-height: 100px;
-            font-size: 30px;
-            color: #fff;
-            background: #ff6000;
-        }
-
-    }
+			.li {
+				width: 100px;
+				height: 100px;
+				background-color: #ff6000;
+			}
+		}
 
+		.btn {
+			width: 200px;
+			height: 100px;
+			text-align: center;
+			line-height: 100px;
+			font-size: 30px;
+			color: #fff;
+			background: #ff6000;
+		}
+	}
+	.prize {
+		position: absolute;
+		width: 160px;
+		height: 96px;
+		left: 0;
+		top: 10px;
+		// 奖品图
+		&.p-1 {
+			background-image: url("~@/assets/img/p_1.png");
+			background-size: 160px 96px;
+		}
+		&.p-2 {
+			background-image: url("~@/assets/img/p_2.png");
+			background-size: 160px 96px;
+		}
+		&.p-3 {
+			background-image: url("~@/assets/img/p_3.png");
+			background-size: 160px 96px;
+		}
+		&.p-4 {
+			background-image: url("~@/assets/img/p_4.png");
+			background-size: 160px 96px;
+		}
+		&.p-5 {
+			background-image: url("~@/assets/img/p_5.png");
+			background-size: 160px 96px;
+		}
+		// background-color: #f00;
+	}
 }
 </style>
\ No newline at end of file