879 lines
22 KiB
Vue
879 lines
22 KiB
Vue
|
<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'
|
|||
|
|
export default {
|
|||
|
|
name: 'DltSurfaceAnalysis',
|
|||
|
|
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>
|