feat: 移动端适配

9a24e95e · wusiyi · 66cafb79 · 9a24e95e · 9a24e95e
Commit 9a24e95e authored Nov 13, 2025 by wusiyi
Show whitespace changes
Inline Side-by-side

Showing with 82 additions and 31 deletions

src/components/footer.vue
+2 -3

src/views/product/production.vue
+80 -28

No files found.
--- a/src/components/footer.vue
+++ b/src/components/footer.vue
@@ -3,7 +3,7 @@
    <FootBanner />
    <footer class="banner_footer">
      <div
-        class="footer-container flex justify-between text-white w-full-70 w-full-90 mx-auto py-12 px-6 lg:py-20 lg:px-0">
+        class="footer-container flex justify-between text-white w-full-70 w-full-90 mx-auto py-12 px-6 lg:py-14 lg:px-0">
        <div class="footer-content-left">
          <div class="mr-48 hidden lg:block">
            <div class="jomalls text-3xl font-bold tracking-wider font-mono">
@@ -135,7 +135,7 @@
        </div>
        <div class="footer-content-right flex flex-1 flex-col">
          <div
-            class="flex flex-col lg:flex-row lg:justify-between lg:mb-20 mb-7.5">
+            class="flex flex-col lg:flex-row lg:justify-between lg:mb-10 mb-7.5">
            <div
              v-for="(section, index) in footerSections"
              :key="index"
