refactor(styles): 统一CSS单位格式并重构组件类名前缀

- 将px单位统一改为大写PX格式
- 为移动端组件添加mb-前缀以区分
- 移除过时的IE兼容样式
- 优化样式命名规范保持一致性

app/assets/scss/main.scss

@@ -93,9 +93,6 @@ table {
   clear: both;
 }
 
-.clearfix {
-  *zoom: 1; /*IE/7/6*/
-}
 
 h1,
 h2,

app/components/mobile/products/Introduction.vue

@@ -1,41 +1,41 @@
 <template>
-  <section class="intr-container">
+  <section class="mb-intr-container">
     <div>
-      <p class="intr-title">
+      <p class="mb-intr-title">
         1800+
       </p>
-      <p class="intr-description">
-        实用至上-全球 1800+ 边缘哨兵帮你的游戏“开挂”
+      <p class="mb-intr-description">
+        实用至上 - 全球 1800+ 边缘哨兵帮你的游戏"开挂"
       </p>
     </div>
     <div>
-      <p class="intr-title">
+      <p class="mb-intr-title">
         1.5T
       </p>
-      <p class="intr-description">
+      <p class="mb-intr-description">
         抗打峰值：1.5 Tbps，单日轻松吃掉 5 万次 DDoS 攻击
       </p>
     </div>
     <div>
-      <p class="intr-title">
+      <p class="mb-intr-title">
         10Min
       </p>
-      <p class="intr-description">
+      <p class="mb-intr-description">
         不拆架构、不动服务器、不写一条 waf 防御规则，老项目也能 10 分钟老兵新枪
       </p>
     </div>
     <div>
-      <p class="intr-title">
+      <p class="mb-intr-title">
         99.999%
       </p>
-      <p class="intr-description">
+      <p class="mb-intr-description">
         99.999% 可用性，全年停机时间< 5 分钟 </p>
     </div>
   </section>
 </template>
 <script setup></script>
 <style lang="scss" scoped>
