feat: 移动端适配

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;
   }
 }
 </style>

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;
+    margin-top: 16px;
-    font-size: 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;
+  }
 }
 </style>

txw-mhzc-web/src/pages/index/views/login/login.vue

@@ -1,15 +1,14 @@
 <template>
   <main class="login-mind">
     <div class="dlbox" style="font-size: 12px">
-      <div class="bg-white rounded-2xl auth-card-shadow login-box" style="display: flex;height: 550px; margin-top: -100px;">
+      <!-- PC端布局：左右横向平铺 -->
+      <div class="bg-white rounded-2xl auth-card-shadow login-box pc-layout">
         <div class="left-login">
           <div class="left-login-text">DID扫码登录</div>
           <div class="qrcode-container" @click="Getnewqrcode()">
-        <div ref="qrcodeElement" class="qrcode-wrapper"></div>
+            <div ref="qrcodePC" class="qrcode-wrapper"></div>
-
           </div>
-              <div class="left-login-bottom">请打开<span class="left-login-bottom-text">航贸身份通</span>APP/小程序
+          <div class="left-login-bottom">请打开<span class="left-login-bottom-text">航贸身份通</span>APP/小程序扫一扫登录</div>
-扫一扫登录</div>
         </div>
         <div class="right-login">
           <t-space style="width: 100%">
@@ -23,6 +22,27 @@
           <zhuce v-if="type === 'created'" @zhucecg="typechange" />
         </div>
       </div>
+      <!-- 移动端布局：Tab切换 -->
+      <div class="bg-white rounded-2xl auth-card-shadow login-box mobile-layout">
+        <div class="login-content">
+          <t-tabs class="loginTabs" v-model="loginTab" size="large">
+            <t-tab-panel value="account" label="账号登录" :destroyOnHide="false">
+              <login v-if="type === 'login'" />
+              <zhuce v-if="type === 'created'" @zhucecg="typechange" />
+            </t-tab-panel>
+            <t-tab-panel v-if="MH_REGISTRATION_ENABLED" value="register" label="注册" :destroyOnHide="false">
+            </t-tab-panel>
+            <t-tab-panel value="qrcode" label="扫码登录" :destroyOnHide="false">
+              <div class="qrcode-login">
+                <div class="qrcode-container" @click="Getnewqrcode()">
+                  <div ref="qrcodeMobile" class="qrcode-wrapper"></div>
+                </div>
+                <div class="qrcode-tip">请打开<span class="highlight">航贸身份通</span>APP/小程序扫一扫登录</div>
+              </div>
+            </t-tab-panel>
+          </t-tabs>
+        </div>
+      </div>
     </div>
      <t-dialog
         :closeOnOverlayClick="false"
