feat: 移动端适配完成

src/assets/css/common.css

@@ -1046,11 +1046,31 @@ ul li {
   width: 70vw;
 }
 
+.w-full-90 {
+  width: 90vw;
+}
+
+@media screen and (max-width: 1100px) {
+  .w-full-90 {
+    width: 90vw;
+  }
+}
+@media screen and (min-width: 1204px) {
+  .w-full-70 {
+    width: 70vw;
+  }
+}
+
 .text-textContent {
   --tw-text-opacity: 1;
   color: rgba(92, 94, 102, var(--tw-text-opacity));
 }
 
+.text-textPrimary {
+  --tw-text-opacity: 1;
+  color: rgba(58, 64, 87, var(--tw-text-opacity));
+}
+
 .high-light {
   --tw-text-opacity: 1;
   color: rgba(37, 84, 254, var(--tw-text-opacity));

src/components/head.vue

@@ -2,7 +2,6 @@
   <div class="header" :class="{ 'no-shadow': !shadow }" ref="header">
     <headerNavMobile
       v-if="$isMobile"
-      :nav="navbar"
       :userInfo="userInfo"></headerNavMobile>
     <div class="container" v-else>
       <div class="logo">
@@ -191,6 +190,7 @@ export default {
         {
           name: '产品',
           path: '/product/production',
+          expanding: false,
           children: [
             {
               name: '生产管理',
@@ -226,6 +226,7 @@ export default {
         {
           name: '资源与支持',
           path: '/support',
+          expanding: false,
           children: [
             {
               name: '活动信息',
@@ -250,6 +251,7 @@ export default {
         {
           name: '关于',
           path: '/about',
+          expanding: false,
           children: [
             {
               name: '关于我们',

src/components/headerNavMobile.vue

@@ -15,17 +15,21 @@
       <span class="user-name">{{ userInfo.companyName }}</span>
       <span style="margin: 0 10px">欢迎您</span>
       <span style="margin: 0 5px">|</span>
-      <span style="margin-left: 10px;cursor: pointer;" @click="logout">
+      <span style="margin-left: 10px; cursor: pointer" @click="logout">
         <img
           style="width: 16px; height: 16px; vertical-align: middle"
           src="../assets/images/logout.png" />
       </span>
     </div>
     <transition name="header-nav-mobile">
-      <div
-        v-show="showing"
-        class="header-nav-mobile-overlay"
-        @click="toggleShow">
+      <div v-show="showing" class="header-nav-mobile-overlay">
+        <div
+          class="header-nav-mobile-header flex items-center justify-between p-2.5">
+          <img src="../assets/logo.png" class="w-32" height="40px" />
+          <i
+            class="el-icon-close text-xl font-bold cursor-pointer"
+            @click="toggleShow"></i>
+        </div>
         <ul class="header-nav-mobile-items" @click.stop>
           <li
             v-for="(r, i) in nav"
@@ -33,11 +37,33 @@
             class="header-nav-mobile-item"
             :class="{ active: isRouteActive(r) }">
             <router-link
-              class="header-nav-mobile-link"
+              v-if="!r.children"
+              class="header-nav-mobile-link flex items-center justify-between"
               :to="r.path"
-              @click.native="toggleShow">
+              @click.native="toggleShow(r)">
               {{ r.name }}
             </router-link>
+            <div
+              v-else
+              class="header-nav-mobile-link flex items-center justify-between">
+              <span>{{ r.name }}</span>
+              <i
+                :class="r.expanding ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
+                @click.stop="toggleExpand(r)"></i>
+            </div>
+            <div v-if="r.expanding" class="header-nav-mobile-child">
+              <div
+                class="header-nav-mobile-child-item"
+                v-for="(c, index) in r.children"
+                :key="index">
+                <router-link
+                  class="header-nav-mobile-link"
+                  :to="c.path"
+                  @click.native="toggleShow(c)">
+                  {{ c.name }}
+                </router-link>
+              </div>
+            </div>
           </li>
         </ul>
       </div>
@@ -51,23 +77,90 @@ export default {
   data() {
     return {
       showing: false,
+      nav: [
+        { name: '首页', path: '/home' },
+        {
+          name: '产品',
+          path: '/product/production',
+          expanding: false,
+          children: [
+            {
+              name: '生产管理',
+              path: '/product/production',
+            },
+            {
+              name: '一件定制',
+              path: '/product/custom',
+            },
+            {
+              name: '海外仓物流',
+              path: '/product/logistics',
+            },
+            {
+              name: '自建站平台',
+              path: '/product/platform',
+            },
+          ],
+        },
+        { name: '价格', path: '/price' },
+        { name: '一件定制', path: 'https://jomalls.com/custom/' },
+        { name: '案例', path: '/case' },
+        {
+          name: '资源与支持',
+          path: '/support',
+          expanding: false,
+          children: [
+            {
+              name: '活动信息',
+              path: '',
+            },
+            {
+              name: '入住流程平台',
+              path: '',
+            },
+            {
+              name: '资讯',
+              path: '',
+            },
+            {
+              name: '帮助中心',
+              path: '',
+            },
+          ],
+        },
+        {
+          name: '关于',
+          path: '/about',
+          expanding: false,
+          children: [
+            {
+              name: '关于我们',
+              path: '/about',
+            },
+            {
+              name: '加入我们',
+              path: '/join',
+            },
+          ],
+        },
+      ],
     }
   },
   props: {
-    nav: {
-      type: Array,
-    },
     userInfo: {
       type: Object,
     },
   },
-  computed: {
-  },
+  computed: {},
   methods: {
     ...mapMutations(['setUserInfo']),
-    toggleShow() {
+    toggleShow(r) {
+      if (r && r.children) return
       this.showing = !this.showing
     },
+    toggleExpand(r) {
+      this.$set(r, 'expanding', !r.expanding)
+    },
     isRouteActive(nav) {
       const path = this.$route.path
       if (nav.path === path) return true
@@ -89,9 +182,9 @@ export default {
 <style scoped lang="scss">
 .header-nav-mobile {
   height: 50px;
-  background-color: #2f3032;
+  // background-color: #2f3032;
   display: flex;
-  color: #fff;
+  // color: #fff;
   align-items: center;
   padding: 0 10px;
 }
@@ -139,7 +232,7 @@ export default {
   background-size: 100%;
   background-repeat: no-repeat;
   background-position: center;
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAcCAYAAAATFf3WAAAAyklEQVRYR+2WMQ6BQRCFvzmHgkaidgI3UEjcQUSBygV0NOIQhIQTcAK1kpM8GcV/gbHJSHb62fn2vZ2ZNUltYAN0yBUvYGmSTsAoF1tDc/4LwNwWJ7W2wbIKGFSgKhgUkKrgTxSU1M+46szs4ZtkDmyjNy2Uv3DAGzAoVCB67N0BJ8Ae0jWMgOm3iyX1AN/JmeJtZs86ZqKWVAWrglEFovn536CkLrDLOAeBmW+SCzCMWlEo/+qAB2BcqED02KMDtoB1xu8WsErfJB+rXD/DrYeGMwAAAABJRU5ErkJggg==);
+  background-image: url(../assets/mobile.png);
 }
 
 .header-nav-mobile-enter-active,
@@ -159,15 +252,20 @@ export default {
   width: 100vw;
   height: 100vh;
   z-index: 99999;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
 }
 
 .header-nav-mobile-items {
   box-sizing: border-box;
-  width: 260px;
+  width: 100%;
   height: 100%;
-  background-color: #000;
+  // background-color: #fff;
   margin: 0;
-  padding: 30px 20px;
+  padding: 20px 20px;
+  flex: 1;
+  overflow-y: auto;
 }
 
 .header-nav-mobile-item,
@@ -184,23 +282,11 @@ export default {
 .header-nav-mobile-item.active {
   .header-nav-mobile-link {
     position: relative;
-
-    &::after {
-      position: absolute;
-      top: 100%;
-      left: 0;
-      content: '';
-      display: block;
-      width: 80px;
-      height: 2px;
-      background-color: var(--primary-color);
-    }
   }
 }
 
 .header-nav-mobile-item {
   font-size: 16px;
-  color: #fff;
 }
 
 .header-nav-mobile-child {
@@ -220,7 +306,7 @@ export default {
   color: inherit;
   text-decoration: none;
   cursor: pointer;
-  border-bottom: solid 1px #2c2c2c;
+  border-bottom: solid 1px var(--border-color);
 }
 
 .header-nav-mobile-item > .header-nav-mobile-link {

src/components/product-intro.vue

@@ -41,7 +41,9 @@
           class="home-module-item flex justify-center"
           v-for="(item, index) in moduleItems"
           :key="index">
-          <div class="content flex w-full-70 gap-28 fade-up-animation">
+          <div
+            class="content flex w-full-70 gap-28 fade-up-animation"
+            v-if="!$isMobile">
             <div class="img">
               <img :src="item.img" />
             </div>
@@ -64,10 +66,32 @@
               </div>
             </div>
           </div>
+          <div
+            v-else
+            class="mobile-module-content w-full-90 gap-28 fade-up-animation">
+            <div class="title">
+              <div class="main-title">{{ item.title }}</div>
+              <div class="sub-title">{{ item.subTitle }}</div>
+            </div>
+            <div class="img">
+              <img :src="item.img" />
+            </div>
+            <div class="desc">
+              <div
+                class="desc-item"
+                v-for="(t, index) in item.items"
+                :key="index">
+                <div class="desc-title">
+                  <span class="desc-main-title">{{ t.title }}</span>
+                  <span class="desc-sub-title">{{ t.subTitle }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
-    <div class="section-reason w-full-70 fade-up-animation">
+    <div class="section-reason fade-up-animation pt-10 lg:pt-0">
       <div class="section-reason-title">
         <div class="flex justify-center flex-col items-center">
           <h3 class="text-textContent lx-title mb-8" style="text-align: center">
@@ -78,7 +102,8 @@
           </div>
         </div>
       </div>
-      <div class="reason-list flex justify-between">
+      <div
+        class="reason-list flex justify-between flex-col mt-6 gap-5 lg:gap-0 lg:mt-10 lg:flex-row">
         <div class="section-reason-item">
           <div class="season-top flex flex-col items-center">
             <svg
@@ -586,7 +611,54 @@ export default {
     }
   }
 }
-
+.mobile-module-content {
+  .title {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 26px;
+    .main-title {
+      font-size: 26px;
+      margin-bottom: 8px;
+    }
+    .sub-title {
+      font-size: 14px;
+      color: #666;
+    }
+  }
+  .desc {
+    padding-left: 24px;
+    .desc-item {
+      position: relative;
+      &::before {
+        background-color: #2554fe;
+        border-radius: 50%;
+        position: absolute;
+        left: -23px;
+        top: 10px;
+        content: '';
+        width: 6px;
+        height: 6px;
+        box-shadow: 0 0 0 5px rgba(37, 84, 254, 0.1);
+      }
+      &:not(:last-child) {
+        margin-bottom: 10px;
+      }
+      .desc-title {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        .desc-main-title {
+          color: #000;
+          font-size: 16px;
+        }
+        .desc-sub-title {
+          font-size: 14px;
+          color: #606266;
+        }
+      }
+    }
+  }
+}
 .product-intro::v-deep {
   .fade-up-animation {
     transition: all 0.3s ease;
@@ -600,6 +672,7 @@ export default {
   }
 }
 .section-reason {
+  width: 70vw;
   margin: 0 auto;
 }
 .section-reason-item {
@@ -653,7 +726,6 @@ export default {
   color: rgba(58, 64, 87, 1);
 }
 .reason-list {
-  margin-top: 80px;
 }
 .lx-title {
   font-size: 2.25rem;
@@ -678,7 +750,6 @@ export default {
   .function_bg {
     width: 90vw;
   }
-
   .product-pros {
     flex-direction: column;
   }
@@ -732,5 +803,8 @@ export default {
       width: 100%;
     }
   }
+  .section-reason {
+    width: 90vw;
+  }
 }
 </style>

src/components/productDesc.vue

@@ -5,7 +5,9 @@
       v-for="(item, index) in moduleItems"
       :data-id="item.id"
       :key="index">
-      <div class="content mx-auto flex w-full-70 gap-28 fade-up-animation gap-20">
+      <div
+        v-if="!$isMobile"
+        class="content mx-auto flex w-full-70 gap-28 fade-up-animation">
         <div class="img">
           <img :src="item.img" />
         </div>
@@ -28,6 +30,25 @@
           </div>
         </div>
       </div>
+      <div
+        v-else
+        class="mobile-module-content w-full-90 mx-auto gap-28 fade-up-animation">
+        <div class="title">
+          <div class="main-title">{{ item.title }}</div>
+          <div class="sub-title">{{ item.subTitle }}</div>
+        </div>
+        <div class="img">
+          <img :src="item.img" />
+        </div>
+        <div class="desc">
+          <div class="desc-item" v-for="(t, index) in item.items" :key="index">
+            <div class="desc-title">
+              <span class="desc-main-title">{{ t.title }}</span>
+              <span class="desc-sub-title">{{ t.subTitle }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -221,12 +242,60 @@ export default {
     transform: translateY(0);
   }
 }
+.mobile-module-content {
+  .title {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 26px;
+    .main-title {
+      font-size: 26px;
+      margin-bottom: 8px;
+    }
+    .sub-title {
+      font-size: 14px;
+      color: #666;
+    }
+  }
+  .desc {
+    padding-left: 24px;
+    .desc-item {
+      position: relative;
+      &::before {
+        background-color: #2554fe;
+        border-radius: 50%;
+        position: absolute;
+        left: -23px;
+        top: 10px;
+        content: '';
+        width: 6px;
+        height: 6px;
+        box-shadow: 0 0 0 5px rgba(37, 84, 254, 0.1);
+      }
+      &:not(:last-child) {
+        margin-bottom: 10px;
+      }
+      .desc-title {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        .desc-main-title {
+          color: #000;
+          font-size: 16px;
+        }
+        .desc-sub-title {
+          font-size: 14px;
+          color: #606266;
+        }
+      }
+    }
+  }
+}
 @media screen and (max-width: 1100px) {
   .home-module-container {
     margin-top: 20px;
   }
   .home-module-item {
-    padding: 10px 0;
+    padding: 60px 0 30px;
     .content {
       width: 90vw;
       display: block;

src/components/productLogisticsDesc.vue

 <template>
-  <div class="product-logistics-desc py-16">
-    <div class="card flex gap-10 h-96 justify-between w-full-70 mx-auto">
+  <div
+    class="product-logistics-desc py-8 lg:py-16"
+    :class="{ 'no-mobile': !$isMobile }">
+    <div
+      class="card flex flex-col lg:flex-row gap-10 lg:h-96 justify-between w-full-70 w-full-90 mx-auto">
       <img :src="moduleItems.img" class="img" />
       <div class="word">
         <div
@@ -33,7 +36,7 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.product-logistics-desc:nth-child(even) .card {
+.product-logistics-desc.no-mobile:nth-child(even) .card {
   flex-direction: row-reverse;
 }
 .product-logistics-desc:nth-child(even) {

src/router/index.js

@@ -44,11 +44,6 @@ const routes = [
         component: demandPage,
       },
       {
-        path: '/about_us',
-        name: 'aboutUs',
-        component: aboutPage,
-      },
-      {
         path: '/help',
         name: 'help',
         component: helpPage,
@@ -83,6 +78,11 @@ const routes = [
         name: 'financial',
         component: FinancialPage,
       },
+      {
+        path: '/about',
+        name: 'about',
+        component: aboutPage,
+      },
     ],
   },
   {

src/styles/index.scss

 :root {
-  --primary-color:#f19240;
+  --primary-color: #2253fd;
+  --border-color: #dfe7f9;
 }
 
 @tailwind base;

src/views/aboutus/aboutPage.vue

 <template>
   <div class="about-us">
-    <div class="header-banner">
-      <div class="image">
-        <img
-          src="../../assets/images/banner-about.jpg"
-          style="width: 100%; height: 100%; object-fit: cover" />
-      </div>
-      <div class="text">
-        <h2>辅助跨境电商企业成为变革</h2>
-        <hr />
-        <ul>
-          <li>
-            <i class="i1"></i>
-            <span>与时俱进</span>
-          </li>
-          <li>
-            <i class="i2"></i>
-            <span>客户至上</span>
-          </li>
-          <li>
-            <i class="i3"></i>
-            <span>人尽奇才</span>
-          </li>
-          <li>
-            <i class="i4"></i>
-            <span>互利共赢</span>
-          </li>
-        </ul>
+    <div class="banner-container">
+      <div
+        class="content-container flex lg:flex-row flex-col items-center gap-10 lg:gap-20 w-full-70 w-full-90 mx-auto py-10">
+        <div class="left-content">
+          <h3
+            class="banner-title font-semibold text-2xl lg:text-4xl text-center lg:text-left">
+            跨境电商 用九猫ERP
+          </h3>
+          <div
+            class="text-sm px-8 text-center lg:text-left lg:text-lg lg:px-0 font-light text-textContent mb-8">
+            <span>以一站式跨境电商运营管理系统，助力卖家轻松实现业务增长</span>
+          </div>
+        </div>
+
+        <div class="right-image">
+          <video
+            width="100%"
+            class="video"
+            src="../../assets/video/about-us-video.mp4"
+            autoplay
+            loop
+            muted></video>
+        </div>
       </div>
     </div>
-    <div class="content-body">
-      <h2 style="margin-bottom: 20px; text-align: center">关于九猫</h2>
+    <div class="about-section about-lx px-4 lg:px-0 lg:mt-28">
       <div
-        class="jomals-description"
-        style="text-indent: 2em;">
-        九猫（西安）科技有限公司成立于2022年，致力于为企业出海提供降本提效的全域数智化一站式管理解决方案。
-        九猫科技核心团队拥有超过7年的跨境电商ERP开发经验，设计及开发过的项目覆盖产品管理系统，订单管理系统，供应链系统，供应商系统，生产管理系统，仓库管理系统，营销系统，OA系统等等。2022年开始转型并专注于DTC独立站平台的产品与服务，自主研发并推出“九猫ERP软件“。
-        大数据集成商家平台、营销、供应链、仓储物流、财务、报表等模块，纵向打通资源，横向综合业务，全方位深度赋能。
-        九猫人始终秉承着“顾客至上”的经营理念，以“保障用户数据安全、关心客户使用体验、促进产品不断创新”为己任，意在帮助更多的跨境电商企业实现精细化管理和数字化建设。
+        class="about-content w-full-70 w-full-90 mx-auto flex flex-col justify-between items-center">
+        <div
+          class="w-full flex flex-col items-center gap-16 lg:gap-32 lg:flex-row lg:justify-between">
+          <div
+            data-aos="fade-right"
+            class="w-full flex-col items-center h-full lg:w-137.5 lg:items-start">
+            <div
+              class="text-textTitle text-2xl text-center font-medium lg:text-4xl lg:text-left">
+              关于九猫
+            </div>
+            <div
+              class="text-textTitle text-sm font-light lg:text-lg mt-4 lg:mt-8 lg:leading-7 lg:mt-7">
+              九猫（西安）科技有限公司成立于2022年，致力于为企业出海提供降本提效的全域数智化一站式管理解决方案
+            </div>
+            <div
+              class="mt-3 text-sm font-light text-textTitle lg:text-lg lg:mt-5 lg:leading-7">
+              <p class="mt-5">
+                九猫科技核心团队拥有超过7年的跨境电商ERP开发经验，设计及开发过的项目覆盖产品管理系统，订单管理系统，供应链系统，供应商系统，生产管理系统，仓库管理系统，营销系统，OA系统等等。
+              </p>
+              <p class="mt-5">
+                2022年开始转型并专注于DTC独立站平台的产品与服务，自主研发并推出“九猫ERP软件“。
+                大数据集成商家平台、营销、供应链、仓储物流、财务、报表等模块，纵向打通资源，横向综合业务，全方位深度赋能。
+                九猫人始终秉承着“顾客至上”的经营理念，以“保障用户数据安全、关心客户使用体验、促进产品不断创新”为己任，意在帮助更多的跨境电商企业实现精细化管理和数字化建设。
+              </p>
+            </div>
+          </div>
+          <img
+            width="452px"
+            src="https://static.distributetop.com/office-site-new/office-site-resource/image/0e0f127374698f8a97694c65650aac91.jpg"
+            data-aos="fade-left"
+            class="mt-8 !h-395px lg:mt-0" />
+        </div>
+        <div class="flex justify-between w-full mt-8 lg:mt-24">
+          <div class="flex-col flex h-20 border-colorIcon lg:w-full">
+            <div
+              class="flex text-xl lg:text-5xl !lg:leading-10 text-blue-600 justify-start">
+              TOP 1
+            </div>
+            <div
+              class="flex text-sm lg:text-xl text-textContent mt-0.5 justify-start">
+              行业市占率第一
+            </div>
+          </div>
+          <div class="flex-col flex h-20 border-colorIcon lg:w-full border-l-2">
+            <div
+              class="flex text-xl lg:text-5xl !lg:leading-10 text-blue-600 justify-center">
+              600000+
+            </div>
+            <div
+              class="flex text-sm lg:text-xl text-textContent mt-0.5 justify-center">
+              跨境企业的一致选择
+            </div>
+          </div>
+          <div class="flex-col flex h-20 border-colorIcon lg:w-full border-l-2">
+            <div
+              class="flex text-xl lg:text-5xl !lg:leading-10 text-blue-600 justify-center">
+              20+
+            </div>
+            <div
+              class="flex text-sm lg:text-xl text-textContent mt-0.5 justify-center">
+              服务中心
+            </div>
+          </div>
+          <div class="flex-col flex h-20 border-colorIcon lg:w-full border-l-2">
+            <div
+              class="flex text-xl lg:text-5xl !lg:leading-10 text-blue-600 justify-center">
+              100+
+            </div>
+            <div
+              class="flex text-sm lg:text-xl text-textContent mt-0.5 justify-center">
+              服务上市/IPO阶段企业
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="footer-bg mt-14 lg:mt-28">
+      <div class="footer-banner">
+        <div class="footer-title">选择九猫，全面提升跨境业务效益！</div>
+        <div class="footer-description">
+          已有60万+跨境卖家选择九猫ERP，实现业务高效增长
+        </div>
       </div>
     </div>
   </div>
@@ -48,134 +119,89 @@ export default {
 }
 </script>
 <style scoped>
-.header-banner {
-  position: relative;
-  overflow: hidden;
-  text-align: center;
-}
-
-.text {
-  position: absolute;
-  width: 100%;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.text h2 {
-  font-size: 36px;
-  text-align: center;
-  color: #fff;
-  font-weight: bold;
-}
-.image {
-  height: 26vw;
+.left-content {
+  width: 30%;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
 }
-
-.content-body {
-  height: calc(100vh - 26vw - 60px);
-  margin-top: 80px;
+.right-image {
+  width: 70%;
+  position: relative;
+  height: 100%;
+  .video {
+    width: 100%;
+    height: 100%;
+    object-fit: fill;
+  }
 }
-
-.jomals-description {
-  text-indent: 2em;
-  display: block;
-  width: 60vw;
-  margin: 0 auto;
-  font-size: 18px;
-  color: #333;
-  line-height: 36px;
+.border-colorIcon {
+  &:not(:last-child) {
+    border-right: 2px solid rgba(214, 222, 240, 1);
+  }
 }
-
-.text hr {
-  border: none;
-  width: 30%;
-  height: 2px;
-  margin: 20px auto;
-  background: url(../../assets/images/banner-line.png) no-repeat;
-  background-size: 100% 100%;
+.footer-bg {
+  background: linear-gradient(180deg, #2554fe, #3572ff);
 }
-
-.text ul {
+.footer-banner {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-}
-
-.text ul li:not(:last-child) {
-  margin-right: 40px;
-}
-.text li i {
-  display: inline-block;
-  width: 24px;
-  height: 24px;
-  margin-right: 10px;
-  vertical-align: top;
-}
-
-.text li span {
-  display: inline-block;
-  line-height: 24px;
-  vertical-align: top;
-  color: #fff;
-}
-
-.text li .i1 {
-  background: url(../../assets/images/banner-icon-01.png);
-  background-size: 100% 100%;
-}
-
-.text li .i2 {
-  background: url(../../assets/images/banner-icon-02.png);
-  background-size: 100% 100%;
-}
-
-.text li .i3 {
-  background: url(../../assets/images/banner-icon-03.png);
-  background-size: 100% 100%;
-}
-
-.text li .i4 {
-  background: url(../../assets/images/banner-icon-04.png);
-  background-size: 100% 100%;
-}
-
-@media screen and (max-width: 1100px) {
-  .image {
-    height: 33vw !important;
-  }
-  .text h2 {
-    font-size: 20px !important;
+  padding: 80px 15px;
+  background-image: url(../../assets/images/home/06.png);
+  background-position-y: bottom;
+  background-repeat: no-repeat;
+  background-size: 100% 90px;
+  .footer-title {
+    font-weight: 500;
+    font-size: 36px;
+    margin-bottom: 20px;
+    max-width: 70vw;
+    text-align: center;
+    color: rgba(255, 255, 255, 1);
+    letter-spacing: 2px;
   }
+  .footer-description {
+    font-weight: 300;
+    font-size: 18px;
+    margin-top: 8px;
+    margin-bottom: 40px;
 
-  .text hr {
-    width: 80vw !important;
-    margin: 10px auto !important;
+    color: rgba(255, 255, 255, 1);
   }
+}
 
-  .text ul li:not(:last-child) {
-    margin-right: 20px !important;
+@media (max-width: 1100px) {
+  .left-content {
+    width: 100%;
+    gap: 8px;
   }
-
-  .text li i {
-    width: 16px !important;
-    height: 16px !important;
+  .right-image {
+    width: 100%;
   }
-
-  .text li span {
-    font-size: 12px !important;
-    line-height: 16px !important;
-  }
-
-  .content-body {
-    margin-top: 20px;
-    height: unset;
-    padding-bottom: 20px;
+  .border-colorIcon {
+    &:not(:last-child) {
+      border-right: none;
+    }
   }
-  .jomals-description {
-    width: 100vw;
-    padding: 0 20px;
-    font-size: 16px;
+  .footer-banner {
+    padding: 40px 10px;
+    .footer-title {
+      font-size: 18px;
+      margin-bottom: 10px;
+      max-width: 90vw;
+      text-align: center;
+      color: rgba(255, 255, 255, 1);
+    }
+    .footer-description {
+      font-weight: 300;
+      font-size: 12px;
+      margin-top: 8px;
+      margin-bottom: 20px;
+
+      color: rgba(255, 255, 255, 1);
+    }
   }
 }
 </style>

src/views/case/casePage.vue

 <template>
   <div class="case-page bg-colorBg">
-    <div class="lx-module-case-banner text-center">
-      <h3 class="case-banner-title">倾听企业故事，探寻出海方案最优解</h3>
-      <span class="text-lg">链接九猫ERP，共创您的品牌出海新高度</span>
+    <div class="lx-module-case-banner px-2.5 text-center py-12 lg:py-28">
+      <h3 class="case-banner-title text-2xl lg:text-4xl">
+        倾听企业故事，探寻出海方案最优解
+      </h3>
+      <span class="text-base lg:text-2xl">
+        链接九猫ERP，共创您的品牌出海新高度
+      </span>
     </div>
     <div class="case-swiper">
-      <div class="w-full-70 mx-auto bg-white pt-10 px-10 rounded-xl">
+      <div
+        class="w-full-70 w-full-90 mx-auto bg-white p-5 lg:pt-10 lg:px-10 rounded-xl">
         <el-carousel
           indicator-position="outside"
           :autoplay="false"
@@ -14,7 +19,8 @@
           <el-carousel-item
             v-for="(item, index) in swiperCaseList"
             :key="index">
-            <div class="case-swiper-container h-full flex gap-10">
+            <div
+              class="case-swiper-container h-full flex flex-col flex-col-reverse lg:flex-row gap-10">
               <div class="left-image flex-1">
                 <img :src="item.img" />
               </div>
@@ -34,10 +40,14 @@
         </el-carousel>
       </div>
     </div>
-    <div class="cooperation-case py-20">
-      <div class="w-full-70 mx-auto">
-        <div class="cooperation-case-title">合作客户案例</div>
-        <div class="cooperation-case-list grid grid-cols-4 gap-10 mt-10">
+    <div class="cooperation-case py-10 lg:py-20">
+      <div class="w-full-70 w-full-90 mx-auto">
+        <div
+          class="cooperation-case-title text-2xl font-medium lg:text-4xl text-center">
+          合作客户案例
+        </div>
+        <div
+          class="cooperation-case-list grid grid-cols-2 lg:grid-cols-4 gap-5 lg:gap-10 mt-10">
           <div
             class="case-item-card bg-white"
             v-for="(item, index) in caseList"
@@ -45,7 +55,7 @@
             <div class="image">
               <img :src="item.img" />
             </div>
-            <div class="content p-6">
+            <div class="content p-2 lg:p-6">
               <div class="logo">
                 <img :src="item.companyLogo" />
               </div>
@@ -63,8 +73,6 @@
     <div class="footer-bg">
       <div class="footer-banner">
         <div class="footer-title">与众多优秀企业共同选择，实现业绩高效增长</div>
-
-        <!---->
       </div>
     </div>
   </div>
@@ -151,22 +159,16 @@ export default {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  height: 344px;
   width: 100%;
   .case-banner-title {
     color: #1a2035;
-    font-weight: 500;
-    font-size: 44px;
     line-height: 1;
-    line-height: 64px;
     font-style: normal;
   }
   span {
     color: #3a4057;
     font-weight: 400;
-    font-size: 18px;
     line-height: 1;
-    line-height: 28px;
     margin-top: 8px;
     text-align: center;
     font-style: normal;
@@ -177,11 +179,8 @@ export default {
 }
 .cooperation-case-title {
   font-weight: 500;
-  font-size: 36px;
   line-height: 1;
-  line-height: 54px;
   font-style: normal;
-  width: 1280px;
   color: #1a2035;
 }
 .case-item-card {
@@ -204,49 +203,69 @@ export default {
     color: #3a4057;
   }
 }
+.footer-bg {
+  background: linear-gradient(180deg, #2554fe, #3572ff);
+}
 .footer-banner {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 2.5rem 15px;
-  background-image: url(https://static.distributetop.com/office-site-new/office-site-upload/img/history-card-sm-bg.cbfbf77.png);
+  padding: 80px 15px;
+  background-image: url(../../assets/images/home/06.png);
   background-position-y: bottom;
   background-repeat: no-repeat;
-  background-size: 100% 5.375rem;
-}
-.footer-banner .footer-title {
-  font-weight: 500;
-  font-size: 1.25rem;
-  margin-bottom: 1.25rem;
-  text-align: center;
-  --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
-  letter-spacing: 2px;
-}
-.footer-banner .footer-description {
-  line-height: 1.75rem;
-  display: none;
-  font-weight: 300;
-  font-size: 1.125rem;
-  margin-top: 0.5rem;
-  margin-bottom: 2.5rem;
-  --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
+  background-size: 100% 90px;
+  .footer-title {
+    font-weight: 500;
+    font-size: 36px;
+    margin-bottom: 20px;
+    max-width: 70vw;
+    text-align: center;
+    color: rgba(255, 255, 255, 1);
+    letter-spacing: 2px;
+  }
+  .footer-description {
+    font-weight: 300;
+    font-size: 18px;
+    margin-top: 8px;
+    margin-bottom: 40px;
+
+    color: rgba(255, 255, 255, 1);
+  }
 }
-@media (min-width: 1024px) {
+@media (max-width: 1100px) {
   .footer-banner {
-    padding: 5rem 0;
-    background-image: url(https://static.distributetop.com/office-site-new/office-site-upload/img/app-promotion-bg.252059a.png);
-    background-size: cover;
-  }
-  .footer-banner .footer-title {
-    font-size: 2.25rem;
-    line-height: 3.125rem;
-    margin-bottom: 0;
+    padding: 40px 10px;
+    .footer-title {
+      font-size: 18px;
+      margin-bottom: 10px;
+      max-width: 90vw;
+      text-align: center;
+      color: rgba(255, 255, 255, 1);
+    }
+    .footer-description {
+      font-weight: 300;
+      font-size: 12px;
+      margin-top: 8px;
+      margin-bottom: 20px;
+
+      color: rgba(255, 255, 255, 1);
+    }
   }
-  .footer-banner .footer-description {
-    display: block;
+  .case-item-card {
+    .image {
+      height: 120px;
+      width: 100%;
+    }
+    .logo {
+      width: 80px;
+      height: 36px;
+    }
+    .category-tag {
+      border-radius: 2px;
+      padding: 2px 6px;
+    }
   }
 }
 </style>

src/views/homePage/index.vue

 <template>
   <div class="home-page">
-    <div class="banner-images">
-      <!-- 轮播图先注释 -->
-      <!-- <el-carousel
-        class="banner-images-inner"
-        :interval="5000"
-        arrow="always"
-        :height="$isMobile ? '40vw' : '33.333vw'">
-        <el-carousel-item v-for="(item, index) in bannerImages" :key="index">
-          <img
-            class="images"
-            :src="item.image"
-            style="width: 100vw; height: 100%; object-fit: cover" />
-        </el-carousel-item>
-      </el-carousel> -->
-      <div class="banner-container gap-20">
-        <div class="left-content">
-          <h3 class="left-content-title font-bold">
+    <div class="banner-images px-5 lg:px-0">
+      <div
+        class="banner-container flex-col items-center mt-8 mb-10 lg:flex-row lg:justify-between lg:items-center lg:mt-0 gap-4 lg:gap-20">
+        <div class="left-content mb-4 lg:mb-0">
+          <h3
+            class="left-content-title text-base lg:text-2xl lg:font-bold text-center lg:text-left">
             在以亚马逊为主的跨境电商ERP中
           </h3>
-          <h2 class="left-content-title-high-light font-bold">
+          <h2
+            class="left-content-title-high-light font-bold text-center lg:text-left">
             九猫ERP市占率第一
           </h2>
-          <p class="left-content-description">
+          <p class="left-content-description text-center lg:text-left">
             <span class="high-light">60万+</span>
             <span>跨境卖家的一致选择，支持</span>
             <span class="high-light">20+</span>
@@ -114,15 +104,10 @@ export default {
 </script>
 <style scoped>
 .banner-images {
-  /* font-size: 48px; */
   width: 70vw;
   margin: 0 auto;
   height: 30vw;
   padding-top: 40px;
-  /* display: flex;
-  justify-content: center;
-  align-items: center;
-  background: linear-gradient(to bottom, #0089ff 0%, #0089ff 20%, #e8eef9); */
 }
 
 /* .banner-images-inner {
@@ -130,7 +115,7 @@ export default {
 } */
 .banner-container {
   display: flex;
-  align-items: center;
+  /* align-items: center; */
   height: 100%;
 }
 .left-content {
@@ -150,7 +135,7 @@ export default {
   }
 }
 .left-content-title {
-  font-size: 24px;
+  /* font-size: 24px; */
 }
 .left-content-title-high-light {
   font-size: 40px;
@@ -218,9 +203,44 @@ export default {
 
 @media screen and (max-width: 1100px) {
   .docking-platform {
-    padding: 0 20px 40px;
+    padding: 40px 20px 40px;
   }
+  .footer-banner {
+    padding: 40px 10px;
+    .footer-title {
+      font-size: 18px;
+      margin-bottom: 10px;
+      max-width: 90vw;
+      text-align: center;
+      color: rgba(255, 255, 255, 1);
+    }
+    .footer-description {
+      font-weight: 300;
+      font-size: 12px;
+      margin-top: 8px;
+      margin-bottom: 20px;
 
+      color: rgba(255, 255, 255, 1);
+    }
+  }
+  .banner-images {
+    width: 100%;
+    height: auto;
+    padding-top: unset;
+  }
+  .left-content-title-high-light {
+    font-size: 24px;
+  }
+  .left-content {
+    width: 100%;
+    gap: 6px;
+  }
+  .right-content {
+    width: 100%;
+  }
+  .left-content-description {
+    font-size: 12px;
+  }
   .platforms {
     grid-template-columns: repeat(3, 1fr);
   }

src/views/price/pricePage.vue

 <template>
   <div class="price-page">
-    <div class="header-banner pt-28">
+    <div class="header-banner pt-12 lg:pt-28">
       <div class="content-container flex flex-col items-center gap-2">
         <h3 class="banner-title font-medium text-4xl">九猫ERP版本对比</h3>
         <div
@@ -32,18 +32,14 @@
         </div>
       </div>
     </div>
-    <div
-      class="lx-section mt-12 py-12 bg-colorBg px-[15px] lg:px-0 lg:mt-28 lg:py-28">
+    <div class="lx-section py-12 bg-colorBg lg:px-0 lg:mt-28 lg:py-28">
       <div
-        class="flex justify-between items-center flex-col-reverse lg:flex-row mx-auto w-full-70">
+        class="flex justify-between items-center flex-col-reverse lg:flex-row mx-auto w-full-70 w-full-90">
         <div class="lx-l-section lg:w-2/4">
-          <h3
-            class="hidden lg:block text-4xl text-textTitle font-medium tracking-1px">
-            获得 600000+ 客户的认可
-          </h3>
-          <div class="grid gap-x-5 lg:mt-16 lg:block lg:gap-x-0 grid-cols-3">
+          <div
+            class="grid gap-x-5 lg:mt-16 lg:block lg:gap-x-0 grid-cols-2 lg:grid-cols-3">
             <div
-              class="flex justify-center flex-col lg:items-start items-center mt-12">
+              class="flex lg:justify-center flex-col lg:items-start items-center mt-12">
               <h3 class="lx-title">
                 60
                 <span class="highlight-text">天</span>
@@ -54,7 +50,7 @@
               </div>
             </div>
             <div
-              class="flex justify-center flex-col lg:items-start items-center mt-12">
+              class="flex lg:justify-center flex-col lg:items-start items-center mt-12">
               <h3 class="lx-title">一体化服务</h3>
               <div
                 class="text-sm font-normal text-textContent mt-1 lg:text-left lg:text-base lg:mt-0 text-center">
@@ -62,7 +58,7 @@
               </div>
             </div>
             <div
-              class="flex justify-center flex-col lg:items-start items-center mt-12">
+              class="flex lg:justify-center flex-col lg:items-start items-center mt-12">
               <h3 class="lx-title">
                 15
                 <span class="highlight-text">天</span>
@@ -77,7 +73,7 @@
         <div
           class="lx-r-section flex flex-col justify-center items-center lg:w-2/4">
           <h3
-            class="lg:hidden text-xl mb-13 text-textTitle font-medium tracking-1px text-center">
+            class="lg:hidden text-xl mb-6 lg:mb-12 text-textTitle font-medium tracking-1px text-center">
             获得 600000+ 客户的认可
           </h3>
           <div class="w-full">
@@ -89,18 +85,19 @@
         </div>
       </div>
     </div>
-    <div class="lx-section my-12 lg:my-130px mx-auto max-w-7xl">
+    <div class="lx-section my-12 mx-auto w-full-70 w-full-90">
       <div
         class="flex justify-center flex-col items-center lx-large-title aos-init aos-animate"
         data-aos="fade-up">
         <h3
-          class="text-4xl font-medium tracking-wider w-full lx-title-no-description"
+          class="text-3xl lg:text-4xl font-medium tracking-wider w-full lx-title-no-description"
           style="text-align: center">
           常见问题
         </h3>
       </div>
       <div>
-        <div class="grid grid-cols-2 gap-16 mt-16">
+        <div
+          class="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-8 lg:gap-16 lg:mt-16">
           <div class="lx-question-card">
             <div class="mb-4 flex items-center" style="font-size: 0px">
               <span
@@ -165,7 +162,8 @@
             </div>
           </div>
         </div>
-        <div class="other-questions mt-16 shadow-lg rounded-md px-8 py-8">
+        <div
+          class="other-questions mt-8 lg:mt-16 shadow-lg rounded-md p-2 lg:px-8 lg:py-8">
           <el-collapse v-model="activeNames">
             <el-collapse-item
               v-for="(item, index) in collapses"
@@ -769,56 +767,90 @@ export default {
     top: 8px;
   }
 }
+
+.footer-bg {
+  background: linear-gradient(180deg, #2554fe, #3572ff);
+}
 .footer-banner {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 2.5rem 15px;
-  background-image: url(https://static.distributetop.com/office-site-new/office-site-upload/img/history-card-sm-bg.cbfbf77.png);
+  padding: 80px 15px;
+  background-image: url(../../assets/images/home/06.png);
   background-position-y: bottom;
   background-repeat: no-repeat;
-  background-size: 100% 5.375rem;
-}
-.footer-banner .footer-title {
-  font-weight: 500;
-  font-size: 1.25rem;
-  margin-bottom: 1.25rem;
-  text-align: center;
-  --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
-  letter-spacing: 2px;
-}
-.footer-banner .footer-description {
-  line-height: 1.75rem;
-  display: none;
-  font-weight: 300;
-  font-size: 1.125rem;
-  margin-top: 0.5rem;
-  margin-bottom: 2.5rem;
-  --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
-}
-@media (min-width: 1024px) {
-  .footer-banner {
-    padding: 5rem 0;
-    background-image: url(https://static.distributetop.com/office-site-new/office-site-upload/img/app-promotion-bg.252059a.png);
-    background-size: cover;
-  }
-  .footer-banner .footer-title {
-    font-size: 2.25rem;
-    line-height: 3.125rem;
-    margin-bottom: 0;
+  background-size: 100% 90px;
+  .footer-title {
+    font-weight: 500;
+    font-size: 36px;
+    margin-bottom: 20px;
+    max-width: 70vw;
+    text-align: center;
+    color: rgba(255, 255, 255, 1);
+    letter-spacing: 2px;
   }
-  .footer-banner .footer-description {
-    display: block;
+  .footer-description {
+    font-weight: 300;
+    font-size: 18px;
+    margin-top: 8px;
+    margin-bottom: 40px;
+
+    color: rgba(255, 255, 255, 1);
   }
+}
+@media (min-width: 1024px) {
   .lx-title {
     font-size: 2.25rem;
   }
 }
 
 @media screen and (max-width: 1100px) {
+  .other-questions {
+    .title {
+      line-height: initial;
+    }
+    .cus-title {
+      line-height: initial;
+    }
+    &::v-deep {
+      .el-collapse {
+        border: none;
+      }
+      .el-collapse-item__header {
+        border: none;
+        flex-direction: row;
+        font-size: 14px;
+      }
+      .el-collapse-item__wrap {
+        border: none;
+      }
+      .el-collapse-item__wrap {
+        font-size: 14px;
+      }
+    }
+  }
+  .footer-banner {
+    padding: 40px 10px;
+    .footer-title {
+      font-size: 18px;
+      margin-bottom: 10px;
+      max-width: 90vw;
+      text-align: center;
+      color: rgba(255, 255, 255, 1);
+    }
+    .footer-description {
+      font-weight: 300;
+      font-size: 12px;
+      margin-top: 8px;
+      margin-bottom: 20px;
+
+      color: rgba(255, 255, 255, 1);
+    }
+  }
+  .lx-question-card {
+    padding: 1.5rem;
+  }
   .image {
     height: 33vw !important;
   }
@@ -892,5 +924,4 @@ export default {
     padding-bottom: 0;
   }
 }
-
 </style>

src/views/product/productPlatform.vue

 <template>
   <div class="product-platform">
-    <div class="banner-container">
+    <div class="banner-container lg:p-0 pt-10 px-2.5">
       <div
-        class="content-container flex items-center gap-20 w-full-70 mx-auto pt-10">
+        class="content-container flex flex-col lg:flex-row items-center gap-8 lg:gap-2">
         <div class="left-content">
-          <h3 class="banner-title font-semibold text-4xl">
+          <h3
+            class="banner-title font-semibold text-2xl text-center lg:text-left lg:text-4xl">
             多平台全球库存统一管理 订单自动履约
           </h3>
           <div
-            class="text-xs px-8 lg:text-lg lg:px-0 font-light text-textContent mt-[6px] mb-8">
-            <span>领星ERP集成</span>
+            class="text-sm px-8 lg:text-lg lg:px-0 font-light text-textContent lg:text-left text-center mb-8">
+            <span>九猫ERP集成</span>
             <span class="high-light font-bold">20+</span>
             <span>主流跨境电商平台，跨境业务一站式管理</span>
           </div>
@@ -29,18 +30,20 @@
     <div class="all-platform-wrap py-12 lg:py-20">
       <div class="cont-title">
         <div class="flex justify-center flex-col items-center gap-2">
-          <h3 class="font-medium text-3xl" style="text-align: center">
+          <h3
+            class="font-medium text-2xl lg:text-3xl"
+            style="text-align: center">
             支持20+主流跨境电商平台
           </h3>
           <div
-            class="text-xs px-8 lg:text-lg lg:px-0 font-light text-textContent mt-[6px] mb-8">
+            class="text-sm text-center lg:text-left px-8 lg:text-lg lg:px-0 font-light text-textContent mb-8">
             统一集成管理多个平台的业务，全面提高运营管理效益
           </div>
         </div>
       </div>
 
       <div
-        class="platforms mt-4 grid grid-cols-9 gap-x-5 gap-y-8 w-full-70 mx-auto">
+        class="platforms mt-4 grid grid-cols-3 lg:grid-cols-9 gap-x-5 gap-y-8 w-full-70 w-full-90 mx-auto">
         <div class="platform-item">
           <img src="../../assets/logo1.jpg" />
         </div>
@@ -106,7 +109,7 @@
             九猫解决方案
           </h3>
           <div
-            class="text-xs px-8 lg:text-lg lg:px-0 font-light text-textContent mt-[6px] mb-8">
+            class="text-sm text-center lg:text-left px-8 lg:text-lg lg:px-0 font-light text-textContent mt-[6px] mb-8">
             打通多平台之间的数据壁垒，轻松管理货物、订单、利润等
           </div>
         </div>
@@ -721,49 +724,62 @@ export default {
     object-fit: scale-down;
   }
 }
+.footer-bg {
+  background: linear-gradient(180deg, #2554fe, #3572ff);
+}
 .footer-banner {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 2.5rem 15px;
-  background-image: url(https://static.distributetop.com/office-site-new/office-site-upload/img/history-card-sm-bg.cbfbf77.png);
+  padding: 80px 15px;
+  background-image: url(../../assets/images/home/06.png);
   background-position-y: bottom;
   background-repeat: no-repeat;
-  background-size: 100% 5.375rem;
-}
-.footer-banner .footer-title {
-  font-weight: 500;
-  font-size: 1.25rem;
-  margin-bottom: 1.25rem;
-  text-align: center;
-  --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
-  letter-spacing: 2px;
-}
-.footer-banner .footer-description {
-  line-height: 1.75rem;
-  display: none;
-  font-weight: 300;
-  font-size: 1.125rem;
-  margin-top: 0.5rem;
-  margin-bottom: 2.5rem;
-  --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
+  background-size: 100% 90px;
+  .footer-title {
+    font-weight: 500;
+    font-size: 36px;
+    margin-bottom: 20px;
+    max-width: 70vw;
+    text-align: center;
+    color: rgba(255, 255, 255, 1);
+    letter-spacing: 2px;
+  }
+  .footer-description {
+    font-weight: 300;
+    font-size: 18px;
+    margin-top: 8px;
+    margin-bottom: 40px;
+
+    color: rgba(255, 255, 255, 1);
+  }
 }
-@media (min-width: 1024px) {
-  .footer-banner {
-    padding: 5rem 0;
-    background-image: url(https://static.distributetop.com/office-site-new/office-site-upload/img/app-promotion-bg.252059a.png);
-    background-size: cover;
+@media (max-width: 1100px) {
+  .left-content {
+    width: 100%;
+    gap: 8px;
   }
-  .footer-banner .footer-title {
-    font-size: 2.25rem;
-    line-height: 3.125rem;
-    margin-bottom: 0;
+  .right-image {
+    width: 100%;
   }
-  .footer-banner .footer-description {
-    display: block;
+  .footer-banner {
+    padding: 40px 10px;
+    .footer-title {
+      font-size: 18px;
+      margin-bottom: 10px;
+      max-width: 90vw;
+      text-align: center;
+      color: rgba(255, 255, 255, 1);
+    }
+    .footer-description {
+      font-weight: 300;
+      font-size: 12px;
+      margin-top: 8px;
+      margin-bottom: 20px;
+
+      color: rgba(255, 255, 255, 1);
+    }
   }
 }
 </style>

src/views/product/productionCustom.vue

 <template>
   <div class="production-custom">
     <div class="banner-container">
-      <div class="content-container flex items-center gap-20">
+      <div
+        class="content-container flex flex-col lg:flex-row items-center gap-10 lg:gap-20">
         <div class="left-content">
-          <h3 class="banner-title font-semibold text-4xl">
+          <h3
+            class="banner-title font-semibold text-2xl lg:text-4xl text-center lg:text-left">
             按需打印供应链平台 0基础创业
           </h3>
           <div
-            class="text-xs px-8 lg:text-lg lg:px-0 font-light text-textContent mt-[6px] mb-8">
+            class="text-sm lg:text-lg font-light text-center lg:text-left text-textContent lg:mb-8">
             <span>定制选品 / 高效生产 / 一件代发 / 无忧售后</span>
           </div>
-          <div>
+          <div
+            class="text-sm lg:text-lg font-light text-textContent text-center lg:text-left">
             <span class="high-light font-bold">1,512</span>
             款产品可定制，累计已设计
             <span class="high-light font-bold">752,062,105</span>
@@ -29,28 +32,32 @@
         </div>
       </div>
     </div>
-    <div class="product-custom-cont bg-colorBg py-28">
-      <div class="w-full-70 mx-auto">
+    <div class="product-custom-cont bg-colorBg py-14 lg:py-28">
+      <div class="custom-container mx-auto">
         <div class="cont-title">
           <div class="flex justify-center flex-col items-center gap-2">
-            <h3 class="font-medium text-3xl" style="text-align: center">
+            <h3
+              class="font-medium text-xl lg:text-3xl"
+              style="text-align: center">
               按需打印商品销售全球
             </h3>
             <div
-              class="text-xs px-8 lg:text-lg lg:px-0 font-light text-textContent mt-[6px] mb-8">
+              class="text-sm px-8 lg:text-lg lg:px-0 font-light text-textContent mt-[6px] mb-8">
               0成本 · 0库存
             </div>
           </div>
         </div>
         <div class="cont-content">
-          <div class="cont-content-left flex items-center gap-20">
+          <div
+            class="cont-content-left flex flex-col lg:flex-row items-center gap-10 lg:gap-20">
             <div
-              class="left-container flex items-center gap-10 py-10 px-10"
+              class="left-container flex items-center gap-10 p-5 lg:py-10 lg:px-10"
               ref="leftContainer"
-              :class="{ leftHover: isLeftHover }"
+              :class="{ leftHover: isLeftHover && !$isMobile }"
               @mouseover="hoverLeft">
               <div>
-                <div class="btn-title text-sm font-bold lg:text-xl mb-12">
+                <div
+                  class="btn-title text-sm font-bold lg:text-xl mb-6 lg:mb-12">
                   您负责
                 </div>
                 <div class="flex flex-col gap-5">
@@ -87,11 +94,12 @@
               </div>
             </div>
             <div
-              class="right-container flex items-center gap-10 py-10 px-10"
-              :class="{ rightHover: isRightHover }"
+              class="right-container flex items-center gap-10 p-5 lg:py-10 lg:px-10"
+              :class="{ rightHover: isRightHover && !$isMobile }"
               @mouseover="hoverRight">
               <div>
-                <div class="btn-title text-sm font-bold lg:text-xl mb-12">
+                <div
+                  class="btn-title text-sm font-bold lg:text-xl mb-6 lg:mb-12">
                   JMDIY负责
                 </div>
                 <div class="flex flex-col gap-5">
@@ -131,103 +139,31 @@
         </div>
       </div>
     </div>
-    <div class="product-custom-template py-28">
+    <!-- <div class="product-custom-template py-28">
       <div class="cont-title">
         <div class="flex justify-center flex-col items-center gap-2">
           <h3 class="font-medium text-3xl" style="text-align: center">
             高效选品 潮流热卖
           </h3>
           <div
-            class="text-xs px-8 lg:text-lg lg:px-0 font-light text-textContent mt-[6px] mb-8">
+            class="text-sm px-8 lg:text-lg lg:px-0 font-light text-textContent mt-[6px] mb-8">
             追求柔性供应链最优解 支持独品/代工
           </div>
         </div>
       </div>
       <div class="template-container w-full-70 mx-auto">
-        <div class="product_listing_page">
-          <div class="mt20 ml20 mr20">
-            <el-row>
-              <el-col :span="4">
-                <div
-                  class="all_category"
-                  @click="
-                    ($event) => {
-                      setPid('all')
-                    }
-                  ">
-                  全部分类
-                </div>
-                <el-collapse
-                  accordion
-                  v-for="typeItem in typeList"
-                  :key="typeItem.id">
-                  <el-collapse-item :title="typeItem.title" :name="typeItem.id">
-                    <ul
-                      class="product_category_list"
-                      v-for="item in typeItem.children"
-                      :key="item.id">
-                      <li
-                        @click="
-                          ($event) => {
-                            setPid(item.id)
-                          }
-                        ">
-                        {{ item.title }}
-                      </li>
-                    </ul>
-                  </el-collapse-item>
-                </el-collapse>
-              </el-col>
-              <el-col class="product_listing_content" :span="20">
-                <el-row v-if="diyList.length > 0">
-                  <el-col
-                    :lg="4"
-                    :md="6"
-                    :sm="8"
-                    :xs="12"
-                    v-for="item in diyList"
-                    :key="item.id">
-                    <ProductItem
-                      :loading="loading"
-                      :product="item"
-                      :key="item.id" />
-                  </el-col>
-                </el-row>
-                <div v-else>
-                  <el-empty :image-size="200"></el-empty>
-                </div>
-                <el-row
-                  style="
-                    display: flex;
-                    justify-content: center;
-                    margin-top: 50px;
-                  ">
-                  <div class="pagination" v-if="totalPage > 1">
-                    <el-pagination
-                      layout="prev, pager, next"
-                      :page-size="24"
-                      :pager-count="5"
-                      :current-page="p"
-                      :total="rowCount"
-                      :page-count="totalPage"
-                      @current-change="changePage"></el-pagination>
-                  </div>
-                </el-row>
-              </el-col>
-            </el-row>
-          </div>
-        </div>
+        <iframe src="https://jomalls.com/custom/" frameborder="0"></iframe>
       </div>
-    </div>
+    </div> -->
     <div class="product-custom-container">
       <div>
-        <div class="cont-title mt-28">
+        <div class="cont-title mt-14 lg:mt-28">
           <div class="flex justify-center flex-col items-center gap-2">
             <h3 class="font-medium text-3xl" style="text-align: center">
               按需打印最佳实践
             </h3>
             <div
-              class="text-xs px-8 lg:text-lg lg:px-0 font-light text-textContent mt-[6px] mb-8">
+              class="text-sm px-8 lg:text-lg lg:px-0 font-light text-textContent mt-[6px] mb-8">
               模式扩展 跨境场景全覆盖
             </div>
           </div>
@@ -237,29 +173,33 @@
         </div>
       </div>
     </div>
-    <div class="product-custom-bottom py-28">
+    <div class="product-custom-bottom py-14 lg:py-28">
       <div class="cont-title">
         <div class="flex justify-center flex-col items-center gap-2">
           <h3 class="font-medium text-3xl" style="text-align: center">
             是什么让JM脱颖而出
           </h3>
           <div
-            class="text-xs px-8 lg:text-lg lg:px-0 font-light text-textContent mt-[6px] mb-8">
+            class="text-sm px-8 lg:text-lg lg:px-0 font-light text-textContent mb-4 lg:mb-8">
             选择JM的8大理由
           </div>
         </div>
       </div>
-      <div class="product-custom-bottom-module w-full-70 mx-auto pt-10">
-        <div class="bottom-reason-list grid grid-cols-4 gap-14">
+      <div class="product-custom-bottom-module mx-auto pt-10">
+        <div
+          class="bottom-reason-list grid grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-14">
           <div
             class="reason-item flex flex-col items-center gap-4"
+            :class="{ 'mobile-reason-item': $isMobile }"
             v-for="(item, index) in reasonList"
             :key="index">
             <img :src="item.icon" width="36" style="height: 36px" />
-            <div class="reason-item-title font-bold text-sm lg:text-2xl">
+            <div class="reason-item-title font-bold text-sm text-center lg:text-left lg:text-2xl">
               {{ item.title }}
             </div>
-            <div class="reason-item-content text-gray-500 text-sm text-center">
+            <div
+              v-show="!$isMobile"
+              class="reason-item-content text-gray-500 text-sm text-center">
               {{ item.subTitle }}
             </div>
           </div>
@@ -432,7 +372,7 @@ export default {
             '一款多图，一图多款任意全印服饰打版，轻松适应款式多变的全印服装市场特性',
         },
       ],
-      diyList:[],
+      diyList: [],
     }
   },
   methods: {
@@ -510,6 +450,10 @@ export default {
     }
   }
 }
+.footer-bg {
+  background: linear-gradient(180deg, #2554fe, #3572ff);
+}
+
 .img-hidden {
   opacity: 0;
   position: absolute;
@@ -540,6 +484,14 @@ export default {
     }
   }
 }
+.reason-item.mobile-reason-item {
+  &:hover {
+    transform: none;
+    & .reason-item-title {
+      font-size: 14px;
+    }
+  }
+}
 .reason-item-content {
   visibility: hidden;
 }
@@ -548,44 +500,79 @@ export default {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 2.5rem 15px;
-  background-image: url(https://static.distributetop.com/office-site-new/office-site-upload/img/history-card-sm-bg.cbfbf77.png);
+  padding: 80px 15px;
+  background-image: url(../../assets/images/home/06.png);
   background-position-y: bottom;
   background-repeat: no-repeat;
-  background-size: 100% 5.375rem;
+  background-size: 100% 90px;
+  .footer-title {
+    font-weight: 500;
+    font-size: 36px;
+    margin-bottom: 20px;
+    max-width: 70vw;
+    text-align: center;
+    color: rgba(255, 255, 255, 1);
+    letter-spacing: 2px;
+  }
+  .footer-description {
+    font-weight: 300;
+    font-size: 18px;
+    margin-top: 8px;
+    margin-bottom: 40px;
+
+    color: rgba(255, 255, 255, 1);
+  }
 }
-.footer-banner .footer-title {
-  font-weight: 500;
-  font-size: 1.25rem;
-  margin-bottom: 1.25rem;
-  text-align: center;
-  --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
-  letter-spacing: 2px;
+.custom-container {
+  width: 70vw;
 }
-.footer-banner .footer-description {
-  line-height: 1.75rem;
-  display: none;
-  font-weight: 300;
-  font-size: 1.125rem;
-  margin-top: 0.5rem;
-  margin-bottom: 2.5rem;
-  --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
+.product-custom-bottom-module {
+  width: 70vw;
 }
-@media (min-width: 1024px) {
-  .footer-banner {
-    padding: 5rem 0;
-    background-image: url(https://static.distributetop.com/office-site-new/office-site-upload/img/app-promotion-bg.252059a.png);
-    background-size: cover;
+@media (max-width: 1100px) {
+  .content-container {
+    width: 90vw;
+    margin: 0 auto;
+    height: auto;
+  }
+  .product-custom-bottom-module {
+    width: 90vw;
   }
-  .footer-banner .footer-title {
-    font-size: 2.25rem;
-    line-height: 3.125rem;
-    margin-bottom: 0;
+  .left-container {
+    width: 100%;
+    height: auto;
+  }
+  .right-container {
+    width: 100%;
+    height: auto;
   }
-  .footer-banner .footer-description {
-    display: block;
+  .custom-container {
+    width: 90vw;
+  }
+  .left-content {
+    width: 100%;
+    gap: 8px;
+  }
+  .right-image {
+    width: 100%;
+  }
+  .footer-banner {
+    padding: 40px 10px;
+    .footer-title {
+      font-size: 18px;
+      margin-bottom: 10px;
+      max-width: 90vw;
+      text-align: center;
+      color: rgba(255, 255, 255, 1);
+    }
+    .footer-description {
+      font-weight: 300;
+      font-size: 12px;
+      margin-top: 8px;
+      margin-bottom: 20px;
+
+      color: rgba(255, 255, 255, 1);
+    }
   }
 }
 </style>

src/views/product/productionLogistics.vue

 <template>
   <div class="product-logistics">
     <div class="banner-container">
-      <div class="content-container flex items-center gap-20">
+      <div
+        class="content-container w-full-70 w-full-90 flex items-center flex-col lg:flex-row gap-8 lg:gap-20">
         <div class="left-content">
-          <h3 class="banner-title font-semibold text-4xl">
+          <h3
+            class="banner-title font-semibold text-2xl lg:text-4xl text-center lg:text-lef">
             海外仓管理， 用九猫WMS
           </h3>
           <div
-            class="text-xs px-8 lg:text-lg lg:px-0 font-light text-textContent mt-[6px] mb-8">
+            class="text-sm px-8 text-center lg:text-left lg:text-lg lg:px-0 font-light text-textContent mb-8">
             <span>全面覆盖海外仓业务场景，无纸化智能化管理海外仓</span>
           </div>
         </div>
@@ -17,20 +19,21 @@
         </div>
       </div>
     </div>
-    <div class="product-logistics-cont py-28">
-      <div class="w-full-70 mx-auto">
+    <div class="product-logistics-cont py-14 lg:py-28">
+      <div class="w-full-70 w-full-90 mx-auto">
         <div class="cont-title">
           <div class="flex justify-center flex-col items-center gap-2">
             <h3 class="font-medium text-3xl" style="text-align: center">
               为什么选择九猫WMS
             </h3>
             <div
-              class="text-xs px-8 lg:text-lg lg:px-0 font-light text-textContent mt-[6px] mb-8">
+              class="text-sm px-8 lg:text-lg lg:px-0 font-light text-textContent lg:mb-4 lg:mb-8">
               领星旗下产品，助海外仓全面实现数字化
             </div>
           </div>
         </div>
-        <div class="reason-list flex justify-between py-10">
+        <div
+          class="reason-list flex flex-col lg:flex-row gap-5 lg:gap-0 justify-between py-5 lg:py-10">
           <div class="section-reason-item">
             <div class="season-top flex flex-col items-center">
               <img src="../../assets/images/product/12.png" width="100" />
@@ -38,7 +41,7 @@
               <p class="text-textPrimary font-normal mt-2 text-sm lg:text-lg">
                 贴合海外仓全业务场景
               </p>
-              <div class="mt-6 flex flex-col items-center">
+              <div class="mt-6 flex flex-col lg:items-center">
                 <p class="text-textPrimary mb-2.5 font-light text-sm">
                   覆盖一件代发、备货中转、FBA退货、财务等场景
                 </p>
@@ -63,7 +66,7 @@
               <p class="text-textPrimary font-normal mt-2 text-sm lg:text-lg">
                 SaaS软件，无需下载即可使用
               </p>
-              <div class="mt-6 flex flex-col items-center">
+              <div class="mt-6 flex flex-col lg:items-center">
                 <p class="text-textPrimary mb-2.5 font-light text-sm">
                   对接多家ERP、电商平台、物流服务商，全链路轻松管理
                 </p>
@@ -87,7 +90,7 @@
               <p class="text-textPrimary font-normal mt-2 text-sm lg:text-lg">
                 专业顾问全程服务，为您保驾护航
               </p>
-              <div class="mt-6 flex flex-col items-center">
+              <div class="mt-6 flex flex-col lg:items-center">
                 <p class="text-textPrimary mb-2.5 font-light text-sm">
                   软件顾问、实施全周期跟踪式服务
                 </p>
@@ -107,42 +110,44 @@
         </div>
       </div>
     </div>
-    <div class="product-logistics-container mb-28 py-10">
+    <div class="product-logistics-container mb-14 lg:mb-28 py-10">
       <div class="cont-title">
         <div>
-          <h3 class="font-medium text-3xl" style="text-align: center">
+          <h3
+            class="font-medium text-2xl lg:text-3xl"
+            style="text-align: center">
             九猫WMS，提供更高效的解决方案
           </h3>
         </div>
       </div>
-      <div class="w-full-70 mx-auto">
-        <div class="navigate bg-white py-2 px-2 flex gap-2 mt-10">
+      <div class="w-full-70 w-full-90 mx-auto">
+        <div class="navigate bg-white py-2 px-2 flex gap-2 mt-5 lg:mt-10">
           <div
-            class="navigate-item text flex-1 text-center"
+            class="navigate-item text text-xs lg:text-base flex-1 text-center"
             :class="navigateKey === 'df' ? 'navigate-item-active' : ''"
             @click="changeNavigate('df', 0)">
             一件代发
           </div>
           <div
-            class="navigate-item text flex-1 text-center"
+            class="navigate-item text flex-1 text-xs lg:text-base text-center"
             :class="navigateKey === 'bh' ? 'navigate-item-active' : ''"
             @click="changeNavigate('bh', 1)">
             备货中转
           </div>
           <div
-            class="navigate-item text flex-1 text-center"
+            class="navigate-item text flex-1 text-xs lg:text-base text-center"
             :class="navigateKey === 'th' ? 'navigate-item-active' : ''"
             @click="changeNavigate('th', 2)">
             退货管理
           </div>
           <div
-            class="navigate-item text flex-1 text-center"
+            class="navigate-item text flex-1 text-xs lg:text-base text-center"
             :class="navigateKey === 'cw' ? 'navigate-item-active' : ''"
             @click="changeNavigate('cw', 3)">
             财务管理
           </div>
           <div
-            class="navigate-item text flex-1 text-center"
+            class="navigate-item text flex-1 text-xs lg:text-base text-center"
             :class="navigateKey === 'pda' ? 'navigate-item-active' : ''"
             @click="changeNavigate('pda', 4)">
             PDA
@@ -166,7 +171,7 @@
       </div>
     </div>
     <div>
-      <div class="module-container">
+      <div class="module-container flex flex-col gap-10 lg:gap-0">
         <ProductLogisticsDesc
           v-for="(item, index) in moduleBtItems"
           :key="index"
@@ -176,7 +181,7 @@
     <div class="footer-bg">
       <div class="footer-banner">
         <div class="footer-title">亚马逊ERP一体化管理，开启高效决策新体验</div>
-        <div class="footer-description">
+        <div class="footer-description text-center lg:text-left">
           九猫ERP助力精准核算业务利润与高效决策，业财一体化不再是难事
         </div>
         <!---->
@@ -371,7 +376,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .content-container {
-  width: 70vw;
+  // width: 70vw;
   height: 30vw;
   margin: 0 auto;
   padding-top: 40px;
@@ -461,49 +466,66 @@ export default {
     }
   }
 }
+.footer-bg {
+  background: linear-gradient(180deg, #2554fe, #3572ff);
+}
 .footer-banner {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 2.5rem 15px;
-  background-image: url(https://static.distributetop.com/office-site-new/office-site-upload/img/history-card-sm-bg.cbfbf77.png);
+  padding: 80px 15px;
+  background-image: url(../../assets/images/home/06.png);
   background-position-y: bottom;
   background-repeat: no-repeat;
-  background-size: 100% 5.375rem;
-}
-.footer-banner .footer-title {
-  font-weight: 500;
-  font-size: 1.25rem;
-  margin-bottom: 1.25rem;
-  text-align: center;
-  --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
-  letter-spacing: 2px;
-}
-.footer-banner .footer-description {
-  line-height: 1.75rem;
-  display: none;
-  font-weight: 300;
-  font-size: 1.125rem;
-  margin-top: 0.5rem;
-  margin-bottom: 2.5rem;
-  --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
+  background-size: 100% 90px;
+  .footer-title {
+    font-weight: 500;
+    font-size: 36px;
+    margin-bottom: 20px;
+    max-width: 70vw;
+    text-align: center;
+    color: rgba(255, 255, 255, 1);
+    letter-spacing: 2px;
+  }
+  .footer-description {
+    font-weight: 300;
+    font-size: 18px;
+    margin-top: 8px;
+    margin-bottom: 40px;
+
+    color: rgba(255, 255, 255, 1);
+  }
 }
-@media (min-width: 1024px) {
+@media (max-width: 1100px) {
+  .content-container {
+    height: auto;
+  }
   .footer-banner {
-    padding: 5rem 0;
-    background-image: url(https://static.distributetop.com/office-site-new/office-site-upload/img/app-promotion-bg.252059a.png);
-    background-size: cover;
+    padding: 40px 10px;
+    .footer-title {
+      font-size: 18px;
+      margin-bottom: 10px;
+      max-width: 90vw;
+      text-align: center;
+      color: rgba(255, 255, 255, 1);
+    }
+    .footer-description {
+      font-weight: 300;
+      font-size: 12px;
+      margin-top: 8px;
+      margin-bottom: 20px;
+
+      color: rgba(255, 255, 255, 1);
+    }
   }
-  .footer-banner .footer-title {
-    font-size: 2.25rem;
-    line-height: 3.125rem;
-    margin-bottom: 0;
+  .season-top {
+    padding: 18px 20px 26px;
   }
-  .footer-banner .footer-description {
-    display: block;
+  .product-logistics-container {
+    .navigate-item {
+      padding: 8px 2px;
+    }
   }
 }
 </style>

src/views/product/productionManagement.vue

 <template>
   <div class="productionManagement">
     <div class="banner-container">
-      <div class="content-container flex items-center gap-20">
+      <div
+        class="content-container flex flex-col lg:flex-row items-center gap-8 lg:gap-20">
         <div class="left-content">
-          <h3 class="banner-title font-semibold text-4xl">
+          <h3
+            class="banner-title font-semibold text-2xl lg:text-4xl text-center lg:text-left">
             做亚马逊，用九猫ERP
           </h3>
           <div
-            class="text-xs px-8 lg:text-lg lg:px-0 font-light text-textContent mt-[6px] mb-8">
+            class="text-sm px-8 text-center lg:text-left lg:text-lg lg:px-0 font-light text-textContent mb-8">
             <span>市占率第一，亚马逊业务一体化管理，助力，</span>
             <span class="high-light font-bold">60万+</span>
             <span>卖家业务增长</span>
@@ -26,8 +28,8 @@
       </div>
     </div>
     <div class="product-content">
-      <div class="blank-area"></div>
-      <div class="nav-content">
+      <div class="blank-area" v-show="!$isMobile"></div>
+      <div class="nav-content" v-show="!$isMobile">
         <div class="module-nav" ref="navContent">
           <div
             class="module-nav-item"
@@ -54,17 +56,46 @@
           </div>
         </div>
       </div>
+      <div
+        v-show="$isMobile"
+        class="mobile-nav sticky z-50 w-full bg-white"
+        ref="mobileNav">
+        <div ref="mobileNavContent" class="scroll-wrap w-full-90 mx-auto">
+          <div class="nav-list flex items-center">
+            <div
+              class="nav-item flex-1 text-center"
+              :class="{
+                'nav-item-active': item.children.some((c) => c.id === subKey),
+              }"
+              @click="mobileHandleNavClick(item)"
+              v-for="(item, index) in productNavs"
+              :key="index">
+              <span>{{ item.name }}</span>
+            </div>
+          </div>
+          <div class="scroll-content flex items-center text-sm gap-2 mt-2">
+            <div
+              class="sub-item flex-1 text-center text-textPrimary"
+              :class="{ 'sub-item-active': subKey === c.id }"
+              @click="mobileSubClick(c)"
+              v-for="(c, index1) in scrollContents"
+              :key="index1">
+              <div class="anchor_value">{{ c.name }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
       <div class="product-module">
         <ProductDesc :moduleItems="moduleItems" />
       </div>
     </div>
     <div class="py-12 px-15 lg:py-32 bg-white">
-      <div class="w-full-70 mx-auto">
+      <div class="cooperation-container mx-auto">
         <div
           class="flex flex-col justify-between items-center lg:flex-row max-w-7xl mx-auto">
           <div class="text-center lg:text-left">
             <div
-              class="text-xl inline-block lg:text-4xl lg:block !lg:leading-[54px] font-medium text-colorPrimary-100">
+              class="text-xl high-light inline-block lg:text-4xl lg:block font-medium text-colorPrimary-100">
               600000+
             </div>
             <div
@@ -90,11 +121,11 @@
                   alt="" />
               </div>
               <div class="ml-2 lg:ml-5">
-                <p class="text-xs lg:text-base lg:font-medium text-textTitle">
+                <p class="text-sm lg:text-base lg:font-medium text-textTitle">
                   xxx
                 </p>
                 <p
-                  class="text-xs font-light mt-0.5 text-textSup lg:text-sm lg:mt-2 lg:font-normal">
+                  class="text-sm font-light mt-0.5 text-textSup lg:text-sm lg:mt-2 lg:font-normal">
                   九猫CEO
                 </p>
               </div>
@@ -106,7 +137,7 @@
     <div class="footer-bg">
       <div class="footer-banner">
         <div class="footer-title">亚马逊ERP一体化管理，开启高效决策新体验</div>
-        <div class="footer-description">
+        <div class="footer-description text-center lg:text-left">
           九猫ERP助力精准核算业务利润与高效决策，业财一体化不再是难事
         </div>
         <!---->
@@ -683,9 +714,11 @@ export default {
           ],
         },
       ],
+      subKey: 'realtime-profit-stats',
       productNavs: [
         {
           name: '财务',
+          key: 'finance',
           children: [
             { id: 'realtime-profit-stats', name: '实时利润统计' },
             { id: 'profit-report-daily', name: '每日利润报表' },
@@ -695,6 +728,7 @@ export default {
         },
         {
           name: '供应链',
+          key: 'supply-chain',
           children: [
             { id: 'replenishment-advice', name: '补货建议' },
             { id: 'shipping-management', name: '发货管理' },
@@ -707,6 +741,7 @@ export default {
         },
         {
           name: '运营',
+          key: 'operation',
           children: [
             { id: 'data-decision', name: '数据决策' },
             { id: 'operation-tool', name: '运营工具' },
@@ -717,6 +752,7 @@ export default {
         },
         {
           name: '广告管理',
+          key: 'ad-management',
           children: [
             { id: 'visualization-ad-report', name: '可视化广告报表' },
             { id: 'ad-analysis', name: '广告溯源分析' },
@@ -731,11 +767,21 @@ export default {
       activeProductNavId: null,
     }
   },
+  computed: {
+    scrollContents() {
+      return this.productNavs.find((item) =>
+        item.children.some((child) => child.id === this.subKey)
+      )?.children
+    },
+  },
   mounted() {
     this._productModulesItems = Array.from(
       this.$el.querySelectorAll('.home-module-item')
     )
-    this.scrollParent().addEventListener('scroll', this.onScroll)
+    this.scrollParent().addEventListener(
+      'scroll',
+      this.$isMobile ? this.onMobileScroll : this.onScroll
+    )
     // const productNavIntersections = {}
     // this._intersectionObserver = new IntersectionObserver(
     //   (entries) => {
@@ -805,9 +851,51 @@ export default {
         .filter(({ ratio }) => ratio > 0)
         .sort((a, b) => b.ratio - a.ratio)[0]?.id
     },
+    mobileHandleNavClick(item) {
+      // this.subKey = item.children[0].id
+      this.mobileSubClick(item.children[0])
+      // const headerEl = this.scrollParent().querySelector('.header')
+      // const bannerEl = this.$el.querySelector('.banner-container')
+      // if (headerEl && bannerEl) {
+      //   this.scrollParent().scrollTo({
+      //     top: headerEl.offsetHeight + bannerEl.offsetHeight + 50,
+      //     behavior: 'smooth',
+      //   })
+      // }
+    },
+    mobileSubClick(item) {
+      // this.subKey = item.id
+      const el = this.$el.querySelector(
+        '.home-module-item[data-id="' + item.id + '"]'
+      )
+      if (el) {
+        this.scrollParent().scrollTo({
+          top: el.offsetTop - 142,
+          behavior: 'smooth',
+        })
+      }
+    },
+    onMobileScroll() {
+      const top = this.scrollParent().scrollTop
+      const intersectionHeight = window.innerHeight * 0.5
+      this.subKey =
+        this._productModulesItems
+          .map((el) => {
+            const id = el.dataset.id
+            if (!id) return
+            const { top, bottom } = el.getBoundingClientRect()
+            const ratio =
+              Math.max(
+                0,
+                Math.min(intersectionHeight, bottom) - Math.max(0, top)
+              ) / intersectionHeight
+            return { id, ratio }
+          })
+          .filter(({ ratio }) => ratio > 0)
+          .sort((a, b) => b.ratio - a.ratio)[0]?.id ?? 'realtime-profit-stats'
+    },
     handleNavClick(item, child = item.children[0]) {
       if (!child) return
-      console.log(11111, this.activeProductNavId)
       const el = this.$el.querySelector(
         '.home-module-item[data-id="' + child.id + '"]'
       )
@@ -845,7 +933,7 @@ export default {
   padding-top: 100px;
 }
 .nav-content {
-  background-color: #f8f9ff;
+  // background-color: #f8f9ff;
   position: sticky;
   top: 0;
   z-index: 999;
@@ -907,7 +995,7 @@ export default {
 }
 .blank-area {
   height: 80px;
-  background-color: #f8f9ff;
+  // background-color: #f8f9ff;
 }
 .module-child-list {
   display: none;
@@ -969,43 +1057,89 @@ export default {
   }
 }
 .banner-title {
-  font-size: 36px;
+  // font-size: 36px;
+}
+.footer-bg {
+  background: linear-gradient(180deg, #2554fe, #3572ff);
 }
-
 .footer-banner {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 2.5rem 15px;
-  background-image: url(https://static.distributetop.com/office-site-new/office-site-upload/img/history-card-sm-bg.cbfbf77.png);
+  padding: 80px 15px;
+  background-image: url(../../assets/images/home/06.png);
   background-position-y: bottom;
   background-repeat: no-repeat;
-  background-size: 100% 5.375rem;
-}
-.footer-banner .footer-title {
-  font-weight: 500;
-  font-size: 1.25rem;
-  margin-bottom: 1.25rem;
-  text-align: center;
-  --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
-  letter-spacing: 2px;
-}
-.footer-banner .footer-description {
-  line-height: 1.75rem;
-  display: none;
-  font-weight: 300;
-  font-size: 1.125rem;
-  margin-top: 0.5rem;
-  margin-bottom: 2.5rem;
-  --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
+  background-size: 100% 90px;
+  .footer-title {
+    font-weight: 500;
+    font-size: 36px;
+    margin-bottom: 20px;
+    max-width: 70vw;
+    text-align: center;
+    color: rgba(255, 255, 255, 1);
+    letter-spacing: 2px;
+  }
+  .footer-description {
+    font-weight: 300;
+    font-size: 18px;
+    margin-top: 8px;
+    margin-bottom: 40px;
+
+    color: rgba(255, 255, 255, 1);
+  }
 }
 .high-light {
   --tw-text-opacity: 1;
   color: rgba(37, 84, 254, var(--tw-text-opacity));
 }
+.scroll-content {
+  overflow-x: scroll;
+  scrollbar-width: none;
+}
+.sub-item {
+  white-space: nowrap;
+  padding: 8px 4px;
+  font-size: 13px;
+  &.sub-item-active {
+    font-weight: 500;
+    color: #2554fe;
+  }
+}
+.anchor_value {
+  line-height: 22px;
+  padding: 1px 10px;
+  background: rgba(135, 165, 219, 0.1215686275);
+  border-radius: 4px;
+}
+.nav-item {
+  padding-top: 8px;
+  padding-bottom: 2px;
+}
+.nav-item.nav-item-active {
+  font-size: 15px;
+  font-weight: 600;
+  color: #2554fe;
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    bottom: -2px;
+    width: 20px;
+    height: 2px;
+    transform: translateX(-50%);
+    border-radius: 3px 0 0;
+    background-color: #2554fe;
+  }
+}
+.mobile-nav {
+  top: 60px;
+}
+.cooperation-container {
+  width: 70vw;
+}
 @media (min-width: 1024px) {
   .product-rumor {
     margin-top: 0;
@@ -1031,18 +1165,43 @@ export default {
     width: 4.5rem;
     border: 1.5px solid #e6e8f0;
   }
+}
+@media (max-width: 1100px) {
+  .content-container {
+    width: 100vw;
+    margin: 0 auto;
+    height: auto;
+  }
   .footer-banner {
-    padding: 5rem 0;
-    background-image: url(https://static.distributetop.com/office-site-new/office-site-upload/img/app-promotion-bg.252059a.png);
-    background-size: cover;
+    padding: 40px 10px;
+    .footer-title {
+      font-size: 18px;
+      margin-bottom: 10px;
+      max-width: 90vw;
+      text-align: center;
+      color: rgba(255, 255, 255, 1);
+    }
+    .footer-description {
+      font-weight: 300;
+      font-size: 12px;
+      margin-top: 8px;
+      margin-bottom: 20px;
+
+      color: rgba(255, 255, 255, 1);
+    }
+  }
+  .cooperation-container {
+    width: 90vw;
   }
-  .footer-banner .footer-title {
-    font-size: 2.25rem;
-    line-height: 3.125rem;
-    margin-bottom: 0;
+  .left-content {
+    width: 100%;
+    gap: 8px;
+  }
+  .right-image {
+    width: 100%;
   }
-  .footer-banner .footer-description {
-    display: block;
+  .product-content {
+    padding-top: 50px;
   }
 }
 </style>