fix(mobile): 修复移动端样式单位不一致和图片尺寸问题

- 删除未使用的 mobile/products/dns.vue 页面
- 统一 CSS 单位：将 PX 改为 px 确保响应式兼容性
- 将内联图片尺寸移至 CSS 类中，提高维护性
- 修复 Flowchart 组件中的类名和样式一致性

app/components/mobile/home/Flowchart.vue

@@ -7,7 +7,7 @@
       <User text="... ..." :src="user4Icon" :tail-src="user4Tail" class="user4" />
     </div>
     <div class="flowchart-arrow">
-      <img width="148" class="arrow1" src="~/assets/svg/home/arrow.svg" alt="arrow" />
+      <img class="arrow" src="~/assets/svg/home/arrow.svg" alt="arrow" />
       <div class="text1 text-box">浏览器域名</div>
       <div class="text2 text-box">DNS引流</div>
       <div class="text3 text-box">SDK引流</div>
@@ -25,7 +25,7 @@
         </div>
       </div>
       <div class="block-arrow1">
-        <img width="14" height="20" src="~/assets/svg/home/arrow1.svg" alt="arrow1">
+        <img class="arrow1" src="~/assets/svg/home/arrow1.svg" alt="arrow1">
       </div>
       <div class="block-yun">
         <div class="block-title">
@@ -99,8 +99,8 @@
           <img class="right-img" src="~/assets/svg/home/arrow6.svg" alt="arrow6 " />
         </div>
         <div class="right-server">
-          <img width="72" height="56" class="server-img" src="~/assets/svg/home/server.svg" alt="server" />
-          <img width="14" class="arrow4" src="~/assets/svg/home/arrow4.svg" alt="arrow4">
+          <img class="server-img" src="~/assets/svg/home/server.svg" alt="server" />
+          <img  class="arrow4" src="~/assets/svg/home/arrow4.svg" alt="arrow4">
         </div>
         <div class="server-text">
           源服务器
