|
@ -130,18 +130,18 @@ import { addRecordAPI ,getActivity1API } from '../../api/API' |
|
|
import { ref, computed, onMounted, nextTick, watch } from 'vue' |
|
|
import { ref, computed, onMounted, nextTick, watch } from 'vue' |
|
|
// 在组件中使用 |
|
|
// 在组件中使用 |
|
|
async function fetchActivity() { |
|
|
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 numberToChinese = (num) => { |
|
|
const chineseNumbers = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二', '十三', '十四', '十五'] |
|
|
const chineseNumbers = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二', '十三', '十四', '十五'] |
|
@ -239,6 +239,8 @@ const updateProgressDisplay = () => { |
|
|
// 组件挂载时初始化 |
|
|
// 组件挂载时初始化 |
|
|
onMounted(() => { |
|
|
onMounted(() => { |
|
|
nextTick(() => { |
|
|
nextTick(() => { |
|
|
|
|
|
// 页面加载时自动获取活动数据 |
|
|
|
|
|
fetchActivity() |
|
|
updateProgressBarHeight() |
|
|
updateProgressBarHeight() |
|
|
updateProgressDisplay() |
|
|
updateProgressDisplay() |
|
|
|
|
|
|
|
@ -278,7 +280,7 @@ const handleBoostClick = async (area) => { |
|
|
"activityId": 1, |
|
|
"activityId": 1, |
|
|
"marketSign": "usa" |
|
|
"marketSign": "usa" |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (response.code === 200) { |
|
|
if (response.code === 200) { |
|
|
usBoostStatus.value = true |
|
|
usBoostStatus.value = true |
|
|
// 助力后减少1分钟时间 |
|
|
// 助力后减少1分钟时间 |
|
@ -298,7 +300,7 @@ const handleBoostClick = async (area) => { |
|
|
"activityId": 1, |
|
|
"activityId": 1, |
|
|
"marketSign": "hk" |
|
|
"marketSign": "hk" |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (response.code === 200) { |
|
|
if (response.code === 200) { |
|
|
hkBoostStatus.value = true |
|
|
hkBoostStatus.value = true |
|
|
// 助力后减少1分钟时间 |
|
|
// 助力后减少1分钟时间 |
|
@ -461,6 +463,7 @@ const hideRules = () => { |
|
|
transform-style: preserve-3d; |
|
|
transform-style: preserve-3d; |
|
|
transform-origin: center center; |
|
|
transform-origin: center center; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 为所有图片添加渲染优化 */ |
|
|
/* 为所有图片添加渲染优化 */ |
|
|
/* .stock-card img, |
|
|
/* .stock-card img, |
|
|
.rocket-body img, |
|
|
.rocket-body img, |
|
@ -523,10 +526,13 @@ const hideRules = () => { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
z-index: 10; |
|
|
z-index: 10; |
|
|
transform: translateZ(0); |
|
|
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 { |
|
|
.rocket-area.hidden { |
|
@ -651,23 +657,23 @@ const hideRules = () => { |
|
|
position: relative; |
|
|
position: relative; |
|
|
overflow: visible; |
|
|
overflow: visible; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 美股进度条容器 - 蓝色主题背景 */ |
|
|
/* 美股进度条容器 - 蓝色主题背景 */ |
|
|
.us-content .progress-bar { |
|
|
.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); |
|
|
border: 1px solid rgba(41, 182, 246, 0.5); |
|
|
box-shadow: 0 0 10px rgba(41, 182, 246, 0.3); |
|
|
box-shadow: 0 0 10px rgba(41, 182, 246, 0.3); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 港股进度条容器 - 红色主题背景 */ |
|
|
/* 港股进度条容器 - 红色主题背景 */ |
|
|
.hk-content .progress-bar { |
|
|
.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); |
|
|
border: 1px solid rgba(255, 87, 34, 0.5); |
|
|
box-shadow: 0 0 10px rgba(255, 87, 34, 0.3); |
|
|
box-shadow: 0 0 10px rgba(255, 87, 34, 0.3); |
|
|
} |
|
|
} |
|
@ -752,14 +758,17 @@ const hideRules = () => { |
|
|
border-radius: 10px; |
|
|
border-radius: 10px; |
|
|
transition: height 0.8s ease; |
|
|
transition: height 0.8s ease; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 美股进度条填充 - 蓝色系渐变 */ |
|
|
/* 美股进度条填充 - 蓝色系渐变 */ |
|
|
.us-content .progress-fill { |
|
|
.us-content .progress-fill { |
|
|
background: linear-gradient(to top, #4FC3F7, #29B6F6, #0288D1); |
|
|
background: linear-gradient(to top, #4FC3F7, #29B6F6, #0288D1); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 港股进度条填充 - 红色系渐变 */ |
|
|
/* 港股进度条填充 - 红色系渐变 */ |
|
|
.hk-content .progress-fill { |
|
|
.hk-content .progress-fill { |
|
|
background: linear-gradient(to top, #FF8A80, #FF5722, #D32F2F); |
|
|
background: linear-gradient(to top, #FF8A80, #FF5722, #D32F2F); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 在进度条填充部分顶部添加火箭gif */ |
|
|
/* 在进度条填充部分顶部添加火箭gif */ |
|
|
.progress-fill::after { |
|
|
.progress-fill::after { |
|
|
content: ''; |
|
|
content: ''; |
|
@ -778,7 +787,7 @@ const hideRules = () => { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.marker { |
|
|
.marker { |
|
|
position: relative; |
|
|
|
|
|
|
|
|
position: relative; |
|
|
color: #FFD700; |
|
|
color: #FFD700; |
|
|
/* 默认金色 */ |
|
|
/* 默认金色 */ |
|
|
font-size: 1.4rem; |
|
|
font-size: 1.4rem; |
|
@ -789,6 +798,7 @@ const hideRules = () => { |
|
|
letter-spacing: 0.5px; |
|
|
letter-spacing: 0.5px; |
|
|
text-rendering: optimizeLegibility; |
|
|
text-rendering: optimizeLegibility; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 为刻度数字添加连接线 */ |
|
|
/* 为刻度数字添加连接线 */ |
|
|
.marker::before { |
|
|
.marker::before { |
|
|
content: ''; |
|
|
content: ''; |
|
@ -803,17 +813,20 @@ const hideRules = () => { |
|
|
|
|
|
|
|
|
/* 美股刻度连接线 - 从右侧连接到进度条 */ |
|
|
/* 美股刻度连接线 - 从右侧连接到进度条 */ |
|
|
.us-content .marker::before { |
|
|
.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); |
|
|
box-shadow: 0 0 4px rgba(0, 191, 255, 0.5); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 港股刻度连接线 - 从左侧连接到进度条 */ |
|
|
/* 港股刻度连接线 - 从左侧连接到进度条 */ |
|
|
.hk-content .marker::before { |
|
|
.hk-content .marker::before { |
|
|
left: -20px; |
|
|
left: -20px; |
|
|
background-color: #FF4444; /* 红色 */ |
|
|
|
|
|
|
|
|
background-color: #FF4444; |
|
|
|
|
|
/* 红色 */ |
|
|
box-shadow: 0 0 4px rgba(255, 68, 68, 0.5); |
|
|
box-shadow: 0 0 4px rgba(255, 68, 68, 0.5); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 美股激活刻度 */ |
|
|
/* 美股激活刻度 */ |
|
|
.us-content .marker.reached { |
|
|
.us-content .marker.reached { |
|
|
color: #00BFFF !important; |
|
|
color: #00BFFF !important; |
|
|