assets/css/root.scss

@@ -153,6 +153,7 @@
         --size-106: 28.2667vw;
         --size-107: 28.5333vw;
         --size-108: 28.8vw;
+        --size-110: 29.3333vw;
         --size-112: 29.8667vw;
         --size-115: 30.6667vw;
         --size-117: 31.2vw;

pages/about/link.vue

@@ -47,7 +47,7 @@
       </div>
     </div>
 
-    <div class="method-box">
+    <div class="method-box method-pc-box">
       <div class="method-item">
         <div class="method-left method-lr">
           <p class="title">Bottom Up Research Method</p>
@@ -87,6 +87,51 @@
       </div>
     </div>
 
+    <div class="method-box method-phone-box">
+      <div class="method-item">
+        <div class="method-left method-lr">
+          <p class="title">Bottom Up Research Method</p>
+        </div>
+      </div>
+      <div
+        :class="['method-item ', `method-level_${index}`]"
+        v-for="(item, index) in methodLevel"
+        :key="index"
+      >
+        <div class="method-left method-lr">
+          <div class="level_item">
+            <p class="level-title">{{ item.left.title }}</p>
+            <p class="level-text">{{ item.left.text }}</p>
+          </div>
+          <div class="level-img">
+            <img :src="item.left.img" alt="" />
+            <div class="level-white" />
+          </div>
+        </div>
+      </div>
+      <div class="method-item">
+        <div class="method-left method-lr">
+          <p class="title">Top Down Research Methodology</p>
+        </div>
+      </div>
+      <div
+        :class="['method-item ', `method-level_${index}`]"
+        v-for="(item, index) in methodLevel"
+        :key="index"
+      >
+        <div class="method-right method-lr">
+          <div class="level-img">
+            <img :src="item.right.img" alt="" />
+            <div class="level-white" />
+          </div>
+          <div class="level_item">
+            <p class="level-title">{{ item.right.title }}</p>
+            <p class="level-text">{{ item.right.text }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <div class="method-content">
       <div class="title">Multidimensional Data Cross Validation Method</div>
       <div class="content-box">
@@ -149,23 +194,6 @@
           analyses, financial disclosures, academic research,news media, and international
           sources, provides robust support for dataverification and analysis.
         </p>
-        <!-- <div>
-          <p class="text-title">Data Source</p>
-          <p class="text-text">
-            Data quality and reliability are paramount to our company. We ensure accuracy
-            and effectiveness through rich and diverse datasources. Our primary data is
-            gathered via comprehensive interviews with key stakeholders, including senior
-            corporate managers,industry experts, supply chain participants, and end
-            consumers. This allows us to capture critical insights into strategic
-            planning,policy interpretation, supply chain dynamics, and product usage. Our
-            secondary data, encompassing government statistics,industry reports,
-            consulting analyses, financial disclosures, academic research,news media, and
-            international sources, provides robust support for dataverification and
-            analysis.
-          </p>
-        </div>
-        <img class="content-img" src="@/assets/images/about/DataSource.png" alt="" />
-      </div> -->
       </div>
     </div>
   </div>
@@ -275,6 +303,7 @@ const methodLevel = [
 ];
 </script>
 <style lang="scss" scoped>
+@import "~/assets/css/tool.scss";
 .page {
   .top {
     width: 100%;
@@ -335,7 +364,9 @@ const methodLevel = [
       background-size: 100% 100%;
     }
   }
-
+  .method-phone-box {
+    display: none;
+  }
   .method-box {
     padding: var(--size-76) var(--size-146);
     // background: url("@/assets/images/about/img_03.png") no-repeat center center;
@@ -638,4 +669,124 @@ const methodLevel = [
     // }
   }
 }
+
+@include responseTo("phone") {
+  .page {
+    .top {
+      img {
+        height: 140px;
+        object-fit: cover;
+      }
+      > div {
+        padding: var(--size-15);
+        .top_title {
+          font-size: var(--size-28);
+        }
+      }
+    }
+
+    .research-content {
+      padding: var(--size-20);
+      .content-item-01,
+      .content-item-02 {
+        font-size: var(--size-14);
+      }
+      .content-item-02 {
+        padding: var(--size-20);
+        background-size: auto 100%;
+      }
+    }
+
+    .method-pc-box {
+      display: none !important;
+    }
+    .method-phone-box {
+      display: block;
+      padding: var(--size-20);
+      .method-item {
+        width: 100%;
+        padding-bottom: var(--size-20);
+        .method-lr {
+          width: 100%;
+          padding: 0;
+          .title {
+            font-size: var(--size-18);
+          }
+          .level_item {
+            .level-title {
+              line-height: 1.1;
+            }
+          }
+          .level-img {
+            img {
+              width: var(--size-80);
+              height: auto;
+            }
+            .level-white {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+    .method-content {
+      padding: var(--size-20);
+      .title {
+        font-size: var(--size-18);
+      }
+      .content-box {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        background-color: #fff;
+        box-shadow: none;
+        .data-cross-img {
+          position: relative;
+          top: 0;
+          left: 0;
+          order: -1;
+          transform: none;
+          margin: 0 auto;
+          .data-cross-text {
+            // position: static;
+            // transform: none;
+          }
+        }
+        .content-item {
+          padding: var(--size-20) 0 0 !important;
+          margin-top: 0 !important;
+          .item-title {
+            font-size: var(--size-16);
+          }
+          .item-text {
+            font-style: var(--size-14);
+          }
+        }
+      }
+    }
+    .data-source{
+      padding: var(--size-20);
+      .source-content{
+        display: flex;
+        flex-direction: column;
+        .source-img{
+          width: 100%;
+          height: auto;
+          order: 3;
+        }
+        .text-title{
+          order: 1;
+          text-align: center;
+          font-size: var(--size-18);
+          padding-bottom: 0;
+        }
+        .text-text{
+          order: 2;
+          font-size: var(--size-14);
+          padding-bottom: var(--size-20);
+        }
+      }
+    }
+  }
+}
 </style>

pages/about/order.vue

@@ -118,6 +118,7 @@ const orderContainer = [
 ];
 </script>
 <style lang="scss" scoped>
+@import "~/assets/css/tool.scss";
 .top {
   width: 100%;
   position: relative;
@@ -230,4 +231,43 @@ const orderContainer = [
     }
   }
 }
+
+@include responseTo("phone") {
+  .page {
+    .top {
+      img {
+        height: 140px;
+        object-fit: cover;
+      }
+      > div {
+        padding: var(--size-15);
+        .top_title {
+          font-size: var(--size-28);
+        }
+      }
+    }
+    .order-container {
+      padding: var(--size-20);
+      .container-title {
+        font-size: var(--size-18);
+        line-height: 1.2;
+        margin-bottom: var(--size-30);
+      }
+      .list-box {
+        display: flex;
+        flex-direction: column;
+        .container-item {
+          width: 100%;
+          margin-bottom: var(--size-20);
+          .item-title {
+            font-size: var(--size-16);
+          }
+          .item-text {
+            font-size: var(--size-14);
+          }
+        }
+      }
+    }
+  }
+}
 </style>

pages/about/term.vue

@@ -86,6 +86,7 @@ const termContainer = [
 ];
 </script>
 <style lang="scss" scoped>
+@import "~/assets/css/tool.scss";
 .top {
   width: 100%;
   position: relative;
@@ -188,4 +189,56 @@ const termContainer = [
     }
   }
 }
+
+@include responseTo("phone") {
+  .page {
+    .top {
+      img {
+        height: 140px;
+        object-fit: cover;
+      }
+      > div {
+        padding: var(--size-15);
+        .top_title {
+          font-size: var(--size-28);
+        }
+      }
+    }
+    .term-container {
+      padding: var(--size-20);
+      .container-title {
+        font-size: var(--size-18);
+        line-height: 1.2;
+        margin-bottom: var(--size-30);
+      }
+      .container-item {
+        display: flex;
+        flex-direction: column;
+        padding: 0;
+        .item-img {
+          width: 100%;
+          height: auto;
+          order: -1;
+        }
+        .item-content {
+          width: 100%;
+          padding: 0;
+          .item-title {
+            text-align: center;
+            font-size: var(--size-16);
+            padding: var(--size-10) 0;
+          }
+          .item-text {
+            font-size: var(--size-14);
+          }
+        }
+
+        &:nth-child(odd) {
+          background: #eeeeee;
+          padding: var(--size-10);
+        }
+      }
+    }
+  }
+}
 </style>