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

View File

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

View File

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

View File

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

View File

@@ -367,12 +367,13 @@ export default {
/* 响应式设计 */
@media (max-width: 768px) {
.footer-content {
padding: 40px 0 0 0;
padding: 28px 0 0 0;
}
.footer-main {
grid-template-columns: 1fr;
gap: 30px;
gap: 20px;
margin-bottom: 28px;
justify-items: center;
text-align: center;
}
@@ -381,6 +382,34 @@ export default {
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 {
left: 50%;
transform: translateX(-50%);
@@ -409,9 +438,14 @@ export default {
align-items: center;
}
.footer-bottom {
padding: 14px 0;
}
.footer-bottom-content {
flex-direction: column;
text-align: center;
gap: 12px;
}
.back-to-top {

View File

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

View File

@@ -1209,6 +1209,7 @@ export default {
}
.contact-item {
display: flex;
align-items: flex-start;
gap: 18px;
padding: 28px;
@@ -1351,7 +1352,7 @@ export default {
.cases-section,
.clients-section,
.contact-section {
padding: 64px 0;
padding: 48px 0;
}
.section-title {
@@ -1367,5 +1368,37 @@ export default {
.clients-grid {
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>

View File

@@ -153,4 +153,18 @@ export default {
font-size: 16px;
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>

View File

@@ -270,4 +270,23 @@ export default {
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>