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

去除部分重复代码

songtongtong/feature-20250717104937-众筹
zhangjiahao 1 month ago
parent
b9c06ffead
commit
2a00f67195
1 changed files with 18 additions and 256 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. 274
      src/views/zhongchou/index.vue

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

@ -371,27 +371,9 @@ const handleSectionClick = (section) => {
pointer-events: none;
}
.main-content {
display: flex;
justify-content: center;
align-items: center;
gap: 80px;
width: 100%;
height: calc(100vh - 200px);
padding: 0 40px;
perspective: 2000px;
position: relative;
z-index: 2;
box-sizing: border-box;
}
.stock-section {
flex: 0 1 auto;
display: flex;
justify-content: center;
align-items: center;
}
/* 股票卡片容器样式 */
.stock-card {
@ -598,46 +580,6 @@ const handleSectionClick = (section) => {
/* 改回底部对齐 */
}
/* 左侧刻度文字样式 */
.time-markers .marker-text {
padding-right: 15px;
/* 适当距离进度条 */
}
/* 右侧刻度文字样式 */
.right-markers .marker-text {
padding-left: 15px;
/* 适当距离进度条 */
}
/* 横线效果 - 精确连接到进度条边缘 */
.marker-text::after {
content: '';
position: absolute;
top: 50%;
width: 15px;
height: 3px;
background: linear-gradient(to right,
#ff6b6b 0%,
#4ecdc4 50%,
#45b7d1 100%);
transform: translateY(-50%);
border-radius: 10px;
box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
z-index: 18;
}
/* 左侧横线位置 */
.time-markers .marker-text::after {
right: 0px;
/* 连接线从文字右侧延伸到进度条 */
}
/* 右侧横线位置 */
.right-markers .marker-text::after {
left: 0px;
/* 连接线从文字左侧延伸到进度条 */
}
/* 进度条底部装饰图片 */
.progress-bottom-image {
@ -657,18 +599,6 @@ const handleSectionClick = (section) => {
}
/* 优化后的进度条填充部分：统一渐变效果 */
.progress-fill {
position: absolute;
bottom: 0;
width: 100%;
z-index: 6;
border-radius: 15px;
transition: height 0.5s ease;
box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
}
.blue-progress {
background: linear-gradient(to top,
#16a34a 0%,
@ -693,77 +623,42 @@ const handleSectionClick = (section) => {
/* 优化后的刻度文字样式 */
/* 统一的刻度文字样式 */
.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));
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),
0 2px 4px rgba(255, 255, 255, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
/* 轻微的发光边缘 */
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));
/* 关键修复：创建独立的堆叠上下文，避免容器backdrop-filter影响 */
isolation: isolate;
z-index: 17;
position: relative;
}
/* 左侧刻度文字样式 */
time-markers.time-markers .marker-text {
padding-right: 5px;
/* 减少右边距，让刻度更靠近进度条 */
/* 左侧刻度文字间距 */
.time-markers .marker-text {
padding-right: 15px;
}
/* 右侧刻度文字样式 */
/* 右侧刻度文字间距 */
.right-markers .marker-text {
padding-left: 5px;
/* 减少左边距，让刻度更靠近进度条 */
padding-left: 15px;
}
/* 横线效果 - 精确连接到进度条边缘 */
.marker-text::after {
content: '';
position: absolute;
top: 50%;
width: 15px;
/* 缩短连接线长度 */
height: 3px;
background: linear-gradient(to right,
#ff6b6b 0%,
#4ecdc4 50%,
#45b7d1 100%);
transform: translateY(-50%);
border-radius: 10px;
box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
z-index: 18;
}
.boost-btn {
position: fixed; /* 改为固定定位，不受父容器变换影响 */
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 200px;
/* 固定宽度而不是100% */
padding: 12px 24px;
border: none;
border-radius: 25px;
@ -772,7 +667,6 @@ time-markers.time-markers .marker-text {
cursor: pointer;
transition: all 0.3s ease;
text-transform: none;
z-index: 1001; /* 确保按钮在最上层 */
}
.blue-btn {
@ -780,9 +674,9 @@ time-markers.time-markers .marker-text {
color: white;
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}
.blue-btn:hover {
background: linear-gradient(45deg, #2563eb, #1e40af);
/* 移除 transform: translateY(-2px); */
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6);
}
@ -792,11 +686,14 @@ time-markers.time-markers .marker-text {
box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}
.red-btn:hover {
background: linear-gradient(45deg, #dc2626, #b91c1c);
/* 移除 transform: translateY(-2px); */
box-shadow: 0 6px 20px rgba(239, 68, 68, 0.6);
}
/* 基础样式 - 1980x1080分辨率 */
.rocket-container {
position: relative;
@ -854,17 +751,7 @@ time-markers.time-markers .marker-text {
justify-content: flex-start;
}
.marker-text {
font-size: 1.5vw;
min-font-size: 16px;
max-font-size: 24px;
font-weight: bold;
color: #ffffff;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
padding: 0 5px;
z-index: 17;
position: relative;
}
.rocket {
position: absolute;
@ -1139,34 +1026,6 @@ time-markers.time-markers .marker-text {
pointer-events: none;
}
.main-content {
display: flex;
justify-content: center;
align-items: center;
gap: 80px;
width: 100%;
height: calc(100vh - 200px);
padding: 0 40px;
perspective: 2000px;
position: relative;
z-index: 2;
box-sizing: border-box;
}
.stock-section {
flex: 0 1 auto;
display: flex;
justify-content: center;
align-items: center;
overflow: visible;
margin-top: 0px;
margin-bottom: 0px;
/* 设置固定高度 */
height: 600px;
/* 根据需要调整高度值 */
}
/* 左侧美股卡片特殊3D效果 */
.left-section .stock-card {
@ -1253,26 +1112,13 @@ time-markers.time-markers .marker-text {
}
}
/* 左侧刻度文字样式 */
.time-markers .marker-text {
padding-right: 15px;
/* 适当距离进度条 */
}
/* 右侧刻度文字样式 */
.right-markers .marker-text {
padding-left: 15px;
/* 适当距离进度条 */
}
/* 横线效果 - 精确连接到进度条边缘 */
.marker-text::after {
content: '';
position: absolute;
top: 50%;
width: 15px;
/* 缩短连接线长度 */
height: 3px;
background: linear-gradient(to right,
#ff6b6b 0%,
@ -1284,6 +1130,7 @@ time-markers.time-markers .marker-text {
z-index: 18;
}
/* 左侧横线位置 */
.time-markers .marker-text::after {
right: 0px;
@ -1349,91 +1196,6 @@ time-markers.time-markers .marker-text {
}
/* 左侧刻度文字样式 */
.time-markers .marker-text {
padding-right: 10px;
/* 减少右边距，让刻度更靠近进度条 */
}
/* 右侧刻度文字样式 */
.right-markers .marker-text {
padding-left: 10px;
/* 减少左边距，让刻度更靠近进度条 */
}
/* 横线效果 - 精确连接到进度条边缘 */
.marker-text::after {
content: '';
position: absolute;
top: 50%;
width: 15px;
/* 缩短连接线长度 */
height: 3px;
background: linear-gradient(to right,
#ff6b6b 0%,
#4ecdc4 50%,
#45b7d1 100%);
transform: translateY(-50%);
border-radius: 10px;
box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
z-index: 18;
}
.boost-btn {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 200px;
/* 固定宽度而不是100% */
padding: 12px 24px;
border: none;
border-radius: 25px;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
text-transform: none;
}
.blue-btn {
background: linear-gradient(45deg, #3b82f6, #1d4ed8);
color: white;
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}
.blue-btn:hover {
background: linear-gradient(45deg, #2563eb, #1e40af);
/* 移除 transform: translateY(-2px); */
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6);
}
.red-btn {
background: linear-gradient(45deg, #ef4444, #dc2626);
color: white;
box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}
.red-btn:hover {
background: linear-gradient(45deg, #dc2626, #b91c1c);
/* 移除 transform: translateY(-2px); */
box-shadow: 0 6px 20px rgba(239, 68, 68, 0.6);
}
/* 股票板块基础样式 */
.stock-section {
cursor: pointer;
transition: all 0.8s ease-out;
/* 简化为单一缓动 */
transform-origin: center;
}
/* 左侧板块选中时 - 简单飘移 */
.left-section.selected {
transform: translateX(200px) scale(1.2);

Write Preview
Loading…
Cancel
Save