refactor(mobile): 统一移动端样式类名前缀为mb-

重构移动端所有组件的样式类名，将原有不一致的前缀(h5-, mobile-等)统一改为mb-前缀
同时优化postcss-pxtorem配置，排除非mb-前缀的类名转换

app/components/mobile/Footer.vue

@@ -1,32 +1,32 @@
 <template>
-  <footer class="mobile-footer">
-    <div class="mobile-footer-container">
-      <div class="footer-brand">
-        <h2 class="brand-title">DDAC</h2>
+  <footer class="mb-mobile-footer">
+    <div class="mb-mobile-footer-container">
+      <div class="mb-footer-brand">
+        <h2 class="mb-brand-title">DDAC</h2>
       </div>
-      <nav class="footer-nav">
-        <div v-for="(section, index) in sections" :key="section.title" class="nav-column">
-          <div class="nav-title-row" @click="toggleSection(index)">
-            <h3 class="nav-title">{{ section.title }}</h3>
-            <Icon name="line-md:chevron-down" class="nav-item-icon" :class="{ 'icon-rotated': openSections[index] }" />
+      <nav class="mb-footer-nav">
+        <div v-for="(section, index) in sections" :key="section.title" class="mb-nav-column">
+          <div class="mb-nav-title-row" @click="toggleSection(index)">
+            <h3 class="mb-nav-title">{{ section.title }}</h3>
+            <Icon name="line-md:chevron-down" class="mb-nav-item-icon" :class="{ 'mb-icon-rotated': openSections[index] }" />
           </div>
-          <Transition name="nav-expand">
-            <div v-show="openSections[index]" class="nav-list">
-              <div v-for="item in section.items" :key="item" class="nav-link">{{ item }}</div>
+          <Transition name="mb-nav-expand">
+            <div v-show="openSections[index]" class="mb-nav-list">
+              <div v-for="item in section.items" :key="item" class="mb-nav-link">{{ item }}</div>
             </div>
           </Transition>
         </div>
       </nav>
-      <div class="footer-section">
-        <span class="section-link">行业解决方案</span>
+      <div class="mb-footer-section">
+        <span class="mb-section-link">行业解决方案</span>
       </div>
-      <div class="footer-contact">
-        <span class="contact-label">联系我们</span>
-        <p class="contact-email">企业邮箱：support@yundun.com</p>
+      <div class="mb-footer-contact">
+        <span class="mb-contact-label">联系我们</span>
+        <p class="mb-contact-email">企业邮箱：support@yundun.com</p>
       </div>
-      <div class="footer-bottom">
-        <span class="report-link">举报中心</span>
-        <p class="copyright">Copyright@2025 SUYUN,All Rights Reserved</p>
+      <div class="mb-footer-bottom">
+        <span class="mb-report-link">举报中心</span>
+        <p class="mb-copyright">Copyright@2025 SUYUN,All Rights Reserved</p>
       </div>
     </div>
   </footer>
