liwq/bocai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化项目

Browse Source
This commit is contained in:
liwq
2026-01-20 11:26:14 +08:00
parent 1286366bbc
commit 078f1cd7db
6 changed files with 692 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

458
frontend/src/components/LotteryResults.vue Normal file
View File

@@ -0,0 +1,458 @@
<template>
<div class="lottery-container">
<!-- 顶部导航栏 -->
<header class="lottery-header">
</header>
<!-- 主要内容区域 -->
<div class="main-content">
<!-- 左侧用户信息面板 -->
<aside class="user-panel">
<div class="panel-section">
<h3>账户信息</h3>
<div class="user-info">
<div class="info-item">
<span class="label">账户:</span>
<span class="value">pmk1 (VIP)</span>
</div>
<div class="info-item">
<span class="label">快开码:</span>
<span class="value">4701262635</span>
</div>
<div class="info-item">
<span class="label">余额:</span>
<span class="value">125.7</span>
</div>
</div>
</div>
<div class="panel-section">
<h3>开奖明细</h3>
<div class="lottery-details">
<div class="detail-item">
<span class="label">期号:</span>
<span class="value">20200114</span>
</div>
<div class="detail-item">
<span class="label">开奖号码:</span>
<div class="winning-numbers">
<div class="ball red">5</div>
<div class="ball green">8</div>
<div class="ball blue">7</div>
<div class="ball yellow">9</div>
<div class="ball purple">2</div>
<div class="ball pink">3</div>
</div>
</div>
</div>
</div>
</aside>
<!-- 右侧开奖结果表格 -->
<div class="results-section">
<div class="section-header">
<div class="header-controls">
<div class="filter">
<label>期数:</label>
<select>
<option>1~10</option>
</select>
</div>
<div class="filter">
<label>玩法:</label>
<select>
<option>总和值</option>
</select>
</div>
</div>
</div>
<div class="results-table-container">
<table class="results-table">
<thead>
<tr>
<th>期号</th>
<th>日期</th>
<th>开奖时间</th>
<th>开奖号码</th>
<th>冠亚和</th>
<th>冠亚军</th>
<th>2串</th>
<th>4串</th>
<th>大小</th>
<th>龙虎</th>
<th>1~5尾</th>
</tr>
</thead>
<tbody>
<tr v-for="result in lotteryResults" :key="result.issue">
<td>{{ result.issue }}</td>
<td>{{ result.date }}</td>
<td>{{ result.time }}</td>
<td class="numbers-column">
<div class="ball" v-for="(number, index) in result.numbers" :key="index" :class="getBallColorClass(index)">
{{ number }}
</div>
</td>
<td>{{ result.sum }}</td>
<td>{{ result.firstSecondSum }}</td>
<td>{{ result.twoSeries }}</td>
<td>{{ result.fourSeries }}</td>
<td>{{ result.size }}</td>
<td>{{ result.dragonTiger }}</td>
<td class="tails-column">
<div class="tail" v-for="(tail, index) in result.tails" :key="index" :class="getTailClass(tail)">
{{ tail }}
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'LotteryResults',
data() {
return {
lotteryResults: []
}
},
mounted() {
// 页面加载时从后端获取彩票开奖结果数据
this.fetchLotteryResults();
},
methods: {
async fetchLotteryResults() {
try {
const response = await fetch('http://localhost:8080/api/lottery/results');
if (response.ok) {
this.lotteryResults = await response.json();
} else {
console.error('获取数据失败:', response.status);
// 如果后端没有数据，使用模拟数据
this.useMockData();
}
} catch (error) {
console.error('获取数据时发生错误:', error);
// 如果连接后端失败，使用模拟数据
this.useMockData();
}
},
useMockData() {
// 使用模拟数据
this.lotteryResults = [
{
issue: '202001214',
date: '2020-01-21',
time: '15:10:00',
numbers: ['5', '8', '7', '9', '2', '3', '1', '10', '12', '4', '6', '11'],
sum: '62',
firstSecondSum: '33',
twoSeries: '22',
fourSeries: '',
size: '大',
dragonTiger: '龙',
tails: ['虎', '龙', '虎', '虎', '龙']
},
{
issue: '202001213',
date: '2020-01-21',
time: '15:05:00',
numbers: ['8', '3', '7', '9', '5', '4', '6', '10', '12', '1', '2', '11'],
sum: '67',
firstSecondSum: '32',
twoSeries: '22',
fourSeries: '',
size: '大',
dragonTiger: '龙',
tails: ['虎', '龙', '虎', '虎', '龙']
},
{
issue: '202001212',
date: '2020-01-21',
time: '15:00:00',
numbers: ['2', '8', '10', '11', '9', '12', '5', '3', '7', '4', '6', '1'],
sum: '67',
firstSecondSum: '32',
twoSeries: '22',
fourSeries: '',
size: '大',
dragonTiger: '龙',
tails: ['虎', '龙', '虎', '虎', '龙']
}
];
},
getBallColorClass(index) {
// 根据号码位置返回不同的颜色类
const colors = ['blue', 'red', 'green', 'yellow', 'purple', 'pink', 'orange', 'cyan', 'magenta', 'lime', 'teal', 'indigo'];
return colors[index % colors.length];
},
getTailClass(tail) {
// 根据龙虎返回不同的颜色类
return tail === '龙' ? 'dragon' : 'tiger';
}
}
}
</script>
<style scoped>
.lottery-container {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
height: 100vh;
}
/* 顶部导航栏样式 */
.lottery-header {
background-color: #1a73e8;
color: white;
}
.header-top {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
}
.logo {
font-size: 24px;
font-weight: bold;
}
.nav-tabs {
display: flex;
gap: 20px;
}
.tab {
padding: 8px 12px;
cursor: pointer;
border-radius: 4px;
}
.tab:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.header-right {
display: flex;
gap: 10px;
}
.btn-settings, .btn-exit {
background-color: transparent;
color: white;
border: 1px solid white;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
}
.btn-settings:hover, .btn-exit:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.header-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 20px;
background-color: #1557b0;
}
.sub-tabs {
display: flex;
gap: 15px;
}
.sub-tab {
padding: 6px 10px;
cursor: pointer;
border-radius: 4px;
}
.sub-tab:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.sub-tab.active {
background-color: rgba(255, 255, 255, 0.3);
font-weight: bold;
}
.btn-settings.small {
padding: 4px 8px;
font-size: 12px;
}
/* 主要内容区域 */
.main-content {
display: flex;
flex: 1;
overflow: hidden;
}
/* 左侧用户信息面板 */
.user-panel {
width: 200px;
background-color: #f5f5f5;
border-right: 1px solid #ddd;
padding: 15px;
overflow-y: auto;
}
.panel-section {
margin-bottom: 20px;
}
.panel-section h3 {
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
color: #333;
}
.info-item, .detail-item {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
font-size: 12px;
}
.label {
color: #666;
}
.value {
color: #333;
font-weight: bold;
}
.winning-numbers {
display: flex;
gap: 5px;
}
/* 右侧开奖结果表格 */
.results-section {
flex: 1;
padding: 15px;
overflow-y: auto;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.section-header h2 {
font-size: 18px;
font-weight: bold;
color: #333;
}
.header-controls {
display: flex;
gap: 15px;
}
.filter {
display: flex;
align-items: center;
gap: 5px;
font-size: 12px;
}
.filter select {
padding: 4px 6px;
border: 1px solid #ddd;
border-radius: 3px;
}
/* 开奖结果表格 */
.results-table-container {
overflow-x: auto;
}
.results-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
.results-table th, .results-table td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
.results-table th {
background-color: #f5f5f5;
font-weight: bold;
color: #333;
}
.results-table tr:nth-child(even) {
background-color: #f9f9f9;
}
/* 号码球样式 */
.ball {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 10px;
font-weight: bold;
margin: 1px;
}
.numbers-column {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.ball.blue { background-color: #1a73e8; }
.ball.red { background-color: #ea4335; }
.ball.green { background-color: #34a853; }
.ball.yellow { background-color: #fbbc05; }
.ball.purple { background-color: #9c27b0; }
.ball.pink { background-color: #e91e63; }
.ball.orange { background-color: #ff9800; }
.ball.cyan { background-color: #00bcd4; }
.ball.magenta { background-color: #ff00ff; }
.ball.lime { background-color: #00ff00; }
.ball.teal { background-color: #009688; }
.ball.indigo { background-color: #3f51b5; }
/* 龙虎样式 */
.tails-column {
display: flex;
justify-content: center;
gap: 5px;
}
.tail {
padding: 2px 6px;
border-radius: 3px;
font-size: 10px;
font-weight: bold;
}
.tail.dragon { background-color: #ea4335; color: white; }
.tail.tiger { background-color: #1a73e8; color: white; }
</style>