feat: 优化

app/components/Header.vue

@@ -45,7 +45,8 @@ watchEffect(() => {
   left: 0;
   right: 0;
   z-index: 1000;
-  background: #030014;
+  background: transparent;
+  // background: #030014;
   transition: transform 0.3s ease;
 
   &.header-hidden {

app/components/PlansSection.vue

@@ -98,16 +98,16 @@
   .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: 1px solid #BF69FF;
+      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 +189,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,6 +1,6 @@
 <template>
-  <section class="stats-section" :style="{ backgroundImage: `url(${homeBg})` }">
-    <NuxtPicture  class="stats-figure" :src="homeD" alt="游戏盾" ></NuxtPicture>
+  <section class="stats-section" style="background-image: url(/images/home/home-bg.png)">
+    <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>
@@ -19,9 +19,6 @@
 <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)
 

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;

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/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

@@ -4,7 +4,7 @@
       <!-- 标题区域和视频背景 -->
       <section class="hero-section">
         <!-- 视频背景 -->
-        <video ref="videoRef" class="hero-video-bg" src="~/assets/video/home.webm" autoplay loop muted playsinline
+        <video ref="videoRef" class="hero-video-bg" preload="auto" :src="homeVideo" autoplay loop muted playsinline
           @loadedmetadata="onVideoLoaded"></video>
         <!-- Canvas动画组件 -->
         <ParticlesCanvas class="canvas-overlay" />
@@ -156,7 +156,7 @@
           <div class="industry-subtitle">完成注册，即可免费体验 DDoS防护、CC防护、DNS解析等多款安全产品</div>
         </div>
       </section>
-      <section class="hero-section">
+      <section class="hero-section" style="margin-top: 0;">
         <!-- 视频背景 -->
         <video ref="videoRef" class="hero-video-bg" src="~/assets/video/home.webm" autoplay loop muted playsinline
           @loadedmetadata="onVideoLoaded"></video>
@@ -178,7 +178,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 +194,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'
@@ -230,17 +231,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 +504,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

@@ -2,7 +2,7 @@
   <section class="container">
     <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/products1.mp4" autoplay loop muted playsinline
         @loadedmetadata="onVideoLoaded"></video>
       <div class="video-title">
         <h1>DDAC游戏盾——让APP自带</h1>
@@ -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 防护 | 智能加速 ' }
   ]
@@ -97,7 +97,10 @@ useHead(() => ({
   .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;