update

src/components/HomePage.vue

@@ -356,7 +356,12 @@ watch(() => mergeId, async (newVal) => {
         <!-- 为不支持视频的设备提供 fallback -->
         <p style="display: none;">您的浏览器不支持视频播放</p>
       </video>
-      
+      <div class="scene-item logo">
+        <img src="../assets/images/logo.webp" alt="logo">
+      </div>
+      <div class="scene-item slogan">
+        <img src="../assets/images/slogan.webp" alt="slogan">
+      </div>
       <!-- fallback 背景图，当视频无法加载时显示 -->
       <div v-if="videoError || !videoLoaded" class="fallback-background"></div>
       
@@ -405,6 +410,15 @@ watch(() => mergeId, async (newVal) => {
 </template>
 
 <style scoped>
+.logo {
+  top: 4vw;
+  width: 24vw;
+  left: 4vw;
+}
+.slogan {
+  top: 20vw;
+  width: 76vw;
+}
 .main {
   height: 100%;
   overflow-y: auto;
@@ -451,9 +465,7 @@ watch(() => mergeId, async (newVal) => {
   cursor: pointer;
   transition: all 0.4s ease;
   overflow: hidden;
-  border: 3px solid transparent;
   animation: float 4s ease-in-out infinite;
-  z-index: 10; /* 确保按钮显示在视频之上 */
 }
 
 .scene-item:hover {
@@ -469,7 +481,7 @@ watch(() => mergeId, async (newVal) => {
 
 .item-1 {
   width: 21vw;
-  bottom: 1vw;
+  bottom: 5vw;
   left: 0;
   animation-delay: 0s;
 }
@@ -492,7 +504,7 @@ watch(() => mergeId, async (newVal) => {
 
 .item-2 {
   width: 48vw;
-  bottom: 1vw;
+  bottom: 5vw;
   animation-delay: 0s;
 }
 
@@ -518,7 +530,7 @@ watch(() => mergeId, async (newVal) => {
 
 .item-3 {
   width: 21vw;
-  bottom: 1vw;
+  bottom: 5vw;
   right: 0;
   animation-delay: 0s;
 }