770 lines
16 KiB
Vue
770 lines
16 KiB
Vue
<template>
|
||
<div class="lottery-info-page">
|
||
<!-- 公告区域 -->
|
||
<div class="notice-section">
|
||
<div class="notice-icon">📊</div>
|
||
<div class="notice-text">实时开奖结果查询，历史数据分析</div>
|
||
</div>
|
||
|
||
<!-- 彩票种类区域 -->
|
||
<div class="lottery-section">
|
||
<h2 class="section-title">中国福利彩票</h2>
|
||
<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">
|
||
<svg class="developing-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M12 2L13.09 8.26L22 9L13.09 9.74L12 16L10.91 9.74L2 9L10.91 8.26L12 2Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
|
||
<circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
|
||
</svg>
|
||
</div>
|
||
<h3>功能开发中</h3>
|
||
<p>该彩票类型的开奖信息查询功能正在开发中，敬请期待！</p>
|
||
<div class="tip-actions">
|
||
<button class="tip-button" @click="hideTip">我知道了</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'LotteryInfo',
|
||
data() {
|
||
return {
|
||
showTip: false
|
||
}
|
||
},
|
||
methods: {
|
||
goToShuangseqiu() {
|
||
// 这里可以跳转到双色球开奖信息页面
|
||
this.$router.push('/lottery-info/ssq')
|
||
},
|
||
goToDaletou() {
|
||
// 跳转到大乐透开奖信息页面
|
||
this.$router.push('/lottery-info/dlt')
|
||
},
|
||
showDevelopingTip() {
|
||
this.showTip = true
|
||
},
|
||
hideTip() {
|
||
this.showTip = false
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.lottery-info-page {
|
||
min-height: calc(100vh - 70px);
|
||
background: #f5f5f5;
|
||
overflow-x: hidden;
|
||
padding-top: 16px; /* 顶部添加一些间距，因为没有banner */
|
||
}
|
||
|
||
/* 公告区域 */
|
||
.notice-section {
|
||
background: #e6f7ff;
|
||
border: 1px solid #91d5ff;
|
||
margin: 16px;
|
||
padding: 8px 8px;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.notice-icon {
|
||
font-size: 16px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.notice-text {
|
||
font-size: 14px;
|
||
color: #1890ff;
|
||
flex: 1;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* 彩票区域 */
|
||
.lottery-section {
|
||
margin: 16px;
|
||
margin-bottom: 24px;
|
||
width: calc(100% - 32px);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin: 0 0 16px 0;
|
||
padding-left: 4px;
|
||
}
|
||
|
||
.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: #1890ff;
|
||
}
|
||
|
||
.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.5);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 9999;
|
||
backdrop-filter: blur(4px);
|
||
}
|
||
|
||
.tip-content {
|
||
background: white;
|
||
border-radius: 16px;
|
||
padding: 30px;
|
||
max-width: 380px;
|
||
width: 90%;
|
||
text-align: center;
|
||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||
animation: modalSlideIn 0.3s ease-out;
|
||
border: 2px solid rgba(24, 144, 255, 0.1);
|
||
}
|
||
|
||
.tip-icon {
|
||
width: 64px;
|
||
height: 64px;
|
||
margin: 0 auto 20px auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: linear-gradient(135deg, #1890ff, #40a9ff);
|
||
border-radius: 50%;
|
||
box-shadow: 0 8px 24px rgba(24, 144, 255, 0.3);
|
||
}
|
||
|
||
.developing-icon {
|
||
width: 32px;
|
||
height: 32px;
|
||
color: white;
|
||
}
|
||
|
||
.tip-content h3 {
|
||
color: #333;
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.tip-content p {
|
||
color: #666;
|
||
font-size: 16px;
|
||
line-height: 1.5;
|
||
margin-bottom: 25px;
|
||
}
|
||
|
||
.tip-actions {
|
||
display: flex;
|
||
gap: 15px;
|
||
justify-content: center;
|
||
}
|
||
|
||
.tip-button {
|
||
padding: 12px 24px;
|
||
border-radius: 8px;
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
border: none;
|
||
transition: all 0.3s ease;
|
||
min-width: 100px;
|
||
background: linear-gradient(135deg, #1890ff, #40a9ff);
|
||
color: white;
|
||
box-shadow: 0 4px 15px rgba(24, 144, 255, 0.3);
|
||
}
|
||
|
||
.tip-button:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 20px rgba(24, 144, 255, 0.4);
|
||
}
|
||
|
||
@keyframes modalSlideIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(-30px) scale(0.9);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.lottery-info-page {
|
||
padding-top: 12px;
|
||
}
|
||
|
||
.lottery-section {
|
||
margin: 12px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 16px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.lottery-info-page {
|
||
padding-top: 8px;
|
||
}
|
||
|
||
.tip-content {
|
||
padding: 25px 20px;
|
||
margin: 0 15px;
|
||
}
|
||
|
||
.tip-icon {
|
||
width: 56px;
|
||
height: 56px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.developing-icon {
|
||
width: 28px;
|
||
height: 28px;
|
||
}
|
||
|
||
.tip-content h3 {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.tip-content p {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.tip-actions {
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.tip-button {
|
||
width: 100%;
|
||
padding: 14px 20px;
|
||
}
|
||
|
||
.notice-section {
|
||
margin: 12px;
|
||
padding: 8px 8px 8px 8px;
|
||
}
|
||
|
||
.notice-text {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.lottery-section {
|
||
margin: 8px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 15px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.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;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 16px;
|
||
margin-bottom: 12px;
|
||
}
|
||
}
|
||
|
||
/* 桌面端样式 */
|
||
@media (min-width: 1024px) {
|
||
.lottery-info-page {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 20px 20px 0 20px;
|
||
}
|
||
|
||
.lottery-section {
|
||
margin: 24px 40px 32px 40px;
|
||
padding-right: 16px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 22px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
</style> |