lihanqi/cpzs-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

彩票助手版本1.0

Browse Source
This commit is contained in:
lihanqi
2025-08-01 19:03:57 +08:00
commit 653e84562f
94 changed files with 26389 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

610
lottery-app/src/views/LotterySelection.vue Normal file
View File

@@ -0,0 +1,610 @@
<template>
<div class="lottery-selection">
<!-- 顶部标题区域 -->
<div class="header">
<div class="header-content">
<div class="page-title">
<h1>彩票智能猪手</h1>
<p class="subtitle">专业算法，智能推荐，提升体验</p>
</div>
</div>
</div>
<!-- 彩票种类选择区域 -->
<div class="lottery-types">
<h2 class="section-title">选择彩票种类</h2>
<div class="lottery-container">
<!-- 左侧：中国福彩 -->
<div class="lottery-section">
<h3 class="section-subtitle">中国福彩</h3>
<div class="lottery-column">
<!-- 双色球 -->
<div class="lottery-item available" @click="goToShuangseqiu">
<div class="lottery-image">
<img src="@/assets/shuangseqiu.png" alt="双色球" />
</div>
<div class="lottery-name">双色球</div>
<div class="status-tag available-tag">可用</div>
</div>
<!-- 快乐8 -->
<div class="lottery-item disabled" @click="showDevelopingTip">
<div class="lottery-image">
<img src="@/assets/kuaile8.png" alt="快乐8" />
</div>
<div class="lottery-name">快乐8</div>
<div class="status-tag developing-tag">即将开放</div>
</div>
<!-- 福彩3D -->
<div class="lottery-item disabled" @click="showDevelopingTip">
<div class="lottery-image">
<img src="@/assets/3D.png" alt="福彩3D" />
</div>
<div class="lottery-name">福彩3D</div>
<div class="status-tag developing-tag">即将开放</div>
</div>
<!-- 七乐彩 -->
<div class="lottery-item disabled" @click="showDevelopingTip">
<div class="lottery-image">
<img src="@/assets/7lecai.png" alt="七乐彩" />
</div>
<div class="lottery-name">七乐彩</div>
<div class="status-tag developing-tag">即将开放</div>
</div>
</div>
</div>
<!-- 分隔线 -->
<div class="divider"></div>
<!-- 右侧：中国体彩 -->
<div class="lottery-section">
<h3 class="section-subtitle">中国体彩</h3>
<div class="lottery-column">
<!-- 超级大乐透 -->
<div class="lottery-item disabled" @click="showDevelopingTip">
<div class="lottery-image">
<img src="@/assets/daletou.png" alt="超级大乐透" />
</div>
<div class="lottery-name">超级大乐透</div>
<div class="status-tag developing-tag">即将开放</div>
</div>
<!-- 排列3 -->
<div class="lottery-item disabled" @click="showDevelopingTip">
<div class="lottery-image">
<img src="@/assets/pailie3.png" alt="排列3" />
</div>
<div class="lottery-name">排列3</div>
<div class="status-tag developing-tag">即将开放</div>
</div>
<!-- 排列5 -->
<div class="lottery-item disabled" @click="showDevelopingTip">
<div class="lottery-image">
<img src="@/assets/pailie5.png" alt="排列5" />
</div>
<div class="lottery-name">排列5</div>
<div class="status-tag developing-tag">即将开放</div>
</div>
<!-- 七星彩 -->
<div class="lottery-item disabled" @click="showDevelopingTip">
<div class="lottery-image">
<img src="@/assets/7星彩.png" alt="七星彩" />
</div>
<div class="lottery-name">七星彩</div>
<div class="status-tag developing-tag">即将开放</div>
</div>
</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>
</template>
<script>
export default {
name: 'LotterySelection',
data() {
return {
showTip: false
}
},
methods: {
goToShuangseqiu() {
this.$router.push('/shuangseqiu')
},
showDevelopingTip() {
this.showTip = true
},
hideTip() {
this.showTip = false
}
}
}
</script>
<style scoped>
.lottery-selection {
min-height: 100vh;
background: #f0f2f5;
padding: 20px;
padding-bottom: 30px; /* 增加底部边距 */
}
.header {
background: url('@/assets/banner/backend1.png') center/cover no-repeat, linear-gradient(135deg, #ff6b6b, #ee5a52);
color: white;
padding: 45px 20px 25px;
text-align: center;
position: relative;
margin-bottom: 20px;
border-radius: 8px;
}
.header-content {
max-width: 900px;
margin: 0 auto;
}
.page-title {
margin: 0;
text-align: center;
}
.page-title h1 {
font-size: 38px;
margin: 0 auto 10px;
font-weight: 700;
color: white;
text-shadow: 0 2px 6px rgba(0,0,0,0.7), 0 0 15px rgba(0,0,0,0.4);
letter-spacing: 2px;
text-align: center;
width: 100%;
}
.page-title p {
font-size: 22px;
opacity: 0.9;
color: white;
text-shadow: 0 2px 6px rgba(0,0,0,0.7), 0 0 15px rgba(0,0,0,0.4);
text-align: center;
width: 100%;
margin: 0 auto;
font-weight: 500;
}
.subtitle {
font-size: 16px;
margin: 0;
opacity: 1;
text-shadow: 0 2px 6px rgba(0,0,0,0.7), 0 0 15px rgba(0,0,0,0.4);
color: white;
font-weight: 500;
}
.lottery-types {
padding: 30px 20px 20px; /* 减少底部padding从40px到20px */
max-width: 900px;
margin: 0 auto;
background: white;
border-radius: 8px; /* 添加圆角 */
box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* 添加轻微阴影效果 */
border: 1px solid #f0f0f0; /* 添加边框 */
}
.section-title {
text-align: center;
color: #333;
font-size: 20px;
margin-bottom: 25px;
font-weight: 600;
}
.lottery-container {
display: flex;
justify-content: space-between;
max-width: 800px;
margin: 0 auto;
background: white;
border-radius: 16px;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
border: 1px solid #f0f0f0;
overflow: hidden;
}
.lottery-section {
flex: 1; /* 使类别占据相等宽度 */
padding: 20px 15px;
transition: all 0.3s ease;
position: relative;
display: flex;
flex-direction: column;
}
.section-subtitle {
text-align: center;
color: #333;
font-size: 18px;
margin-bottom: 20px;
font-weight: 600;
padding-bottom: 10px;
border-bottom: 1px solid #f0f0f0;
}
.lottery-column {
display: flex;
flex-direction: column;
gap: 20px; /* 在列中添加间距 */
flex: 1;
}
.lottery-item {
background: white;
border-radius: 12px;
padding: 25px 15px;
text-align: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
transition: all 0.3s ease;
position: relative;
cursor: pointer;
width: 280px;
min-height: 180px;
border: 1px solid #f0f0f0;
margin: 0 auto;
}
.lottery-item.available:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}
.lottery-item.disabled {
opacity: 0.7;
}
.lottery-item.disabled:hover {
transform: translateY(-1px);
}
.lottery-image {
width: 90px;
height: 90px;
margin: 0 auto 15px;
border-radius: 12px;
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
}
.lottery-image img {
width: 100%;
height: auto;
max-height: 100%;
object-fit: contain;
}
.placeholder-icon {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 18px;
border-radius: 12px;
}
.lottery-name {
font-size: 17px;
font-weight: 600;
color: #333;
margin-bottom: 8px;
}
.status-tag {
font-size: 12px;
padding: 4px 10px;
border-radius: 12px;
font-weight: 500;
}
.available-tag {
background: #e8f5e8;
color: #2e7d32;
}
.developing-tag {
background: #fff3e0;
color: #f57c00;
}
.divider {
width: 1px;
align-self: stretch;
background-color: #f0f0f0;
}
.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: 20px;
padding: 40px 30px;
text-align: center;
max-width: 320px;
width: 100%;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.tip-icon {
font-size: 48px;
margin-bottom: 20px;
}
.tip-content h3 {
font-size: 22px;
color: #333;
margin: 0 0 15px 0;
font-weight: 600;
}
.tip-content p {
color: #666;
font-size: 16px;
line-height: 1.5;
margin: 0 0 25px 0;
}
.tip-button {
background: linear-gradient(135deg, #ff6b6b, #ee5a52);
color: white;
border: none;
padding: 12px 30px;
border-radius: 25px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.tip-button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3);
}
.tip-button:active {
transform: translateY(0);
}
/* 响应式设计 */
@media (max-width: 768px) {
.lottery-selection {
padding: 10px;
padding-bottom: 20px; /* 保持底部边距 */
}
.header {
padding: 45px 15px 35px;
}
.page-title {
margin: 0 0 8px 0;
}
.page-title h1 {
font-size: 32px;
margin-bottom: 5px;
}
.page-title p {
font-size: 20px;
}
.subtitle {
font-size: 14px;
}
.lottery-container {
flex-direction: column; /* 在移动端堆叠类别 */
gap: 0; /* 类别之间的间距 */
}
.lottery-section {
width: 100%;
max-width: none; /* 移除最大宽度限制 */
padding: 15px;
}
.section-subtitle {
font-size: 16px;
margin-bottom: 15px;
padding-bottom: 8px;
}
.lottery-column {
gap: 15px; /* 列中的间距 */
}
.lottery-item {
width: 100%;
max-width: none; /* 移除最大宽度限制 */
min-height: auto; /* 自适应高度 */
padding: 12px;
display: flex;
align-items: center;
text-align: left;
margin: 0;
}
.lottery-image {
width: 60px;
height: 60px;
margin: 0 12px 0 0;
overflow: visible;
}
.lottery-name {
font-size: 15px;
margin-bottom: 4px;
}
.status-tag {
font-size: 11px;
padding: 3px 8px;
}
.divider {
width: 100%;
height: 1px;
margin: 0;
}
}
@media (max-width: 480px) {
.header {
padding: 40px 12px 30px;
}
.page-title {
margin: 0 0 6px 0;
}
.page-title h1 {
font-size: 28px;
margin-bottom: 3px;
}
.page-title p {
font-size: 18px;
}
.subtitle {
font-size: 13px;
}
.lottery-types {
padding: 15px 12px 20px; /* 减少左右padding */
}
.section-title {
font-size: 16px;
margin-bottom: 15px;
}
.lottery-container {
flex-direction: column; /* 在移动端堆叠类别 */
gap: 0; /* 无间距，使用分隔线 */
}
.lottery-section {
width: 100%;
max-width: none; /* 移除最大宽度限制 */
padding: 12px 10px;
}
.section-subtitle {
font-size: 15px;
margin-bottom: 12px;
padding-bottom: 6px;
}
.lottery-column {
gap: 10px; /* 减少列中的间距 */
}
.lottery-item {
width: 100%;
min-height: auto; /* 自适应高度 */
padding: 10px 8px;
margin: 0;
display: flex;
align-items: center;
text-align: left;
}
.lottery-image {
width: 50px;
height: 50px;
margin: 0 10px 0 0;
overflow: visible;
}
.lottery-name {
font-size: 14px;
margin-bottom: 2px;
font-weight: 600;
}
.status-tag {
font-size: 10px;
padding: 2px 6px;
}
.divider {
width: 100%;
height: 1px;
margin: 0;
}
.tip-overlay {
padding: 15px;
}
.tip-content {
padding: 25px 15px;
}
.tip-content h3 {
font-size: 18px;
}
.tip-content p {
font-size: 13px;
}
}
/* 桌面端样式 */
@media (min-width: 1024px) {
.header {
padding: 40px 20px 30px;
}
.page-title h1 {
font-size: 42px;
margin-bottom: 10px;
}
.page-title p {
font-size: 24px;
}
}
</style>