|
|
@@ -11,8 +11,8 @@
|
|
|
}
|
|
|
.container {
|
|
|
overflow: hidden;
|
|
|
- width: 540px;
|
|
|
- height: 540px;
|
|
|
+ width: 440px;
|
|
|
+ height: 440px;
|
|
|
/* background: #98d3fc url('https://www.jq22.com/demo/vue-luck-draw-pdmm202010260015/img/bg.a4b976d5.png') no-repeat center / 100% 100%;
|
|
|
background: conic-gradient(
|
|
|
red 6deg, orange 6deg 18deg, yellow 18deg 45deg,
|
|
|
@@ -48,8 +48,8 @@
|
|
|
line-height: 20px;
|
|
|
}
|
|
|
.btn {
|
|
|
- width: 160px;
|
|
|
- height: 160px;
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
background: url('https://xiaoyou.dgtis.com/images/image/2023/08/15/wwn4p7lua9t5h0rx8tlz.png') no-repeat center / 100% 100%;
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
@@ -100,7 +100,7 @@
|
|
|
{ name: '娃娃', pic: 'https://img2.baidu.com/it/u=4075390137,3967712457&fm=253&fmt=auto&app=138&f=PNG' },
|
|
|
{ name: '木马', pic: 'https://img1.baidu.com/it/u=2434318933,2727681086&fm=253&fmt=auto&app=120&f=JPEG' },
|
|
|
{ name: '德芙', pic: 'https://img0.baidu.com/it/u=1378564582,2397555841&fm=253&fmt=auto&app=120&f=JPEG' },
|
|
|
- { name: '玫瑰', pic: 'https://img1.baidu.com/it/u=1125656938,422247900&fm=253&fmt=auto&app=120&f=JPEG' }
|
|
|
+ { name: '玫瑰', pic: 'https://img1.baidu.com/it/u=1125656938,422247900&fm=253&fmt=auto&app=120&f=JPEG' },
|
|
|
], // 后台配置的奖品数据
|
|
|
isRunning: false, // 是否正在抽奖
|
|
|
baseRunAngle: 360 * 5, // 总共转动角度 至少5圈
|
|
|
@@ -137,8 +137,8 @@
|
|
|
const _degree = rotateAngle.value
|
|
|
return (i) => {
|
|
|
return `
|
|
|
- width: ${2 * 270 * Math.sin(_degree / 2 * Math.PI / 180)}px;
|
|
|
- height: 270px;
|
|
|
+ width: ${2 * 220 * Math.sin(_degree / 2 * Math.PI / 180)}px;
|
|
|
+ height: 220px;
|
|
|
transform: rotate(${_degree * i + _degree / 2}deg);
|
|
|
transform-origin: 50% 100%;
|
|
|
`
|
