From 4b9f4586c839f30393eb36c0b175e691b428bdbd Mon Sep 17 00:00:00 2001
From: tcubic <123456>
Date: Fri, 5 Aug 2022 17:45:13 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E8=BD=AC=E7=9B=98=E8=B0=83=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/LuckyWheel copy.vue | 280 ++++++++++++++++++
 src/components/LuckyWheel.vue      | 448 +++++++++++++++--------------
 2 files changed, 512 insertions(+), 216 deletions(-)
 create mode 100644 src/components/LuckyWheel copy.vue

diff --git a/src/components/LuckyWheel copy.vue b/src/components/LuckyWheel copy.vue
new file mode 100644
index 0000000..baf708b
--- /dev/null
+++ b/src/components/LuckyWheel copy.vue	
@@ -0,0 +1,280 @@
+<template>
+  <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,
+  defineExpose,
+} from "vue";
+import gsap from "gsap";
+import axios from "axios";
+import { Toast } from "vant";
+import { useStore } from "vuex";
+
+// import { PixiPlugin } from "gsap/PixiPlugin.js";
+import { MotionPathPlugin } from "gsap/MotionPathPlugin.js";
+// import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";
+
+gsap.registerPlugin(MotionPathPlugin);
+
+// 初始化
+const emit = defineEmits(["luckyWheel"]); // 声明触发事件，对应父组件上面的方法
+const props = defineProps({ sendMessage: Object }); // 获取props
+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"));
+const luckyWheelStatus = ref(false);
+
+// 大转盘结束回调
+const isStop = () => {
+  if (!luckyWheelStatus.value) {
+    luckyWheelStatus.value = true;
+    console.log("大转盘结束");
+	emit('luckyWheel')  //告诉主页弹出相应结果弹窗
+  }
+};
+
+// 页面挂载前
+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());
+        },
+        onStart: () => {
+          if (i == pArr.length - 1) {
+            setTimeout(() => {
+            //   console.log("停止2");
+			  isStop()
+            }, 5000);
+          }
+        },
+
+        onComplete: () => {},
+      },
+      "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(2, true);
+};
+
+// 暴露出方法给父组件调用
+defineExpose({
+  showDrawAni,
+});
+</script>
+
+<style lang="scss" scoped>
+.LuckyWheelCon {
+  width: 100%;
+  height: 800px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+
+
+  .LuckyWheel_container {
+    position: absolute;
+    top: 770px;
+    left: 0px;
+    width: 760px;
+    height: 500px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+
+    .LuckyWheel_box {
+
+    width: 760px;
+    height: 500px;
+
+      // // 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;
+
+      // width: 100%;
+      // height: 100%;
+      // position: absolute;
+      // top: 0;
+      // left: 20px;
+
+      .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: 0px;
+    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
diff --git a/src/components/LuckyWheel.vue b/src/components/LuckyWheel.vue
index baf708b..1afff31 100644
--- a/src/components/LuckyWheel.vue
+++ b/src/components/LuckyWheel.vue
@@ -1,44 +1,56 @@
 <template>
-  <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>
+	<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>
+				<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,
-  defineExpose,
+	onBeforeMount,
+	onMounted,
+	defineEmits,
+	defineProps,
+	reactive,
+	ref,
+	toRefs,
 } from "vue";
 import gsap from "gsap";
 import axios from "axios";
@@ -48,11 +60,10 @@ import { useStore } from "vuex";
 // import { PixiPlugin } from "gsap/PixiPlugin.js";
 import { MotionPathPlugin } from "gsap/MotionPathPlugin.js";
 // import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";
-
 gsap.registerPlugin(MotionPathPlugin);
 
 // 初始化
-const emit = defineEmits(["luckyWheel"]); // 声明触发事件，对应父组件上面的方法
+const emit = defineEmits(["ServicePop"]); // 声明触发事件，对应父组件上面的方法
 const props = defineProps({ sendMessage: Object }); // 获取props
 const store = useStore();
 const p1 = ref(null);
@@ -75,206 +86,211 @@ 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"));
-const luckyWheelStatus = ref(false);
-
-// 大转盘结束回调
-const isStop = () => {
-  if (!luckyWheelStatus.value) {
-    luckyWheelStatus.value = true;
-    console.log("大转盘结束");
-	emit('luckyWheel')  //告诉主页弹出相应结果弹窗
-  }
-};
 
 // 页面挂载前
 onBeforeMount(() => {});
 
 onMounted(() => {
-  showDrawAni();
+	// 根据适配后的大小去修改对应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
 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());
-        },
-        onStart: () => {
-          if (i == pArr.length - 1) {
-            setTimeout(() => {
-            //   console.log("停止2");
-			  isStop()
-            }, 5000);
-          }
-        },
-
-        onComplete: () => {},
-      },
-      "same"
-    );
-    // 更新视图
-    ani.seek(0);
-    if (bingo && repeat) {
-      setTimeout(() => {
-        showDrawAni(bingo, false);
-      }, 800);
-    }
-  }
+	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(2, true);
+	console.log("抽奖");
+	// 中奖奖品ID
+	// 奖品 1 - 1.08
+	// 奖品 2 - 2.68
+	// 奖品 3 - 6.66
+	// 奖品 4 - 8.88
+	// 奖品 5 - 谢谢参与
+	// 第一个参数 对应奖品对应id, 第二个参数是是否多旋转一会儿 fasle旋转一圈就停止
+	showDrawAni(1, true);
 };
-
-// 暴露出方法给父组件调用
-defineExpose({
-  showDrawAni,
-});
 </script>
 
 <style lang="scss" scoped>
 .LuckyWheelCon {
-  width: 100%;
-  height: 800px;
-  position: absolute;
-  top: 0;
-  left: 0;
-  pointer-events: none;
+	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: 700px;
+		left: 0;
+		width: 750px;
+		height: 500px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
 
-  .LuckyWheel_container {
-    position: absolute;
-    top: 770px;
-    left: 0px;
-    width: 760px;
-    height: 500px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
+		.LuckyWheel_box {
+			// // border-width: 123px;
+			// border-style: solid;
+			// border-radius: 50%;
+			// // box-sh
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 750px;
+			height: 500px;
 
-    .LuckyWheel_box {
+			.li {
+				width: 100px;
+				height: 100px;
+				background-color: #ff6000;
+			}
+		}
 
-    width: 760px;
-    height: 500px;
-
-      // // 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;
-
-      // width: 100%;
-      // height: 100%;
-      // position: absolute;
-      // top: 0;
-      // left: 20px;
-
-      .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: 0px;
-    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;
-  }
+		.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;
+			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