@@ -68,7 +88,7 @@ export default {
   data() {
     return {
       type: 'login',
-        qrcodeText: '',
+      loginTab: 'account',
       qrcodeTextPreview: '',
       
       // 配置参数
@@ -110,11 +130,14 @@ export default {
   },
   methods: {
         clearQRCode() {
-  // 清除容器内容
+  // 清除PC端容器
-  if (this.$refs.qrcodeElement) {
+  if (this.$refs.qrcodePC) {
-    this.$refs.qrcodeElement.innerHTML = '';
+    this.$refs.qrcodePC.innerHTML = '';
+  }
+  // 清除移动端容器
+  if (this.$refs.qrcodeMobile) {
+    this.$refs.qrcodeMobile.innerHTML = '';
   }
-  
   // 清除 QRCode 实例
   if (this.qrCode) {
     this.qrCode = null;
@@ -260,7 +283,9 @@ export default {
           ? this.qrcodeText.substring(0, 50) + '...'
           : this.qrcodeText;
 
-        this.qrCode = new QRCode(this.$refs.qrcodeElement, {
+        // PC端二维码
+        if (this.$refs.qrcodePC) {
+          this.qrCode = new QRCode(this.$refs.qrcodePC, {
             text: this.qrcodeText,
             width: this.width,
             height: this.height,
@@ -268,6 +293,18 @@ export default {
             colorLight: this.colorLight,
             correctLevel: QRCode.CorrectLevel[this.correctLevel]
           });
+        }
+        // 移动端二维码
+        if (this.$refs.qrcodeMobile) {
+          new QRCode(this.$refs.qrcodeMobile, {
+            text: this.qrcodeText,
+            width: this.width,
+            height: this.height,
+            colorDark: this.colorDark,
+            colorLight: this.colorLight,
+            correctLevel: QRCode.CorrectLevel[this.correctLevel]
+          });
+        }
 
         this.$nextTick(() => {
           this.removeQRTitles();
@@ -276,16 +313,22 @@ export default {
       }
     },
     removeQRTitles() {
-  if (!this.$refs.qrcodeElement) return;
+  // 移除PC端容器的 title
-  
+  if (this.$refs.qrcodePC) {
-  // 移除容器本身的 title
+    this.$refs.qrcodePC.removeAttribute('title');
-  this.$refs.qrcodeElement.removeAttribute('title');
+    const elements = this.$refs.qrcodePC.querySelectorAll('*');
-  
-  // 移除内部元素的 title
-  const elements = this.$refs.qrcodeElement.querySelectorAll('*');
     elements.forEach(el => {
       el.removeAttribute('title');
     });
+  }
+  // 移除移动端容器的 title
+  if (this.$refs.qrcodeMobile) {
+    this.$refs.qrcodeMobile.removeAttribute('title');
+    const elements = this.$refs.qrcodeMobile.querySelectorAll('*');
+    elements.forEach(el => {
+      el.removeAttribute('title');
+    });
+  }
 }
   },
 };
@@ -295,6 +338,7 @@ export default {
   position: relative;
   width: 100%;
   height: 100vh;
+  height: 100dvh;
   background: url(../../assets/loginbg.png) center center/100% 100% no-repeat;
 }
 .dlbox {
@@ -305,48 +349,83 @@ export default {
   // width: 540px;
   transform: translate(-50%,-50%);
 }
-.login-box{
+.login-box {
   padding: 48px 0 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 550px;
+  margin-top: -100px;
 }
-.left-login{
+/* PC端布局 - 默认显示 */
+.pc-layout {
+  display: flex;
+}
+/* 移动端布局 - 默认隐藏 */
+.mobile-layout {
+  display: none;
+}
+.login-content {
+  width: 100%;
+  max-width: 400px;
+}
+.qrcode-login {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 32px 0;
+}
+.qrcode-container {
+  width: 216px;
+  padding: 8px;
+  border: 1px solid rgba(212,212,213,1);
+  border-radius: 8px;
+}
+.qrcode-tip {
+  margin-top: 24px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 26px;
+  color: #666;
+  text-align: center;
+}
+.qrcode-tip .highlight {
+  font-weight: 600;
+  color: #2E7D32;
+}
+/* PC端左右布局样式 */
+.left-login {
   padding: 0 64px;
   padding-top: 44px;
   border-right: 2px solid #F5F5F5;
-  .left-login-text{
+}
-padding-bottom: 28px;
+.left-login-text {
+  padding-bottom: 28px;
   font-size: 28px;
-font-weight: 600;
+  font-weight: 600;
-letter-spacing: 0;
+  letter-spacing: 0;
-color: #1A1B24;
+  color: #1A1B24;
-text-align: center;
+  text-align: center;
-  }
 }
-.qrcode-container{
+.left-login-bottom {
-  width: 216px;
-  padding: 8px;
-    margin: auto;
-  border: 1px solid rgba(212,212,213,1);
-border-radius: 8px;
-}
-.left-login-bottom{
   width: 254px;
-margin-top: 24px;
+  margin-top: 24px;
   font-size: 18px;
-font-weight: 400;
+  font-weight: 400;
-line-height: 26px;
+  line-height: 26px;
-letter-spacing: 0;
+  letter-spacing: 0;
-color: #666;
+  color: #666;
-text-align: center;
+  text-align: center;
-.left-login-bottom-text{
+}
+.left-login-bottom-text {
   font-size: 18px;
-font-weight: 600;
+  font-weight: 600;
-line-height: 26px;
+  line-height: 26px;
-letter-spacing: 0;
+  letter-spacing: 0;
-color: #2E7D32;
+  color: #2E7D32;
-text-align: center;
+  text-align: center;
 }
-}
+.right-login {
-.right-login{
   padding: 0 64px;
 }
   .verification-code {
@@ -374,4 +453,71 @@ text-align: center;
   .btn-container {
     margin-top: 30px;
   }
+
+  @media (max-width: 768px) {
+  .login-mind {
+    background: url(../../assets/loginbg.png) center top/cover no-repeat;
+  }
+
+  .dlbox {
+    position: relative;
+    top: auto;
+    left: auto;
+    transform: none;
+    width: 100%;
+    max-width: 360px;
+    margin: 40px auto;
+    padding: 0 20px;
+  }
+
+  /* PC布局隐藏，移动端布局显示 */
+  .pc-layout {
+    display: none;
+  }
+  .mobile-layout {
+    display: flex;
+    flex-direction: column;
+    padding: 32px 24px;
+    height: auto;
+    margin-top: 0;
+  }
+
+  .login-content {
+    max-width: 100%;
+  }
+
+  .qrcode-login {
+    padding: 20px 0;
+  }
+
+  .qrcode-container {
+    width: 200px;
+  }
+
+  .qrcode-tip {
+    font-size: 15px;
+    margin-top: 20px;
+    line-height: 1.6;
+  }
+}
+
+@media (max-width: 480px) {
+  .dlbox {
+    margin: 30px auto;
+    padding: 0 16px;
+    padding-top:40px;
+  }
+
+  .mobile-layout {
+    padding: 24px 16px;
+  }
+
+  .qrcode-container {
+    width: 180px;
+  }
+
+  .qrcode-tip {
+    font-size: 14px;
+  }
+}
 </style>