@@ -37,10 +37,10 @@ const sections = [
   {
     title: '安全产品',
     items: [
-      'SDK安全加速（游戏DDoS、CC、WAF防护）',
-      'Web安全加速（网站DDoS、CC、WAF防护）',
-      'TCP安全加速（DDoS防护）',
-      'DNS安全加速（域名解析）'
+      'SDK 安全加速（游戏 DDoS、CC、WAF 防护）',
+      'Web 安全加速（网站 DDoS、CC、WAF 防护）',
+      'TCP 安全加速（DDoS 防护）',
+      'DNS 安全加速（域名解析）'
     ]
   },
   {
@@ -58,8 +58,8 @@ const sections = [
     items: [
       '零信任安全访问',
       '出海云主机',
-      'Web网站安全加速',
-      'APP安全加速'
+      'Web 网站安全加速',
+      'APP 安全加速'
     ]
   },
   {
@@ -91,7 +91,7 @@ const toggleSection = (index) => {
 </script>
 
 <style scoped lang="scss">
-.mobile-footer {
+.mb-mobile-footer {
   width: 100%;
   background-color: #030014;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
@@ -100,15 +100,15 @@ const toggleSection = (index) => {
   box-sizing: border-box;
 }
 
-.mobile-footer-container {
+.mb-mobile-footer-container {
   margin: 0 auto;
 }
 
-.footer-brand {
+.mb-footer-brand {
   padding-bottom: 16px;
   position: relative;
 
-  .brand-title {
+  .mb-brand-title {
     color: #FFF;
     font-size: 24px;
     font-weight: 900;
@@ -125,16 +125,16 @@ const toggleSection = (index) => {
   }
 }
 
-.footer-nav {
+.mb-footer-nav {
   display: flex;
   flex-direction: column;
 }
 
-.nav-column {
+.mb-nav-column {
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
 }
 
-.nav-title-row {
+.mb-nav-title-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -142,28 +142,28 @@ const toggleSection = (index) => {
   cursor: pointer;
 }
 
-.nav-title {
+.mb-nav-title {
   color: #DDD;
   font-size: 18px;
   font-weight: 400;
 }
 
-.nav-item-icon {
+.mb-nav-item-icon {
   width: 18px;
   height: 18px;
   color: #fff;
   transition: transform 0.3s ease;
 }
 
-.icon-rotated {
+.mb-icon-rotated {
   transform: rotate(180deg);
 }
 
-.nav-list {
+.mb-nav-list {
   padding-bottom: 12px;
 }
 
-.nav-link {
+.mb-nav-link {
   font-size: 14px;
   color: #bdbdbd;
   margin-bottom: 12px;
@@ -178,31 +178,31 @@ const toggleSection = (index) => {
   }
 }
 
-.nav-expand-enter-active,
-.nav-expand-leave-active {
+.mb-nav-expand-enter-active,
+.mb-nav-expand-leave-active {
   overflow: hidden;
   transition: max-height 0.3s ease-out;
 }
 
-.nav-expand-enter-from,
-.nav-expand-leave-to {
+.mb-nav-expand-enter-from,
+.mb-nav-expand-leave-to {
   max-height: 0 !important;
 }
 
-.nav-expand-enter-to,
-.nav-expand-leave-from {
+.mb-nav-expand-enter-to,
+.mb-nav-expand-leave-from {
   max-height: 500px !important;
 }
 
-.footer-section {
-  .section-link {
+.mb-footer-section {
+  .mb-section-link {
     color: #DDD;
     font-size: 14px;
     font-weight: 400;
   }
 }
 
-.footer-contact {
+.mb-footer-contact {
   display: flex;
   gap: 44px;
   color: #DDD;
@@ -212,7 +212,7 @@ const toggleSection = (index) => {
 
 }
 
-.footer-bottom {
+.mb-footer-bottom {
   padding: 36px 0 50px 0;
   display: flex;
   flex-direction: column;
@@ -221,7 +221,7 @@ const toggleSection = (index) => {
   font-size: 14px;
   font-weight: 400;
 
-  .copyright {
+  .mb-copyright {
     color: #fff;
   }
 }

app/components/mobile/Header.vue

@@ -1,9 +1,9 @@
 <template>
   <header class="mb-header">
     <div class="mb-header-container">
-      <a href="/mobile" class="brand">
-        <NuxtImg src="/logo.png" alt="DDAC logo" class="brand-logo" />
-        <h1 class="brand-title">DDAC</h1>
+      <a href="/mobile" class="mb-brand">
+        <NuxtImg src="/logo.png" alt="DDAC logo" class="mb-brand-logo" />
+        <h1 class="mb-brand-title">DDAC</h1>
       </a>
       <div class="mb-header-right">
         <Icon name="lineicons:magnifier" />
@@ -11,44 +11,44 @@
         <Icon @click="toggleMenu" name="material-symbols:menu-rounded" />
       </div>
     </div>
-    <Transition name="nav-expand">
-      <nav v-show="isMenuOpen" class="mobile-nav">
-        <div class="nav-item">
+    <Transition name="mb-nav-expand">
+      <nav v-show="isMenuOpen" class="mb-mobile-nav">
+        <div class="mb-nav-item">
           <NuxtLink to="/mobile" @click="closeMenu">首页</NuxtLink>
         </div>
-        <div class="nav-item-wrapper">
-          <div class="nav-item" @click="toggleProducts">
+        <div class="mb-nav-item-wrapper">
+          <div class="mb-nav-item" @click="toggleProducts">
             <span>产品</span>
-            <Icon name="line-md:chevron-down" class="nav-item-icon" :class="{ 'icon-rotated': isProductsOpen }" />
+            <Icon name="line-md:chevron-down" class="mb-nav-item-icon" :class="{ 'mb-icon-rotated': isProductsOpen }" />
           </div>
-          <Transition name="submenu-expand">
-            <div v-show="isProductsOpen" class="dropdown-menu">
-              <NuxtLink to="/mobile/products/sdk" class="dropdown-item" @click="closeMenu">
-                <img class="item-img" src="~/assets/svg/header/icon1.svg" alt="SDK 安全加固">
+          <Transition name="mb-submenu-expand">
+            <div v-show="isProductsOpen" class="mb-dropdown-menu">
+              <NuxtLink to="/mobile/products/sdk" class="mb-dropdown-item" @click="closeMenu">
+                <img class="mb-item-img" src="~/assets/svg/header/icon1.svg" alt="SDK 安全加固">
                 <p>SDK 安全加固</p>
               </NuxtLink>
-              <NuxtLink to="/mobile/products/web" class="dropdown-item" @click="closeMenu">
-                <img class="item-img" src="~/assets/svg/header/icon2.svg" alt="Web 安全加速">
+              <NuxtLink to="/mobile/products/web" class="mb-dropdown-item" @click="closeMenu">
+                <img class="mb-item-img" src="~/assets/svg/header/icon2.svg" alt="Web 安全加速">
                 <p>Web 安全加速</p>
               </NuxtLink>
-              <!-- <NuxtLink to="/mobile/products/dns" class="dropdown-item" @click="closeMenu">
-                <img class="item-img" src="~/assets/svg/header/icon3.svg" alt="DNS 全球解析">
+              <!-- <NuxtLink to="/mobile/products/dns" class="mb-dropdown-item" @click="closeMenu">
+                <img class="mb-item-img" src="~/assets/svg/header/icon3.svg" alt="DNS 全球解析">
                 <p>DNS 全球解析</p>
               </NuxtLink> -->
-              <NuxtLink to="/mobile/products/boost" class="dropdown-item" @click="closeMenu">
-                <img class="item-img" src="~/assets/svg/header/icon4.svg" alt="高防服务器">
+              <NuxtLink to="/mobile/products/boost" class="mb-dropdown-item" @click="closeMenu">
+                <img class="mb-item-img" src="~/assets/svg/header/icon4.svg" alt="高防服务器">
                 <p>高防服务器</p>
               </NuxtLink>
             </div>
           </Transition>
         </div>
-        <!-- <div class="nav-item">
+        <!-- <div class="mb-nav-item">
           <NuxtLink to="/mobile/solutions" @click="closeMenu">行业解决方案</NuxtLink>
         </div>
-        <div class="nav-item">
+        <div class="mb-nav-item">
           <NuxtLink to="/mobile/docs" @click="closeMenu">文档中心</NuxtLink>
         </div> -->
-        <div class="nav-item">
+        <div class="mb-nav-item">
           <NuxtLink to="/mobile/about" @click="closeMenu">了解我们</NuxtLink>
         </div>
       </nav>
@@ -100,18 +100,18 @@ const toggleProducts = () => {
   padding: 0 16px;
 }
 
-.brand {
+.mb-brand {
   display: flex;
   align-items: center;
   text-decoration: none;
 
-  .brand-logo {
+  .mb-brand-logo {
     width: 14px;
     height: 14px;
     margin-right: 8px;
   }
 
-  .brand-title {
+  .mb-brand-title {
     color: #FFF;
     font-size: 14px;
     font-weight: 700;
@@ -129,46 +129,46 @@ const toggleProducts = () => {
 }
 
 // Nav 展开动画
-.nav-expand-enter-active,
-.nav-expand-leave-active {
+.mb-nav-expand-enter-active,
+.mb-nav-expand-leave-active {
   overflow: hidden;
   transition: max-height 0.3s ease-out;
 }
 
-.nav-expand-enter-from,
-.nav-expand-leave-to {
+.mb-nav-expand-enter-from,
+.mb-nav-expand-leave-to {
   max-height: 0 !important;
 }
 
-.nav-expand-enter-to,
-.nav-expand-leave-from {
+.mb-nav-expand-enter-to,
+.mb-nav-expand-leave-from {
   max-height: 500px !important;
 }
 
 // 子菜单展开动画
-.submenu-expand-enter-active,
-.submenu-expand-leave-active {
+.mb-submenu-expand-enter-active,
+.mb-submenu-expand-leave-active {
   overflow: hidden;
   transition: max-height 0.25s ease-out;
 }
 
-.submenu-expand-enter-from,
-.submenu-expand-leave-to {
+.mb-submenu-expand-enter-from,
+.mb-submenu-expand-leave-to {
   max-height: 0 !important;
 }
 
-.submenu-expand-enter-to,
-.submenu-expand-leave-from {
+.mb-submenu-expand-enter-to,
+.mb-submenu-expand-leave-from {
   max-height: 300px !important;
 }
 
-.mobile-nav {
+.mb-mobile-nav {
   background: #030014;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   max-height: 500px;
 }
 
-.nav-item {
+.mb-nav-item {
   padding: 10px;
   color: #FFF;
   font-size: 16px;
@@ -186,10 +186,10 @@ const toggleProducts = () => {
   }
 }
 
-.nav-item-wrapper {
+.mb-nav-item-wrapper {
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 
-  .nav-item {
+  .mb-nav-item {
     border-bottom: none;
   }
 
@@ -198,23 +198,23 @@ const toggleProducts = () => {
   }
 }
 
-.nav-item-icon {
+.mb-nav-item-icon {
   transition: transform 0.3s ease;
   float: right;
 }
 
-.icon-rotated {
+.mb-icon-rotated {
   transform: rotate(180deg);
 }
 
-.dropdown-menu {
+.mb-dropdown-menu {
   background: rgba(63, 63, 63, 0.60);
   max-height: 300px;
   overflow: hidden;
   padding: 0;
 }
 
-.dropdown-item {
+.mb-dropdown-item {
   padding: 8px 10px 8px 24px;
   display: flex;
   align-items: center;
@@ -230,14 +230,14 @@ const toggleProducts = () => {
     color: #ffffff;
   }
 
-  .item-img {
+  .mb-item-img {
     width: 20px;
     height: 20px;
     flex-shrink: 0;
     opacity: 0.8;
   }
 
-  &:hover .item-img {
+  &:hover .mb-item-img {
     opacity: 1;
   }
 

app/components/mobile/home/Flowchart.vue

@@ -1,108 +1,108 @@
 <template>
-  <section class="h5-flowchart-container">
-    <div class="flowchart-users">
-      <User text="正常访客" :src="user1Icon" class="user1" />
-      <User text="DDos" :src="user2Icon" :tail-src="user2Tail" class="user2" />
-      <User text="异常访客" :src="user3Icon" :tail-src="user3Tail" class="user3" />
-      <User text="... ..." :src="user4Icon" :tail-src="user4Tail" class="user4" />
+  <section class="mb-flowchart-container">
+    <div class="mb-flowchart-users">
+      <User text="正常访客" :src="user1Icon" class="mb-user1" />
+      <User text="DDos" :src="user2Icon" :tail-src="user2Tail" class="mb-user2" />
+      <User text="异常访客" :src="user3Icon" :tail-src="user3Tail" class="mb-user3" />
+      <User text="... ..." :src="user4Icon" :tail-src="user4Tail" class="mb-user4" />
     </div>
-    <div class="flowchart-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>
-      <div class="text4 text-box">移动端/PC/客户端APP（Android、ios、Windows）</div>
+    <div class="mb-flowchart-arrow">
+      <img class="mb-arrow" src="~/assets/svg/home/arrow.svg" alt="arrow" />
+      <div class="mb-text1 mb-text-box">浏览器域名</div>
+      <div class="mb-text2 mb-text-box">DNS 引流</div>
+      <div class="mb-text3 mb-text-box">SDK 引流</div>
+      <div class="mb-text4 mb-text-box">移动端/PC/客户端 APP（Android、ios、Windows）</div>
     </div>
-    <div class="flowchart-block">
-      <div class="block-ads">
-        <div class="block-title">
+    <div class="mb-flowchart-block">
+      <div class="mb-block-ads">
+        <div class="mb-block-title">
           清洗系统（ADS）集群
         </div>
-        <div class="ads-contnet">
-          <div class="ads-text">近源清洗</div>
-          <div class="ads-text">BGP调度</div>
-          <div class="ads-text">SYN\ UDP\ACK......</div>
+        <div class="mb-ads-contnet">
+          <div class="mb-ads-text">近源清洗</div>
+          <div class="mb-ads-text">BGP 调度</div>
+          <div class="mb-ads-text">SYN\ UDP\ACK......</div>
         </div>
       </div>
-      <div class="block-arrow1">
-        <img class="arrow1" src="~/assets/svg/home/arrow1.svg" alt="arrow1">
+      <div class="mb-block-arrow1">
+        <img class="mb-arrow1" src="~/assets/svg/home/arrow1.svg" alt="arrow1">
       </div>
-      <div class="block-yun">
-        <div class="block-title">
+      <div class="mb-block-yun">
+        <div class="mb-block-title">
           云端纵深防御平台
         </div>
-        <div class="yun-contnet">
-          <div class="yun-item">
-            <div class="yun-item-title">WAF</div>
-            <div class="yun-item-desc">防漏洞、防入侵、防爬虫、<br>防盗链Web蜜网、敏感词替换......</div>
+        <div class="mb-yun-contnet">
+          <div class="mb-yun-item">
+            <div class="mb-yun-item-title">WAF</div>
+            <div class="mb-yun-item-desc">防漏洞、防入侵、防爬虫、<br>防盗链 Web 蜜网、敏感词替换......</div>
           </div>
-          <div class="yun-item">
-            <div class="yun-item-title">CC防护</div>
-            <div class="yun-item-desc">经典防御策略模式，精准访问控制（DIY）</div>
+          <div class="mb-yun-item">
+            <div class="mb-yun-item-title">CC 防护</div>
+            <div class="mb-yun-item-desc">经典防御策略模式，精准访问控制（DIY）</div>
           </div>
-          <div class="yun-item">
-            <div class="yun-item-title">DDoS防护</div>
-            <div class="yun-item-desc">节点调度网络（Web、TCP、SDK）</div>
+          <div class="mb-yun-item">
+            <div class="mb-yun-item-title">DDoS 防护</div>
+            <div class="mb-yun-item-desc">节点调度网络（Web、TCP、SDK）</div>
           </div>
-          <div class="yun-item">
-            <div class="yun-item-title">性能优化</div>
-            <div class="yun-item-desc">页面压缩、异步加载、移动端跳转全链路优化、Web自适应、高级缓存</div>
+          <div class="mb-yun-item">
+            <div class="mb-yun-item-title">性能优化</div>
+            <div class="mb-yun-item-desc">页面压缩、异步加载、移动端跳转全链路优化、Web 自适应、高级缓存</div>
           </div>
         </div>
       </div>
     </div>
-    <div class="flowchart-footer">
-      <div class="footer-left">
-        <div class="left-top">
-          <div class="footer-text left-text">安全联动</div>
-          <img class="top-img" src="~/assets/svg/home/arrow5.svg" alt="arrow5" />
+    <div class="mb-flowchart-footer">
+      <div class="mb-footer-left">
+        <div class="mb-left-top">
+          <div class="mb-footer-text mb-left-text">安全联动</div>
+          <img class="mb-top-img" src="~/assets/svg/home/arrow5.svg" alt="arrow5" />
         </div>
-        <div class="left-content">
-          <div class="block-title">
+        <div class="mb-left-content">
+          <div class="mb-block-title">
             大数据安全运营分析中心
           </div>
-          <div class="center-content">
-            <div class="center-row">
-              <div class="center-item half">
-                <div class="item-title">AI实时决策引擎</div>
-                <div class="item-desc">日志管理、漏洞扫描</div>
+          <div class="mb-center-content">
+            <div class="mb-center-row">
+              <div class="mb-center-item mb-half">
+                <div class="mb-item-title">AI 实时决策引擎</div>
+                <div class="mb-item-desc">日志管理、漏洞扫描</div>
               </div>
-              <div class="center-item half">
-                <div class="item-title">语义语法分析引擎</div>
-                <div class="item-desc">运营分析、安全值守</div>
+              <div class="mb-center-item mb-half">
+                <div class="mb-item-title">语义语法分析引擎</div>
+                <div class="mb-item-desc">运营分析、安全值守</div>
               </div>
             </div>
-            <div class="center-row">
-              <div class="center-item half">
-                <div class="item-title">规则监测引擎</div>
-                <div class="item-desc">威胁情报、安全重保</div>
+            <div class="mb-center-row">
+              <div class="mb-center-item mb-half">
+                <div class="mb-item-title">规则监测引擎</div>
+                <div class="mb-item-desc">威胁情报、安全重保</div>
               </div>
-              <div class="center-item half">
-                <div class="item-title">威胁情报</div>
-                <div class="item-desc">渗透测试、大屏展示</div>
+              <div class="mb-center-item mb-half">
+                <div class="mb-item-title">威胁情报</div>
+                <div class="mb-item-desc">渗透测试、大屏展示</div>
               </div>
             </div>
-            <div class="center-item full">
-              <div class="item-title">安全分析统计</div>
-              <div class="item-desc">cc攻击分析、漏洞入侵分析、BOT面板、实时态势......</div>
+            <div class="mb-center-item mb-full">
+              <div class="mb-item-title">安全分析统计</div>
+              <div class="mb-item-desc">cc 攻击分析、漏洞入侵分析、BOT 面板、实时态势......</div>
             </div>
-            <div class="center-item full">
-              <div class="item-title">业务访问分析统计</div>
-              <div class="item-desc">访问分析、热点URL、热点子域名、请求分布、状态码、流量宽带......</div>
+            <div class="mb-center-item mb-full">
+              <div class="mb-item-title">业务访问分析统计</div>
+              <div class="mb-item-desc">访问分析、热点 URL、热点子域名、请求分布、状态码、流量宽带......</div>
             </div>
           </div>
         </div>
       </div>
-      <div class="footer-right">
-        <div class="right-top">
-          <div class="footer-text right-text">洁净流量</div>
-          <img class="right-img" src="~/assets/svg/home/arrow6.svg" alt="arrow6 " />
+      <div class="mb-footer-right">
+        <div class="mb-right-top">
+          <div class="mb-footer-text mb-right-text">洁净流量</div>
+          <img class="mb-right-img" src="~/assets/svg/home/arrow6.svg" alt="arrow6 " />
         </div>
-        <div class="right-server">
-          <img class="server-img" src="~/assets/svg/home/server.svg" alt="server" />
-          <img  class="arrow4" src="~/assets/svg/home/arrow4.svg" alt="arrow4">
+        <div class="mb-right-server">
+          <img class="mb-server-img" src="~/assets/svg/home/server.svg" alt="server" />
+          <img  class="mb-arrow4" src="~/assets/svg/home/arrow4.svg" alt="arrow4">
         </div>
-        <div class="server-text">
+        <div class="mb-server-text">
           源服务器
         </div>
       </div>
@@ -120,35 +120,35 @@ import user3Tail from '~/assets/svg/home/user3-tail.svg'
 import user4Tail from '~/assets/svg/home/user4-tail.svg'
 </script>
 <style lang="scss" scoped>
-.h5-flowchart-container {
+.mb-flowchart-container {
   width: 343px;
   position: relative;
   box-sizing: border-box;
   margin: 0 auto;
 
-  .flowchart-users {
+  .mb-flowchart-users {
     position: relative;
 
-    .user1 {
+    .mb-user1 {
       position: absolute;
       top: 0;
       left: 75px;
       z-index: 1;
     }
 
-    .user2 {
+    .mb-user2 {
       position: absolute;
       top: 0;
       right: 112px;
     }
 
-    .user3 {
+    .mb-user3 {
       position: absolute;
       top: 0;
       right: 56px;
     }
 
-    .user4 {
+    .mb-user4 {
       position: absolute;
       top: 0;
       right: 0;
@@ -156,13 +156,13 @@ import user4Tail from '~/assets/svg/home/user4-tail.svg'
 
   }
 
-  .flowchart-arrow {
+  .mb-flowchart-arrow {
     position: relative;
     color: #FFF;
     font-size: 10px;
     font-weight: 400;
 
-    .arrow {
+    .mb-arrow {
       position: absolute;
       width: 148px;
       top: 35px;
@@ -170,7 +170,7 @@ import user4Tail from '~/assets/svg/home/user4-tail.svg'
       z-index: 0;
     }
 
-    .text-box {
+    .mb-text-box {
       position: absolute;
       display: flex;
       justify-content: center;
@@ -180,28 +180,28 @@ import user4Tail from '~/assets/svg/home/user4-tail.svg'
       background: #3F327D;
     }
 
-    .text1 {
+    .mb-text1 {
       left: 0;
       top: 70px;
       width: 88px;
       height: 20px;
     }
 
-    .text2 {
+    .mb-text2 {
       left: 6px;
       top: 102px;
       width: 65px;
       height: 18px;
     }
 
-    .text3 {
+    .mb-text3 {
       left: 142px;
       top: 104px;
       width: 52px;
       height: 17px;
     }
 
-    .text4 {
+    .mb-text4 {
       right: 0;
       top: 56px;
       width: 159px;
@@ -209,7 +209,7 @@ import user4Tail from '~/assets/svg/home/user4-tail.svg'
     }
   }
 
-  .block-title {
+  .mb-block-title {
     width: 100%;
     height: 20px;
     background: rgba(128, 119, 255, 0.50);
@@ -221,11 +221,11 @@ import user4Tail from '~/assets/svg/home/user4-tail.svg'
     font-weight: 400;
   }
 
-  .flowchart-block {
+  .mb-flowchart-block {
     width: 100%;
     padding-top: 138px;
 
-    .block-ads {
+    .mb-block-ads {
       width: 100%;
       border-radius: 4px;
       border: 1px solid #8B74FF;
@@ -234,14 +234,14 @@ import user4Tail from '~/assets/svg/home/user4-tail.svg'
       font-weight: 400;
       line-height: 6px;
 
-      .ads-contnet {
+      .mb-ads-contnet {
         font-size: 10px;
         height: 40px;
         display: flex;
         align-items: center;
         justify-content: space-around;
 
-        .ads-text {
+        .mb-ads-text {
           display: flex;
           width: 99px;
           height: 20px;
@@ -255,14 +255,14 @@ import user4Tail from '~/assets/svg/home/user4-tail.svg'
 
 
 
-    .block-yun {
+    .mb-block-yun {
       width: 100%;
       border-radius: 4px;
       border: 1px solid #8077FF;
       background: rgba(63, 51, 125, 0.30);
     }
 
-    .yun-contnet {
+    .mb-yun-contnet {
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
@@ -271,7 +271,7 @@ import user4Tail from '~/assets/svg/home/user4-tail.svg'
       position: relative;
 
 
-      .yun-item {
+      .mb-yun-item {
         border-radius: 4px;
         background: rgba(139, 116, 255, 0.50);
         display: flex;
@@ -282,13 +282,13 @@ import user4Tail from '~/assets/svg/home/user4-tail.svg'
         position: relative;
         z-index: 1;
 
-        .yun-item-title {
+        .mb-yun-item-title {
           color: #FFF;
           font-size: 12px;
           font-weight: 700;
         }
 
-        .yun-item-desc {
+        .mb-yun-item-desc {
           color: #FFF;
           font-size: 10px;
           font-weight: 400;
@@ -298,20 +298,18 @@ import user4Tail from '~/assets/svg/home/user4-tail.svg'
       }
     }
 
-
-
-    .block-arrow1 {
+    .mb-block-arrow1 {
       display: flex;
       justify-content: center;
     }
   }
 
-  .flowchart-footer {
+  .mb-flowchart-footer {
     width: 100%;
     display: flex;
     box-sizing: border-box;
 
-    .footer-text {
+    .mb-footer-text {
       position: absolute;
       display: flex;
       width: 80px;
@@ -328,24 +326,24 @@ import user4Tail from '~/assets/svg/home/user4-tail.svg'
       z-index: 1;
     }
 
-    .left-text {
+    .mb-left-text {
       top: 16px;
       left: 128px;
     }
 
-    .right-text {
+    .mb-right-text {
       top: 61px;
       left: 9px;
     }
   }
 
-  .footer-left {
+  .mb-footer-left {
     width: 254px;
 
-    .left-top {
+    .mb-left-top {
       position: relative;
 
-      .top-img {
+      .mb-top-img {
         position: relative;
         width: 14px;
         height: 60px;
@@ -353,7 +351,7 @@ import user4Tail from '~/assets/svg/home/user4-tail.svg'
       }
     }
 
-    .left-content {
+    .mb-left-content {
       width: 100%;
       border-radius: 4px;
       border: 1px solid #8077FF;
@@ -362,7 +360,7 @@ import user4Tail from '~/assets/svg/home/user4-tail.svg'
       flex-direction: column;
       box-sizing: border-box;
 
-      .center-content {
+      .mb-center-content {
         flex: 1;
         padding: 6px 10px 17px;
         display: flex;
@@ -370,14 +368,14 @@ import user4Tail from '~/assets/svg/home/user4-tail.svg'
         justify-content: space-between;
         gap: 6px;
 
-        .center-row {
+        .mb-center-row {
           display: flex;
           justify-content: space-between;
           gap: 6px;
           width: 100%;
         }
 
-        .center-item {
+        .mb-center-item {
           display: flex;
           width: 236px;
           background: rgba(139, 116, 255, 0.50);
@@ -388,21 +386,21 @@ import user4Tail from '~/assets/svg/home/user4-tail.svg'
           padding: 2px 6px;
           gap: 2px;
 
-          &.half {
+          &.mb-half {
             width: 114px;
           }
 
-          &.full {
+          &.mb-full {
             width: 100%;
           }
 
-          .item-title {
+          .mb-item-title {
             color: #FFF;
             font-size: 12px;
             font-weight: 700;
           }
 
-          .item-desc {
+          .mb-item-desc {
             color: #FFF;
             font-size: 10px;
             font-weight: 400;
@@ -412,32 +410,32 @@ import user4Tail from '~/assets/svg/home/user4-tail.svg'
     }
   }
 
-  .footer-right {
+  .mb-footer-right {
     width: 89px;
 
-    .right-top {
+    .mb-right-top {
       position: relative;
     }
 
-    .right-img {
+    .mb-right-img {
       position: relative;
       width: 14px;
       height: 196px;
       left: 40px;
     }
 
-    .right-server {
+    .mb-right-server {
       position: relative;
     }
 
-    .arrow4 {
+    .mb-arrow4 {
       position: absolute;
       left: 0;
       width: 14px;
       top: 34px;
     }
 
-    .server-img {
+    .mb-server-img {
       position: relative;
       width: 72px;
       height: 56px;
@@ -445,7 +443,7 @@ import user4Tail from '~/assets/svg/home/user4-tail.svg'
       z-index: 1;
     }
 
-    .server-text {
+    .mb-server-text {
       display: flex;
       width: 80px;
       height: 24px;
@@ -462,7 +460,7 @@ import user4Tail from '~/assets/svg/home/user4-tail.svg'
     }
   }
 
-  .arrow1 {
+  .mb-arrow1 {
     width: 14px;
     height: 20px;
   }

app/components/mobile/home/PlansSection.vue

@@ -2,23 +2,23 @@
   <section class="mb-plans">
     <div class="mb-plans-list">
       <article v-for="plan in plans" :key="plan.name" class="mb-plan-card">
-        <header class="card-head">
+        <header class="mb-card-head">
           <img width="20" height="20" :src="plan.icon" alt="icon" />
-          <div class="head-text">
-            <div class="plan-name">{{ plan.name }}</div>
-            <div class="plan-desc">{{ plan.desc }}</div>
+          <div class="mb-head-text">
+            <div class="mb-plan-name">{{ plan.name }}</div>
+            <div class="mb-plan-desc">{{ plan.desc }}</div>
           </div>
         </header>
-        <div class="price-row">
-          <div class="price">{{ plan.price }}</div>
-          <div class="price-meta">
-            <del class="old-price">{{ plan.oldPrice }}</del>
-            <span class="save-badge">{{ plan.save }}</span>
+        <div class="mb-price-row">
+          <div class="mb-price">{{ plan.price }}</div>
+          <div class="mb-price-meta">
+            <del class="mb-old-price">{{ plan.oldPrice }}</del>
+            <span class="mb-save-badge">{{ plan.save }}</span>
           </div>
         </div>
-        <div class="divider" aria-hidden="true" />
-        <ul class="features">
-          <li v-for="(feature, idx) in plan.features" :key="idx" class="feature-item">{{ feature }}</li>
+        <div class="mb-divider" aria-hidden="true" />
+        <ul class="mb-features">
+          <li v-for="(feature, idx) in plan.features" :key="idx" class="mb-feature-item">{{ feature }}</li>
         </ul>
       </article>
     </div>
@@ -50,26 +50,26 @@ import { plans } from '~/utils/plans'
   box-sizing: border-box;
 }
 
-.card-head {
+.mb-card-head {
   display: flex;
   align-items: center;
   gap: 10px;
 }
 
-.head-text {
+.mb-head-text {
   display: flex;
   align-items: center;
   gap: 6px;
 }
 
-.plan-name {
+.mb-plan-name {
   color: #FFF;
   font-size: 20px;
   font-weight: 700;
   line-height: 20px;
 }
 
-.plan-desc {
+.mb-plan-desc {
   color: #FFF;
   font-size: 12px;
   font-weight: 400;
@@ -79,7 +79,7 @@ import { plans } from '~/utils/plans'
   text-overflow: ellipsis;
 }
 
-.price-row {
+.mb-price-row {
   margin-top: 12px;
   display: flex;
   align-items: center;
@@ -87,7 +87,7 @@ import { plans } from '~/utils/plans'
   gap: 12px;
 }
 
-.price {
+.mb-price {
   font-size: 36px;
   font-weight: 700;
   line-height: 40px;
@@ -96,14 +96,14 @@ import { plans } from '~/utils/plans'
   white-space: nowrap;
 }
 
-.price-meta {
+.mb-price-meta {
   display: flex;
   align-items: center;
   gap: 10px;
   min-width: 0;
 }
 
-.old-price {
+.mb-old-price {
   font-size: 12px;
   font-weight: 500;
   line-height: 12px;
@@ -111,7 +111,7 @@ import { plans } from '~/utils/plans'
   white-space: nowrap;
 }
 
-.save-badge {
+.mb-save-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -126,14 +126,14 @@ import { plans } from '~/utils/plans'
   white-space: nowrap;
 }
 
-.divider {
+.mb-divider {
   height: 1px;
   width: 100%;
   background: rgba(204, 213, 234, 0.50);
   margin: 12px 0 14px;
 }
 
-.features {
+.mb-features {
   margin: 0;
   padding: 0;
   list-style: none;
@@ -143,7 +143,7 @@ import { plans } from '~/utils/plans'
   row-gap: 10px;
 }
 
-.feature-item {
+.mb-feature-item {
   position: relative;
   padding-left: 20px;
   font-size: 12px;

app/components/mobile/home/ProductTabs.vue

@@ -3,23 +3,23 @@
     <!-- tabs 盖在视频下半部分 -->
     <section class="mb-tabs-wrapper">
       <section class="mb-tabs">
-        <div v-for="(tab, index) in productTabs" :key="index" class="tab-item" :class="{ active: activeTab === index }"
+        <div v-for="(tab, index) in productTabs" :key="index" class="mb-tab-item" :class="{ 'mb-active': activeTab === index }"
           @click="activeTab = index">
           {{ tab.name }}
         </div>
       </section>
     </section>
     <!-- cards 正常向下排列 -->
-    <section class="mb-cards" :class="{ 'is-multi': isMultiLayout }">
+    <section class="mb-cards" :class="{ 'mb-is-multi': isMultiLayout }">
       <div v-for="(card, index) in displayCards" :key="index" class="mb-card">
-        <h3 class="card-title">{{ card.title }}</h3>
-        <p class="card-description">{{ card.description }}</p>
-        <div v-if="card.features?.length" class="card-features">
-          <span v-for="(feature, idx) in card.features" :key="idx" class="feature-tag">{{ feature }}</span>
+        <h3 class="mb-card-title">{{ card.title }}</h3>
+        <p class="mb-card-description">{{ card.description }}</p>
+        <div v-if="card.features?.length" class="mb-card-features">
+          <span v-for="(feature, idx) in card.features" :key="idx" class="mb-feature-tag">{{ feature }}</span>
         </div>
-        <div class="card-actions">
-          <button class="btn-primary" type="button">更多详情</button>
-          <button class="btn-secondary" type="button">0元体验</button>
+        <div class="mb-card-actions">
+          <button class="mb-btn-primary" type="button">更多详情</button>
+          <button class="mb-btn-secondary" type="button">0 元体验</button>
         </div>
       </div>
     </section>
@@ -75,7 +75,7 @@ const isMultiLayout = computed(() => currentTabData.value?.layout === 'multi')
     display: none;
   }
 
-  .tab-item {
+  .mb-tab-item {
     flex-shrink: 0;
     font-weight: 400;
     color: #ffffff;
@@ -93,13 +93,13 @@ const isMultiLayout = computed(() => currentTabData.value?.layout === 'multi')
     border-radius: 16px;
     background: transparent;
 
-    &.active {
+    &.mb-active {
       background: linear-gradient(62.84deg, rgba(130, 77, 255, 1) 0%, rgba(164, 125, 255, 1) 100%);
       color: #ffffff;
       font-weight: 500;
     }
 
-    &:hover:not(.active) {
+    &:hover:not(.mb-active) {
       color: #bdbdbd;
       transform: translateY(-1px);
     }
@@ -116,7 +116,7 @@ const isMultiLayout = computed(() => currentTabData.value?.layout === 'multi')
   gap: 8px;
 }
 
-.mb-cards.is-multi {
+.mb-cards.mb-is-multi {
   flex-direction: row;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
@@ -144,12 +144,12 @@ const isMultiLayout = computed(() => currentTabData.value?.layout === 'multi')
   flex-direction: column;
 }
 
-.mb-cards.is-multi .mb-card {
+.mb-cards.mb-is-multi .mb-card {
   flex: 0 0 96%;
   scroll-snap-align: center;
 }
 
-.card-title {
+.mb-card-title {
   margin: 0;
   text-align: center;
   color: #ffffff;
@@ -158,7 +158,7 @@ const isMultiLayout = computed(() => currentTabData.value?.layout === 'multi')
   line-height: 18px;
 }
 
-.card-description {
+.mb-card-description {
   margin: 12px 0 0;
   color: rgba(255, 255, 255, 0.65);
   font-size: 12px;
@@ -170,21 +170,21 @@ const isMultiLayout = computed(() => currentTabData.value?.layout === 'multi')
   overflow: hidden;
 }
 
-.card-features {
+.mb-card-features {
   margin-top: 12px;
   display: flex;
   flex-direction: column;
   gap: 10px;
 }
 
-.feature-tag {
+.mb-feature-tag {
   font-size: 12px;
   font-weight: 400;
   line-height: 12px;
   color: #9b71ff;
 }
 
-.card-actions {
+.mb-card-actions {
   margin-top: auto;
   padding-top: 14px;
   display: flex;
@@ -192,7 +192,7 @@ const isMultiLayout = computed(() => currentTabData.value?.layout === 'multi')
   gap: 12px;
 }
 
-.btn-primary {
+.mb-btn-primary {
   display: flex;
   width: 72px;
   height: 20px;
@@ -207,7 +207,7 @@ const isMultiLayout = computed(() => currentTabData.value?.layout === 'multi')
   padding: 2px 6px;
 }
 
-.btn-secondary {
+.mb-btn-secondary {
   display: flex;
   width: 72px;
   height: 20px;

app/components/mobile/home/StatsSection.vue

@@ -1,25 +1,25 @@
 <template>
-  <section class="stats-section">
+  <section class="mb-stats-section">
     <!-- 顶部数据卡片 -->
-    <div class="stats-cards">
-      <div :style="{ background: item.background }" class="card" v-for="(item, index) in statsList" :key="index">
-        <div class="card-icon">
+    <div class="mb-stats-cards">
+      <div :style="{ background: item.background }" class="mb-card" v-for="(item, index) in statsList" :key="index">
+        <div class="mb-card-icon">
           <img width="24" :src="item.icon" :alt="item.label" />
         </div>
-        <div class="card-content">
-          <div :style="{ background: item.color }" class="card-bg"></div>
-          <div class="value">{{ formatNumber(item.value) }}</div>
-          <div class="label">{{ item.label }}</div>
+        <div class="mb-card-content">
+          <div :style="{ background: item.color }" class="mb-card-bg"></div>
+          <div class="mb-value">{{ formatNumber(item.value) }}</div>
+          <div class="mb-label">{{ item.label }}</div>
         </div>
       </div>
     </div>
 
     <!-- 底部趋势图 -->
-    <div class="chart-section">
-      <h3 class="chart-title">24小时攻击趋势图</h3>
-      <div class="chart-container">
+    <div class="mb-chart-section">
+      <h3 class="mb-chart-title">24 小时攻击趋势图</h3>
+      <div class="mb-chart-container">
         <client-only>
-          <v-chart class="chart" :option="chartOption" autoresize />
+          <v-chart class="mb-chart" :option="chartOption" autoresize />
         </client-only>
       </div>
     </div>
@@ -77,7 +77,7 @@ const statsList = computed(() => [
 //   statsStore.startAutoIncrement()
 // })
 
-// 生成 24小时 Mock 数据
+// 生成 24 小时 Mock 数据
 const generateData = () => {
   const hours = []
   for (let i = 0; i < 24; i++) {
@@ -88,7 +88,7 @@ const generateData = () => {
   const seriesData3 = [] // WAF
 
   for (let i = 0; i < hours.length; i++) {
-    // 使用正弦波+随机数模拟波浪效果
+    // 使用正弦波 + 随机数模拟波浪效果
     seriesData1.push(Math.floor(30000 + Math.sin(i / 2) * 10000 + Math.random() * 5000))
     seriesData2.push(Math.floor(40000 + Math.sin(i / 2 + 1) * 15000 + Math.random() * 5000))
     seriesData3.push(Math.floor(20000 + Math.sin(i / 2 + 2) * 8000 + Math.random() * 5000))
@@ -156,7 +156,7 @@ const chartOption = computed(() => ({
   },
   series: [
     {
-      name: 'DDoS攻击',
+      name: 'DDoS 攻击',
       type: 'line',
       smooth: true,
       showSymbol: false,
@@ -177,7 +177,7 @@ const chartOption = computed(() => ({
       data: seriesData1
     },
     {
-      name: 'CC攻击',
+      name: 'CC 攻击',
       type: 'line',
       smooth: true,
       showSymbol: false,
@@ -198,7 +198,7 @@ const chartOption = computed(() => ({
       data: seriesData2
     },
     {
-      name: 'WAF拦截',
+      name: 'WAF 拦截',
       type: 'line',
       smooth: true,
       showSymbol: false,
@@ -223,20 +223,20 @@ const chartOption = computed(() => ({
 </script>
 
 <style scoped lang="scss">
-.stats-section {
+.mb-stats-section {
   width: 100%;
   margin: 30px auto;
   color: #fff;
 }
 
-.stats-cards {
+.mb-stats-cards {
   display: flex;
   justify-content: space-between;
   box-sizing: border-box;
   gap: 10px;
   margin-bottom: 22px;
 
-  .card {
+  .mb-card {
     flex: 1;
     position: relative;
     width: 108px;
@@ -247,7 +247,7 @@ const chartOption = computed(() => ({
     backdrop-filter: blur(1px);
     background: linear-gradient(181deg, rgba(130, 77, 255, 0.60) -50.14%, rgba(164, 125, 255, 0.00) 81.35%);
 
-    .card-bg {
+    .mb-card-bg {
       position: absolute;
       left: 50%;
       top: 0;
@@ -258,7 +258,7 @@ const chartOption = computed(() => ({
       border-radius: 50%;
     }
 
-    .card-content {
+    .mb-card-content {
       position: relative;
       z-index: 1;
       height: 100%;
@@ -270,7 +270,7 @@ const chartOption = computed(() => ({
       overflow: hidden;
     }
 
-    .card-icon {
+    .mb-card-icon {
       position: absolute;
       height: 24px;
       width: 24px;
@@ -280,11 +280,6 @@ const chartOption = computed(() => ({
       display: flex;
       align-items: center;
       justify-content: center;
-      // border-radius: 100px;
-      // border: 1px solid rgba(64, 64, 64, 0.50);
-      // background: rgba(255, 255, 255, 0.10);
-      // box-shadow: -20px 68px 20px 0 rgba(0, 0, 0, 0.00), -13px 43px 18px 0 rgba(0, 0, 0, 0.01), -7px 24px 15px 0 rgba(0, 0, 0, 0.04), -3px 11px 11px 0 rgba(0, 0, 0, 0.07), -1px 3px 6px 0 rgba(0, 0, 0, 0.08);
-      // backdrop-filter: blur(7.5px);
       z-index: 2;
 
       img {
@@ -295,13 +290,13 @@ const chartOption = computed(() => ({
       }
     }
 
-    .value {
+    .mb-value {
       color: #FFF;
       font-size: 18px;
       font-weight: 700;
     }
 
-    .label {
+    .mb-label {
       color: #C6BAFF;
       font-size: 9px;
       font-weight: 400;
@@ -309,21 +304,21 @@ const chartOption = computed(() => ({
   }
 }
 
-.chart-section {
+.mb-chart-section {
   text-align: center;
 
-  .chart-title {
+  .mb-chart-title {
     color: #FFF;
     font-size: 14px;
     font-weight: 400;
   }
 
-  .chart-container {
+  .mb-chart-container {
     width: 100%;
     height: 220px;
     position: relative;
 
-    .chart {
+    .mb-chart {
       width: 100%;
       height: 100%;
     }

app/components/mobile/home/User.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="h5-user-item">
-    <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 class="mb-h5-user-item">
+    <img :src="src" class="mb-user1-img" alt="user" />
+    <div class="mb-user1-text">{{ text }}</div>
+    <img v-if="tailSrc" class="mb-user-tail" :src="tailSrc" alt="user" aria-hidden="true" />
   </div>
 </template>
 <script setup>
@@ -26,18 +26,18 @@ const props = defineProps({
 });
 </script>
 <style lang="scss" scoped>
-.h5-user-item {
+.mb-h5-user-item {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 
-  .user1-img {
+  .mb-user1-img {
     width: 22px;
   }
 
-  .user1-text {
+  .mb-user1-text {
     display: flex;
     width: 46px;
     height: 15px;
@@ -53,7 +53,7 @@ const props = defineProps({
     line-height: 10px;
   }
 
-  .user-tail {
+  .mb-user-tail {
     position: absolute;
     width: 3px;
     height: 30px;

app/layouts/mobile.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="mobile-layout">
+  <div class="mb-layout">
     <Header />
-    <main class="mobile-layout-main">
+    <main class="mb-layout-main">
       <slot />
     </main>
     <Footer />
@@ -51,7 +51,7 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped lang="scss">
-.mobile-layout {
+.mb-layout {
   width: 100%;
   min-height: 100vh;
   background-color: #030014;
@@ -60,7 +60,7 @@ onBeforeUnmount(() => {
   box-sizing: border-box;
 }
 
-.mobile-layout-main {
+.mb-layout-main {
   flex: 1;
   width: 100%;
   padding: 44px 16px 16px;

app/pages/mobile/about.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="h5-about">
+  <div class="mb-about">
     <h1>关于（H5）</h1>
   </div>
 </template>
@@ -9,7 +9,7 @@
 </script>
 
 <style scoped lang="scss">
-.h5-about {
+.mb-about {
   color: #fff;
   text-align: center;
   padding-top: 40px;

nuxt.config.ts

@@ -19,17 +19,15 @@ export default defineNuxtConfig({
         rootValue: 37.5,
         unitPrecision: 4,
         propList: ['*'],
-        selectorBlackList: [],
+        selectorBlackList: [
+          'html',
+          'body',
+          // 排除所有不以 mb- 开头的类选择器
+          /^\.(?!mb-)/
+        ],
         replace: true,
         mediaQuery: false,
-        minRemValue: 0,
-        exclude: e => {
-          if (e.includes('/app/pages/mobile/') || e.includes('/app/components/mobile/') || e.includes('/app/layouts/mobile.vue')) {
-            return false
-          } else {
-            return true
-          }
-        }
+        minRemValue: 0
       }
     }
   },
@@ -62,4 +60,4 @@ export default defineNuxtConfig({
   //     }
   //   }
   // }
-})
+})