128 lines
3.3 KiB
Vue
128 lines
3.3 KiB
Vue
<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 <rect></text>
|
|
</g>
|
|
</svg>
|
|
<div id="div">#div</div>
|
|
</div>
|
|
<div class="btn" @click="btn">开始抽奖</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onBeforeMount, onMounted, defineEmits, defineProps, reactive, ref, toRefs } 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(PixiPlugin, MotionPathPlugin)
|
|
|
|
|
|
// 初始化
|
|
const emit = defineEmits(["ServicePop"]); // 声明触发事件，对应父组件上面的方法
|
|
const props = defineProps({ sendMessage: Object }); // 获取props
|
|
const store = useStore()
|
|
|
|
|
|
const eqcode = ref(require('../assets/img/pop/eqcode.png'))
|
|
|
|
|
|
// 页面挂载前
|
|
onBeforeMount(() => { })
|
|
|
|
|
|
|
|
|
|
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]
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
|
|
</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);
|
|
|
|
|
|
.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;
|
|
|
|
.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;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
</style> |