diff --git a/src/App.vue b/src/App.vue index f439e2a..e8991de 100644 --- a/src/App.vue +++ b/src/App.vue @@ -111,6 +111,7 @@
+
@@ -154,6 +155,7 @@ import videoIcon from './assets/video.svg' import playIcon from './assets/play.svg' import aiIcon from './assets/ai.svg' import picIcon from './assets/pic.svg' +import mapKuang from './assets/map-kuang.svg' type StyleType = 'circle' | 'top2' | 'top3' @@ -901,6 +903,7 @@ const addTop2Animation = () => { height: 333.004px; position: relative; align-self: center; + overflow: visible; } .layout-top2 .top2-bottom-row { @@ -946,12 +949,26 @@ const addTop2Animation = () => { align-items: center; justify-content: center; flex-shrink: 0; + position: relative; +} + +.top2-card-icon::before { + content: ''; + position: absolute; + width: 49px; + height: 49px; + border-radius: 50%; + border: 1.5px solid rgba(255, 255, 255, 0.7); + background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.35), rgba(37, 67, 165, 0.15) 60%, rgba(37, 67, 165, 0) 100%); + box-shadow: 0 0 10px rgba(0, 245, 255, 0.35); } .top2-card-icon img { - width: 100%; - height: 100%; + width: 28px; + height: 28px; display: block; + position: relative; + z-index: 1; } .top2-card-text { @@ -1015,6 +1032,18 @@ const addTop2Animation = () => { align-items: center; } +.top3-map-frame { + position: absolute; + left: 50%; + top: 50%; + width: 795px; + height: 456px; + transform: translate(-50%, -50%); + object-fit: contain; + pointer-events: none; + z-index: 2; +} + .top3-subheader { width: 100%; height: 87.178px;