소스 검색

style(products): 统一CSS单位从PX改为px

修改产品介绍和案例卡片组件中的CSS单位,将所有PX单位替换为小写px以保持一致性
reaper 4 주 전
부모
커밋
c7ad80c30b
2개의 변경된 파일38개의 추가작업 그리고 38개의 파일을 삭제
  1. 27 27
      app/components/products/CaseCard.vue
  2. 11 11
      app/components/products/Introduction.vue

+ 27 - 27
app/components/products/CaseCard.vue

@@ -71,24 +71,24 @@ const cases = [
 .case-container {
   position: relative;
   width: 100%;
-  height: 800PX;
+  height: 800px;
   background: url('/images/products/case-bg.png') no-repeat center;
   background-size: cover;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 140PX;
+  margin-bottom: 140px;
 
   &::before {
     position: absolute;
     content: '应用场景';
-    top: -45PX;
+    top: -45px;
     left: 50%;
     transform: translateX(-50%);
-    font-size: 45PX;
+    font-size: 45px;
     font-style: normal;
     font-weight: 500;
-    line-height: 45PX;
+    line-height: 45px;
     background: linear-gradient(91deg, #B8AFFF 10.8%, #C597FF 108.3%);
     background-clip: text;
     -webkit-background-clip: text;
@@ -97,41 +97,41 @@ const cases = [
 
   .case-cards {
     width: 100%;
-    max-width: 1200PX;
-    margin-top: 60PX;
+    max-width: 1200px;
+    margin-top: 60px;
   }
 
   .card-content {
     display: flex;
-    gap: 80PX;
+    gap: 80px;
     align-items: flex-start;
   }
 
   .tabs-list {
     display: flex;
     flex-direction: column;
-    gap: 24PX;
-    width: 224PX;
+    gap: 24px;
+    width: 224px;
     flex-shrink: 0;
   }
 
   .tab-item {
-    height: 72PX;
+    height: 72px;
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 8PX;
-    border: 1PX solid rgba(255, 255, 255, 0.20);
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.20);
     background: rgba(255, 255, 255, 0.10);
     color: rgba(255, 255, 255, 0.60);
     ;
     cursor: pointer;
-    font-size: 26PX;
+    font-size: 26px;
     font-weight: 400;
-    line-height: 26PX;
+    line-height: 26px;
 
     &:hover {
-      border-radius: 8PX;
+      border-radius: 8px;
       background: linear-gradient(91deg, #A39DFF 1.24%, #7D46FF 122.93%);
     }
 
@@ -145,46 +145,46 @@ const cases = [
   .tab-content {
     flex: 1;
     color: #fff;
-    height: 500PX; // Fixed height to prevent jitter
+    height: 500px; // Fixed height to prevent jitter
   }
 
   .content-wrapper {
     display: flex;
     align-items: stretch;
     /* 让左右两列在高度上保持一致(无 JS) */
-    gap: 36PX;
+    gap: 36px;
   }
 
   .text-content {
-    width: 540PX;
+    width: 540px;
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
-    gap: 18PX;
+    gap: 18px;
     justify-content: center;
 
     .title {
-      font-size: 36PX;
+      font-size: 36px;
       font-weight: 500;
     }
 
     .description {
-      font-size: 18PX;
+      font-size: 18px;
       font-weight: 400;
-      line-height: 36PX;
-      margin-bottom: 38PX;
+      line-height: 36px;
+      margin-bottom: 38px;
     }
 
 
     .value-desc {
-      font-size: 18PX;
+      font-size: 18px;
       font-weight: 400;
-      line-height: 36PX;
+      line-height: 36px;
     }
   }
 
   .image-content {
-    max-width: 540PX;
+    max-width: 540px;
     display: flex;
     align-items: center;
     justify-content: center;

+ 11 - 11
app/components/products/Introduction.vue

@@ -39,33 +39,33 @@
   display: flex;
   position: relative;
   width: 100%;
-  max-width: 1200PX;
-  margin: -64PX auto 0;
-  padding: 64PX 48PX 110PX 48PX;
+  max-width: 1200px;
+  margin: -64px auto 0;
+  padding: 64px 48px 110px 48px;
   box-sizing: border-box;
-  border-radius: 20PX;
+  border-radius: 20px;
   background: url("/images/products/text-bg.png") no-repeat center center;
   z-index: 3;
   justify-content: space-between;
-  gap: 35PX;
+  gap: 35px;
 
 }
 
 .intr-title {
   color: #EADBFF;
-  font-size: 54PX;
+  font-size: 54px;
   font-style: normal;
   font-weight: 700;
-  line-height: 58PX;
+  line-height: 58px;
 }
 
 .intr-description {
-  margin-top: 14PX;
-  width: 218PX;
+  margin-top: 14px;
+  width: 218px;
   color: rgba(222, 200, 255, 0.50);
-  font-size: 16PX;
+  font-size: 16px;
   font-style: normal;
   font-weight: 400;
-  line-height: 22.937PX;
+  line-height: 22.937px;
 }
 </style>