稍微做了个没办法的适配

融合你的代码提交
# Conflicts:
#	src/components/Index.vue

src/components/Index.vue

@@ -16,14 +16,17 @@
 				<span class="icon"
 					><img src="../assets/img/laba.png" alt="" srcset=""
 				/></span>
-        <span class="num">活动已有{{ store.state.userAccount.participantNum }}人参与</span>
+				<span class="num"
+					>活动已有{{
+						store.state.userAccount.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="zhuanpan"></div>
-      </div>
 			<div class="icon_right_2"></div>
 			<div class="icon_right_3"></div>
 			<div class="cloud_left_3"></div>
@@ -48,12 +51,16 @@
 						class="activity_li"
 						v-for="(item, index) in activityList"
 						:key="index"
-            :style="{ 'background-image': 'url(' + item.banner + ')' }"
+						:style="{
+							'background-image': 'url(' + item.banner + ')',
+						}"
 						v-show="item.show"
 					>
 						<div
 							class="btn"
-              :style="{ 'background-image': 'url(' + item.btnImg + ')' }"
+							:style="{
+								'background-image': 'url(' + item.btnImg + ')',
+							}"
 							@click="activityBtn(item)"
 						></div>
 					</div>
@@ -69,7 +76,7 @@
 		<!-- 添加专属服务人员企微弹窗 -->
 		<ServiceList v-if="showServicePop" @ServicePop="hideServicePop" />
 
-    <LuckyWheel v-if="false" />
+		<LuckyWheel v-if="true" />
 	</div>
 </template>
 
