From bbc63346a16d42c59b093fca3927458e372b38a5 Mon Sep 17 00:00:00 2001
From: yuanshan <42023847+piercezzs@users.noreply.github.com>
Date: Tue, 14 Oct 2025 17:16:36 +0800
Subject: [PATCH] fix product-introduction 1440

---
 postcss.config.js                             |   2 +-
 .../product-introduction/size1440/index.vue   | 259 +++++++++---------
 2 files changed, 130 insertions(+), 131 deletions(-)

diff --git a/postcss.config.js b/postcss.config.js
index bc2e378..5762702 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -37,7 +37,7 @@ export default {
         customPxToViewportPlugin({
             defaultViewportWidth:1920,
             unitPrecision: 5, // 保留的小数位数
-            selectorBlackList: [/^\.van/, '.px-fixed'], // 以 .van 开头的类名不转换
+            selectorBlackList: [/^\.van/], // 以 .van 开头的类名不转换
             minPixelValue: 1, // 小于或等于 1px 不转换
             viewportUnit: "vw", // 转换后的单位
             fontViewportUnit: "vw", // 字体单位
diff --git a/src/views/product-introduction/size1440/index.vue b/src/views/product-introduction/size1440/index.vue
index 315dab6..859a442 100644
--- a/src/views/product-introduction/size1440/index.vue
+++ b/src/views/product-introduction/size1440/index.vue
@@ -2,14 +2,14 @@
 
 <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 />
@@ -18,7 +18,7 @@
           publishing, analysis, and 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">
@@ -39,7 +39,7 @@
       />
     </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 +47,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 +57,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 +67,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 +78,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 +88,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,7 +100,7 @@
       </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>
@@ -114,7 +114,7 @@
               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">
@@ -130,7 +130,7 @@
               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">
@@ -146,7 +146,7 @@
               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">
@@ -161,14 +161,13 @@
             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">
-      <div class="advantages-content px-fixed">
+    <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>
@@ -178,7 +177,7 @@
           <div class="advantages-list">
             <div class="advantage-item">
               <div class="advantage-title">
-                <div class="vertical-line px-fixed"></div>
+                <div class="vertical-line"></div>
                 Time Saving
               </div>
               <div class="advantage-description">
@@ -189,7 +188,7 @@
 
             <div class="advantage-item">
               <div class="advantage-title">
-                <div class="vertical-line px-fixed"></div>
+                <div class="vertical-line"></div>
                 Safe and Reliable
               </div>
               <div class="advantage-description">
@@ -199,7 +198,7 @@
             </div>
             <div class="advantage-item">
               <div class="advantage-title">
-                <div class="vertical-line px-fixed"></div>
+                <div class="vertical-line"></div>
                 Maintain Consistency
               </div>
               <div class="advantage-description">
@@ -209,7 +208,7 @@
             </div>
             <div class="advantage-item">
               <div class="advantage-title">
-                <div class="vertical-line px-fixed"></div>
+                <div class="vertical-line"></div>
                 Data Driven
               </div>
               <div class="advantage-description">
@@ -218,7 +217,7 @@
             </div>
             <div class="advantage-item">
               <div class="advantage-title">
-                <div class="vertical-line px-fixed"></div>
+                <div class="vertical-line"></div>
                 Easy to Use
               </div>
               <div class="advantage-description">
@@ -231,7 +230,7 @@
       </div>
     </section>
 
-    <section class="cta-section px-fixed">
+    <section class="cta-section">
       <img
         src="@/assets/image/1440/product-introduction-img5.png"
         alt="background"
@@ -267,7 +266,7 @@
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .page-container {
   background-color: #fff;
   font-family: "PingFang SC", sans-serif;
@@ -275,7 +274,7 @@
   position: relative;
 }
 
-.hero-section.px-fixed {
+.hero-section {
   text-align: center;
   position: relative;
   background-image: url("@/assets/image/1440/product-introduction-img3.png");
@@ -290,28 +289,28 @@
 }
 
 .hero-title {
-  font-size: 40px;
+  font-size: 40 * 1.33px;
   font-weight: 500;
-  line-height: 56px;
-  letter-spacing: 1.2px;
-  padding: 153px 0;
+  line-height: 56 * 1.33px;
+  letter-spacing: 1.2 * 1.33px;
+  padding: 153 * 1.33px 0;
   color: #000;
   z-index: 2;
 }
 .hero-bg-img {
   position: absolute;
-  bottom: -204px;
+  bottom: -204 * 1.33px;
   left: 0;
   width: 100%;
   z-index: 1;
 }
-.core-value-card.px-fixed {
-  width: 932px;
-  padding: 40px 32px;
+.core-value-card {
+  width: 932 * 1.33px;
+  padding: 40 * 1.33px 32 * 1.33px;
   margin: 0 auto;
   background-color: #fff;
-  border-radius: 16px;
-  box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.16);
+  border-radius: 16 * 1.33px;
+  box-shadow: 0 * 1.33px 3 * 1.33px 14 * 1.33px 0 * 1.33px rgba(0, 0, 0, 0.16);
   text-align: left;
   z-index: 2;
   position: relative;
@@ -320,134 +319,134 @@
 .card-content {
   display: flex;
   flex-direction: column;
-  gap: 32px;
+  gap: 32 * 1.33px;
 }
 
 .card-title {
-  font-size: 40px;
+  font-size: 40 * 1.33px;
   font-weight: 500;
-  line-height: 56px;
-  letter-spacing: 1.2px;
+  line-height: 56 * 1.33px;
+  letter-spacing: 1.2 * 1.33px;
 }
 
 .card-text {
-  font-size: 16px;
-  line-height: 22px;
+  font-size: 16 * 1.33px;
+  line-height: 22 * 1.33px;
   color: #455363;
-  letter-spacing: 0.48px;
+  letter-spacing: 0.48 * 1.33px;
 }
 
 .section-header {
-  margin-bottom: 32px;
-  padding: 0 16px;
+  margin-bottom: 32 * 1.33px;
+  padding: 0 16 * 1.33px;
 }
 
 .decorator-bar {
-  width: 58px;
-  height: 7px;
+  width: 58 * 1.33px;
+  height: 7 * 1.33px;
   background-color: #ff7bac;
-  margin-bottom: 16px;
+  margin-bottom: 16 * 1.33px;
 }
 
 .section-title {
-  font-size: 40px;
+  font-size: 40 * 1.33px;
   font-weight: 500;
-  line-height: 56px;
-  letter-spacing: 1.2px;
+  line-height: 56 * 1.33px;
+  letter-spacing: 1.2 * 1.33px;
   color: #000;
 }
-.features-section.px-fixed {
-  padding-top: 200px;
-  width: 932px;
+.features-section {
+  padding-top: 102 * 1.33px;
+  width: 932 * 1.33px;
   margin: 0 auto;
 }
 .features-list {
   display: flex;
   flex-direction: column;
-  gap: 32px;
+  gap: 24 * 1.33px;
 }
 
 .feature-item {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 16 * 1.33px;
 }
 
 .feature-title {
-  font-size: 24px;
+  font-size: 24 * 1.33px;
   font-weight: 500;
-  line-height: 32px;
-  letter-spacing: 1.2px;
+  line-height: 32 * 1.33px;
+  letter-spacing: 1.2 * 1.33px;
   display: flex;
   align-items: flex-start;
-  gap: 16px;
+  gap: 16 * 1.33px;
 }
 .feature-description {
-  font-size: 16px;
-  line-height: 22px;
+  font-size: 16 * 1.33px;
+  line-height: 22 * 1.33px;
   color: #455363;
-  letter-spacing: 0.48px;
-  padding: 0 16px;
+  letter-spacing: 0.48 * 1.33px;
+  padding: 0 16 * 1.33px;
   text-align: justify;
   font-feature-settings: "liga" off, "clig" off;
 }
 
-.solutions-section.px-fixed {
-  padding-top: 80px;
-  width: 932px;
+.solutions-section {
+  padding-top: 80 * 1.33px;
+  width: 932 * 1.33px;
   margin: 0 auto;
 }
 .solutions-content {
   display: flex;
-  gap: 16px;
+  gap: 16 * 1.33px;
   align-items: center;
 }
 .solutions-list {
   display: flex;
   flex-direction: column;
-  gap: 24px;
-  width: 466px;
+  gap: 24 * 1.33px;
+  width: 466 * 1.33px;
 }
 .solution-item {
   text-align: left;
   display: flex;
   flex-direction: column;
-  gap: 14px;
+  gap: 16 * 1.33px;
 }
 .solution-icon {
-  width: 92px;
-  height: 76px;
-  padding-left: 16px;
+  width: 76 * 1.33px;
+  height: 76 * 1.33px;
+  margin-left: 16 * 1.33px;
 }
 .solution-title {
   font-family: "PingFang SC";
-  font-size: 24px;
+  font-size: 24 * 1.33px;
   font-style: normal;
   font-weight: 500;
-  line-height: 32px; /* 133.333% */
-  letter-spacing: 1.2px;
+  line-height: 32 * 1.33px; /* 133.333% */
+  letter-spacing: 1.2 * 1.33px;
   display: flex;
-  gap: 16px;
+  gap: 16 * 1.33px;
   align-items: flex-start;
 }
 .solution-description {
   align-self: stretch;
   color: #455363;
-  padding: 0 16px;
+  padding: 0 16 * 1.33px;
 
   text-align: justify;
   font-feature-settings: "liga" off, "clig" off;
   /* 正文 */
   font-family: "PingFang SC";
-  font-size: 16px;
+  font-size: 16 * 1.33px;
   font-style: normal;
   font-weight: 400;
-  line-height: 22px; /* 137.5% */
-  letter-spacing: 0.48px;
+  line-height: 22 * 1.33px; /* 137.5% */
+  letter-spacing: 0.48 * 1.33px;
 }
 .solution-image-container {
-  width: 434px;
-  border-radius: 16px;
+  width: 434 * 1.33px;
+  border-radius: 16 * 1.33px;
   margin: 0 auto;
   display: flex;
   justify-content: center;
@@ -457,12 +456,12 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
-  border-radius: 16px;
+  border-radius: 16 * 1.33px;
 }
 
-.advantages-section.px-fixed {
-  margin-top: 80px;
-  padding: 80px 0;
+.advantages-section {
+  margin-top: 80 * 1.33px;
+  padding: 80 * 1.33px 0;
   background-image: url("@/assets/image/1440/product-introduction-img4.png");
   background-size: cover;
   background-position: center;
@@ -470,8 +469,8 @@
   position: relative;
 }
 
-.advantages-content.px-fixed {
-  width: 932px;
+.advantages-content {
+  width: 932 * 1.33px;
   margin: 0 auto;
   display: flex;
   justify-content: space-between;
@@ -480,44 +479,44 @@
 }
 
 .advantages-header {
-  width: 466px;
-  padding: 0 16px;
+  width: 466 * 1.33px;
+  padding: 0 16 * 1.33px;
 }
 .advantages-list {
-  width: 466px;
+  width: 466 * 1.33px;
   display: flex;
   flex-direction: column;
-  gap: 32px;
+  gap: 24 * 1.33px;
 }
 .advantage-item {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 16 * 1.33px;
 }
 .advantage-title {
-  font-size: 24px;
+  font-size: 24 * 1.33px;
   font-weight: 500;
-  line-height: 32px;
-  letter-spacing: 1.2px;
+  line-height: 32 * 1.33px;
+  letter-spacing: 1.2 * 1.33px;
   display: flex;
-  gap: 16px;
+  gap: 16 * 1.33px;
   align-items: flex-start;
 }
 .advantage-description {
-  font-size: 16px;
-  line-height: 22px;
-  letter-spacing: 0.48px;
+  font-size: 16 * 1.33px;
+  line-height: 22 * 1.33px;
+  letter-spacing: 0.48 * 1.33px;
   opacity: 0.7;
-  padding: 0 16px;
+  padding: 0 16 * 1.33px;
 }
 .text-white {
   color: #fff;
 }
 
-.cta-section.px-fixed {
-  padding: 60px 0;
+.cta-section {
+  padding: 80 * 1.33px 0;
   position: relative;
-  width: 932px;
+  width: 932 * 1.33px;
   margin: 0 auto;
   overflow: hidden;
 }
@@ -525,7 +524,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0 16px;
+  padding: 0 16 * 1.33px;
   position: relative;
   z-index: 1;
 }
@@ -533,24 +532,24 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  height: 188px;
+  height: 188 * 1.33px;
 }
 .cta-arrow {
-  width: 60px;
-  height: 32px;
+  width: 60 * 1.33px;
+  height: 32 * 1.33px;
 }
 .cta-title {
-  font-size: 40px;
+  font-size: 40 * 1.33px;
   font-weight: 500;
-  line-height: 56px;
-  letter-spacing: 1.2px;
+  line-height: 56 * 1.33px;
+  letter-spacing: 1.2 * 1.33px;
 }
 .cta-qr-code {
-  width: 188px;
-  height: 188px;
+  width: 188 * 1.33px;
+  height: 188 * 1.33px;
   background-color: #90ffff;
-  border-radius: 16px;
-  padding: 14px;
+  border-radius: 16 * 1.33px;
+  padding: 14 * 1.33px;
 }
 .cta-qr-code img {
   width: 100%;
@@ -559,27 +558,27 @@
 }
 .cta-bg-img {
   position: absolute;
-  top: 80px;
-  left: 355px;
-  width: 530px;
-  height: 268px;
+  top: 0;
+  left: 201 * 1.33px;
+  width: 530 * 1.33px;
+  height: 268 * 1.33px;
   opacity: 0.8;
   z-index: 0;
 }
-.vertical-line.px-fixed {
-  width: 1px;
-  height: 16px;
+.vertical-line {
+  width: 1 * 1.33px;
+  height: 16 * 1.33px;
   background: #ff7bac;
   flex-shrink: 0;
-  margin-top: 6px;
+  margin-top: 6 * 1.33px;
 }
 
-.grid-lines.px-fixed {
+.grid-lines {
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
-  width: 932px;
+  width: 932 * 1.33px;
   height: 100%;
   pointer-events: none;
   z-index: 0;
@@ -592,26 +591,26 @@
 }
 
 .grid-lines .line.solid {
-  width: 1px;
+  width: 1 * 1.33px;
   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 * 1.33px dotted rgba(0, 0, 0, 0.12);
 }
 
 .grid-lines .line-1 {
   left: 0;
 }
 .grid-lines .line-2 {
-  left: 310px;
+  left: 234 * 1.33px;
 }
 .grid-lines .line-3 {
-  left: 620px;
+  left: 468 * 1.33px;
 }
 .grid-lines .line-4 {
-  left: 930px;
+  left: 702 * 1.33px;
 }
 .grid-lines .line-5 {
   right: 0;