@@ -353,7 +353,6 @@ export default {
 <style scoped lang="scss">
 .banner_footer {
  background: #20222e;
-  padding-bottom: 48px;
 }
 .footer-routers {

--- a/src/views/product/production.vue
+++ b/src/views/product/production.vue
@@ -90,15 +90,16 @@
        <div class="flex flex-col m-auto">
          <h2 class="text-center mt-10">业务介绍</h2>
          <div
-            class="lg:w-8/12 w-full px-5 lg:px-0 m-auto flex justify-around items-center gap-32">
+            class="lg:w-8/12 w-full px-5 lg:px-0 m-auto flex flex-col lg:flex-row justify-between items-center lg:gap-32">
-            <div class="video-container w-1/3">
+            <div class="video-container lg:w-1/3">
              <video
                width="100%"
                class="video"
                src="../../assets/video/abount-jomalls2-video.mp4"
                controls></video>
            </div>
-            <div class="w-2/3 h-full lg:text-base text-xs font-light">
+            <div
+              class="lg:w-2/3 w-full h-full lg:text-base text-xs font-light mt-5 lg:mt-0">
              <p>
                九猫（西安）科技有限公司成立于2022年，致力于为企业出海提供降本提效的全域数智化一站式管理解决方案
              </p>
@@ -116,9 +117,10 @@
          </div>
        </div>
-        <div class="flex flex-col w-3/4 m-auto">
+        <div class="flex flex-col lg:w-3/4 w-10/12 m-auto">
-          <h2 class="text-center mt-10">Jomall快捷生产</h2>
+          <h2 class="w-full text-center">Jomall快捷生产</h2>
-          <div class="w-full flex justify-around items-center">
+          <div
+            class="w-full flex lg:flex-row flex-col justify-around items-center">
            <div>
              <div class="flex flex-col">
                <h4>快捷订单生产</h4>
@@ -139,6 +141,7 @@
              </div>
            </div>
            <img
+              class="lg:mt-0 mt-5"
              width="800"
              src="../../assets/images/product/costom/01.png"
              alt="Jomall快捷生产" />
@@ -146,7 +149,7 @@
        </div>
        <div class="w-10/12 m-auto flex flex-col">
          <h2 class="text-center mt-10">工艺优势</h2>
-          <div class="flex justify-around">
+          <div class="flex flex-col lg:flex-row justify-around">
            <div class="craft-item">
              <div class="cirque"></div>
              <div class="square">
@@ -239,9 +242,10 @@
        </div>
        <div class="flex m-auto flex-col">
          <h2 class="text-center mt-10">满印供应链</h2>
-          <div class="w-8/12 m-auto flex justify-around gap-32">
+          <div
-            <div class="w-1/2">
+            class="lg:w-8/12 w-10/12 m-auto flex flex-col lg:flex-row justify-around lg:gap-32 gap-5">
-              <div class="text-gray-500 text-base mb-4">
+            <div class="lg:w-1/2 w-full">
+              <div class="text-gray-500 lg:text-base text-xs mb-4">
                LA
                POD位于广东省广州市番禺区，支持白墨烫画，直喷、刺绣等多种工艺，自营车间规划近12台PRO
                B直喷机以及X600机器;搭载自动化分拣系统，折衣、打包等全自动流水线提升订单处理效率与准确性，九猫物流衔接全球物流渠道，优化尾程配送时效成本
@@ -250,11 +254,11 @@
                src="../../assets/images/product/costom/01.png"
                alt="满印供应链" />
            </div>
-            <div class="w-1/2">
+            <div class="lg:w-1/2 w-full">
              <img
                src="../../assets/images/product/costom/02.png"
                alt="工厂地址" />
-              <div class="text-gray-800 font-bold text-lg mt-4">
+              <div class="text-gray-800 font-bold lg:text-lg text-xs mt-4">
                <div>工厂名称：九猫中国供应链</div>
                <div>工厂地址：中国广东省广州市番禺区兴南大道403号</div>
              </div>
@@ -266,15 +270,17 @@
      <div v-else-if="activeTab === 'supply-chain'">
        <div class="flex flex-col m-auto">
          <h2 class="text-center mt-10">业务介绍</h2>
-          <div class="w-8/12 m-auto flex justify-around items-center gap-32">
+          <div
-            <div class="video-container">
+            class="lg:w-8/12 w-full px-5 lg:px-0 m-auto flex flex-col lg:flex-row justify-between items-center lg:gap-32">
+            <div class="video-container lg:w-1/3">
              <video
                width="100%"
                class="video"
                src="../../assets/video/abount-jomalls2-video.mp4"
                controls></video>
            </div>
-            <div class="w-2/3 h-full text-base font-light">
+            <div
+              class="lg:w-2/3 w-full h-full lg:text-base text-xs font-light mt-5 lg:mt-0">
              <p>
                九猫（西安）科技有限公司成立于2022年，致力于为企业出海提供降本提效的全域数智化一站式管理解决方案
              </p>
@@ -290,8 +296,10 @@
              </p>
            </div>
          </div>
+          <div class="flex flex-col lg:w-3/4 w-10/12 m-auto">
            <h2 class="w-full text-center">Jomall快捷生产</h2>
-          <div class="w-full flex justify-around items-center">
+            <div
+              class="w-full flex lg:flex-row flex-col justify-around items-center">
              <div>
                <div class="flex flex-col">
                  <h4>快捷订单生产</h4>
@@ -312,21 +320,33 @@
                </div>
              </div>
              <img
+                class="lg:mt-0 mt-5"
                width="800"
                src="../../assets/images/product/costom/01.png"
                alt="Jomall快捷生产" />
            </div>
          </div>
+        </div>
        <div class="w-10/12 m-auto flex flex-col">
          <h2 class="text-center mt-10">工艺优势</h2>
-          <div class="flex justify-around">
+          <div class="flex lg:flex-row flex-col justify-around">
            <div class="craft-item">
+              <div class="flex flex-row lg:flex-col justify-between">
+                <div>
                  <div class="cirque"></div>
                  <div class="square">
                    数码
                    <br />
                    直喷
                  </div>
+                </div>
+                <img
+                  v-if="$isMobile"
+                  class="w-1/2 h-1/2"
+                  src="../../assets/images/product/supply/01.png"
+                  alt="数码直喷案例" />
+              </div>
              <div class="desc-craft">
                通过在衣服上直接喷射彩色墨水的方式打印
              </div>
@@ -359,7 +379,7 @@
                </div>
              </div>
            </div>
-            <div class="flex">
+            <div v-if="!$isMobile" class="flex">
              <Icon
                class="mt-5"
                icon="foundation:arrow-left"
@@ -369,11 +389,11 @@
                <img
                  width="300"
                  src="../../assets/images/product/supply/01.png"
-                  alt="数码直喷" />
+                  alt="数码直喷案例" />
                <img
                  width="300"
                  src="../../assets/images/product/supply/02.png"
-                  alt="白墨烫画" />
+                  alt="白墨烫画案例" />
              </div>
              <Icon
                class="self-end mb-5"
@@ -382,12 +402,22 @@
                color="var(--el-color-primary-light-7)" />
            </div>
            <div class="craft-item">
+              <div
+                class="flex flex-row lg:flex-col justify-between items-center">
+                <div>
                  <div class="cirque"></div>
                  <div class="square">
                    白墨
                    <br />
                    烫画
                  </div>
+                </div>
+                <img
+                  v-if="$isMobile"
+                  class="w-1/3 h-1/3"
+                  src="../../assets/images/product/supply/02.png"
+                  alt="白墨烫画案例" />
+              </div>
              <div class="desc-craft">
                图案打印在特殊转印膜上通过高温和压力将图案转印到织物
              </div>
@@ -664,7 +694,7 @@ h2 {
  font-size: 28px;
  font-weight: 700;
  cursor: default;
-  margin: 0 auto 40px;
+  margin: 40px auto;
  position: relative;
  padding-bottom: 10px;
  display: inline-block;
@@ -724,12 +754,6 @@ h4 {
  width: 90%;
 }
-@media (max-width: 1100px) {
-  .erp-image {
-    padding: 5px;
-  }
-}
 .desc-item {
  position: relative;
  color: var(--el-color-primary-dark-1);
@@ -755,6 +779,7 @@ h4 {
  flex-direction: column;
  align-items: center;
  min-width: 0;
+  margin-top: 20px;
  .cirque {
    width: 100px;
@@ -819,7 +844,7 @@ h4 {
 .video-container {
  position: relative;
  height: 100%;
-  margin: 50px auto;
+  margin: 0px auto 0;
  .video {
    width: 100%;
    height: 100%;
@@ -861,4 +886,31 @@ h4 {
    }
  }
 }
+@media (max-width: 1100px) {
+  h2 {
+    font-size: 16px;
+  }
+  h4 {
+    font-size: 16px;
+  }
+  .desc-item {
+    font-size: 14px;
+  }
+  .erp-image {
+    padding: 5px;
+  }
+  .craft-machine {
+    .machine-desc {
+      font-size: 14px;
+    }
+  }
+  .desc-craft {
+    font-size: 14px;
+  }
+}
 </style>