|
|
@@ -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;
|