PROJECT_OVERVIEW.md

@@ -1,284 +0,0 @@
-# DDAC 安全防护官网项目文档
-
-## 项目概述
-
-DDAC 是一个网络安全防护服务官网，提供高防服务器、高防DNS、游戏盾SDK、高防CDN等安全产品。项目基于 Nuxt 3 框架开发，采用 PC 和 H5 双端设计，通过设备检测自动适配不同终端。
-
-## 技术栈
-
-- **框架**: Nuxt 4.2.2
-- **Vue版本**: Vue 3.5.26
-- **路由**: Vue Router 4.6.4
-- **UI组件库**: Element Plus 2.13.1
-- **样式预处理**: Sass 1.97.2
-- **TypeScript**: 5.x
-- **包管理器**: pnpm
-
-## 项目结构
-
-```
-DDAC/
-├── .github/                 # GitHub Actions 配置
-├── .nuxt/                  # Nuxt 自动生成的配置文件
-├── .output/                # 构建输出目录
-├── app/                    # 应用源代码目录
-│   ├── app.vue            # 应用入口组件
-│   ├── assets/            # 静态资源
-│   │   ├── images/        # 图片资源
-│   │   │   └── home/      # 首页图片（20+ 张图标、背景图）
-│   │   ├── scss/          # 全局样式文件
-│   │   │   └── main.scss  # CSS 重置和全局样式
-│   │   ├── svg/           # SVG 图标
-│   │   └── video/         # 视频资源
-│   │       └── home.webm  # 首页背景视频
-│   ├── components/        # Vue 组件
-│   │   ├── Header.vue     # 头部导航组件
-│   │   ├── Footer.vue     # 底部组件
-│   │   ├── ParticlesCanvas.vue      # 首页粒子动画组件
-│   │   └── SecurityParticles.vue   # 安全架构粒子动画组件
-│   └── pages/             # 页面路由（自动生成路由）
-│       ├── index.vue      # 首页（设备检测重定向）
-│       ├── pc/            # PC 端页面
-│       │   ├── index.vue  # PC 首页
-│       │   └── about.vue  # PC 关于页（占位）
-│       └── h5/            # 移动端页面
-│           ├── index.vue  # H5 首页（占位）
-│           └── about.vue  # H5 关于页（占位）
-├── node_modules/          # 依赖包
-├── plugins/               # Nuxt 插件目录（当前为空）
-├── public/                # 静态公共资源
-│   ├── favicon.ico        # 网站图标
-│   └── logo.png           # Logo 图片
-├── .gitignore             # Git 忽略配置
-├── nuxt.config.ts         # Nuxt 配置文件
-├── package.json           # 项目依赖配置
-├── pnpm-lock.yaml         # pnpm 锁文件
-├── README.md              # 项目说明
-└── tsconfig.json          # TypeScript 配置
-```
-
-## 核心功能
-
-### 1. 设备检测与重定向
-- **文件位置**: `app/pages/index.vue`
-- **功能**: 自动检测用户设备类型（PC/移动端）
-- **实现方式**: 通过 `navigator.userAgent` 检测移动端特征
-- **重定向规则**:
-  - 移动设备 → `/h5`
-  - PC设备 → `/pc`
-
-### 2. PC 首页 (`/pc/index.vue`)
-
-#### 页面模块
-1. **头部导航**
-   - 品牌Logo和标题
-   - 导航菜单：首页、产品、行业解决方案、文档中心、了解我们
-   - 登录/注册按钮
-
-2. **Hero区域**
-   - 背景视频（`home.webm`）
-   - 粒子动画覆盖层（`ParticlesCanvas.vue`）
-   - 渐变色标题：您专注业务，我们守护安全
-   - 副标题：展示产品服务范围
-
-3. **产品标签栏**
-   - 6个产品分类标签
-   - 首个标签高亮显示
-
-4. **产品卡片展示**
-   - Web安全加速
-   - DNS安全加速
-   - 扫描观测（漏洞扫描）
-   - 每个卡片包含：标题、描述、特性标签、操作按钮
-
-5. **安全洞见数据展示**
-   - 背景图 + 动画效果
-   - 实时攻防态势数据：
-     - 今日CC攻击次数: 19,009
-     - 今日DDoS攻击峰值: 22,844
-     - 今日WAF拦截次数: 56,870
-
-6. **定价方案**
-   - Lite Plan ($999) - 项目上线初期
-   - Basic Plan ($1999) - 个人开发者
-   - Standard Plan ($4999) - 企业入门
-   - 每个方案包含：防护目标数、峰值设备数、线路、带宽、防御能力
-
-7. **安全架构展示**
-   - 全景技术架构背景图
-   - 粒子动画（`SecurityParticles.vue`）
-   - 技术描述文字
-
-8. **行业解决方案**
-   - 彩虹背景效果
-   - 5大行业：金融、互联网、医疗健康、制造、教育
-   - 15个客户案例展示
-   - 雷达扫描动画
-
-#### 动画效果
-- **粒子动画**: 从四周向中心汇聚的粒子效果
-- **浮动动画**: 游戏盾图标上下浮动
-- **雷达扫描**: 旋转扫描效果 + 闪烁点
-- **渐变过渡**: 多处使用CSS渐变背景
-
-### 3. 组件说明
-
-#### Header.vue
-- 使用 Element Plus 的 `el-row` 和 `el-col` 布局
-- 响应式三列布局（6-12-6）
-- 包含品牌标识、导航菜单、用户操作区
-
-#### Footer.vue
-- 5列导航链接：安全产品、安全服务、热搜榜单、文档中心、关于我们
-- 行业解决方案入口
-- 联系方式
-- 版权信息
-
-#### ParticlesCanvas.vue
-- Canvas 粒子动画
-- 30个粒子从随机位置向中心移动
-- 到达中心后重新生成
-- 支持 window resize 事件
-
-#### SecurityParticles.vue
-- 上升流动的粒子效果
-- 60-600个粒子（根据屏幕面积自适应）
-- 带有横向摆动效果
-- 支持高DPI屏幕
-
-## 样式设计
-
-### 颜色方案
-- **背景色**: `#030014`（深紫黑色）
-- **主色调**: 紫色系（`#7C4DFF`、`#DEB9FF`、`#617FFF`）
-- **文字色**: 白色 `#ffffff`、浅灰 `#bdbdbd`
-- **强调色**: `#a39dff`、`#9b71ff`
-
-### 字体
-- **标题**: Source Han Sans CN（思源黑体）
-- **英文/数字**: Roboto、Inter
-- **字重**: 400（常规）、500（中粗）、700（粗体）
-
-### 设计特点
-- 渐变色背景和按钮
-- 磨砂玻璃效果（`backdrop-filter: blur`）
-- 悬浮阴影和边框发光效果
-- CSS动画（浮动、闪烁、扫描）
-
-## 开发指南
-
-### 环境要求
-- Node.js >= 18.x
-- pnpm >= 8.x
-
-### 安装依赖
-```bash
-pnpm install
-```
-
-### 启动开发服务器
-```bash
-pnpm dev
-```
-访问 `http://localhost:3000`
-
-### 构建生产版本
-```bash
-pnpm build
-```
-
-### 预览生产构建
-```bash
-pnpm preview
-```
-
-### 生成静态站点
-```bash
-pnpm generate
-```
-
-## 路由配置
-
-Nuxt 3 采用文件系统路由，路由结构如下：
-
-```
-/
-├── index.vue          → /
-├── pc/
-│   ├── index.vue      → /pc
-│   └── about.vue      → /pc/about
-└── h5/
-    ├── index.vue      → /h5
-    └── about.vue      → /h5/about
-```
-
-## Nuxt 配置
-
-### `nuxt.config.ts`
-```typescript
-export default defineNuxtConfig({
-  modules: ['@element-plus/nuxt'],  // Element Plus 集成
-  compatibilityDate: '2025-07-15',
-  css: ['~/assets/scss/main.scss'], // 全局样式
-})
-```
-
-### TypeScript 配置
-- 支持模块系统：ESM
-- 严格模式：已启用
-- 类型检查：完整支持
-
-## 部署说明
-
-### 构建输出
-- `.output/` 目录包含构建后的应用
-- 支持静态导出（`nuxt generate`）
-- 支持服务器端渲染部署
-
-### 部署建议
-1. 使用 Nginx 反向代理
-2. 配置 HTTPS
-3. 启用 Gzip/Brotli 压缩
-4. 配置 CDN 加速静态资源
-
-## 待完成功能
-
-- [ ] 完善移动端 H5 页面设计
-- [ ] 完成 PC 端关于页面
-- [ ] 实现产品详情页
-- [ ] 实现文档中心
-- [ ] 添加用户登录/注册功能
-- [ ] 添加后台管理系统
-- [ ] 添加数据统计功能
-- [ ] SEO 优化
-- [ ] 性能优化（代码分割、懒加载）
-- [ ] 添加单元测试和端到端测试
-
-## 注意事项
-
-1. **设备检测**: 当前通过 `window.location.href` 重定向，生产环境建议使用 Nuxt 中间件
-2. **视频加载**: Hero 背景视频使用 WebM 格式，注意浏览器兼容性
-3. **Canvas 性能**: 粒子动画在移动端可能会有性能问题，建议添加性能优化
-4. **图片优化**: 静态资源较大，建议使用图片压缩和 CDN 加速
-5. **SEO**: 当前页面 SEO 元数据较简单，建议完善
-
-## 浏览器兼容性
-
-- Chrome >= 90
-- Firefox >= 88
-- Safari >= 14
-- Edge >= 90
-
-## 许可证
-
-Copyright © 2025 SUYUN, All Rights Reserved
-
-## 联系方式
-
-- 企业邮箱：support@yundun.com
-- 官网：DDAC（待补充域名）
-
----
-
-**文档生成时间**: 2025-01-19
-**项目版本**: 1.0.0

