From cfe510030473b9fb169ae6824e8123143e0b838e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E6=88=90?= Date: Wed, 29 Apr 2026 10:38:44 +0800 Subject: [PATCH] 1 --- src/assets/css/common_mobile.less | 71 ++++++---------- src/assets/css/mobile_responsive.less | 94 +-------------------- src/components/ifooter.vue | 37 ++++----- src/views/aboutUs/aboutUs.vue | 20 ++--- src/views/index.vue | 115 ++++++++++++++++---------- 5 files changed, 125 insertions(+), 212 deletions(-) diff --git a/src/assets/css/common_mobile.less b/src/assets/css/common_mobile.less index 6326915..fd954c3 100644 --- a/src/assets/css/common_mobile.less +++ b/src/assets/css/common_mobile.less @@ -11,12 +11,13 @@ padding: 48px 0 28px !important; } - .banner-title { + // 仅内容页 .page-banner，避免与首页 .banner 轮播抢 !important 导致首屏过高、裁切 CTA + .page-banner .banner-title { font-size: 2.5rem !important; line-height: 1.2 !important; } - .banner-subtitle { + .page-banner .banner-subtitle { font-size: 1.2rem !important; line-height: 1.4 !important; } @@ -43,7 +44,7 @@ .areas-grid, .services-grid, .team-grid, - .contact-grid, + .about-contact__grid, .tech-grid { grid-template-columns: 1fr !important; gap: 16px !important; @@ -71,7 +72,7 @@ line-height: 1.6 !important; } - // 图标移动端适配（不包含页脚 .contact-icon：页脚为行内小图标，全局大会破坏与文字对齐） + // 图标移动端适配（页脚为 footer-contact__icon；勿用泛化 .contact-icon） .icon, .service-icon, .advantage-icon, @@ -174,31 +175,10 @@ } } - // 联系信息移动端适配 - .contact-section { - .contact-grid { - grid-template-columns: 1fr !important; - gap: 18px !important; - } - - .contact-info { - text-align: center !important; - - .contact-icon { - font-size: 2rem !important; - margin-bottom: 15px !important; - } - - .contact-title { - font-size: 1.1rem !important; - margin-bottom: 8px !important; - } - - .contact-detail { - font-size: 0.95rem !important; - line-height: 1.5 !important; - } - } + // 关于页「联系我们」列表（.about-contact__*，与首页 home-contact、页脚 footer-contact 隔离） + .about-us-page .about-contact__grid { + grid-template-columns: 1fr !important; + gap: 18px !important; } // 技术栈移动端适配 @@ -754,7 +734,7 @@ .areas-grid, .services-grid, .team-grid, - .contact-grid, + .about-contact__grid, .tech-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 25px !important; @@ -775,11 +755,11 @@ padding: 0 10px !important; } - .banner-title { + .page-banner .banner-title { font-size: 2rem !important; } - .banner-subtitle { + .page-banner .banner-subtitle { font-size: 1rem !important; } @@ -812,11 +792,11 @@ padding: 0 8px !important; } - .banner-title { + .page-banner .banner-title { font-size: 1.8rem !important; } - .banner-subtitle { + .page-banner .banner-subtitle { font-size: 0.9rem !important; } @@ -885,8 +865,7 @@ .icon, .service-icon, .advantage-icon, - .area-icon, - .contact-icon { + .area-icon { image-rendering: -webkit-optimize-contrast !important; image-rendering: crisp-edges !important; } @@ -896,16 +875,16 @@ @media (orientation: landscape) and (max-height: 500px) { .page-banner { padding: 30px 0 20px !important; - } - - .banner-title { - font-size: 2rem !important; - margin-bottom: 15px !important; - } - - .banner-subtitle { - font-size: 1rem !important; - margin-bottom: 20px !important; + + .banner-title { + font-size: 2rem !important; + margin-bottom: 15px !important; + } + + .banner-subtitle { + font-size: 1rem !important; + margin-bottom: 20px !important; + } } .section { diff --git a/src/assets/css/mobile_responsive.less b/src/assets/css/mobile_responsive.less index 4398c05..68ef7fa 100644 --- a/src/assets/css/mobile_responsive.less +++ b/src/assets/css/mobile_responsive.less @@ -154,33 +154,7 @@ } } - // 移动端横幅适配 - .banner { - height: 60vh; - min-height: 400px; - - .banner-content { - padding: 28px 16px; - text-align: center; - - .banner-title { - font-size: 2.5rem; - line-height: 1.2; - margin-bottom: 14px; - } - - .banner-subtitle { - font-size: 1.2rem; - line-height: 1.4; - margin-bottom: 20px; - } - - .banner-button { - padding: 12px 24px; - font-size: 16px; - } - } - } + // 首页轮播 .banner 仅出现在 index.vue，由组件内样式控制；此处旧规则会加大标题并给 .banner-content 加 padding，导致移动端 CTA 被裁切 // 移动端内容区域适配 .pageWidth { @@ -209,7 +183,7 @@ .areas-grid, .services-grid, .team-grid, - .contact-grid { + .about-contact__grid { grid-template-columns: 1fr; gap: 16px; } @@ -352,7 +326,7 @@ .areas-grid, .services-grid, .team-grid, - .contact-grid { + .about-contact__grid { grid-template-columns: repeat(2, 1fr); gap: 25px; } @@ -360,22 +334,6 @@ .section { padding: 50px 0; } - - .banner { - height: 70vh; - - .banner-content { - padding: 60px 40px; - - .banner-title { - font-size: 3rem; - } - - .banner-subtitle { - font-size: 1.4rem; - } - } - } } // ===== 小屏幕移动端适配 ===== @@ -384,20 +342,6 @@ padding: 0 10px; } - .banner { - .banner-content { - padding: 30px 15px; - - .banner-title { - font-size: 2rem; - } - - .banner-subtitle { - font-size: 1rem; - } - } - } - .section { padding: 24px 0; @@ -436,20 +380,6 @@ padding: 0 8px; } - .banner { - .banner-content { - padding: 25px 10px; - - .banner-title { - font-size: 1.8rem; - } - - .banner-subtitle { - font-size: 0.9rem; - } - } - } - .section { padding: 25px 0; @@ -552,24 +482,6 @@ right: 15px; } } - - .banner { - height: 100vh; - - .banner-content { - padding: 30px 20px; - - .banner-title { - font-size: 2rem; - margin-bottom: 15px; - } - - .banner-subtitle { - font-size: 1rem; - margin-bottom: 20px; - } - } - } } // ===== 打印样式 ===== diff --git a/src/components/ifooter.vue b/src/components/ifooter.vue index 618f1b8..2ed67b1 100644 --- a/src/components/ifooter.vue +++ b/src/components/ifooter.vue @@ -24,17 +24,17 @@

联系咨询

-
-
- +
+
+ 13817819452
-
- +
+ bimwe@bimwe.com
-
- +
+ 提交业务场景
@@ -230,7 +230,7 @@ export default { position: relative; } -.contact-item a { +.footer-contact__row a { color: #475569; text-decoration: none; transition: color 0.25s ease; @@ -241,18 +241,18 @@ export default { } .footer-links a:hover, -.contact-item a:hover { +.footer-contact__row a:hover { color: #1d4ed8; } -/* 联系信息 */ -.contact-info { +/* 联系信息（与首页 home-contact、关于页 about-contact 隔离） */ +.footer-contact { display: flex; flex-direction: column; gap: 15px; } -.contact-item { +.footer-contact__row { display: flex; align-items: center; gap: 12px; @@ -260,7 +260,7 @@ export default { font-size: 0.95rem; } -.contact-icon { +.footer-contact__icon { display: inline-flex; align-items: center; justify-content: center; @@ -279,7 +279,7 @@ export default { line-height: 1.6; } -.contact-icon /deep/ svg, +.footer-contact__icon /deep/ svg, .beian-icon /deep/ svg, .back-to-top .arrow /deep/ svg { width: 100%; @@ -403,10 +403,6 @@ export default { margin-bottom: 8px; } - .contact-info { - gap: 10px; - } - .footer-address { margin-top: 12px; } @@ -422,12 +418,13 @@ export default { align-items: center; } - .contact-info { + .footer-contact { + gap: 10px; align-items: center; width: 100%; } - .contact-item { + .footer-contact__row { justify-content: center; text-align: center; flex-wrap: nowrap; diff --git a/src/views/aboutUs/aboutUs.vue b/src/views/aboutUs/aboutUs.vue index f1f6497..38bfe73 100644 --- a/src/views/aboutUs/aboutUs.vue +++ b/src/views/aboutUs/aboutUs.vue @@ -65,11 +65,11 @@

联系我们

欢迎沟通业务场景，我们将在 1 个工作日内回复。

-
-
地址上海市宝山区高逸路112-118号3幢6422室
-
电话13817819452
-
邮箱bimwe@bimwe.com
-
官网www.bimwe.com
+
+
地址上海市宝山区高逸路112-118号3幢6422室
+
电话13817819452
+
邮箱bimwe@bimwe.com
+
官网www.bimwe.com
@@ -287,13 +287,13 @@ export default { line-height: 1.7; } -.contact-grid { +.about-contact__grid { margin-top: 34px; display: grid; gap: 14px; } -.contact-item { +.about-contact__row { display: grid; grid-template-columns: 66px 1fr; gap: 14px; @@ -303,11 +303,11 @@ export default { background: #fff; } -.contact-item strong { +.about-contact__row strong { color: #1d4ed8; } -.contact-item span { +.about-contact__row span { color: #475467; } @@ -347,7 +347,7 @@ export default { } .timeline-item, - .contact-item { + .about-contact__row { grid-template-columns: 1fr; gap: 8px; } diff --git a/src/views/index.vue b/src/views/index.vue index 9bdb12d..354a47c 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -1,5 +1,5 @@