|
|
@ -27,16 +27,21 @@ |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill"></div> |
|
|
<div class="progress-fill"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- 美股区域刻度 --> |
|
|
<div class="time-markers"> |
|
|
<div class="time-markers"> |
|
|
<div class="marker" v-for="time in [0, 3, 6, 9, 12, 15]" :key="time"> |
|
|
|
|
|
|
|
|
<div class="marker marker-text" v-for="time in timeMarkers" :key="time" :class="{ |
|
|
|
|
|
'reached': (15 - usUsedTime) <= time, |
|
|
|
|
|
'gold': (15 - usUsedTime) > time |
|
|
|
|
|
}"> |
|
|
{{ time }} |
|
|
{{ time }} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<!-- 美股剩余时间显示 --> |
|
|
<div class="stock-info"> |
|
|
<div class="stock-info"> |
|
|
<h3>距美股实时数据</h3> |
|
|
<h3>距美股实时数据</h3> |
|
|
<h3>还剩15分钟</h3> |
|
|
|
|
|
|
|
|
<h3>还剩{{ numberToChinese(usDisplayTime) }}分钟</h3> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
@ -66,17 +71,22 @@ |
|
|
<div class="stock-content"> |
|
|
<div class="stock-content"> |
|
|
<div class="stock-card hk-card"> |
|
|
<div class="stock-card hk-card"> |
|
|
<div class="card-content hk-content"> |
|
|
<div class="card-content hk-content"> |
|
|
|
|
|
<!-- 港股剩余时间显示 --> |
|
|
<div class="stock-info"> |
|
|
<div class="stock-info"> |
|
|
<h3>距港股实时数据</h3> |
|
|
<h3>距港股实时数据</h3> |
|
|
<h3>还剩6分钟</h3> |
|
|
|
|
|
|
|
|
<h3>还剩{{ numberToChinese(hkDisplayTime) }}分钟</h3> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="progress-section"> |
|
|
<div class="progress-section"> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill"></div> |
|
|
<div class="progress-fill"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- 港股区域刻度 --> |
|
|
<div class="time-markers"> |
|
|
<div class="time-markers"> |
|
|
<div class="marker" v-for="time in [0, 3, 6, 9, 12, 15]" :key="time"> |
|
|
|
|
|
|
|
|
<div class="marker marker-text" v-for="time in timeMarkers" :key="time" :class="{ |
|
|
|
|
|
'reached': (15 - hkUsedTime) <= time, |
|
|
|
|
|
'gold': (15 - hkUsedTime) > time |
|
|
|
|
|
}"> |
|
|
{{ time }} |
|
|
{{ time }} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
@ -116,14 +126,142 @@ |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script setup> |
|
|
<script setup> |
|
|
import { ref } from 'vue' |
|
|
|
|
|
|
|
|
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) |
|
|
|
|
|
} |
|
|
|
|
|
} catch (error) { |
|
|
|
|
|
console.error('请求错误:', error) |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
const numberToChinese = (num) => { |
|
|
|
|
|
const chineseNumbers = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二', '十三', '十四', '十五'] |
|
|
|
|
|
return chineseNumbers[num] || num.toString() |
|
|
|
|
|
} |
|
|
|
|
|
// 进度条高度动态获取 |
|
|
|
|
|
const progressBarRef = ref(null) |
|
|
|
|
|
const progressBarHeight = ref(0) |
|
|
|
|
|
|
|
|
|
|
|
// 更新进度条高度的函数 |
|
|
|
|
|
const updateProgressBarHeight = () => { |
|
|
|
|
|
if (progressBarRef.value) { |
|
|
|
|
|
progressBarHeight.value = progressBarRef.value.offsetHeight |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 时间刻度标记 - 从小到大排列（0在顶部，15在底部） |
|
|
|
|
|
const timeMarkers = computed(() => { |
|
|
|
|
|
return [0, 3, 6, 9, 12, 15] |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
// 获取进度条高度百分比 - 配合刻度逻辑 |
|
|
|
|
|
const getProgressHeight = (remainingMinutes, totalMinutes = 15) => { |
|
|
|
|
|
// 剩余时间越少，进度条越满（从底部向上填充） |
|
|
|
|
|
// remainingMinutes = totalMinutes 时，返回 0%（空的，刚开始） |
|
|
|
|
|
// remainingMinutes = 0 时，返回 100%（满的，时间用完） |
|
|
|
|
|
const usedMinutes = totalMinutes - remainingMinutes |
|
|
|
|
|
return Math.max((usedMinutes / totalMinutes) * 100, 0) |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 添加活动规则弹窗状态 |
|
|
|
|
|
const showRules = ref(false) |
|
|
|
|
|
|
|
|
|
|
|
// 原有的组件状态 |
|
|
const activeArea = ref(null) |
|
|
const activeArea = ref(null) |
|
|
const usBoostStatus = ref(false) // 美股助力状态 |
|
|
|
|
|
const hkBoostStatus = ref(false) // 港股助力状态 |
|
|
|
|
|
const showRulesModal = ref(false) // 活动规则弹窗显示状态 |
|
|
|
|
|
|
|
|
const usBoostStatus = ref(false) |
|
|
|
|
|
const hkBoostStatus = ref(false) |
|
|
|
|
|
const showRulesModal = ref(false) |
|
|
|
|
|
|
|
|
|
|
|
// 剩余时间数据 - 可控制的初始值 |
|
|
|
|
|
const usRemainingTime = ref(9) // 美股剩余分钟 |
|
|
|
|
|
const hkRemainingTime = ref(6) // 港股剩余分钟 |
|
|
|
|
|
const usTotalTime = ref(15) // 美股总时间15分钟 |
|
|
|
|
|
const hkTotalTime = ref(15) // 港股总时间15分钟 |
|
|
|
|
|
|
|
|
|
|
|
// 计算属性：根据剩余时间计算进度条高度 |
|
|
|
|
|
const usProgressHeight = computed(() => { |
|
|
|
|
|
return getProgressHeight(usRemainingTime.value, usTotalTime.value) |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
const hkProgressHeight = computed(() => { |
|
|
|
|
|
return getProgressHeight(hkRemainingTime.value, hkTotalTime.value) |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
// 计算属性：显示的剩余时间 |
|
|
|
|
|
const usDisplayTime = computed(() => { |
|
|
|
|
|
return Math.max(0, usRemainingTime.value) |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
const hkDisplayTime = computed(() => { |
|
|
|
|
|
return Math.max(0, hkRemainingTime.value) |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
// 计算已使用时间用于刻度显示 |
|
|
|
|
|
const usUsedTime = computed(() => { |
|
|
|
|
|
return usTotalTime.value - usRemainingTime.value |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
const hkUsedTime = computed(() => { |
|
|
|
|
|
return hkTotalTime.value - hkRemainingTime.value |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
// 监听剩余时间变化，更新进度条 |
|
|
|
|
|
watch([usRemainingTime, hkRemainingTime], () => { |
|
|
|
|
|
nextTick(() => { |
|
|
|
|
|
updateProgressDisplay() |
|
|
|
|
|
}) |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
// 更新进度条显示 |
|
|
|
|
|
const updateProgressDisplay = () => { |
|
|
|
|
|
// 更新美股进度条 |
|
|
|
|
|
const usFill = document.querySelector('.us-content .progress-fill') |
|
|
|
|
|
if (usFill) { |
|
|
|
|
|
usFill.style.height = `${usProgressHeight.value}%` |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 更新港股进度条 |
|
|
|
|
|
const hkFill = document.querySelector('.hk-content .progress-fill') |
|
|
|
|
|
if (hkFill) { |
|
|
|
|
|
hkFill.style.height = `${hkProgressHeight.value}%` |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 组件挂载时初始化 |
|
|
|
|
|
onMounted(() => { |
|
|
|
|
|
nextTick(() => { |
|
|
|
|
|
updateProgressBarHeight() |
|
|
|
|
|
updateProgressDisplay() |
|
|
|
|
|
|
|
|
|
|
|
// 添加窗口大小改变监听 |
|
|
|
|
|
window.addEventListener('resize', () => { |
|
|
|
|
|
nextTick(() => { |
|
|
|
|
|
updateProgressBarHeight() |
|
|
|
|
|
}) |
|
|
|
|
|
}) |
|
|
|
|
|
}) |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
// 模拟时间减少的函数（用于测试） |
|
|
|
|
|
const simulateTimeDecrease = (area) => { |
|
|
|
|
|
if (area === 'us' && usRemainingTime.value > 0) { |
|
|
|
|
|
usRemainingTime.value = Math.max(0, usRemainingTime.value - 1) |
|
|
|
|
|
} else if (area === 'hk' && hkRemainingTime.value > 0) { |
|
|
|
|
|
hkRemainingTime.value = Math.max(0, hkRemainingTime.value - 1) |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handleAreaClick = (area) => { |
|
|
const handleAreaClick = (area) => { |
|
|
if (activeArea.value === area) { |
|
|
if (activeArea.value === area) { |
|
|
@ -133,18 +271,51 @@ const handleAreaClick = (area) => { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const handleBoostClick = (area) => { |
|
|
|
|
|
|
|
|
const handleBoostClick = async (area) => { |
|
|
if (area === 'us' && !usBoostStatus.value) { |
|
|
if (area === 'us' && !usBoostStatus.value) { |
|
|
|
|
|
try { |
|
|
|
|
|
// 调用助力API |
|
|
|
|
|
const response = await addRecordAPI({ |
|
|
|
|
|
"activityId": 1, |
|
|
|
|
|
"marketSign": "usa" |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
if (response.code === 200) { |
|
|
usBoostStatus.value = true |
|
|
usBoostStatus.value = true |
|
|
console.log('美股已助力'); |
|
|
|
|
|
|
|
|
// 助力后减少1分钟时间 |
|
|
|
|
|
simulateTimeDecrease('us') |
|
|
|
|
|
console.log('美股助力成功：', response.message) |
|
|
|
|
|
console.log('美股已助力，剩余时间：', usRemainingTime.value) |
|
|
|
|
|
} else { |
|
|
|
|
|
console.error('美股助力失败：', response.message) |
|
|
|
|
|
} |
|
|
|
|
|
} catch (error) { |
|
|
|
|
|
console.error('美股助力请求失败：', error) |
|
|
|
|
|
} |
|
|
} else if (area === 'hk' && !hkBoostStatus.value) { |
|
|
} else if (area === 'hk' && !hkBoostStatus.value) { |
|
|
|
|
|
try { |
|
|
|
|
|
// 调用助力API |
|
|
|
|
|
const response = await addRecordAPI({ |
|
|
|
|
|
"activityId": 1, |
|
|
|
|
|
"marketSign": "hk" |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
if (response.code === 200) { |
|
|
hkBoostStatus.value = true |
|
|
hkBoostStatus.value = true |
|
|
console.log('港股已助力'); |
|
|
|
|
|
|
|
|
// 助力后减少1分钟时间 |
|
|
|
|
|
simulateTimeDecrease('hk') |
|
|
|
|
|
console.log('港股助力成功：', response.message) |
|
|
|
|
|
console.log('港股已助力，剩余时间：', hkRemainingTime.value) |
|
|
|
|
|
} else { |
|
|
|
|
|
console.error('港股助力失败：', response.message) |
|
|
|
|
|
} |
|
|
|
|
|
} catch (error) { |
|
|
|
|
|
console.error('港股助力请求失败：', error) |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
// 这里可以添加助力相关的业务逻辑 |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const showRules = () => { |
|
|
|
|
|
|
|
|
const showRulesFunc = () => { |
|
|
showRulesModal.value = true |
|
|
showRulesModal.value = true |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@ -152,7 +323,6 @@ const hideRules = () => { |
|
|
showRulesModal.value = false |
|
|
showRulesModal.value = false |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style scoped> |
|
|
<style scoped> |
|
|
/* 禁用页面滚动 */ |
|
|
/* 禁用页面滚动 */ |
|
|
:global(html, body) { |
|
|
:global(html, body) { |
|
|
@ -290,7 +460,15 @@ const hideRules = () => { |
|
|
transform-style: preserve-3d; |
|
|
transform-style: preserve-3d; |
|
|
transform-origin: center center; |
|
|
transform-origin: center center; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* 为所有图片添加渲染优化 */ |
|
|
|
|
|
/* .stock-card img, |
|
|
|
|
|
.rocket-body img, |
|
|
|
|
|
.base-image img { |
|
|
|
|
|
image-rendering: -webkit-optimize-contrast; |
|
|
|
|
|
image-rendering: crisp-edges; |
|
|
|
|
|
-webkit-backface-visibility: hidden; |
|
|
|
|
|
transform: translateZ(0); |
|
|
|
|
|
} */ |
|
|
/* 美股卡片默认位置 - 火箭左侧，向内倾斜 */ |
|
|
/* 美股卡片默认位置 - 火箭左侧，向内倾斜 */ |
|
|
.left-area { |
|
|
.left-area { |
|
|
transform: translateX(-25vw) rotateY(25deg) scale(1.5); |
|
|
transform: translateX(-25vw) rotateY(25deg) scale(1.5); |
|
|
@ -344,7 +522,10 @@ const hideRules = () => { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
z-index: 10; |
|
|
z-index: 10; |
|
|
transform: translateZ(0); |
|
|
transform: translateZ(0); |
|
|
transition: opacity 0.5s ease; |
|
|
|
|
|
|
|
|
/* 新增位置调整 */ |
|
|
|
|
|
top: 80%; /* 垂直居中，可调整为具体像素值如 100px */ |
|
|
|
|
|
left: 50%; /* 水平居中，可调整为具体像素值如 200px */ |
|
|
|
|
|
transform: translate(-50%, -50%) translateZ(0); /* 居中偏移 */ |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.rocket-area.hidden { |
|
|
.rocket-area.hidden { |
|
|
@ -404,6 +585,7 @@ const hideRules = () => { |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
flex-direction: column; |
|
|
justify-content: flex-start; |
|
|
justify-content: flex-start; |
|
|
|
|
|
/* 从 flex-start 改为 center */ |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
min-width: 0; |
|
|
min-width: 0; |
|
|
/* 允许flex项目收缩到内容以下 */ |
|
|
/* 允许flex项目收缩到内容以下 */ |
|
|
@ -414,7 +596,7 @@ const hideRules = () => { |
|
|
/* 股票信息标题样式 */ |
|
|
/* 股票信息标题样式 */ |
|
|
.stock-info h3 { |
|
|
.stock-info h3 { |
|
|
margin: 5px 0; |
|
|
margin: 5px 0; |
|
|
font-size: 1rem; |
|
|
|
|
|
|
|
|
font-size: 1.33rem; |
|
|
line-height: 1.2; |
|
|
line-height: 1.2; |
|
|
word-wrap: break-word; |
|
|
word-wrap: break-word; |
|
|
/* 允许长单词换行 */ |
|
|
/* 允许长单词换行 */ |
|
|
@ -424,20 +606,77 @@ const hideRules = () => { |
|
|
/* 自动断字 */ |
|
|
/* 自动断字 */ |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 进度条区域 */ |
|
|
|
|
|
|
|
|
/* 通用进度条区域样式 */ |
|
|
.progress-section { |
|
|
.progress-section { |
|
|
display: flex; |
|
|
display: flex; |
|
|
align-items: flex-start; |
|
|
|
|
|
|
|
|
align-items: center; |
|
|
|
|
|
justify-content: center; |
|
|
gap: 15px; |
|
|
gap: 15px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* 美股内容布局 - 进度条在右边，刻度在左边 */ |
|
|
|
|
|
.us-content { |
|
|
|
|
|
flex-direction: row; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.us-content .progress-section { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
gap: 15px; |
|
|
|
|
|
flex-direction: row-reverse; |
|
|
|
|
|
/* 刻度在左，进度条在右 */ |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* 港股内容布局 - 进度条在左边，刻度在右边 */ |
|
|
|
|
|
.hk-content { |
|
|
|
|
|
flex-direction: row; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.hk-content .progress-section { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
gap: 15px; |
|
|
|
|
|
flex-direction: row; |
|
|
|
|
|
/* 进度条在左，刻度在右 */ |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* 默认进度条容器样式 */ |
|
|
.progress-bar { |
|
|
.progress-bar { |
|
|
width: 20px; |
|
|
width: 20px; |
|
|
height: 200px; |
|
|
|
|
|
background: rgba(255, 255, 255, 0.2); |
|
|
|
|
|
|
|
|
height: 350px; |
|
|
border-radius: 10px; |
|
|
border-radius: 10px; |
|
|
position: relative; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
|
|
|
|
|
|
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) |
|
|
|
|
|
); |
|
|
|
|
|
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) |
|
|
|
|
|
); |
|
|
|
|
|
border: 1px solid rgba(255, 87, 34, 0.5); |
|
|
|
|
|
box-shadow: 0 0 10px rgba(255, 87, 34, 0.3); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.time-markers { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
height: 350px; |
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
align-items: center; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 股票内容容器 */ |
|
|
/* 股票内容容器 */ |
|
|
@ -467,8 +706,8 @@ const hideRules = () => { |
|
|
background-size: contain; |
|
|
background-size: contain; |
|
|
background-repeat: no-repeat; |
|
|
background-repeat: no-repeat; |
|
|
background-position: center; |
|
|
background-position: center; |
|
|
width: 200px; |
|
|
|
|
|
height: 60px; |
|
|
|
|
|
|
|
|
width: 240px; |
|
|
|
|
|
height: 80px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 美股助力按钮 */ |
|
|
/* 美股助力按钮 */ |
|
|
@ -493,47 +732,114 @@ const hideRules = () => { |
|
|
|
|
|
|
|
|
/* 底座样式 */ |
|
|
/* 底座样式 */ |
|
|
.base-image { |
|
|
.base-image { |
|
|
margin-top: -10px; |
|
|
|
|
|
|
|
|
margin-top: -65px; |
|
|
z-index: 1; |
|
|
z-index: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.base-image img { |
|
|
.base-image img { |
|
|
width: auto; |
|
|
width: auto; |
|
|
height: 40px; |
|
|
|
|
|
|
|
|
height: 130px; |
|
|
display: block; |
|
|
display: block; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* 默认进度条填充样式 */ |
|
|
.progress-fill { |
|
|
.progress-fill { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
bottom: 0; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
background: linear-gradient(to top, #00ff00, #ffaa00, #ff4444); |
|
|
|
|
|
border-radius: 10px; |
|
|
border-radius: 10px; |
|
|
transition: height 0.8s ease; |
|
|
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: ''; |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
top: -25px; |
|
|
|
|
|
/* 火箭位置在填充部分顶部上方 */ |
|
|
|
|
|
left: 50%; |
|
|
|
|
|
transform: translateX(-50%); |
|
|
|
|
|
width: 100px; |
|
|
|
|
|
height: 100px; |
|
|
|
|
|
background-image: url('@/assets/img/zhongchou/rocket.gif'); |
|
|
|
|
|
background-size: contain; |
|
|
|
|
|
background-repeat: no-repeat; |
|
|
|
|
|
background-position: center; |
|
|
|
|
|
z-index: 10; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.us-card .progress-fill { |
|
|
|
|
|
height: 20%; |
|
|
|
|
|
|
|
|
.marker { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
color: #FFD700; |
|
|
|
|
|
/* 默认金色 */ |
|
|
|
|
|
font-size: 1.4rem; |
|
|
|
|
|
font-weight: 700; |
|
|
|
|
|
font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; |
|
|
|
|
|
text-shadow: 0 0 8px rgba(255, 215, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.3); |
|
|
|
|
|
transition: all 0.5s ease; |
|
|
|
|
|
letter-spacing: 0.5px; |
|
|
|
|
|
text-rendering: optimizeLegibility; |
|
|
|
|
|
} |
|
|
|
|
|
/* 为刻度数字添加连接线 */ |
|
|
|
|
|
.marker::before { |
|
|
|
|
|
content: ''; |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
top: 50%; |
|
|
|
|
|
width: 15px; |
|
|
|
|
|
height: 1px; |
|
|
|
|
|
background-color: currentColor; |
|
|
|
|
|
opacity: 0.6; |
|
|
|
|
|
transition: all 0.5s ease; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.hk-card .progress-fill { |
|
|
|
|
|
height: 60%; |
|
|
|
|
|
|
|
|
/* 美股刻度连接线 - 从右侧连接到进度条 */ |
|
|
|
|
|
.us-content .marker::before { |
|
|
|
|
|
right: -20px; |
|
|
|
|
|
background-color: #00BFFF; /* 蓝色 */ |
|
|
|
|
|
box-shadow: 0 0 4px rgba(0, 191, 255, 0.5); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.time-markers { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: column-reverse; |
|
|
|
|
|
height: 200px; |
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
/* 港股刻度连接线 - 从左侧连接到进度条 */ |
|
|
|
|
|
.hk-content .marker::before { |
|
|
|
|
|
left: -20px; |
|
|
|
|
|
background-color: #FF4444; /* 红色 */ |
|
|
|
|
|
box-shadow: 0 0 4px rgba(255, 68, 68, 0.5); |
|
|
|
|
|
} |
|
|
|
|
|
/* 美股激活刻度 */ |
|
|
|
|
|
.us-content .marker.reached { |
|
|
|
|
|
color: #00BFFF !important; |
|
|
|
|
|
text-shadow: 0 0 10px rgba(0, 191, 255, 0.8) !important; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.marker { |
|
|
|
|
|
color: #fff; |
|
|
|
|
|
font-size: 0.9rem; |
|
|
|
|
|
text-shadow: 0 0 5px rgba(255, 255, 255, 0.8); |
|
|
|
|
|
|
|
|
/* 港股激活刻度 */ |
|
|
|
|
|
.hk-content .marker.reached { |
|
|
|
|
|
color: #FF4444 !important; |
|
|
|
|
|
text-shadow: 0 0 10px rgba(255, 68, 68, 0.8) !important; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* 刻度字体增强样式 */ |
|
|
|
|
|
/* .marker-text { |
|
|
|
|
|
font-weight: bold; |
|
|
|
|
|
font-family: 'Arial Black', sans-serif; |
|
|
|
|
|
color: transparent; |
|
|
|
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); |
|
|
|
|
|
-webkit-background-clip: text; |
|
|
|
|
|
background-clip: text; |
|
|
|
|
|
-webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.6); |
|
|
|
|
|
text-stroke: 1.5px rgba(255, 255, 255, 0.6); |
|
|
|
|
|
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3), 0 0 20px rgba(255, 255, 255, 0.2); |
|
|
|
|
|
filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.2)); |
|
|
|
|
|
isolation: isolate; |
|
|
|
|
|
z-index: 17; |
|
|
|
|
|
position: relative; |
|
|
|
|
|
} */ |
|
|
.us-btn { |
|
|
.us-btn { |
|
|
background: linear-gradient(45deg, #0066cc, #0099ff); |
|
|
background: linear-gradient(45deg, #0066cc, #0099ff); |
|
|
color: white; |
|
|
color: white; |
|
|
@ -580,10 +886,10 @@ const hideRules = () => { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.rocket-body img { |
|
|
.rocket-body img { |
|
|
width: 12vw; |
|
|
|
|
|
|
|
|
width: 15vw; |
|
|
height: auto; |
|
|
height: auto; |
|
|
min-width: 80px; |
|
|
|
|
|
max-width: 200px; |
|
|
|
|
|
|
|
|
min-width: 100px; |
|
|
|
|
|
max-width: 250px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 动画效果 */ |
|
|
/* 动画效果 */ |
|
|
|
zhangjiahao
4 weeks ago