bimwe/official_network
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
张成
2026-04-29 10:38:44 +08:00
parent c41ad51ac3
commit cfe5100304
5 changed files with 125 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/assets/css/common_mobile.less
View File

@@ -11,12 +11,13 @@
padding: 48px 0 28px !important; padding: 48px 0 28px !important;
} }
.banner-title { // 仅内容页 .page-banner，避免与首页 .banner 轮播抢 !important 导致首屏过高、裁切 CTA
.page-banner .banner-title {
font-size: 2.5rem !important; font-size: 2.5rem !important;
line-height: 1.2 !important; line-height: 1.2 !important;
} }
.banner-subtitle { .page-banner .banner-subtitle {
font-size: 1.2rem !important; font-size: 1.2rem !important;
line-height: 1.4 !important; line-height: 1.4 !important;
} }
@@ -43,7 +44,7 @@
.areas-grid, .areas-grid,
.services-grid, .services-grid,
.team-grid, .team-grid,
.contact-grid, .about-contact__grid,
.tech-grid { .tech-grid {
grid-template-columns: 1fr !important; grid-template-columns: 1fr !important;
gap: 16px !important; gap: 16px !important;
@@ -71,7 +72,7 @@
line-height: 1.6 !important; line-height: 1.6 !important;
} }
// 图标移动端适配（不包含页脚 .contact-icon：页脚为行内小图标，全局大会破坏与文字对齐） // 图标移动端适配（页脚为 footer-contact__icon；勿用泛化 .contact-icon）
.icon, .icon,
.service-icon, .service-icon,
.advantage-icon, .advantage-icon,
@@ -174,31 +175,10 @@
} }
} }
// 联系信息移动端适配 // 关于页「联系我们」列表（.about-contact__*，与首页 home-contact、页脚 footer-contact 隔离）
.contact-section { .about-us-page .about-contact__grid {
.contact-grid { grid-template-columns: 1fr !important;
grid-template-columns: 1fr !important; gap: 18px !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;
}
}
} }
// 技术栈移动端适配 // 技术栈移动端适配
@@ -754,7 +734,7 @@
.areas-grid, .areas-grid,
.services-grid, .services-grid,
.team-grid, .team-grid,
.contact-grid, .about-contact__grid,
.tech-grid { .tech-grid {
grid-template-columns: repeat(2, 1fr) !important; grid-template-columns: repeat(2, 1fr) !important;
gap: 25px !important; gap: 25px !important;
@@ -775,11 +755,11 @@
padding: 0 10px !important; padding: 0 10px !important;
} }
.banner-title { .page-banner .banner-title {
font-size: 2rem !important; font-size: 2rem !important;
} }
.banner-subtitle { .page-banner .banner-subtitle {
font-size: 1rem !important; font-size: 1rem !important;
} }
@@ -812,11 +792,11 @@
padding: 0 8px !important; padding: 0 8px !important;
} }
.banner-title { .page-banner .banner-title {
font-size: 1.8rem !important; font-size: 1.8rem !important;
} }
.banner-subtitle { .page-banner .banner-subtitle {
font-size: 0.9rem !important; font-size: 0.9rem !important;
} }
@@ -885,8 +865,7 @@
.icon, .icon,
.service-icon, .service-icon,
.advantage-icon, .advantage-icon,
.area-icon, .area-icon {
.contact-icon {
image-rendering: -webkit-optimize-contrast !important; image-rendering: -webkit-optimize-contrast !important;
image-rendering: crisp-edges !important; image-rendering: crisp-edges !important;
} }
@@ -896,16 +875,16 @@
@media (orientation: landscape) and (max-height: 500px) { @media (orientation: landscape) and (max-height: 500px) {
.page-banner { .page-banner {
padding: 30px 0 20px !important; padding: 30px 0 20px !important;
}
.banner-title {
.banner-title { font-size: 2rem !important;
font-size: 2rem !important; margin-bottom: 15px !important;
margin-bottom: 15px !important; }
}
.banner-subtitle {
.banner-subtitle { font-size: 1rem !important;
font-size: 1rem !important; margin-bottom: 20px !important;
margin-bottom: 20px !important; }
} }
.section { .section {

94
src/assets/css/mobile_responsive.less
View File

@@ -154,33 +154,7 @@
} }
} }
// 移动端横幅适配 // 首页轮播 .banner 仅出现在 index.vue，由组件内样式控制；此处旧规则会加大标题并给 .banner-content 加 padding，导致移动端 CTA 被裁切
.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;
}
}
}
// 移动端内容区域适配 // 移动端内容区域适配
.pageWidth { .pageWidth {
@@ -209,7 +183,7 @@
.areas-grid, .areas-grid,
.services-grid, .services-grid,
.team-grid, .team-grid,
.contact-grid { .about-contact__grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 16px; gap: 16px;
} }
@@ -352,7 +326,7 @@
.areas-grid, .areas-grid,
.services-grid, .services-grid,
.team-grid, .team-grid,
.contact-grid { .about-contact__grid {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 25px; gap: 25px;
} }
@@ -360,22 +334,6 @@
.section { .section {
padding: 50px 0; 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; padding: 0 10px;
} }
.banner {
.banner-content {
padding: 30px 15px;
.banner-title {
font-size: 2rem;
}
.banner-subtitle {
font-size: 1rem;
}
}
}
.section { .section {
padding: 24px 0; padding: 24px 0;
@@ -436,20 +380,6 @@
padding: 0 8px; padding: 0 8px;
} }
.banner {
.banner-content {
padding: 25px 10px;
.banner-title {
font-size: 1.8rem;
}
.banner-subtitle {
font-size: 0.9rem;
}
}
}
.section { .section {
padding: 25px 0; padding: 25px 0;
@@ -552,24 +482,6 @@
right: 15px; 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;
}
}
}
} }
// ===== 打印样式 ===== // ===== 打印样式 =====

