feat(web/mobile): 新增移动端首页及产品页视觉优化

- 新增移动端首页，包含产品标签页组件和粒子动画
- 优化Web端产品页视觉设计，使用静态图片替代视频背景
- 添加Vant UI库支持移动端组件开发
- 重构产品数据逻辑，提取为共享工具函数
- 更新PostCSS配置以支持移动端适配

app/components/ParticlesCanvas.vue

@@ -3,6 +3,12 @@
 </template>
 
 <script setup>
+const props = defineProps({
+  size: {
+    type: Number,
+    default: 1.5
+  }
+})
 import { onMounted, onUnmounted, ref } from 'vue'
 
 const canvasRef = ref(null)
@@ -25,7 +31,7 @@ const initParticles = (width, height) => {
       targetX: centerX,
       targetY: centerY,
       speed: 1.2 + Math.random() * 1.5,
-      size: 1.5 + Math.random() * 1,
+      size: props.size + Math.random() * 1,
       opacity: 0.3 + Math.random() * 0.7
     })
   }

app/components/home/ProductTabs.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="product-tabs-container">
     <section class="product-tabs">
-      <div v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: activeTab === index }"
+      <div v-for="(tab, index) in productTabs" :key="index" class="tab-item" :class="{ active: activeTab === index }"
         @click="activeTab = index">
         {{ tab.name }}
       </div>
@@ -19,87 +19,9 @@
 import { ref, computed } from 'vue'
 import MultiCardLayout from './ProductTabs/MultiCardLayout.vue'
 import SingleCardLayout from './ProductTabs/SingleCardLayout.vue'
-
+import { productTabs } from '~/utils/product'
 const activeTab = ref(0)
 
-const tabs = [
-  {
-    name: '网站安全加速',
-    layout: 'multi',
-    cards: [
-      {
-        title: 'Web安全加速',
-        description: '为游戏、电商、金融、医疗、门户等网站业务，提供DDoS、CC、页面篡改、爬虫等各类攻击防护，结合精准访问控制和全网联防联控，在抵御各类攻击的同时，保障网站业务的快速稳定访问。',
-        features: ['支持HTTP、HTTPS和WebSocket协议', '适用网站类业务']
-      },
-      {
-        title: 'DNS安全加速',
-        description: '安全可靠的智能DNS解析服务，具备多重灾备机制，支持IPv4、IPv6双栈，全球及自定义智能解析线路，运营商缓存刷新，提供大QPS DNS查询攻击、大流量DNS DDoS攻击等针对域名解析的攻击防御服务，为网站域名提供安全、稳定、可靠的解析体验。',
-        features: ['支持定制专用清洗集群']
-      },
-      {
-        title: '扫描观测(漏洞扫描)',
-        description: '为网站业务提供安全体检服务，模拟黑客视角，对网站业务进行可用性监测、内容安全监测、漏洞渗透性探测等风险多维度巡检综合评估，提出相应安全对策，告警安全事件，输出网站安全体检报告',
-        features: []
-      }
-    ]
-  },
-  {
-    name: 'TCP业务安全',
-    layout: 'single',
-    cards: [
-      {
-        title: 'TCP安全加速',
-        description: '为游戏、电商、金融等客户的TCP协议应用业务提供DDoS替身安全防御服务，支持HTTP、HTTPS、WebSocket和TCP协议，适用于网站及非网站业务 隐藏目标源IP，将DDoS攻击流量牵引至TCP安全加速的高防清洗集群，结合 全球IP威胁情报库、用户行为分析、特征学习、防护对抗等多种技术，有效防护SYN Flood、UDP Flood、ACK Flood、ICMP Flood、DNS Query Flood、NTP Reply Flood、CC等DDoS攻击，全方位对威胁进行阻断过滤',
-        features: ['全力防御，不按防御大小计费 ', '超80Tbps储存宽带，融合强大得清洗能力']
-      }
-    ]
-  },
-  {
-    name: '客户端安全加速',
-    layout: 'single',
-    cards: [
-      {
-        title: 'SDK安全加速 AntiDDoS SDK （Client&Mobile SDK）',
-        description: '专门针对游戏、电商、金融等APP提供DDoS、CC攻击防护服务通过在端应用嵌入安全SDK，结合风控大脑，形成主动端安全、风险管控调度、云安全资源池的端管云一体化安全架构核心风控大脑持续评估每个终端设备环境、网络环境、应用程序和用户行为是否可信，标注威胁等级 未通过可信认证的终端将被拒绝服务且进行攻击智能拆分调度，可信用户即使在被攻击后也能秒级调度，最终做到动态地隔离风险用户，定位攻击者',
-        features: ['终端管控、智能调度、DDoS/CC免疫、链路加密、精准溯源']
-      }
-    ]
-  },
-  {
-    name: '专家服务',
-    layout: 'single',
-    cards: [
-      {
-        title: '“管家式”人工服务,全天候业务护航',
-        description: '提供等保咨询、渗透测试、应急演练、应急响应、现场值守、重点事件安全保障等多种专家服务',
-        features: []
-      }
-    ]
-  },
-  {
-    name: '零信任安全访问',
-    layout: 'single',
-    cards: [
-      {
-        title: '零信任安全访问',
-        description: '为企业应用提供服务级的动态自适应细粒度授权，替代内部VPN，实现应用统一管理、企业应用程序远程访问服务，解决企业内、外部相对应的安全风险',
-        features: []
-      }
-    ]
-  },
-  {
-    name: '出海业务保障',
-    layout: 'single',
-    cards: [
-      {
-        title: '出海业务保障',
-        description: '为企业应用提供服务级的动态自适应细粒度授权，替代内部VPN，实现应用统一管理、企业应用程序远程访问服务，解决企业内、外部相对应的安全风险',
-        features: []
-      }
-    ]
-  }
-]
 
 const currentTabData = computed(() => tabs[activeTab.value])
 
