feat: products

app/components/Header.vue

@@ -7,11 +7,11 @@
       </a>
     </div>
     <nav class="header-nav" role="navigation" aria-label="Main navigation">
-      <div class="nav-item">首页</div>
-      <div class="nav-item">产品</div>
-      <div class="nav-item">行业解决方案</div>
-      <div class="nav-item">文档中心</div>
-      <div class="nav-item">了解我们</div>
+      <NuxtLink to="/pc" class="nav-item">首页</NuxtLink>
+      <NuxtLink to="/pc/products" class="nav-item">产品</NuxtLink>
+      <NuxtLink to="/pc/solutions" class="nav-item">行业解决方案</NuxtLink>
+      <NuxtLink to="/pc/docs" class="nav-item">文档中心</NuxtLink>
+      <NuxtLink to="/pc/about" class="nav-item">了解我们</NuxtLink>
     </nav>
     <div class="header-right">
       <div>登录</div>
@@ -86,6 +86,7 @@ watchEffect(() => {
   align-items: center;
 
   .nav-item {
+    text-decoration: none;
     margin: 0 15px;
     cursor: pointer;
     color: #FFF;

app/components/PlansSection.vue

@@ -0,0 +1,277 @@
+<template>
+  <section class="plans-section">
+    <div class="plans-cards">
+      <div class="plan-card">
+        <div class="plan-name">Lite Plan</div>
+        <div class="plan-desc">适合项目上线初期集成</div>
+        <div class="old-price">
+          <del>$1500</del>
+          <span>节省20.04%</span>
+        </div>
+        <div class="plan-price">$999</div>
+        <div class="plan-actions">
+          <button class="btn-primary">立即选择</button>
+        </div>
+        <div class="plan-title">
+          <div class="plan-cs">详细参数</div>
+          <ul class="plan-features">
+            <li>防护目标数：3个</li>
+            <li>峰值设备数：200</li>
+            <li>智能BGP线路</li>
+            <li>带宽峰值：20M</li>
+            <li>DDoS防御：无上限</li>
+            <li>CC防御：100%</li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="plan-card">
+        <div class="plan-name">Basic Plan</div>
+        <div class="plan-desc">最经济实惠的个人开发者套餐</div>
+        <div class="old-price">
+          <del>$2500</del>
+          <span>节省20.04%</span>
+        </div>
+        <div class="plan-price">$1999</div>
+        <div class="plan-actions">
+          <button class="btn-primary">立即选择</button>
+        </div>
+        <div class="plan-title">
+          <div class="plan-cs">详细参数</div>
+          <ul class="plan-features">
+            <li>防护目标数：10个</li>
+            <li>峰值设备数：2000</li>
+            <li>智能CN2/BGP线路</li>
+            <li>带宽峰值：50M</li>
+            <li>DDoS防御：无上限</li>
+            <li>CC防御：100%</li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="plan-card">
+        <div class="plan-name">Standard Plan</div>
+        <div class="plan-desc">企业入门级畅销精选套餐</div>
+        <div class="old-price">
+          <del>$6000</del>
+          <span>节省16.68%</span>
+        </div>
+        <div class="plan-price">$4999</div>
+        <div class="plan-actions">
+          <button class="btn-primary ghost">立即选择</button>
+        </div>
+        <div class="plan-title">
+          <div class="plan-cs">详细参数</div>
+          <ul class="plan-features">
+            <li>防护目标数：15个</li>
+            <li>峰值设备数：10000</li>
+            <li>智能CN2/BGP线路</li>
+            <li>带宽峰值：80M</li>
+            <li>DDoS防御：无上限</li>
+            <li>CC防御：100%</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.plans-section {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto 0;
+  padding: 0 20px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+
+
+  .plans-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 24px;
+  }
+
+  .plan-card {
+    border-radius: 20px;
+    background: rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(178, 161, 255, 0.8);
+    padding: 28px 24px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    min-height: 380px;
+
+    &:hover {
+      border: 2px solid rgba(178, 161, 255, 0.9);
+      box-shadow: 0 10px 30px rgba(125, 70, 255, 0.3);
+      background: linear-gradient(1.67deg, rgba(165, 101, 255, 0.16) 0%, rgba(3, 0, 20, 0.1) 100%);
+
+      .plan-actions .btn-primary {
+        background: linear-gradient(91deg, #A39DFF 1.24%, #7D46FF 122.93%);
+      }
+    }
+
+    // &.highlight {
+
+    // }
+
+    .plan-name {
+      text-align: center;
+      font-family: 'Roboto', sans-serif;
+      font-size: 36px;
+      font-weight: 700;
+      line-height: 26px;
+      color: #ffffff;
+    }
+
+    .plan-desc {
+      text-align: center;
+      font-family: 'Source Han Sans CN', sans-serif;
+      font-size: 20px;
+      font-weight: 400;
+      line-height: 20px;
+      color: #e0d3ff;
+    }
+
+    .old-price {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 12px;
+
+      del {
+        color: #A39DFF;
+        font-size: 20px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 20px;
+      }
+
+      span {
+        display: flex;
+        border-radius: 17.5px;
+        background: #7D46FF;
+        color: #fff;
+        width: 145px;
+        height: 35px;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+      }
+    }
+
+    .plan-price {
+      font-family: 'Roboto', sans-serif;
+      text-align: center;
+      font-size: 65px;
+      font-weight: 700;
+      line-height: 65px;
+      color: #ffffff;
+      margin: 8px 0;
+    }
+
+    .plan-actions {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+
+      .btn-primary {
+        flex: 1;
+        height: 44px;
+        border-radius: 50px;
+        background: linear-gradient(91deg, rgba(163, 157, 255, 0.20) 1.24%, rgba(125, 70, 255, 0.20) 122.93%);
+        border: none;
+        color: #fff;
+        font-family: 'Source Han Sans CN', sans-serif;
+        font-size: 24px;
+        cursor: pointer;
+        transition: opacity 0.3s ease;
+
+        &:hover {
+
+          opacity: 0.85;
+        }
+
+      }
+
+      .btn-link {
+        flex: 1;
+        height: 44px;
+        border-radius: 10px;
+        border: 1px solid rgba(255, 255, 255, 0.5);
+        background: transparent;
+        color: #fff;
+        font-family: 'Source Han Sans CN', sans-serif;
+        font-size: 16px;
+        cursor: pointer;
+        transition: opacity 0.3s ease;
+
+        &:hover {
+          opacity: 0.8;
+        }
+      }
+    }
+
+    .plan-title {
+      .plan-cs {
+        margin: 22px 0;
+        color: #fff;
+        font-size: 20px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 20px;
+      }
+
+      .plan-features {
+        margin: 0;
+        padding: 0;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 8px;
+
+        li {
+          position: relative;
+          font-family: 'Source Han Sans CN', sans-serif;
+          padding-left: 20px;
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 20px;
+          color: #ffffff;
+
+          &::before {
+            content: "";
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            background-color: #a39dff;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+
+          &::after {
+            position: absolute;
+            left: 4px;
+            top: 50%;
+            transform: translateY(-50%);
+            content: "✓";
+            color: #fff;
+            font-size: 10px;
+            font-weight: bold;
+            text-align: center;
+          }
+        }
+      }
+    }
+
+  }
+}
+</style>

app/components/products/Card.vue

@@ -0,0 +1,250 @@
+<template>
+  <section class="card-container">
+    <img class="card-bg-img" :src="bg2" alt="背景图">
+    <div class="card-box">
+      <div v-mouse-glow class="card-item card1">
+        <div class="card-title">
+          <div class="title-wrapper">
+            <img :src="icon" alt="加密锁">
+            <h3>全链加密</h3>
+          </div>
+          <div class="stat-text">
+            SDK自身高强度加密，且可以实时动态更新，安全可靠，无惧MITM Attack。
+          </div>
+        </div>
+        <div>
+          <div class="stat-number">超过90%</div>
+          <div class="stat-text">应对超过 90% 数据在云端流转的时代，用全
+            链加密构筑端到端零泄露的安全底座</div>
+        </div>
+        <div>
+          <div class="stat-number">超1,000亿次</div>
+          <div class="stat-text">面对年均超 1,000 亿次云端调用，全链加密确
+            保数据全路径安全无死角</div>
+        </div>
+      </div>
+      <div v-mouse-glow class="card-item card2">
+        <div class="card-title">
+          <div class="title-wrapper">
+            <img :src="icon" alt="加密锁">
+            <h3>DDoS 防护</h3>
+          </div>
+          <div class="stat-text">
+            SDK自身高强度加密，且可以实时动态更新，安全可靠，无惧MITM Attack。
+          </div>
+        </div>
+      </div>
+      <div v-mouse-glow class="card-item card3">
+        <div class="card-title">
+          <div class="title-wrapper">
+            <img :src="icon" alt="加密锁">
+            <h3>智能加速</h3>
+          </div>
+          <div class="stat-text">
+            SDK自身高强度加密，且可以实时动态更新，安全可靠，无惧MITM Attack。
+          </div>
+        </div>
+      </div>
+      <div v-mouse-glow class="card-item card4">
+        <div class="card4-content">
+          <h2>用户友好的加密调度中心</h2>
+          <p>用于替代DNS的一个加密调度中心，能够实现细化到单个客户端，级别的秒级调度，兼容性稳定可靠!提供完整SDK中文文档，轻松集成!</p>
+          <div class="card4-btn"><span>立即咨询</span>
+            <Icon name="line-md:chevron-right" />
+          </div>
+        </div>
+        <div class="card4-img">
+          <img :src="icon2" alt="云安全">
+          <div class="img-btn">Unlimited Scaling</div>
+          <div class="img-btn">Advanced Security</div>
+          <div class="img-btn">Advanced Security</div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+<script setup>
+import bg2 from '~/assets/images/products/bg2.png'
+import icon from '~/assets/images/products/icon.png'
+import icon2 from '~/assets/images/products/icon2.png'
+</script>
+<style lang="scss" scoped>
+.card-container {
+  width: 100%;
+  height: 1000px;
+  position: relative;
+
+  .card-bg-img {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: auto;
+    z-index: 0;
+    opacity: 0.5;
+  }
+}
+
+.card-box {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  justify-content: center;
+  margin-top: 40px;
+  grid-template-areas:
+    "card1 card2 card3"
+    "card1 card4 card4";
+  grid-template-columns: 400px 400px 400px;
+  grid-template-rows: 192px 308px;
+  grid-column-gap: 20px;
+  grid-row-gap: 20px;
+}
+
+.card-item {
+  border-radius: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.10);
+  background: rgba(255, 255, 255, 0.10);
+  transition: transform .3s ease;
+
+  &:hover {
+    border: 1px solid #B7B2FF;
+    background: linear-gradient(180deg, rgba(184, 100, 255, 0.20) 0%, rgba(137, 64, 254, 0.20) 100%);
+    transform: translateY(-5px);
+  }
+}
+
+.card-title {
+  .title-wrapper {
+    display: flex;
+    align-items: center;
+  }
+
+  img {
+    width: 45px;
+    height: 45px;
+  }
+
+  h3 {
+    color: #ffffff;
+    padding-left: 10px;
+    font-size: 24px;
+    font-weight: 700;
+  }
+}
+
+.stat-text {
+  margin-top: 12px;
+  width: 320px;
+  color: rgba(255, 255, 255, 0.60);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+}
+
+.card1 {
+  grid-area: card1;
+  padding: 37px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 42px;
+
+  .stat-number {
+    color: #FFF;
+    font-size: 36px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 36px;
+  }
+
+
+}
+
+
+.card2 {
+  grid-area: card2;
+  padding: 40px 24px;
+}
+
+.card3 {
+  grid-area: card3;
+  padding: 40px 24px;
+}
+
+.card4 {
+  grid-area: card4;
+  padding: 42px 30px 48px 24px;
+  display: flex;
+  gap: 30px;
+}
+
+.card4-content {
+  width: 490px;
+  color: #fff;
+
+  h2 {
+    font-size: 36px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 36px;
+  }
+
+  p {
+    margin-top: 20px;
+    color: rgba(255, 255, 255, 0.60);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 36px;
+  }
+
+  .card4-btn {
+    margin-top: 45px;
+    display: flex;
+    width: 140px;
+    height: 45px;
+    padding: 7px 21px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    border-radius: 8px;
+    background: linear-gradient(104deg, #C46DFF 13.04%, #6B29FF 117.2%);
+    font-size: 16px;
+    cursor: pointer;
+  }
+}
+
+.card4-img {
+  position: relative;
+
+  .img-btn {
+    position: absolute;
+    display: flex;
+    width: 140px;
+    height: 36px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 100px;
+    border: 1px solid #FFF;
+    background: linear-gradient(263deg, rgba(203, 125, 255, 0.40) -0.77%, rgba(117, 39, 255, 0.40) 57.75%, rgba(203, 125, 255, 0.40) 107.92%);
+    backdrop-filter: blur(4.5px);
+    font-size: 14px;
+    color: #fff;
+
+    &:nth-of-type(1) {
+      top: -26px;
+      left: 20px;
+    }
+
+    &:nth-of-type(2) {
+      top: 78px;
+      right: -44px;
+    }
+
+    &:nth-of-type(3) {
+      bottom: 36px;
+      left: -66px;
+    }
+  }
+}
+</style>

app/components/products/Introduction.vue

@@ -0,0 +1,74 @@
+<template>
+  <section class="intr-container">
+    <div>
+      <p class="intr-title">
+        1800+
+      </p>
+      <p class="intr-description">
+        实用至上-全球 1800+ 边缘哨兵帮你的游戏“开挂”
+      </p>
+    </div>
+    <div>
+      <p class="intr-title">
+        1.5T
+      </p>
+      <p class="intr-description">
+        抗打峰值：1.5 Tbps，单日轻松吃掉 5 万次 DDoS 攻击
+      </p>
+    </div>
+    <div>
+      <p class="intr-title">
+        10Min
+      </p>
+      <p class="intr-description">
+        不拆架构、不动服务器、不写一条 waf 防御规则，老项目也能 10 分钟老兵新枪
+      </p>
+    </div>
+    <div>
+      <p class="intr-title">
+        99.999%
+      </p>
+      <p class="intr-description">
+        99.999% 可用性，全年停机时间< 5 分钟 </p>
+    </div>
+  </section>
+</template>
+<script setup></script>
+<style lang="scss" scoped>
+.intr-container {
+  display: flex;
+  position: relative;
+  width: 100%;
+  max-width: 1200px;
+  margin: -64px auto 0;
+  padding: 64px 48px 110px 48px;
+  box-sizing: border-box;
+  border-radius: 20px;
+  z-index: 3;
+  background: linear-gradient(180deg, #A86AFD -110.27%, rgba(3, 0, 20, 0.00) 44.89%);
+  border-top: 2px solid #953FFF;
+  justify-content: space-between;
+  gap: 35px;
+
+}
+
+.intr-title {
+  color: #EADBFF;
+  font-family: "Source Han Sans CN";
+  font-size: 54px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 58px;
+}
+
+.intr-description {
+  margin-top: 14px;
+  width: 218px;
+  color: rgba(222, 200, 255, 0.50);
+  font-family: "Source Han Sans CN";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22.937px;
+}
+</style>

app/directives/mouseGlowDirective.js

@@ -0,0 +1,123 @@
+const defaultOptions = {
+  size: 400,
+  color1: 'rgba(128, 119, 255, 0.5)',
+  color2: 'rgba(231, 76, 255, 0.5)',
+  angle: 148,
+  opacity: 0.8,
+  blur: 50,
+  duration: 0.15
+}
+
+const createGlowElement = (container, options) => {
+  const glow = document.createElement('div')
+  const gradient = `conic-gradient(from ${options.angle}deg, ${options.color1} 0%, ${options.color2} 50%, ${options.color1} 100%)`
+  glow.style.cssText = `
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: ${options.size}px;
+    height: ${options.size}px;
+    background: ${gradient};
+    border-radius: 50%;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity ${options.duration}s ease;
+    will-change: transform;
+    filter: blur(${options.blur}px) drop-shadow(0 4px 4px rgba(0,0,0,0.25));
+    z-index: 1;
+  `
+  container.style.position = 'relative'
+  container.style.overflow = 'hidden'
+  container.appendChild(glow)
+  return glow
+}
+
+const updateGlowPosition = (glow, x, y, options) => {
+  glow.style.transform = `translate(${x - options.size / 2}px, ${y - options.size / 2}px)`
+}
+
+const mouseGlowDirective = {
+  mounted(el, binding) {
+    const options = { ...defaultOptions, ...binding.value }
+    const glow = createGlowElement(el, options)
+    let animationFrameId = null
+    let isVisible = false
+
+    const handleMouseMove = (e) => {
+      if (animationFrameId !== null) {
+        cancelAnimationFrame(animationFrameId)
+      }
+
+      animationFrameId = requestAnimationFrame(() => {
+        const rect = el.getBoundingClientRect()
+        const x = e.clientX - rect.left
+        const y = e.clientY - rect.top
+        updateGlowPosition(glow, x, y, options)
+        animationFrameId = null
+      })
+    }
+
+    const handleMouseEnter = () => {
+      if (!isVisible) {
+        glow.style.opacity = options.opacity?.toString() || defaultOptions.opacity.toString()
+        isVisible = true
+      }
+    }
+
+    const handleMouseLeave = () => {
+      if (isVisible) {
+        glow.style.opacity = '0'
+        isVisible = false
+      }
+    }
+
+    el.addEventListener('mousemove', handleMouseMove, { passive: true })
+    el.addEventListener('mouseenter', handleMouseEnter, { passive: true })
+    el.addEventListener('mouseleave', handleMouseLeave, { passive: true })
+
+    el._mouseGlowDirective = {
+      glow,
+      handleMouseMove,
+      handleMouseEnter,
+      handleMouseLeave,
+      animationFrameId: () => animationFrameId
+    }
+  },
+
+  updated(el, binding) {
+    const directiveData = el._mouseGlowDirective
+    if (directiveData) {
+      const options = { ...defaultOptions, ...binding.value }
+      const { glow } = directiveData
+
+      const gradient = `conic-gradient(from ${options.angle}deg, ${options.color1} 0%, ${options.color2} 50%, ${options.color1} 100%)`
+
+      glow.style.width = `${options.size}px`
+      glow.style.height = `${options.size}px`
+      glow.style.background = gradient
+      glow.style.filter = `blur(${options.blur}px) drop-shadow(0 4px 4px rgba(0,0,0,0.25))`
+      glow.style.transition = `opacity ${options.duration}s ease`
+    }
+  },
+
+  unmounted(el) {
+    const directiveData = el._mouseGlowDirective
+    if (directiveData) {
+      const { glow, handleMouseMove, handleMouseEnter, handleMouseLeave, animationFrameId } = directiveData
+
+      const frameId = animationFrameId()
+      if (frameId !== null) {
+        cancelAnimationFrame(frameId)
+      }
+
+      el.removeEventListener('mousemove', handleMouseMove)
+      el.removeEventListener('mouseenter', handleMouseEnter)
+      el.removeEventListener('mouseleave', handleMouseLeave)
+
+      glow.remove()
+      delete el._mouseGlowDirective
+    }
+  }
+}
+
+export default mouseGlowDirective

app/pages/pc/about.vue

@@ -1,27 +1,2 @@
-<template>
-  <div class="about-page">
-    <h1>关于（PC）</h1>
-  </div>
-</template>
-
-<script setup>
-definePageMeta({
-  layout: 'pc'
-})
-</script>
-
-<style scoped lang="scss">
-.about-page {
-  width: 100%;
-  max-width: 1920px;
-  margin: 0 auto;
-  padding: 120px 20px 20px;
-  min-height: calc(100vh - 200px);
-
-  h1 {
-    color: #fff;
-    font-size: 48px;
-    text-align: center;
-  }
-}
-</style>
+<template></template>
+<script setup></script>

app/pages/pc/docs.vue

@@ -0,0 +1,2 @@
+<template></template>
+<script setup></script>

app/pages/pc/index.vue

@@ -30,81 +30,7 @@
       <StatsSection />
 
       <!-- 安全运营与方案模块 -->
-      <section class="plans-section">
-        <div class="plans-cards">
-          <div class="plan-card">
-            <div class="plan-name">Lite Plan</div>
-            <div class="plan-desc">适合项目上线初期集成</div>
-            <div class="old-price">
-              <del>$1500</del>
-              <span>节省20.04%</span>
-            </div>
-            <div class="plan-price">$999</div>
-            <div class="plan-actions">
-              <button class="btn-primary">立即选择</button>
-            </div>
-            <div class="plan-title">
-              <div class="plan-cs">详细参数</div>
-              <ul class="plan-features">
-                <li>防护目标数：3个</li>
-                <li>峰值设备数：200</li>
-                <li>智能BGP线路</li>
-                <li>带宽峰值：20M</li>
-                <li>DDoS防御：无上限</li>
-                <li>CC防御：100%</li>
-              </ul>
-            </div>
-          </div>
-
-          <div class="plan-card">
-            <div class="plan-name">Basic Plan</div>
-            <div class="plan-desc">最经济实惠的个人开发者套餐</div>
-            <div class="old-price">
-              <del>$2500</del>
-              <span>节省20.04%</span>
-            </div>
-            <div class="plan-price">$1999</div>
-            <div class="plan-actions">
-              <button class="btn-primary">立即选择</button>
-            </div>
-            <div class="plan-title">
-              <div class="plan-cs">详细参数</div>
-              <ul class="plan-features">
-                <li>防护目标数：10个</li>
-                <li>峰值设备数：2000</li>
-                <li>智能CN2/BGP线路</li>
-                <li>带宽峰值：50M</li>
-                <li>DDoS防御：无上限</li>
-                <li>CC防御：100%</li>
-              </ul>
-            </div>
-          </div>
-
-          <div class="plan-card">
-            <div class="plan-name">Standard Plan</div>
-            <div class="plan-desc">企业入门级畅销精选套餐</div>
-            <div class="old-price">
-              <del>$6000</del>
-              <span>节省16.68%</span>
-            </div>
-            <div class="plan-price">$4999</div>
-            <div class="plan-actions">
-              <button class="btn-primary ghost">立即选择</button>
-            </div>
-            <div class="plan-title">
-              <div class="plan-cs">详细参数</div>
-              <ul class="plan-features">
-                <li>防护目标数：15个</li>
-                <li>峰值设备数：10000</li>
-                <li>智能CN2/BGP线路</li>
-                <li>带宽峰值：80M</li>
-                <li>DDoS防御：无上限</li>
-                <li>CC防御：100%</li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </section>
+      <PlansSection style="margin-top: 120px;" />
 
       <!-- 安全漏洞 / 全景技术架构上方模块 -->
       <section class="security-arch-section">
@@ -241,6 +167,7 @@ definePageMeta({
 import { ref } from 'vue'
 import StatsSection from '~/components/home/StatsSection.vue'
 import ProductTabs from '~/components/home/ProductTabs.vue'
+import PlansSection from '~/components/PlansSection.vue'
 import videoSrc from '~/assets/video/home.webm'
 import ParticlesCanvas from '~/components/ParticlesCanvas.vue'
 import SecurityParticles from '~/components/SecurityParticles.vue'
@@ -297,7 +224,6 @@ useHead(() => ({
 .container {
   width: 100%;
   min-height: 100vh;
-  background-color: #030014;
   overflow-x: hidden;
   box-sizing: border-box;
 }
@@ -427,206 +353,6 @@ useHead(() => ({
 }
 
 
-
-// 方案卡片区域
-.plans-section {
-  width: 100%;
-  max-width: 1200px;
-  margin: 120px auto 0;
-  padding: 0 20px;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: 40px;
-
-
-  .plans-cards {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-    gap: 24px;
-  }
-
-  .plan-card {
-    border-radius: 20px;
-    background: rgba(255, 255, 255, 0.08);
-    border: 1px solid rgba(178, 161, 255, 0.8);
-    padding: 28px 24px;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    gap: 14px;
-    min-height: 380px;
-
-    &:hover {
-      border: 2px solid rgba(178, 161, 255, 0.9);
-      box-shadow: 0 10px 30px rgba(125, 70, 255, 0.3);
-      background: linear-gradient(1.67deg, rgba(165, 101, 255, 0.16) 0%, rgba(3, 0, 20, 0.1) 100%);
-
-      .plan-actions .btn-primary {
-        background: linear-gradient(91deg, #A39DFF 1.24%, #7D46FF 122.93%);
-      }
-    }
-
-    // &.highlight {
-
-    // }
-
-    .plan-name {
-      text-align: center;
-      font-family: 'Roboto', sans-serif;
-      font-size: 36px;
-      font-weight: 700;
-      line-height: 26px;
-      color: #ffffff;
-    }
-
-    .plan-desc {
-      text-align: center;
-      font-family: 'Source Han Sans CN', sans-serif;
-      font-size: 20px;
-      font-weight: 400;
-      line-height: 20px;
-      color: #e0d3ff;
-    }
-
-    .old-price {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      gap: 12px;
-
-      del {
-        color: #A39DFF;
-        font-size: 20px;
-        font-style: normal;
-        font-weight: 500;
-        line-height: 20px;
-      }
-
-      span {
-        display: flex;
-        border-radius: 17.5px;
-        background: #7D46FF;
-        color: #fff;
-        width: 145px;
-        height: 35px;
-        justify-content: center;
-        align-items: center;
-        gap: 10px;
-      }
-    }
-
-    .plan-price {
-      font-family: 'Roboto', sans-serif;
-      text-align: center;
-      font-size: 65px;
-      font-weight: 700;
-      line-height: 65px;
-      color: #ffffff;
-      margin: 8px 0;
-    }
-
-    .plan-actions {
-      display: flex;
-      gap: 12px;
-      align-items: center;
-
-      .btn-primary {
-        flex: 1;
-        height: 44px;
-        border-radius: 50px;
-        background: linear-gradient(91deg, rgba(163, 157, 255, 0.20) 1.24%, rgba(125, 70, 255, 0.20) 122.93%);
-        border: none;
-        color: #fff;
-        font-family: 'Source Han Sans CN', sans-serif;
-        font-size: 24px;
-        cursor: pointer;
-        transition: opacity 0.3s ease;
-
-        &:hover {
-
-          opacity: 0.85;
-        }
-
-      }
-
-      .btn-link {
-        flex: 1;
-        height: 44px;
-        border-radius: 10px;
-        border: 1px solid rgba(255, 255, 255, 0.5);
-        background: transparent;
-        color: #fff;
-        font-family: 'Source Han Sans CN', sans-serif;
-        font-size: 16px;
-        cursor: pointer;
-        transition: opacity 0.3s ease;
-
-        &:hover {
-          opacity: 0.8;
-        }
-      }
-    }
-
-    .plan-title {
-      .plan-cs {
-        margin: 22px 0;
-        color: #fff;
-        font-size: 20px;
-        font-style: normal;
-        font-weight: 600;
-        line-height: 20px;
-      }
-
-      .plan-features {
-        margin: 0;
-        padding: 0;
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 8px;
-
-        li {
-          position: relative;
-          font-family: 'Source Han Sans CN', sans-serif;
-          padding-left: 20px;
-          font-size: 14px;
-          font-weight: 400;
-          line-height: 20px;
-          color: #ffffff;
-
-          &::before {
-            content: "";
-            position: absolute;
-            left: 0;
-            top: 50%;
-            transform: translateY(-50%);
-            width: 16px;
-            height: 16px;
-            border-radius: 50%;
-            background-color: #a39dff;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          }
-
-          &::after {
-            position: absolute;
-            left: 4px;
-            top: 50%;
-            transform: translateY(-50%);
-            content: "✓";
-            color: #fff;
-            font-size: 10px;
-            font-weight: bold;
-            text-align: center;
-          }
-        }
-      }
-    }
-
-  }
-}
-
 // 安全架构展示（到全景技术架构上方）
 .security-arch-section {
   position: relative;

app/pages/pc/products.vue

@@ -0,0 +1,217 @@
+<template>
+  <section class="container">
+    <section class="video-section">
+      <div class="left-bg"></div>
+      <video ref="videoRef" class="video-bg" :src="videoSrc" autoplay loop muted playsinline
+        @loadedmetadata="onVideoLoaded"></video>
+      <div class="video-title">
+        <h1>DDAC游戏盾——让APP自带</h1>
+        <div class="video-subtitle">“国家级别”防御</div>
+        <div class="video-text">
+          <p>我们把7层防护做成了一根函数 StartService</p>
+          <p>客户端程序员几分钟就能完成集成，黑产却要</p>
+          <p>重新设计整条攻击链</p>
+        </div>
+      </div>
+    </section>
+    <Introduction />
+    <section class="main-text">
+      <h2 class="main-text-title">一体化解决游戏安全问题</h2>
+      <p class="main-text-subtitle">整合资源、强化防御，让安全从未如此简单</p>
+    </section>
+    <Card />
+    <section class="products-server">
+      <h2>为您定制的企业级安全服务包</h2>
+      <PlansSection style="margin-top: 40px;" />
+    </section>
+    <section class="products-sdk">
+      <h2>安全加速SDK防护架构</h2>
+    </section>
+  </section>
+</template>
+
+<script setup>
+definePageMeta({
+  layout: 'pc'
+})
+import { ref } from 'vue'
+import videoSrc from '~/assets/video/products.mp4'
+import Introduction from '~/components/products/Introduction.vue'
+import Card from '~/components/products/Card.vue'
+const videoRef = ref(null)
+const onVideoLoaded = () => {
+  if (videoRef.value) {
+    videoRef.value.play().catch(() => {
+      // 自动播放失败时静默处理
+    })
+  }
+}
+
+useHead(() => ({
+  title: '产品中心 - DDAC',
+  meta: [
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+    { name: 'description', content: '一体化解决游戏安全问题' },
+    { name: 'keywords', content: '全链加密 | DDoS 防护 | 智能加速 ' }
+  ]
+}))
+</script>
+
+<style scoped lang="scss">
+.container {
+  width: 100%;
+  min-height: 100vh;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.video-section {
+  position: relative;
+  width: 100%;
+  margin: 0 auto;
+  overflow: hidden;
+
+  .left-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 927px;
+    height: auto;
+    aspect-ratio: 103/62;
+    background-image: url('~/assets/images/products/bg.png');
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    z-index: 2;
+    opacity: 0.6;
+  }
+
+  .video-bg {
+    width: 100%;
+    height: auto;
+    display: block;
+    z-index: 1;
+    position: relative;
+  }
+
+  .video-title {
+    position: absolute;
+    top: 30%;
+    left: 14%;
+    z-index: 3;
+    color: #fff;
+    font-style: normal;
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+
+    h1 {
+      font-size: 45px;
+      font-weight: 500;
+      line-height: 45px;
+      background: linear-gradient(91deg, #D8D3FF -6.9%, #E6D2FF 111.73%);
+      background-clip: text;
+    }
+
+    .video-subtitle {
+      color: #DBB9FF;
+      font-size: 45px;
+      font-weight: 500;
+      line-height: 45px;
+    }
+
+    .video-text {
+      margin-top: 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+    }
+
+    p {
+      color: #E2D9FF;
+      font-size: 20px;
+      font-weight: 400;
+      line-height: 20px;
+    }
+
+  }
+}
+
+.main-text {
+  width: 100%;
+  text-align: center;
+  margin-top: 92px;
+
+  .main-text-title {
+    font-family: "Source Han Sans CN";
+    font-size: 45px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 80px;
+    background: linear-gradient(90deg, #B8AFFF 20.05%, #C597FF 101.05%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  .main-text-subtitle {
+    color: #E2D9FF;
+    font-family: "Source Han Sans CN";
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 80px;
+  }
+}
+
+.products-server {
+  width: 100%;
+  height: 1280px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 50px;
+  position: relative;
+
+  h2 {
+    font-size: 45px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 80px;
+    background: linear-gradient(91deg, #B8AFFF 10.8%, #C597FF 108.3%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: -14%;
+    width: 1280px;
+    height: 1280px;
+    transform: translate(-50%) rotate(173.992deg);
+    border-radius: 50%;
+    background: linear-gradient(189deg, #7A41FF 6.39%, rgba(3, 0, 20, 0.20) 30.53%);
+    filter: blur(50px);
+  }
+}
+
+.products-sdk {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  h2 {
+    font-family: "Source Han Sans CN";
+    font-size: 62px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 80px;
+    background: linear-gradient(91deg, #C597FF 4.96%, #C597FF 109.07%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+}
+</style>

app/pages/pc/solutions.vue

@@ -0,0 +1,2 @@
+<template></template>
+<script setup></script>

app/plugins/index.js

@@ -0,0 +1,5 @@
+import mouseGlowDirective from '~/directives/mouseGlowDirective'
+
+export default defineNuxtPlugin(({ vueApp }) => {
+  vueApp.directive('mouse-glow', mouseGlowDirective)
+})

nuxt.config.ts

@@ -1,9 +1,13 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  modules: ['@element-plus/nuxt', '@vueuse/nuxt','@pinia/nuxt'],
+  modules: ['@vueuse/nuxt', '@pinia/nuxt', '@nuxt/icon'],
   compatibilityDate: '2025-07-15',
   // devtools: { enabled: true },
   css: ['~/assets/scss/main.scss'], // 全局样式文件
+  plugins: ['~/plugins/index.js'],
+  icon: {
+    localApiEndpoint: '/nuxt-icon'
+  }
   // vite: {
   //   css: {
   //     preprocessorOptions: {

package.json

@@ -8,9 +8,10 @@
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
-    "pm2":"pm2 start ecosystem.config.cjs"
+    "pm2": "pm2 start ecosystem.config.cjs"
   },
   "dependencies": {
+    "@nuxt/icon": "2.2.1",
     "@pinia/nuxt": "^0.5.5",
     "@vueuse/nuxt": "^14.1.0",
     "nuxt": "^4.2.2",
@@ -18,8 +19,6 @@
     "vue-router": "^4.6.4"
   },
   "devDependencies": {
-    "@element-plus/icons-vue": "^2.3.2",
-    "@element-plus/nuxt": "^1.1.4",
     "@types/node": "^25.0.7",
     "element-plus": "^2.13.1",
     "sass": "^1.97.2"

pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@nuxt/icon':
+        specifier: 2.2.1
+        version: 2.2.1(magicast@0.5.1)(vite@7.3.1(@types/node@25.0.7)(jiti@2.6.1)(sass@1.97.2)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.26)
       '@pinia/nuxt':
         specifier: ^0.5.5
         version: 0.5.5(magicast@0.5.1)(vue@3.5.26)
@@ -24,12 +27,6 @@ importers:
         specifier: ^4.6.4
         version: 4.6.4(vue@3.5.26)
     devDependencies:
-      '@element-plus/icons-vue':
-        specifier: ^2.3.2
-        version: 2.3.2(vue@3.5.26)
-      '@element-plus/nuxt':
-        specifier: ^1.1.4
-        version: 1.1.4(@element-plus/icons-vue@2.3.2(vue@3.5.26))(element-plus@2.13.1(vue@3.5.26))(magicast@0.5.1)
       '@types/node':
         specifier: ^25.0.7
         version: 25.0.7
@@ -42,6 +39,9 @@ importers:
 
 packages:
 
+  '@antfu/install-pkg@1.1.0':
+    resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==}
+
   '@babel/code-frame@7.28.6':
     resolution: {integrity: sha512-JYgintcMjRiCvS8mMECzaEn+m3PfoQiyqukOMCCVQtoJGYJw8j/8LBJEiqkHLkfwCcs74E3pbAUFNg7d9VNJ+Q==}
     engines: {node: '>=6.9.0'}
@@ -199,12 +199,6 @@ packages:
     peerDependencies:
       vue: ^3.2.0
 
-  '@element-plus/nuxt@1.1.4':
-    resolution: {integrity: sha512-tDGpJgzbu/4of9nsjDqVD34FJYH8bFHB7xDh5ePfP3RsRQLsCw9SjNpMR4o+6wUfJACl0tydbC/1lsYY0HT8gw==}
-    peerDependencies:
-      '@element-plus/icons-vue': '>=0.2.6'
-      element-plus: '>=2'
-
   '@emnapi/core@1.8.1':
     resolution: {integrity: sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg==}
 
@@ -379,6 +373,20 @@ packages:
   '@floating-ui/utils@0.2.10':
     resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
 
+  '@iconify/collections@1.0.641':
+    resolution: {integrity: sha512-G9LdUvewUdXp5SD4g06rWHpWo7s5/rQcsQxAQ3UQUqdRwkcUuPcGrY0qnZ0wzYLaeB0TVUrgC0MIigyhWiNgtQ==}
+
+  '@iconify/types@2.0.0':
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+
+  '@iconify/utils@3.1.0':
+    resolution: {integrity: sha512-Zlzem1ZXhI1iHeeERabLNzBHdOa4VhQbqAcOQaMKuTuyZCpwKbC2R4Dd0Zo3g9EAc+Y4fiarO8HIHRAth7+skw==}
+
+  '@iconify/vue@5.0.0':
+    resolution: {integrity: sha512-C+KuEWIF5nSBrobFJhT//JS87OZ++QDORB6f2q2Wm6fl2mueSTpFBeBsveK0KW9hWiZ4mNiPjsh6Zs4jjdROSg==}
+    peerDependencies:
+      vue: '>=3'
+
   '@ioredis/commands@1.5.0':
     resolution: {integrity: sha512-eUgLqrMf8nJkZxT24JvVRrQya1vZkQh8BBeYNwGDqa5I0VUi8ACx7uFvAaLxintokpTenkK6DASvo/bvNbBGow==}
 
@@ -470,6 +478,9 @@ packages:
       '@vitejs/devtools':
         optional: true
 
+  '@nuxt/icon@2.2.1':
+    resolution: {integrity: sha512-GI840yYGuvHI0BGDQ63d6rAxGzG96jQcWrnaWIQKlyQo/7sx9PjXkSHckXUXyX1MCr9zY6U25Td6OatfY6Hklw==}
+
   '@nuxt/kit@3.20.2':
     resolution: {integrity: sha512-laqfmMcWWNV1FsVmm1+RQUoGY8NIJvCRl0z0K8ikqPukoEry0LXMqlQ+xaf8xJRvoH2/78OhZmsEEsUBTXipcw==}
     engines: {node: '>=18.12.0'}
@@ -539,42 +550,36 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-minify/binding-linux-arm64-musl@0.102.0':
     resolution: {integrity: sha512-DyH/t/zSZHuX4Nn239oBteeMC4OP7B13EyXWX18Qg8aJoZ+lZo90WPGOvhP04zII33jJ7di+vrtAUhsX64lp+A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-minify/binding-linux-riscv64-gnu@0.102.0':
     resolution: {integrity: sha512-CMvzrmOg+Gs44E7TRK/IgrHYp+wwVJxVV8niUrDR2b3SsrCO3NQz5LI+7bM1qDbWnuu5Cl1aiitoMfjRY61dSg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-minify/binding-linux-s390x-gnu@0.102.0':
     resolution: {integrity: sha512-tZWr6j2s0ddm9MTfWTI3myaAArg9GDy4UgvpF00kMQAjLcGUNhEEQbB9Bd9KtCvDQzaan8HQs0GVWUp+DWrymw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-minify/binding-linux-x64-gnu@0.102.0':
     resolution: {integrity: sha512-0YEKmAIun1bS+Iy5Shx6WOTSj3GuilVuctJjc5/vP8/EMTZ/RI8j0eq0Mu3UFPoT/bMULL3MBXuHuEIXmq7Ddg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-minify/binding-linux-x64-musl@0.102.0':
     resolution: {integrity: sha512-Ew4QDpEsXoV+pG5+bJpheEy3GH436GBe6ASPB0X27Hh9cQ2gb1NVZ7cY7xJj68+fizwS/PtT8GHoG3uxyH17Pg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-minify/binding-openharmony-arm64@0.102.0':
     resolution: {integrity: sha512-wYPXS8IOu/sXiP3CGHJNPzZo4hfPAwJKevcFH2syvU2zyqUxym7hx6smfcK/mgJBiX7VchwArdGRwrEQKcBSaQ==}
@@ -634,42 +639,36 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-parser/binding-linux-arm64-musl@0.102.0':
     resolution: {integrity: sha512-/XWcmglH/VJ4yKAGTLRgPKSSikh3xciNxkwGiURt8dS30b+3pwc4ZZmudMu0tQ3mjSu0o7V9APZLMpbHK8Bp5w==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-parser/binding-linux-riscv64-gnu@0.102.0':
     resolution: {integrity: sha512-2jtIq4nswvy6xdqv1ndWyvVlaRpS0yqomLCvvHdCFx3pFXo5Aoq4RZ39kgvFWrbAtpeYSYeAGFnwgnqjx9ftdw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-parser/binding-linux-s390x-gnu@0.102.0':
     resolution: {integrity: sha512-Yp6HX/574mvYryiqj0jNvNTJqo4pdAsNP2LPBTxlDQ1cU3lPd7DUA4MQZadaeLI8+AGB2Pn50mPuPyEwFIxeFg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-parser/binding-linux-x64-gnu@0.102.0':
     resolution: {integrity: sha512-R4b0xZpDRhoNB2XZy0kLTSYm0ZmWeKjTii9fcv1Mk3/SIGPrrglwt4U6zEtwK54Dfi4Bve5JnQYduigR/gyDzw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-parser/binding-linux-x64-musl@0.102.0':
     resolution: {integrity: sha512-xM5A+03Ti3jvWYZoqaBRS3lusvnvIQjA46Fc9aBE/MHgvKgHSkrGEluLWg/33QEwBwxupkH25Pxc1yu97oZCtg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-parser/binding-openharmony-arm64@0.102.0':
     resolution: {integrity: sha512-AieLlsliblyaTFq7Iw9Nc618tgwV02JT4fQ6VIUd/3ZzbluHIHfPjIXa6Sds+04krw5TvCS8lsegtDYAyzcyhg==}
@@ -732,42 +731,36 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-transform/binding-linux-arm64-musl@0.102.0':
     resolution: {integrity: sha512-I08iWABrN7zakn3wuNIBWY3hALQGsDLPQbZT1mXws7tyiQqJNGe49uS0/O50QhX3KXj+mbRGsmjVXLXGJE1CVQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-transform/binding-linux-riscv64-gnu@0.102.0':
     resolution: {integrity: sha512-9+SYW1ARAF6Oj/82ayoqKRe8SI7O1qvzs3Y0kijvhIqAaaZWcFRjI5DToyWRAbnzTtHlMcSllZLXNYdmxBjFxA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-transform/binding-linux-s390x-gnu@0.102.0':
     resolution: {integrity: sha512-HV9nTyQw0TTKYPu+gBhaJBioomiM9O4LcGXi+s5IylCGG6imP0/U13q/9xJnP267QFmiWWqnnSFcv0QAWCyh8A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-transform/binding-linux-x64-gnu@0.102.0':
     resolution: {integrity: sha512-4wcZ08mmdFk8OjsnglyeYGu5PW3TDh87AmcMOi7tZJ3cpJjfzwDfY27KTEUx6G880OpjAiF36OFSPwdKTKgp2g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-transform/binding-linux-x64-musl@0.102.0':
     resolution: {integrity: sha512-rUHZSZBw0FUnUgOhL/Rs7xJz9KjH2eFur/0df6Lwq/isgJc/ggtBtFoZ+y4Fb8ON87a3Y2gS2LT7SEctX0XdPQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-transform/binding-openharmony-arm64@0.102.0':
     resolution: {integrity: sha512-98y4tccTQ/pA+r2KA/MEJIZ7J8TNTJ4aCT4rX8kWK4pGOko2YsfY3Ru9DVHlLDwmVj7wP8Z4JNxdBrAXRvK+0g==}
@@ -821,42 +814,36 @@ packages:
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-arm-musl@2.5.4':
     resolution: {integrity: sha512-kGO8RPvVrcAotV4QcWh8kZuHr9bXi9a3bSZw7kFarYR0+fGliU7hd/zevhjw8fnvIKG3J9EO5G6sXNGCSNMYPQ==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-linux-arm64-glibc@2.5.4':
     resolution: {integrity: sha512-KU75aooXhqGFY2W5/p8DYYHt4hrjHZod8AhcGAmhzPn/etTa+lYCDB2b1sJy3sWJ8ahFVTdy+EbqSBvMx3iFlw==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-arm64-musl@2.5.4':
     resolution: {integrity: sha512-Qx8uNiIekVutnzbVdrgSanM+cbpDD3boB1f8vMtnuG5Zau4/bdDbXyKwIn0ToqFhIuob73bcxV9NwRm04/hzHQ==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-linux-x64-glibc@2.5.4':
     resolution: {integrity: sha512-UYBQvhYmgAv61LNUn24qGQdjtycFBKSK3EXr72DbJqX9aaLbtCOO8+1SkKhD/GNiJ97ExgcHBrukcYhVjrnogA==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-x64-musl@2.5.4':
     resolution: {integrity: sha512-YoRWCVgxv8akZrMhdyVi6/TyoeeMkQ0PGGOf2E4omODrvd1wxniXP+DBynKoHryStks7l+fDAMUBRzqNHrVOpg==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-wasm@2.5.4':
     resolution: {integrity: sha512-9Cn7GFQevsvKjUKIP4lh7MNwak6z9e1DcOK0g9sJc8O8qRAbnet8uBNg0mMRY+MU+z3a6EEl9u9bhSFKhx5kCw==}
@@ -1017,79 +1004,66 @@ packages:
     resolution: {integrity: sha512-Rn3n+FUk2J5VWx+ywrG/HGPTD9jXNbicRtTM11e/uorplArnXZYsVifnPPqNNP5BsO3roI4n8332ukpY/zN7rQ==}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.55.1':
     resolution: {integrity: sha512-grPNWydeKtc1aEdrJDWk4opD7nFtQbMmV7769hiAaYyUKCT1faPRm2av8CX1YJsZ4TLAZcg9gTR1KvEzoLjXkg==}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.55.1':
     resolution: {integrity: sha512-a59mwd1k6x8tXKcUxSyISiquLwB5pX+fJW9TkWU46lCqD/GRDe9uDN31jrMmVP3feI3mhAdvcCClhV8V5MhJFQ==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.55.1':
     resolution: {integrity: sha512-puS1MEgWX5GsHSoiAsF0TYrpomdvkaXm0CofIMG5uVkP6IBV+ZO9xhC5YEN49nsgYo1DuuMquF9+7EDBVYu4uA==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-loong64-gnu@4.55.1':
     resolution: {integrity: sha512-r3Wv40in+lTsULSb6nnoudVbARdOwb2u5fpeoOAZjFLznp6tDU8kd+GTHmJoqZ9lt6/Sys33KdIHUaQihFcu7g==}
     cpu: [loong64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-loong64-musl@4.55.1':
     resolution: {integrity: sha512-MR8c0+UxAlB22Fq4R+aQSPBayvYa3+9DrwG/i1TKQXFYEaoW3B5b/rkSRIypcZDdWjWnpcvxbNaAJDcSbJU3Lw==}
     cpu: [loong64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-ppc64-gnu@4.55.1':
     resolution: {integrity: sha512-3KhoECe1BRlSYpMTeVrD4sh2Pw2xgt4jzNSZIIPLFEsnQn9gAnZagW9+VqDqAHgm1Xc77LzJOo2LdigS5qZ+gw==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-ppc64-musl@4.55.1':
     resolution: {integrity: sha512-ziR1OuZx0vdYZZ30vueNZTg73alF59DicYrPViG0NEgDVN8/Jl87zkAPu4u6VjZST2llgEUjaiNl9JM6HH1Vdw==}
     cpu: [ppc64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-riscv64-gnu@4.55.1':
     resolution: {integrity: sha512-uW0Y12ih2XJRERZ4jAfKamTyIHVMPQnTZcQjme2HMVDAHY4amf5u414OqNYC+x+LzRdRcnIG1YodLrrtA8xsxw==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.55.1':
     resolution: {integrity: sha512-u9yZ0jUkOED1BFrqu3BwMQoixvGHGZ+JhJNkNKY/hyoEgOwlqKb62qu+7UjbPSHYjiVy8kKJHvXKv5coH4wDeg==}
     cpu: [riscv64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.55.1':
     resolution: {integrity: sha512-/0PenBCmqM4ZUd0190j7J0UsQ/1nsi735iPRakO8iPciE7BQ495Y6msPzaOmvx0/pn+eJVVlZrNrSh4WSYLxNg==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.55.1':
     resolution: {integrity: sha512-a8G4wiQxQG2BAvo+gU6XrReRRqj+pLS2NGXKm8io19goR+K8lw269eTrPkSdDTALwMmJp4th2Uh0D8J9bEV1vg==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.55.1':
     resolution: {integrity: sha512-bD+zjpFrMpP/hqkfEcnjXWHMw5BIghGisOKPj+2NaNDuVT+8Ds4mPf3XcPHuat1tz89WRL+1wbcxKY3WSbiT7w==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-openbsd-x64@4.55.1':
     resolution: {integrity: sha512-eLXw0dOiqE4QmvikfQ6yjgkg/xDM+MdU9YJuP4ySTibXU0oAvnEWXt7UDJmD4UkYialMfOGFPJnIHSe/kdzPxg==}
@@ -2154,10 +2128,6 @@ packages:
     resolution: {integrity: sha512-CvkkH1i81zl7mmb94DsRiFeG9V2fR2JeuK8yDgS8oiZSFa++wWLEgZ5ufEOyLHbvSbD1gTRKv9NdX69Rnvr9JA==}
     engines: {node: '>=20.19.0'}
 
-  magic-string@0.27.0:
-    resolution: {integrity: sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==}
-    engines: {node: '>=12'}
-
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
@@ -3028,10 +2998,6 @@ 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'}
@@ -3341,6 +3307,11 @@ packages:
 
 snapshots:
 
+  '@antfu/install-pkg@1.1.0':
+    dependencies:
+      package-manager-detector: 1.6.0
+      tinyexec: 1.0.2
+
   '@babel/code-frame@7.28.6':
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
@@ -3546,16 +3517,6 @@ snapshots:
     dependencies:
       vue: 3.5.26
 
-  '@element-plus/nuxt@1.1.4(@element-plus/icons-vue@2.3.2(vue@3.5.26))(element-plus@2.13.1(vue@3.5.26))(magicast@0.5.1)':
-    dependencies:
-      '@element-plus/icons-vue': 2.3.2(vue@3.5.26)
-      '@nuxt/kit': 3.20.2(magicast@0.5.1)
-      element-plus: 2.13.1(vue@3.5.26)
-      magic-string: 0.27.0
-      unplugin: 1.16.1
-    transitivePeerDependencies:
-      - magicast
-
   '@emnapi/core@1.8.1':
     dependencies:
       '@emnapi/wasi-threads': 1.1.0
@@ -3661,6 +3622,23 @@ snapshots:
 
   '@floating-ui/utils@0.2.10': {}
 
+  '@iconify/collections@1.0.641':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify/types@2.0.0': {}
+
+  '@iconify/utils@3.1.0':
+    dependencies:
+      '@antfu/install-pkg': 1.1.0
+      '@iconify/types': 2.0.0
+      mlly: 1.8.0
+
+  '@iconify/vue@5.0.0(vue@3.5.26)':
+    dependencies:
+      '@iconify/types': 2.0.0
+      vue: 3.5.26
+
   '@ioredis/commands@1.5.0': {}
 
   '@isaacs/balanced-match@4.0.1': {}
@@ -3843,6 +3821,27 @@ snapshots:
       - utf-8-validate
       - vue
 
+  '@nuxt/icon@2.2.1(magicast@0.5.1)(vite@7.3.1(@types/node@25.0.7)(jiti@2.6.1)(sass@1.97.2)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.26)':
+    dependencies:
+      '@iconify/collections': 1.0.641
+      '@iconify/types': 2.0.0
+      '@iconify/utils': 3.1.0
+      '@iconify/vue': 5.0.0(vue@3.5.26)
+      '@nuxt/devtools-kit': 3.1.1(magicast@0.5.1)(vite@7.3.1(@types/node@25.0.7)(jiti@2.6.1)(sass@1.97.2)(terser@5.44.1)(yaml@2.8.2))
+      '@nuxt/kit': 4.2.2(magicast@0.5.1)
+      consola: 3.4.2
+      local-pkg: 1.1.2
+      mlly: 1.8.0
+      ohash: 2.0.11
+      pathe: 2.0.3
+      picomatch: 4.0.3
+      std-env: 3.10.0
+      tinyglobby: 0.2.15
+    transitivePeerDependencies:
+      - magicast
+      - vite
+      - vue
+
   '@nuxt/kit@3.20.2(magicast@0.5.1)':
     dependencies:
       c12: 3.3.3(magicast@0.5.1)
@@ -5526,10 +5525,6 @@ snapshots:
     dependencies:
       magic-string: 0.30.21
 
-  magic-string@0.27.0:
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.5
-
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -6643,11 +6638,6 @@ 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