|
|
|
@ -24,24 +24,28 @@ |
|
|
|
<div class="stock-card us-card"> |
|
|
|
<div class="card-content us-content"> |
|
|
|
<div class="progress-section"> |
|
|
|
<div class="progress-bar"> |
|
|
|
<div class="progress-fill"></div> |
|
|
|
</div> |
|
|
|
<!-- 美股区域刻度 --> |
|
|
|
<div class="time-markers"> |
|
|
|
<div class="marker marker-text" v-for="time in timeMarkers" :key="time" :class="{ |
|
|
|
'reached': (15 - usUsedTime) <= time, |
|
|
|
'gold': (15 - usUsedTime) > time |
|
|
|
}"> |
|
|
|
<div class="marker" |
|
|
|
v-for="time in [15, 12, 9, 6, 3, 0]" |
|
|
|
:key="time" |
|
|
|
:class="{ |
|
|
|
'marker-orange': time <= 3, |
|
|
|
'marker-blue': time >= 6 |
|
|
|
}"> |
|
|
|
{{ time }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="progress-bar"> |
|
|
|
<div class="progress-fill" :style="{ height: (100 - usProgress) + '%' }"></div> |
|
|
|
<div class="mini-rocket us-mini-rocket" :style="{ bottom: (100 - usProgress - 20) + '%' }"> |
|
|
|
<img src="@/assets/img/zhongchou/rocket.gif" alt="小火箭" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 美股剩余时间显示 --> |
|
|
|
<div class="stock-info"> |
|
|
|
<h3>距美股实时数据</h3> |
|
|
|
<h3>还剩{{ numberToChinese(usDisplayTime) }}分钟</h3> |
|
|
|
<h3>还剩6分钟</h3> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -71,22 +75,26 @@ |
|
|
|
<div class="stock-content"> |
|
|
|
<div class="stock-card hk-card"> |
|
|
|
<div class="card-content hk-content"> |
|
|
|
<!-- 港股剩余时间显示 --> |
|
|
|
<div class="stock-info"> |
|
|
|
<h3>距港股实时数据</h3> |
|
|
|
<h3>还剩{{ numberToChinese(hkDisplayTime) }}分钟</h3> |
|
|
|
<h3>还剩9分钟</h3> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="progress-section"> |
|
|
|
<div class="progress-bar"> |
|
|
|
<div class="progress-fill"></div> |
|
|
|
<div class="progress-fill" :style="{ height: (100 - hkProgress) + '%' }"></div> |
|
|
|
<div class="mini-rocket hk-mini-rocket" :style="{ bottom: (100 - hkProgress - 20) + '%' }"> |
|
|
|
<img src="@/assets/img/zhongchou/rocket.gif" alt="小火箭" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 港股区域刻度 --> |
|
|
|
<div class="time-markers"> |
|
|
|
<div class="marker marker-text" v-for="time in timeMarkers" :key="time" :class="{ |
|
|
|
'reached': (15 - hkUsedTime) <= time, |
|
|
|
'gold': (15 - hkUsedTime) > time |
|
|
|
}"> |
|
|
|
<div class="marker" |
|
|
|
v-for="time in [15, 12, 9, 6, 3, 0]" |
|
|
|
:key="time" |
|
|
|
:class="{ |
|
|
|
'marker-orange': time <= 3, |
|
|
|
'marker-red': time >= 6 |
|
|
|
}"> |
|
|
|
{{ time }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -113,11 +121,10 @@ |
|
|
|
<div class="rules-list"> |
|
|
|
<p>1. 活动时间为2025年7月26日-2025年8月5日。</p> |
|
|
|
<p>2. 每人每天有3个活动助力参与机会。</p> |
|
|
|
<p>3. 助力时间为15分钟，每一个人参与助力，即可时间</p> |
|
|
|
<p> 分钟！</p> |
|
|
|
<p>3. 助力时间为15分钟，每一个人参与助力，即可时间分钟！</p> |
|
|
|
<p>4. 助力成功后，平台服务市场将获取实时数据！</p> |
|
|
|
<p>5. 平台对数据众筹上线后，您的方案数据将优化成对应</p> |
|
|
|
<p> 大数据的实时数据优化参考。</p> |
|
|
|
<p>5. 平台对数据众筹上线后，您的方案数据将优化成对应大数据的实时数据优化</p> |
|
|
|
<p>参考。</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="close-btn" @click="hideRules"></div> |
|
|
|
@ -126,142 +133,18 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script setup> |
|
|
|
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) |
|
|
|
<script setup> |
|
|
|
import { ref } from 'vue' |
|
|
|
|
|
|
|
// 原有的组件状态 |
|
|
|
const activeArea = ref(null) |
|
|
|
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 usBoostStatus = ref(false) // 美股助力状态 |
|
|
|
const hkBoostStatus = ref(false) // 港股助力状态 |
|
|
|
const showRulesModal = ref(false) // 活动规则弹窗显示状态 |
|
|
|
|
|
|
|
// 进度状态 - 倒计时逻辑：数值越小，温度计越高 |
|
|
|
const usProgress = ref(40) // 美股进度 (40% = 还剩9分钟) |
|
|
|
const hkProgress = ref(60) // 港股进度 (60% = 还剩6分钟) |
|
|
|
|
|
|
|
const handleAreaClick = (area) => { |
|
|
|
if (activeArea.value === area) { |
|
|
|
@ -271,58 +154,33 @@ const handleAreaClick = (area) => { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const handleBoostClick = async (area) => { |
|
|
|
const handleBoostClick = (area) => { |
|
|
|
if (area === 'us' && !usBoostStatus.value) { |
|
|
|
try { |
|
|
|
// 调用助力API |
|
|
|
const response = await addRecordAPI({ |
|
|
|
"activityId": 1, |
|
|
|
"marketSign": "usa" |
|
|
|
}); |
|
|
|
|
|
|
|
if (response.code === 200) { |
|
|
|
usBoostStatus.value = true |
|
|
|
// 助力后减少1分钟时间 |
|
|
|
simulateTimeDecrease('us') |
|
|
|
console.log('美股助力成功：', response.message) |
|
|
|
console.log('美股已助力，剩余时间：', usRemainingTime.value) |
|
|
|
} else { |
|
|
|
console.error('美股助力失败：', response.message) |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
console.error('美股助力请求失败：', error) |
|
|
|
} |
|
|
|
usBoostStatus.value = true |
|
|
|
console.log('美股已助力'); |
|
|
|
} else if (area === 'hk' && !hkBoostStatus.value) { |
|
|
|
try { |
|
|
|
// 调用助力API |
|
|
|
const response = await addRecordAPI({ |
|
|
|
"activityId": 1, |
|
|
|
"marketSign": "hk" |
|
|
|
}); |
|
|
|
|
|
|
|
if (response.code === 200) { |
|
|
|
hkBoostStatus.value = true |
|
|
|
// 助力后减少1分钟时间 |
|
|
|
simulateTimeDecrease('hk') |
|
|
|
console.log('港股助力成功：', response.message) |
|
|
|
console.log('港股已助力，剩余时间：', hkRemainingTime.value) |
|
|
|
} else { |
|
|
|
console.error('港股助力失败：', response.message) |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
console.error('港股助力请求失败：', error) |
|
|
|
} |
|
|
|
hkBoostStatus.value = true |
|
|
|
console.log('港股已助力'); |
|
|
|
} |
|
|
|
// 这里可以添加助力相关的业务逻辑 |
|
|
|
} |
|
|
|
|
|
|
|
const showRulesFunc = () => { |
|
|
|
const showRules = () => { |
|
|
|
showRulesModal.value = true |
|
|
|
} |
|
|
|
|
|
|
|
const hideRules = () => { |
|
|
|
showRulesModal.value = false |
|
|
|
} |
|
|
|
|
|
|
|
// 测试进度变化函数（可以删除） |
|
|
|
const testProgressChange = () => { |
|
|
|
// 模拟倒计时进度变化：数值增加，温度计升高 |
|
|
|
usProgress.value = Math.min(100, usProgress.value + 10) |
|
|
|
hkProgress.value = Math.min(100, hkProgress.value + 10) |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
/* 禁用页面滚动 */ |
|
|
|
:global(html, body) { |
|
|
|
@ -370,6 +228,7 @@ const hideRules = () => { |
|
|
|
justify-content: center; |
|
|
|
flex: 1; |
|
|
|
gap: 10px; |
|
|
|
margin-left: 70px; /* 往右移动大标题 */ |
|
|
|
} |
|
|
|
|
|
|
|
/* 主标题图片响应式样式 */ |
|
|
|
@ -397,8 +256,8 @@ const hideRules = () => { |
|
|
|
|
|
|
|
.rules-text { |
|
|
|
color: #fff; |
|
|
|
font-size: 12px; |
|
|
|
font-weight: 500; |
|
|
|
font-size: 16px; |
|
|
|
font-weight: 600; |
|
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
@ -423,11 +282,26 @@ const hideRules = () => { |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-size: contain; |
|
|
|
background-position: center; |
|
|
|
font-size: 1.2rem; |
|
|
|
color: rgba(255, 255, 255, 0.9); |
|
|
|
font-size: 1.4rem; |
|
|
|
font-weight: 600; |
|
|
|
color: #fff; |
|
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 255, 255, 0.3); |
|
|
|
display: inline-block; |
|
|
|
padding: 10px 20px; |
|
|
|
padding: 12px 25px; |
|
|
|
min-width: fit-content; |
|
|
|
border-radius: 8px; |
|
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); |
|
|
|
transition: all 0.3s ease; |
|
|
|
animation: glow 2s ease-in-out infinite alternate; |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes glow { |
|
|
|
from { |
|
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 255, 255, 0.3); |
|
|
|
} |
|
|
|
to { |
|
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 255, 255, 0.6), 0 0 30px rgba(255, 255, 255, 0.4); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@ -460,15 +334,7 @@ const hideRules = () => { |
|
|
|
transform-style: preserve-3d; |
|
|
|
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 { |
|
|
|
transform: translateX(-25vw) rotateY(25deg) scale(1.5); |
|
|
|
@ -522,10 +388,7 @@ const hideRules = () => { |
|
|
|
position: absolute; |
|
|
|
z-index: 10; |
|
|
|
transform: translateZ(0); |
|
|
|
/* 新增位置调整 */ |
|
|
|
top: 80%; /* 垂直居中，可调整为具体像素值如 100px */ |
|
|
|
left: 50%; /* 水平居中，可调整为具体像素值如 200px */ |
|
|
|
transform: translate(-50%, -50%) translateZ(0); /* 居中偏移 */ |
|
|
|
transition: opacity 0.5s ease; |
|
|
|
} |
|
|
|
|
|
|
|
.rocket-area.hidden { |
|
|
|
@ -585,7 +448,6 @@ const hideRules = () => { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: flex-start; |
|
|
|
/* 从 flex-start 改为 center */ |
|
|
|
align-items: center; |
|
|
|
min-width: 0; |
|
|
|
/* 允许flex项目收缩到内容以下 */ |
|
|
|
@ -596,7 +458,7 @@ const hideRules = () => { |
|
|
|
/* 股票信息标题样式 */ |
|
|
|
.stock-info h3 { |
|
|
|
margin: 5px 0; |
|
|
|
font-size: 1.33rem; |
|
|
|
font-size: 1rem; |
|
|
|
line-height: 1.2; |
|
|
|
word-wrap: break-word; |
|
|
|
/* 允许长单词换行 */ |
|
|
|
@ -606,77 +468,96 @@ const hideRules = () => { |
|
|
|
/* 自动断字 */ |
|
|
|
} |
|
|
|
|
|
|
|
/* 通用进度条区域样式 */ |
|
|
|
/* 进度条区域 */ |
|
|
|
.progress-section { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
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; |
|
|
|
align-items: flex-start; |
|
|
|
gap: 15px; |
|
|
|
flex-direction: row; |
|
|
|
/* 进度条在左，刻度在右 */ |
|
|
|
} |
|
|
|
|
|
|
|
/* 默认进度条容器样式 */ |
|
|
|
.progress-bar { |
|
|
|
width: 20px; |
|
|
|
height: 350px; |
|
|
|
height: 200px; |
|
|
|
background: rgba(255, 255, 255, 0.8); |
|
|
|
border-radius: 10px; |
|
|
|
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) |
|
|
|
); |
|
|
|
border: 1px solid rgba(41, 182, 246, 0.5); |
|
|
|
box-shadow: 0 0 10px rgba(41, 182, 246, 0.3); |
|
|
|
} |
|
|
|
/* 港股进度条容器 - 红色主题背景 */ |
|
|
|
box-shadow: 0 0 20px rgba(0, 150, 255, 0.8), 0 0 40px rgba(0, 100, 255, 0.4); |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
/* 美股刻度线容器 */ |
|
|
|
.us-content .progress-bar::before { |
|
|
|
content: ''; |
|
|
|
position: absolute; |
|
|
|
left: -10px; |
|
|
|
top: 0; |
|
|
|
width: 10px; |
|
|
|
height: 200px; |
|
|
|
background-image: |
|
|
|
linear-gradient(to right, rgba(0, 150, 255, 0.9) 0%, rgba(0, 150, 255, 0.9) 100%), |
|
|
|
linear-gradient(to right, rgba(0, 150, 255, 0.9) 0%, rgba(0, 150, 255, 0.9) 100%), |
|
|
|
linear-gradient(to right, rgba(0, 150, 255, 0.9) 0%, rgba(0, 150, 255, 0.9) 100%), |
|
|
|
linear-gradient(to right, rgba(0, 150, 255, 0.9) 0%, rgba(0, 150, 255, 0.9) 100%), |
|
|
|
linear-gradient(to right, rgba(0, 150, 255, 0.9) 0%, rgba(0, 150, 255, 0.9) 100%), |
|
|
|
linear-gradient(to right, rgba(0, 150, 255, 0.9) 0%, rgba(0, 150, 255, 0.9) 100%); |
|
|
|
background-size: |
|
|
|
10px 2px, |
|
|
|
10px 2px, |
|
|
|
10px 2px, |
|
|
|
10px 2px, |
|
|
|
10px 2px, |
|
|
|
10px 2px; |
|
|
|
background-position: |
|
|
|
0 5px, /* 15分钟刻度 */ |
|
|
|
0 40px, /* 12分钟刻度 */ |
|
|
|
0 80px, /* 9分钟刻度 */ |
|
|
|
0 120px, /* 6分钟刻度 */ |
|
|
|
0 160px, /* 3分钟刻度 */ |
|
|
|
0 195px; /* 0分钟刻度 */ |
|
|
|
background-repeat: no-repeat; |
|
|
|
} |
|
|
|
|
|
|
|
/* 港股进度条 - 红色发光效果 */ |
|
|
|
.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); |
|
|
|
box-shadow: 0 0 20px rgba(255, 100, 100, 0.8), 0 0 40px rgba(255, 50, 50, 0.4); |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
.time-markers { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
height: 350px; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
/* 港股刻度线容器 */ |
|
|
|
.hk-content .progress-bar::before { |
|
|
|
content: ''; |
|
|
|
position: absolute; |
|
|
|
right: -10px; |
|
|
|
top: 0; |
|
|
|
width: 10px; |
|
|
|
height: 200px; |
|
|
|
background-image: |
|
|
|
linear-gradient(to right, rgba(255, 100, 100, 0.9) 0%, rgba(255, 100, 100, 0.9) 100%), |
|
|
|
linear-gradient(to right, rgba(255, 100, 100, 0.9) 0%, rgba(255, 100, 100, 0.9) 100%), |
|
|
|
linear-gradient(to right, rgba(255, 100, 100, 0.9) 0%, rgba(255, 100, 100, 0.9) 100%), |
|
|
|
linear-gradient(to right, rgba(255, 100, 100, 0.9) 0%, rgba(255, 100, 100, 0.9) 100%), |
|
|
|
linear-gradient(to right, rgba(255, 100, 100, 0.9) 0%, rgba(255, 100, 100, 0.9) 100%), |
|
|
|
linear-gradient(to right, rgba(255, 100, 100, 0.9) 0%, rgba(255, 100, 100, 0.9) 100%); |
|
|
|
background-size: |
|
|
|
10px 2px, |
|
|
|
10px 2px, |
|
|
|
10px 2px, |
|
|
|
10px 2px, |
|
|
|
10px 2px, |
|
|
|
10px 2px; |
|
|
|
background-position: |
|
|
|
0 5px, /* 15分钟刻度 */ |
|
|
|
0 40px, /* 12分钟刻度 */ |
|
|
|
0 80px, /* 9分钟刻度 */ |
|
|
|
0 120px, /* 6分钟刻度 */ |
|
|
|
0 160px, /* 3分钟刻度 */ |
|
|
|
0 195px; /* 0分钟刻度 */ |
|
|
|
background-repeat: no-repeat; |
|
|
|
} |
|
|
|
|
|
|
|
/* 股票内容容器 */ |
|
|
|
@ -706,8 +587,8 @@ const hideRules = () => { |
|
|
|
background-size: contain; |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-position: center; |
|
|
|
width: 240px; |
|
|
|
height: 80px; |
|
|
|
width: 200px; |
|
|
|
height: 60px; |
|
|
|
} |
|
|
|
|
|
|
|
/* 美股助力按钮 */ |
|
|
|
@ -732,17 +613,16 @@ const hideRules = () => { |
|
|
|
|
|
|
|
/* 底座样式 */ |
|
|
|
.base-image { |
|
|
|
margin-top: -65px; |
|
|
|
margin-top: -10px; |
|
|
|
z-index: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.base-image img { |
|
|
|
width: auto; |
|
|
|
height: 130px; |
|
|
|
height: 60px; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
|
|
|
|
/* 默认进度条填充样式 */ |
|
|
|
.progress-fill { |
|
|
|
position: absolute; |
|
|
|
bottom: 0; |
|
|
|
@ -750,96 +630,140 @@ const hideRules = () => { |
|
|
|
border-radius: 10px; |
|
|
|
transition: height 0.8s ease; |
|
|
|
} |
|
|
|
/* 美股进度条填充 - 蓝色系渐变 */ |
|
|
|
.us-content .progress-fill { |
|
|
|
background: linear-gradient(to top, #4FC3F7, #29B6F6, #0288D1); |
|
|
|
|
|
|
|
.us-card .progress-fill { |
|
|
|
background: linear-gradient(to top, #00ccff, #0099ff, #0066cc); |
|
|
|
box-shadow: 0 0 15px rgba(0, 150, 255, 0.9), 0 0 30px rgba(0, 100, 255, 0.6); |
|
|
|
} |
|
|
|
/* 港股进度条填充 - 红色系渐变 */ |
|
|
|
.hk-content .progress-fill { |
|
|
|
background: linear-gradient(to top, #FF8A80, #FF5722, #D32F2F); |
|
|
|
|
|
|
|
.hk-card .progress-fill { |
|
|
|
background: linear-gradient(to top, #ff9999, #ff6666, #cc3333); |
|
|
|
box-shadow: 0 0 15px rgba(255, 100, 100, 0.9), 0 0 30px rgba(255, 50, 50, 0.6); |
|
|
|
} |
|
|
|
/* 在进度条填充部分顶部添加火箭gif */ |
|
|
|
.progress-fill::after { |
|
|
|
content: ''; |
|
|
|
|
|
|
|
/* 小火箭样式 */ |
|
|
|
.mini-rocket { |
|
|
|
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; |
|
|
|
width: 70px; |
|
|
|
height: 70px; |
|
|
|
z-index: 20; |
|
|
|
transition: bottom 0.8s ease; |
|
|
|
pointer-events: none; |
|
|
|
} |
|
|
|
|
|
|
|
.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; |
|
|
|
.mini-rocket img { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
object-fit: contain; |
|
|
|
filter: drop-shadow(0 0 10px rgba(255, 255, 255, 1)); |
|
|
|
} |
|
|
|
|
|
|
|
/* 美股刻度连接线 - 从右侧连接到进度条 */ |
|
|
|
.us-content .marker::before { |
|
|
|
right: -20px; |
|
|
|
background-color: #00BFFF; /* 蓝色 */ |
|
|
|
box-shadow: 0 0 4px rgba(0, 191, 255, 0.5); |
|
|
|
/* 美股小火箭位置 - 动态定位，在温度计右侧 */ |
|
|
|
.us-mini-rocket { |
|
|
|
right: -25px; |
|
|
|
animation: us-rocket-hover 3s ease-in-out infinite; |
|
|
|
} |
|
|
|
|
|
|
|
/* 港股刻度连接线 - 从左侧连接到进度条 */ |
|
|
|
.hk-content .marker::before { |
|
|
|
left: -20px; |
|
|
|
background-color: #FF4444; /* 红色 */ |
|
|
|
box-shadow: 0 0 4px rgba(255, 68, 68, 0.5); |
|
|
|
/* 港股小火箭位置 - 动态定位，在温度计左侧 */ |
|
|
|
.hk-mini-rocket { |
|
|
|
left: -25px; |
|
|
|
animation: hk-rocket-hover 3s ease-in-out infinite; |
|
|
|
} |
|
|
|
/* 美股激活刻度 */ |
|
|
|
.us-content .marker.reached { |
|
|
|
color: #00BFFF !important; |
|
|
|
text-shadow: 0 0 10px rgba(0, 191, 255, 0.8) !important; |
|
|
|
|
|
|
|
/* 美股小火箭悬停动画 */ |
|
|
|
@keyframes us-rocket-hover { |
|
|
|
0%, 100% { |
|
|
|
transform: translateY(0px) rotate(0deg); |
|
|
|
} |
|
|
|
25% { |
|
|
|
transform: translateY(-3px) rotate(2deg); |
|
|
|
} |
|
|
|
50% { |
|
|
|
transform: translateY(-6px) rotate(0deg); |
|
|
|
} |
|
|
|
75% { |
|
|
|
transform: translateY(-3px) rotate(-2deg); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* 港股激活刻度 */ |
|
|
|
.hk-content .marker.reached { |
|
|
|
color: #FF4444 !important; |
|
|
|
text-shadow: 0 0 10px rgba(255, 68, 68, 0.8) !important; |
|
|
|
/* 港股小火箭悬停动画 */ |
|
|
|
@keyframes hk-rocket-hover { |
|
|
|
0%, 100% { |
|
|
|
transform: translateY(0px) rotate(0deg); |
|
|
|
} |
|
|
|
25% { |
|
|
|
transform: translateY(-3px) rotate(-2deg); |
|
|
|
} |
|
|
|
50% { |
|
|
|
transform: translateY(-6px) rotate(0deg); |
|
|
|
} |
|
|
|
75% { |
|
|
|
transform: translateY(-3px) rotate(2deg); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.time-markers { |
|
|
|
display: flex; |
|
|
|
flex-direction: column-reverse; |
|
|
|
height: 200px; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
/* 美股数字刻度在左边 */ |
|
|
|
.us-content .time-markers { |
|
|
|
align-items: flex-start; |
|
|
|
} |
|
|
|
|
|
|
|
/* 港股数字刻度在右边 */ |
|
|
|
.hk-content .time-markers { |
|
|
|
align-items: flex-end; |
|
|
|
} |
|
|
|
|
|
|
|
.marker { |
|
|
|
color: #fff; |
|
|
|
font-size: 0.9rem; |
|
|
|
font-weight: 700; |
|
|
|
text-shadow: |
|
|
|
0 0 5px rgba(255, 255, 255, 0.8), |
|
|
|
0.5px 0.5px 0 #fff, |
|
|
|
-0.5px -0.5px 0 #fff, |
|
|
|
0.5px -0.5px 0 #fff, |
|
|
|
-0.5px 0.5px 0 #fff; |
|
|
|
} |
|
|
|
|
|
|
|
/* 数字标记颜色类 */ |
|
|
|
.marker-orange { |
|
|
|
color: #ffff00 !important; |
|
|
|
font-size: 1.4rem !important; |
|
|
|
text-shadow: |
|
|
|
0 0 5px rgba(255, 255, 0, 0.8), |
|
|
|
0.5px 0.5px 0 #fff, |
|
|
|
-0.5px -0.5px 0 #fff, |
|
|
|
0.5px -0.5px 0 #fff, |
|
|
|
-0.5px 0.5px 0 #fff !important; |
|
|
|
} |
|
|
|
|
|
|
|
.marker-blue { |
|
|
|
color: #00aaff !important; |
|
|
|
text-shadow: |
|
|
|
0 0 5px rgba(0, 170, 255, 0.8), |
|
|
|
0.5px 0.5px 0 #fff, |
|
|
|
-0.5px -0.5px 0 #fff, |
|
|
|
0.5px -0.5px 0 #fff, |
|
|
|
-0.5px 0.5px 0 #fff !important; |
|
|
|
} |
|
|
|
|
|
|
|
.marker-red { |
|
|
|
color: #ff6666 !important; |
|
|
|
text-shadow: |
|
|
|
0 0 5px rgba(255, 102, 102, 0.8), |
|
|
|
0.5px 0.5px 0 #fff, |
|
|
|
-0.5px -0.5px 0 #fff, |
|
|
|
0.5px -0.5px 0 #fff, |
|
|
|
-0.5px 0.5px 0 #fff !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 { |
|
|
|
background: linear-gradient(45deg, #0066cc, #0099ff); |
|
|
|
color: white; |
|
|
|
@ -886,10 +810,10 @@ const hideRules = () => { |
|
|
|
} |
|
|
|
|
|
|
|
.rocket-body img { |
|
|
|
width: 15vw; |
|
|
|
width: 12vw; |
|
|
|
height: auto; |
|
|
|
min-width: 100px; |
|
|
|
max-width: 250px; |
|
|
|
min-width: 80px; |
|
|
|
max-width: 200px; |
|
|
|
} |
|
|
|
|
|
|
|
/* 动画效果 */ |
|
|
|
@ -975,8 +899,8 @@ const hideRules = () => { |
|
|
|
|
|
|
|
.modal-content { |
|
|
|
position: relative; |
|
|
|
width: 500px; |
|
|
|
height: 400px; |
|
|
|
width: 600px; |
|
|
|
height: 390px; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
@ -1012,12 +936,17 @@ const hideRules = () => { |
|
|
|
line-height: 1.6; |
|
|
|
margin-top: 10%; |
|
|
|
margin-left: 10%; |
|
|
|
word-wrap: break-word; |
|
|
|
overflow-wrap: break-word; |
|
|
|
} |
|
|
|
|
|
|
|
.rules-list p { |
|
|
|
margin: 8px 0; |
|
|
|
font-size: 0.9rem; |
|
|
|
color: #fff; |
|
|
|
word-wrap: break-word; |
|
|
|
overflow-wrap: break-word; |
|
|
|
white-space: normal; |
|
|
|
} |
|
|
|
|
|
|
|
.close-btn { |
|
|
|
@ -1025,8 +954,8 @@ const hideRules = () => { |
|
|
|
background-size: 100%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-position: center; |
|
|
|
width: 120px; |
|
|
|
height: 40px; |
|
|
|
width: 150px; |
|
|
|
height: 50px; |
|
|
|
cursor: pointer; |
|
|
|
transition: transform 0.2s ease; |
|
|
|
} |
|
|
|
|
songtongtong