Pārlūkot izejas kodu

feat(products): 优化防御产品卡片悬停视觉效果

- 为 v-mouse-glow 指令添加自定义尺寸参数,提升交互反馈
- 引入动态角部光晕效果,使用 CSS 自定义属性和锥形渐变
- 悬停时平滑隐藏角部光晕以避免视觉冲突
- 为不同卡片设置差异化的光晕尺寸和透明度
reaper 1 mēnesi atpakaļ
vecāks
revīzija
7969940ca0
1 mainītis faili ar 42 papildinājumiem un 3 dzēšanām
  1. 42 3
      app/components/products/Defense.vue

+ 42 - 3
app/components/products/Defense.vue

@@ -8,7 +8,7 @@
 
       <div class="defense-grid">
         <!-- Row 1 -->
-        <div v-mouse-glow class="defense-card">
+        <div v-mouse-glow="{size:500}" class="defense-card">
           <div class="card-title">
             <div>
               <h4>美/日/港三地高防节点</h4>
@@ -25,7 +25,7 @@
           </div>
         </div>
 
-        <div v-mouse-glow class="defense-card">
+        <div v-mouse-glow="{size:500}" class="defense-card">
           <div class="card-title">
             <div>
               <h4>全球分布式近源清洗,让攻击流量</h4>
@@ -41,7 +41,7 @@
         </div>
 
         <!-- Row 2 -->
-        <div v-mouse-glow class="defense-card full-width">
+        <div v-mouse-glow="{size:550}" class="defense-card full-width">
           <div class="card-title">
             <div>
               <h4>从全局架构到智能边缘,为您重定义“安全”与“速度”</h4>
@@ -100,7 +100,19 @@
     gap: 30px;
   }
 
+  .defense-grid > .defense-card:nth-child(2) {
+    --corner-glow-size: 320px;
+    --corner-glow-opacity: 0.26;
+  }
+
+  .defense-grid > .defense-card:nth-child(3) {
+    --corner-glow-size:400px;
+    --corner-glow-opacity: 0.20;
+  }
+
   .defense-card {
+    --corner-glow-size: 240px;
+    --corner-glow-opacity: 0.38;
     border-radius: 20px;
     background: rgba(255, 255, 255, 0.10);
     padding: 32px;
@@ -108,12 +120,39 @@
     flex-direction: column;
     align-items: flex-start;
     gap: 22px;
+    position: relative;
+    overflow: hidden;
+
+    > * {
+      position: relative;
+      z-index: 2;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      right: -64px;
+      bottom: -64px;
+      width: var(--corner-glow-size);
+      height: var(--corner-glow-size);
+      border-radius: 999px;
+      pointer-events: none;
+      background: conic-gradient(from 45deg, #5A7DFF, #9E3BFF, #5A7DFF);
+      filter: blur(30px) drop-shadow(0 0 20px rgba(90, 125, 255, 0.5));
+      opacity: var(--corner-glow-opacity);
+      transition: opacity 200ms ease;
+      z-index: 0;
+    }
 
     &:hover {
       border: 1px solid #5347FF;
       background: linear-gradient(124deg, rgba(82, 91, 255, 0.07) -21.2%, rgba(144, 65, 255, 0.07) 72.72%);
     }
 
+    &:hover::after {
+      opacity: 0;
+    }
+
     &.full-width {
       grid-column: 1 / -1;
       flex-direction: row;