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:20:02 +08:00
parent 9ae71507c8
commit f0623c69ff
8 changed files with 166 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,7 +8,7 @@
@media (max-width: @mobile-breakpoint) { @media (max-width: @mobile-breakpoint) {
// 页面横幅移动端适配 // 页面横幅移动端适配
.page-banner { .page-banner {
padding: 60px 0 40px !important; padding: 48px 0 28px !important;
} }
.banner-title { .banner-title {
@@ -46,7 +46,7 @@
.contact-grid, .contact-grid,
.tech-grid { .tech-grid {
grid-template-columns: 1fr !important; grid-template-columns: 1fr !important;
gap: 20px !important; gap: 16px !important;
} }
// 卡片移动端适配 // 卡片移动端适配
@@ -57,13 +57,13 @@
.team-member, .team-member,
.contact-card, .contact-card,
.tech-layer { .tech-layer {
padding: 25px 20px !important; padding: 20px 16px !important;
margin-bottom: 20px !important; margin-bottom: 14px !important;
} }
// 内容区域移动端适配 // 内容区域移动端适配
.content-section { .content-section {
margin-bottom: 40px !important; margin-bottom: 28px !important;
} }
.section-text { .section-text {
@@ -97,7 +97,7 @@
padding-left: 20px !important; padding-left: 20px !important;
.timeline-item { .timeline-item {
margin-bottom: 30px !important; margin-bottom: 22px !important;
padding-left: 20px !important; padding-left: 20px !important;
.timeline-date { .timeline-date {
@@ -119,16 +119,16 @@
// 统计数字移动端适配 // 统计数字移动端适配
.stats-section { .stats-section {
padding: 40px 0 !important; padding: 28px 0 !important;
.stats-grid { .stats-grid {
grid-template-columns: repeat(2, 1fr) !important; grid-template-columns: repeat(2, 1fr) !important;
gap: 20px !important; gap: 16px !important;
} }
.stat-item { .stat-item {
text-align: center !important; text-align: center !important;
padding: 20px 15px !important; padding: 16px 12px !important;
.stat-number { .stat-number {
font-size: 2rem !important; font-size: 2rem !important;
@@ -145,7 +145,7 @@
.team-section { .team-section {
.team-grid { .team-grid {
grid-template-columns: 1fr !important; grid-template-columns: 1fr !important;
gap: 25px !important; gap: 18px !important;
} }
.team-member { .team-member {
@@ -178,7 +178,7 @@
.contact-section { .contact-section {
.contact-grid { .contact-grid {
grid-template-columns: 1fr !important; grid-template-columns: 1fr !important;
gap: 25px !important; gap: 18px !important;
} }
.contact-info { .contact-info {
@@ -226,8 +226,8 @@
// 解决方案移动端适配 // 解决方案移动端适配
.solutions-section { .solutions-section {
.solution-item { .solution-item {
margin-bottom: 30px !important; margin-bottom: 20px !important;
padding: 20px !important; padding: 16px !important;
.solution-icon { .solution-icon {
font-size: 2.5rem !important; font-size: 2.5rem !important;
@@ -252,8 +252,8 @@
// 优势特点移动端适配 // 优势特点移动端适配
.advantages-section { .advantages-section {
.advantage-item { .advantage-item {
margin-bottom: 25px !important; margin-bottom: 18px !important;
padding: 20px !important; padding: 16px !important;
text-align: center !important; text-align: center !important;
.advantage-icon { .advantage-icon {
@@ -276,8 +276,8 @@
// 服务领域移动端适配 // 服务领域移动端适配
.areas-section { .areas-section {
.area-item { .area-item {
margin-bottom: 25px !important; margin-bottom: 18px !important;
padding: 20px !important; padding: 16px !important;
text-align: center !important; text-align: center !important;
.area-icon { .area-icon {
@@ -296,7 +296,7 @@
} }
.area-features { .area-features {
margin-top: 15px !important; margin-top: 12px !important;
text-align: left !important; text-align: left !important;
} }
} }
@@ -367,7 +367,7 @@
.form-actions { .form-actions {
text-align: center !important; text-align: center !important;
margin-top: 30px !important; margin-top: 22px !important;
.btn { .btn {
margin: 0 5px 10px !important; margin: 0 5px 10px !important;
@@ -436,7 +436,7 @@
justify-content: center !important; justify-content: center !important;
flex-wrap: wrap !important; flex-wrap: wrap !important;
gap: 5px !important; gap: 5px !important;
margin: 30px 0 !important; margin: 18px 0 !important;
.page-item { .page-item {
.page-link { .page-link {
@@ -484,7 +484,7 @@
// 警告框移动端适配 // 警告框移动端适配
.alert { .alert {
padding: 15px !important; padding: 15px !important;
margin: 20px 0 !important; margin: 14px 0 !important;
border-radius: 4px !important; border-radius: 4px !important;
font-size: 0.95rem !important; font-size: 0.95rem !important;
@@ -681,17 +681,32 @@
padding: 20px !important; padding: 20px !important;
} }
} }
// 解决方案子页共用（facilityManagement、appDelivery 等 .solution-page 结构）
.solution-page {
.hero {
padding: 118px 0 52px !important;
}
.section {
padding: 48px 0 !important;
}
h2 {
margin-bottom: 18px !important;
}
}
// 页脚移动端适配 // 页脚移动端适配（块间距略紧，避免与组件内边距叠得过高）
.footer { .footer {
padding: 40px 0 20px !important; padding: 28px 0 16px !important;
text-align: center !important; text-align: center !important;
.footer-content { .footer-content {
margin-bottom: 30px !important; margin-bottom: 18px !important;
.footer-section { .footer-section {
margin-bottom: 25px !important; margin-bottom: 14px !important;
.footer-title { .footer-title {
font-size: 1.1rem !important; font-size: 1.1rem !important;
@@ -721,7 +736,7 @@
.footer-bottom { .footer-bottom {
border-top: 1px solid #eee !important; border-top: 1px solid #eee !important;
padding-top: 20px !important; padding-top: 14px !important;
font-size: 0.85rem !important; font-size: 0.85rem !important;
color: #999 !important; color: #999 !important;
} }

6
src/assets/css/content_pages.less
View File

@@ -206,7 +206,7 @@
/* 响应式布局调整 */ /* 响应式布局调整 */
@media (max-width: @breakpoint-lg) { @media (max-width: @breakpoint-lg) {
.contentPage { .contentPage {
padding-top: @spacing-xxl; padding-top: @spacing-xl;
} }
.contentTableLeft, .contentTableLeft,
@@ -222,7 +222,7 @@
@media (max-width: @breakpoint-md) { @media (max-width: @breakpoint-md) {
.contentPage { .contentPage {
padding-top: @spacing-xl; padding-top: @spacing-lg;
} }
.contentTableLeft { .contentTableLeft {
@@ -232,7 +232,7 @@
@media (max-width: @breakpoint-sm) { @media (max-width: @breakpoint-sm) {
.contentPage { .contentPage {
padding-top: @spacing-lg; padding-top: @spacing-md;
} }
.contentTableLeft { .contentTableLeft {

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

@@ -66,7 +66,7 @@
} }
.menuContent { .menuContent {
padding: 80px 20px 20px; padding: 64px 20px 20px;
color: #0f172a; color: #0f172a;
ul { ul {
@@ -128,8 +128,8 @@
} }
.goBack { .goBack {
margin-top: 30px; margin-top: 18px;
padding-top: 20px; padding-top: 14px;
border-top: 1px solid #e2e8f0; border-top: 1px solid #e2e8f0;
text-align: center; text-align: center;
@@ -160,19 +160,19 @@
min-height: 400px; min-height: 400px;
.banner-content { .banner-content {
padding: 40px 20px; padding: 28px 16px;
text-align: center; text-align: center;
.banner-title { .banner-title {
font-size: 2.5rem; font-size: 2.5rem;
line-height: 1.2; line-height: 1.2;
margin-bottom: 20px; margin-bottom: 14px;
} }
.banner-subtitle { .banner-subtitle {
font-size: 1.2rem; font-size: 1.2rem;
line-height: 1.4; line-height: 1.4;
margin-bottom: 30px; margin-bottom: 20px;
} }
.banner-button { .banner-button {
@@ -188,18 +188,18 @@
} }
.section { .section {
padding: 40px 0; padding: 28px 0;
.section-title { .section-title {
font-size: 2rem; font-size: 2rem;
line-height: 1.3; line-height: 1.3;
margin-bottom: 20px; margin-bottom: 14px;
} }
.section-subtitle { .section-subtitle {
font-size: 1.1rem; font-size: 1.1rem;
line-height: 1.5; line-height: 1.5;
margin-bottom: 30px; margin-bottom: 20px;
} }
} }
@@ -211,7 +211,7 @@
.team-grid, .team-grid,
.contact-grid { .contact-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 20px; gap: 16px;
} }
// 移动端卡片适配 // 移动端卡片适配
@@ -221,12 +221,12 @@
.service-card, .service-card,
.team-card, .team-card,
.contact-card { .contact-card {
padding: 20px; padding: 16px;
margin-bottom: 20px; margin-bottom: 14px;
.card-title { .card-title {
font-size: 1.3rem; font-size: 1.3rem;
margin-bottom: 15px; margin-bottom: 12px;
} }
.card-content { .card-content {
@@ -254,7 +254,7 @@
// 移动端表单适配 // 移动端表单适配
.form-group { .form-group {
margin-bottom: 20px; margin-bottom: 16px;
label { label {
display: block; display: block;
@@ -399,7 +399,7 @@
} }
.section { .section {
padding: 30px 0; padding: 24px 0;
.section-title { .section-title {
font-size: 1.8rem; font-size: 1.8rem;
@@ -544,7 +544,7 @@
@media (orientation: landscape) and (max-height: 500px) { @media (orientation: landscape) and (max-height: 500px) {
.headerMobileMenu { .headerMobileMenu {
.menuContent { .menuContent {
padding: 60px 20px 20px; padding: 52px 20px 20px;
} }
.closeMenu { .closeMenu {

38
src/components/ifooter.vue
View File

@@ -367,12 +367,13 @@ export default {
/* 响应式设计 */ /* 响应式设计 */
@media (max-width: 768px) { @media (max-width: 768px) {
.footer-content { .footer-content {
padding: 40px 0 0 0; padding: 28px 0 0 0;
} }
.footer-main { .footer-main {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 30px; gap: 20px;
margin-bottom: 28px;
justify-items: center; justify-items: center;
text-align: center; text-align: center;
} }
@@ -381,6 +382,34 @@ export default {
width: min(520px, 100%); width: min(520px, 100%);
} }
.footer-section h4 {
margin-bottom: 12px;
}
.footer-logo .logo {
margin-bottom: 10px;
}
.footer-logo h3 {
margin-bottom: 8px;
}
.footer-cta {
margin-top: 14px;
}
.footer-links li {
margin-bottom: 8px;
}
.contact-info {
gap: 10px;
}
.footer-address {
margin-top: 12px;
}
.footer-section h4::after { .footer-section h4::after {
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
@@ -409,9 +438,14 @@ export default {
align-items: center; align-items: center;
} }
.footer-bottom {
padding: 14px 0;
}
.footer-bottom-content { .footer-bottom-content {
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
gap: 12px;
} }
.back-to-top { .back-to-top {

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

@@ -319,11 +319,11 @@ export default {
@media (max-width: 768px) { @media (max-width: 768px) {
.about-us-page { .about-us-page {
padding-top: 72px; padding-top: 56px;
} }
.page-hero { .page-hero {
padding: 72px 0 58px; padding: 56px 0 44px;
} }
.page-hero h1 { .page-hero h1 {
@@ -335,7 +335,7 @@ export default {
} }
.section { .section {
padding: 68px 0; padding: 48px 0;
} }
.section-title { .section-title {

35
src/views/index.vue
View File

@@ -1209,6 +1209,7 @@ export default {
} }
.contact-item { .contact-item {
display: flex;
align-items: flex-start; align-items: flex-start;
gap: 18px; gap: 18px;
padding: 28px; padding: 28px;
@@ -1351,7 +1352,7 @@ export default {
.cases-section, .cases-section,
.clients-section, .clients-section,
.contact-section { .contact-section {
padding: 64px 0; padding: 48px 0;
} }
.section-title { .section-title {
@@ -1367,5 +1368,37 @@ export default {
.clients-grid { .clients-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.intro-header {
margin-bottom: 28px;
}
.intro-content,
.advantages-grid,
.areas-grid,
.capability-grid,
.contact-info {
margin-top: 28px;
gap: 20px;
}
.contact-entry-grid {
gap: 20px;
margin-top: 28px;
}
.pageBoxes,
.cases-grid {
gap: 20px;
margin-top: 28px;
}
.clients-grid {
margin-top: 28px;
}
.contact-item {
padding: 20px;
}
} }
</style> </style>

14
src/views/legal/LegalPage.vue
View File

@@ -153,4 +153,18 @@ export default {
font-size: 16px; font-size: 16px;
line-height: 1.8; line-height: 1.8;
} }
@media (max-width: 768px) {
.legal-hero {
padding: 112px 0 48px;
}
.legal-content {
padding: 48px 0;
}
.legal-section {
padding: 20px 0;
}
}
</style> </style>

19
src/views/ourPlan/ourPlan.vue
View File

@@ -270,4 +270,23 @@ export default {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
} }
@media (max-width: 768px) {
.main-content {
padding: 52px 0;
}
.section-title {
margin-bottom: 22px;
font-size: 28px;
}
.service-card {
padding: 20px;
}
.feature-item {
padding: 18px;
}
}
</style> </style>