@@ -132,7 +54,7 @@ const currentLayout = computed(() => {
   gap: 22px;
 
   .tab-item {
-    
+
     font-size: 16px;
     font-weight: 400;
     line-height: 16px;

app/components/mobile/home/ProductTabs.vue

@@ -0,0 +1,91 @@
+<template>
+  <section class="mb-tabs-container">
+    <section class="mb-tabs">
+      <div v-for="(tab, index) in productTabs" :key="index" class="tab-item" :class="{ active: activeTab === index }"
+        @click="activeTab = index">
+        {{ tab.name }}
+      </div>
+      <!-- <van-tabs v-model:active="activeTab">
+        <van-tab v-for="(tab, index) in productTabs" :title="tab.name">
+        </van-tab>
+      </van-tabs> -->
+    </section>
+  </section>
+</template>
+<script setup>
+import { productTabs } from '~/utils/product';
+
+const activeTab = ref(0)
+
+
+const currentTabData = computed(() => tabs[activeTab.value])
+
+
+</script>
+<style lang="scss" scoped>
+.mb-tabs-container {
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top: 58%;
+  transform: translateY(-50%);
+  z-index: 2;
+}
+
+.mb-tabs {
+  width: 100%;
+  box-sizing: border-box;
+  height: 42px;
+  margin: 0 auto;
+  border-radius: 150px;
+  background: linear-gradient(177deg, rgba(165, 101, 255, 0.30) -20.47%, rgba(3, 0, 20, 0.30) 134.25%);
+  backdrop-filter: blur(20px);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 12px;
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+
+  /* 隐藏滚动条 */
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .tab-item {
+    flex-shrink: 0;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1;
+    color: #ffffff;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 88px;
+    height: 32px;
+    padding: 0 16px;
+    border-radius: 16px;
+    background: transparent;
+
+    &.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) {
+      color: #bdbdbd;
+      transform: translateY(-1px);
+    }
+  }
+
+
+}
+</style>

app/components/products/SecurityServicesSuite.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="service-container">
-    <NuxtImg src="/images/products/SecurityServicesSuite.png" class="bg-img" alt="bg-img" />
+    <!-- <NuxtImg src="/images/products/SecurityServicesSuite.png" class="bg-img" alt="bg-img" /> -->
     <div class="service-content">
       <h2>为您定制的企业级安全服务包</h2>
       <div class="service-cards">

app/pages/mobile/index.vue

@@ -1,32 +1,78 @@
 <template>
-  <div class="h5-index">
-    <h1>H5 首页</h1>
-    <nav>
-      <NuxtLink to="/mobile/about">关于（H5）</NuxtLink>
-    </nav>
-  </div>
+  <section class="mb-index">
+    <section>
+      <div class="mb-home-title">
+        <h1>您专注业务，我们守护安全再强的攻击,也有攻不破的防线</h1>
+        <p>高防服务器 | 高防DNS | 游戏盾SDK高防CDN 全方位守护您的业务</p>
+      </div>
+      <div class="mb-video-content">
+        <video ref="videoRef" class="mb-video" preload="auto" :src="homeVideo" autoplay loop muted playsinline
+          @loadedmetadata="onVideoLoaded"></video>
+        <ParticlesCanvas :size="1" class="canvas-overlay" />
+        <ProductTabs />
+      </div>
+    </section>
+  </section>
 </template>
 
 <script setup>
-
+import homeVideo from '~/assets/video/home.webm'
+import ProductTabs from '~/components/mobile/home/ProductTabs.vue';
 </script>
 
 <style scoped lang="scss">
-.h5-index {
-  color: #fff;
-  text-align: center;
-  padding-top: 40px;
-
-  h1 {
-    font-size: 32px;
-    margin-bottom: 24px;
+.mb-index {
+  .mb-home-title {
+    position: relative;
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    z-index: 1;
+
+    h1 {
+      text-align: center;
+      width: 240px;
+      font-size: 18px;
+      font-weight: 500;
+      line-height: 26px;
+      background: linear-gradient(90deg, #7C4DFF 0.24%, #DEB9FF 45.03%, #617FFF 132.52%);
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+
+    p {
+      color: rgba(255, 255, 255, 0.80);
+      width: 184px;
+      text-align: center;
+      font-size: 12px;
+      font-weight: 350;
+      line-height: 20px;
+    }
   }
 
-  nav {
-    a {
-      color: #7D46FF;
-      text-decoration: none;
+  .mb-video-content {
+    position: relative;
+    margin-top: -10%;
+    z-index: 0;
+
+
+    .mb-video {
+      width: 100%;
+      height: auto;
+    }
+
+    .canvas-overlay {
+      position: absolute;
+      top: 40%;
+      transform: translateY(-50%);
+      left: 0;
+      height: 80px;
     }
   }
+
+
 }
 </style>

app/pages/web/products/sdk.vue

@@ -1,7 +1,7 @@
 <template>
   <section>
     <section class="video-section">
-      <div class="left-bg"></div>
+      <!-- <div class="left-bg"></div> -->
       <div class="right-bg"></div>
       <!-- <video ref="videoRef" class="video-bg" src="~/assets/video/sdk.mp4" autoplay loop muted playsinline
         @loadedmetadata="onVideoLoaded"></video> -->
@@ -82,7 +82,7 @@ useHead(() => ({
   .right-bg {
     position: absolute;
     top: 0;
-    right: 0;
+    right: 10%;
     width: 1216px;
     height:840px;
     background-image: url('/images/products/sdk-bg1.png');
@@ -90,7 +90,7 @@ useHead(() => ({
     background-position: center;
     background-repeat: no-repeat;
     z-index: 3;
-    opacity: 0.6;
+    // opacity: 0.6;
   }
 
   .video-bg {

app/pages/web/products/web.vue

@@ -1,8 +1,10 @@
 <template>
   <div>
     <section class="video-section">
-      <video ref="videoRef" class="video-bg" src="~/assets/video/web.mp4" autoplay loop muted playsinline
-        @loadedmetadata="onVideoLoaded"></video>
+      <div class="cdn-dg">
+        <NuxtImg width="500" class="cdn-bg" src="/images/products/cdn-bg.png" alt="cdn" />
+      </div>
+      <!-- <NuxtImg class="cdn-dg" src="/images/products/dengg.png" alt="dengg" /> -->
       <div class="video-title">
         <p class="video-text">Intelligent routing / dynamic optimization / real-time processing</p>
         <h1><span>智能</span>路由/<span>动态</span>优化/<span>实时</span>处理</h1>
@@ -42,9 +44,9 @@
         </div>
       </div>
     </section>
-    <section class="cdn-bg">
+    <!-- <section class="cdn-bg">
       <NuxtImg src="/images/products/web-bg.png" width="100%" height="auto" alt="背景图" />
-    </section>
+    </section> -->
     <section class="cdn-cards">
       <div class="card-item" v-for="(card, index) in cards" :key="index">
         <div class="item-title">
@@ -56,9 +58,9 @@
     </section>
     <SecurityServicesSuite />
     <CaseCard />
-    <div class="bg-img">
+    <!-- <div class="bg-img">
       <NuxtImg src="/images/products/web-bg2.png" class="bg-img" alt="bg-img" />
-    </div>
+    </div> -->
   </div>
 </template>
 <script setup>
@@ -118,23 +120,64 @@ const cards = [
 .video-section {
   position: relative;
   width: 100%;
+  height: 800px;
   margin: 0 auto;
   overflow: hidden;
 
+  &::before {
+    content: '';
+    position: absolute;
+    left: 10%;
+    top: 10%;
+    width: 384px;
+    height: 384px;
+    border-radius: 50%;
+    background: rgba(121, 69, 255, 0.60);
+    filter: blur(250px);
+  }
 
-  .video-bg {
-    width: 100%;
-    height: auto;
-    display: block;
-    z-index: 1;
-    position: relative;
-    object-fit: cover;
-    clip-path: inset(0 0 9% 0);
+  .cdn-dg {
+    position: absolute;
+    top: 0;
+    right: 12%;
+    background: url('/images/products/dengg.png') no-repeat center center;
+    background-size: contain;
+    width: 800px;
+    height: 800px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 0;
+
+    .cdn-bg {
+      position: relative;
+      z-index: 1;
+      animation: float 3s ease-in-out infinite;
+    }
   }
 
+  @keyframes float {
+    0%, 100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-20px);
+    }
+  }
+
+  // .video-bg {
+  //   width: 100%;
+  //   height: auto;
+  //   display: block;
+  //   z-index: 1;
+  //   position: relative;
+  //   object-fit: cover;
+  //   clip-path: inset(0 0 9% 0);
+  // }
+
   .video-title {
     position: absolute;
-    top: 30%;
+    top: 20%;
     left: 48%;
     transform: translateX(-50%);
     width: 100%;
@@ -261,7 +304,7 @@ const cards = [
       align-items: center;
       justify-content: space-between;
       gap: 100px;
-      
+
       .item-img {
         flex-shrink: 0;
       }
@@ -296,33 +339,33 @@ const cards = [
   }
 }
 
-.cdn-bg {
-  width: 100%;
-  position: relative;
-
-  &::before {
-    position: absolute;
-    content: "678CDN 特性";
-    bottom: 42px;
-    left: 50%;
-    transform: translate(-50%);
-    background: linear-gradient(90deg, #B8AFFF 20.05%, #C597FF 101.05%);
-    background-clip: text;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    font-size: 45px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 45px;
-  }
-
-  :deep(img) {
-    width: 100%;
-    height: auto;
-    display: block;
-    object-fit: cover;
-  }
-}
+// .cdn-bg {
+//   width: 100%;
+//   position: relative;
+
+//   &::before {
+//     position: absolute;
+//     content: "678CDN 特性";
+//     bottom: 42px;
+//     left: 50%;
+//     transform: translate(-50%);
+//     background: linear-gradient(90deg, #B8AFFF 20.05%, #C597FF 101.05%);
+//     background-clip: text;
+//     -webkit-background-clip: text;
+//     -webkit-text-fill-color: transparent;
+//     font-size: 45px;
+//     font-style: normal;
+//     font-weight: 500;
+//     line-height: 45px;
+//   }
+
+//   :deep(img) {
+//     width: 100%;
+//     height: auto;
+//     display: block;
+//     object-fit: cover;
+//   }
+// }
 
 .cdn-cards {
   padding: 30px 0 50px 0;

app/utils/product.js

@@ -0,0 +1,78 @@
+export const productTabs = [
+  {
+    name: '网站安全加速',
+    layout: 'multi',
+    cards: [
+      {
+        title: 'Web安全加速',
+        description: '为游戏、电商、金融、医疗、门户等网站业务，提供DDoS、CC、页面篡改、爬虫等各类攻击防护，结合精准访问控制和全网联防联控，在抵御各类攻击的同时，保障网站业务的快速稳定访问。',
+        features: ['支持HTTP、HTTPS和WebSocket协议', '适用网站类业务']
+      },
+      {
+        title: 'DNS安全加速',
+        description: '安全可靠的智能DNS解析服务，具备多重灾备机制，支持IPv4、IPv6双栈，全球及自定义智能解析线路，运营商缓存刷新，提供大QPS DNS查询攻击、大流量DNS DDoS攻击等针对域名解析的攻击防御服务，为网站域名提供安全、稳定、可靠的解析体验。',
+        features: ['支持定制专用清洗集群']
+      },
+      {
+        title: '扫描观测(漏洞扫描)',
+        description: '为网站业务提供安全体检服务，模拟黑客视角，对网站业务进行可用性监测、内容安全监测、漏洞渗透性探测等风险多维度巡检综合评估，提出相应安全对策，告警安全事件，输出网站安全体检报告',
+        features: []
+      }
+    ]
+  },
+  {
+    name: 'TCP业务安全',
+    layout: 'single',
+    cards: [
+      {
+        title: 'TCP安全加速',
+        description: '为游戏、电商、金融等客户的TCP协议应用业务提供DDoS替身安全防御服务，支持HTTP、HTTPS、WebSocket和TCP协议，适用于网站及非网站业务 隐藏目标源IP，将DDoS攻击流量牵引至TCP安全加速的高防清洗集群，结合 全球IP威胁情报库、用户行为分析、特征学习、防护对抗等多种技术，有效防护SYN Flood、UDP Flood、ACK Flood、ICMP Flood、DNS Query Flood、NTP Reply Flood、CC等DDoS攻击，全方位对威胁进行阻断过滤',
+        features: ['全力防御，不按防御大小计费 ', '超80Tbps储存宽带，融合强大得清洗能力']
+      }
+    ]
+  },
+  {
+    name: '客户端安全加速',
+    layout: 'single',
+    cards: [
+      {
+        title: 'SDK安全加速 AntiDDoS SDK （Client&Mobile SDK）',
+        description: '专门针对游戏、电商、金融等APP提供DDoS、CC攻击防护服务通过在端应用嵌入安全SDK，结合风控大脑，形成主动端安全、风险管控调度、云安全资源池的端管云一体化安全架构核心风控大脑持续评估每个终端设备环境、网络环境、应用程序和用户行为是否可信，标注威胁等级 未通过可信认证的终端将被拒绝服务且进行攻击智能拆分调度，可信用户即使在被攻击后也能秒级调度，最终做到动态地隔离风险用户，定位攻击者',
+        features: ['终端管控、智能调度、DDoS/CC免疫、链路加密、精准溯源']
+      }
+    ]
+  },
+  {
+    name: '专家服务',
+    layout: 'single',
+    cards: [
+      {
+        title: '“管家式”人工服务,全天候业务护航',
+        description: '提供等保咨询、渗透测试、应急演练、应急响应、现场值守、重点事件安全保障等多种专家服务',
+        features: []
+      }
+    ]
+  },
+  {
+    name: '零信任安全访问',
+    layout: 'single',
+    cards: [
+      {
+        title: '零信任安全访问',
+        description: '为企业应用提供服务级的动态自适应细粒度授权，替代内部VPN，实现应用统一管理、企业应用程序远程访问服务，解决企业内、外部相对应的安全风险',
+        features: []
+      }
+    ]
+  },
+  {
+    name: '出海业务保障',
+    layout: 'single',
+    cards: [
+      {
+        title: '出海业务保障',
+        description: '为企业应用提供服务级的动态自适应细粒度授权，替代内部VPN，实现应用统一管理、企业应用程序远程访问服务，解决企业内、外部相对应的安全风险',
+        features: []
+      }
+    ]
+  }
+]

nuxt.config.ts

@@ -1,19 +1,20 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  modules: ['@vueuse/nuxt', '@pinia/nuxt', '@nuxt/icon', '@nuxt/image'],
+  modules: ['@vueuse/nuxt', '@pinia/nuxt', '@nuxt/icon', '@nuxt/image', '@vant/nuxt'],
   compatibilityDate: '2025-07-15',
   // devtools: { enabled: true },
   css: ['~/assets/scss/main.scss'], // 全局样式文件
   plugins: ['~/plugins/index.js'],
   app: {
     head: {
-      meta: [
-        { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' }
-      ]
+      meta: [{ name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' }]
     }
   },
   postcss: {
     plugins: {
+      autoprefixer: {
+        overrideBrowserslist: ['last 15 versions']
+      },
       'postcss-pxtorem': {
         rootValue: 37.5,
         unitPrecision: 4,
@@ -61,4 +62,4 @@ export default defineNuxtConfig({
   //     }
   //   }
   // }
-})
+})

package.json

@@ -14,6 +14,7 @@
     "@nuxt/icon": "2.2.1",
     "@nuxt/image": "2.0.0",
     "@pinia/nuxt": "^0.5.5",
+    "@vant/nuxt": "1.0.7",
     "@vueuse/nuxt": "^14.1.0",
     "echarts": "^6.0.0",
     "nuxt": "^4.3.0",

pnpm-lock.yaml

@@ -17,6 +17,9 @@ importers:
       '@pinia/nuxt':
         specifier: ^0.5.5
         version: 0.5.5(magicast@0.5.1)(vue@3.5.27)
+      '@vant/nuxt':
+        specifier: 1.0.7
+        version: 1.0.7(magicast@0.5.1)(vant@4.9.22(vue@3.5.27))
       '@vueuse/nuxt':
         specifier: ^14.1.0
         version: 14.1.0(magicast@0.5.1)(nuxt@4.3.0(@parcel/watcher@2.5.4)(@types/node@25.0.7)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(ioredis@5.9.1)(lightningcss@1.31.1)(magicast@0.5.1)(rollup@4.55.1)(sass@1.97.2)(terser@5.44.1)(vite@7.3.1(@types/node@25.0.7)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.2)(terser@5.44.1)(yaml@2.8.2))(yaml@2.8.2))(vue@3.5.27)
@@ -1417,6 +1420,19 @@ packages:
     peerDependencies:
       vue: '>=3.5.18'
 
+  '@vant/nuxt@1.0.7':
+    resolution: {integrity: sha512-YVRJIDVlCCjWBhi0a/YBY0M04XmGwAqCkDSEIDIcbvzNN2z178iqKS23Py+c4hUv570LoKaIZMCQ75IJphJkTw==}
+    peerDependencies:
+      vant: '>=4'
+
+  '@vant/popperjs@1.3.0':
+    resolution: {integrity: sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw==}
+
+  '@vant/use@1.6.0':
+    resolution: {integrity: sha512-PHHxeAASgiOpSmMjceweIrv2AxDZIkWXyaczksMoWvKV2YAYEhoizRuk/xFnKF+emUIi46TsQ+rvlm/t2BBCfA==}
+    peerDependencies:
+      vue: ^3.0.0
+
   '@vercel/nft@1.2.0':
     resolution: {integrity: sha512-68326CAWJmd6P1cUgUmufor5d4ocPbpLxiy9TKG6U/a4aWEx9aC+NIzaDI6GmBZVpt3+MkO3OwnQ2YcgJg12Qw==}
     engines: {node: '>=20'}
@@ -2458,6 +2474,10 @@ packages:
     resolution: {integrity: sha512-CvkkH1i81zl7mmb94DsRiFeG9V2fR2JeuK8yDgS8oiZSFa++wWLEgZ5ufEOyLHbvSbD1gTRKv9NdX69Rnvr9JA==}
     engines: {node: '>=20.19.0'}
 
+  magic-string@0.29.0:
+    resolution: {integrity: sha512-WcfidHrDjMY+eLjlU+8OvwREqHwpgCeKVBUpQ3OhYYuvfaYCUgcbuBzappNzZvg/v8onU3oQj+BYpkOJe9Iw4Q==}
+    engines: {node: '>=12'}
+
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
@@ -3332,6 +3352,10 @@ packages:
       vue-router:
         optional: true
 
+  unplugin@1.16.1:
+    resolution: {integrity: sha512-4/u/j4FrCKdi17jaxuJA0jClGxB1AvU2hw/IuayPc4ay1XGaJs/rbb4v5WKwAjNifjmXK9PIFyuPiaK8azyR9w==}
+    engines: {node: '>=14.0.0'}
+
   unplugin@2.3.11:
     resolution: {integrity: sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==}
     engines: {node: '>=18.12.0'}
@@ -3421,6 +3445,11 @@ packages:
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
+  vant@4.9.22:
+    resolution: {integrity: sha512-P2PDSj3oB6l3W1OpVlQpapeLmI6bXMSvPqPdrw5rutslC0Y6tSkrVB/iSD57weD7K92GsjGkvgDK0eZlOsXGqw==}
+    peerDependencies:
+      vue: ^3.0.0
+
   vite-dev-rpc@1.1.0:
     resolution: {integrity: sha512-pKXZlgoXGoE8sEKiKJSng4hI1sQ4wi5YT24FCrwrLt6opmkjlqPPVmiPWWJn8M8byMxRGzp1CrFuqQs4M/Z39A==}
     peerDependencies:
@@ -4959,6 +4988,21 @@ snapshots:
       unhead: 2.1.2
       vue: 3.5.27
 
+  '@vant/nuxt@1.0.7(magicast@0.5.1)(vant@4.9.22(vue@3.5.27))':
+    dependencies:
+      '@nuxt/kit': 3.20.2(magicast@0.5.1)
+      magic-string: 0.29.0
+      unplugin: 1.16.1
+      vant: 4.9.22(vue@3.5.27)
+    transitivePeerDependencies:
+      - magicast
+
+  '@vant/popperjs@1.3.0': {}
+
+  '@vant/use@1.6.0(vue@3.5.27)':
+    dependencies:
+      vue: 3.5.27
+
   '@vercel/nft@1.2.0(rollup@4.55.1)':
     dependencies:
       '@mapbox/node-pre-gyp': 2.0.3
@@ -6072,6 +6116,10 @@ snapshots:
     dependencies:
       magic-string: 0.30.21
 
+  magic-string@0.29.0:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -7234,6 +7282,11 @@ snapshots:
     transitivePeerDependencies:
       - vue
 
+  unplugin@1.16.1:
+    dependencies:
+      acorn: 8.15.0
+      webpack-virtual-modules: 0.6.2
+
   unplugin@2.3.11:
     dependencies:
       '@jridgewell/remapping': 2.3.5
@@ -7288,6 +7341,13 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
+  vant@4.9.22(vue@3.5.27):
+    dependencies:
+      '@vant/popperjs': 1.3.0
+      '@vant/use': 1.6.0(vue@3.5.27)
+      '@vue/shared': 3.5.27
+      vue: 3.5.27
+
   vite-dev-rpc@1.1.0(vite@7.3.1(@types/node@25.0.7)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.2)(terser@5.44.1)(yaml@2.8.2)):
     dependencies:
       birpc: 2.9.0