拾取钥匙

src/components/sidebar/ProgrammingSidebar.vue

@@ -4,12 +4,12 @@
     <div class="left-group">
       <el-row class="tac">
         <el-col :span="12">
-          <div class="mb-2-container">
+          <!-- <div class="mb-2-container">
             <span class="mb-2">
               <img :src="breakthrough" alt="" />
               主题大冒险
             </span>
-          </div>
+          </div> -->
           <el-menu
             :default-active="currentActiveIndex"
             class="el-menu-vertical-demo"
@@ -180,7 +180,7 @@ defineExpose({
   background-color: transparent;
   border: none;
   width: 100%;
-  // margin-top: rpx(25);
+  margin-top: rpx(25);
   margin-left: rpx(10);
 }
 .el-menu-item {

src/views/block/MapGame.vue

@@ -44,14 +44,14 @@
                 :class="{ 'collision': isColliding, 'success': hasReachedEnd }"
             >
             </div>
-            <!-- 携带物品容器 - 默认隐藏，有物品时显示 -->
+            <!-- 携带物品容器 -->
             <div class="carried-items-container" v-show="gameState.player.carriedItems.length > 0">
                 <div
                     v-for="(item, index) in gameState.player.carriedItems"
                     :key="index"
                     class="carried-item"
                     :style="getCarriedItemStyle(index, item)"
-                ></div>
+                ></div> 
             </div>
           </div>
 
@@ -447,7 +447,8 @@ function getCarriedItemStyle(index, item) {
     backgroundSize: 'contain',
     backgroundPosition: 'center',
     backgroundRepeat: 'no-repeat',
-    backgroundImage: `url(${item.img})`
+    backgroundImage: `url(${item.img})`,
+    animationDelay: index * 0.1 + 's'
   };
 }
 
@@ -1495,6 +1496,45 @@ onUnmounted(() => {
   gap: 10px;
   z-index: 15;
   backdrop-filter: blur(10px);
+  animation: fadeInScale 0.5s ease-out;
+}
+
+/* 淡入缩放动画 */
+@keyframes fadeInScale {
+  0% {
+    opacity: 0;
+    transform: scale(0.5) translateY(-10px);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+/* 携带物品样式 */
+.carried-item {
+  animation: bounceIn 0.3s ease-out forwards;
+  opacity: 0;
+}
+
+/* 弹入动画 */
+@keyframes bounceIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.3) translateY(-20px);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scale(1.1) translateY(5px);
+  }
+  80% {
+    opacity: 0.9;
+    transform: scale(0.95) translateY(-2px);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
 }
 
 /* 成功到达终点动画 */