37
src/components/ifooter.vue
View File

@@ -24,17 +24,17 @@
<div class="footer-section"> <div class="footer-section">
<h4>联系咨询</h4> <h4>联系咨询</h4>
<div class="contact-info"> <div class="footer-contact">
<div class="contact-item"> <div class="footer-contact__row">
<span class="contact-icon" v-html="icons.phone"></span> <span class="footer-contact__icon" v-html="icons.phone"></span>
<a href="tel:13817819452">13817819452</a> <a href="tel:13817819452">13817819452</a>
</div> </div>
<div class="contact-item"> <div class="footer-contact__row">
<span class="contact-icon" v-html="icons.mail"></span> <span class="footer-contact__icon" v-html="icons.mail"></span>
<a href="mailto:bimwe@bimwe.com">bimwe@bimwe.com</a> <a href="mailto:bimwe@bimwe.com">bimwe@bimwe.com</a>
</div> </div>
<div class="contact-item"> <div class="footer-contact__row">
<span class="contact-icon" v-html="icons.globe"></span> <span class="footer-contact__icon" v-html="icons.globe"></span>
<router-link to="/index#contact">提交业务场景</router-link> <router-link to="/index#contact">提交业务场景</router-link>
</div> </div>
</div> </div>
@@ -230,7 +230,7 @@ export default {
position: relative; position: relative;
} }
.contact-item a { .footer-contact__row a {
color: #475569; color: #475569;
text-decoration: none; text-decoration: none;
transition: color 0.25s ease; transition: color 0.25s ease;
@@ -241,18 +241,18 @@ export default {
} }
.footer-links a:hover, .footer-links a:hover,
.contact-item a:hover { .footer-contact__row a:hover {
color: #1d4ed8; color: #1d4ed8;
} }
/* 联系信息 */ /* 联系信息（与首页 home-contact、关于页 about-contact 隔离） */
.contact-info { .footer-contact {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 15px; gap: 15px;
} }
.contact-item { .footer-contact__row {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
@@ -260,7 +260,7 @@ export default {
font-size: 0.95rem; font-size: 0.95rem;
} }
.contact-icon { .footer-contact__icon {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -279,7 +279,7 @@ export default {
line-height: 1.6; line-height: 1.6;
} }
.contact-icon /deep/ svg, .footer-contact__icon /deep/ svg,
.beian-icon /deep/ svg, .beian-icon /deep/ svg,
.back-to-top .arrow /deep/ svg { .back-to-top .arrow /deep/ svg {
width: 100%; width: 100%;
@@ -403,10 +403,6 @@ export default {
margin-bottom: 8px; margin-bottom: 8px;
} }
.contact-info {
gap: 10px;
}
.footer-address { .footer-address {
margin-top: 12px; margin-top: 12px;
} }
@@ -422,12 +418,13 @@ export default {
align-items: center; align-items: center;
} }
.contact-info { .footer-contact {
gap: 10px;
align-items: center; align-items: center;
width: 100%; width: 100%;
} }
.contact-item { .footer-contact__row {
justify-content: center; justify-content: center;
text-align: center; text-align: center;
flex-wrap: nowrap; flex-wrap: nowrap;

20
src/views/aboutUs/aboutUs.vue
View File

@@ -65,11 +65,11 @@
<div class="container narrow"> <div class="container narrow">
<h2 class="section-title">联系我们</h2> <h2 class="section-title">联系我们</h2>
<p class="section-subtitle">欢迎沟通业务场景，我们将在 1 个工作日内回复。</p> <p class="section-subtitle">欢迎沟通业务场景，我们将在 1 个工作日内回复。</p>
<div class="contact-grid"> <div class="about-contact__grid">
<div class="contact-item"><strong>地址</strong><span>上海市宝山区高逸路112-118号3幢6422室</span></div> <div class="about-contact__row"><strong>地址</strong><span>上海市宝山区高逸路112-118号3幢6422室</span></div>
<div class="contact-item"><strong>电话</strong><span>13817819452</span></div> <div class="about-contact__row"><strong>电话</strong><span>13817819452</span></div>
<div class="contact-item"><strong>邮箱</strong><span>bimwe@bimwe.com</span></div> <div class="about-contact__row"><strong>邮箱</strong><span>bimwe@bimwe.com</span></div>
<div class="contact-item"><strong>官网</strong><span>www.bimwe.com</span></div> <div class="about-contact__row"><strong>官网</strong><span>www.bimwe.com</span></div>
</div> </div>
</div> </div>
</section> </section>
@@ -287,13 +287,13 @@ export default {
line-height: 1.7; line-height: 1.7;
} }
.contact-grid { .about-contact__grid {
margin-top: 34px; margin-top: 34px;
display: grid; display: grid;
gap: 14px; gap: 14px;
} }
.contact-item { .about-contact__row {
display: grid; display: grid;
grid-template-columns: 66px 1fr; grid-template-columns: 66px 1fr;
gap: 14px; gap: 14px;
@@ -303,11 +303,11 @@ export default {
background: #fff; background: #fff;
} }
.contact-item strong { .about-contact__row strong {
color: #1d4ed8; color: #1d4ed8;
} }
.contact-item span { .about-contact__row span {
color: #475467; color: #475467;
} }
@@ -347,7 +347,7 @@ export default {
} }
.timeline-item, .timeline-item,
.contact-item { .about-contact__row {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 8px; gap: 8px;
} }

115
src/views/index.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div> <div class="home-page">
<!-- 滚动进度条 --> <!-- 滚动进度条 -->
<div class="scroll-progress-bar" data-scroll-progress="bar"></div> <div class="scroll-progress-bar" data-scroll-progress="bar"></div>
@@ -178,21 +178,21 @@
</div> </div>
</div> </div>
<!-- 联系我们区域 --> <!-- 联系我们区域（类名带 home- 前缀，避免与页脚、关于页的 contact-* 冲突） -->
<div class="contact-section" id="contact"> <div class="home-contact" id="contact">
<div class="container"> <div class="container">
<h2 class="section-title">联系我们</h2> <h2 class="section-title">联系我们</h2>
<p class="section-subtitle">欢迎沟通业务场景，我们将在 1 个工作日内回复。详细地址、电话和邮箱请查看页面底部。</p> <p class="section-subtitle">欢迎沟通业务场景，我们将在 1 个工作日内回复。详细地址、电话和邮箱请查看页面底部。</p>
<div class="contact-entry-grid animate-stagger"> <div class="home-contact__grid animate-stagger">
<div class="contact-item"> <div class="home-contact__card">
<div class="contact-icon" v-html="icons.phone"></div> <div class="home-contact__icon" v-html="icons.phone"></div>
<div> <div>
<h4>电话咨询</h4> <h4>电话咨询</h4>
<p>13817819452（工作日 9:00-18:00）</p> <p>13817819452（工作日 9:00-18:00）</p>
</div> </div>
</div> </div>
<div class="contact-item"> <div class="home-contact__card">
<div class="contact-icon" v-html="icons.globe"></div> <div class="home-contact__icon" v-html="icons.globe"></div>
<div> <div>
<h4>在线沟通</h4> <h4>在线沟通</h4>
<p>bimwe@bimwe.com（可发送需求文档）</p> <p>bimwe@bimwe.com（可发送需求文档）</p>
@@ -456,10 +456,18 @@ export default {
position: relative; position: relative;
height: 78vh; height: 78vh;
min-height: 560px; min-height: 560px;
overflow: hidden; /* 裁切由轮播图 object-fit 完成；hidden 易与内部 Swiper 的 overflow 叠成把文案/按钮裁没 */
overflow: visible;
background: #0f172a; background: #0f172a;
} }
/* Swiper 5 默认 .swiper-container / .swiper-wrapper 为 overflow:hidden，会裁切首屏标题与 CTA（fade 模式可放开） */
.banner /deep/ .swiper-container,
.banner /deep/ .swiper-wrapper,
.banner /deep/ .swiper-slide {
overflow: visible;
}
.banner-content, .banner-content,
.banner-content img { .banner-content img {
width: 100%; width: 100%;
@@ -620,7 +628,7 @@ export default {
.products-section, .products-section,
.cases-section, .cases-section,
.clients-section, .clients-section,
.contact-section { .home-contact {
padding: 108px 0; padding: 108px 0;
} }
@@ -634,7 +642,7 @@ export default {
.core-advantages, .core-advantages,
.delivery-capabilities, .delivery-capabilities,
.products-section, .products-section,
.contact-section { .home-contact {
background: #fff; background: #fff;
} }
@@ -672,10 +680,7 @@ export default {
text-align: center; text-align: center;
} }
.intro-content, .advantages-grid {
.advantages-grid,
.areas-grid,
.contact-info {
display: grid; display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px; gap: 28px;
@@ -741,7 +746,7 @@ export default {
.intro-card, .intro-card,
.area-item, .area-item,
.case-card, .case-card,
.contact-item, .home-contact__card,
.box, .box,
.client-item { .client-item {
border: 1px solid #e4e7ec; border: 1px solid #e4e7ec;
@@ -754,7 +759,7 @@ export default {
.intro-card:hover, .intro-card:hover,
.area-item:hover, .area-item:hover,
.case-card:hover, .case-card:hover,
.contact-item:hover, .home-contact__card:hover,
.box:hover, .box:hover,
.client-item:hover { .client-item:hover {
transform: translateY(-3px); transform: translateY(-3px);
@@ -768,7 +773,7 @@ export default {
.card-icon, .card-icon,
.advantage-icon, .advantage-icon,
.contact-icon { .home-contact__icon {
width: 48px; width: 48px;
height: 48px; height: 48px;
color: #2563eb; color: #2563eb;
@@ -780,7 +785,7 @@ export default {
.card-icon /deep/ svg, .card-icon /deep/ svg,
.advantage-icon /deep/ svg, .advantage-icon /deep/ svg,
.contact-icon /deep/ svg { .home-contact__icon /deep/ svg {
width: 100%; width: 100%;
height: 100%; height: 100%;
fill: none; fill: none;
@@ -793,7 +798,7 @@ export default {
.intro-card h3, .intro-card h3,
.advantage-item h3, .advantage-item h3,
.area-item h3, .area-item h3,
.contact-item h4, .home-contact__card h4,
.boxTableHeader .h2 { .boxTableHeader .h2 {
margin: 0 0 12px; margin: 0 0 12px;
color: #101828; color: #101828;
@@ -802,7 +807,7 @@ export default {
} }
.intro-card h3, .intro-card h3,
.contact-item h4, .home-contact__card h4,
.boxTableHeader .h2 { .boxTableHeader .h2 {
font-size: 20px; font-size: 20px;
} }
@@ -810,7 +815,7 @@ export default {
.intro-card p, .intro-card p,
.advantage-item p, .advantage-item p,
.area-item p, .area-item p,
.contact-item p, .home-contact__card p,
.product-description { .product-description {
margin: 0; margin: 0;
color: #667085; color: #667085;
@@ -1211,21 +1216,21 @@ export default {
opacity: 1; opacity: 1;
} }
.contact-item { .home-contact__card {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 18px; gap: 18px;
padding: 28px; padding: 28px;
} }
.contact-entry-grid { .home-contact__grid {
display: grid; display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px; gap: 28px;
margin-top: 42px; margin-top: 42px;
} }
.contact-icon { .home-contact__icon {
flex: 0 0 42px; flex: 0 0 42px;
width: 42px; width: 42px;
height: 42px; height: 42px;
@@ -1286,13 +1291,10 @@ export default {
} }
@media (max-width: 992px) { @media (max-width: 992px) {
.intro-content,
.advantages-grid, .advantages-grid,
.capability-grid, .capability-grid,
.areas-grid,
.cases-grid, .cases-grid,
.contact-entry-grid, .home-contact__grid {
.contact-info {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
@@ -1313,10 +1315,16 @@ export default {
@media (max-width: 768px) { @media (max-width: 768px) {
.banner { .banner {
--hero-safe-top: 128px; /* 与固定顶栏高度匹配；高度用 clamp 避免 min-height+vh 叠出过高的空白带 */
--hero-safe-bottom: 34px; --hero-safe-top: calc(76px + env(safe-area-inset-top, 0px));
height: 72vh; --hero-safe-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
min-height: 520px; min-height: unset;
/* 下限保证 CTA 完整，上限避免长屏手机下半截全是空渐变 */
height: clamp(460px, 62vh, 540px);
}
.swiper-pagination {
bottom: 20px;
} }
.banner-overlay { .banner-overlay {
@@ -1325,26 +1333,50 @@ export default {
.banner-text { .banner-text {
width: calc(100% - 36px); width: calc(100% - 36px);
height: auto;
min-height: 0;
max-height: 100%;
padding-top: var(--hero-safe-top); padding-top: var(--hero-safe-top);
padding-bottom: var(--hero-safe-bottom); padding-bottom: var(--hero-safe-bottom);
box-sizing: border-box;
} }
.banner-copy { .banner-copy {
margin-bottom: 2px; margin-bottom: 2px;
flex-shrink: 0;
} }
.banner-title { .banner-title {
font-size: 36px; font-size: clamp(28px, 7.5vw, 34px);
line-height: 1.18;
} }
.banner-subtitle { .banner-subtitle {
font-size: 16px; font-size: 15px;
line-height: 1.55;
} }
.hero-actions { .hero-actions {
align-items: stretch; align-items: stretch;
flex-direction: column; flex-direction: column;
max-width: 260px; max-width: 260px;
margin-top: 16px;
flex-shrink: 0;
}
.hero-assessment {
margin-top: 14px;
padding: 12px 14px;
max-width: 100%;
}
.hero-assessment strong {
font-size: 16px;
}
.hero-assessment span {
font-size: 13px;
line-height: 1.55;
} }
.company-intro, .company-intro,
@@ -1354,7 +1386,7 @@ export default {
.products-section, .products-section,
.cases-section, .cases-section,
.clients-section, .clients-section,
.contact-section { .home-contact {
padding: 48px 0; padding: 48px 0;
} }
@@ -1376,20 +1408,13 @@ export default {
margin-bottom: 28px; margin-bottom: 28px;
} }
.intro-content,
.advantages-grid, .advantages-grid,
.areas-grid,
.capability-grid, .capability-grid,
.contact-info { .home-contact__grid {
margin-top: 28px; margin-top: 28px;
gap: 20px; gap: 20px;
} }
.contact-entry-grid {
gap: 20px;
margin-top: 28px;
}
.pageBoxes, .pageBoxes,
.cases-grid { .cases-grid {
gap: 20px; gap: 20px;
@@ -1400,7 +1425,7 @@ export default {
margin-top: 28px; margin-top: 28px;
} }
.contact-item { .home-contact__card {
padding: 20px; padding: 20px;
} }
} }