fix 375 product-introduction

src/components/customHeader/size1440/index.vue

@@ -160,13 +160,13 @@ const handleToHome = () => {
     position: relative;
     margin: 0 10px;
     transition: all 0.3s ease;
-    font-size: 12px;
-    min-width: 120px;
-    text-align: center;
     font-family: "PingFang SC";
     font-style: normal;
     font-weight: 500;
     line-height: normal;
+    font-size: 16px;
+    min-width: 120px;
+    text-align: center;
     &::after {
       content: "";
       position: absolute;

src/components/customHeader/size1920/index.vue

@@ -153,12 +153,13 @@ const handleToHome = () => {
     position: relative;
     margin: 0 20px;
     transition: all 0.3s ease;
-    font-weight: 700;
-    // font-size: 16px;
-    font-size: 1.05rem;
     min-width: 120px;
     text-align: center;
-
+    font-family: "PingFang SC";
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
     &::after {
       content: "";
       position: absolute;

src/components/customHeader/size375/index.vue

@@ -17,12 +17,18 @@
         :class="{ 'menu-open': showMenu }"
         @click="toggleMenu"
       >
-        <n-icon size="28" class="menu-icon menu-icon-menu">
+        <img
-          <menu-sharp />
+          v-if="showMenu"
-        </n-icon>
+          src="@/assets/image/375/menu-close.png"
-        <n-icon size="28" class="menu-icon menu-icon-close">
+          alt="menu"
-          <close-sharp />
+          class="menu-icon"
-        </n-icon>
+        />
+        <img
+          v-else
+          src="@/assets/image/375/menu-open.png"
+          alt="menu"
+          class="menu-icon"
+        />
       </div>
     </div>
   </NLayoutHeader>
@@ -53,11 +59,11 @@ import { useRouter } from "vue-router";
 import { useHeaderMenuConfig } from "@/config/headerMenuConfig";
 const themeOverrides = {
   Menu: {
-    itemTextColorHover: "#ff7bac",
+    itemTextColorHover: "#000",
-    itemTextColorActive: "#ff7bac",
+    itemTextColorActive: "#FF7BAC",
-    itemTextColorActiveHover: "#ff7bac",
+    itemTextColorActiveHover: "#fff8fb",
-    itemColorHover: "#fff8fb",
+    itemColorHover: "#FDDFE9",
-    itemColorActive: "#fff8fb",
+    itemColorActive: "#fff",
     itemColorActiveHover: "#fff8fb",
   },
 };
@@ -125,7 +131,7 @@ const handleToHome = () => {
 .custom-header {
   transition: all 0.3s ease;
   background: transparent;
-  height: 320px;
+  height: 60 * 5.12px;
 
   &.header-scrolled {
     background: rgba(255, 255, 255, 0.95);
@@ -152,8 +158,7 @@ const handleToHome = () => {
 }
 
 .logo :deep(.n-image) {
-  max-width: 100px;
+  width: 94 * 5.12px;
-  height: auto;
 }
 
 .menu-btn {
@@ -168,6 +173,7 @@ const handleToHome = () => {
   user-select: none;
   transition: background 0.2s;
   position: relative;
+  width: 56 * 5.12px;
 
   .menu-icon {
     position: absolute;
@@ -198,14 +204,14 @@ const handleToHome = () => {
 
 .mobile-menu-wrapper {
   position: fixed;
-  top: 320px;
+  top: 60 * 5.12px;
   left: 0;
   width: 100vw;
-  background: #fddfea;
+  background: #fff;
   z-index: 1100;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
   padding: 40px 0 80px 0;
-  max-height: 1500px;
+  max-height: 1500 * 5.12px;
   overflow-y: auto;
 
   // 设置CSS变量，只影响当前组件的菜单

src/components/customHeader/size768/index.vue

@@ -13,12 +13,18 @@
         :class="{ 'menu-open': showMenu }"
         @click="toggleMenu"
       >
-        <n-icon size="28" class="menu-icon menu-icon-menu">
+        <img
-          <menu-sharp />
+          v-if="showMenu"
-        </n-icon>
+          src="@/assets/image/768/menu-close.png"
-        <n-icon size="28" class="menu-icon menu-icon-close">
+          alt="menu"
-          <close-sharp />
+          class="menu-icon"
-        </n-icon>
+        />
+        <img
+          v-else
+          src="@/assets/image/768/menu-open.png"
+          alt="menu"
+          class="menu-icon"
+        />
       </div>
     </div>
   </NLayoutHeader>
@@ -164,6 +170,7 @@ const handleToHome = () => {
   user-select: none;
   transition: background 0.2s;
   position: relative;
+  width: 56 * 2.5px;
 
   .menu-icon {
     position: absolute;

src/views/product-introduction/index.vue

@@ -2,7 +2,7 @@
 import { computed } from "vue";
 import { useWindowSize } from "@vueuse/core";
 
-// import size375 from "./size375/index.vue";
+import size375 from "./size375/index.vue";
 import size768 from "./size768/index.vue";
 import size1440 from "./size1440/index.vue";
 import size1920 from "./size1920/index.vue";

src/views/product-introduction/size1920/index.vue

@@ -262,11 +262,10 @@
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .page-container {
   background-color: #fff;
   font-family: "PingFang SC", sans-serif;
-  /* width:932px */
   margin: 0 auto;
   position: relative;
 }

src/views/product-introduction/size375/index.vue

@@ -0,0 +1,589 @@
+<script setup></script>
+
+<template>
+  <div class="page-container">
+    <div class="grid-lines">
+      <div class="line solid line-1"></div>
+      <div class="line solid line-5"></div>
+    </div>
+    <section class="hero-section relative">
+      <div class="hero-content">
+        <div class="hero-title">
+          More than just a tool——<br />
+          Comprehensive growth <br />solutions, providing a one- <br />stop
+          solution for content <br />creation, publishing, analysis,<br />
+          and monetization
+        </div>
+      </div>
+      <div class="core-value-card">
+        <div class="card-content">
+          <div class="card-title">Core Value</div>
+          <div class="card-text">
+            The FIEE-SAAS platform is a one-stop content operation solution
+            tailored for creators in the digital era. The platform utilizes
+            intelligent distribution technology, A1 empowerment tools, and
+            full-chain services,Assist you in efficiently reaching audiences on
+            global mainstream platforms such as TikTok, YouTube, and Instagram,
+            creating a KOL brand effect, unlocking content value, and achieving
+            sustainable growth.
+          </div>
+        </div>
+      </div>
+      <img
+        src="@/assets/image/375/product-introduction-img2.png"
+        alt="background"
+        class="hero-bg-img"
+      />
+    </section>
+
+    <section class="features-section">
+      <div class="section-header">
+        <div class="decorator-bar"></div>
+        <div class="section-title">Product Features</div>
+      </div>
+      <div class="features-list">
+        <div class="feature-item">
+          <div class="feature-title">
+            <div class="vertical-line"></div>
+            One-click Synchronous Publishing
+          </div>
+          <div class="feature-description">
+            Synchronize graphic and video content to TikTok, YouTube, and
+            Instagram platforms at once, saving time on repetitive operations.
+          </div>
+        </div>
+        <div class="feature-item">
+          <div class="feature-title">
+            <div class="vertical-line"></div>
+            Intelligent Scheduled Publishing
+          </div>
+          <div class="feature-description">
+            Plan the content release time in advance, support batch scheduling,
+            and accurately grasp the optimal release time of each platform.
+          </div>
+        </div>
+        <div class="feature-item">
+          <div class="feature-title">
+            <div class="vertical-line"></div>
+            Unified Management of Multiple Accounts
+          </div>
+          <div class="feature-description">
+            Easily manage multiple accounts on one platform without the need for
+            repeated login and switching, improving team collaboration
+            efficiency.
+          </div>
+        </div>
+        <div class="feature-item">
+          <div class="feature-title">
+            <div class="vertical-line"></div>
+            Cloud Content Library
+          </div>
+          <div class="feature-description">
+            Safely store and manage all creative materials, access and use them
+            anytime, anywhere, and support quick retrieval and reuse.
+          </div>
+        </div>
+        <div class="feature-item">
+          <div class="feature-title">
+            <div class="vertical-line"></div>
+            Basic Data Tracking
+          </div>
+          <div class="feature-description">
+            Visually view the content performance of various platforms,
+            understand core data indicators, and provide a basis for optimizing
+            strategies.
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="solutions-section">
+      <div class="section-header">
+        <div class="decorator-bar"></div>
+        <div class="section-title">Value Added Solutions</div>
+      </div>
+      <div class="solutions-content">
+        <div class="solution-image-container">
+          <img
+            src="@/assets/image/375/product-introduction-img1.png"
+            alt="Value Added Solutions"
+            class="solution-image"
+          />
+        </div>
+        <div class="solutions-list">
+          <div class="solution-item">
+            <img
+              src="@/assets/image/375/product-introduction-icon1.png"
+              alt="KOL Brand Promotion"
+              class="solution-icon"
+            />
+            <div class="solution-title">
+              <div class="vertical-line"></div>
+              KOL Brand Promotion Services
+            </div>
+            <div class="solution-description">
+              Efficiently connect high-quality business cooperation
+              opportunities and complete the entire process management from
+              order acceptance to publication within the platform.
+            </div>
+          </div>
+          <div class="solution-item">
+            <img
+              src="@/assets/image/375/product-introduction-icon2.png"
+              alt="Content Creation Support"
+              class="solution-icon"
+            />
+            <div class="solution-title">
+              <div class="vertical-line"></div>
+              Professional Content Creation Support
+            </div>
+            <div class="solution-description">
+              Connect professional shooting and post production teams for you,
+              create high-quality "art+story" content, and strengthen IP
+              influence.
+            </div>
+          </div>
+          <div class="solution-item">
+            <img
+              src="@/assets/image/375/product-introduction-icon3.png"
+              alt="Account Operation"
+              class="solution-icon"
+            />
+            <div class="solution-title">
+              <div class="vertical-line"></div>
+              Account Operation and Hosting Services
+            </div>
+            <div class="solution-description">
+              From 0 to 1 account positioning, follower growth strategy to
+              monetization cycle, operation experts provide full cycle running
+              and hosting services.
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="advantages-section">
+      <div class="advantages-content">
+        <div class="advantages-header">
+          <div class="decorator-bar"></div>
+          <div class="section-title text-white">Our Advantages</div>
+        </div>
+        <div class="advantages-list">
+          <div class="advantage-item">
+            <div class="advantage-title">
+              <div class="vertical-line"></div>
+              Time Saving
+            </div>
+            <div class="advantage-description">
+              Multi platform publishing efficiency improvement, allowing you to
+              focus on content creation.
+            </div>
+          </div>
+          <div class="advantage-item">
+            <div class="advantage-title">
+              <div class="vertical-line"></div>
+              Safe and Reliable
+            </div>
+            <div class="advantage-description">
+              Enterprise level data encryption and permission control ensure
+              account and content security.
+            </div>
+          </div>
+          <div class="advantage-item">
+            <div class="advantage-title">
+              <div class="vertical-line"></div>
+              Maintain Consistency
+            </div>
+            <div class="advantage-description">
+              Ensure that brand information is presented uniformly on all
+              platforms.
+            </div>
+          </div>
+          <div class="advantage-item">
+            <div class="advantage-title">
+              <div class="vertical-line"></div>
+              Data Driven
+            </div>
+            <div class="advantage-description">
+              Optimizing Content Strategies Based on Actual Performance.
+            </div>
+          </div>
+          <div class="advantage-item">
+            <div class="advantage-title">
+              <div class="vertical-line"></div>
+              Easy to Use
+            </div>
+            <div class="advantage-description">
+              Intuitive interface design, no need for professional technical
+              background.
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="cta-section">
+      <div class="cta-content">
+        <div class="cta-title">Get customized<br />solutions for free</div>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="32"
+          height="60"
+          viewBox="0 0 32 60"
+          fill="none"
+        >
+          <path
+            d="M31.3636 42.4968C32.2121 43.3437 32.2121 44.7165 31.3636 45.5635L17.5362 59.3648C16.6877 60.2117 15.3123 60.2117 14.4638 59.3648L0.636387 45.5635C-0.212133 44.7165 -0.212133 43.3437 0.636387 42.4968C1.48491 41.6499 2.8603 41.6499 3.70883 42.4968L13.8272 52.5962L13.8272 2.16868C13.8272 0.970951 14.8 -7.51835e-07 16 -6.99382e-07C17.2 -6.46929e-07 18.1728 0.970951 18.1728 2.16868L18.1728 52.5962L28.2912 42.4968C29.1397 41.6499 30.5151 41.6499 31.3636 42.4968Z"
+            fill="#FF7BAC"
+          />
+        </svg>
+      </div>
+      <div class="cta-qr-code">
+        <img
+          src="@/assets/image/375/product-introduction-img6.png"
+          alt="QR Code"
+        />
+      </div>
+      <img
+        src="@/assets/image/375/product-introduction-img5.png"
+        alt="background"
+        class="cta-bg-img"
+      />
+    </section>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.page-container {
+  background-color: #fff;
+  font-family: "PingFang SC", sans-serif;
+  margin: 0 auto;
+  position: relative;
+}
+
+.hero-section {
+  text-align: center;
+  position: relative;
+  background-image: url("@/assets/image/375/product-introduction-img3.png");
+  background-repeat: no-repeat;
+  background-size: 100% auto;
+  background-position: top;
+}
+
+.hero-content {
+  position: relative;
+  z-index: 2;
+}
+
+.hero-title {
+  font-size: 24 * 5.12px;
+  font-weight: 500;
+  line-height: 34 * 5.12px;
+  letter-spacing: 0.2 * 5.12px;
+  padding: 153 * 5.12px 0 163 * 5.12px 0;
+  color: #000;
+  z-index: 2;
+}
+.hero-bg-img {
+  position: absolute;
+  bottom: -25 * 5.12px;
+  left: 0;
+  width: 100%;
+  /* height: 100%; */
+  z-index: 1;
+}
+.core-value-card {
+  width: 346 * 5.12px;
+  padding: 40 * 5.12px 32 * 5.12px;
+  margin: 0 auto;
+  background-color: #fff;
+  border-radius: 16 * 5.12px;
+  box-shadow: 0 * 5.12px 3 * 5.12px 14 * 5.12px 0 * 5.12px rgba(0, 0, 0, 0.16);
+  text-align: left;
+  z-index: 2;
+  position: relative;
+}
+
+.card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 24 * 5.12px;
+}
+
+.card-title {
+  font-size: 32 * 5.12px;
+  font-weight: 500;
+  letter-spacing: 0.8 * 5.12px;
+}
+
+.card-text {
+  font-size: 14 * 5.12px;
+  color: #455363;
+  letter-spacing: 0.48 * 5.12px;
+  text-align: justify;
+  font-feature-settings: "liga" off, "clig" off;
+}
+
+.section-header {
+  margin-bottom: 32 * 5.12px;
+  padding: 0 16 * 5.12px;
+}
+
+.decorator-bar {
+  width: 58 * 5.12px;
+  height: 7 * 5.12px;
+  background-color: #ff7bac;
+  margin-bottom: 16 * 5.12px;
+}
+
+.section-title {
+  font-family: "PingFang SC";
+  font-size: 24 * 5.12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.features-section {
+  padding-top: 64 * 5.12px;
+  width: 346 * 5.12px;
+  margin: 0 auto;
+}
+.features-list {
+  display: flex;
+  flex-direction: column;
+  gap: 24 * 5.12px;
+}
+
+.feature-item {
+  display: flex;
+  flex-direction: column;
+  gap: 16 * 5.12px;
+}
+
+.feature-title {
+  font-size: 24 * 5.12px;
+  font-weight: 500;
+  line-height: 32 * 5.12px;
+  letter-spacing: 1.2 * 5.12px;
+  display: flex;
+  align-items: flex-start;
+  gap: 16 * 5.12px;
+}
+.feature-description {
+  font-size: 16 * 5.12px;
+  line-height: 22 * 5.12px;
+  color: #455363;
+  letter-spacing: 0.48 * 5.12px;
+  padding: 0 16 * 5.12px;
+  text-align: justify;
+  font-feature-settings: "liga" off, "clig" off;
+}
+
+.solutions-section {
+  padding-top: 64 * 5.12px;
+  width: 346 * 5.12px;
+  margin: 0 auto;
+}
+.solutions-content {
+  display: flex;
+  gap: 32 * 5.12px;
+  flex-direction: column;
+  align-items: stretch;
+}
+.solutions-list {
+  display: flex;
+  flex-direction: column;
+  gap: 24 * 5.12px;
+  width: 100%;
+}
+.solution-item {
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+}
+.solution-icon {
+  width: 92 * 5.12px;
+  height: 76 * 5.12px;
+  padding-left: 16 * 5.12px;
+}
+.solution-title {
+  font-family: "PingFang SC";
+  font-size: 24 * 5.12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 32 * 5.12px; /* 133.333% */
+  letter-spacing: 1.2 * 5.12px;
+  display: flex;
+  gap: 16 * 5.12px;
+  align-items: flex-start;
+  margin-bottom: 16 * 5.12px;
+}
+.solution-description {
+  font-size: 14 * 5.12px;
+  letter-spacing: 0.48 * 5.12px;
+  padding: 0 16 * 5.12px;
+  text-align: justify;
+  font-feature-settings: "liga" off, "clig" off;
+  font-family: "PingFang SC";
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  color: #455363;
+}
+.solution-image-container {
+  width: 100%;
+  border-radius: 16 * 5.12px;
+}
+.solution-image {
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+  border-radius: 16 * 5.12px;
+}
+
+.advantages-section {
+  margin-top: 64 * 5.12px;
+  padding: 64 * 5.12px 0;
+  background-image: url("@/assets/image/375/product-introduction-img4.png");
+  background-size: cover;
+  background-position: center;
+  color: #fff;
+  position: relative;
+}
+
+.advantages-content {
+  width: 346 * 5.12px;
+  margin: 0 auto;
+  display: flex;
+  gap: 16 * 5.12px;
+  position: relative;
+  z-index: 1;
+  flex-direction: column;
+}
+
+.advantages-header {
+  width: 100%;
+  padding: 0 16 * 5.12px;
+}
+.advantages-list {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 24 * 5.12px;
+}
+.advantage-item {
+  display: flex;
+  flex-direction: column;
+  gap: 16 * 5.12px;
+}
+.advantage-title {
+  font-size: 24 * 5.12px;
+  font-weight: 500;
+  line-height: 32 * 5.12px;
+  letter-spacing: 1.2 * 5.12px;
+  display: flex;
+  gap: 16 * 5.12px;
+  align-items: flex-start;
+}
+.advantage-description {
+  font-size: 16 * 5.12px;
+  line-height: 22 * 5.12px;
+  letter-spacing: 0.48 * 5.12px;
+  opacity: 0.7;
+  padding: 0 16 * 5.12px;
+}
+.text-white {
+  color: #fff;
+}
+
+.cta-section {
+  padding: 80 * 5.12px 0 21 * 5.12px 0;
+  width: 346 * 5.12px;
+  margin: 0 auto;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.cta-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16 * 5.12px;
+  position: relative;
+  z-index: 1;
+  width: 100%;
+}
+
+.cta-title {
+  font-family: "PingFang SC";
+  font-size: 24 * 5.12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.cta-qr-code {
+  width: 188 * 5.12px;
+  height: 188 * 5.12px;
+  background-color: #90ffff;
+  border-radius: 16 * 5.12px;
+  padding: 14 * 5.12px;
+  margin: 20 * 5.12px 0;
+}
+.cta-qr-code img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.cta-bg-img {
+  width: 480 * 5.12px;
+  height: auto;
+  opacity: 0.8;
+  z-index: 0;
+}
+
+.vertical-line {
+  width: 1 * 5.12px;
+  height: 20 * 5.12px;
+  background: #ff7bac;
+  flex-shrink: 0;
+  margin-top: 6 * 5.12px;
+}
+
+.grid-lines {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 346 * 5.12px;
+  height: 100%;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.grid-lines .line {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+}
+
+.grid-lines .line.solid {
+  width: 1 * 5.12px;
+  background-color: rgba(0, 0, 0, 0.08);
+}
+
+.grid-lines .line.dashed {
+  width: 0;
+  border-left: 1 * 5.12px dotted rgba(0, 0, 0, 0.12);
+}
+
+.grid-lines .line-1 {
+  left: 0;
+}
+
+.grid-lines .line-5 {
+  right: 0;
+}
+</style>

src/views/product-introduction/size768/index.vue

@@ -2,23 +2,21 @@
 
 <template>
   <div class="page-container">
-    <div class="grid-lines px-fixed">
+    <div class="grid-lines">
       <div class="line solid line-1"></div>
-      <div class="line dashed line-2"></div>
       <div class="line dashed line-3"></div>
-      <div class="line dashed line-4"></div>
       <div class="line solid line-5"></div>
     </div>
-    <section class="hero-section px-fixed relative">
+    <section class="hero-section relative">
       <div class="hero-content">
         <div class="hero-title">
           More than just a tool——<br />
-          Comprehensive growth solutions, <br />
+          Comprehensive growth solutions, <br />providing a one-stop solution
-          providing a one-stop solution for content creation,<br />
+          for <br />content creation, publishing, analysis, <br />and
-          publishing, analysis, and monetization
+          monetization
         </div>
       </div>
-      <div class="core-value-card px-fixed">
+      <div class="core-value-card">
         <div class="card-content">
           <div class="card-title">Core Value</div>
           <div class="card-text">
@@ -33,13 +31,13 @@
         </div>
       </div>
       <img
-        src="@/assets/image/1440/product-introduction-img2.png"
+        src="@/assets/image/768/product-introduction-img2.png"
         alt="background"
         class="hero-bg-img"
       />
     </section>
 
-    <section class="features-section px-fixed">
+    <section class="features-section">
       <div class="section-header">
         <div class="decorator-bar"></div>
         <div class="section-title">Product Features</div>
@@ -47,7 +45,7 @@
       <div class="features-list">
         <div class="feature-item">
           <div class="feature-title">
-            <div class="vertical-line px-fixed"></div>
+            <div class="vertical-line"></div>
             One-click Synchronous Publishing
           </div>
           <div class="feature-description">
@@ -57,7 +55,7 @@
         </div>
         <div class="feature-item">
           <div class="feature-title">
-            <div class="vertical-line px-fixed"></div>
+            <div class="vertical-line"></div>
             Intelligent Scheduled Publishing
           </div>
           <div class="feature-description">
@@ -67,7 +65,7 @@
         </div>
         <div class="feature-item">
           <div class="feature-title">
-            <div class="vertical-line px-fixed"></div>
+            <div class="vertical-line"></div>
             Unified Management of Multiple Accounts
           </div>
           <div class="feature-description">
@@ -78,7 +76,7 @@
         </div>
         <div class="feature-item">
           <div class="feature-title">
-            <div class="vertical-line px-fixed"></div>
+            <div class="vertical-line"></div>
             Cloud Content Library
           </div>
           <div class="feature-description">
@@ -88,7 +86,7 @@
         </div>
         <div class="feature-item">
           <div class="feature-title">
-            <div class="vertical-line px-fixed"></div>
+            <div class="vertical-line"></div>
             Basic Data Tracking
           </div>
           <div class="feature-description">
@@ -100,21 +98,28 @@
       </div>
     </section>
 
-    <section class="solutions-section px-fixed">
+    <section class="solutions-section">
       <div class="section-header">
         <div class="decorator-bar"></div>
         <div class="section-title">Value Added Solutions</div>
       </div>
       <div class="solutions-content">
+        <div class="solution-image-container">
+          <img
+            src="@/assets/image/768/product-introduction-img1.png"
+            alt="Value Added Solutions"
+            class="solution-image"
+          />
+        </div>
         <div class="solutions-list">
           <div class="solution-item">
             <img
-              src="@/assets/image/1440/product-introduction-icon1.png"
+              src="@/assets/image/768/product-introduction-icon1.png"
               alt="KOL Brand Promotion"
               class="solution-icon"
             />
             <div class="solution-title">
-              <div class="vertical-line px-fixed"></div>
+              <div class="vertical-line"></div>
               KOL Brand Promotion Services
             </div>
             <div class="solution-description">
@@ -125,12 +130,12 @@
           </div>
           <div class="solution-item">
             <img
-              src="@/assets/image/1440/product-introduction-icon2.png"
+              src="@/assets/image/768/product-introduction-icon2.png"
               alt="Content Creation Support"
               class="solution-icon"
             />
             <div class="solution-title">
-              <div class="vertical-line px-fixed"></div>
+              <div class="vertical-line"></div>
               Professional Content Creation Support
             </div>
             <div class="solution-description">
@@ -141,12 +146,12 @@
           </div>
           <div class="solution-item">
             <img
-              src="@/assets/image/1440/product-introduction-icon3.png"
+              src="@/assets/image/768/product-introduction-icon3.png"
               alt="Account Operation"
               class="solution-icon"
             />
             <div class="solution-title">
-              <div class="vertical-line px-fixed"></div>
+              <div class="vertical-line"></div>
               Account Operation and Hosting Services
             </div>
             <div class="solution-description">
@@ -156,84 +161,72 @@
             </div>
           </div>
         </div>
-        <div class="solution-image-container">
-          <img
-            src="@/assets/image/1440/product-introduction-img1.png"
-            alt="Value Added Solutions"
-            class="solution-image"
-            style="width: 434px"
-          />
-        </div>
       </div>
     </section>
 
-    <section class="advantages-section px-fixed">
+    <section class="advantages-section">
-      <div class="advantages-content px-fixed">
+      <div class="advantages-content">
         <div class="advantages-header">
           <div class="decorator-bar"></div>
           <div class="section-title text-white">Our Advantages</div>
         </div>
-
+        <div class="advantages-list">
-        <div style="width: 50%">
+          <div class="advantage-item">
-          <div class="advantages-list">
+            <div class="advantage-title">
-            <div class="advantage-item">
+              <div class="vertical-line"></div>
-              <div class="advantage-title">
+              Time Saving
-                <div class="vertical-line px-fixed"></div>
-                Time Saving
-              </div>
-              <div class="advantage-description">
-                Multi platform publishing efficiency improvement, allowing you
-                to focus on content creation.
-              </div>
             </div>
-
+            <div class="advantage-description">
-            <div class="advantage-item">
+              Multi platform publishing efficiency improvement, allowing you to
-              <div class="advantage-title">
+              focus on content creation.
-                <div class="vertical-line px-fixed"></div>
-                Safe and Reliable
-              </div>
-              <div class="advantage-description">
-                Enterprise level data encryption and permission control ensure
-                account and content security.
-              </div>
             </div>
-            <div class="advantage-item">
+          </div>
-              <div class="advantage-title">
+          <div class="advantage-item">
-                <div class="vertical-line px-fixed"></div>
+            <div class="advantage-title">
-                Maintain Consistency
+              <div class="vertical-line"></div>
-              </div>
+              Safe and Reliable
-              <div class="advantage-description">
-                Ensure that brand information is presented uniformly on all
-                platforms.
-              </div>
             </div>
-            <div class="advantage-item">
+            <div class="advantage-description">
-              <div class="advantage-title">
+              Enterprise level data encryption and permission control ensure
-                <div class="vertical-line px-fixed"></div>
+              account and content security.
-                Data Driven
-              </div>
-              <div class="advantage-description">
-                Optimizing Content Strategies Based on Actual Performance.
-              </div>
             </div>
-            <div class="advantage-item">
+          </div>
-              <div class="advantage-title">
+          <div class="advantage-item">
-                <div class="vertical-line px-fixed"></div>
+            <div class="advantage-title">
-                Easy to Use
+              <div class="vertical-line"></div>
-              </div>
+              Maintain Consistency
-              <div class="advantage-description">
+            </div>
-                Intuitive interface design, no need for professional technical
+            <div class="advantage-description">
-                background.
+              Ensure that brand information is presented uniformly on all
-              </div>
+              platforms.
+            </div>
+          </div>
+          <div class="advantage-item">
+            <div class="advantage-title">
+              <div class="vertical-line"></div>
+              Data Driven
+            </div>
+            <div class="advantage-description">
+              Optimizing Content Strategies Based on Actual Performance.
+            </div>
+          </div>
+          <div class="advantage-item">
+            <div class="advantage-title">
+              <div class="vertical-line"></div>
+              Easy to Use
+            </div>
+            <div class="advantage-description">
+              Intuitive interface design, no need for professional technical
+              background.
             </div>
           </div>
         </div>
       </div>
     </section>
 
-    <section class="cta-section px-fixed">
+    <section class="cta-section">
       <img
-        src="@/assets/image/1440/product-introduction-img5.png"
+        src="@/assets/image/768/product-introduction-img5.png"
         alt="background"
         class="cta-bg-img"
       />
@@ -258,7 +251,7 @@
         </div>
         <div class="cta-qr-code">
           <img
-            src="@/assets/image/1440/product-introduction-img6.png"
+            src="@/assets/image/768/product-introduction-img6.png"
             alt="QR Code"
           />
         </div>
@@ -267,7 +260,7 @@
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .page-container {
   background-color: #fff;
   font-family: "PingFang SC", sans-serif;
@@ -275,10 +268,10 @@
   position: relative;
 }
 
-.hero-section.px-fixed {
+.hero-section {
   text-align: center;
   position: relative;
-  background-image: url("@/assets/image/1440/product-introduction-img3.png");
+  background-image: url("@/assets/image/768/product-introduction-img3.png");
   background-repeat: no-repeat;
   background-size: 100% auto;
   background-position: top;
@@ -290,28 +283,29 @@
 }
 
 .hero-title {
-  font-size: 40px;
+  font-size: 32 * 2.5px;
   font-weight: 500;
-  line-height: 56px;
+  line-height: 56 * 2.5px;
-  letter-spacing: 1.2px;
+  letter-spacing: 1.2 * 2.5px;
-  padding: 153px 0;
+  padding: 153 * 2.5px 0 133 * 2.5px 0;
   color: #000;
   z-index: 2;
 }
 .hero-bg-img {
   position: absolute;
-  bottom: -204px;
+  bottom: -24 * 2.5px;
   left: 0;
   width: 100%;
+  /* height: 100%; */
   z-index: 1;
 }
-.core-value-card.px-fixed {
+.core-value-card {
-  width: 932px;
+  width: 662 * 2.5px;
-  padding: 40px 32px;
+  padding: 40 * 2.5px 32 * 2.5px;
   margin: 0 auto;
   background-color: #fff;
-  border-radius: 16px;
+  border-radius: 16 * 2.5px;
-  box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 * 2.5px 3 * 2.5px 14 * 2.5px 0 * 2.5px rgba(0, 0, 0, 0.16);
   text-align: left;
   z-index: 2;
   position: relative;
@@ -320,204 +314,191 @@
 .card-content {
   display: flex;
   flex-direction: column;
-  gap: 32px;
+  gap: 24 * 2.5px;
 }
 
 .card-title {
-  font-size: 40px;
+  font-size: 40 * 2.5px;
   font-weight: 500;
-  line-height: 56px;
+  line-height: 56 * 2.5px;
-  letter-spacing: 1.2px;
+  letter-spacing: 1.2 * 2.5px;
 }
 
 .card-text {
-  font-size: 16px;
+  font-size: 16 * 2.5px;
-  line-height: 22px;
+  line-height: 22 * 2.5px;
   color: #455363;
-  letter-spacing: 0.48px;
+  letter-spacing: 0.48 * 2.5px;
 }
 
 .section-header {
-  margin-bottom: 32px;
+  margin-bottom: 32 * 2.5px;
-  padding: 0 16px;
+  padding: 0 16 * 2.5px;
 }
 
 .decorator-bar {
-  width: 58px;
+  width: 58 * 2.5px;
-  height: 7px;
+  height: 7 * 2.5px;
   background-color: #ff7bac;
-  margin-bottom: 16px;
+  margin-bottom: 16 * 2.5px;
 }
 
 .section-title {
-  font-size: 40px;
+  font-size: 40 * 2.5px;
   font-weight: 500;
-  line-height: 56px;
+  line-height: 56 * 2.5px;
-  letter-spacing: 1.2px;
+  letter-spacing: 1.2 * 2.5px;
   color: #000;
 }
-.features-section.px-fixed {
+.features-section {
-  padding-top: 200px;
+  padding-top: 100 * 2.5px;
-  width: 932px;
+  width: 662 * 2.5px;
   margin: 0 auto;
 }
 .features-list {
   display: flex;
   flex-direction: column;
-  gap: 32px;
+  gap: 24 * 2.5px;
 }
 
 .feature-item {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 16 * 2.5px;
 }
 
 .feature-title {
-  font-size: 24px;
+  font-size: 24 * 2.5px;
   font-weight: 500;
-  line-height: 32px;
+  line-height: 32 * 2.5px;
-  letter-spacing: 1.2px;
+  letter-spacing: 1.2 * 2.5px;
   display: flex;
   align-items: flex-start;
-  gap: 16px;
+  gap: 16 * 2.5px;
 }
 .feature-description {
-  font-size: 16px;
+  font-size: 16 * 2.5px;
-  line-height: 22px;
+  line-height: 22 * 2.5px;
   color: #455363;
-  letter-spacing: 0.48px;
+  letter-spacing: 0.48 * 2.5px;
-  padding: 0 16px;
+  padding: 0 16 * 2.5px;
-  text-align: justify;
-  font-feature-settings: "liga" off, "clig" off;
 }
 
-.solutions-section.px-fixed {
+.solutions-section {
-  padding-top: 80px;
+  padding-top: 80 * 2.5px;
-  width: 932px;
+  width: 662 * 2.5px;
   margin: 0 auto;
 }
 .solutions-content {
   display: flex;
-  gap: 16px;
+  gap: 32 * 2.5px;
-  align-items: center;
+  flex-direction: column;
+  align-items: stretch;
 }
 .solutions-list {
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: 24 * 2.5px;
-  width: 466px;
+  width: 100%;
 }
 .solution-item {
   text-align: left;
   display: flex;
   flex-direction: column;
-  gap: 14px;
 }
 .solution-icon {
-  width: 92px;
+  width: 92 * 2.5px;
-  height: 76px;
+  height: 76 * 2.5px;
-  padding-left: 16px;
+  padding-left: 16 * 2.5px;
 }
 .solution-title {
   font-family: "PingFang SC";
-  font-size: 24px;
+  font-size: 24 * 2.5px;
   font-style: normal;
   font-weight: 500;
-  line-height: 32px; /* 133.333% */
+  line-height: 32 * 2.5px; /* 133.333% */
-  letter-spacing: 1.2px;
+  letter-spacing: 1.2 * 2.5px;
   display: flex;
-  gap: 16px;
+  gap: 16 * 2.5px;
   align-items: flex-start;
+  margin-bottom: 16 * 2.5px;
 }
 .solution-description {
-  align-self: stretch;
+  font-size: 16 * 2.5px;
+  line-height: 22 * 2.5px;
   color: #455363;
-  padding: 0 16px;
+  letter-spacing: 0.48 * 2.5px;
-
+  padding: 0 16 * 2.5px;
-  text-align: justify;
-  font-feature-settings: "liga" off, "clig" off;
-  /* 正文 */
-  font-family: "PingFang SC";
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 22px; /* 137.5% */
-  letter-spacing: 0.48px;
 }
 .solution-image-container {
-  width: 434px;
+  width: 100%;
-  border-radius: 16px;
+  border-radius: 16 * 2.5px;
-  margin: 0 auto;
-  display: flex;
-  justify-content: center;
-  align-items: center;
 }
 .solution-image {
   width: 100%;
-  height: 100%;
+  height: auto;
   object-fit: cover;
-  border-radius: 16px;
+  border-radius: 16 * 2.5px;
 }
 
-.advantages-section.px-fixed {
+.advantages-section {
-  margin-top: 80px;
+  margin-top: 80 * 2.5px;
-  padding: 80px 0;
+  padding: 80 * 2.5px 0;
-  background-image: url("@/assets/image/1440/product-introduction-img4.png");
+  background-image: url("@/assets/image/768/product-introduction-img4.png");
   background-size: cover;
   background-position: center;
   color: #fff;
   position: relative;
 }
 
-.advantages-content.px-fixed {
+.advantages-content {
-  width: 932px;
+  width: 662 * 2.5px;
   margin: 0 auto;
   display: flex;
-  justify-content: space-between;
+  gap: 16 * 2.5px;
   position: relative;
   z-index: 1;
+  flex-direction: column;
 }
 
 .advantages-header {
-  width: 466px;
+  width: 100%;
-  padding: 0 16px;
+  padding: 0 16 * 2.5px;
 }
 .advantages-list {
-  width: 466px;
+  width: 100%;
   display: flex;
   flex-direction: column;
-  gap: 32px;
+  gap: 24 * 2.5px;
 }
 .advantage-item {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 16 * 2.5px;
 }
 .advantage-title {
-  font-size: 24px;
+  font-size: 24 * 2.5px;
   font-weight: 500;
-  line-height: 32px;
+  line-height: 32 * 2.5px;
-  letter-spacing: 1.2px;
+  letter-spacing: 1.2 * 2.5px;
   display: flex;
-  gap: 16px;
+  gap: 16 * 2.5px;
   align-items: flex-start;
 }
 .advantage-description {
-  font-size: 16px;
+  font-size: 16 * 2.5px;
-  line-height: 22px;
+  line-height: 22 * 2.5px;
-  letter-spacing: 0.48px;
+  letter-spacing: 0.48 * 2.5px;
   opacity: 0.7;
-  padding: 0 16px;
 }
 .text-white {
   color: #fff;
 }
 
-.cta-section.px-fixed {
+.cta-section {
-  padding: 60px 0;
+  padding: 80 * 2.5px 0;
   position: relative;
-  width: 932px;
+  width: 662 * 2.5px;
   margin: 0 auto;
   overflow: hidden;
 }
@@ -525,7 +506,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0 16px;
+  padding: 0 16 * 2.5px;
   position: relative;
   z-index: 1;
 }
@@ -533,24 +514,24 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  height: 188px;
+  height: 188 * 2.5px;
 }
 .cta-arrow {
-  width: 60px;
+  width: 60 * 2.5px;
-  height: 32px;
+  height: 32 * 2.5px;
 }
 .cta-title {
-  font-size: 40px;
+  font-size: 40 * 2.5px;
   font-weight: 500;
-  line-height: 56px;
+  line-height: 56 * 2.5px;
-  letter-spacing: 1.2px;
+  letter-spacing: 1.2 * 2.5px;
 }
 .cta-qr-code {
-  width: 188px;
+  width: 188 * 2.5px;
-  height: 188px;
+  height: 188 * 2.5px;
   background-color: #90ffff;
-  border-radius: 16px;
+  border-radius: 16 * 2.5px;
-  padding: 14px;
+  padding: 14 * 2.5px;
 }
 .cta-qr-code img {
   width: 100%;
@@ -559,27 +540,27 @@
 }
 .cta-bg-img {
   position: absolute;
-  top: 80px;
+  top: 80 * 2.5px;
-  left: 355px;
+  left: 60 * 2.5px;
-  width: 530px;
+  width: 530 * 2.5px;
-  height: 268px;
+  height: 268 * 2.5px;
   opacity: 0.8;
   z-index: 0;
 }
-.vertical-line.px-fixed {
+.vertical-line {
-  width: 1px;
+  width: 1 * 2.5px;
-  height: 16px;
+  height: 20 * 2.5px;
   background: #ff7bac;
   flex-shrink: 0;
-  margin-top: 6px;
+  margin-top: 6 * 2.5px;
 }
 
-.grid-lines.px-fixed {
+.grid-lines {
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
-  width: 932px;
+  width: 662 * 2.5px;
   height: 100%;
   pointer-events: none;
   z-index: 0;
@@ -592,26 +573,26 @@
 }
 
 .grid-lines .line.solid {
-  width: 1px;
+  width: 1 * 2.5px;
   background-color: rgba(0, 0, 0, 0.08);
 }
 
 .grid-lines .line.dashed {
   width: 0;
-  border-left: 1px dotted rgba(0, 0, 0, 0.12);
+  border-left: 1 * 2.5px dotted rgba(0, 0, 0, 0.12);
 }
 
 .grid-lines .line-1 {
   left: 0;
 }
 .grid-lines .line-2 {
-  left: 310px;
+  left: 162.5 * 2.5px;
 }
 .grid-lines .line-3 {
-  left: 620px;
+  left: 325 * 2.5px;
 }
 .grid-lines .line-4 {
-  left: 930px;
+  left: 487.5 * 2.5px;
 }
 .grid-lines .line-5 {
   right: 0;