@@ -121,7 +121,7 @@ import user4Tail from '~/assets/svg/home/user4-tail.svg'
 </script>
 <style lang="scss" scoped>
 .h5-flowchart-container {
-  width: 343PX;
+  width: 343px;
   position: relative;
   box-sizing: border-box;
   margin: 0 auto;
@@ -132,20 +132,20 @@ import user4Tail from '~/assets/svg/home/user4-tail.svg'
     .user1 {
       position: absolute;
       top: 0;
-      left: 75PX;
+      left: 75px;
       z-index: 1;
     }
 
     .user2 {
       position: absolute;
       top: 0;
-      right: 112PX;
+      right: 112px;
     }
 
     .user3 {
       position: absolute;
       top: 0;
-      right: 56PX;
+      right: 56px;
     }
 
     .user4 {
@@ -159,13 +159,14 @@ import user4Tail from '~/assets/svg/home/user4-tail.svg'
   .flowchart-arrow {
     position: relative;
     color: #FFF;
-    font-size: 10PX;
+    font-size: 10px;
     font-weight: 400;
 
-    .arrow1 {
+    .arrow {
       position: absolute;
-      top: 35PX;
-      left: 26PX;
+      width: 148px;
+      top: 35px;
+      left: 26px;
       z-index: 0;
     }
 
@@ -174,79 +175,79 @@ import user4Tail from '~/assets/svg/home/user4-tail.svg'
       display: flex;
       justify-content: center;
       align-items: center;
-      border-radius: 3PX;
-      border: 1PX solid #8457FF;
+      border-radius: 3px;
+      border: 1px solid #8457FF;
       background: #3F327D;
     }
 
     .text1 {
       left: 0;
-      top: 70PX;
-      width: 88PX;
-      height: 20PX;
+      top: 70px;
+      width: 88px;
+      height: 20px;
     }
 
     .text2 {
-      left: 6PX;
-      top: 102PX;
-      width: 65PX;
-      height: 18PX;
+      left: 6px;
+      top: 102px;
+      width: 65px;
+      height: 18px;
     }
 
     .text3 {
-      left: 142PX;
-      top: 104PX;
-      width: 52PX;
-      height: 17PX;
+      left: 142px;
+      top: 104px;
+      width: 52px;
+      height: 17px;
     }
 
     .text4 {
       right: 0;
-      top: 56PX;
-      width: 159PX;
-      height: 34PX;
+      top: 56px;
+      width: 159px;
+      height: 34px;
     }
   }
 
   .block-title {
     width: 100%;
-    height: 20PX;
+    height: 20px;
     background: rgba(128, 119, 255, 0.50);
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: 12PX;
+    font-size: 12px;
     color: #FFF;
     font-weight: 400;
   }
 
   .flowchart-block {
     width: 100%;
-    padding-top: 138PX;
+    padding-top: 138px;
 
     .block-ads {
       width: 100%;
-      border-radius: 4PX;
-      border: 1PX solid #8B74FF;
+      border-radius: 4px;
+      border: 1px solid #8B74FF;
       background: rgba(63, 51, 125, 0.30);
       color: #FFF;
       font-weight: 400;
-      line-height: 6PX;
+      line-height: 6px;
 
       .ads-contnet {
-        font-size: 10PX;
-        height: 40PX;
+        font-size: 10px;
+        height: 40px;
         display: flex;
         align-items: center;
         justify-content: space-around;
 
         .ads-text {
           display: flex;
-          width: 99PX;
-          height: 20PX;
+          width: 99px;
+          height: 20px;
           justify-content: center;
           align-items: center;
-          border-radius: 3PX;
+          border-radius: 3px;
           background: rgba(139, 116, 255, 0.50);
         }
       }
@@ -256,8 +257,8 @@ import user4Tail from '~/assets/svg/home/user4-tail.svg'
 
     .block-yun {
       width: 100%;
-      border-radius: 4PX;
-      border: 1PX solid #8077FF;
+      border-radius: 4px;
+      border: 1px solid #8077FF;
       background: rgba(63, 51, 125, 0.30);
     }
 
@@ -265,18 +266,18 @@ import user4Tail from '~/assets/svg/home/user4-tail.svg'
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
-      gap: 8PX;
-      padding: 8PX 0;
+      gap: 8px;
+      padding: 8px 0;
       position: relative;
 
 
       .yun-item {
-        border-radius: 4PX;
+        border-radius: 4px;
         background: rgba(139, 116, 255, 0.50);
         display: flex;
         flex-direction: column;
-        width: 160PX;
-        padding: 6PX;
+        width: 160px;
+        padding: 6px;
         box-sizing: border-box;
         position: relative;
         z-index: 1;
@@ -313,47 +314,49 @@ import user4Tail from '~/assets/svg/home/user4-tail.svg'
     .footer-text {
       position: absolute;
       display: flex;
-      width: 80PX;
-      height: 18PX;
+      width: 80px;
+      height: 18px;
       justify-content: center;
       align-items: center;
-      border-radius: 2PX;
-      border: 1PX solid #CBC9FF;
+      border-radius: 2px;
+      border: 1px solid #CBC9FF;
       background: #3F337D;
-      box-shadow: 0 5.5PX 10PX 0 rgba(181, 179, 227, 0.30);
+      box-shadow: 0 5.5px 10px 0 rgba(181, 179, 227, 0.30);
       color: #FFF;
-      font-size: 12PX;
+      font-size: 12px;
       font-weight: 400;
       z-index: 1;
     }
 
     .left-text {
-      top: 16PX;
-      left: 128PX;
+      top: 16px;
+      left: 128px;
     }
 
     .right-text {
-      top: 61PX;
-      left: 9PX;
+      top: 61px;
+      left: 9px;
     }
   }
 
   .footer-left {
-    width: 254PX;
+    width: 254px;
 
     .left-top {
       position: relative;
 
       .top-img {
         position: relative;
-        left: 156PX;
+        width: 14px;
+        height: 60px;
+        left: 156px;
       }
     }
 
     .left-content {
       width: 100%;
-      border-radius: 4PX;
-      border: 1PX solid #8077FF;
+      border-radius: 4px;
+      border: 1px solid #8077FF;
       background: rgba(63, 51, 125, 0.30);
       display: flex;
       flex-direction: column;
@@ -361,29 +364,29 @@ import user4Tail from '~/assets/svg/home/user4-tail.svg'
 
       .center-content {
         flex: 1;
-        padding: 6PX 10PX 17PX;
+        padding: 6px 10px 17px;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
-        gap: 6PX;
+        gap: 6px;
 
         .center-row {
           display: flex;
           justify-content: space-between;
-          gap: 6PX;
+          gap: 6px;
           width: 100%;
         }
 
         .center-item {
           display: flex;
-          width: 236PX;
+          width: 236px;
           background: rgba(139, 116, 255, 0.50);
-          border-radius: 10PX;
+          border-radius: 10px;
           flex-direction: column;
           justify-content: center;
           box-sizing: border-box;
-          padding:2PX 6PX;
-          gap: 2PX;
+          padding: 2px 6px;
+          gap: 2px;
 
           &.half {
             width: 114px;
@@ -395,13 +398,13 @@ import user4Tail from '~/assets/svg/home/user4-tail.svg'
 
           .item-title {
             color: #FFF;
-            font-size: 12PX;
+            font-size: 12px;
             font-weight: 700;
           }
 
           .item-desc {
             color: #FFF;
-            font-size: 10PX;
+            font-size: 10px;
             font-weight: 400;
           }
         }
@@ -410,7 +413,7 @@ import user4Tail from '~/assets/svg/home/user4-tail.svg'
   }
 
   .footer-right {
-    width: 89PX;
+    width: 89px;
 
     .right-top {
       position: relative;
@@ -418,7 +421,9 @@ import user4Tail from '~/assets/svg/home/user4-tail.svg'
 
     .right-img {
       position: relative;
-      left: 40PX;
+      width: 14px;
+      height: 196px;
+      left: 40px;
     }
 
     .right-server {
@@ -428,30 +433,38 @@ import user4Tail from '~/assets/svg/home/user4-tail.svg'
     .arrow4 {
       position: absolute;
       left: 0;
-      top: 34PX;
+      width: 14px;
+      top: 34px;
     }
 
     .server-img {
       position: relative;
-      left: 9PX;
+      width: 72px;
+      height: 56px;
+      left: 9px;
       z-index: 1;
     }
 
     .server-text {
       display: flex;
-      width: 80PX;
-      height: 24PX;
+      width: 80px;
+      height: 24px;
       justify-content: center;
       align-items: center;
-      border-radius: 2PX;
-      border: 1PX solid #CBC9FF;
+      border-radius: 2px;
+      border: 1px solid #CBC9FF;
       background: #3F337D;
-      box-shadow: 0 5.5PX 10PX 0 rgba(181, 179, 227, 0.30);
+      box-shadow: 0 5.5px 10px 0 rgba(181, 179, 227, 0.30);
       color: #FFF;
-      font-size: 12PX;
+      font-size: 12px;
       font-weight: 400;
-      margin: 24PX 0 0 8PX;
+      margin: 24px 0 0 8px;
     }
   }
+
+  .arrow1 {
+    width: 14px;
+    height: 20px;
+  }
 }
 </style>

app/components/mobile/home/User.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="h5-user-item">
-    <img width="22" :src="src" class="user1-img" alt="user" />
+    <img :src="src" class="user1-img" alt="user" />
     <div class="user1-text">{{ text }}</div>
     <img v-if="tailSrc" class="user-tail" :src="tailSrc" alt="user" aria-hidden="true" />
   </div>
@@ -33,27 +33,30 @@ const props = defineProps({
   justify-content: center;
   align-items: center;
 
+  .user1-img {
+    width: 22px;
+  }
 
   .user1-text {
     display: flex;
-    width: 46PX;
-    height: 15PX;
+    width: 46px;
+    height: 15px;
     justify-content: center;
     align-items: center;
     align-self: stretch;
-    border-radius: 4PX;
-    border: 1PX solid #A39DFF;
+    border-radius: 4px;
+    border: 1px solid #A39DFF;
     background: #3F337D;
     color: #FFF;
-    font-size: 10PX;
+    font-size: 10px;
     font-weight: 400;
-    line-height: 10PX;
+    line-height: 10px;
   }
 
   .user-tail {
     position: absolute;
-    width: 3PX;
-    height: 30PX;
+    width: 3px;
+    height: 30px;
     top: 100%;
     right: 48%;
     transform: translateX(-50%);

app/pages/mobile/products/dns.vue

@@ -1,26 +0,0 @@
-<template>
-  <div class="mobile-product">
-    <h1>DNS 全球解析</h1>
-  </div>
-</template>
-
-<script setup>
-useHead(() => ({
-  title: 'DNS全球解析 - 移动端',
-  meta: [
-    { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' }
-  ]
-}))
-</script>
-
-<style scoped lang="scss">
-.mobile-product {
-  color: #fff;
-  text-align: center;
-  padding-top: 60px;
-
-  h1 {
-    font-size: 24px;
-  }
-}
-</style>

app/pages/web/products/dns.vue

@@ -1,7 +0,0 @@
-<template>
-
-</template>
-<script setup>
-
-</script>
-<style lang="scss" scoped></style>