You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
808 lines
19 KiB
808 lines
19 KiB
<template>
|
|
<div class="wheel-container">
|
|
<!-- 顶部区域 -->
|
|
<div class="top-section">
|
|
<div class="expire-time">财富金轮到期时间：{{ expireTime }}</div>
|
|
<div class="top-right">
|
|
<div class="icon-item">
|
|
<img :src="historyImg" class="history-icon" alt="历史记录">
|
|
<span class="icon-text">历史记录</span>
|
|
</div>
|
|
<div class="icon-item" @click="handleRuleClick">
|
|
<img :src="ruleImg" class="rule-icon" alt="活动规则">
|
|
<span class="icon-text">活动规则</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主标题图片 -->
|
|
<img :src="titleImg" class="title-img" alt="转动财富金轮 开启财富人生">
|
|
|
|
<!-- 转盘区域 -->
|
|
<div class="wheel-section">
|
|
<div class="wheel-wrapper">
|
|
<!-- 转盘图片尺寸：333x333 -->
|
|
<img
|
|
:src="wheelImg"
|
|
class="wheel-img"
|
|
:class="{ spinning: isSpinning }"
|
|
:style="{ transform: `rotate(${currentRotation}deg)` }"
|
|
alt="财富金轮"
|
|
ref="wheel"
|
|
>
|
|
<!-- 指针图片尺寸：137x137 -->
|
|
<img :src="pointerImg" class="pointer-img" alt="指针">
|
|
<!-- 指针盖图片尺寸：104x106 -->
|
|
<img :src="pointerCoverImg" class="pointer-cover-img" alt="指针盖">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 剩余次数 -->
|
|
<div class="remaining-section">
|
|
<img :src="remainingBgImg" class="remaining-bg" alt="今日剩余">
|
|
<span class="remaining-text">今日剩余：{{ remainingTimes }}次</span>
|
|
</div>
|
|
|
|
<!-- 转动按钮 -->
|
|
<button
|
|
class="spin-btn"
|
|
:disabled="isSpinning || showPrizeModal || showRuleModal || isFirstVisit || remainingTimes === 0"
|
|
@click="handleSpin"
|
|
>
|
|
<img
|
|
:src="(remainingTimes > 0 && !showPrizeModal && !showRuleModal && !isFirstVisit) ? spinBtnImg : disabledSpinBtnImg"
|
|
alt="转动金轮"
|
|
class="spin-btn-img"
|
|
>
|
|
</button>
|
|
|
|
<!-- 中奖弹窗 -->
|
|
<div class="prize-modal" v-if="showPrizeModal">
|
|
<div class="modal-overlay" @click="closeModal"></div>
|
|
<div class="modal-content">
|
|
<img :src="modalBgImg" class="modal-bg" alt="弹窗背景">
|
|
<!-- 右上角关闭按钮 -->
|
|
<button class="close-modal" @click="closeModal">
|
|
<img :src="closeBtnImg" alt="关闭弹窗">
|
|
</button>
|
|
<div class="prize-info">
|
|
<div class="prize-title">{{ prizeMessage }}</div>
|
|
<div class="prize-amount-wrapper">
|
|
<img :src="prizeAmountImg" class="prize-amount-bg" alt="奖品数量背景">
|
|
<div class="prize-amount">{{ prizeAmount }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 剩余次数为0时的提示弹窗 -->
|
|
<div class="no-times-modal" v-if="showNoTimesModal">
|
|
<div class="modal-overlay" @click="closeNoTimesModal"></div>
|
|
<div class="no-times-content">
|
|
<img :src="noTimesImg" class="no-times-bg" alt="今日次数已用完">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 活动规则弹窗 -->
|
|
<div class="rule-modal" v-if="showRuleModal">
|
|
<div class="modal-overlay" @click="closeRuleModal"></div>
|
|
<div class="rule-content">
|
|
<img :src="ruleBgImg" class="rule-bg" alt="活动规则背景">
|
|
<!-- 右上角关闭按钮 -->
|
|
<button class="close-rule-btn" @click="closeRuleModal">
|
|
<img :src="closeRuleBtnImg" alt="关闭活动规则">
|
|
</button>
|
|
<div class="rule-text">
|
|
<div class="rule-line">1.在财富金轮使用期限内，每天可以转动一次</div>
|
|
<div class="rule-line">2.通过财富金轮可以获得免费Tonken和背包礼物等</div>
|
|
<div class="rule-line">3.用户通过财富金轮获得的物品以最终展示结果为准</div>
|
|
<div class="rule-line">4.Homily Link平台拥有最终解释权</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 首次访问活动规则弹窗 -->
|
|
<div class="rule-modal" v-if="isFirstVisit">
|
|
<div class="modal-overlay" @click="closeFirstVisitModal"></div>
|
|
<div class="rule-content">
|
|
<img :src="ruleBgImg" class="rule-bg" alt="活动规则背景">
|
|
<!-- 右上角关闭按钮 -->
|
|
<button class="close-rule-btn" @click="closeFirstVisitModal">
|
|
<img :src="closeRuleBtnImg" alt="关闭活动规则">
|
|
</button>
|
|
<div class="rule-text">
|
|
<div class="rule-line">1.在财富金轮使用期限内，每天可以转动一次</div>
|
|
<div class="rule-line">2.通过财富金轮可以获得免费Tonken和背包礼物等</div>
|
|
<div class="rule-line">3.用户通过财富金轮获得的物品以最终展示结果为准</div>
|
|
<div class="rule-line">4.Homily Link平台拥有最终解释权</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { permissionApi, lotteryApi } from '@/api/goldenWheel'
|
|
export default {
|
|
name: 'FortuneWheel',
|
|
data() {
|
|
return {
|
|
// 图片资源
|
|
historyImg: 'https://d31zlh4on95l9h.cloudfront.net/images/aed693de6beb9faae015fd0628c4f052.png',
|
|
ruleImg: 'https://d31zlh4on95l9h.cloudfront.net/images/9a3f7680b29e31b60151cf562c0d43cb.png',
|
|
homeImg: 'https://d31zlh4on95l9h.cloudfront.net/images/453475456dad8e6832e9904c901c1274.png',
|
|
titleImg: 'https://d31zlh4on95l9h.cloudfront.net/images/a87d19806fed47b7fdf18d4b5dd70e65.png',
|
|
wheelImg: 'https://d31zlh4on95l9h.cloudfront.net/images/d925f375c9ef15a751500ae130d91fe5.png',
|
|
pointerImg: 'https://d31zlh4on95l9h.cloudfront.net/images/9c09631c202b78cc06b8935c17431dac.png',
|
|
pointerCoverImg: 'https://d31zlh4on95l9h.cloudfront.net/images/536c171c263990b12f1cc0a6e511b5e7.png',
|
|
remainingBgImg: 'https://d31zlh4on95l9h.cloudfront.net/images/a43f0c383d55fc56b34768f039a401a8.png',
|
|
spinBtnImg: 'https://d31zlh4on95l9h.cloudfront.net/images/11b749e0fd4b08238980b74c6e80b2e6.png',
|
|
disabledSpinBtnImg: 'https://d31zlh4on95l9h.cloudfront.net/images/9b7383c1f80bb32a279791879947791a.png',
|
|
modalBgImg: 'https://d31zlh4on95l9h.cloudfront.net/images/f75ce9ca2703662fd3176dd0493f6d7b.png',
|
|
prizeAmountImg: 'https://d31zlh4on95l9h.cloudfront.net/images/878b8ea0c78bcafdaf4f6eb63a0b2eef.png',
|
|
closeBtnImg: 'https://d31zlh4on95l9h.cloudfront.net/images/453475456dad8e6832e9904c901c1274.png',
|
|
noTimesImg: 'https://d31zlh4on95l9h.cloudfront.net/images/a67e8b3de6e441af7bcb8fbbb2153ec2.png',
|
|
ruleBgImg: 'https://d31zlh4on95l9h.cloudfront.net/images/9f585ee0ab251f348a4568355ad36816.png',
|
|
closeRuleBtnImg: 'https://d31zlh4on95l9h.cloudfront.net/images/ca2ddd411ffb85968bc261382477c984.png',
|
|
|
|
// 数据
|
|
token: '',
|
|
expireTime: '',
|
|
remainingTimes: 0,
|
|
isSpinning: false,
|
|
showPrizeModal: false,
|
|
showNoTimesModal: false,
|
|
showRuleModal: false,
|
|
isFirstVisit: true,
|
|
currentRotation: 0,
|
|
noTimesTimer: null,
|
|
prizeMessage: '',
|
|
prizeAmount: ''
|
|
}
|
|
},
|
|
mounted() {
|
|
this.token = decodeURIComponent(this.getQueryString('token'))
|
|
// 调用API获取数据
|
|
this.fetchWheelInfo();
|
|
this.getTokenFromURL();
|
|
},
|
|
methods: {
|
|
getQueryString(name) {
|
|
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
|
|
var r = window.location.search.substr(1).match(reg);
|
|
console.log("获取token方法getQueryString"+reg)
|
|
console.log("获取token方法getQueryString"+r)
|
|
if (r != null) {
|
|
return unescape(r[2]);
|
|
}
|
|
return null;
|
|
},
|
|
getTokenFromURL() {
|
|
// 使用URLSearchParams API获取token参数
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const tokenParam = urlParams.get('token');
|
|
console.log("getTokenFromURL"+tokenParam)
|
|
if (tokenParam) {
|
|
this.token = decodeURIComponent(tokenParam);
|
|
console.log("getTokenFromURL"+this.token)
|
|
console.log('获取到Token:', this.token);
|
|
} else {
|
|
console.log('URL中没有找到token参数');
|
|
}
|
|
},
|
|
// 调用API获取财富金轮信息
|
|
fetchWheelInfo() {
|
|
const token = 'pC134lIG1xDIbIi1ohnnbZi0+fEeMx8pywnIlrmTxdwROKkuwWqAWu9orpkpeXVqL98DPfeonNYpHv+mucA';
|
|
|
|
permissionApi({ token }).then(res => {
|
|
if(res.code === 200){
|
|
this.expireTime = res.data.deadline;
|
|
this.remainingTimes = res.data.count;
|
|
} else {
|
|
console.error('API返回错误:', res.msg);
|
|
}
|
|
}).catch(error => {
|
|
console.error('API调用失败:', error);
|
|
});
|
|
},
|
|
|
|
// 调用抽奖API获取奖品信息
|
|
fetchPrizeInfo() {
|
|
const token = 'pC134lIG1xDIbIi1ohnnbZi0+fEeMx8pywnIlrmTxdwROKkuwWqAWu9orpkpeXVqL98DPfeonNYpHv+mucA';
|
|
|
|
return lotteryApi({ token }).then(res => {
|
|
if(res.code === 200){
|
|
// 解析API返回的字符串数据
|
|
const prizeData = res.data;
|
|
// 假设返回格式为 "恭喜您获得卡券 2"
|
|
// 这里可以根据实际返回格式进行调整
|
|
const parts = prizeData.split(' ');
|
|
this.prizeMessage = parts.slice(0, -1).join(' '); // 获取除最后一部分外的所有部分
|
|
this.prizeAmount = parts[parts.length - 1]; // 获取最后一部分作为奖品数量
|
|
|
|
// 抽奖成功后重新获取剩余次数
|
|
this.fetchWheelInfo();
|
|
|
|
return true;
|
|
} else {
|
|
console.error('抽奖API返回错误:', res.msg);
|
|
// 设置默认值
|
|
this.prizeMessage = '抽奖失败';
|
|
this.prizeAmount = '请重试';
|
|
return false;
|
|
}
|
|
}).catch(error => {
|
|
console.error('抽奖API调用失败:', error);
|
|
// 设置默认值
|
|
this.prizeMessage = '网络错误';
|
|
this.prizeAmount = '请重试';
|
|
return false;
|
|
});
|
|
},
|
|
|
|
// 处理转动
|
|
async handleSpin() {
|
|
if (this.showRuleModal || this.isFirstVisit) return;
|
|
|
|
if (this.remainingTimes <= 0) {
|
|
this.showNoTimesModal = true;
|
|
|
|
if (this.noTimesTimer) {
|
|
clearTimeout(this.noTimesTimer);
|
|
}
|
|
this.noTimesTimer = setTimeout(() => {
|
|
this.showNoTimesModal = false;
|
|
}, 3000);
|
|
|
|
return;
|
|
}
|
|
|
|
if (this.isSpinning) return;
|
|
|
|
this.isSpinning = true;
|
|
|
|
// 开始旋转动画
|
|
const newRotation = this.currentRotation + 1440;
|
|
this.currentRotation = newRotation;
|
|
|
|
// 调用抽奖API获取奖品信息
|
|
const success = await this.fetchPrizeInfo();
|
|
|
|
setTimeout(() => {
|
|
this.isSpinning = false;
|
|
|
|
if (success) {
|
|
setTimeout(() => {
|
|
this.showPrizeModal = true;
|
|
}, 500);
|
|
}
|
|
}, 3000);
|
|
},
|
|
|
|
// 处理活动规则点击
|
|
handleRuleClick() {
|
|
this.showRuleModal = true;
|
|
},
|
|
|
|
// 关闭弹窗
|
|
closeModal() {
|
|
this.showPrizeModal = false;
|
|
},
|
|
|
|
// 关闭无次数提示弹窗
|
|
closeNoTimesModal() {
|
|
this.showNoTimesModal = false;
|
|
if (this.noTimesTimer) {
|
|
clearTimeout(this.noTimesTimer);
|
|
}
|
|
},
|
|
|
|
// 关闭活动规则弹窗
|
|
closeRuleModal() {
|
|
this.showRuleModal = false;
|
|
},
|
|
|
|
// 关闭首次访问弹窗
|
|
closeFirstVisitModal() {
|
|
this.isFirstVisit = false;
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.wheel-container {
|
|
min-height: 100vh;
|
|
background-image: url('https://d31zlh4on95l9h.cloudfront.net/images/aec2d399d578ab0a97d72bc8628433bb.png');
|
|
background-size: cover;
|
|
background-position: bottom center;
|
|
padding: 15px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
/* 顶部区域样式 */
|
|
.top-section {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.expire-time {
|
|
color: #fff;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
|
|
margin: 11px 0 0 12px;
|
|
}
|
|
|
|
.top-right {
|
|
display: flex;
|
|
gap: 20px;
|
|
align-items: center;
|
|
}
|
|
|
|
.icon-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.history-icon, .rule-icon, .home-icon {
|
|
width: 25px;
|
|
height: 25px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.icon-text {
|
|
color: #fff;
|
|
font-size: 11px;
|
|
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
/* 主标题图片样式 */
|
|
.title-img {
|
|
width: 327px;
|
|
height: 144px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* 转盘区域样式 */
|
|
.wheel-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.wheel-wrapper {
|
|
position: relative;
|
|
width: 333px;
|
|
height: 333px;
|
|
}
|
|
|
|
.wheel-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
transform-origin: center;
|
|
will-change: transform;
|
|
transition: transform 0.3s ease-out;
|
|
}
|
|
|
|
.wheel-img.spinning {
|
|
animation: optimal-spin 3s ease-out forwards;
|
|
}
|
|
|
|
@keyframes optimal-spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
animation-timing-function: ease-in;
|
|
}
|
|
70% {
|
|
transform: rotate(1260deg);
|
|
}
|
|
100% {
|
|
transform: rotate(1440deg);
|
|
}
|
|
}
|
|
|
|
/* 指针样式 */
|
|
.pointer-img {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 137px;
|
|
height: 137px;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 2;
|
|
}
|
|
|
|
/* 指针盖样式 */
|
|
.pointer-cover-img {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 104px;
|
|
height: 106px;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 3;
|
|
}
|
|
|
|
/* 剩余次数样式 */
|
|
.remaining-section {
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: -5px;
|
|
}
|
|
|
|
.remaining-bg {
|
|
width: 104px;
|
|
height: 21.5px;
|
|
}
|
|
|
|
.remaining-text {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: #fff;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
|
|
width: 100%;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 转动按钮样式 */
|
|
.spin-btn {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.spin-btn:active:not(:disabled) {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.spin-btn:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.spin-btn-img {
|
|
width: 240px;
|
|
height: 94px;
|
|
}
|
|
|
|
/* 弹窗样式 */
|
|
.prize-modal, .no-times-modal, .rule-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.modal-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
/* 中奖弹窗内容区域尺寸为333x377 */
|
|
.modal-content {
|
|
position: relative;
|
|
width: 333px;
|
|
height: 377px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1001;
|
|
animation: modal-appear 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes modal-appear {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.8) translateY(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1) translateY(0);
|
|
}
|
|
}
|
|
|
|
.modal-bg {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1;
|
|
}
|
|
|
|
/* 无次数提示弹窗样式 */
|
|
.no-times-content {
|
|
position: relative;
|
|
width: 333px;
|
|
height: 79px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1001;
|
|
margin-top: 250px;
|
|
animation: slide-up 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes slide-up {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.no-times-bg {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1;
|
|
}
|
|
|
|
/* 弹窗内容样式 */
|
|
.prize-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
z-index: 2;
|
|
margin-top: 120px;
|
|
}
|
|
|
|
.prize-title {
|
|
color: #B82525;
|
|
font-size: 25px;
|
|
font-weight: bold;
|
|
margin-bottom: 35px;
|
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
|
|
animation: text-pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes text-pulse {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
|
|
.prize-amount-wrapper {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
/* 奖品数量背景图片尺寸为272x58 */
|
|
.prize-amount-bg {
|
|
width: 272px;
|
|
height: 58px;
|
|
}
|
|
|
|
.prize-amount {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: #FFFFFF;
|
|
font-size: 25px;
|
|
font-weight: bold;
|
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
/* 关闭按钮样式 - 修改位置 */
|
|
.close-modal {
|
|
position: absolute;
|
|
top: 115px;
|
|
right: 22px;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
z-index: 1002;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.close-modal:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.close-modal img {
|
|
width: 35px;
|
|
height: 35px;
|
|
}
|
|
|
|
/* 活动规则弹窗样式 - 整体下移 */
|
|
.rule-content {
|
|
position: relative;
|
|
width: 333px;
|
|
height: 239px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
z-index: 1001;
|
|
animation: modal-appear 0.3s ease-out;
|
|
margin-top: 80px;
|
|
}
|
|
|
|
.rule-bg {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1;
|
|
}
|
|
|
|
/* 活动规则关闭按钮 - 修复：确保按钮层级高于背景 */
|
|
.close-rule-btn {
|
|
position: absolute;
|
|
top: 45.5px;
|
|
right: 35.5px;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
z-index: 1002;
|
|
transition: transform 0.2s ease;
|
|
padding: 0;
|
|
width: 30px;
|
|
height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.close-rule-btn:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.close-rule-btn img {
|
|
width: 20px;
|
|
height: 20px;
|
|
display: block;
|
|
}
|
|
|
|
/* 活动规则文本 */
|
|
.rule-text {
|
|
position: absolute;
|
|
top: 83px;
|
|
left: 27px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 9.15px;
|
|
width: calc(100% - 54px);
|
|
}
|
|
|
|
.rule-line {
|
|
color: #FFFFFF;
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* 媒体查询 - 适配小屏幕 */
|
|
@media (max-width: 380px) {
|
|
.title-img {
|
|
width: 280px;
|
|
height: 123px;
|
|
}
|
|
|
|
.wheel-wrapper {
|
|
width: 280px;
|
|
height: 280px;
|
|
}
|
|
|
|
.pointer-img {
|
|
width: 115px;
|
|
height: 115px;
|
|
}
|
|
|
|
.pointer-cover-img {
|
|
width: 87px;
|
|
height: 89px;
|
|
}
|
|
|
|
.spin-btn-img {
|
|
width: 200px;
|
|
height: 78px;
|
|
}
|
|
|
|
.top-right {
|
|
gap: 15px;
|
|
}
|
|
|
|
.remaining-section {
|
|
margin-top: -8px;
|
|
}
|
|
|
|
/* 小屏幕适配中奖弹窗 */
|
|
.modal-content {
|
|
width: 300px;
|
|
height: 340px;
|
|
}
|
|
.prize-info {
|
|
margin-top: 100px;
|
|
}
|
|
|
|
.prize-title {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.prize-amount-wrapper {
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.prize-amount-bg {
|
|
width: 240px;
|
|
height: 51px;
|
|
}
|
|
|
|
.prize-amount {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.no-times-content {
|
|
width: 280px;
|
|
height: 66px;
|
|
margin-top: 200px;
|
|
}
|
|
|
|
/* 小屏幕适配关闭按钮位置 */
|
|
.close-modal {
|
|
top: 100px;
|
|
right: 18px;
|
|
}
|
|
.close-modal img {
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
|
|
/* 小屏幕适配活动规则弹窗 */
|
|
.rule-content {
|
|
width: 300px;
|
|
height: 215px;
|
|
margin-top: 70px;
|
|
}
|
|
|
|
.close-rule-btn {
|
|
top: 41px;
|
|
right: 32px;
|
|
}
|
|
|
|
.rule-text {
|
|
top: 75px;
|
|
left: 24px;
|
|
width: calc(100% - 48px);
|
|
}
|
|
}
|
|
</style>
|