diff --git a/src/views/zhongchou/index.vue b/src/views/zhongchou/index.vue index 0d6696b..8992c18 100644 --- a/src/views/zhongchou/index.vue +++ b/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 { @@ -1071,29 +1073,6 @@ const hideRules = () => { justify-content: center; } - .stock-area { - width: 40vw; - /* 从58vw调整为50vw */ - height: 30vw; - /* 从50vw调整为40vw */ - min-width: 300px; - /* 从480px降低到350px */ - min-height: 250px; - /* 从440px降低到300px */ - } - - /* 股票卡片样式 */ - .stock-card { - width: 110%; - height: 470px; - background-size: 100% 100%; - background-position: center; - background-repeat: no-repeat; - margin-top: 50px; - } - - - .main-title { margin-left: 18%; text-align: center; @@ -1105,7 +1084,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; @@ -1119,9 +1098,6 @@ const hideRules = () => { font-size: 0.8rem; } - - - /* 手机端股票卡片背景替换 */ .us-card { background-image: url('@/assets/img/zhongchou/手机组2.png');