|
|
@@ -6,18 +6,21 @@
|
|
|
<title>转盘抽奖</title>
|
|
|
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css"/>
|
|
|
<style>
|
|
|
- * { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
[v-cloak] {
|
|
|
display: none;
|
|
|
}
|
|
|
+ /* .app{
|
|
|
+ background: url('https://xiaoyou.dgtis.com/images/image/2023/08/16/obnd1td7k6c65ehxciz6.png') no-repeat center / 100% 100%;
|
|
|
+ } */
|
|
|
.container {
|
|
|
overflow: hidden;
|
|
|
- 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,
|
|
|
- green 45deg 110deg, blue 110deg 200deg, purple 200deg); */
|
|
|
+ width: 352px;
|
|
|
+ height: 352px;
|
|
|
margin: 0 auto;
|
|
|
position: relative;
|
|
|
}
|
|
|
@@ -49,8 +52,8 @@
|
|
|
line-height: 20px;
|
|
|
}
|
|
|
.btn {
|
|
|
- width: 100px;
|
|
|
- height: 100px;
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
background: url('https://xiaoyou.dgtis.com/images/image/2023/08/15/wwn4p7lua9t5h0rx8tlz.png') no-repeat center / 100% 100%;
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
@@ -68,13 +71,13 @@
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
- top: -33px;
|
|
|
+ top: -30px;
|
|
|
margin: auto;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
- <div id="app" v-cloak>
|
|
|
+ <div id="app" v-cloak class="app">
|
|
|
<div class="container">
|
|
|
<div class="prize-list" ref="prizeWrap" :style="bgColor">
|
|
|
<div class="prize-item" v-for="(item, index) in prizeList" :style="prizeStyle(index)">
|
|
|
@@ -138,8 +141,8 @@
|
|
|
const _degree = rotateAngle.value
|
|
|
return (i) => {
|
|
|
return `
|
|
|
- width: ${2 * 220 * Math.sin(_degree / 2 * Math.PI / 180)}px;
|
|
|
- height: 220px;
|
|
|
+ width: ${2 * 176 * Math.sin(_degree / 2 * Math.PI / 180)}px;
|
|
|
+ height: 176px;
|
|
|
transform: rotate(${_degree * i + _degree / 2}deg);
|
|
|
transform-origin: 50% 100%;
|
|
|
`
|
|
|
@@ -162,10 +165,10 @@
|
|
|
|
|
|
const start = () => {
|
|
|
ElementPlus.ElMessage({
|
|
|
- message: '已无抽奖次数！',
|
|
|
- type: 'warning',
|
|
|
- })
|
|
|
- return
|
|
|
+ message: '已无抽奖次数！',
|
|
|
+ type: 'warning',
|
|
|
+ })
|
|
|
+ return
|
|
|
if (!state.isRunning) {
|
|
|
state.isRunning = true
|
|
|
console.log('开始抽奖，后台请求中奖奖品')
|
