666 lines
16 KiB
Vue
666 lines
16 KiB
Vue
|
<template>
|
||
|
|
<div class="trend-analysis">
|
||
|
|
<div class="header">
|
||
|
|
<!-- 返回按钮 -->
|
||
|
|
<div class="back-button-container">
|
||
|
|
<el-button @click="$router.back()" icon="ArrowLeft" size="medium">
|
||
|
|
返回
|
||
|
|
</el-button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>活跃性分析</h2>
|
||
|
|
<p>查看红球和蓝球历史数据统计</p>
|
||
|
|
|
||
|
|
<!-- 球类选择切换 -->
|
||
|
|
<div class="ball-type-tabs">
|
||
|
|
<el-radio-group v-model="ballType" @change="switchBallType">
|
||
|
|
<el-radio-button label="red">🔴 红球</el-radio-button>
|
||
|
|
<el-radio-button label="blue">🔵 蓝球</el-radio-button>
|
||
|
|
</el-radio-group>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 功能按钮区域 -->
|
||
|
|
<div class="analysis-buttons">
|
||
|
|
<el-card
|
||
|
|
class="analysis-card"
|
||
|
|
:class="{ active: currentView === 'all' }"
|
||
|
|
@click="loadData('all')"
|
||
|
|
shadow="hover"
|
||
|
|
>
|
||
|
|
<div class="btn-icon">📊</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: currentView === 'top' }"
|
||
|
|
@click="loadData('top')"
|
||
|
|
shadow="hover"
|
||
|
|
>
|
||
|
|
<div class="btn-icon">🏆</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: currentView === '100' }"
|
||
|
|
@click="loadData('100')"
|
||
|
|
shadow="hover"
|
||
|
|
>
|
||
|
|
<div class="btn-icon">📈</div>
|
||
|
|
<div class="btn-text">
|
||
|
|
<div class="btn-title">百期数据</div>
|
||
|
|
<div class="btn-desc">最近100期数据</div>
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
|
||
|
|
<el-card
|
||
|
|
class="analysis-card"
|
||
|
|
:class="{ active: currentView === 'top100' }"
|
||
|
|
@click="loadData('top100')"
|
||
|
|
shadow="hover"
|
||
|
|
>
|
||
|
|
<div class="btn-icon">🎯</div>
|
||
|
|
<div class="btn-text">
|
||
|
|
<div class="btn-title">百期排行</div>
|
||
|
|
<div class="btn-desc">最近100期数据排行</div>
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 数据显示区域 -->
|
||
|
|
<el-card class="data-container" shadow="never">
|
||
|
|
<div v-if="loading" class="loading">
|
||
|
|
<el-skeleton :rows="10" animated />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<el-alert
|
||
|
|
v-else-if="error"
|
||
|
|
:title="error"
|
||
|
|
type="error"
|
||
|
|
show-icon
|
||
|
|
:closable="false"
|
||
|
|
style="margin-bottom: 20px;"
|
||
|
|
>
|
||
|
|
<template #default>
|
||
|
|
<el-button @click="retryLoad" type="primary" size="small">重试</el-button>
|
||
|
|
</template>
|
||
|
|
</el-alert>
|
||
|
|
|
||
|
|
<div v-else-if="tableData.length > 0" class="data-table-container">
|
||
|
|
<div class="table-header">
|
||
|
|
<h3>{{ getTableTitle() }}</h3>
|
||
|
|
<div class="table-info">
|
||
|
|
<span>共 {{ tableData.length }} 条记录</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<el-table :data="paginatedData" stripe style="width: 100%">
|
||
|
|
<el-table-column
|
||
|
|
v-for="column in getTableColumns()"
|
||
|
|
:key="column.key"
|
||
|
|
:prop="column.key"
|
||
|
|
:label="column.title"
|
||
|
|
>
|
||
|
|
<template #default="scope">
|
||
|
|
<span :class="getColumnClass(column.key, scope.row[column.key])">
|
||
|
|
{{ formatValue(column.key, scope.row[column.key], scope.$index) }}
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
|
||
|
|
<!-- 分页 -->
|
||
|
|
<div class="pagination" v-if="totalPages > 1">
|
||
|
|
<el-pagination
|
||
|
|
background
|
||
|
|
layout="prev, pager, next"
|
||
|
|
:total="tableData.length"
|
||
|
|
:page-size="pageSize"
|
||
|
|
v-model:current-page="currentPage"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<el-empty v-else-if="!loading" description="暂无数据" />
|
||
|
|
</el-card>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { lotteryApi } from '@/api'
|
||
|
|
import {
|
||
|
|
ElButton,
|
||
|
|
ElCard,
|
||
|
|
ElRadioGroup,
|
||
|
|
ElRadioButton,
|
||
|
|
ElSkeleton,
|
||
|
|
ElAlert,
|
||
|
|
ElTable,
|
||
|
|
ElTableColumn,
|
||
|
|
ElPagination,
|
||
|
|
ElEmpty
|
||
|
|
} from 'element-plus'
|
||
|
|
import { ArrowLeft } from '@element-plus/icons-vue'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'TrendAnalysis',
|
||
|
|
components: {
|
||
|
|
ElButton,
|
||
|
|
ElCard,
|
||
|
|
ElRadioGroup,
|
||
|
|
ElRadioButton,
|
||
|
|
ElSkeleton,
|
||
|
|
ElAlert,
|
||
|
|
ElTable,
|
||
|
|
ElTableColumn,
|
||
|
|
ElPagination,
|
||
|
|
ElEmpty
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
loading: false,
|
||
|
|
error: null,
|
||
|
|
currentView: '',
|
||
|
|
ballType: 'red', // 'red' 或 'blue'
|
||
|
|
tableData: [],
|
||
|
|
currentPage: 1,
|
||
|
|
pageSize: 20
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
totalPages() {
|
||
|
|
return Math.ceil(this.tableData.length / this.pageSize)
|
||
|
|
},
|
||
|
|
paginatedData() {
|
||
|
|
const start = (this.currentPage - 1) * this.pageSize
|
||
|
|
return this.tableData.slice(start, start + this.pageSize)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
async loadHistoryAll() {
|
||
|
|
this.currentView = 'all'
|
||
|
|
this.currentPage = 1
|
||
|
|
this.loading = true
|
||
|
|
this.error = null
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await lotteryApi.getHistoryAll()
|
||
|
|
if (response.success) {
|
||
|
|
this.tableData = response.data || []
|
||
|
|
} else {
|
||
|
|
this.error = response.message || '获取数据失败'
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('获取历史全部记录失败:', error)
|
||
|
|
this.error = '网络请求失败，请重试'
|
||
|
|
} finally {
|
||
|
|
this.loading = false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
async loadHistory100() {
|
||
|
|
this.currentView = '100'
|
||
|
|
this.currentPage = 1
|
||
|
|
this.loading = true
|
||
|
|
this.error = null
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await lotteryApi.getHistory100()
|
||
|
|
if (response.success) {
|
||
|
|
this.tableData = response.data || []
|
||
|
|
} else {
|
||
|
|
this.error = response.message || '获取数据失败'
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('获取最近100期记录失败:', error)
|
||
|
|
this.error = '网络请求失败，请重试'
|
||
|
|
} finally {
|
||
|
|
this.loading = false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
async loadHistoryTop() {
|
||
|
|
this.currentView = 'top'
|
||
|
|
this.currentPage = 1
|
||
|
|
this.loading = true
|
||
|
|
this.error = null
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await lotteryApi.getHistoryTop()
|
||
|
|
if (response.success) {
|
||
|
|
this.tableData = response.data || []
|
||
|
|
} else {
|
||
|
|
this.error = response.message || '获取数据失败'
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('获取历史排行记录失败:', error)
|
||
|
|
this.error = '网络请求失败，请重试'
|
||
|
|
} finally {
|
||
|
|
this.loading = false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
async loadHistoryTop100() {
|
||
|
|
this.currentView = 'top100'
|
||
|
|
this.currentPage = 1
|
||
|
|
this.loading = true
|
||
|
|
this.error = null
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await lotteryApi.getHistoryTop100()
|
||
|
|
if (response.success) {
|
||
|
|
this.tableData = response.data || []
|
||
|
|
} else {
|
||
|
|
this.error = response.message || '获取数据失败'
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('获取100期排行记录失败:', error)
|
||
|
|
this.error = '网络请求失败，请重试'
|
||
|
|
} finally {
|
||
|
|
this.loading = false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// 蓝球数据获取方法
|
||
|
|
async loadBlueHistoryAll() {
|
||
|
|
this.currentView = 'all'
|
||
|
|
this.currentPage = 1
|
||
|
|
this.loading = true
|
||
|
|
this.error = null
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await lotteryApi.getBlueHistoryAll()
|
||
|
|
if (response.success) {
|
||
|
|
this.tableData = response.data || []
|
||
|
|
} else {
|
||
|
|
this.error = response.message || '获取数据失败'
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('获取蓝球历史全部记录失败:', error)
|
||
|
|
this.error = '网络请求失败，请重试'
|
||
|
|
} finally {
|
||
|
|
this.loading = false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
async loadBlueHistory100() {
|
||
|
|
this.currentView = '100'
|
||
|
|
this.currentPage = 1
|
||
|
|
this.loading = true
|
||
|
|
this.error = null
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await lotteryApi.getBlueHistory100()
|
||
|
|
if (response.success) {
|
||
|
|
this.tableData = response.data || []
|
||
|
|
} else {
|
||
|
|
this.error = response.message || '获取数据失败'
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('获取蓝球最近100期记录失败:', error)
|
||
|
|
this.error = '网络请求失败，请重试'
|
||
|
|
} finally {
|
||
|
|
this.loading = false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
async loadBlueHistoryTop() {
|
||
|
|
this.currentView = 'top'
|
||
|
|
this.currentPage = 1
|
||
|
|
this.loading = true
|
||
|
|
this.error = null
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await lotteryApi.getBlueHistoryTop()
|
||
|
|
if (response.success) {
|
||
|
|
this.tableData = response.data || []
|
||
|
|
} else {
|
||
|
|
this.error = response.message || '获取数据失败'
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('获取蓝球历史排行记录失败:', error)
|
||
|
|
this.error = '网络请求失败，请重试'
|
||
|
|
} finally {
|
||
|
|
this.loading = false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
async loadBlueHistoryTop100() {
|
||
|
|
this.currentView = 'top100'
|
||
|
|
this.currentPage = 1
|
||
|
|
this.loading = true
|
||
|
|
this.error = null
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await lotteryApi.getBlueHistoryTop100()
|
||
|
|
if (response.success) {
|
||
|
|
this.tableData = response.data || []
|
||
|
|
} else {
|
||
|
|
this.error = response.message || '获取数据失败'
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('获取蓝球100期排行记录失败:', error)
|
||
|
|
this.error = '网络请求失败，请重试'
|
||
|
|
} finally {
|
||
|
|
this.loading = false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// 切换球类型
|
||
|
|
switchBallType() {
|
||
|
|
this.currentView = ''
|
||
|
|
this.tableData = []
|
||
|
|
this.currentPage = 1
|
||
|
|
this.error = null
|
||
|
|
},
|
||
|
|
|
||
|
|
// 统一的数据加载方法
|
||
|
|
loadData(viewType) {
|
||
|
|
if (this.ballType === 'red') {
|
||
|
|
switch (viewType) {
|
||
|
|
case 'all':
|
||
|
|
this.loadHistoryAll()
|
||
|
|
break
|
||
|
|
case '100':
|
||
|
|
this.loadHistory100()
|
||
|
|
break
|
||
|
|
case 'top':
|
||
|
|
this.loadHistoryTop()
|
||
|
|
break
|
||
|
|
case 'top100':
|
||
|
|
this.loadHistoryTop100()
|
||
|
|
break
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
switch (viewType) {
|
||
|
|
case 'all':
|
||
|
|
this.loadBlueHistoryAll()
|
||
|
|
break
|
||
|
|
case '100':
|
||
|
|
this.loadBlueHistory100()
|
||
|
|
break
|
||
|
|
case 'top':
|
||
|
|
this.loadBlueHistoryTop()
|
||
|
|
break
|
||
|
|
case 'top100':
|
||
|
|
this.loadBlueHistoryTop100()
|
||
|
|
break
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
getTableTitle() {
|
||
|
|
const ballTypeText = this.ballType === 'red' ? '红球' : '蓝球'
|
||
|
|
const titles = {
|
||
|
|
'all': `${ballTypeText}历史全部记录`,
|
||
|
|
'100': `${ballTypeText}最近100期数据`,
|
||
|
|
'top': `${ballTypeText}历史数据排行`,
|
||
|
|
'top100': `${ballTypeText}100期数据排行`
|
||
|
|
}
|
||
|
|
return titles[this.currentView] || '数据列表'
|
||
|
|
},
|
||
|
|
|
||
|
|
getTableColumns() {
|
||
|
|
// 根据不同的视图返回不同的列配置
|
||
|
|
if (this.currentView === 'all') {
|
||
|
|
// 历史全部记录 - 显示完整数据
|
||
|
|
return [
|
||
|
|
{ key: 'ballNumber', title: '球号' },
|
||
|
|
{ key: 'frequencyCount', title: '出现次数' },
|
||
|
|
{ key: 'frequencyPercentage', title: '出现频率(%)' },
|
||
|
|
{ key: 'averageInterval', title: '平均隐现期' },
|
||
|
|
{ key: 'maxHiddenInterval', title: '最长隐现期' },
|
||
|
|
{ key: 'maxConsecutiveCount', title: '最大连出期' },
|
||
|
|
{ key: 'pointCoefficient', title: '活跃系数' }
|
||
|
|
]
|
||
|
|
} else if (this.currentView === '100') {
|
||
|
|
// 最近100期 - 只显示有数据的列
|
||
|
|
return [
|
||
|
|
{ key: 'ballNumber', title: '球号' },
|
||
|
|
{ key: 'frequencyCount', title: '出现次数' },
|
||
|
|
{ key: 'averageInterval', title: '平均隐现期' },
|
||
|
|
{ key: 'maxConsecutiveCount', title: '最大连出期' },
|
||
|
|
{ key: 'pointCoefficient', title: '活跃系数' }
|
||
|
|
]
|
||
|
|
} else if (this.currentView === 'top' || this.currentView === 'top100') {
|
||
|
|
return [
|
||
|
|
{ key: 'no', title: '排名' },
|
||
|
|
{ key: 'ballNumber', title: '球号' },
|
||
|
|
{ key: 'pointCoefficient', title: '活跃系数' }
|
||
|
|
]
|
||
|
|
}
|
||
|
|
return []
|
||
|
|
},
|
||
|
|
|
||
|
|
getColumnClass(key, value) {
|
||
|
|
if (key === 'ballNumber') {
|
||
|
|
return this.ballType === 'red' ? 'ball-number red-ball' : 'ball-number blue-ball'
|
||
|
|
} else if (key === 'pointCoefficient') {
|
||
|
|
return 'point-coefficient'
|
||
|
|
} else if (key === 'no') {
|
||
|
|
return 'ranking'
|
||
|
|
}
|
||
|
|
return ''
|
||
|
|
},
|
||
|
|
|
||
|
|
formatValue(key, value, index) {
|
||
|
|
if (key === 'no') {
|
||
|
|
// 排名显示为连续数字（当前页面索引 + 全局偏移）
|
||
|
|
return (this.currentPage - 1) * this.pageSize + index + 1
|
||
|
|
} else if (key === 'frequencyPercentage' && typeof value === 'number') {
|
||
|
|
return value.toFixed(2)
|
||
|
|
}
|
||
|
|
return value
|
||
|
|
},
|
||
|
|
|
||
|
|
retryLoad() {
|
||
|
|
if (this.currentView) {
|
||
|
|
this.loadData(this.currentView)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
prevPage() {
|
||
|
|
if (this.currentPage > 1) {
|
||
|
|
this.currentPage--
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
nextPage() {
|
||
|
|
if (this.currentPage < this.totalPages) {
|
||
|
|
this.currentPage++
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.trend-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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ball-type-tabs {
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.analysis-buttons {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
|
|
gap: 20px;
|
||
|
|
margin-bottom: 30px;
|
||
|
|
max-width: 1000px;
|
||
|
|
margin-left: auto;
|
||
|
|
margin-right: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.analysis-card {
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-icon {
|
||
|
|
font-size: 32px;
|
||
|
|
min-width: 40px;
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-text {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-title {
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 600;
|
||
|
|
margin-bottom: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.analysis-card.active .btn-title {
|
||
|
|
color: #2980b9;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-desc {
|
||
|
|
font-size: 14px;
|
||
|
|
opacity: 0.8;
|
||
|
|
}
|
||
|
|
|
||
|
|
.analysis-card.active .btn-desc {
|
||
|
|
color: #3498db;
|
||
|
|
}
|
||
|
|
|
||
|
|
.data-container {
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.loading {
|
||
|
|
padding: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
padding: 15px 20px;
|
||
|
|
border-bottom: 1px solid #ebeef5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-header h3 {
|
||
|
|
margin: 0;
|
||
|
|
font-size: 18px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-info {
|
||
|
|
font-size: 14px;
|
||
|
|
color: #909399;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pagination {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ball-number {
|
||
|
|
color: white;
|
||
|
|
padding: 4px 8px;
|
||
|
|
border-radius: 50%;
|
||
|
|
font-weight: 700;
|
||
|
|
font-size: 14px;
|
||
|
|
min-width: 30px;
|
||
|
|
text-align: center;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.red-ball {
|
||
|
|
background: #e74c3c;
|
||
|
|
}
|
||
|
|
|
||
|
|
.blue-ball {
|
||
|
|
background: #3498db;
|
||
|
|
}
|
||
|
|
|
||
|
|
.point-coefficient {
|
||
|
|
color: #e74c3c;
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ranking {
|
||
|
|
background: #f39c12;
|
||
|
|
color: white;
|
||
|
|
padding: 4px 8px;
|
||
|
|
border-radius: 4px;
|
||
|
|
font-weight: 700;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.trend-analysis {
|
||
|
|
padding: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.back-button-container {
|
||
|
|
position: static;
|
||
|
|
text-align: left;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.analysis-buttons {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|