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 @@
-
+
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 @@
@@ -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;