app/assets/svg/header/icon1.svg

@@ -0,0 +1,16 @@
+<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<foreignObject x="-9" y="-9" width="52" height="52"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(4.5px);clip-path:url(#bgblur_0_834_2293_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="9">
+<circle cx="17" cy="17" r="17" fill="url(#paint0_linear_834_2293)"/>
+<circle cx="17" cy="17" r="16.5" stroke="white" stroke-opacity="0.2"/>
+</g>
+<path d="M10.25 12.0959L17.0032 10.125L23.75 12.0959V16.1376C23.75 20.3858 21.0313 24.1573 17.001 25.5002C12.9695 24.1573 10.25 20.385 10.25 16.1358V12.0959Z" stroke="white" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M16.9814 14.6064V20.6064" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.9814 17.6064H19.9814" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<clipPath id="bgblur_0_834_2293_clip_path" transform="translate(9 9)"><circle cx="17" cy="17" r="17"/>
+</clipPath><linearGradient id="paint0_linear_834_2293" x1="-1.58761e-08" y1="17" x2="42.4008" y2="18.0826" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A39DFF"/>
+<stop offset="1" stop-color="#7D46FF"/>
+</linearGradient>
+</defs>
+</svg>

app/assets/svg/header/icon2.svg

@@ -0,0 +1,19 @@
+<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<foreignObject x="-9" y="-9" width="52" height="52"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(4.5px);clip-path:url(#bgblur_0_834_2299_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="9">
+<circle cx="17" cy="17" r="17" fill="url(#paint0_linear_834_2299)"/>
+<circle cx="17" cy="17" r="16.5" stroke="white" stroke-opacity="0.2"/>
+</g>
+<path d="M18.5 23H10.625C10.0037 23 9.5 22.4963 9.5 21.875V12.125C9.5 11.5037 10.0037 11 10.625 11H23.375C23.9963 11 24.5 11.5037 24.5 12.125V16.647" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.625 23.375V18.875" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.75 20.75L22.625 18.875L24.5 20.75" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.5 12.125C9.5 11.5037 10.0037 11 10.625 11H23.375C23.9963 11 24.5 11.5037 24.5 12.125V15.5H9.5V12.125Z" stroke="white" stroke-width="1.5"/>
+<path d="M11 13.25C11 12.8358 11.3358 12.5 11.75 12.5C12.1642 12.5 12.5 12.8358 12.5 13.25C12.5 13.6642 12.1642 14 11.75 14C11.3358 14 11 13.6642 11 13.25Z" fill="white"/>
+<path d="M13.25 13.25C13.25 12.8358 13.5858 12.5 14 12.5C14.4142 12.5 14.75 12.8358 14.75 13.25C14.75 13.6642 14.4142 14 14 14C13.5858 14 13.25 13.6642 13.25 13.25Z" fill="white"/>
+<defs>
+<clipPath id="bgblur_0_834_2299_clip_path" transform="translate(9 9)"><circle cx="17" cy="17" r="17"/>
+</clipPath><linearGradient id="paint0_linear_834_2299" x1="-1.58761e-08" y1="17" x2="42.4008" y2="18.0826" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A39DFF"/>
+<stop offset="1" stop-color="#7D46FF"/>
+</linearGradient>
+</defs>
+</svg>

app/assets/svg/header/icon3.svg

@@ -0,0 +1,20 @@
+<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<foreignObject x="-9" y="-9" width="52" height="52"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(4.5px);clip-path:url(#bgblur_0_834_2308_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="9">
+<circle cx="17" cy="17" r="17" fill="url(#paint0_linear_834_2308)"/>
+<circle cx="17" cy="17" r="16.5" stroke="white" stroke-opacity="0.2"/>
+</g>
+<path d="M17 21.5V19.25" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.5 23H10.25" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.5 23H23.75" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.5 23C18.5 23.8284 17.8284 24.5 17 24.5C16.1716 24.5 15.5 23.8284 15.5 23C15.5 22.1716 16.1716 21.5 17 21.5C17.8284 21.5 18.5 22.1716 18.5 23Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.875 14.375C21.875 17.0674 19.6924 19.25 17 19.25C14.3076 19.25 12.125 17.0674 12.125 14.375M21.875 14.375C21.875 11.6826 19.6924 9.5 17 9.5C14.3076 9.5 12.125 11.6826 12.125 14.375M21.875 14.375H12.125" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.875 14.375C18.875 17.0674 18.0355 19.25 17 19.25C15.9645 19.25 15.125 17.0674 15.125 14.375C15.125 11.6826 15.9645 9.5 17 9.5C18.0355 9.5 18.875 11.6826 18.875 14.375Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.875 14.375H12.125" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<clipPath id="bgblur_0_834_2308_clip_path" transform="translate(9 9)"><circle cx="17" cy="17" r="17"/>
+</clipPath><linearGradient id="paint0_linear_834_2308" x1="-1.58761e-08" y1="17" x2="42.4008" y2="18.0826" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A39DFF"/>
+<stop offset="1" stop-color="#7D46FF"/>
+</linearGradient>
+</defs>
+</svg>

app/assets/svg/header/icon4.svg

@@ -0,0 +1,19 @@
+<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<foreignObject x="-9" y="-9" width="52" height="52"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(4.5px);clip-path:url(#bgblur_0_834_2318_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="9">
+<circle cx="17" cy="17" r="17" fill="url(#paint0_linear_834_2318)"/>
+<circle cx="17" cy="17" r="16.5" stroke="white" stroke-opacity="0.2"/>
+</g>
+<path d="M24.5 9.5H9.5V15.5H24.5V9.5Z" stroke="white" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M24.5 18.5H9.5V24.5H24.5V18.5Z" stroke="white" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M12.875 11.75H12.125C11.9179 11.75 11.75 11.9179 11.75 12.125V12.875C11.75 13.0821 11.9179 13.25 12.125 13.25H12.875C13.0821 13.25 13.25 13.0821 13.25 12.875V12.125C13.25 11.9179 13.0821 11.75 12.875 11.75Z" fill="white"/>
+<path d="M12.875 20.75H12.125C11.9179 20.75 11.75 20.9179 11.75 21.125V21.875C11.75 22.0821 11.9179 22.25 12.125 22.25H12.875C13.0821 22.25 13.25 22.0821 13.25 21.875V21.125C13.25 20.9179 13.0821 20.75 12.875 20.75Z" fill="white"/>
+<path d="M15.875 11.75H15.125C14.9179 11.75 14.75 11.9179 14.75 12.125V12.875C14.75 13.0821 14.9179 13.25 15.125 13.25H15.875C16.0821 13.25 16.25 13.0821 16.25 12.875V12.125C16.25 11.9179 16.0821 11.75 15.875 11.75Z" fill="white"/>
+<path d="M15.875 20.75H15.125C14.9179 20.75 14.75 20.9179 14.75 21.125V21.875C14.75 22.0821 14.9179 22.25 15.125 22.25H15.875C16.0821 22.25 16.25 22.0821 16.25 21.875V21.125C16.25 20.9179 16.0821 20.75 15.875 20.75Z" fill="white"/>
+<defs>
+<clipPath id="bgblur_0_834_2318_clip_path" transform="translate(9 9)"><circle cx="17" cy="17" r="17"/>
+</clipPath><linearGradient id="paint0_linear_834_2318" x1="-1.58761e-08" y1="17" x2="42.4008" y2="18.0826" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A39DFF"/>
+<stop offset="1" stop-color="#7D46FF"/>
+</linearGradient>
+</defs>
+</svg>

app/components/Header.vue

@@ -8,7 +8,39 @@
     </div>
     <nav class="header-nav" role="navigation" aria-label="Main navigation">
       <NuxtLink to="/pc" class="nav-item">首页</NuxtLink>
-      <NuxtLink to="/pc/products" class="nav-item">产品</NuxtLink>
+      <div class="nav-item-wrapper">
+        <div class="nav-item">产品</div>
+        <div class="dropdown-menu">
+          <NuxtLink to="/pc/products/sdk" class="dropdown-item">
+            <img class="item-img" src="~/assets/svg/header/icon1.svg" alt="SDK 安全加固">
+            <div class="item-text">
+              <p>SDK 安全加固</p>
+              <span>三合一：抗 D、消 C、挡 W</span>
+            </div>
+          </NuxtLink>
+          <NuxtLink to="/pc/products/web" class="dropdown-item">
+            <img class="item-img" src="~/assets/svg/header/icon2.svg" alt="Web 安全加速">
+            <div class="item-text">
+              <p>Web 安全加速</p>
+              <span>部署 30 秒，省心 365 天</span>
+            </div>
+          </NuxtLink>
+          <NuxtLink to="/pc/products/sub3" class="dropdown-item">
+            <img class="item-img" src="~/assets/svg/header/icon3.svg" alt="DNS 全球解析">
+            <div class="item-text">
+              <p>DNS 全球解析</p>
+              <span>把地球缩成局域网——全球 280+ 节点实时同步</span>
+            </div>
+          </NuxtLink>
+          <NuxtLink to="/pc/products/sub4" class="dropdown-item">
+            <img class="item-img" src="~/assets/svg/header/icon4.svg" alt="高仿服务器">
+            <div class="item-text">
+              <p>高仿服务器</p>
+              <span>单台扛 1.5T，秒级自动扩容</span>
+            </div>
+          </NuxtLink>
+        </div>
+      </div>
       <NuxtLink to="/pc/solutions" class="nav-item">行业解决方案</NuxtLink>
       <NuxtLink to="/pc/docs" class="nav-item">文档中心</NuxtLink>
       <NuxtLink to="/pc/about" class="nav-item">了解我们</NuxtLink>
@@ -45,7 +77,8 @@ watchEffect(() => {
   left: 0;
   right: 0;
   z-index: 1000;
-  background: #030014;
+  background: transparent;
+  // background: #030014;
   transition: transform 0.3s ease;
 
   &.header-hidden {
@@ -90,11 +123,10 @@ watchEffect(() => {
     margin: 0 15px;
     cursor: pointer;
     color: #FFF;
-    font-family: "Source Han Sans CN";
-    font-size: 14px;
+    font-size: 16px;
     font-style: normal;
     font-weight: 400;
-    line-height: 14px;
+    line-height: 16px;
 
     &:hover {
       // color: #000;
@@ -108,6 +140,7 @@ watchEffect(() => {
   align-items: center;
   justify-content: left;
   color: #FFF;
+  font-size: 16px;
 
   div {
     margin-left: 20px;
@@ -127,4 +160,82 @@ watchEffect(() => {
     box-shadow: 0.5px 0.5px 18px 0 rgba(125, 70, 255, 0.45) inset;
   }
 }
+
+.nav-item-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 100%;
+
+  &:hover .dropdown-menu {
+    opacity: 1;
+    visibility: visible;
+    transform: translate(-50%, 30px);
+  }
+}
+
+.dropdown-menu {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  top: 100%;
+  left: 50%;
+  transform: translate(-50%, 0);
+  border-radius: 4px;
+  min-width: 284px;
+  opacity: 0;
+  border-top: 1px solid #7D46FF;
+  background: rgba(63, 63, 63, 0.60);
+  visibility: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  backdrop-filter: blur(30px);
+  z-index: 1001;
+  margin-top: 5px;
+
+  .dropdown-item {
+    padding: 12px;
+    display: flex;
+    align-items: center;
+    color: #FFF;
+    text-decoration: none;
+    font-size: 14px;
+    transition: background 0.2s, color 0.2s;
+    text-align: center;
+    gap: 24px;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.1);
+    }
+
+    .item-img {
+      width: 34px;
+      height: 34px;
+    }
+
+    .item-text {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-start;
+      gap: 10px;
+
+      p {
+        color: #FFF;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 16px;
+      }
+
+      span {
+        color: rgba(255, 255, 255, 0.60);
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 22px;
+        text-align: left;
+      }
+    }
+  }
+}
 </style>

app/components/PlansSection.vue

@@ -98,16 +98,15 @@
   .plan-card {
     border-radius: 20px;
     background: rgba(255, 255, 255, 0.08);
-    padding: 45px 24px ;
+    padding: 45px 24px;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     height: 608px;
 
     &: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%);
+      border: 2px solid rgba(178, 161, 255, 0.80);
+      background: linear-gradient(180deg, rgba(146, 116, 254, 0.20) 0%, rgba(125, 70, 255, 0.20) 100%);
 
       .plan-actions .btn-primary {
         background: linear-gradient(91deg, #A39DFF 1.24%, #7D46FF 122.93%);
@@ -189,11 +188,12 @@
         font-size: 24px;
         cursor: pointer;
         transition: opacity 0.3s ease;
+
         &:hover {
           opacity: 0.85;
         }
       }
-     
+
     }
 
     .plan-title {

app/components/home/ProductTabs.vue

@@ -2,13 +2,15 @@
   <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 }"
-        @click="tabClick(index)">
+        @click="activeTab = index">
         {{ tab.name }}
       </div>
     </section>
 
     <section class="product-cards-wrapper">
-      <component :is="currentLayout" :key="activeTab" :cards="currentTabData.cards" />
+      <Transition name="fade" mode="out-in">
+        <component :is="currentLayout" :key="activeTab" :cards="currentTabData.cards" />
+      </Transition>
     </section>
   </div>
 </template>
@@ -99,10 +101,6 @@ const tabs = [
   }
 ]
 
-const tabClick = (index) => {
-  activeTab.value = index
-}
-
 const currentTabData = computed(() => tabs[activeTab.value])
 
 const currentLayout = computed(() => {
@@ -127,7 +125,7 @@ const currentLayout = computed(() => {
   backdrop-filter: blur(20px);
   display: flex;
   align-items: center;
-  gap: 60px;
+  gap: 22px;
 
   .tab-item {
     font-family: 'Source Han Sans CN', sans-serif;
@@ -150,7 +148,6 @@ const currentLayout = computed(() => {
     &.active {
       background: linear-gradient(62.84deg, rgba(130, 77, 255, 1) 0%, rgba(164, 125, 255, 1) 100%);
       color: #ffffff;
-      transform: translateY(0);
     }
 
     &:hover:not(.active) {
@@ -158,6 +155,8 @@ const currentLayout = computed(() => {
       transform: translateY(-2px);
     }
   }
+
+
 }
 
 .product-cards-wrapper {
@@ -177,16 +176,16 @@ const currentLayout = computed(() => {
 
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.3s ease, transform 0.3s ease;
+  transition: opacity 0.5s ease, transform 0.5s ease;
 }
 
 .fade-enter-from {
   opacity: 0;
-  transform: translateY(10px);
+  transform: translateY(20px);
 }
 
 .fade-leave-to {
   opacity: 0;
-  transform: translateY(-10px);
+  transform: translateY(-20px);
 }
 </style>

app/components/home/ProductTabs/MultiCardLayout.vue

@@ -60,14 +60,12 @@ defineProps({
 
   .card-description {
     width: 266px;
-    font-family: 'Source Han Sans CN', sans-serif;
+    color: rgba(255, 255, 255, 0.6);
+    font-family: "Source Han Sans CN";
     font-size: 14px;
+    font-style: normal;
     font-weight: 400;
     line-height: 24px;
-    color: #ffffff;
-    margin: 0;
-    text-align: left;
-    word-wrap: break-word;
   }
 
   .card-features {

app/components/home/StatsSection.vue

@@ -1,27 +1,26 @@
 <template>
-  <section class="stats-section" :style="{ backgroundImage: `url(${homeBg})` }">
-    <NuxtPicture  class="stats-figure" :src="homeD" alt="游戏盾" ></NuxtPicture>
-    <div class="stat-item">
-      <div class="stat-label">今日&nbsp;CC&nbsp;攻击次数</div>
-      <div class="stat-value">{{ formatNumber(stats.ccAttacks) }}</div>
-    </div>
-    <div class="stat-item state-other">
-      <div class="stat-label">今日&nbsp;DDoS&nbsp;攻击峰值</div>
-      <div class="stat-value">{{ formatNumber(stats.ddosPeak) }}</div>
-    </div>
-    <div class="stat-item">
-      <div class="stat-label">今日&nbsp;WAF&nbsp;拦截次数</div>
-      <div class="stat-value">{{ formatNumber(stats.wafBlocks) }}</div>
-    </div>
-  </section>
+  <div class="stats-container">
+    <section class="stats-section">
+      <NuxtPicture class="stats-figure" src="/images/home/home-d.png" alt="游戏盾"></NuxtPicture>
+      <div class="stat-item">
+        <div class="stat-label">今日&nbsp;CC&nbsp;攻击次数</div>
+        <div class="stat-value">{{ formatNumber(stats.ccAttacks) }}</div>
+      </div>
+      <div class="stat-item state-other">
+        <div class="stat-label">今日&nbsp;DDoS&nbsp;攻击峰值</div>
+        <div class="stat-value">{{ formatNumber(stats.ddosPeak) }}</div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-label">今日&nbsp;WAF&nbsp;拦截次数</div>
+        <div class="stat-value">{{ formatNumber(stats.wafBlocks) }}</div>
+      </div>
+    </section>
+  </div>
 </template>
 
 <script setup>
 import { onMounted, onUnmounted } from 'vue'
 import { storeToRefs } from 'pinia'
-const homeBg = '/images/home/home-bg.png'
-const homeD = '/images/home/home-d.png'
-
 const statsStore = useStatsStore()
 const { stats } = storeToRefs(statsStore)
 
@@ -43,10 +42,15 @@ const formatNumber = (num) => {
 </script>
 
 <style scoped lang="scss">
+.stats-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
 .stats-section {
   width: 100%;
-  max-width: 1920px;
-  height: 749px;
+  height: 800px;
   position: relative;
   display: flex;
   align-items: center;
@@ -54,6 +58,7 @@ const formatNumber = (num) => {
   background-size: cover;
   background-position: center top;
   overflow: hidden;
+  background-image: url('/images/home/home-bg.png');
 
   .stats-figure {
     position: absolute;

app/components/products/Card.vue

@@ -5,7 +5,7 @@
       <div v-mouse-glow class="card-item card1">
         <div class="card-title">
           <div class="title-wrapper">
-            <NuxtImg :src="icon" alt="加密锁" />
+            <img src="~/assets/svg/products/lock.svg" alt="加密锁" />
             <h3>全链加密</h3>
           </div>
           <div class="stat-text">
@@ -26,7 +26,7 @@
       <div v-mouse-glow class="card-item card2">
         <div class="card-title">
           <div class="title-wrapper">
-            <NuxtImg :src="icon2" alt="加密锁" />
+            <img src="~/assets/svg/products/security.svg" alt="加密锁" />
             <h3>DDoS 防护</h3>
           </div>
           <div class="stat-text">
@@ -37,7 +37,7 @@
       <div v-mouse-glow class="card-item card3">
         <div class="card-title">
           <div class="title-wrapper">
-            <NuxtImg :src="icon3" alt="加密锁" />
+            <img src="~/assets/svg/products/acceleration.svg" alt="加密锁" />
             <h3>智能加速</h3>
           </div>
           <div class="stat-text">
@@ -64,9 +64,6 @@
   </section>
 </template>
 <script setup>
-  import icon from '~/assets/svg/products/lock.svg'
-  import icon2 from '~/assets/svg/products/security.svg'
-  import icon3 from '~/assets/svg/products/acceleration.svg'
 </script>
 <style lang="scss" scoped>
 .card-container {
@@ -76,7 +73,7 @@
 
   .card-bg-img {
     position: absolute;
-    bottom: 0;
+    bottom: -174px;
     left: 0;
     width: 100%;
     height: auto;
@@ -107,7 +104,7 @@
   transition: transform .3s ease;
 
   &:hover {
-    border: 1px solid #B7B2FF;
+    border: 1px solid #B864FF;
     background: linear-gradient(180deg, rgba(184, 100, 255, 0.20) 0%, rgba(137, 64, 254, 0.20) 100%);
     transform: translateY(-5px);
   }

app/components/products/Introduction.vue

@@ -45,7 +45,8 @@
   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%);
+  // background: linear-gradient(180deg, #A86AFD -110.27%, rgba(3, 0, 20, 0.00) 44.89%);
+  background: linear-gradient(179deg, #A86AFD -65.5%, rgba(3, 0, 20, 0.80) 44.94%);
   border-top: 2px solid #953FFF;
   justify-content: space-between;
   gap: 35px;

app/layouts/pc.vue

@@ -24,5 +24,6 @@
 .pc-layout-main {
   flex: 1;
   width: 100%;
+  box-sizing: border-box;
 }
 </style>

app/pages/index.vue

@@ -3,8 +3,7 @@
 <script setup>
 import { onMounted } from 'vue'
 onMounted(() => {
-  const userAgent = navigator.userAgent.toLowerCase()
-  const isMobile = /mobile|android|iphone|ipad|ipod/i.test(userAgent)
+  const isMobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/)
   if (isMobile) {
     window.location.href = '/h5'
   } else {

app/pages/pc/index.vue

@@ -1,170 +1,168 @@
 <template>
-  <div class="container">
-    <section class="main-content">
-      <!-- 标题区域和视频背景 -->
-      <section class="hero-section">
-        <!-- 视频背景 -->
-        <video ref="videoRef" class="hero-video-bg" src="~/assets/video/home.webm" autoplay loop muted playsinline
-          @loadedmetadata="onVideoLoaded"></video>
-        <!-- Canvas动画组件 -->
-        <ParticlesCanvas class="canvas-overlay" />
-        <!-- 内容 -->
-        <div class="hero-content">
-          <h2 class="hero-title">您专注业务，我们守护安全&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;再强的攻击,也有攻不破的防线
-          </h2>
-          <div class="hero-subtitle">
-            <p>高防服务器&nbsp;|&nbsp;高防DNS&nbsp;|&nbsp;游戏盾SDK&nbsp;|&nbsp;高防CDN&nbsp;全方位守护您的业务</p>
-          </div>
+  <section>
+    <!-- 标题区域和视频背景 -->
+    <section class="hero-section">
+      <!-- 视频背景 -->
+      <video ref="videoRef" class="hero-video-bg" preload="auto" :src="homeVideo" autoplay loop muted playsinline
+        @loadedmetadata="onVideoLoaded"></video>
+      <!-- Canvas动画组件 -->
+      <ParticlesCanvas class="canvas-overlay" />
+      <!-- 内容 -->
+      <div class="hero-content">
+        <h2 class="hero-title">您专注业务，我们守护安全&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;再强的攻击,也有攻不破的防线
+        </h2>
+        <div class="hero-subtitle">
+          <p>高防服务器&nbsp;|&nbsp;高防DNS&nbsp;|&nbsp;游戏盾SDK&nbsp;|&nbsp;高防CDN&nbsp;全方位守护您的业务</p>
         </div>
-      </section>
+      </div>
+    </section>
 
-      <ProductTabs />
+    <ProductTabs />
 
-      <!-- 安全洞见标题 -->
-      <section class="insight-header">
-        <h2 class="insight-title">安全洞见&nbsp;&nbsp;&nbsp;全网感知</h2>
-        <p class="insight-subtitle">实时攻防态势数据</p>
-      </section>
+    <!-- 安全洞见标题 -->
+    <section class="insight-header">
+      <h2 class="insight-title">安全洞见&nbsp;&nbsp;&nbsp;全网感知</h2>
+      <p class="insight-subtitle">实时攻防态势数据</p>
+    </section>
 
-      <!-- 数据展示区域 -->
-      <StatsSection />
+    <!-- 数据展示区域 -->
+    <StatsSection />
+
+    <!-- 安全运营与方案模块 -->
+    <PlansSection style="margin-top: 120px;" />
+
+    <!-- 安全漏洞 / 全景技术架构上方模块 -->
+    <section class="security-arch-section">
+      <NuxtImg alt="安全架构" src="/images/home/home-bg2.png" class="security-arch-img" />
+      <div class="security-arch-animate">
+        <SecurityParticles />
+      </div>
+      <div class="security-arch-desc">
+        <h3 class="security-arch-title">
+          全景技术架构，让技术成为增长引擎
+        </h3>
+        <div class="security-arch-subtitle">
+          <p>
+            从基础设施、数据引擎、服务中台到业务应用，层层协同，将算力、数据与能力统一管理，
+          </p>
+          <p>
+            保证系统在高并发、高复杂度场景下依然稳定运行。
+          </p>
+        </div>
+      </div>
+    </section>
+    <!-- TODO 正常访客等... -->
 
-      <!-- 安全运营与方案模块 -->
-      <PlansSection style="margin-top: 120px;" />
+    <section class="security-flowchart">
+      <NuxtPicture src="/images/home/flowchart.png" alt="流程" />
+    </section>
 
-      <!-- 安全漏洞 / 全景技术架构上方模块 -->
-      <section class="security-arch-section">
-        <NuxtImg alt="安全架构" src="/images/home/home-bg2.png" class="security-arch-img" />
-        <div class="security-arch-animate">
-          <SecurityParticles />
+    <!-- 助力各行业客户成功 -->
+    <section class="cain-section">
+      <NuxtImg alt="助力各行业客户成功" src="/images/home/home-bg3.png" class="cain-section-img" />
+      <div class="cain-section-animate">
+        <SecurityParticles />
+      </div>
+      <div class="cain-section-desc">
+        <h3 class="cain-section-title">
+          助力各行业客户成功
+        </h3>
+      </div>
+    </section>
+    <section class="industry">
+      <div class="industry-content">
+        <div class="industry-item">
+          <div class="industry-text">金融</div>
+          <NuxtImg src="/images/home/icon.png" alt="金融" class="industry-icon" />
         </div>
-        <div class="security-arch-desc">
-          <h3 class="security-arch-title">
-            全景技术架构，让技术成为增长引擎
-          </h3>
-          <div class="security-arch-subtitle">
-            <p>
-              从基础设施、数据引擎、服务中台到业务应用，层层协同，将算力、数据与能力统一管理，
-            </p>
-            <p>
-              保证系统在高并发、高复杂度场景下依然稳定运行。
-            </p>
-          </div>
+        <div class="industry-item">
+          <div class="industry-text">互联网</div>
+          <NuxtImg src="/images/home/icon2.png" alt="互联网" class="industry-icon" />
         </div>
-      </section>
-      <!-- TODO 正常访客等... -->
-
-      <section class="security-flowchart">
-        <NuxtPicture src="/images/home/flowchart.png" alt="流程" />
-      </section>
-
-      <!-- 助力各行业客户成功 -->
-      <section class="cain-section">
-        <NuxtImg alt="助力各行业客户成功" src="/images/home/home-bg3.png" class="cain-section-img" />
-        <div class="cain-section-animate">
-          <SecurityParticles />
+        <div class="industry-item">
+          <div class="industry-text">医疗健康</div>
+          <NuxtImg src="/images/home/icon3.png" alt="医疗健康" class="industry-icon" />
         </div>
-        <div class="cain-section-desc">
-          <h3 class="cain-section-title">
-            助力各行业客户成功
-          </h3>
+        <div class="industry-item">
+          <div class="industry-text">制造</div>
+          <NuxtImg src="/images/home/icon4.png" alt="制造" class="industry-icon" />
         </div>
-      </section>
-      <section class="industry">
-        <div class="industry-content">
-          <div class="industry-item">
-            <div class="industry-text">金融</div>
-            <NuxtImg src="/images/home/icon.png" alt="金融" class="industry-icon" />
-          </div>
-          <div class="industry-item">
-            <div class="industry-text">互联网</div>
-            <NuxtImg src="/images/home/icon2.png" alt="互联网" class="industry-icon" />
-          </div>
-          <div class="industry-item">
-            <div class="industry-text">医疗健康</div>
-            <NuxtImg src="/images/home/icon3.png" alt="医疗健康" class="industry-icon" />
-          </div>
-          <div class="industry-item">
-            <div class="industry-text">制造</div>
-            <NuxtImg src="/images/home/icon4.png" alt="制造" class="industry-icon" />
-          </div>
-          <div class="industry-item">
-            <div class="industry-text">教育</div>
-            <NuxtImg src="/images/home/icon5.png" alt="教育" class="industry-icon" />
-          </div>
+        <div class="industry-item">
+          <div class="industry-text">教育</div>
+          <NuxtImg src="/images/home/icon5.png" alt="教育" class="industry-icon" />
         </div>
-        <div class="industry-other">
-          <div class="other-item">
-            <NuxtPicture src="/images/home/icon6.png" alt="卓越教育" />
-          </div>
-          <div class="other-item">
-            <NuxtPicture src="/images/home/icon7.png" alt="华福证券" />
-          </div>
-          <div class="other-item">
-            <NuxtPicture src="/images/home/icon8.png" alt="汉王" />
-          </div>
-          <div class="other-item">
-            <NuxtPicture src="/images/home/icon9.png" alt="隧道股份" />
-          </div>
-          <div class="other-item">
-            <NuxtPicture src="/images/home/icon10.png" alt="岳阳医院" />
-          </div>
-          <div class="other-item">
-            <NuxtPicture src="/images/home/icon11.png" alt="杉德" />
-          </div>
-          <div class="other-item">
-            <NuxtPicture src="/images/home/icon12.png" alt="易班" />
-          </div>
-          <div class="other-item">
-            <NuxtPicture src="/images/home/icon13.png" alt="银联商务" />
-          </div>
-          <div class="other-item">
-            <NuxtPicture src="/images/home/icon14.png" alt="长海医院" />
-          </div>
-          <div class="other-item">
-            <NuxtPicture src="/images/home/icon15.png" alt="斗象科技" />
-          </div>
-          <div class="other-item">
-            <NuxtPicture src="/images/home/icon16.png" alt="瑞金" />
-          </div>
-          <div class="other-item">
-            <NuxtPicture src="/images/home/icon17.png" alt="3L" />
-          </div>
-          <div class="other-item">
-            <NuxtPicture src="/images/home/icon18.png" alt="宝付" />
-          </div>
-          <div class="other-item">
-            <NuxtPicture src="/images/home/icon19.png" alt="新华医院" />
-          </div>
-          <div class="other-item">
-            <NuxtPicture src="/images/home/icon20.png" alt="中船重工物贸集团" />
-          </div>
+      </div>
+      <div class="industry-other">
+        <div class="other-item">
+          <NuxtPicture src="/images/home/icon6.png" alt="卓越教育" />
         </div>
-        <div class="industry-box">
-          <div class="industry-radar">
-            <NuxtImg src="/images/home/home-bg4.png" alt="radar" class="radar-bg-img" />
-            <div class="radar-dots">
-              <span class="radar-dot radar-dot-1" />
-              <span class="radar-dot radar-dot-2" />
-              <span class="radar-dot radar-dot-3" />
-              <span class="radar-dot radar-dot-4" />
-            </div>
-          </div>
+        <div class="other-item">
+          <NuxtPicture src="/images/home/icon7.png" alt="华福证券" />
+        </div>
+        <div class="other-item">
+          <NuxtPicture src="/images/home/icon8.png" alt="汉王" />
+        </div>
+        <div class="other-item">
+          <NuxtPicture src="/images/home/icon9.png" alt="隧道股份" />
+        </div>
+        <div class="other-item">
+          <NuxtPicture src="/images/home/icon10.png" alt="岳阳医院" />
+        </div>
+        <div class="other-item">
+          <NuxtPicture src="/images/home/icon11.png" alt="杉德" />
+        </div>
+        <div class="other-item">
+          <NuxtPicture src="/images/home/icon12.png" alt="易班" />
+        </div>
+        <div class="other-item">
+          <NuxtPicture src="/images/home/icon13.png" alt="银联商务" />
+        </div>
+        <div class="other-item">
+          <NuxtPicture src="/images/home/icon14.png" alt="长海医院" />
+        </div>
+        <div class="other-item">
+          <NuxtPicture src="/images/home/icon15.png" alt="斗象科技" />
+        </div>
+        <div class="other-item">
+          <NuxtPicture src="/images/home/icon16.png" alt="瑞金" />
+        </div>
+        <div class="other-item">
+          <NuxtPicture src="/images/home/icon17.png" alt="3L" />
+        </div>
+        <div class="other-item">
+          <NuxtPicture src="/images/home/icon18.png" alt="宝付" />
+        </div>
+        <div class="other-item">
+          <NuxtPicture src="/images/home/icon19.png" alt="新华医院" />
         </div>
-        <div class="industry-title">
-          <h3><span>立即加入</span> <span>安全之旅</span></h3>
-          <div class="industry-subtitle">完成注册，即可免费体验 DDoS防护、CC防护、DNS解析等多款安全产品</div>
+        <div class="other-item">
+          <NuxtPicture src="/images/home/icon20.png" alt="中船重工物贸集团" />
         </div>
-      </section>
-      <section class="hero-section">
-        <!-- 视频背景 -->
-        <video ref="videoRef" class="hero-video-bg" src="~/assets/video/home.webm" autoplay loop muted playsinline
-          @loadedmetadata="onVideoLoaded"></video>
-        <!-- Canvas动画组件 -->
-        <ParticlesCanvas class="canvas-overlay" />
-      </section>
+      </div>
+      <div class="industry-box">
+        <div class="industry-radar">
+          <NuxtImg src="/images/home/home-bg4.png" alt="radar" class="radar-bg-img" />
+          <div class="radar-dots">
+            <span class="radar-dot radar-dot-1" />
+            <span class="radar-dot radar-dot-2" />
+            <span class="radar-dot radar-dot-3" />
+            <span class="radar-dot radar-dot-4" />
+          </div>
+        </div>
+      </div>
+      <div class="industry-title">
+        <h3><span>立即加入</span> <span>安全之旅</span></h3>
+        <div class="industry-subtitle">完成注册，即可免费体验 DDoS防护、CC防护、DNS解析等多款安全产品</div>
+      </div>
     </section>
-  </div>
+    <section class="hero-section" style="margin-top: 0;">
+      <!-- 视频背景 -->
+      <video ref="videoRef" style="clip-path: inset(0 0 50% 0);" class="hero-video-bg" src="~/assets/video/home.webm" autoplay loop muted playsinline
+        @loadedmetadata="onVideoLoaded"></video>
+      <!-- Canvas动画组件 -->
+      <ParticlesCanvas class="canvas-overlay" />
+    </section>
+  </section>
 </template>
 
 <script setup>
@@ -178,7 +176,7 @@ import ProductTabs from '~/components/home/ProductTabs.vue'
 import PlansSection from '~/components/PlansSection.vue'
 import ParticlesCanvas from '~/components/ParticlesCanvas.vue'
 import SecurityParticles from '~/components/SecurityParticles.vue'
-
+import homeVideo from '~/assets/video/home.webm'
 
 
 
@@ -194,12 +192,13 @@ const onVideoLoaded = () => {
 useHead(() => ({
   title: 'DDAC',
   meta: [
-    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+    { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' },
     { name: 'description', content: 'DDAC - 游戏盾防御' },
     { name: 'keywords', content: '高防服务器 | 高防DNS | 游戏盾SDK | 高防CDN' }
   ],
   link: [
-    { rel: 'icon', href: '/favicon.ico' }
+    { rel: 'icon', href: '/favicon.ico' },
+    // { rel: 'preload', as: 'video', href: homeVideo }
   ],
   htmlAttrs: {
     lang: 'en'
@@ -208,13 +207,6 @@ useHead(() => ({
 </script>
 
 <style scoped lang="scss">
-.container {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  box-sizing: border-box;
-}
-
 .main-content {
   width: 100%;
   max-width: 1920px;
@@ -230,17 +222,17 @@ useHead(() => ({
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 81px 0 0;
+  margin-top: 182px;
   box-sizing: border-box;
-  overflow: hidden;
 
   .hero-video-bg {
     position: absolute;
-    top: -3%;
-    left: 0;
-    width: 100%;
+    top: 32%;
+    left: 50%;
+    width: 1200px;
+    transform: translate(-50%);
     object-fit: cover;
-    clip-path: inset(0 0 50% 0);
+    clip-path: inset(0 0 40% 0);
     z-index: 0;
   }
 
@@ -503,7 +495,7 @@ $Diameter :890px;
     align-items: center;
     width: 240px;
     height: 100px;
-    border-radius: 20px;
+    border-radius: 10px;
     border: 1px solid #B2A1FF;
     background: #1C192B;
   }

app/pages/pc/products.vue → app/pages/pc/products/sdk.vue

@@ -1,8 +1,8 @@
 <template>
-  <section class="container">
+  <section>
     <section class="video-section">
       <div class="left-bg"></div>
-      <video ref="videoRef" class="video-bg" src="~/assets/video/products.mp4" autoplay loop muted playsinline
+      <video ref="videoRef" class="video-bg" src="~/assets/video/sdk.mp4" autoplay loop muted playsinline
         @loadedmetadata="onVideoLoaded"></video>
       <div class="video-title">
         <h1>DDAC游戏盾——让APP自带</h1>
@@ -26,7 +26,7 @@
     </section>
     <section class="products-sdk">
       <h2>安全加速SDK防护架构</h2>
-      <NuxtPicture src="/images/products/flowchart.png" alt="安全加速SDK防护架构"  />
+      <NuxtPicture src="/images/products/flowchart.png" alt="安全加速SDK防护架构" />
     </section>
   </section>
 </template>
@@ -50,7 +50,7 @@ const onVideoLoaded = () => {
 useHead(() => ({
   title: '产品中心 - DDAC',
   meta: [
-    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+    { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' },
     { name: 'description', content: '一体化解决游戏安全问题' },
     { name: 'keywords', content: '全链加密 | DDoS 防护 | 智能加速 ' }
   ]
@@ -58,13 +58,6 @@ useHead(() => ({
 </script>
 
 <style scoped lang="scss">
-.container {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  box-sizing: border-box;
-}
-
 .video-section {
   position: relative;
   width: 100%;
@@ -92,12 +85,17 @@ useHead(() => ({
     display: block;
     z-index: 1;
     position: relative;
+    object-fit: cover;
+    clip-path: inset(0 0 9% 0);
   }
 
   .video-title {
     position: absolute;
     top: 30%;
-    left: 14%;
+    left: 48%;
+    transform: translateX(-50%);
+    width: 100%;
+    max-width: 1200px;
     z-index: 3;
     color: #fff;
     font-style: normal;
@@ -114,6 +112,7 @@ useHead(() => ({
     }
 
     .video-subtitle {
+      margin-left: -4%;
       color: #DBB9FF;
       font-size: 45px;
       font-weight: 500;
@@ -204,6 +203,7 @@ useHead(() => ({
   flex-direction: column;
   align-items: center;
   gap: 50px;
+
   h2 {
     font-family: "Source Han Sans CN";
     font-size: 62px;

app/pages/pc/products/web.vue

@@ -0,0 +1,107 @@
+<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="video-title">
+        <p class="video-text">Intelligent routing / dynamic optimization / real-time processing</p>
+        <h1><span>智能</span>路由/<span>动态</span>优化/<span>实时</span>处理</h1>
+        <div class="video-subtitle">不止于快，更稳更安全，为您的业务保驾护航</div>
+        <div class="video-btn">
+          <span>联系我们</span>
+          <Icon name="line-md:chevron-right" />
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+<script setup>
+definePageMeta({
+  layout: 'pc'
+})
+
+</script>
+<style lang="scss" scoped>
+.video-section {
+  position: relative;
+  width: 100%;
+  margin: 0 auto;
+  overflow: hidden;
+
+
+  .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%;
+    left: 48%;
+    transform: translateX(-50%);
+    width: 100%;
+    max-width: 1200px;
+    z-index: 3;
+    color: #fff;
+    font-style: normal;
+    display: flex;
+    flex-direction: column;
+
+    h1 {
+      color: #D8D3FF;
+      font-size: 45px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 80px;
+
+      span {
+        color: #997DFF;
+      }
+    }
+
+    .video-subtitle {
+      margin-top: 20px;
+      color: #E2D9FF;
+      font-size: 20px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 30px;
+    }
+
+    .video-text {
+      color: #E2D9FF;
+      font-size: 20px;
+      font-style: normal;
+      font-weight: 300;
+      line-height: 30px;
+    }
+
+    p {
+      color: #E2D9FF;
+      font-size: 20px;
+      font-weight: 400;
+      line-height: 20px;
+    }
+
+    .video-btn {
+      cursor: pointer;
+      margin-top: 112px;
+      display: flex;
+      box-sizing: border-box;
+      width: 255px;
+      height: 60px;
+      padding: 7px 21px 7px 45px;
+      justify-content: center;
+      align-items: center;
+      gap: 10px;
+      border-radius: 10px;
+      background: linear-gradient(91deg, #A39DFF 1.24%, #7D46FF 122.93%);
+    }
+  }
+}
+</style>