1280 lines
27 KiB
Vue
1280 lines
27 KiB
Vue
<template>
|
||
<div class="home-page">
|
||
<!-- 顶部Banner区域 -->
|
||
<div class="banner-section">
|
||
<div class="banner-content">
|
||
<img src="https://jingcaishuju.oss-cn-beijing.aliyuncs.com/banner.png" alt="精彩猪手" class="banner-image" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 公告区域 -->
|
||
<div class="notice-section" @click="showAnnouncementList">
|
||
<div class="notice-icon">📢</div>
|
||
<div class="notice-content">
|
||
<transition name="notice-slide" mode="out-in">
|
||
<div :key="currentNoticeIndex" class="notice-text">
|
||
{{ currentNoticeText }}
|
||
</div>
|
||
</transition>
|
||
</div>
|
||
<transition name="notice-slide" mode="out-in">
|
||
<div :key="currentNoticeIndex" class="notice-time" v-if="currentNoticeTime">
|
||
{{ currentNoticeTime }}
|
||
</div>
|
||
</transition>
|
||
</div>
|
||
|
||
<!-- 彩票种类区域 -->
|
||
<div class="lottery-section">
|
||
<div class="section-header">
|
||
<h2 class="section-title">中国福利彩票 - 智推版</h2>
|
||
<button class="premium-btn" @click="goToPremiumVersion">
|
||
精推版
|
||
</button>
|
||
</div>
|
||
<div class="lottery-grid">
|
||
<!-- 双色球 -->
|
||
<div class="lottery-card available welfare-red-gradient" @click="goToShuangseqiu">
|
||
<div class="lottery-icon">
|
||
<img src="/assets/type/ssq.svg" alt="双色球" />
|
||
</div>
|
||
<div class="lottery-info">
|
||
<h3 class="lottery-name">双色球</h3>
|
||
<p class="lottery-desc">每周二、四、日21:15开奖</p>
|
||
</div>
|
||
<div class="lottery-status available">可用</div>
|
||
</div>
|
||
|
||
<!-- 快乐8 -->
|
||
<div class="lottery-card disabled welfare-yellow-gradient" @click="showDevelopingTip">
|
||
<div class="lottery-icon">
|
||
<img src="/assets/type/kl8.svg" alt="快乐8" />
|
||
</div>
|
||
<div class="lottery-info">
|
||
<h3 class="lottery-name">快乐8</h3>
|
||
<p class="lottery-desc">每天21:15开奖</p>
|
||
</div>
|
||
<div class="lottery-status developing">即将开放</div>
|
||
</div>
|
||
|
||
<!-- 七乐彩 -->
|
||
<div class="lottery-card disabled welfare-blue-gradient" @click="showDevelopingTip">
|
||
<div class="lottery-icon">
|
||
<img src="/assets/type/7lecai.svg" alt="七乐彩" />
|
||
</div>
|
||
<div class="lottery-info">
|
||
<h3 class="lottery-name">七乐彩</h3>
|
||
<p class="lottery-desc">每周一、三、五21:15开奖</p>
|
||
</div>
|
||
<div class="lottery-status developing">即将开放</div>
|
||
</div>
|
||
|
||
<!-- 福彩3D -->
|
||
<div class="lottery-card disabled welfare-purple-gradient" @click="showDevelopingTip">
|
||
<div class="lottery-icon">
|
||
<img src="/assets/type/3D.svg" alt="福彩3D" />
|
||
</div>
|
||
<div class="lottery-info">
|
||
<h3 class="lottery-name">福彩3D</h3>
|
||
<p class="lottery-desc">每天21:15开奖</p>
|
||
</div>
|
||
<div class="lottery-status developing">即将开放</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 体彩区域 -->
|
||
<div class="lottery-section">
|
||
<h2 class="section-title">中国体育彩票 - 智推版</h2>
|
||
<div class="lottery-grid">
|
||
<!-- 大乐透 -->
|
||
<div class="lottery-card available sports-orange-gradient" @click="goToDaletou">
|
||
<div class="lottery-icon">
|
||
<img src="/assets/type/daletou.svg" alt="大乐透" />
|
||
</div>
|
||
<div class="lottery-info">
|
||
<h3 class="lottery-name">大乐透</h3>
|
||
<p class="lottery-desc">每周一、三、六21:25开奖</p>
|
||
</div>
|
||
<div class="lottery-status available">可用</div>
|
||
</div>
|
||
|
||
<!-- 排列三 -->
|
||
<div class="lottery-card disabled sports-yellow-gradient" @click="showDevelopingTip">
|
||
<div class="lottery-icon">
|
||
<img src="/assets/type/pailie3.svg" alt="排列三" />
|
||
</div>
|
||
<div class="lottery-info">
|
||
<h3 class="lottery-name">排列三</h3>
|
||
<p class="lottery-desc">每天21:25开奖</p>
|
||
</div>
|
||
<div class="lottery-status developing">即将开放</div>
|
||
</div>
|
||
|
||
<!-- 七星彩 -->
|
||
<div class="lottery-card disabled sports-blue-gradient" @click="showDevelopingTip">
|
||
<div class="lottery-icon">
|
||
<img src="/assets/type/7xingcai.svg" alt="七星彩" />
|
||
</div>
|
||
<div class="lottery-info">
|
||
<h3 class="lottery-name">七星彩</h3>
|
||
<p class="lottery-desc">每周二、五、日21:25开奖</p>
|
||
</div>
|
||
<div class="lottery-status developing">即将开放</div>
|
||
</div>
|
||
|
||
<!-- 排列五 -->
|
||
<div class="lottery-card disabled sports-purple-gradient" @click="showDevelopingTip">
|
||
<div class="lottery-icon">
|
||
<img src="/assets/type/pailie5.svg" alt="排列五" />
|
||
</div>
|
||
<div class="lottery-info">
|
||
<h3 class="lottery-name">排列五</h3>
|
||
<p class="lottery-desc">每天21:25开奖</p>
|
||
</div>
|
||
<div class="lottery-status developing">即将开放</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 开发中提示框 -->
|
||
<div v-if="showTip" class="tip-overlay" @click="hideTip">
|
||
<div class="tip-content" @click.stop>
|
||
<div class="tip-icon">🚧</div>
|
||
<h3>功能开发中</h3>
|
||
<p>该彩票类型的智能分析功能正在开发中，敬请期待！</p>
|
||
<button class="tip-button" @click="hideTip">我知道了</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 公告列表弹窗 -->
|
||
<div v-if="showAnnouncementModal" class="announcement-modal-overlay" @click="hideAnnouncementList">
|
||
<div class="announcement-modal-content" @click.stop>
|
||
<div class="announcement-modal-header">
|
||
<h3>📢 全部公告</h3>
|
||
<button class="close-btn" @click="hideAnnouncementList">×</button>
|
||
</div>
|
||
<div class="announcement-modal-body">
|
||
<div v-if="allAnnouncements.length === 0" class="no-announcement">
|
||
暂无公告
|
||
</div>
|
||
<div v-else class="announcement-list">
|
||
<div
|
||
v-for="item in allAnnouncements"
|
||
:key="item.id"
|
||
class="announcement-item"
|
||
:class="{ 'is-top': item.priority === 1 }"
|
||
>
|
||
<div class="announcement-item-header">
|
||
<span v-if="item.priority === 1" class="top-tag">置顶</span>
|
||
<span class="announcement-title">{{ item.title }}</span>
|
||
<span class="announcement-time">{{ formatFullTime(item.createTime) }}</span>
|
||
</div>
|
||
<div class="announcement-content">{{ item.content }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { lotteryApi } from '../api/index.js'
|
||
|
||
export default {
|
||
name: 'LotterySelection',
|
||
data() {
|
||
return {
|
||
showTip: false,
|
||
announcements: [],
|
||
currentNoticeIndex: 0,
|
||
noticeTimer: null,
|
||
showAnnouncementModal: false,
|
||
allAnnouncements: []
|
||
}
|
||
},
|
||
computed: {
|
||
currentNoticeText() {
|
||
if (this.announcements.length === 0) {
|
||
return '暂无公告'
|
||
}
|
||
return this.announcements[this.currentNoticeIndex]?.content || '暂无公告'
|
||
},
|
||
currentNoticeTime() {
|
||
if (this.announcements.length === 0) {
|
||
return ''
|
||
}
|
||
const announcement = this.announcements[this.currentNoticeIndex]
|
||
if (!announcement || !announcement.createTime) {
|
||
return ''
|
||
}
|
||
return this.formatTime(announcement.createTime)
|
||
}
|
||
},
|
||
mounted() {
|
||
this.loadAnnouncements()
|
||
// 记录页面访问PV
|
||
this.recordPV()
|
||
},
|
||
beforeUnmount() {
|
||
this.clearNoticeTimer()
|
||
},
|
||
methods: {
|
||
goToShuangseqiu() {
|
||
this.$router.push('/shuangseqiu')
|
||
},
|
||
goToDaletou() {
|
||
this.$router.push('/daletou')
|
||
},
|
||
goToPremiumVersion() {
|
||
this.$router.push('/lottery-premium')
|
||
},
|
||
showDevelopingTip() {
|
||
this.showTip = true
|
||
},
|
||
hideTip() {
|
||
this.showTip = false
|
||
},
|
||
// 加载公告
|
||
async loadAnnouncements() {
|
||
try {
|
||
const response = await lotteryApi.getTopAnnouncements()
|
||
if (response && response.success && response.data) {
|
||
this.announcements = response.data
|
||
if (this.announcements.length > 1) {
|
||
this.startNoticeTimer()
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('加载公告失败:', error)
|
||
}
|
||
},
|
||
// 开始轮播定时器
|
||
startNoticeTimer() {
|
||
this.clearNoticeTimer()
|
||
this.noticeTimer = setInterval(() => {
|
||
this.currentNoticeIndex = (this.currentNoticeIndex + 1) % this.announcements.length
|
||
}, 10000) // 每10秒切换一次
|
||
},
|
||
// 清除定时器
|
||
clearNoticeTimer() {
|
||
if (this.noticeTimer) {
|
||
clearInterval(this.noticeTimer)
|
||
this.noticeTimer = null
|
||
}
|
||
},
|
||
// 格式化时间
|
||
formatTime(timestamp) {
|
||
const date = new Date(timestamp)
|
||
const year = String(date.getFullYear()).slice(-2)
|
||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||
const day = String(date.getDate()).padStart(2, '0')
|
||
const hours = String(date.getHours()).padStart(2, '0')
|
||
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||
return `${year}-${month}-${day} ${hours}:${minutes}`
|
||
},
|
||
// 格式化完整时间
|
||
formatFullTime(timestamp) {
|
||
const date = new Date(timestamp)
|
||
const year = date.getFullYear()
|
||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||
const day = String(date.getDate()).padStart(2, '0')
|
||
const hours = String(date.getHours()).padStart(2, '0')
|
||
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||
return `${year}-${month}-${day} ${hours}:${minutes}`
|
||
},
|
||
// 显示公告列表
|
||
async showAnnouncementList() {
|
||
try {
|
||
const response = await lotteryApi.getPublishedAnnouncements()
|
||
if (response && response.code === 0 && response.data) {
|
||
this.allAnnouncements = response.data
|
||
} else {
|
||
this.allAnnouncements = []
|
||
}
|
||
} catch (error) {
|
||
console.error('获取公告列表失败:', error)
|
||
this.allAnnouncements = []
|
||
}
|
||
this.showAnnouncementModal = true
|
||
},
|
||
// 隐藏公告列表
|
||
hideAnnouncementList() {
|
||
this.showAnnouncementModal = false
|
||
},
|
||
// 记录页面访问PV
|
||
async recordPV() {
|
||
try {
|
||
await lotteryApi.recordPageView('/')
|
||
} catch (error) {
|
||
console.error('记录PV失败:', error)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.home-page {
|
||
min-height: calc(100vh - 70px);
|
||
background: #f5f5f5;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* Banner区域 */
|
||
.banner-section {
|
||
position: relative;
|
||
overflow: hidden;
|
||
height: 55.56vw; /* 9:5宽高比 (5/9 = 0.5556) */
|
||
max-height: 360px;
|
||
min-height: 200px;
|
||
background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
|
||
}
|
||
|
||
.banner-section .banner-image {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
z-index: 1;
|
||
}
|
||
|
||
.banner-section::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(135deg, rgba(255, 107, 53, 0.7) 0%, rgba(247, 147, 30, 0.7) 100%);
|
||
z-index: 2;
|
||
}
|
||
|
||
.banner-content {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
position: relative;
|
||
z-index: 3;
|
||
height: 100%;
|
||
padding: 20px;
|
||
}
|
||
|
||
.banner-icon {
|
||
font-size: 32px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.banner-title {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
margin: 0 0 4px 0;
|
||
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
.banner-subtitle {
|
||
font-size: 14px;
|
||
margin: 0;
|
||
opacity: 0.9;
|
||
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
/* 公告区域 */
|
||
.notice-section {
|
||
background: #fff2e6;
|
||
border: 1px solid #ffd4a3;
|
||
margin: 16px auto;
|
||
max-width: calc(100% - 32px);
|
||
padding: 8px 8px;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.notice-section:hover {
|
||
background: #ffe8cc;
|
||
border-color: #ffb366;
|
||
}
|
||
|
||
.notice-icon {
|
||
font-size: 16px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.notice-content {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
position: relative;
|
||
min-height: 20px;
|
||
}
|
||
|
||
.notice-text {
|
||
font-size: 14px;
|
||
color: #d48806;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.notice-time {
|
||
font-size: 12px;
|
||
color: #d48806;
|
||
opacity: 0.8;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
margin-left: 8px;
|
||
}
|
||
|
||
/* 公告轮播动画 */
|
||
.notice-slide-enter-active,
|
||
.notice-slide-leave-active {
|
||
transition: all 0.5s ease;
|
||
}
|
||
|
||
.notice-slide-enter-from {
|
||
opacity: 0;
|
||
transform: translateY(-10px);
|
||
}
|
||
|
||
.notice-slide-leave-to {
|
||
opacity: 0;
|
||
transform: translateY(10px);
|
||
}
|
||
|
||
/* 彩票区域 */
|
||
.lottery-section {
|
||
margin: 16px auto;
|
||
margin-bottom: 24px;
|
||
max-width: calc(100% - 32px);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
margin: 0 0 16px 0;
|
||
padding-left: 4px;
|
||
}
|
||
|
||
.section-header .section-title {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.premium-btn {
|
||
background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 20px;
|
||
padding: 5px 12px;
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 100px;
|
||
box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
|
||
transition: all 0.3s ease;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.premium-btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 20px rgba(255, 107, 53, 0.6);
|
||
background: linear-gradient(135deg, #f7931e 0%, #ff6b35 100%);
|
||
}
|
||
|
||
.premium-btn:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.lottery-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 12px;
|
||
width: 100%;
|
||
}
|
||
|
||
.lottery-card {
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 16px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||
border: 1px solid #f0f0f0;
|
||
transition: all 0.3s ease;
|
||
cursor: pointer;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
min-height: 110px;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.lottery-card.available:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
|
||
border-color: #ff6b35;
|
||
}
|
||
|
||
.lottery-card.disabled {
|
||
opacity: 0.85;
|
||
}
|
||
|
||
.lottery-card.disabled:hover {
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 3px 12px rgba(0,0,0,0.08);
|
||
}
|
||
|
||
.lottery-icon {
|
||
width: 96px;
|
||
height: 96px;
|
||
margin-right: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.lottery-icon img {
|
||
width: 96px;
|
||
height: 96px;
|
||
object-fit: contain;
|
||
display: block;
|
||
}
|
||
|
||
.lottery-info {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
|
||
.lottery-name {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.lottery-desc {
|
||
font-size: 12px;
|
||
color: #666;
|
||
margin: 4px 0 0 0;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.lottery-status {
|
||
position: absolute;
|
||
top: 12px;
|
||
right: 12px;
|
||
font-size: 12px;
|
||
padding: 4px 8px;
|
||
border-radius: 6px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.lottery-status.available {
|
||
background: #f6ffed;
|
||
color: #52c41a;
|
||
border: 1px solid #b7eb8f;
|
||
}
|
||
|
||
.lottery-status.developing {
|
||
background: #fff7e6;
|
||
color: #fa8c16;
|
||
border: 1px solid #ffd591;
|
||
}
|
||
|
||
/* 体育彩票渐变样式 */
|
||
.sports-orange-gradient {
|
||
background: linear-gradient(90deg, rgba(254, 150, 51, 1) 0%, rgba(246, 102, 77, 1) 100%) !important;
|
||
color: white !important;
|
||
border: none !important;
|
||
}
|
||
|
||
.sports-orange-gradient .lottery-name,
|
||
.sports-orange-gradient .lottery-desc {
|
||
color: white !important;
|
||
}
|
||
|
||
.sports-yellow-gradient {
|
||
background: linear-gradient(90deg, rgba(251, 216, 48, 1) 0%, rgba(255, 174, 1, 1) 100%) !important;
|
||
color: white !important;
|
||
border: none !important;
|
||
}
|
||
|
||
.sports-yellow-gradient .lottery-name,
|
||
.sports-yellow-gradient .lottery-desc {
|
||
color: white !important;
|
||
}
|
||
|
||
.sports-blue-gradient {
|
||
background: linear-gradient(90deg, rgba(77, 225, 219, 1) 0%, rgba(39, 138, 241, 1) 100%) !important;
|
||
color: white !important;
|
||
border: none !important;
|
||
}
|
||
|
||
.sports-blue-gradient .lottery-name,
|
||
.sports-blue-gradient .lottery-desc {
|
||
color: white !important;
|
||
}
|
||
|
||
.sports-purple-gradient {
|
||
background: linear-gradient(90deg, rgba(191, 132, 252, 1) 0%, rgba(114, 89, 248, 1) 100%) !important;
|
||
color: white !important;
|
||
border: none !important;
|
||
}
|
||
|
||
.sports-purple-gradient .lottery-name,
|
||
.sports-purple-gradient .lottery-desc {
|
||
color: white !important;
|
||
}
|
||
|
||
/* 福利彩票渐变样式 */
|
||
.welfare-red-gradient {
|
||
background: linear-gradient(90deg, rgba(254, 150, 51, 1) 0%, rgba(246, 102, 77, 1) 100%) !important;
|
||
color: white !important;
|
||
border: none !important;
|
||
}
|
||
|
||
.welfare-red-gradient .lottery-name,
|
||
.welfare-red-gradient .lottery-desc {
|
||
color: white !important;
|
||
}
|
||
|
||
.welfare-yellow-gradient {
|
||
background: linear-gradient(90deg, rgba(251, 216, 48, 1) 0%, rgba(255, 174, 1, 1) 100%) !important;
|
||
color: white !important;
|
||
border: none !important;
|
||
}
|
||
|
||
.welfare-yellow-gradient .lottery-name,
|
||
.welfare-yellow-gradient .lottery-desc {
|
||
color: white !important;
|
||
}
|
||
|
||
.welfare-blue-gradient {
|
||
background: linear-gradient(90deg, rgba(77, 225, 219, 1) 0%, rgba(39, 138, 241, 1) 100%) !important;
|
||
color: white !important;
|
||
border: none !important;
|
||
}
|
||
|
||
.welfare-blue-gradient .lottery-name,
|
||
.welfare-blue-gradient .lottery-desc {
|
||
color: white !important;
|
||
}
|
||
|
||
.welfare-purple-gradient {
|
||
background: linear-gradient(90deg, rgba(191, 132, 252, 1) 0%, rgba(114, 89, 248, 1) 100%) !important;
|
||
color: white !important;
|
||
border: none !important;
|
||
}
|
||
|
||
.welfare-purple-gradient .lottery-name,
|
||
.welfare-purple-gradient .lottery-desc {
|
||
color: white !important;
|
||
}
|
||
|
||
/* 渐变卡片的状态标签样式 */
|
||
.sports-orange-gradient .lottery-status,
|
||
.sports-yellow-gradient .lottery-status,
|
||
.sports-blue-gradient .lottery-status,
|
||
.sports-purple-gradient .lottery-status,
|
||
.welfare-red-gradient .lottery-status,
|
||
.welfare-yellow-gradient .lottery-status,
|
||
.welfare-blue-gradient .lottery-status,
|
||
.welfare-purple-gradient .lottery-status {
|
||
background: rgba(255, 255, 255, 0.2) !important;
|
||
color: white !important;
|
||
border: 1px solid rgba(255, 255, 255, 0.3) !important;
|
||
}
|
||
|
||
.tip-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0,0,0,0.6);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 1000;
|
||
padding: 20px;
|
||
}
|
||
|
||
.tip-content {
|
||
background: white;
|
||
border-radius: 16px;
|
||
padding: 32px 24px;
|
||
text-align: center;
|
||
max-width: 300px;
|
||
width: 100%;
|
||
box-shadow: 0 16px 48px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
.tip-icon {
|
||
font-size: 40px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.tip-content h3 {
|
||
font-size: 18px;
|
||
color: #333;
|
||
margin: 0 0 12px 0;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.tip-content p {
|
||
color: #666;
|
||
font-size: 15px;
|
||
line-height: 1.5;
|
||
margin: 0 0 20px 0;
|
||
}
|
||
|
||
.tip-button {
|
||
background: linear-gradient(135deg, #ff6b35, #f7931e);
|
||
color: white;
|
||
border: none;
|
||
padding: 10px 24px;
|
||
border-radius: 20px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.tip-button:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 20px rgba(255, 107, 53, 0.3);
|
||
}
|
||
|
||
.tip-button:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.banner-section {
|
||
height: 55.56vw;
|
||
max-height: 280px;
|
||
min-height: 190px;
|
||
}
|
||
|
||
.banner-content {
|
||
flex-direction: row;
|
||
text-align: left;
|
||
padding: 16px;
|
||
}
|
||
|
||
.banner-title {
|
||
font-size: 22px;
|
||
}
|
||
|
||
.banner-subtitle {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.lottery-section {
|
||
margin: 12px auto;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.premium-btn {
|
||
font-size: 15px;
|
||
padding: 4px 10px;
|
||
min-width: 90px;
|
||
}
|
||
|
||
.lottery-grid {
|
||
gap: 10px;
|
||
}
|
||
|
||
.lottery-card {
|
||
padding: 14px;
|
||
min-height: 100px;
|
||
}
|
||
|
||
.lottery-icon {
|
||
width: 84px;
|
||
height: 84px;
|
||
margin-right: 10px;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.lottery-icon img {
|
||
width: 84px;
|
||
height: 84px;
|
||
}
|
||
|
||
.lottery-name {
|
||
font-size: 15px;
|
||
}
|
||
|
||
.lottery-desc {
|
||
font-size: 11px;
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
|
||
/* 专门针对430px宽度的屏幕 */
|
||
@media (max-width: 430px) {
|
||
.banner-section {
|
||
height: 239px; /* 430 * 5/9 ≈ 239 */
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.tip-overlay {
|
||
padding: 16px;
|
||
}
|
||
|
||
.tip-content {
|
||
padding: 24px 20px;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.tip-icon {
|
||
font-size: 32px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.tip-content h3 {
|
||
font-size: 16px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.tip-content p {
|
||
font-size: 13px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.tip-button {
|
||
padding: 8px 20px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.banner-section {
|
||
height: 55.56vw;
|
||
max-height: 239px;
|
||
min-height: 180px;
|
||
}
|
||
|
||
.banner-content {
|
||
padding: 12px;
|
||
}
|
||
|
||
.banner-icon {
|
||
font-size: 28px;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.banner-title {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.banner-subtitle {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.notice-section {
|
||
margin: 12px auto;
|
||
max-width: calc(100% - 24px);
|
||
padding: 8px 8px 8px 8px;
|
||
}
|
||
|
||
.notice-text {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.lottery-section {
|
||
margin: 8px auto;
|
||
margin-bottom: 16px;
|
||
max-width: calc(100% - 16px);
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 15px;
|
||
}
|
||
|
||
.premium-btn {
|
||
font-size: 14px;
|
||
padding: 3.5px 9px;
|
||
min-width: 80px;
|
||
}
|
||
|
||
.lottery-grid {
|
||
gap: 8px;
|
||
}
|
||
|
||
.lottery-card {
|
||
padding: 12px;
|
||
min-height: 88px;
|
||
}
|
||
|
||
.lottery-icon {
|
||
width: 72px;
|
||
height: 72px;
|
||
margin-right: 8px;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.lottery-icon img {
|
||
width: 72px;
|
||
height: 72px;
|
||
}
|
||
|
||
.lottery-name {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.lottery-desc {
|
||
font-size: 13px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.lottery-status {
|
||
font-size: 10px;
|
||
padding: 3px 6px;
|
||
top: 10px;
|
||
right: 10px;
|
||
}
|
||
}
|
||
|
||
/* 超小屏幕优化 */
|
||
@media (max-width: 400px) {
|
||
.lottery-card {
|
||
padding: 10px;
|
||
min-height: 90px;
|
||
}
|
||
|
||
.lottery-icon {
|
||
width: 60px;
|
||
height: 60px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.lottery-icon img {
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
|
||
.lottery-name {
|
||
font-size: 14px;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.lottery-desc {
|
||
font-size: 11px;
|
||
margin-bottom: 0;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.lottery-status {
|
||
font-size: 9px;
|
||
padding: 2px 4px;
|
||
top: 8px;
|
||
right: 8px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.lottery-grid {
|
||
gap: 8px;
|
||
}
|
||
|
||
.lottery-section {
|
||
margin: 12px auto;
|
||
margin-bottom: 16px;
|
||
max-width: calc(100% - 24px);
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 16px;
|
||
margin-bottom: 12px;
|
||
}
|
||
}
|
||
|
||
/* 桌面端样式 */
|
||
@media (min-width: 1024px) {
|
||
.home-page {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.banner-section {
|
||
height: 55.56vw;
|
||
max-height: 380px;
|
||
min-height: 240px;
|
||
}
|
||
|
||
.banner-content {
|
||
padding: 40px;
|
||
}
|
||
|
||
.banner-icon {
|
||
font-size: 40px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.banner-title {
|
||
font-size: 32px;
|
||
}
|
||
|
||
.banner-subtitle {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.lottery-section {
|
||
margin: 24px 40px 32px 40px;
|
||
}
|
||
|
||
.section-header {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 22px;
|
||
}
|
||
|
||
.premium-btn {
|
||
font-size: 17px;
|
||
padding: 6px 14px;
|
||
min-width: 120px;
|
||
}
|
||
|
||
.lottery-grid {
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 16px;
|
||
}
|
||
|
||
.lottery-card {
|
||
padding: 20px;
|
||
min-height: 160px;
|
||
flex-direction: column;
|
||
text-align: center;
|
||
}
|
||
|
||
.lottery-icon {
|
||
width: 80px;
|
||
height: 80px;
|
||
margin-right: 0;
|
||
margin-bottom: 16px;
|
||
align-self: center;
|
||
}
|
||
|
||
.lottery-icon img {
|
||
width: 80px;
|
||
height: 80px;
|
||
}
|
||
|
||
.lottery-info {
|
||
align-items: center;
|
||
text-align: center;
|
||
}
|
||
|
||
.lottery-name {
|
||
font-size: 18px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.lottery-desc {
|
||
font-size: 13px;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.lottery-status {
|
||
font-size: 13px;
|
||
padding: 5px 10px;
|
||
position: static;
|
||
margin-top: 8px;
|
||
align-self: center;
|
||
}
|
||
}
|
||
|
||
/* 公告列表弹窗样式 */
|
||
.announcement-modal-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 1000;
|
||
padding: 20px;
|
||
}
|
||
|
||
.announcement-modal-content {
|
||
background: white;
|
||
border-radius: 16px;
|
||
max-width: 600px;
|
||
width: 100%;
|
||
max-height: 80vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.announcement-modal-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20px 24px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.announcement-modal-header h3 {
|
||
margin: 0;
|
||
font-size: 18px;
|
||
color: #333;
|
||
}
|
||
|
||
.close-btn {
|
||
background: none;
|
||
border: none;
|
||
font-size: 24px;
|
||
color: #999;
|
||
cursor: pointer;
|
||
padding: 0;
|
||
line-height: 1;
|
||
transition: color 0.3s;
|
||
}
|
||
|
||
.close-btn:hover {
|
||
color: #333;
|
||
}
|
||
|
||
.announcement-modal-body {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 16px 24px;
|
||
}
|
||
|
||
.no-announcement {
|
||
text-align: center;
|
||
color: #999;
|
||
padding: 40px 0;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.announcement-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.announcement-item {
|
||
background: #f9f9f9;
|
||
border-radius: 12px;
|
||
padding: 16px;
|
||
border: 1px solid #eee;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.announcement-item:hover {
|
||
background: #f5f5f5;
|
||
border-color: #ddd;
|
||
}
|
||
|
||
.announcement-item.is-top {
|
||
background: #fff8e6;
|
||
border-color: #ffd591;
|
||
}
|
||
|
||
.announcement-item-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-bottom: 10px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.top-tag {
|
||
background: linear-gradient(135deg, #ff6b35, #f7931e);
|
||
color: white;
|
||
font-size: 11px;
|
||
padding: 2px 8px;
|
||
border-radius: 4px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.announcement-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
flex: 1;
|
||
}
|
||
|
||
.announcement-time {
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
|
||
.announcement-content {
|
||
font-size: 14px;
|
||
color: #666;
|
||
line-height: 1.6;
|
||
margin-bottom: 12px;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.announcement-meta {
|
||
display: flex;
|
||
gap: 16px;
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.announcement-modal-content {
|
||
max-height: 90vh;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.announcement-modal-header {
|
||
padding: 16px 20px;
|
||
}
|
||
|
||
.announcement-modal-body {
|
||
padding: 12px 16px;
|
||
}
|
||
|
||
.announcement-item {
|
||
padding: 12px;
|
||
}
|
||
|
||
.announcement-title {
|
||
font-size: 15px;
|
||
}
|
||
|
||
.announcement-content {
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
</style> |