diff --git a/txw-mhzc-web/src/pages/index/components/nav/index2.vue b/txw-mhzc-web/src/pages/index/components/nav/index2.vue index 22acdb9..f55da7e 100644 --- a/txw-mhzc-web/src/pages/index/components/nav/index2.vue +++ b/txw-mhzc-web/src/pages/index/components/nav/index2.vue @@ -597,10 +597,13 @@ export default { .mobile-menu { position: fixed; top: 0; + left: 0; right: 0; + bottom: 0; z-index: 10000; width: 100%; - height: 100%; + height: 100vh; + height: 100dvh; visibility: hidden; transition: visibility 0.3s ease; } @@ -622,10 +625,11 @@ export default { position: absolute; top: 0; right: 0; + bottom: 0; display: flex; width: 280px; + max-width: 85%; height: 100%; - max-width: 80%; background: #fff; transform: translateX(100%); transition: transform 0.3s ease; @@ -728,9 +732,11 @@ export default { /* 移动端适配 */ @media (max-width: 768px) { .nav-box { - height: 64px; + height: 56px; grid-template-columns: 1fr auto auto; padding: 0 16px; + border-radius: 0; + background: rgba(255, 255, 255, 0.95); } .menu-box { @@ -742,7 +748,52 @@ export default { } .hamburger-btn { - display: block; + display: flex; + align-items: center; + justify-content: center; + padding: 12px; + cursor: pointer; + } + + .hamburger-icon { + position: relative; + width: 24px; + height: 18px; + } + + .hamburger-icon span { + position: absolute; + left: 0; + width: 100%; + height: 2px; + background: #003B1A; + transition: all 0.3s ease; + } + + .hamburger-icon span:nth-child(1) { + top: 0; + } + + .hamburger-icon span:nth-child(2) { + top: 8px; + } + + .hamburger-icon span:nth-child(3) { + top: 16px; + } + + .hamburger-icon.active span:nth-child(1) { + top: 8px; + transform: rotate(45deg); + } + + .hamburger-icon.active span:nth-child(2) { + opacity: 0; + } + + .hamburger-icon.active span:nth-child(3) { + top: 8px; + transform: rotate(-45deg); } .logo-box { @@ -750,7 +801,7 @@ export default { } .logo-box img { - height: 28px; + height: 32px; } } @@ -759,8 +810,12 @@ export default { padding: 0 12px; } + .hamburger-btn { + padding: 10px; + } + .logo-box img { - height: 24px; + height: 28px; } } diff --git a/txw-mhzc-web/src/pages/index/views/home2/index.vue b/txw-mhzc-web/src/pages/index/views/home2/index.vue index 5deb193..74b35d5 100644 --- a/txw-mhzc-web/src/pages/index/views/home2/index.vue +++ b/txw-mhzc-web/src/pages/index/views/home2/index.vue @@ -1867,7 +1867,7 @@ export default { @media (max-width: 767px) { /* 容器调整 */ .container { - margin-top: 0; + margin-top: 64px; } /* 顶部区域 */ @@ -1877,7 +1877,7 @@ export default { } .top-title { - margin-top: 60px; + margin-top: 40px; } .top-title img { @@ -1887,8 +1887,8 @@ export default { .top-title-desc { padding: 0 20px; - margin-top: 20px; - font-size: 16px; + margin-top: 16px; + font-size: 14px; } .top-search-box { @@ -1953,17 +1953,52 @@ export default { } /* 核心驱动区域 */ + .section-container { + padding: 0 16px; + } + + .section-title.core-title { + background-size: 28px 28px; + padding-left: 36px; + } + + .section-title.core-title::after { + left: 36px; + width: 100px; + height: 6px; + } + + .section-title .title-bar { + width: 5px; + height: 28px; + } + + .section-title .title-text { + font-size: 28px; + } + .core-section { - padding: 60px 0; + padding: 40px 0; } .core-grid { grid-template-columns: 1fr; - gap: 20px; + gap: 16px; + } + + .core-item { + padding: 20px 16px; + } + + .core-item .core-icon { + width: 100px; + height: 100px; + margin-bottom: 16px; } .core-item .core-name1 { - font-size: 16px; + font-size: 14px; + width: auto; } .core-item .core-name2 { @@ -1971,18 +2006,22 @@ export default { } .core-item .core-desc { - font-size: 14px; + font-size: 13px; } /* 共性能力区域 */ .capability-section { - padding: 60px 0; + padding: 40px 0; + } + + .capability-header { + margin-bottom: 24px; } .capability-title-group { flex-direction: column; align-items: center; - gap: 16px; + gap: 12px; } .capability-title-icon { @@ -1994,14 +2033,22 @@ export default { font-size: 28px; } + .capability-title-bar { + width: 100px; + height: 6px; + margin-top: -10px; + } + .capability-desc { - font-size: 18px; + font-size: 16px; text-align: center; + line-height: 24px; } .capability-grid { grid-template-columns: 1fr; - gap: 16px; + gap: 12px; + padding: 0 16px; } .capability-card { @@ -2123,6 +2170,211 @@ export default { .top-box ::v-deep .t-swiper__navigation { display: none; } + + /* Hero Cards 移动端适配 */ + .hero-cards { + grid-template-columns: 1fr; + gap: 12px; + margin-top: 32px; + padding: 0 16px; + width: calc(100% - 32px); + max-width: none; + } + + .hero-card { + width: 100%; + max-width: none; + height: auto; + min-height: 140px; + margin: 0 auto; + } + + .hero-card .card-header { + height: 56px; + } + + .hero-card .card-title { + font-size: 20px; + } + + .hero-card .card-body { + grid-template-columns: 1fr 1fr; + gap: 10px; + padding: 12px; + } + + .hero-card .card-btn { + width: 100%; + height: 36px; + font-size: 13px; + border-radius: 6px; + } + + /* 企业出海移动端适配 */ + .overseas2-section { + padding: 40px 0; + } + + .overseas2-header { + margin-bottom: 24px; + } + + .overseas2-title-group { + flex-direction: column; + align-items: center; + gap: 12px; + } + + .overseas2-title-icon { + width: 28px; + height: 28px; + } + + .overseas2-title-text { + font-size: 28px; + } + + .overseas2-title-bar { + width: 100px; + height: 6px; + margin-top: -10px; + } + + .overseas2-desc { + font-size: 16px; + line-height: 24px; + text-align: center; + } + + .overseas2-grid { + width: 100%; + padding: 0 16px; + gap: 12px; + } + + .overseas2-card { + width: 100%; + height: auto; + min-height: 80px; + padding: 12px 16px; + flex-direction: row; + gap: 12px; + } + + .overseas2-card-content { + flex: 1; + min-width: 0; + } + + .overseas2-icon { + width: 40px; + height: 40px; + flex-shrink: 0; + } + + .overseas2-text { + gap: 2px; + } + + .overseas2-name { + font-size: 18px; + } + + .overseas2-item-desc { + font-size: 13px; + white-space: normal; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + } + + .overseas2-btn { + width: 56px; + height: 56px; + font-size: 12px; + flex-shrink: 0; + } + + /* 行业动态移动端适配 */ + .news-section { + padding: 40px 0; + } + + .news-title-group { + flex-direction: column; + align-items: center; + gap: 12px; + } + + .news-title-icon { + width: 28px; + height: 28px; + } + + .news-title-text { + font-size: 28px; + } + + .news-title-bar { + width: 100px; + height: 6px; + margin-top: -10px; + } + + .news-tabs { + gap: 12px; + flex-wrap: wrap; + justify-content: center; + margin-top: -20px; + margin-bottom: 24px; + } + + .news-tab { + padding: 6px 16px; + font-size: 14px; + } + + .news-list { + height: auto; + max-height: none; + gap: 12px; + padding: 0 16px; + } + + .news-item { + flex-direction: column; + padding: 12px; + gap: 12px; + } + + .news-pic { + width: 100%; + height: 140px; + } + + .news-content-top .news-title { + font-size: 16px; + } + + .news-content-middle { + gap: 8px; + } + + .news-content-bottom { + font-size: 13px; + -webkit-line-clamp: 3; + } + + .news-more { + padding: 16px 16px 0 0; + } + + /* 合作伙伴移动端隐藏(动画在移动端影响性能) */ + .partner-section { + display: none; + } } /* 平板适配 */ @@ -2141,6 +2393,10 @@ export default { height: 450px; } + .core-grid { + grid-template-columns: repeat(2, 1fr); + } + .capability-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; @@ -2159,5 +2415,22 @@ export default { .capability-name { font-size: 20px; } + + /* 企业出海平板适配 */ + .overseas2-card { + width: 100%; + max-width: 500px; + } + + /* Hero Cards 平板适配 */ + .hero-cards { + grid-template-columns: repeat(2, 1fr); + gap: 20px; + } + + .hero-card { + width: 100%; + max-width: none; + } } \ No newline at end of file diff --git a/txw-mhzc-web/src/pages/index/views/login/login.vue b/txw-mhzc-web/src/pages/index/views/login/login.vue index 3b6e72e..c605c83 100644 --- a/txw-mhzc-web/src/pages/index/views/login/login.vue +++ b/txw-mhzc-web/src/pages/index/views/login/login.vue @@ -1,27 +1,47 @@