From fd6c272f623590b72edd4ecda1c5105f41d3857a Mon Sep 17 00:00:00 2001 From: zhangjiahao <1627043995@qq.com> Date: Mon, 21 Jul 2025 15:31:39 +0800 Subject: [PATCH] =?UTF-8?q?=E9=80=82=E9=85=8D=E6=89=8B=E6=9C=BA=E7=AB=AF?= =?UTF-8?q?=E9=83=A8=E5=88=86=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/zhongchou/index.vue | 122 +++++++++++++++++++++++++++++++++++++++--- 1 file changed, 115 insertions(+), 7 deletions(-) diff --git a/src/views/zhongchou/index.vue b/src/views/zhongchou/index.vue index 83df5dd..0d6696b 100644 --- a/src/views/zhongchou/index.vue +++ b/src/views/zhongchou/index.vue @@ -975,11 +975,28 @@ const hideRules = () => { gap: 30px; } + /* 股票信息标题样式 */ + .stock-info h3 { + margin: 5px 0; + font-size: 1.7rem; + line-height: 1.2; + word-wrap: break-word; + /* 允许长单词换行 */ + overflow-wrap: break-word; + /* 现代浏览器支持 */ + hyphens: auto; + /* 自动断字 */ + } + .stock-area { - width: 50vw; /* 从58vw调整为50vw */ - height: 40vw; /* 从50vw调整为40vw */ - min-width: 350px; /* 从480px降低到350px */ - min-height: 300px; /* 从440px降低到300px */ + width: 50vw; + /* 从58vw调整为50vw */ + height: 40vw; + /* 从50vw调整为40vw */ + min-width: 350px; + /* 从480px降低到350px */ + min-height: 300px; + /* 从440px降低到300px */ } .left-area { @@ -1018,15 +1035,106 @@ 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; +} + + /* 助力按钮区域样式 */ + .boost-section { + display: flex; + flex-direction: column; + align-items: center; + position: relative; + width: 100%; + margin-top: 20px; + } + + .interactive-container { + width: 100vw; + height: 100vh; + background: url('@/assets/img/zhongchou/手机bg.png') no-repeat center center; + background-size: 100% 100%; + position: fixed; + top: 0; + left: 0; + overflow: hidden; + display: flex; + flex-direction: column; + align-items: center; + 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: 0; + margin-left: 18%; text-align: center; justify-content: center; align-items: center; } - + .main-title img { - max-height: 50px; + max-width: 100%; + height: auto; + width: auto; + max-height: 100px; + object-fit: contain; + content: url('@/assets/img/zhongchou/手机助力美股享实时数据.png'); + margin-top: 60px; + } + + .rules-btn img { + height: 30px; + } + + .rules-text { + font-size: 0.8rem; + } + + + + + /* 手机端股票卡片背景替换 */ + .us-card { + background-image: url('@/assets/img/zhongchou/手机组2.png'); + } + + .activity-period { + display: none; + + } + + /* 手机端隐藏火箭图片 */ + .rocket-body img { + display: none; } /* 极小屏幕活动时间容器适配 */