去除部分重复代码

src/views/zhongchou/index.vue

@@ -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);