-.intr-container {
+.mb-intr-container {
   margin-top: 40px;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -51,13 +51,13 @@
   z-index: 3;
 }
 
-.intr-title {
+.mb-intr-title {
   color: #EADBFF;
   font-size: 18px;
   font-weight: 700;
 }
 
-.intr-description {
+.mb-intr-description {
   margin-top: 4px;
   color: rgba(222, 200, 255, 0.50);
   font-size: 10px;

app/components/mobile/products/SecurityServicesSuite.vue

@@ -1,29 +1,29 @@
 <template>
-  <section class="service-container">
-    <div class="service-content">
+  <section class="mb-service-container">
+    <div class="mb-service-content">
       <h2>为您定制的企业级安全服务包</h2>
-      <div class="service-cards">
-        <div v-for="(item, index) in products" :key="index" class="service-card">
-          <div class="card-title">{{ item.title }}</div>
+      <div class="mb-service-cards">
+        <div v-for="(item, index) in products" :key="index" class="mb-service-card">
+          <div class="mb-card-title">{{ item.title }}</div>
           <template v-if="item.price">
-            <div class="card-price">
-              <span class="amount">${{ item.price }}</span>
-              <span class="unit">{{ item.unit }}</span>
+            <div class="mb-card-price">
+              <span class="mb-amount">${{ item.price }}</span>
+              <span class="mb-unit">{{ item.unit }}</span>
             </div>
-            <div class="payment-support">
+            <div class="mb-payment-support">
               支持 <img src="/images/products/icon.png" alt="icon"> 支付
             </div>
           </template>
           <template v-else>
-            <div class="customized-icon">
+            <div class="mb-customized-icon">
               <NuxtImg src="/images/products/customized.png" alt="定制" />
             </div>
           </template>
-          <div class="action-btn">{{ item.btnText }}</div>
-          <div class="features-list">
-            <div v-for="(feature, idx) in item.features" :key="idx" class="feature-item">
-              <span class="label">{{ feature.label }}</span>
-              <span class="value">{{ feature.value }}</span>
+          <div class="mb-action-btn">{{ item.btnText }}</div>
+          <div class="mb-features-list">
+            <div v-for="(feature, idx) in item.features" :key="idx" class="mb-feature-item">
+              <span class="mb-label">{{ feature.label }}</span>
+              <span class="mb-value">{{ feature.value }}</span>
             </div>
           </div>
         </div>
@@ -39,14 +39,14 @@ const products = [
     unit: '/月',
     btnText: '立即开通',
     features: [
-      { label: 'DDoS防护值', value: '150Gbps' },
-      { label: 'CC防御值', value: '30000QPS' },
-      { label: '域名', value: '5个' },
-      { label: '防御端口', value: '10个' },
+      { label: 'DDoS 防护值', value: '150Gbps' },
+      { label: 'CC 防御值', value: '30000QPS' },
+      { label: '域名', value: '5 个' },
+      { label: '防御端口', value: '10 个' },
       { label: '业务宽带', value: '50Mbps' },
       { label: 'SSL', value: '支持' },
       { label: 'Websocket', value: '支持' },
-      { label: '网络', value: 'BGP/CN2网络' },
+      { label: '网络', value: 'BGP/CN2 网络' },
     ]
   },
   {
@@ -55,14 +55,14 @@ const products = [
     unit: '/月',
     btnText: '立即开通',
     features: [
-      { label: 'DDoS防护值', value: '400Gbps' },
-      { label: 'CC防御值', value: '50000QPS' },
-      { label: '域名', value: '10个' },
-      { label: '防御端口', value: '20个' },
+      { label: 'DDoS 防护值', value: '400Gbps' },
+      { label: 'CC 防御值', value: '50000QPS' },
+      { label: '域名', value: '10 个' },
+      { label: '防御端口', value: '20 个' },
       { label: '业务宽带', value: '100Mbps' },
       { label: 'SSL', value: '支持' },
       { label: 'Websocket', value: '支持' },
-      { label: '网络', value: 'BGP/CN2网络' },
+      { label: '网络', value: 'BGP/CN2 网络' },
     ]
   },
   {
@@ -71,39 +71,39 @@ const products = [
     unit: '/月',
     btnText: '立即开通',
     features: [
-      { label: 'DDoS防护值', value: '600Gbps' },
-      { label: 'CC防御值', value: '15WQPS' },
-      { label: '域名', value: '50个' },
-      { label: '防御端口', value: '50个' },
+      { label: 'DDoS 防护值', value: '600Gbps' },
+      { label: 'CC 防御值', value: '15WQPS' },
+      { label: '域名', value: '50 个' },
+      { label: '防御端口', value: '50 个' },
       { label: '业务宽带', value: '500Mbps' },
       { label: 'SSL', value: '支持' },
       { label: 'Websocket', value: '支持' },
-      { label: '网络', value: 'BGP/CN2网络' },
+      { label: '网络', value: 'BGP/CN2 网络' },
     ]
   },
   {
     title: '定制版',
     btnText: '联系商务',
     features: [
-      { label: 'DDoS防护值', value: 'T级防御' },
-      { label: 'CC防御值', value: '免疫98%CC' },
+      { label: 'DDoS 防护值', value: 'T 级防御' },
+      { label: 'CC 防御值', value: '免疫 98%CC' },
       { label: '域名', value: '定制' },
       { label: '防御端口', value: '定制' },
       { label: '业务宽带', value: '定制' },
       { label: 'SSL', value: '定制' },
       { label: 'Websocket', value: '定制' },
-      { label: '网络', value: 'BGP/CN2网络' },
+      { label: '网络', value: 'BGP/CN2 网络' },
     ]
   }
 ]
 </script>
 <style lang="scss" scoped>
-.service-container {
+.mb-service-container {
   width: 100%;
   position: relative;
   overflow: hidden;
 
-  .service-content {
+  .mb-service-content {
     position: relative;
     z-index: 2;
     padding-top: 40px;
@@ -121,14 +121,14 @@ const products = [
       -webkit-text-fill-color: transparent;
     }
 
-    .service-cards {
+    .mb-service-cards {
       margin-top: 26px;
       display: flex;
       justify-content: center;
       flex-wrap: wrap;
       gap: 10px;
 
-      .service-card {
+      .mb-service-card {
         border-radius: 4px;
         background: #1B192A;
         width: 166px;
@@ -146,18 +146,18 @@ const products = [
         //   background: linear-gradient(176deg, rgba(146, 116, 254, 0.20) -10.82%, rgba(125, 70, 255, 0.20) 109.01%);
         // }
 
-        // &:hover .action-btn {
+        // &:hover .mb-action-btn {
         //   background: linear-gradient(91deg, #A39DFF 1.24%, #7D46FF 122.93%);
         // }
 
-        .card-title {
+        .mb-card-title {
           color: #FFF;
           text-align: center;
           font-size: 14px;
           font-weight: 400;
         }
 
-        .customized-icon {
+        .mb-customized-icon {
           padding-top: 12px;
 
           :deep(img) {
@@ -166,12 +166,12 @@ const products = [
           }
         }
 
-        .card-price {
+        .mb-card-price {
           display: flex;
           align-items: baseline;
           padding: 10px 0;
 
-          .amount {
+          .mb-amount {
             font-size: 24px;
             font-weight: 700;
             background: linear-gradient(91deg, #B8AFFF 10.8%, #C597FF 108.3%);
@@ -180,14 +180,14 @@ const products = [
             -webkit-text-fill-color: transparent;
           }
 
-          .unit {
+          .mb-unit {
             color: #FFF;
             font-size: 14px;
             font-weight: 400;
           }
         }
 
-        .payment-support {
+        .mb-payment-support {
           display: flex;
           align-items: center;
           gap: 2px;
@@ -201,7 +201,7 @@ const products = [
           }
         }
 
-        .action-btn {
+        .mb-action-btn {
           display: flex;
           justify-content: center;
           align-items: center;
@@ -215,24 +215,24 @@ const products = [
           font-weight: 400;
         }
 
-        .features-list {
+        .mb-features-list {
           width: 100%;
           display: flex;
           flex-direction: column;
           gap: 10px;
           margin-top: 10px;
 
-          .feature-item {
+          .mb-feature-item {
             display: flex;
             justify-content: space-between;
             font-size: 10px;
             font-weight: 400;
 
-            .label {
+            .mb-label {
               color: rgba(255, 255, 255, 0.60)
             }
 
-            .value {
+            .mb-value {
               color: #FFF;
               text-align: right;
             }
@@ -242,4 +242,4 @@ const products = [
     }
   }
 }
-</style>
+</style>

app/components/mobile/products/WebCard.vue

@@ -1,22 +1,22 @@
 <template>
-  <div class="case-container">
-    <div class="case-title">应用场景</div>
-    <div class="case-cards">
-      <div class="tabs-list">
-        <div v-for="(item, index) in cases" :key="index" class="tab-item" :class="{ active: activeIndex === index }"
+  <div class="mb-case-container">
+    <div class="mb-case-title">应用场景</div>
+    <div class="mb-case-cards">
+      <div class="mb-tabs-list">
+        <div v-for="(item, index) in cases" :key="index" class="mb-tab-item" :class="{ 'mb-active': activeIndex === index }"
           @click="activeIndex = index">
           {{ item.title }}
         </div>
       </div>
 
-      <div class="tab-content">
-        <transition name="fade" mode="out-in">
-          <div :key="activeIndex" class="content-wrapper">
-            <div class="text-content">
-              <h3 class="title">{{ cases[activeIndex].title }}</h3>
-              <p class="description">{{ cases[activeIndex].description }}</p>
-              <h4 class="sub-title">业务价值</h4>
-              <p class="value-desc">{{ cases[activeIndex].value }}</p>
+      <div class="mb-tab-content">
+        <transition name="mb-fade" mode="out-in">
+          <div :key="activeIndex" class="mb-content-wrapper">
+            <div class="mb-text-content">
+              <h3 class="mb-title">{{ cases[activeIndex].title }}</h3>
+              <p class="mb-description">{{ cases[activeIndex].description }}</p>
+              <h4 class="mb-sub-title">业务价值</h4>
+              <p class="mb-value-desc">{{ cases[activeIndex].value }}</p>
             </div>
           </div>
         </transition>
@@ -53,12 +53,12 @@ const cases = [
 </script>
 
 <style lang="scss" scoped>
-.case-container {
+.mb-case-container {
   position: relative;
 
   padding: 40px 0;
 
-  .case-title {
+  .mb-case-title {
     text-align: center;
     font-size: 20px;
     font-weight: 500;
@@ -69,18 +69,18 @@ const cases = [
     margin-bottom: 26px;
   }
 
-  .case-cards {
+  .mb-case-cards {
     width: 100%;
   }
 
-  .tabs-list {
+  .mb-tabs-list {
     display: flex;
     flex-direction: row;
     gap: 5px;
     padding-bottom: 8px;
   }
 
-  .tab-item {
+  .mb-tab-item {
     width: 82px;
     height: 26px;
     border-radius: 2px;
@@ -92,13 +92,13 @@ const cases = [
     font-weight: 400;
     white-space: nowrap;
 
-    &.active {
+    &.mb-active {
       background: linear-gradient(91deg, #A39DFF 1.24%, #7D46FF 122.93%);
       color: #fff;
     }
   }
 
-  .tab-content {
+  .mb-tab-content {
     margin-left: -16px;
     margin-right: -16px;
     padding: 30px 16px 0;
@@ -109,34 +109,34 @@ const cases = [
     color: #fff;
   }
 
-  .content-wrapper {
+  .mb-content-wrapper {
     display: flex;
     flex-direction: column;
   }
 
-  .text-content {
+  .mb-text-content {
     display: flex;
     flex-direction: column;
     gap: 6px;
 
-    .title {
+    .mb-title {
       font-size: 16px;
       font-weight: 500;
     }
 
-    .sub-title {
+    .mb-sub-title {
       font-size: 16px;
       font-weight: 500;
       margin-top: 8px;
     }
 
-    .description {
+    .mb-description {
       font-size: 10px;
       font-weight: 400;
       color: rgba(255, 255, 255, 0.85);
     }
 
-    .value-desc {
+    .mb-value-desc {
       font-size: 10px;
       font-weight: 400;
       color: rgba(255, 255, 255, 0.85);
@@ -144,13 +144,13 @@ const cases = [
   }
 }
 
-.fade-enter-active,
-.fade-leave-active {
+.mb-fade-enter-active,
+.mb-fade-leave-active {
   transition: opacity 0.3s ease;
 }
 
-.fade-enter-from,
-.fade-leave-to {
+.mb-fade-enter-from,
+.mb-fade-leave-to {
   opacity: 0;
 }
 </style>

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;

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>

app/pages/mobile/products/boost.vue

@@ -1,35 +1,35 @@
 <template>
   <section>
     <section class="mb-boost-section">
-      <NuxtImg class="sd-bg" src="/images/products/sd-bg.png" alt="cdn" />
-      <div class="video-title">
+      <NuxtImg class="mb-sd-bg" src="/images/products/sd-bg.png" alt="cdn" />
+      <div class="mb-video-title">
         <h1><span>高防</span>服务器，也能<span>极致加速</span></h1>
-        <div class="video-subtitle">
+        <div class="mb-video-subtitle">
           <p>因为我们通过全球近源清洗，把攻击挡在千里之外，为合法流量让出了纯净快车道。</p>
         </div>
-        <div class="video-btn">
+        <div class="mb-video-btn">
           <span>联系我们</span>
           <Icon name="line-md:chevron-right" />
         </div>
       </div>
     </section>
     <section class="mb-boost-card">
-      <div class="card-title">
+      <div class="mb-card-title">
         <h2>真正实现秒级抵御</h2>
         <p>让高防服务器在DDoS攻击中守护您的业务无忧</p>
       </div>
       <div class="mb-accordion">
-        <div v-for="(item, index) in accordionItems" :key="item.title" class="accordion-item"
-          :class="{ 'is-open': openIndices.includes(index) }" @click="toggleAccordion(index)">
-          <div class="accordion-header">
-            <div class="accordion-left">
-              <span class="accordion-title">{{ item.title }}</span>
+        <div v-for="(item, index) in accordionItems" :key="item.title" class="mb-accordion-item"
+          :class="{ 'mb-is-open': openIndices.includes(index) }" @click="toggleAccordion(index)">
+          <div class="mb-accordion-header">
+            <div class="mb-accordion-left">
+              <span class="mb-accordion-title">{{ item.title }}</span>
             </div>
-            <Icon name="line-md:chevron-right" class="accordion-icon" />
+            <Icon name="line-md:chevron-right" class="mb-accordion-icon" />
           </div>
-          <Transition name="accordion-expand">
-            <div v-show="openIndices.includes(index)" class="accordion-body">
-              <p class="accordion-text">{{ item.description }}</p>
+          <Transition name="mb-accordion-expand">
+            <div v-show="openIndices.includes(index)" class="mb-accordion-body">
+              <p class="mb-accordion-text">{{ item.description }}</p>
             </div>
           </Transition>
         </div>
@@ -37,19 +37,19 @@
     </section>
     <SecurityServicesSuite />
     <section class="mb-tabs-section">
-      <div class="toggle-container">
-        <div class="toggle-bg" :class="{ 'right': activeTab === 'defense' }"></div>
-        <div class="toggle-option" :class="{ 'active': activeTab === 'accelerate' }" @click="activeTab = 'accelerate'">
+      <div class="mb-toggle-container">
+        <div class="mb-toggle-bg" :class="{ 'mb-right': activeTab === 'defense' }"></div>
+        <div class="mb-toggle-option" :class="{ 'mb-active': activeTab === 'accelerate' }" @click="activeTab = 'accelerate'">
           加速
         </div>
-        <div class="toggle-option" :class="{ 'active': activeTab === 'defense' }" @click="activeTab = 'defense'">
+        <div class="mb-toggle-option" :class="{ 'mb-active': activeTab === 'defense' }" @click="activeTab = 'defense'">
           防御
         </div>
       </div>
-      <div class="tab-content">
-        <transition name="fade" mode="out-in">
-          <div v-if="activeTab === 'accelerate'" key="accelerate" class="content-panel">
-            <div class="content-text">
+      <div class="mb-tab-content">
+        <transition name="mb-fade" mode="out-in">
+          <div v-if="activeTab === 'accelerate'" key="accelerate" class="mb-content-panel">
+            <div class="mb-content-text">
               <h3>高防，不应以牺牲速度为代价</h3>
               <div>
                 <p> 在传统方案中，您常常面临两难选择：开启全力防御，可能影响用户体验；追求极致速度，又需在安全上承担风险。 我们的高防服务器终结了这种取舍。它通过全球近源清洗与智能路由调度的一体化架构，实现了：</p>
@@ -59,8 +59,8 @@
               </div>
             </div>
           </div>
-          <div v-else key="defense" class="content-panel">
-            <div class="content-text">
+          <div v-else key="defense" class="mb-content-panel">
+            <div class="mb-content-text">
               <h3>御攻击于无形，赋业务以极速</h3>
               <div>
                 <p>我们的高防服务器，重新定义了“防护”的含义。它并非在您的业务通道上设置一道需要检查的“减速闸”，而是在全球网络边缘提前构建了一个智能的“净化与调度层”。</p>
@@ -74,29 +74,29 @@
       </div>
     </section>
     <section class="mb-security-section">
-      <div class="security-title">
+      <div class="mb-security-title">
         <h2>安全&nbsp;&nbsp;可靠&nbsp;&nbsp;极速</h2>
         <p>防御与加速，一体两面，同时生效</p>
       </div>
-      <div class="features-grid">
-        <div class="feature-item">
+      <div class="mb-features-grid">
+        <div class="mb-feature-item">
           <Icon name="material-symbols:check-circle-outline" />
           <span>1. 单节点2T 防御</span>
         </div>
-        <div class="feature-item">
+        <div class="mb-feature-item">
           <Icon name="material-symbols:check-circle-outline" />
           <span>2. 近源清洗，攻击止步于千里之外</span>
         </div>
-        <div class="feature-item">
+        <div class="mb-feature-item">
           <Icon name="material-symbols:check-circle-outline" />
           <span>4. 一套架构，双重使命</span>
         </div>
-        <div class="feature-item">
+        <div class="mb-feature-item">
           <Icon name="material-symbols:check-circle-outline" />
           <span>3. 提供真正的「安全加速」</span>
         </div>
       </div>
-      <NuxtImg class="simg" src="/images/products/suo.png" alt="suo" />
+      <NuxtImg class="mb-simg" src="/images/products/suo.png" alt="suo" />
     </section>
   </section>
 </template>
@@ -144,7 +144,7 @@ const toggleAccordion = (index) => {
   margin: 0 auto;
 
 
-  .sd-bg {
+  .mb-sd-bg {
     position: absolute;
     width: 260px;
     height: auto;
@@ -154,7 +154,7 @@ const toggleAccordion = (index) => {
   }
 
 
-  .video-title {
+  .mb-video-title {
     padding-top: 20px;
     position: relative;
     width: 100%;
@@ -174,14 +174,14 @@ const toggleAccordion = (index) => {
       }
     }
 
-    .video-subtitle {
+    .mb-video-subtitle {
       color: #E2D9FF;
       font-size: 10px;
       font-weight: 400;
       width: 168px;
     }
 
-    .video-text {
+    .mb-video-text {
       color: #E2D9FF;
       font-size: 20px;
       font-style: normal;
@@ -190,7 +190,7 @@ const toggleAccordion = (index) => {
     }
 
 
-    .video-btn {
+    .mb-video-btn {
       margin-top: 16px;
       display: flex;
       box-sizing: border-box;
@@ -214,7 +214,7 @@ const toggleAccordion = (index) => {
 .mb-boost-card {
   margin-top: 22px;
 
-  .card-title {
+  .mb-card-title {
     display: flex;
     flex-direction: column;
     gap: 10px;
@@ -242,7 +242,7 @@ const toggleAccordion = (index) => {
     flex-direction: column;
     gap: 10px;
 
-    .accordion-item {
+    .mb-accordion-item {
       padding: 20px;
       border-radius: 10px;
       border: 1px solid rgba(255, 255, 255, 0.10);
@@ -267,46 +267,46 @@ const toggleAccordion = (index) => {
         z-index: 0;
       }
 
-      &.is-open::after {
+      &.mb-is-open::after {
         opacity: .4;
       }
     }
 
-    .accordion-header {
+    .mb-accordion-header {
       display: flex;
       align-items: start;
       justify-content: space-between;
       gap: 20px;
     }
 
-    .accordion-left {
+    .mb-accordion-left {
       display: flex;
       align-items: center;
       gap: 10px;
 
     }
 
-    .accordion-title {
+    .mb-accordion-title {
       color: #FFF;
       font-size: 14px;
       font-weight: 500;
     }
 
-    .accordion-icon {
+    .mb-accordion-icon {
       color: #fff;
       font-size: 20px;
       transition: transform 0.2s ease;
     }
 
-    .accordion-item.is-open .accordion-icon {
+    .mb-accordion-item.mb-is-open .mb-accordion-icon {
       transform: rotate(90deg);
     }
 
-    .accordion-body {
+    .mb-accordion-body {
       margin-top: 10px;
     }
 
-    .accordion-text {
+    .mb-accordion-text {
       color: rgba(255, 255, 255, 0.50);
       font-size: 12px;
       font-weight: 400;
@@ -314,20 +314,20 @@ const toggleAccordion = (index) => {
     }
   }
 
-  .accordion-expand-enter-active,
-  .accordion-expand-leave-active {
+  .mb-accordion-expand-enter-active,
+  .mb-accordion-expand-leave-active {
     transition: all 0.2s ease;
     overflow: hidden;
   }
 
-  .accordion-expand-enter-from,
-  .accordion-expand-leave-to {
+  .mb-accordion-expand-enter-from,
+  .mb-accordion-expand-leave-to {
     opacity: 0;
     max-height: 0;
   }
 
-  .accordion-expand-enter-to,
-  .accordion-expand-leave-from {
+  .mb-accordion-expand-enter-to,
+  .mb-accordion-expand-leave-from {
     opacity: 1;
     max-height: 200px;
   }
@@ -369,7 +369,7 @@ const toggleAccordion = (index) => {
   }
 
 
-  .toggle-container {
+  .mb-toggle-container {
     position: relative;
     display: flex;
     width: 215px;
@@ -386,8 +386,8 @@ const toggleAccordion = (index) => {
     box-sizing: border-box;
   }
 
-  .toggle-container,
-  .toggle-option {
+  .mb-toggle-container,
+  .mb-toggle-option {
     -webkit-tap-highlight-color: transparent;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
@@ -398,7 +398,7 @@ const toggleAccordion = (index) => {
     outline: none;
   }
 
-  .toggle-bg {
+  .mb-toggle-bg {
     position: absolute;
     top: 0;
     left: 0;
@@ -410,11 +410,11 @@ const toggleAccordion = (index) => {
     z-index: 1;
   }
 
-  .toggle-bg.right {
+  .mb-toggle-bg.mb-right {
     transform: translateX(100%);
   }
 
-  .toggle-option {
+  .mb-toggle-option {
     flex: 1;
     display: flex;
     align-items: center;
@@ -426,21 +426,21 @@ const toggleAccordion = (index) => {
     transition: color 0.3s;
   }
 
-  .fade-enter-active,
-  .fade-leave-active {
+  .mb-fade-enter-active,
+  .mb-fade-leave-active {
     transition: opacity 0.3s ease;
   }
 
-  .fade-enter-from,
-  .fade-leave-to {
+  .mb-fade-enter-from,
+  .mb-fade-leave-to {
     opacity: 0;
   }
 
-  .toggle-option.active {
+  .mb-toggle-option.mb-active {
     color: #D2CCFF;
   }
 
-  .tab-content {
+  .mb-tab-content {
     position: relative;
     width: 100%;
     margin: 16px auto 0;
@@ -453,10 +453,10 @@ const toggleAccordion = (index) => {
     backdrop-filter: blur(100px);
     color: #fff;
 
-    .content-panel {
+    .mb-content-panel {
       display: flex;
 
-      .content-text {
+      .mb-content-text {
         display: flex;
         flex-direction: column;
         gap: 20px;
@@ -486,7 +486,7 @@ const toggleAccordion = (index) => {
 .mb-security-section {
   margin-top: 56px;
 
-  .security-title {
+  .mb-security-title {
     display: flex;
     flex-direction: column;
     gap: 14px;
@@ -505,14 +505,14 @@ const toggleAccordion = (index) => {
     }
   }
 
-  .features-grid {
+  .mb-features-grid {
     margin-top: 26px;
     margin-bottom: 16px;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 16px;
 
-    .feature-item {
+    .mb-feature-item {
       display: flex;
       align-items: center;
       gap: 4px;
@@ -532,7 +532,7 @@ const toggleAccordion = (index) => {
     }
   }
 
-  .simg {
+  .mb-simg {
 
     margin: 0 -16px;
     width: 375px;

app/pages/mobile/products/sdk.vue

@@ -1,18 +1,18 @@
 <template>
   <section class="mb-product">
-    <section class="video-section">
-      <div class="video-title">
+    <section class="mb-video-section">
+      <div class="mb-video-title">
         <h1>DDAC游戏盾——让APP自带</h1>
-        <div class="video-subtitle">“国家级别”防御</div>
-        <div class="video-text">
-          却只需要开发者“日常级别”
+        <div class="mb-video-subtitle">"国家级别"防御</div>
+        <div class="mb-video-text">
+          却只需要开发者"日常级别"
           的工作量
         </div>
-        <div class="video-btn">
+        <div class="mb-video-btn">
           联系我们 <Icon size="16" name="ic:sharp-keyboard-arrow-right"></Icon>
         </div>
       </div>
-      <div class="right-bg"></div>
+      <div class="mb-right-bg"></div>
     </section>
     <Introduction />
     <section class="mb-card-text">
@@ -20,18 +20,18 @@
         一体化解决游戏安全问题
       </h3>
       <div class="mb-accordion">
-        <div v-for="(item, index) in accordionItems" :key="item.title" class="accordion-item"
-          :class="{ 'is-open': openIndices.includes(index) }" @click="toggleAccordion(index)">
-          <div class="accordion-header">
-            <div class="accordion-left">
+        <div v-for="(item, index) in accordionItems" :key="item.title" class="mb-accordion-item"
+          :class="{ 'mb-is-open': openIndices.includes(index) }" @click="toggleAccordion(index)">
+          <div class="mb-accordion-header">
+            <div class="mb-accordion-left">
               <img :src="item.icon" alt="icon">
-              <span class="accordion-title">{{ item.title }}</span>
+              <span class="mb-accordion-title">{{ item.title }}</span>
             </div>
-            <Icon name="line-md:chevron-right" class="accordion-icon" />
+            <Icon name="line-md:chevron-right" class="mb-accordion-icon" />
           </div>
-          <Transition name="accordion-expand">
-            <div v-show="openIndices.includes(index)" class="accordion-body">
-              <p class="accordion-text">{{ item.description }}</p>
+          <Transition name="mb-accordion-expand">
+            <div v-show="openIndices.includes(index)" class="mb-accordion-body">
+              <p class="mb-accordion-text">{{ item.description }}</p>
             </div>
           </Transition>
         </div>
@@ -101,7 +101,7 @@ const toggleAccordion = (index) => {
 
 <style scoped lang="scss">
 .mb-product {
-  .video-section {
+  .mb-video-section {
     box-sizing: border-box;
     padding-top: 32px;
     display: flex;
@@ -110,7 +110,7 @@ const toggleAccordion = (index) => {
     margin: 0 auto;
 
 
-    .right-bg {
+    .mb-right-bg {
       position: absolute;
       right: 0;
       top: -52px;
@@ -123,7 +123,7 @@ const toggleAccordion = (index) => {
       z-index: 3;
     }
 
-    .video-title {
+    .mb-video-title {
       z-index: 3;
       color: #fff;
       font-style: normal;
@@ -139,14 +139,14 @@ const toggleAccordion = (index) => {
         -webkit-text-fill-color: transparent;
       }
 
-      .video-subtitle {
+      .mb-video-subtitle {
         margin-left: -4%;
         color: #DBB9FF;
         font-size: 14px;
         font-weight: 500;
       }
 
-      .video-text {
+      .mb-video-text {
         width: 130px;
         margin-top: 12px;
         color: #E2D9FF;
@@ -154,7 +154,7 @@ const toggleAccordion = (index) => {
         font-weight: 400;
       }
 
-      .video-btn {
+      .mb-video-btn {
         margin-top: 12px;
         display: flex;
         width: 85px;
@@ -188,7 +188,7 @@ const toggleAccordion = (index) => {
     flex-direction: column;
     gap: 10px;
 
-    .accordion-item {
+    .mb-accordion-item {
       padding: 20px;
       border-radius: 10px;
       border: 1px solid rgba(255, 255, 255, 0.10);
@@ -197,13 +197,13 @@ const toggleAccordion = (index) => {
       transition: border-color 0.2s ease, background 0.2s ease;
     }
 
-    .accordion-header {
+    .mb-accordion-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
     }
 
-    .accordion-left {
+    .mb-accordion-left {
       display: flex;
       align-items: center;
       gap: 10px;
@@ -214,27 +214,27 @@ const toggleAccordion = (index) => {
       }
     }
 
-    .accordion-title {
+    .mb-accordion-title {
       color: #FFF;
       font-size: 14px;
       font-weight: 500;
     }
 
-    .accordion-icon {
+    .mb-accordion-icon {
       color: #fff;
       font-size: 20px;
       transition: transform 0.2s ease;
     }
 
-    .accordion-item.is-open .accordion-icon {
+    .mb-accordion-item.mb-is-open .mb-accordion-icon {
       transform: rotate(90deg);
     }
 
-    .accordion-body {
+    .mb-accordion-body {
       margin-top: 10px;
     }
 
-    .accordion-text {
+    .mb-accordion-text {
       color: rgba(255, 255, 255, 0.50);
       font-size: 12px;
       font-weight: 400;
@@ -242,20 +242,20 @@ const toggleAccordion = (index) => {
     }
   }
 
-  .accordion-expand-enter-active,
-  .accordion-expand-leave-active {
+  .mb-accordion-expand-enter-active,
+  .mb-accordion-expand-leave-active {
     transition: all 0.2s ease;
     overflow: hidden;
   }
 
-  .accordion-expand-enter-from,
-  .accordion-expand-leave-to {
+  .mb-accordion-expand-enter-from,
+  .mb-accordion-expand-leave-to {
     opacity: 0;
     max-height: 0;
   }
 
-  .accordion-expand-enter-to,
-  .accordion-expand-leave-from {
+  .mb-accordion-expand-enter-to,
+  .mb-accordion-expand-leave-from {
     opacity: 1;
     max-height: 200px;
   }

app/pages/mobile/products/web.vue

@@ -1,22 +1,22 @@
 <template>
   <section class="mb-web">
-    <section class="video-section">
-      <div class="cdn-dg">
-        <NuxtImg class="cdn-bg" src="/images/products/cdn-bg.png" alt="cdn" />
+    <section class="mb-video-section">
+      <div class="mb-cdn-dg">
+        <NuxtImg class="mb-cdn-bg" src="/images/products/cdn-bg.png" alt="cdn" />
       </div>
-      <div class="video-title">
-        <p class="video-text">Intelligent routing / dynamic optimization / real-time processing</p>
+      <div class="mb-video-title">
+        <p class="mb-video-text">Intelligent routing / dynamic optimization / real-time processing</p>
         <h1><span>智能</span>路由/<span>动态</span>优化/<span>实时</span>处理</h1>
-        <div class="video-subtitle">不止于快，更稳更安全，为您的业务保驾护航</div>
-        <div class="video-btn">
+        <div class="mb-video-subtitle">不止于快，更稳更安全，为您的业务保驾护航</div>
+        <div class="mb-video-btn">
           <span>联系我们</span>
           <Icon name="line-md:chevron-right" />
         </div>
       </div>
-      <section class="perspective-grid-section">
-        <div class="perspective-container">
-          <div class="grid-floor">
-            <div class="grid-lines"></div>
+      <section class="mb-perspective-grid-section">
+        <div class="mb-perspective-container">
+          <div class="mb-grid-floor">
+            <div class="mb-grid-lines"></div>
           </div>
         </div>
       </section>
@@ -26,17 +26,17 @@
       <p>让科技为您的业务发光发亮，CDN功能助力您的网站顺畅、高效、安全地运作，同时提供数据防范和预防技术，让您的网站免于遭受恶意攻击</p>
     </section>
     <section class="mb-cdn-content">
-      <div class="cdn-item">
-        <div class="item-text">
+      <div class="mb-cdn-item">
+        <div class="mb-item-text">
           <h3>CDN内容分发</h3>
           <p>
             加速您的网站，最速达优化性能。CDN内容分发网络遍布五大洲，我们的CDN将使您的网站前所未有的更流畅，提升您的用户体验</p>
         </div>
-        <NuxtImg class="item-img img1" src="/images/products/cdn.png" alt="cdn分发" />
+        <NuxtImg class="mb-item-img mb-img1" src="/images/products/cdn.png" alt="cdn分发" />
       </div>
-      <div class="cdn-item">
-        <NuxtImg class="item-img img2" src="/images/products/678yun.png" alt="678云盾" />
-        <div class="item-text">
+      <div class="mb-cdn-item">
+        <NuxtImg class="mb-item-img mb-img2" src="/images/products/678yun.png" alt="678云盾" />
+        <div class="mb-item-text">
           <h3>网站保护</h3>
           <p>
             使用678云盾高防CDN网站保护，网站攻击将无处遁形!我们的专业服务团队利用最佳技术和技巧为您提供安全性和可靠性保护，确保您的业务安全运营，稳步前进。</p>
@@ -47,12 +47,12 @@
       <h2>678CDN 特性</h2>
     </section>
     <section class="mb-cdn-cards">
-      <div class="card-item" v-for="(card, index) in cards" :key="index">
-        <div class="item-title">
+      <div class="mb-card-item" v-for="(card, index) in cards" :key="index">
+        <div class="mb-item-title">
           <img :src="card.icon" alt="icon" />
           <h4>{{ card.title }}</h4>
         </div>
-        <div class="item-text">{{ card.text }}</div>
+        <div class="mb-item-text">{{ card.text }}</div>
       </div>
     </section>
     <SecurityServicesSuite />
@@ -113,14 +113,14 @@ const cards = [
 
 <style scoped lang="scss">
 .mb-web {
-  .video-section {
+  .mb-video-section {
     position: relative;
     width: 100%;
     height: 200px;
     margin: 0 auto;
     overflow: hidden;
 
-    .cdn-dg {
+    .mb-cdn-dg {
       position: absolute;
       top: 0;
       right: -26px;
@@ -133,10 +133,10 @@ const cards = [
       justify-content: center;
       z-index: 1;
 
-      .cdn-bg {
+      .mb-cdn-bg {
         position: relative;
         z-index: 1;
-        animation: float 3s ease-in-out infinite;
+        animation: mb-float 3s ease-in-out infinite;
       }
 
       :deep(img) {
@@ -145,7 +145,7 @@ const cards = [
       }
     }
 
-    @keyframes float {
+    @keyframes mb-float {
 
       0%,
       100% {
@@ -157,7 +157,7 @@ const cards = [
       }
     }
 
-    .video-title {
+    .mb-video-title {
       position: relative;
       padding-top: 30px;
       width: 100%;
@@ -178,7 +178,7 @@ const cards = [
         }
       }
 
-      .video-subtitle {
+      .mb-video-subtitle {
         margin-top: 10px;
         width: 140px;
         color: #E2D9FF;
@@ -187,7 +187,7 @@ const cards = [
         line-height: 14px;
       }
 
-      .video-text {
+      .mb-video-text {
         color: #E2D9FF;
         font-size: 8px;
         font-weight: 300;
@@ -195,7 +195,7 @@ const cards = [
       }
 
 
-      .video-btn {
+      .mb-video-btn {
         cursor: pointer;
         margin-top: 20px;
         display: flex;
@@ -215,7 +215,7 @@ const cards = [
     }
   }
 
-  .perspective-grid-section {
+  .mb-perspective-grid-section {
     width: 100%;
     height: 100px;
     overflow: hidden;
@@ -225,7 +225,7 @@ const cards = [
     perspective: 400px;
     z-index: 0;
 
-    .perspective-container {
+    .mb-perspective-container {
       width: 100%;
       height: 100%;
       display: flex;
@@ -234,7 +234,7 @@ const cards = [
       transform-style: preserve-3d;
     }
 
-    .grid-floor {
+    .mb-grid-floor {
       width: 200%;
       height: 400px;
       position: relative;
@@ -243,14 +243,14 @@ const cards = [
       overflow: hidden;
     }
 
-    .grid-lines {
+    .mb-grid-lines {
       width: 100%;
       height: 200%;
       background-image:
         linear-gradient(rgba(22, 24, 75, 0.5) 1px, transparent 1px),
         linear-gradient(90deg, rgba(22, 24, 75, 0.5) 1px, transparent 1px);
       background-size: 50px 50px;
-      animation: gridMove 4s linear infinite;
+      animation: mb-gridMove 4s linear infinite;
     }
 
     &::after {
@@ -266,7 +266,7 @@ const cards = [
     }
   }
 
-  @keyframes gridMove {
+  @keyframes mb-gridMove {
     0% {
       transform: translateY(-50%);
     }
@@ -304,29 +304,29 @@ const cards = [
     margin: 30px auto 0;
     gap: 10px;
 
-    .cdn-item {
+    .mb-cdn-item {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 20px;
 
-      .item-img {
+      .mb-item-img {
         flex-shrink: 0;
       }
 
-      .img1 {
+      .mb-img1 {
         width: 154px;
         height: auto;
       }
 
-      .img2 {
+      .mb-img2 {
         width: 140px;
         height: auto;
       }
     }
   }
 
-  .item-text {
+  .mb-item-text {
     flex: 1;
     display: flex;
     flex-direction: column;
@@ -368,7 +368,7 @@ const cards = [
     grid-template-columns: repeat(2, 1fr);
     gap: 10px;
 
-    .card-item {
+    .mb-card-item {
       display: flex;
       flex-direction: column;
       gap: 6px;
@@ -377,7 +377,7 @@ const cards = [
       border: 1px solid rgba(255, 255, 255, 0.10);
       background: rgba(255, 255, 255, 0.10);
 
-      .item-title {
+      .mb-item-title {
         display: flex;
         gap: 8px;
         align-items: center;
@@ -395,7 +395,7 @@ const cards = [
         }
       }
 
-      .item-text {
+      .mb-item-text {
         width: 100%;
         color: rgba(255, 255, 255, 0.60);
         font-size: 10px;