763 lines
17 KiB
Vue
763 lines
17 KiB
Vue
<template>
|
||
<div class="data-analysis-container">
|
||
|
||
|
||
<!-- 彩票种类选择区域 -->
|
||
<el-card class="lottery-types" shadow="never">
|
||
<h2 class="section-title">选择彩票种类</h2>
|
||
|
||
<div class="lottery-options">
|
||
<!-- 双色球 -->
|
||
<div
|
||
class="lottery-option"
|
||
:class="{ active: currentLotteryType === 'ssq' }"
|
||
@click="switchLotteryType('ssq')"
|
||
>
|
||
<div class="lottery-option-image">
|
||
<img :src="currentLotteryType === 'ssq' ? '/assets/fenxi/ssq-1.svg' : '/assets/fenxi/ssq-0.svg'" alt="双色球" />
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 快乐8 -->
|
||
<div
|
||
class="lottery-option"
|
||
:class="{ active: currentLotteryType === 'kl8' }"
|
||
@click="switchLotteryType('kl8')"
|
||
>
|
||
<div class="lottery-option-image">
|
||
<img :src="currentLotteryType === 'kl8' ? '/assets/fenxi/kuaile8-1.svg' : '/assets/fenxi/kuaile-0.svg'" alt="快乐8" />
|
||
<div class="coming-soon-badge">即将开放</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 七乐彩 -->
|
||
<div
|
||
class="lottery-option"
|
||
:class="{ active: currentLotteryType === 'qlc' }"
|
||
@click="switchLotteryType('qlc')"
|
||
>
|
||
<div class="lottery-option-image">
|
||
<img :src="currentLotteryType === 'qlc' ? '/assets/fenxi/7lecai-1.svg' : '/assets/fenxi/7lecai-0.svg'" alt="七乐彩" />
|
||
<div class="coming-soon-badge">即将开放</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 福彩3D -->
|
||
<div
|
||
class="lottery-option"
|
||
:class="{ active: currentLotteryType === '3d' }"
|
||
@click="switchLotteryType('3d')"
|
||
>
|
||
<div class="lottery-option-image">
|
||
<img :src="currentLotteryType === '3d' ? '/assets/fenxi/3D-1.svg' : '/assets/fenxi/3D-0.svg'" alt="福彩3D" />
|
||
<div class="coming-soon-badge">即将开放</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 大乐透 -->
|
||
<div
|
||
class="lottery-option"
|
||
:class="{ active: currentLotteryType === 'dlt' }"
|
||
@click="switchLotteryType('dlt')"
|
||
>
|
||
<div class="lottery-option-image">
|
||
<img :src="currentLotteryType === 'dlt' ? '/assets/fenxi/daletou-1.svg' : '/assets/fenxi/daletou-0.svg'" alt="大乐透" />
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 排列3 -->
|
||
<div
|
||
class="lottery-option"
|
||
:class="{ active: currentLotteryType === 'pl3' }"
|
||
@click="switchLotteryType('pl3')"
|
||
>
|
||
<div class="lottery-option-image">
|
||
<img :src="currentLotteryType === 'pl3' ? '/assets/fenxi/pailie3-1.svg' : '/assets/fenxi/pailie3-0.svg'" alt="排列3" />
|
||
<div class="coming-soon-badge">即将开放</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 七星彩 -->
|
||
<div
|
||
class="lottery-option"
|
||
:class="{ active: currentLotteryType === 'qxc' }"
|
||
@click="switchLotteryType('qxc')"
|
||
>
|
||
<div class="lottery-option-image">
|
||
<img :src="currentLotteryType === 'qxc' ? '/assets/fenxi/7xingcai-1.svg' : '/assets/fenxi/7xingcai-0.svg'" alt="七星彩" />
|
||
<div class="coming-soon-badge">即将开放</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 排列5 -->
|
||
<div
|
||
class="lottery-option"
|
||
:class="{ active: currentLotteryType === 'pl5' }"
|
||
@click="switchLotteryType('pl5')"
|
||
>
|
||
<div class="lottery-option-image">
|
||
<img :src="currentLotteryType === 'pl5' ? '/assets/fenxi/pailie-1.svg' : '/assets/fenxi/pailie5.svg'" alt="排列5" />
|
||
<div class="coming-soon-badge">即将开放</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
|
||
<!-- 分析类型选择 - 只有在选择彩票种类后才显示 -->
|
||
<div v-if="currentLotteryType" class="analysis-section">
|
||
<div class="analysis-options">
|
||
<!-- 活跃性分析 -->
|
||
<div class="analysis-option" @click="goToAnalysis('trend')">
|
||
<div class="analysis-icon">
|
||
<img src="/assets/fenxi/fenxi-3.svg" alt="活跃性分析" class="analysis-svg-icon" />
|
||
</div>
|
||
<div class="analysis-name">活跃性分析</div>
|
||
<div class="analysis-desc">分析号码的活跃度和热度趋势</div>
|
||
</div>
|
||
|
||
<!-- 组合性分析 -->
|
||
<div class="analysis-option" @click="goToAnalysis('surface')">
|
||
<div class="analysis-icon">
|
||
<img src="/assets/fenxi/fenxi-4.svg" alt="组合性分析" class="analysis-svg-icon" />
|
||
</div>
|
||
<div class="analysis-name">组合性分析</div>
|
||
<div class="analysis-desc">分析号码之间的组合关系和规律</div>
|
||
</div>
|
||
|
||
<!-- 接续性分析 -->
|
||
<div class="analysis-option" @click="goToAnalysis('line')">
|
||
<div class="analysis-icon">
|
||
<img src="/assets/fenxi/fenxi-2.svg" alt="接续性分析" class="analysis-svg-icon" />
|
||
</div>
|
||
<div class="analysis-name">接续性分析</div>
|
||
<div class="analysis-desc">分析号码的连续性和接续规律</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>
|
||
import { ElCard } from 'element-plus'
|
||
|
||
export default {
|
||
name: 'DataAnalysis',
|
||
components: {
|
||
ElCard
|
||
},
|
||
data() {
|
||
return {
|
||
currentLotteryType: 'ssq', // 默认选中双色球
|
||
showTip: false, // 提示框显示状态
|
||
}
|
||
},
|
||
mounted() {
|
||
// 从路由查询参数中恢复彩票类型选择
|
||
if (this.$route.query.lotteryType) {
|
||
this.currentLotteryType = this.$route.query.lotteryType
|
||
}
|
||
},
|
||
methods: {
|
||
|
||
// 切换彩票类型
|
||
switchLotteryType(type) {
|
||
// 双色球和大乐透功能可用，其他彩票类型显示开发中提示
|
||
if (type !== 'ssq' && type !== 'dlt') {
|
||
this.showDevelopingTip();
|
||
return;
|
||
}
|
||
|
||
this.currentLotteryType = type;
|
||
},
|
||
|
||
// 跳转到具体分析页面
|
||
goToAnalysis(analysisType) {
|
||
let routes = {};
|
||
|
||
if (this.currentLotteryType === 'ssq') {
|
||
routes = {
|
||
'table': '/table-analysis',
|
||
'surface': '/surface-analysis',
|
||
'trend': '/trend-analysis',
|
||
'line': '/line-analysis'
|
||
};
|
||
} else if (this.currentLotteryType === 'dlt') {
|
||
routes = {
|
||
'table': '/dlt-table-analysis',
|
||
'surface': '/dlt-surface-analysis',
|
||
'trend': '/dlt-trend-analysis',
|
||
'line': '/dlt-line-analysis'
|
||
};
|
||
}
|
||
|
||
if (routes[analysisType]) {
|
||
this.$router.push({
|
||
path: routes[analysisType],
|
||
query: { lotteryType: this.currentLotteryType }
|
||
});
|
||
}
|
||
},
|
||
|
||
// 显示开发中提示
|
||
showDevelopingTip() {
|
||
this.showTip = true;
|
||
},
|
||
|
||
// 隐藏提示
|
||
hideTip() {
|
||
this.showTip = false;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.data-analysis-container {
|
||
padding: 20px 20px 0px 20px;
|
||
background-color: #f0f2f5;
|
||
min-height: calc(100vh - 140px);
|
||
}
|
||
|
||
.toolbar {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
|
||
|
||
.lottery-types {
|
||
margin-bottom: 20px;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.analysis-section {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
/* 去掉Element Plus卡片的默认内边距 */
|
||
.lottery-types :deep(.el-card__body) {
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
/* 彩票类型选择区域 */
|
||
.section-title {
|
||
text-align: center;
|
||
color: #333;
|
||
font-size: 20px;
|
||
margin: 0 0 15px 0;
|
||
padding: 15px 0 0 0;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.lottery-options {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 15px;
|
||
justify-items: center;
|
||
padding: 0;
|
||
margin: 0;
|
||
padding: 0 10px 20px;
|
||
}
|
||
|
||
.lottery-option {
|
||
width: auto;
|
||
max-width: 85px;
|
||
padding: 5px;
|
||
text-align: center;
|
||
background: transparent;
|
||
border: none;
|
||
transition: all 0.3s;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.lottery-option:hover {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.lottery-option-image {
|
||
width: 75px;
|
||
height: 75px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
}
|
||
|
||
.lottery-option-image img {
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
/* 即将开放标识 */
|
||
.coming-soon-badge {
|
||
position: absolute;
|
||
top: -5px;
|
||
right: -8px;
|
||
background: linear-gradient(135deg, #ff6b6b, #ff8787);
|
||
color: white;
|
||
font-size: 8px;
|
||
padding: 2px 4px;
|
||
border-radius: 6px;
|
||
font-weight: 600;
|
||
white-space: nowrap;
|
||
box-shadow: 0 2px 6px rgba(255, 107, 107, 0.3);
|
||
z-index: 1;
|
||
}
|
||
|
||
/* 分析选项样式 */
|
||
.analysis-options {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: 15px;
|
||
margin-top: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.analysis-option {
|
||
border-radius: 12px;
|
||
padding: 40px 20px;
|
||
min-height: 150px;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
transition: all 0.3s ease;
|
||
cursor: pointer;
|
||
text-align: left;
|
||
border: none;
|
||
color: white;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 活跃性分析 - 蓝青色渐变 */
|
||
.analysis-option:nth-child(1) {
|
||
background: linear-gradient(135deg, rgba(74, 220, 221, 1), rgba(41, 144, 240, 1));
|
||
}
|
||
|
||
/* 组合性分析 - 紫色渐变 */
|
||
.analysis-option:nth-child(2) {
|
||
background: linear-gradient(135deg, rgba(190, 131, 253, 1), rgba(122, 93, 249, 1));
|
||
}
|
||
|
||
/* 接续性分析 - 黄色渐变 */
|
||
.analysis-option:nth-child(3) {
|
||
background: linear-gradient(135deg, rgba(251, 214, 45, 1), rgba(255, 176, 3, 1));
|
||
}
|
||
|
||
|
||
|
||
.analysis-option > * {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.analysis-option:hover {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
/* 第一个卡片的图标在左侧 */
|
||
.analysis-option:nth-child(1) .analysis-icon {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 0px;
|
||
transform: translateY(-50%);
|
||
color: white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 后两个卡片的图标在右侧 */
|
||
.analysis-option:nth-child(2) .analysis-icon,
|
||
.analysis-option:nth-child(3) .analysis-icon {
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 0px;
|
||
transform: translateY(-50%);
|
||
color: white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.analysis-svg-icon {
|
||
width: 180px;
|
||
height: 180px;
|
||
object-fit: contain;
|
||
filter: brightness(0) invert(1);
|
||
opacity: 0.5;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* 第一个卡片图案扩大140% */
|
||
.analysis-option:nth-child(1) .analysis-svg-icon {
|
||
width: 432px;
|
||
height: 432px;
|
||
}
|
||
|
||
/* 第二个卡片图案缩小10% */
|
||
.analysis-option:nth-child(2) .analysis-svg-icon {
|
||
width: 162px;
|
||
height: 162px;
|
||
}
|
||
|
||
/* 第三个卡片图案扩大140% */
|
||
.analysis-option:nth-child(3) .analysis-svg-icon {
|
||
width: 432px;
|
||
height: 432px;
|
||
}
|
||
|
||
/* 第一个卡片的文字样式（图标在左侧） */
|
||
.analysis-option:nth-child(1) .analysis-name {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: white;
|
||
margin-bottom: 10px;
|
||
padding-left: 20px;
|
||
padding-right: 20px;
|
||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.analysis-option:nth-child(1) .analysis-desc {
|
||
font-size: 14px;
|
||
color: rgba(255, 255, 255, 0.95);
|
||
line-height: 1.5;
|
||
padding-left: 20px;
|
||
padding-right: 20px;
|
||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
/* 后两个卡片的文字样式（图标在右侧） */
|
||
.analysis-option:nth-child(2) .analysis-name,
|
||
.analysis-option:nth-child(3) .analysis-name {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: white;
|
||
margin-bottom: 10px;
|
||
padding-left: 20px;
|
||
padding-right: 20px;
|
||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.analysis-option:nth-child(2) .analysis-desc,
|
||
.analysis-option:nth-child(3) .analysis-desc {
|
||
font-size: 14px;
|
||
color: rgba(255, 255, 255, 0.95);
|
||
line-height: 1.5;
|
||
padding-left: 20px;
|
||
padding-right: 20px;
|
||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
/* 开发中提示框 */
|
||
.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: 16px;
|
||
padding: 32px 24px;
|
||
text-align: center;
|
||
max-width: 300px;
|
||
width: 100%;
|
||
box-shadow: 0 16px 48px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
.tip-icon {
|
||
font-size: 40px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.tip-content h3 {
|
||
font-size: 18px;
|
||
color: #333;
|
||
margin: 0 0 12px 0;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.tip-content p {
|
||
color: #666;
|
||
font-size: 15px;
|
||
line-height: 1.5;
|
||
margin: 0 0 20px 0;
|
||
}
|
||
|
||
.tip-button {
|
||
background: linear-gradient(135deg, #ff6b35, #f7931e);
|
||
color: white;
|
||
border: none;
|
||
padding: 10px 24px;
|
||
border-radius: 20px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.tip-button:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 20px rgba(255, 107, 53, 0.3);
|
||
}
|
||
|
||
.tip-button:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.data-analysis-container {
|
||
padding: 10px 10px 0px 10px;
|
||
}
|
||
|
||
.lottery-options {
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 10px;
|
||
padding: 0;
|
||
padding: 0 10px 20px;
|
||
}
|
||
|
||
.lottery-option {
|
||
max-width: 75px;
|
||
padding: 5px;
|
||
}
|
||
|
||
.lottery-option-image {
|
||
width: 63px;
|
||
height: 63px;
|
||
}
|
||
|
||
.coming-soon-badge {
|
||
font-size: 7px;
|
||
padding: 1px 3px;
|
||
top: -3px;
|
||
right: -6px;
|
||
}
|
||
|
||
.analysis-options {
|
||
grid-template-columns: 1fr;
|
||
padding: 0;
|
||
gap: 12px;
|
||
}
|
||
|
||
|
||
|
||
.analysis-option {
|
||
padding: 35px 15px;
|
||
min-height: 130px;
|
||
}
|
||
|
||
.analysis-svg-icon {
|
||
width: 140px;
|
||
height: 140px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* 第一个卡片图案扩大140% */
|
||
.analysis-option:nth-child(1) .analysis-svg-icon {
|
||
width: 336px;
|
||
height: 336px;
|
||
}
|
||
|
||
/* 第二个卡片图案缩小10% */
|
||
.analysis-option:nth-child(2) .analysis-svg-icon {
|
||
width: 126px;
|
||
height: 126px;
|
||
}
|
||
|
||
/* 第三个卡片图案扩大140% */
|
||
.analysis-option:nth-child(3) .analysis-svg-icon {
|
||
width: 336px;
|
||
height: 336px;
|
||
}
|
||
|
||
/* 第一个卡片的图标在左侧 */
|
||
.analysis-option:nth-child(1) .analysis-icon {
|
||
left: 10px;
|
||
}
|
||
|
||
/* 后两个卡片的图标在右侧 */
|
||
.analysis-option:nth-child(2) .analysis-icon,
|
||
.analysis-option:nth-child(3) .analysis-icon {
|
||
right: 10px;
|
||
}
|
||
|
||
/* 所有卡片的文字统一对齐 */
|
||
.analysis-option:nth-child(1) .analysis-name,
|
||
.analysis-option:nth-child(1) .analysis-desc,
|
||
.analysis-option:nth-child(2) .analysis-name,
|
||
.analysis-option:nth-child(2) .analysis-desc,
|
||
.analysis-option:nth-child(3) .analysis-name,
|
||
.analysis-option:nth-child(3) .analysis-desc {
|
||
padding-left: 15px;
|
||
padding-right: 15px;
|
||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.lottery-options {
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 8px;
|
||
padding: 0 10px 20px;
|
||
}
|
||
|
||
.lottery-option {
|
||
max-width: 63px;
|
||
padding: 3px;
|
||
}
|
||
|
||
.lottery-option-image {
|
||
width: 56px;
|
||
height: 56px;
|
||
}
|
||
|
||
.coming-soon-badge {
|
||
font-size: 6px;
|
||
padding: 1px 2px;
|
||
top: -2px;
|
||
right: -4px;
|
||
}
|
||
|
||
.analysis-options {
|
||
padding: 0;
|
||
gap: 10px;
|
||
}
|
||
|
||
|
||
.analysis-option {
|
||
padding: 30px 12px;
|
||
min-height: 110px;
|
||
}
|
||
|
||
.analysis-svg-icon {
|
||
width: 120px;
|
||
height: 120px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* 第一个卡片图案扩大140% */
|
||
.analysis-option:nth-child(1) .analysis-svg-icon {
|
||
width: 288px;
|
||
height: 288px;
|
||
}
|
||
|
||
/* 第二个卡片图案缩小10% */
|
||
.analysis-option:nth-child(2) .analysis-svg-icon {
|
||
width: 108px;
|
||
height: 108px;
|
||
}
|
||
|
||
/* 第三个卡片图案扩大140% */
|
||
.analysis-option:nth-child(3) .analysis-svg-icon {
|
||
width: 288px;
|
||
height: 288px;
|
||
}
|
||
|
||
/* 第一个卡片的图标在左侧 */
|
||
.analysis-option:nth-child(1) .analysis-icon {
|
||
left: 15px;
|
||
}
|
||
|
||
/* 后两个卡片的图标在右侧 */
|
||
.analysis-option:nth-child(2) .analysis-icon,
|
||
.analysis-option:nth-child(3) .analysis-icon {
|
||
right: 15px;
|
||
}
|
||
|
||
/* 所有卡片的文字统一对齐 */
|
||
.analysis-option:nth-child(1) .analysis-name,
|
||
.analysis-option:nth-child(2) .analysis-name,
|
||
.analysis-option:nth-child(3) .analysis-name {
|
||
font-size: 16px;
|
||
padding-left: 10px;
|
||
padding-right: 10px;
|
||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.analysis-option:nth-child(1) .analysis-desc,
|
||
.analysis-option:nth-child(2) .analysis-desc,
|
||
.analysis-option:nth-child(3) .analysis-desc {
|
||
font-size: 12px;
|
||
padding-left: 10px;
|
||
padding-right: 10px;
|
||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
/* 弹窗响应式样式 */
|
||
.tip-overlay {
|
||
padding: 16px;
|
||
}
|
||
|
||
.tip-content {
|
||
padding: 24px 20px;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.tip-icon {
|
||
font-size: 32px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.tip-content h3 {
|
||
font-size: 16px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.tip-content p {
|
||
font-size: 13px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.tip-button {
|
||
padding: 8px 20px;
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
</style> |