hongxilin
/
activityLink
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

样式优化

songtongtong/feature-20250717104937-众筹
songtongtong 4 weeks ago
parent
d21d60e400
commit
0643c8cd84
1 changed files with 263 additions and 28 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 291
      src/views/zhongchou/index.vue

291
src/views/zhongchou/index.vue
View File

@ -24,19 +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" v-for="time in [0, 3, 6, 9, 12, 15]" :key="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>还剩15分钟</h3>
<h3>还剩6分钟</h3>
</div>
</div>
</div>
@ -68,15 +77,24 @@
<div class="card-content hk-content">
<div class="stock-info">
<h3>距港股实时数据</h3>
<h3>还剩6分钟</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" v-for="time in [0, 3, 6, 9, 12, 15]" :key="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>
@ -103,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>
@ -125,6 +142,10 @@ 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) {
activeArea.value = null
@ -151,6 +172,13 @@ const showRules = () => {
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>
@ -200,6 +228,7 @@ const hideRules = () => {
justify-content: center;
flex: 1;
gap: 10px;
margin-left: 70px; /* 往右移动大标题 */
}
/* 主标题图片响应式样式 */
@ -227,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;
}
@ -253,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);
}
}
@ -434,10 +478,86 @@ const hideRules = () => {
.progress-bar {
width: 20px;
height: 200px;
background: rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.8);
border-radius: 10px;
position: relative;
overflow: hidden;
overflow: visible;
}
/* 美股进度条 - 蓝色发光效果 */
.us-content .progress-bar {
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 {
box-shadow: 0 0 20px rgba(255, 100, 100, 0.8), 0 0 40px rgba(255, 50, 50, 0.4);
position: relative;
}
/* 港股刻度线容器 */
.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;
}
/* 股票内容容器 */
@ -499,7 +619,7 @@ const hideRules = () => {
.base-image img {
width: auto;
height: 40px;
height: 60px;
display: block;
}
@ -507,17 +627,79 @@ const hideRules = () => {
position: absolute;
bottom: 0;
width: 100%;
background: linear-gradient(to top, #00ff00, #ffaa00, #ff4444);
border-radius: 10px;
transition: height 0.8s ease;
}
.us-card .progress-fill {
height: 20%;
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-card .progress-fill {
height: 60%;
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);
}
/* 小火箭样式 */
.mini-rocket {
position: absolute;
width: 70px;
height: 70px;
z-index: 20;
transition: bottom 0.8s ease;
pointer-events: none;
}
.mini-rocket img {
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 0 10px rgba(255, 255, 255, 1));
}
/* 美股小火箭位置 - 动态定位，在温度计右侧 */
.us-mini-rocket {
right: -25px;
animation: us-rocket-hover 3s ease-in-out infinite;
}
/* 港股小火箭位置 - 动态定位，在温度计左侧 */
.hk-mini-rocket {
left: -25px;
animation: hk-rocket-hover 3s ease-in-out infinite;
}
/* 美股小火箭悬停动画 */
@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);
}
}
/* 港股小火箭悬停动画 */
@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 {
@ -528,10 +710,58 @@ const hideRules = () => {
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;
text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
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;
}
.us-btn {
@ -669,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;
@ -706,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 {
@ -719,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;
}

Write Preview
Loading…
Cancel
Save