初始提交：彩票推测系统前端代码
This commit is contained in:
lihanqi
913
src/views/dlt/SurfaceAnalysis.vue
Normal file
913
src/views/dlt/SurfaceAnalysis.vue
Normal file
@@ -0,0 +1,913 @@
|
||||
<template>
|
||||
<div class="surface-analysis">
|
||||
<div class="header">
|
||||
<!-- 返回按钮 -->
|
||||
<div class="back-button-container">
|
||||
<el-button @click="goBack" icon="ArrowLeft" size="medium">
|
||||
返回
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<h2>组合性分析</h2>
|
||||
<p>号球组合分析，探寻左姻右缘</p>
|
||||
</div>
|
||||
|
||||
<!-- 分析类型选择 -->
|
||||
<div class="analysis-buttons">
|
||||
<el-card
|
||||
class="analysis-card"
|
||||
:class="{ active: analysisType === 'front-front' }"
|
||||
@click="selectAnalysisType('front-front')"
|
||||
shadow="hover"
|
||||
>
|
||||
<div class="btn-icon">
|
||||
<el-avatar class="red-ball-icon"></el-avatar>
|
||||
<el-avatar class="red-ball-icon"></el-avatar>
|
||||
</div>
|
||||
<div class="btn-text">
|
||||
<div class="btn-title">前区与前区</div>
|
||||
<div class="btn-desc">前区组合分析</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card
|
||||
class="analysis-card"
|
||||
:class="{ active: analysisType === 'front-back' }"
|
||||
@click="selectAnalysisType('front-back')"
|
||||
shadow="hover"
|
||||
>
|
||||
<div class="btn-icon">
|
||||
<el-avatar class="red-ball-icon"></el-avatar>
|
||||
<el-avatar class="blue-ball-icon"></el-avatar>
|
||||
</div>
|
||||
<div class="btn-text">
|
||||
<div class="btn-title">前区与后区</div>
|
||||
<div class="btn-desc">前后组合分析</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card
|
||||
class="analysis-card"
|
||||
:class="{ active: analysisType === 'back-back' }"
|
||||
@click="selectAnalysisType('back-back')"
|
||||
shadow="hover"
|
||||
>
|
||||
<div class="btn-icon">
|
||||
<el-avatar class="blue-ball-icon"></el-avatar>
|
||||
<el-avatar class="blue-ball-icon"></el-avatar>
|
||||
</div>
|
||||
<div class="btn-text">
|
||||
<div class="btn-title">后区与后区</div>
|
||||
<div class="btn-desc">后区组合分析</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card
|
||||
class="analysis-card"
|
||||
:class="{ active: analysisType === 'back-front' }"
|
||||
@click="selectAnalysisType('back-front')"
|
||||
shadow="hover"
|
||||
>
|
||||
<div class="btn-icon">
|
||||
<el-avatar class="blue-ball-icon"></el-avatar>
|
||||
<el-avatar class="red-ball-icon"></el-avatar>
|
||||
</div>
|
||||
<div class="btn-text">
|
||||
<div class="btn-title">后区与前区</div>
|
||||
<div class="btn-desc">后前组合分析</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 号码选择和分析区域 -->
|
||||
<el-card v-if="analysisType" class="analysis-container" shadow="never">
|
||||
<el-alert
|
||||
v-if="selectionError"
|
||||
:title="selectionError"
|
||||
type="warning"
|
||||
show-icon
|
||||
@close="selectionError = null"
|
||||
style="margin-bottom: 20px;"
|
||||
/>
|
||||
<div class="number-selection">
|
||||
<h3>{{ getSelectionTitle() }}</h3>
|
||||
|
||||
<!-- 主球选择 -->
|
||||
<div class="ball-selection-group">
|
||||
<el-divider>{{ getMasterBallLabel() }}</el-divider>
|
||||
<div class="ball-grid">
|
||||
<el-button
|
||||
v-for="num in getMasterBallRange()"
|
||||
:key="'master-' + num"
|
||||
:class="{
|
||||
active: masterBall === num,
|
||||
'red-ball': isMasterFront(),
|
||||
'blue-ball': !isMasterFront()
|
||||
}"
|
||||
:type="masterBall === num ? 'primary' : 'default'"
|
||||
:plain="masterBall !== num"
|
||||
circle
|
||||
@click="selectMasterBall(num)"
|
||||
>
|
||||
{{ num }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 随球选择 -->
|
||||
<div class="ball-selection-group">
|
||||
<el-divider>{{ getSlaveBallLabel() }}</el-divider>
|
||||
<div class="ball-grid">
|
||||
<el-button
|
||||
v-for="num in getSlaveBallRange()"
|
||||
:key="'slave-' + num"
|
||||
:class="{
|
||||
active: slaveBall === num,
|
||||
'red-ball': isSlaveFront(),
|
||||
'blue-ball': !isSlaveFront()
|
||||
}"
|
||||
:type="slaveBall === num ? 'primary' : 'default'"
|
||||
:plain="slaveBall !== num"
|
||||
circle
|
||||
@click="selectSlaveBall(num)"
|
||||
>
|
||||
{{ num }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分析按钮 -->
|
||||
<div class="analyze-section">
|
||||
<el-button
|
||||
type="success"
|
||||
size="large"
|
||||
round
|
||||
:disabled="!canAnalyze || loading"
|
||||
:loading="loading"
|
||||
@click="performAnalysis"
|
||||
>
|
||||
{{ loading ? '分析中...' : '开始分析' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分析结果 -->
|
||||
<div v-if="result !== null || error" class="result-container">
|
||||
<el-alert
|
||||
v-if="error"
|
||||
:title="error"
|
||||
type="error"
|
||||
show-icon
|
||||
:closable="false"
|
||||
style="margin-bottom: 20px;"
|
||||
>
|
||||
<template #default>
|
||||
<el-button @click="clearError" type="primary" size="small">重试</el-button>
|
||||
</template>
|
||||
</el-alert>
|
||||
|
||||
<el-result
|
||||
v-else-if="result !== null"
|
||||
icon="success"
|
||||
title="组合性分析结果"
|
||||
>
|
||||
<template #extra>
|
||||
<div class="result-details">
|
||||
|
||||
<div class="table-wrapper">
|
||||
<div class="table-title-row">
|
||||
<div class="table-title-cell">
|
||||
<span class="highlight-ball" :class="{ 'blue-text': !isMasterFront() }">{{masterBall}}</span>号{{isMasterFront() ? '前区' : '后区'}}球与<span class="highlight-ball" :class="{ 'blue-text': !isSlaveFront() }">{{slaveBall}}</span>号{{isSlaveFront() ? '前区' : '后区'}}球组合性分析报告
|
||||
</div>
|
||||
</div>
|
||||
<table class="analysis-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="label-cell">引用数据截至</td>
|
||||
<td class="value-cell">{{resultData[0]?.latestDrawId || '-'}}期</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label-cell">两号组合系数</td>
|
||||
<td class="value-cell">{{resultData[0]?.faceCoefficient || '-'}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label-cell">同号组最高系数球号及系数</td>
|
||||
<td class="value-cell">
|
||||
<span class="highlight-ball" :class="{ 'blue-text': !isSlaveFront() }">{{resultData[0]?.highestBall || '--'}}</span>
|
||||
<span class="coefficient-value">{{resultData[0]?.highestCoefficient || '-'}}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label-cell">同号组最低系数球号及系数</td>
|
||||
<td class="value-cell">
|
||||
<span class="highlight-ball" :class="{ 'blue-text': !isSlaveFront() }">{{resultData[0]?.lowestBall || '--'}}</span>
|
||||
<span class="coefficient-value">{{resultData[0]?.lowestCoefficient || '-'}}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label-cell">同号组平均系数</td>
|
||||
<td class="value-cell">{{ (resultData[0]?.averageCoefficient && Number(resultData[0].averageCoefficient).toFixed(2)) || '-' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label-cell">建议</td>
|
||||
<td class="value-cell recommendation">
|
||||
系数越高表示该此组合概率较高，高于平均系数的组合更值得关注。同时，可尝试寻找关联组合与交叉组合的共性规律。
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<el-button type="primary" @click="resetAnalysis">重新分析</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-result>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 使用说明 -->
|
||||
<el-card v-if="!analysisType" class="instruction-container" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span><el-icon><InfoFilled /></el-icon> 组合性分析说明</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-collapse accordion>
|
||||
<el-collapse-item title="前区与前区分析" name="front-front">
|
||||
<div class="collapse-content">
|
||||
<p>分析两个前区球号码之间的组合关系，计算前区配对的组合系数</p>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="前区与后区分析" name="front-back">
|
||||
<div class="collapse-content">
|
||||
<p>分析前区与后区球号码的组合关系，计算前后配对的组合系数</p>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="后区与后区分析" name="back-back">
|
||||
<div class="collapse-content">
|
||||
<p>分析两个后区球号码之间的组合关系，计算后区配对的组合系数</p>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="后区与前区分析" name="back-front">
|
||||
<div class="collapse-content">
|
||||
<p>分析后区与前区球号码的组合关系，计算后前配对的组合系数</p>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
|
||||
<el-alert
|
||||
type="info"
|
||||
show-icon
|
||||
:closable="false"
|
||||
style="margin-top: 20px;"
|
||||
>
|
||||
<template #title>
|
||||
<span>选择分析类型后，依次选择主球和随球号码，点击"开始分析"获取组合系数值</span>
|
||||
</template>
|
||||
</el-alert>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { dltLotteryApi } from '@/api/dlt'
|
||||
import {
|
||||
ElButton,
|
||||
ElCard,
|
||||
ElAvatar,
|
||||
ElDivider,
|
||||
ElAlert,
|
||||
ElResult,
|
||||
ElTag,
|
||||
ElStatistic,
|
||||
ElTooltip,
|
||||
ElIcon,
|
||||
ElCollapse,
|
||||
ElCollapseItem,
|
||||
ElTable,
|
||||
ElTableColumn
|
||||
} from 'element-plus'
|
||||
import { ArrowLeft, InfoFilled } from '@element-plus/icons-vue'
|
||||
|
||||
export default {
|
||||
name: 'DltSurfaceAnalysis',
|
||||
components: {
|
||||
ElButton,
|
||||
ElCard,
|
||||
ElAvatar,
|
||||
ElDivider,
|
||||
ElAlert,
|
||||
ElResult,
|
||||
ElTag,
|
||||
ElStatistic,
|
||||
ElTooltip,
|
||||
ElIcon,
|
||||
ElCollapse,
|
||||
ElCollapseItem,
|
||||
ElTable,
|
||||
ElTableColumn,
|
||||
InfoFilled
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
analysisType: '', // 'front-front', 'front-back', 'back-back', 'back-front'
|
||||
masterBall: null,
|
||||
slaveBall: null,
|
||||
loading: false,
|
||||
result: null,
|
||||
error: null,
|
||||
selectionError: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
canAnalyze() {
|
||||
return this.masterBall !== null && this.slaveBall !== null && this.analysisType
|
||||
},
|
||||
|
||||
resultData() {
|
||||
if (!this.result) return [];
|
||||
|
||||
try {
|
||||
const data = typeof this.result === 'string' ? JSON.parse(this.result) : this.result;
|
||||
|
||||
return [{
|
||||
latestDrawId: data.latestDrawId || '',
|
||||
faceCoefficient: data.faceCoefficient || 0,
|
||||
highestCoefficient: data.highestCoefficient || 0,
|
||||
lowestCoefficient: data.lowestCoefficient || 0,
|
||||
averageCoefficient: data.averageCoefficient || 0,
|
||||
highestBall: data.highestBall || '-',
|
||||
lowestBall: data.lowestBall || '-'
|
||||
}];
|
||||
} catch (e) {
|
||||
console.error('解析结果数据失败', e);
|
||||
return [{
|
||||
latestDrawId: '',
|
||||
faceCoefficient: 0,
|
||||
highestCoefficient: 0,
|
||||
lowestCoefficient: 0,
|
||||
averageCoefficient: 0,
|
||||
highestBall: '-',
|
||||
lowestBall: '-'
|
||||
}];
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 返回上一页
|
||||
goBack() {
|
||||
// 获取当前彩票类型，优先使用路由参数，否则使用默认值 'dlt'
|
||||
const lotteryType = this.$route.query.lotteryType || 'dlt'
|
||||
this.$router.push({
|
||||
path: '/data-analysis',
|
||||
query: { lotteryType: lotteryType }
|
||||
})
|
||||
},
|
||||
|
||||
selectAnalysisType(type) {
|
||||
this.analysisType = type
|
||||
this.masterBall = null
|
||||
this.slaveBall = null
|
||||
this.result = null
|
||||
this.error = null
|
||||
this.selectionError = null
|
||||
},
|
||||
|
||||
getSelectionTitle() {
|
||||
const titles = {
|
||||
'front-front': '前区与前区组合分析（不能重复）',
|
||||
'front-back': '前区与后区组合分析',
|
||||
'back-back': '后区与后区组合分析（不能重复）',
|
||||
'back-front': '后区与前区组合分析'
|
||||
}
|
||||
return titles[this.analysisType] || ''
|
||||
},
|
||||
|
||||
getMasterBallLabel() {
|
||||
const labels = {
|
||||
'front-front': '主球（前区）',
|
||||
'front-back': '主球（前区）',
|
||||
'back-back': '主球（后区）',
|
||||
'back-front': '主球（后区）'
|
||||
}
|
||||
return labels[this.analysisType] || ''
|
||||
},
|
||||
|
||||
getSlaveBallLabel() {
|
||||
const labels = {
|
||||
'front-front': '随球（前区）',
|
||||
'front-back': '随球（后区）',
|
||||
'back-back': '随球（后区）',
|
||||
'back-front': '随球（前区）'
|
||||
}
|
||||
return labels[this.analysisType] || ''
|
||||
},
|
||||
|
||||
getMasterBallRange() {
|
||||
if (this.analysisType === 'back-back' || this.analysisType === 'back-front') {
|
||||
return Array.from({ length: 12 }, (_, i) => i + 1) // 1-12 后区
|
||||
}
|
||||
return Array.from({ length: 35 }, (_, i) => i + 1) // 1-35 前区
|
||||
},
|
||||
|
||||
getSlaveBallRange() {
|
||||
if (this.analysisType === 'front-back' || this.analysisType === 'back-back') {
|
||||
return Array.from({ length: 12 }, (_, i) => i + 1) // 1-12 后区
|
||||
}
|
||||
return Array.from({ length: 35 }, (_, i) => i + 1) // 1-35 前区
|
||||
},
|
||||
|
||||
isMasterFront() {
|
||||
return this.analysisType === 'front-front' || this.analysisType === 'front-back'
|
||||
},
|
||||
|
||||
isSlaveFront() {
|
||||
return this.analysisType === 'front-front' || this.analysisType === 'back-front'
|
||||
},
|
||||
|
||||
selectMasterBall(num) {
|
||||
// 前区与前区、后区与后区不能选择相同号码
|
||||
if ((this.analysisType === 'front-front' || this.analysisType === 'back-back') && num === this.slaveBall) {
|
||||
this.selectionError = '主球和随球不能是同一个号码'
|
||||
return
|
||||
}
|
||||
this.masterBall = num
|
||||
this.result = null
|
||||
this.error = null
|
||||
this.selectionError = null
|
||||
},
|
||||
|
||||
selectSlaveBall(num) {
|
||||
// 前区与前区、后区与后区不能选择相同号码
|
||||
if ((this.analysisType === 'front-front' || this.analysisType === 'back-back') && num === this.masterBall) {
|
||||
this.selectionError = '主球和随球不能是同一个号码'
|
||||
return
|
||||
}
|
||||
this.slaveBall = num
|
||||
this.result = null
|
||||
this.error = null
|
||||
this.selectionError = null
|
||||
},
|
||||
|
||||
async performAnalysis() {
|
||||
if (!this.canAnalyze) return
|
||||
|
||||
this.loading = true
|
||||
this.error = null
|
||||
this.result = null
|
||||
|
||||
try {
|
||||
let response
|
||||
|
||||
switch (this.analysisType) {
|
||||
case 'front-front':
|
||||
response = await dltLotteryApi.frontFrontCombinationAnalysis(this.masterBall, this.slaveBall)
|
||||
break
|
||||
case 'front-back':
|
||||
response = await dltLotteryApi.frontBackCombinationAnalysis(this.masterBall, this.slaveBall)
|
||||
break
|
||||
case 'back-back':
|
||||
response = await dltLotteryApi.backBackCombinationAnalysis(this.masterBall, this.slaveBall)
|
||||
break
|
||||
case 'back-front':
|
||||
response = await dltLotteryApi.backFrontCombinationAnalysis(this.masterBall, this.slaveBall)
|
||||
break
|
||||
}
|
||||
|
||||
if (response.success) {
|
||||
this.result = response.data
|
||||
} else {
|
||||
this.error = response.message || '分析失败'
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('组合系数分析失败:', error)
|
||||
this.error = '网络请求失败，请重试'
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
clearError() {
|
||||
this.error = null
|
||||
},
|
||||
|
||||
resetAnalysis() {
|
||||
this.masterBall = null
|
||||
this.slaveBall = null
|
||||
this.result = null
|
||||
this.error = null
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.surface-analysis {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 返回按钮 */
|
||||
.back-button-container {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.header h2 {
|
||||
color: #2c3e50;
|
||||
font-size: 28px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.header p {
|
||||
color: #7f8c8d;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 分析类型卡片 */
|
||||
.analysis-buttons {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
max-width: 1000px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.analysis-card {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.analysis-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 25px rgba(52, 152, 219, 0.15);
|
||||
border-color: #3498db;
|
||||
}
|
||||
|
||||
.analysis-card.active {
|
||||
background-color: #eaf5ff;
|
||||
border-color: #3498db;
|
||||
box-shadow: 0 8px 25px rgba(52, 152, 219, 0.2);
|
||||
}
|
||||
|
||||
.analysis-card.active :deep(.el-card__body) {
|
||||
background: transparent;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
/* 减少卡片内边距 */
|
||||
:deep(.el-card__body) {
|
||||
padding: 10px !important;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.red-ball-icon {
|
||||
background-color: #e74c3c !important;
|
||||
}
|
||||
|
||||
.blue-ball-icon {
|
||||
background-color: #3498db !important;
|
||||
}
|
||||
|
||||
.btn-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.btn-desc {
|
||||
font-size: 14px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.analysis-card.active .btn-title {
|
||||
color: #2980b9;
|
||||
}
|
||||
|
||||
.analysis-card.active .btn-desc {
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.number-selection {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.number-selection h3 {
|
||||
color: #2c3e50;
|
||||
margin-bottom: 20px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ball-selection-group {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
/* 球号网格 */
|
||||
.ball-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
margin-top: 15px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
/* 前区球（红球）和后区球（蓝球）按钮样式 */
|
||||
:deep(.el-button.red-ball.is-plain:not(.is-disabled)) {
|
||||
color: #e74c3c;
|
||||
border-color: #e74c3c;
|
||||
background-color: #fff5f5;
|
||||
}
|
||||
|
||||
:deep(.el-button.red-ball:not(.is-plain):not(.is-disabled)) {
|
||||
background-color: #e74c3c;
|
||||
border-color: #c0392b;
|
||||
}
|
||||
|
||||
:deep(.el-button.blue-ball.is-plain:not(.is-disabled)) {
|
||||
color: #3498db;
|
||||
border-color: #3498db;
|
||||
background-color: #f0f8ff;
|
||||
}
|
||||
|
||||
:deep(.el-button.blue-ball:not(.is-plain):not(.is-disabled)) {
|
||||
background-color: #3498db;
|
||||
border-color: #2980b9;
|
||||
}
|
||||
|
||||
/* 分析按钮 */
|
||||
.analyze-section {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
/* 结果容器 */
|
||||
.result-container {
|
||||
border-top: 2px solid #ecf0f1;
|
||||
padding: 20px;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
:deep(.el-result) {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.result-details {
|
||||
width: 100%;
|
||||
max-width: 850px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ball-combo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.combo-label {
|
||||
font-size: 16px;
|
||||
color: #2c3e50;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.combo-separator {
|
||||
font-size: 20px;
|
||||
color: #7f8c8d;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ball-tag {
|
||||
padding: 8px 12px;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
border-radius: 50%;
|
||||
min-width: 40px;
|
||||
}
|
||||
|
||||
.coefficient-result {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
:deep(.el-statistic__head) {
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
:deep(.el-statistic__content) {
|
||||
font-size: 24px !important;
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
/* 使用说明 */
|
||||
.instruction-container {
|
||||
max-width: 850px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.collapse-content {
|
||||
padding: 10px;
|
||||
color: #7f8c8d;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
margin: 0 auto 20px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table-title-row {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
.table-title-cell {
|
||||
padding: 8px;
|
||||
font-weight: normal;
|
||||
font-size: 15px;
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
|
||||
.analysis-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border: 1px solid #000;
|
||||
border-top: none;
|
||||
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
|
||||
}
|
||||
|
||||
.analysis-table tr {
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
|
||||
.analysis-table tr:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.label-cell {
|
||||
width: 150px;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
background-color: #f5f5f5;
|
||||
border-right: 1px solid #000;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.value-cell {
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.value-cell .ball-number {
|
||||
display: inline-block;
|
||||
min-width: 30px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.value-cell .highlight-ball {
|
||||
display: inline-block;
|
||||
min-width: 30px;
|
||||
text-align: left;
|
||||
color: #e74c3c; /* 红色文字 */
|
||||
font-weight: bold;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.highlight-ball {
|
||||
color: #e74c3c; /* 红色文字 */
|
||||
font-weight: bold;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.highlight-ball.blue-text {
|
||||
color: #3498db; /* 蓝色文字 */
|
||||
}
|
||||
|
||||
.coefficient-value {
|
||||
font-weight: normal;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.value-cell .coefficient-value {
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.recommendation {
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: #333;
|
||||
text-align: left;
|
||||
padding: 5px;
|
||||
white-space: normal;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.report-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
margin: 20px 0 15px;
|
||||
text-align: center;
|
||||
padding-bottom: 10px;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
display: none; /* 隐藏原来的标题，使用表格自身的标题 */
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.surface-analysis {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.back-button-container {
|
||||
position: static;
|
||||
text-align: left;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.analysis-buttons {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.btn-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.btn-desc {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.ball-grid {
|
||||
gap: 8px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.table-title-cell {
|
||||
font-size: 14px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.label-cell, .value-cell {
|
||||
padding: 6px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.recommendation {
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user