@@ -150,11 +157,11 @@ const activityList = reactive([
 // 页面挂载前
 onBeforeMount(() => {
 	// 获取企微二维码
-  gerCardId(94207)
+	gerCardId(94207);
-  getInfo()
+	getInfo();
-  getMyPrizeRecored()
+	getMyPrizeRecored();
-  getBrithday()
+	getBrithday();
-  getActivityNum()
+	getActivityNum();
 });
 
 // 页面挂载后
@@ -184,10 +191,7 @@ const btn = () => {
 // 抽奖按钮
 const drawBtn = () => {
 	console.log("抽奖：");
-  getluckyBag(1)
+	getluckyBag(1);
-  
-  
-
 };
 
 // 活动点击
@@ -229,79 +233,93 @@ const getAuthorize = (scopeState) => {
 	window.location.href = `${process.env.VUE_APP_ZS_DOMAIN}/wxauth/official/account/authorize?redirectUrl=${out_href}&scope=${scopeState}`;
 };
 
-
 // 查询员工企业微信二维码
-const gerCardId = (carid)=>{
+const gerCardId = (carid) => {
 	service
-    .get(process.env.VUE_APP_API + "/cms-activity/cms88/card/qrcode/"+ carid)
+		.get(
+			process.env.VUE_APP_API + "/cms-activity/cms88/card/qrcode/" + carid
+		)
 		.then((res) => {
-      console.log("企微二维码：",res.data.data);
+			console.log("企微二维码：", res.data.data);
-      store.commit({ type: "updateeEqcodeImg", eqcodeImg: res.data.data });
+			store.commit({
+				type: "updateeEqcodeImg",
+				eqcodeImg: res.data.data,
 			});
-}
+		});
+};
 
 // 获取绑定的资金账号
-const getInfo = ()=>{
+const getInfo = () => {
 	service
-    .post(process.env.VUE_APP_API + "/cms-activity/cms88/nkh/info",{})
+		.post(process.env.VUE_APP_API + "/cms-activity/cms88/nkh/info", {})
 		.then((res) => {
-      console.log("资金账号：",res);
+			console.log("资金账号：", res);
 		});
-}
+};
 
 // 我的红包记录
-const getMyPrizeRecored = ()=>{
+const getMyPrizeRecored = () => {
 	service
-    .post(process.env.VUE_APP_API + "/cms-activity/cms88/prize/list",{})
+		.post(process.env.VUE_APP_API + "/cms-activity/cms88/prize/list", {})
 		.then((res) => {
 			console.log(res);
 		});
-}
+};
 
 // 查询是否添加了企微： isInActivityDate 0否 1是
-const getIsAddService = ()=>{
+const getIsAddService = () => {
-  let isInActivityDate = 0
+	let isInActivityDate = 0;
 	service
-    .post(process.env.VUE_APP_API + "/cms-activity/cms88/qywx/isadded/"+ isInActivityDate)
+		.post(
+			process.env.VUE_APP_API +
+				"/cms-activity/cms88/qywx/isadded/" +
+				isInActivityDate
+		)
 		.then((res) => {
 			console.log(res);
 		});
-}
+};
 
 // 抽取红包 type为红包类型 1为参与红包 2为加企微
-const getluckyBag = (id)=>{
+const getluckyBag = (id) => {
-
+	let type = id;
-  let type = id
 	service
-    .post(process.env.VUE_APP_API + "/cms-activity/cms88/redpacket/draw/"+ type,{})
+		.post(
+			process.env.VUE_APP_API +
+				"/cms-activity/cms88/redpacket/draw/" +
+				type,
+			{}
+		)
 		.then((res) => {
 			console.log(res);
 		});
-}
+};
 
 // 活动参与人数
-const getActivityNum = ()=>{
+const getActivityNum = () => {
 	service
 		.post(process.env.VUE_APP_API + "/cms-activity/cms88/user/count/")
 		.then((res) => {
 			console.log(res.data.data);
 
-      store.commit({ type: "updateParticipantNum", participantNum: res.data.data });
+			store.commit({
-
+				type: "updateParticipantNum",
+				participantNum: res.data.data,
 			});
-}
+		});
-
+};
 
 // 是否在活动期间生日
-const getBrithday = ()=>{
+const getBrithday = () => {
 	service
-    .post(process.env.VUE_APP_API + "/cms-activity/cms88/user/isin/birthday",{})
+		.post(
+			process.env.VUE_APP_API + "/cms-activity/cms88/user/isin/birthday",
+			{}
+		)
 		.then((res) => {
 			console.log(res);
 		});
-}
+};
-
-
 </script>
 
 <style lang="scss" scoped>

src/components/LuckyWheel.vue

@@ -1,73 +1,201 @@
 <template>
 	<div class="LuckyWheelCon" @touchmove.prevent>
 		<div class="LuckyWheel_container">
-            <div class="LuckyWheel_box">
+			<!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 665.32 321.7">
-                <svg width="100%" height="100%" viewBox="-20 0 557 190" id="svg">
+				<g id="图层_2" data-name="图层 2">
-                    <circle cx="100" cy="100" r="3" />
+					<path
-                    <circle cx="300" cy="20" r="3" />
+						id="path"
-                    <path id="path"
+						ref="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" />
+						class="cls-1"
-                    <g id="rect">
+						d="M129.65,82.55c69.31-110.8,389.54-108,471.58-3.88,170.2,201.08,294.62,282.86-236.59,282.86C-136,361.53-22.92,279.75,129.65,82.55Z"
-                        <rect width="85" height="30" fill="dodgerblue" />
+					/>
-                        <text x="10" y="19" font-size="14">SVG &lt;rect&gt;</text>
 				</g>
-                </svg>
+			</svg> -->
-                <div id="div">#div</div>
+			<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 重点 -->
+			<div class="relative-box" ref="container"></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 axios from "axios";
-import { Toast } from 'vant';
+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 store = useStore();
-
+const p1 = ref(null);
-
+const p2 = ref(null);
-const eqcode = ref(require('../assets/img/pop/eqcode.png'))
+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 container = ref();
 
+const eqcode = ref(require("../assets/img/pop/eqcode.png"));
 
 // 页面挂载前
-onBeforeMount(() => { })
+onBeforeMount(() => {});
 
-
+onMounted(() => {
-
+	// 根据适配后的大小去修改对应div便宜
-
+	const fontSize = getComputedStyle(window.document.documentElement)[
-const btn = () => {
+		"font-size"
-    console.log('抽奖');
+	].replace("px", "");
-    // gsap.to('.LuckyWheel_box', { duration: 10, repeat: -1, "rotation": '+=360' })
+	const ratio = fontSize / 37.5;
-    gsap.to("#rect", {
+	// alert(fontSize);
-        duration: 5,
+	console.log(ratio);
-        repeat: 12,
+	gsap.set(container.value, {
-        repeatDelay: 3,
+		scale: ratio,
-        yoyo: true,
+		x:
-        ease: "power1.inOut",
+			200 * (ratio - 1) +
-        motionPath: {
+			(ratio < 0.9 ? 10 * ratio : ratio > 1.2 ? 65 * ratio : 0),
-            path: "#path",
+		y:
-            align: "#path",
+			230 * (ratio - 1) +
-            autoRotate: true,
+			(ratio < 0.9 ? 10 * ratio : ratio > 1.2 ? 35 * ratio : 0),
-            alignOrigin: [0.5, 0.5]
-        }
 	});
 
-}
+	showDrawAni();
+	// let a = path.value.getBBox();
+	// console.log(a);
+	// console.log(window.innerWidth / 375);
+});
 
+// 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: ".relative-box", //让内容根据对照div调整
+					autoRotate: true,
+					start: i * singleRate + rotateDelta - delta, // 动画开始于路径的位置 0-1
+					end: i * singleRate + 1 + rotateDelta - delta, // 动画结束于路径的位置 0-无穷
+					offsetX: -22, //-177,
+					offsetY: 70,
+					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("抽奖");
+	// 中奖奖品ID
+	// 奖品 1 - 1.08
+	// 奖品 2 - 2.68
+	// 奖品 3 - 6.66
+	// 奖品 4 - 8.88
+	// 奖品 5 - 谢谢参与
+	// 第一个参数 对应奖品对应id, 第二个参数是是否多旋转一会儿 fasle旋转一圈就停止
+	showDrawAni(1, true);
+};
 </script>
 
 <style lang="scss" scoped>
@@ -75,44 +203,58 @@ const btn = () => {
 	width: 100%;
 	height: 100%;
 	position: fixed;
+	z-index: 10;
 	top: 0;
 	left: 0;
-    right: 0;
+	// right: 0;
-    bottom: 0;
+	// bottom: 0;
-    display: flex;
+	// display: flex;
-    justify-content: center;
+	// justify-content: center;
-    align-items: center;
+	// align-items: center;
-    background-color: rgba(0, 0, 0, 0.7);
+	background-color: rgba(0, 0, 0, 0.3);
-
 
 	.LuckyWheel_container {
+		position: absolute;
+		top: 700px;
+		left: 0;
 		width: 750px;
-        height: 1180px;
+		height: 500px;
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		flex-direction: column;
 
 		.LuckyWheel_box {
-
+			// // border-width: 123px;
-            border-width: 123px;
+			// border-style: solid;
-            border-style: solid;
+			// border-radius: 50%;
-            border-radius: 50%;
+			// // box-sh
-            box-shadow: -1.569px -17.932px 16px 0px rgba(234, 6, 16, 0.16);
+			position: absolute;
-            width: 831px;
+			left: 0;
-            height: 305px;
+			top: 0;
+			width: 750px;
+			height: 500px;
 
 			.li {
 				width: 100px;
 				height: 100px;
 				background-color: #ff6000;
-
+			}
 		}
 
-
+		.relative-box {
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 750px;
+			height: 500px;
+		}
+		.cls-1 {
+			fill: none;
 		}
-
 		.btn {
+			position: relative;
+			z-index: 111;
 			width: 200px;
 			height: 100px;
 			text-align: center;
@@ -121,8 +263,35 @@ const btn = () => {
 			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>