Add: 在搜索框和用户动态之间添加5个花哨的游戏风格横排按钮

src/views/MeetPandaFirstPageView.vue

@@ -40,6 +40,20 @@
         </div>
       </div>
 
+      <div class="game-buttons-section">
+        <button 
+          v-for="(button, index) in gameButtons" 
+          :key="index" 
+          class="game-button"
+          :class="button.styleClass"
+          @click="handleGameButtonClick(button)"
+        >
+          <span class="game-button-icon">{{ button.icon }}</span>
+          <span class="game-button-text">{{ button.text }}</span>
+          <span class="game-button-glow"></span>
+        </button>
+      </div>
+
       <div class="user-dynamics-section">
         <h2 class="section-title">用户动态</h2>
         <div class="dynamics-list">
@@ -147,6 +161,43 @@ const hotTags = ref([
   '攻略交流'
 ])
 
+const gameButtons = ref([
+  {
+    id: 1,
+    text: '任务',
+    icon: '⚔️',
+    styleClass: 'button-fire'
+  },
+  {
+    id: 2,
+    text: '组队',
+    icon: '👥',
+    styleClass: 'button-ice'
+  },
+  {
+    id: 3,
+    text: '冒险',
+    icon: '🗺️',
+    styleClass: 'button-nature'
+  },
+  {
+    id: 4,
+    text: '商店',
+    icon: '🏪',
+    styleClass: 'button-gold'
+  },
+  {
+    id: 5,
+    text: '排行',
+    icon: '🏆',
+    styleClass: 'button-purple'
+  }
+])
+
+const handleGameButtonClick = (button) => {
+  console.log('点击游戏按钮：', button.text)
+}
+
 const dynamics = ref([
   {
     id: 1,
@@ -432,6 +483,183 @@ const closeImagePreview = () => {
   box-shadow: 0 4px 12px rgba(66, 184, 131, 0.2);
 }
 
+.game-buttons-section {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 16px;
+  padding: 20px;
+  margin: 20px 0;
+  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  gap: 12px;
+  position: relative;
+  overflow: hidden;
+}
+
+.game-buttons-section::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
+  animation: rotate 20s linear infinite;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.game-button {
+  position: relative;
+  width: 70px;
+  height: 70px;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  transition: all 0.3s ease;
+  z-index: 1;
+  overflow: hidden;
+}
+
+.game-button::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.game-button:hover::before {
+  opacity: 1;
+}
+
+.game-button:hover {
+  transform: scale(1.15) translateY(-5px);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+}
+
+.game-button:active {
+  transform: scale(1.05) translateY(-2px);
+}
+
+.game-button-icon {
+  font-size: 24px;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
+  transition: transform 0.3s ease;
+}
+
+.game-button:hover .game-button-icon {
+  transform: scale(1.2);
+}
+
+.game-button-text {
+  font-size: 11px;
+  font-weight: 700;
+  color: white;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+  letter-spacing: 0.5px;
+}
+
+.game-button-glow {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
+  opacity: 0;
+  transition: all 0.5s ease;
+  pointer-events: none;
+}
+
+.game-button:hover .game-button-glow {
+  width: 150%;
+  height: 150%;
+  opacity: 0.6;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 0.6;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  50% {
+    opacity: 0.8;
+    transform: translate(-50%, -50%) scale(1.1);
+  }
+}
+
+.button-fire {
+  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
+  box-shadow: 0 4px 15px rgba(238, 90, 36, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3);
+  border: 2px solid #ff9f43;
+}
+
+.button-fire:hover {
+  box-shadow: 0 8px 25px rgba(238, 90, 36, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.4);
+}
+
+.button-ice {
+  background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
+  box-shadow: 0 4px 15px rgba(9, 132, 227, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3);
+  border: 2px solid #00cec9;
+}
+
+.button-ice:hover {
+  box-shadow: 0 8px 25px rgba(9, 132, 227, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.4);
+}
+
+.button-nature {
+  background: linear-gradient(135deg, #55efc4 0%, #00b894 100%);
+  box-shadow: 0 4px 15px rgba(0, 184, 148, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3);
+  border: 2px solid #00cec9;
+}
+
+.button-nature:hover {
+  box-shadow: 0 8px 25px rgba(0, 184, 148, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.4);
+}
+
+.button-gold {
+  background: linear-gradient(135deg, #fdcb6e 0%, #f39c12 100%);
+  box-shadow: 0 4px 15px rgba(243, 156, 18, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3);
+  border: 2px solid #ffeaa7;
+}
+
+.button-gold:hover {
+  box-shadow: 0 8px 25px rgba(243, 156, 18, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.4);
+}
+
+.button-purple {
+  background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%);
+  box-shadow: 0 4px 15px rgba(108, 92, 231, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3);
+  border: 2px solid #dfe6e9;
+}
+
+.button-purple:hover {
+  box-shadow: 0 8px 25px rgba(108, 92, 231, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.4);
+}
+
 .user-dynamics-section {
   background-color: white;
   border-radius: 12px;