|
|
|
@ -9,7 +9,7 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 活动规则按钮 --> |
|
|
|
<div class="rules-btn" @click="showRules"> |
|
|
|
<div class="rules-btn" @click="showRulesFunc"> |
|
|
|
<img src="@/assets/img/zhongchou/活动需知.png" alt="活动规则" /> |
|
|
|
<span class="rules-text">活动规则</span> |
|
|
|
</div> |
|
|
|
@ -112,12 +112,11 @@ |
|
|
|
<div class="modal-text"> |
|
|
|
<div class="rules-list"> |
|
|
|
<p>1. 活动时间为2025年7月26日-2025年8月5日。</p> |
|
|
|
<p>2. 每人每天有3个活动助力参与机会。</p> |
|
|
|
<p>3. 助力时间为15分钟，每一个人参与助力，即可时间</p> |
|
|
|
<p> 分钟！</p> |
|
|
|
<p>4. 助力成功后，平台服务市场将获取实时数据！</p> |
|
|
|
<p>5. 平台对数据众筹上线后，您的方案数据将优化成对应</p> |
|
|
|
<p> 大数据的实时数据优化参考。</p> |
|
|
|
<p>2. 每人每天每个活动可以参与一次。</p> |
|
|
|
<p>3. 初始时间为15分钟，每一百人参与助力，即可扣减一分钟！</p> |
|
|
|
<p>4. 助力成功后，对应股票市场将开放实时数据！</p> |
|
|
|
<p>5. 实时数据众筹上线后，您助力的次数会转化成对应天数的实时数据</p> |
|
|
|
<p>体验卡。</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="close-btn" @click="hideRules"></div> |
|
|
|
@ -131,18 +130,18 @@ import { addRecordAPI ,getActivity1API } from '../../api/API' |
|
|
|
import { ref, computed, onMounted, nextTick, watch } from 'vue' |
|
|
|
// 在组件中使用 |
|
|
|
async function fetchActivity() { |
|
|
|
try { |
|
|
|
const response = await getActivity1API() |
|
|
|
if (response.code === 200) { |
|
|
|
console.log('活动数据:', response.data) |
|
|
|
// 处理返回的数据 |
|
|
|
// response.data 包含：marketOne, marketTwo, startTime, endTime 等字段 |
|
|
|
} else { |
|
|
|
console.error('获取活动失败:', response.message) |
|
|
|
try { |
|
|
|
const response = await getActivity1API() |
|
|
|
if (response.code === 200) { |
|
|
|
console.log('活动数据:', response.data) |
|
|
|
// 处理返回的数据 |
|
|
|
// response.data 包含：marketOne, marketTwo, startTime, endTime 等字段 |
|
|
|
} else { |
|
|
|
console.error('获取活动失败:', response.message) |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
console.error('请求错误:', error) |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
console.error('请求错误:', error) |
|
|
|
} |
|
|
|
} |
|
|
|
const numberToChinese = (num) => { |
|
|
|
const chineseNumbers = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二', '十三', '十四', '十五'] |
|
|
|
@ -240,6 +239,8 @@ const updateProgressDisplay = () => { |
|
|
|
// 组件挂载时初始化 |
|
|
|
onMounted(() => { |
|
|
|
nextTick(() => { |
|
|
|
// 页面加载时自动获取活动数据 |
|
|
|
fetchActivity() |
|
|
|
updateProgressBarHeight() |
|
|
|
updateProgressDisplay() |
|
|
|
|
|
|
|
@ -279,7 +280,7 @@ const handleBoostClick = async (area) => { |
|
|
|
"activityId": 1, |
|
|
|
"marketSign": "usa" |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
if (response.code === 200) { |
|
|
|
usBoostStatus.value = true |
|
|
|
// 助力后减少1分钟时间 |
|
|
|
@ -299,7 +300,7 @@ const handleBoostClick = async (area) => { |
|
|
|
"activityId": 1, |
|
|
|
"marketSign": "hk" |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
if (response.code === 200) { |
|
|
|
hkBoostStatus.value = true |
|
|
|
// 助力后减少1分钟时间 |
|
|
|
@ -370,6 +371,7 @@ const hideRules = () => { |
|
|
|
justify-content: center; |
|
|
|
flex: 1; |
|
|
|
gap: 10px; |
|
|
|
margin-left: 70px; |
|
|
|
} |
|
|
|
|
|
|
|
/* 主标题图片响应式样式 */ |
|
|
|
@ -391,14 +393,14 @@ const hideRules = () => { |
|
|
|
|
|
|
|
.rules-btn img { |
|
|
|
width: auto; |
|
|
|
height: 40px; |
|
|
|
height: 45px; |
|
|
|
margin-bottom: 5px; |
|
|
|
} |
|
|
|
|
|
|
|
.rules-text { |
|
|
|
color: #fff; |
|
|
|
font-size: 12px; |
|
|
|
font-weight: 500; |
|
|
|
color: rgba(255, 255, 255, 0.9); |
|
|
|
font-size: 1rem; |
|
|
|
font-weight: 700; |
|
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
@ -423,7 +425,8 @@ const hideRules = () => { |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-size: contain; |
|
|
|
background-position: center; |
|
|
|
font-size: 1.2rem; |
|
|
|
font-size: 1.4rem; |
|
|
|
font-weight: 700; |
|
|
|
color: rgba(255, 255, 255, 0.9); |
|
|
|
display: inline-block; |
|
|
|
padding: 10px 20px; |
|
|
|
@ -460,6 +463,7 @@ const hideRules = () => { |
|
|
|
transform-style: preserve-3d; |
|
|
|
transform-origin: center center; |
|
|
|
} |
|
|
|
|
|
|
|
/* 为所有图片添加渲染优化 */ |
|
|
|
/* .stock-card img, |
|
|
|
.rocket-body img, |
|
|
|
@ -522,10 +526,13 @@ const hideRules = () => { |
|
|
|
position: absolute; |
|
|
|
z-index: 10; |
|
|
|
transform: translateZ(0); |
|
|
|
/* 新增位置调整 */ |
|
|
|
top: 80%; /* 垂直居中，可调整为具体像素值如 100px */ |
|
|
|
left: 50%; /* 水平居中，可调整为具体像素值如 200px */ |
|
|
|
transform: translate(-50%, -50%) translateZ(0); /* 居中偏移 */ |
|
|
|
/* 新增位置调整 */ |
|
|
|
top: 80%; |
|
|
|
/* 垂直居中，可调整为具体像素值如 100px */ |
|
|
|
left: 50%; |
|
|
|
/* 水平居中，可调整为具体像素值如 200px */ |
|
|
|
transform: translate(-50%, -50%) translateZ(0); |
|
|
|
/* 居中偏移 */ |
|
|
|
} |
|
|
|
|
|
|
|
.rocket-area.hidden { |
|
|
|
@ -535,7 +542,7 @@ const hideRules = () => { |
|
|
|
/* 股票卡片样式 */ |
|
|
|
.stock-card { |
|
|
|
width: 100%; |
|
|
|
height: auto; |
|
|
|
height: 345px; |
|
|
|
background-size: 100% 100%; |
|
|
|
background-position: center; |
|
|
|
background-repeat: no-repeat; |
|
|
|
@ -650,23 +657,23 @@ const hideRules = () => { |
|
|
|
position: relative; |
|
|
|
overflow: visible; |
|
|
|
} |
|
|
|
|
|
|
|
/* 美股进度条容器 - 蓝色主题背景 */ |
|
|
|
.us-content .progress-bar { |
|
|
|
background: linear-gradient(to top, |
|
|
|
rgba(79, 195, 247, 0.2), |
|
|
|
rgba(41, 182, 246, 0.3), |
|
|
|
rgba(2, 136, 209, 0.4) |
|
|
|
); |
|
|
|
background: linear-gradient(to top, |
|
|
|
rgba(79, 195, 247, 0.2), |
|
|
|
rgba(41, 182, 246, 0.3), |
|
|
|
rgba(2, 136, 209, 0.4)); |
|
|
|
border: 1px solid rgba(41, 182, 246, 0.5); |
|
|
|
box-shadow: 0 0 10px rgba(41, 182, 246, 0.3); |
|
|
|
} |
|
|
|
|
|
|
|
/* 港股进度条容器 - 红色主题背景 */ |
|
|
|
.hk-content .progress-bar { |
|
|
|
background: linear-gradient(to top, |
|
|
|
rgba(255, 138, 128, 0.2), |
|
|
|
rgba(255, 87, 34, 0.3), |
|
|
|
rgba(211, 47, 47, 0.4) |
|
|
|
); |
|
|
|
background: linear-gradient(to top, |
|
|
|
rgba(255, 138, 128, 0.2), |
|
|
|
rgba(255, 87, 34, 0.3), |
|
|
|
rgba(211, 47, 47, 0.4)); |
|
|
|
border: 1px solid rgba(255, 87, 34, 0.5); |
|
|
|
box-shadow: 0 0 10px rgba(255, 87, 34, 0.3); |
|
|
|
} |
|
|
|
@ -708,6 +715,7 @@ const hideRules = () => { |
|
|
|
background-position: center; |
|
|
|
width: 240px; |
|
|
|
height: 80px; |
|
|
|
margin-top: -30px; |
|
|
|
} |
|
|
|
|
|
|
|
/* 美股助力按钮 */ |
|
|
|
@ -750,14 +758,17 @@ const hideRules = () => { |
|
|
|
border-radius: 10px; |
|
|
|
transition: height 0.8s ease; |
|
|
|
} |
|
|
|
|
|
|
|
/* 美股进度条填充 - 蓝色系渐变 */ |
|
|
|
.us-content .progress-fill { |
|
|
|
background: linear-gradient(to top, #4FC3F7, #29B6F6, #0288D1); |
|
|
|
} |
|
|
|
|
|
|
|
/* 港股进度条填充 - 红色系渐变 */ |
|
|
|
.hk-content .progress-fill { |
|
|
|
background: linear-gradient(to top, #FF8A80, #FF5722, #D32F2F); |
|
|
|
} |
|
|
|
|
|
|
|
/* 在进度条填充部分顶部添加火箭gif */ |
|
|
|
.progress-fill::after { |
|
|
|
content: ''; |
|
|
|
@ -776,7 +787,7 @@ const hideRules = () => { |
|
|
|
} |
|
|
|
|
|
|
|
.marker { |
|
|
|
position: relative; |
|
|
|
position: relative; |
|
|
|
color: #FFD700; |
|
|
|
/* 默认金色 */ |
|
|
|
font-size: 1.4rem; |
|
|
|
@ -787,6 +798,7 @@ const hideRules = () => { |
|
|
|
letter-spacing: 0.5px; |
|
|
|
text-rendering: optimizeLegibility; |
|
|
|
} |
|
|
|
|
|
|
|
/* 为刻度数字添加连接线 */ |
|
|
|
.marker::before { |
|
|
|
content: ''; |
|
|
|
@ -801,17 +813,20 @@ const hideRules = () => { |
|
|
|
|
|
|
|
/* 美股刻度连接线 - 从右侧连接到进度条 */ |
|
|
|
.us-content .marker::before { |
|
|
|
right: -20px; |
|
|
|
background-color: #00BFFF; /* 蓝色 */ |
|
|
|
right: -20px; |
|
|
|
background-color: #00BFFF; |
|
|
|
/* 蓝色 */ |
|
|
|
box-shadow: 0 0 4px rgba(0, 191, 255, 0.5); |
|
|
|
} |
|
|
|
|
|
|
|
/* 港股刻度连接线 - 从左侧连接到进度条 */ |
|
|
|
.hk-content .marker::before { |
|
|
|
left: -20px; |
|
|
|
background-color: #FF4444; /* 红色 */ |
|
|
|
background-color: #FF4444; |
|
|
|
/* 红色 */ |
|
|
|
box-shadow: 0 0 4px rgba(255, 68, 68, 0.5); |
|
|
|
} |
|
|
|
|
|
|
|
/* 美股激活刻度 */ |
|
|
|
.us-content .marker.reached { |
|
|
|
color: #00BFFF !important; |
|
|
|
@ -975,8 +990,8 @@ const hideRules = () => { |
|
|
|
|
|
|
|
.modal-content { |
|
|
|
position: relative; |
|
|
|
width: 500px; |
|
|
|
height: 400px; |
|
|
|
width: 620px; |
|
|
|
height: 450px; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
@ -993,7 +1008,7 @@ const hideRules = () => { |
|
|
|
flex-direction: column; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
padding: 40px 30px 30px 30px; |
|
|
|
padding: 50px 40px 40px 40px; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
@ -1015,9 +1030,10 @@ const hideRules = () => { |
|
|
|
} |
|
|
|
|
|
|
|
.rules-list p { |
|
|
|
margin: 8px 0; |
|
|
|
font-size: 0.9rem; |
|
|
|
margin: 10px 0; |
|
|
|
font-size: 16px; |
|
|
|
color: #fff; |
|
|
|
line-height: 1.7; |
|
|
|
} |
|
|
|
|
|
|
|
.close-btn { |
|
|
|
@ -1025,8 +1041,8 @@ const hideRules = () => { |
|
|
|
background-size: 100%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-position: center; |
|
|
|
width: 120px; |
|
|
|
height: 40px; |
|
|
|
width: 160px; |
|
|
|
height: 60px; |
|
|
|
cursor: pointer; |
|
|
|
transition: transform 0.2s ease; |
|
|
|
} |
|
|
|
|
songtongtong
zhangjiahao