From 9424a5beae1e6f131c979263225083e1295f37da Mon Sep 17 00:00:00 2001
From: rucky <scl22@qq.com>
Date: Fri, 5 Aug 2022 17:42:07 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A8=8D=E5=BE=AE=E5=81=9A=E4=BA=86=E4=B8=AA?=
 =?UTF-8?q?=E6=B2=A1=E5=8A=9E=E6=B3=95=E7=9A=84=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Index.vue      |  2 +-
 src/components/LuckyWheel.vue | 66 ++++++++++++++++++++++++++++++-----
 2 files changed, 59 insertions(+), 9 deletions(-)

diff --git a/src/components/Index.vue b/src/components/Index.vue
index c817b8f..df5fea1 100644
--- a/src/components/Index.vue
+++ b/src/components/Index.vue
@@ -76,7 +76,7 @@
 		<!-- 添加专属服务人员企微弹窗 -->
 		<ServiceList v-if="showServicePop" @ServicePop="hideServicePop" />
 
-		<LuckyWheel v-if="false" />
+		<LuckyWheel v-if="true" />
 	</div>
 </template>
 
diff --git a/src/components/LuckyWheel.vue b/src/components/LuckyWheel.vue
index f9399cf..6a38f03 100644
--- a/src/components/LuckyWheel.vue
+++ b/src/components/LuckyWheel.vue
@@ -1,6 +1,16 @@
 <template>
 	<div class="LuckyWheelCon" @touchmove.prevent>
 		<div class="LuckyWheel_container">
+			<!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 665.32 321.7">
+				<g id="图层_2" data-name="图层 2">
+					<path
+						id="path"
+						ref="path"
+						class="cls-1"
+						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"
+					/>
+				</g>
+			</svg> -->
 			<div class="LuckyWheel_box">
 				<div class="prize p-1" ref="p1"></div>
 				<div class="prize p-2" ref="p2"></div>
@@ -23,6 +33,10 @@
 				<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>
@@ -73,6 +87,7 @@ 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"));
 
@@ -80,7 +95,27 @@ const eqcode = ref(require("../assets/img/pop/eqcode.png"));
 onBeforeMount(() => {});
 
 onMounted(() => {
+	// 根据适配后的大小去修改对应div便宜
+	const fontSize = getComputedStyle(window.document.documentElement)[
+		"font-size"
+	].replace("px", "");
+	const ratio = fontSize / 37.5;
+	// alert(fontSize);
+	console.log(ratio);
+	gsap.set(container.value, {
+		scale: ratio,
+		x:
+			200 * (ratio - 1) +
+			(ratio < 0.9 ? 10 * ratio : ratio > 1.2 ? 65 * ratio : 0),
+		y:
+			230 * (ratio - 1) +
+			(ratio < 0.9 ? 10 * ratio : ratio > 1.2 ? 35 * ratio : 0),
+	});
+
 	showDrawAni();
+	// let a = path.value.getBBox();
+	// console.log(a);
+	// console.log(window.innerWidth / 375);
 });
 
 // bingo 为中奖index  对应 pArr的index
@@ -126,12 +161,12 @@ const showDrawAni = (bingo, repeat) => {
 				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],
+					align: ".relative-box", //让内容根据对照div调整
 					autoRotate: true,
 					start: i * singleRate + rotateDelta - delta, // 动画开始于路径的位置 0-1
 					end: i * singleRate + 1 + rotateDelta - delta, // 动画结束于路径的位置 0-无穷
-					offsetX: -177,
-					offsetY: -43,
+					offsetX: -22, //-177,
+					offsetY: 70,
 					alignOrigin: [0.5, 0],
 				},
 				onUpdate: () => {
@@ -180,9 +215,9 @@ const btn = () => {
 
 	.LuckyWheel_container {
 		position: absolute;
-		top: 770px;
+		top: 700px;
 		left: 0;
-		width: 760px;
+		width: 750px;
 		height: 500px;
 		display: flex;
 		justify-content: center;
@@ -193,9 +228,12 @@ const btn = () => {
 			// // 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;
+			// // box-sh
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 750px;
+			height: 500px;
 
 			.li {
 				width: 100px;
@@ -204,7 +242,19 @@ const btn = () => {
 			}
 		}
 
+		.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;