适配手机端界面

src/views/zhongchou/index.vue

@@ -585,7 +585,7 @@ const hideRules = () => {
 /* 股票卡片样式 */
 .stock-card {
     width: 100%;
-    height: 475px;
+    height: 55vh;
     background-size: 100% 100%;
     background-position: center;
     background-repeat: no-repeat;
@@ -678,7 +678,8 @@ const hideRules = () => {
     position: relative;
     overflow: visible;
     min-width: 20px;
-    min-height: 30rem;
+    /* 更改为响应式高度 */
+    min-height: 50vh;
 }
 
 /* 美股进度条容器 - 蓝色主题背景 */
@@ -707,7 +708,8 @@ const hideRules = () => {
     height: auto;
     justify-content: space-between;
     align-items: center;
-    min-height: 30rem;
+    /* 更改为响应式高度 */
+    min-height: 50vh;
 }
 
 /* 股票内容容器 */
@@ -1036,15 +1038,15 @@ const hideRules = () => {
 
 @media (max-width: 480px) {
     .rules-btn {
-    display: flex;
-    flex-direction: column;
-    margin-right: 3%;
-    cursor: pointer;
-    /* 确保按钮在屏幕缩放时保持比例 */
-    transform-origin: center;
-    transition: transform 0.2s ease;
-      margin-top: 35px;
-}
+        display: flex;
+        flex-direction: column;
+        margin-right: 3%;
+        cursor: pointer;
+        /* 确保按钮在屏幕缩放时保持比例 */
+        transform-origin: center;
+        transition: transform 0.2s ease;
+        margin-top: 35px;
+    }
 
     /* 助力按钮区域样式 */
     .boost-section {
@@ -1085,7 +1087,7 @@ const hideRules = () => {
     /* 股票卡片样式 */
     .stock-card {
         width: 110%;
-        height: 470px;
+        height: 60vh;
         background-size: 100% 100%;
         background-position: center;
         background-repeat: no-repeat;
@@ -1105,7 +1107,7 @@ const hideRules = () => {
         max-width: 100%;
         height: auto;
         width: auto;
-        max-height: 100px;
+        max-height: 15vh;
         object-fit: contain;
         content: url('@/assets/img/zhongchou/手机助力美股享实时数据.png');
         margin-top: 60px;