添加了一个打坐的图标

Build_God_Game/src/components/MeditationIcon/MeditationIcon.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import meditationImg from '@/assets/images/meditation.svg'
+
+defineProps<{
+  isTraining: boolean
+}>()
+</script>
+
+<template>
+  <div class="meditation-icon" :class="{ training: isTraining }">
+    <div class="aura-ring ring-1"></div>
+    <div class="aura-ring ring-2"></div>
+    <div class="aura-ring ring-3"></div>
+    <div class="aura-ring ring-4"></div>
+    <img :src="meditationImg" class="person" alt="meditation" />
+  </div>
+</template>
+
+<style scoped>
+.meditation-icon {
+  position: relative;
+  width: 120px;
+  height: 120px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.person {
+  width: 80px;
+  height: 80px;
+  z-index: 2;
+  object-fit: contain;
+}
+
+.meditation-icon:not(.training) .person {
+  opacity: 0.3;
+}
+
+.meditation-icon:not(.training) .aura-ring {
+  display: none;
+}
+
+.aura-ring {
+  position: absolute;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  animation: aura-pulse 3s ease-in-out infinite;
+}
+
+.ring-1 {
+  width: 100px;
+  height: 100px;
+  animation-delay: 0s;
+}
+
+.ring-2 {
+  width: 110px;
+  height: 110px;
+  animation-delay: 0.5s;
+  animation-direction: reverse;
+}
+
+.ring-3 {
+  width: 120px;
+  height: 120px;
+  animation-delay: 1s;
+}
+
+.ring-4 {
+  width: 130px;
+  height: 130px;
+  animation-delay: 1.5s;
+  animation-direction: reverse;
+}
+
+.meditation-icon.training .aura-ring {
+  animation: color-shift 4s linear infinite, ring-pulse 2s ease-in-out infinite;
+}
+
+@keyframes color-shift {
+  0% {
+    border-color: #ffd700;
+    box-shadow: 0 0 20px #ffd700, 0 0 40px rgba(255, 215, 0, 0.5), inset 0 0 15px rgba(255, 215, 0, 0.3);
+  }
+  33% {
+    border-color: #00ffff;
+    box-shadow: 0 0 20px #00ffff, 0 0 40px rgba(0, 255, 255, 0.5), inset 0 0 15px rgba(0, 255, 255, 0.3);
+  }
+  66% {
+    border-color: #9932cc;
+    box-shadow: 0 0 20px #9932cc, 0 0 40px rgba(153, 50, 204, 0.5), inset 0 0 15px rgba(153, 50, 204, 0.3);
+  }
+  100% {
+    border-color: #ffd700;
+    box-shadow: 0 0 20px #ffd700, 0 0 40px rgba(255, 215, 0, 0.5), inset 0 0 15px rgba(255, 215, 0, 0.3);
+  }
+}
+
+@keyframes ring-pulse {
+  0%, 100% {
+    transform: scale(1) rotate(0deg);
+    opacity: 0.8;
+  }
+  50% {
+    transform: scale(1.05) rotate(180deg);
+    opacity: 1;
+  }
+}
+
+@keyframes aura-pulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 0.6;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 1;
+  }
+}
+</style>

Build_God_Game/src/views/TrainingView.vue

@@ -3,6 +3,7 @@ import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useCharacterStore } from '@/stores/character'
 import Particles from '@/components/Particles/Particles.vue'
+import MeditationIcon from '@/components/MeditationIcon/MeditationIcon.vue'
 
 const router = useRouter()
 const characterStore = useCharacterStore()
@@ -97,8 +98,8 @@ const handleStopTraining = async () => {
 
       <div class="training-content">
         <div class="status-section">
-          <div class="status-icon" :class="{ training: isTraining }">
+          <div class="status-icon">
-            {{ isTraining ? '🔥' : '💤' }}
+            <MeditationIcon :is-training="isTraining" />
           </div>
           <div class="status-text">
             {{ isTraining ? '正在打坐中...' : '未开始打坐' }}
@@ -198,26 +199,11 @@ const handleStopTraining = async () => {
 }
 
 .status-icon {
-  font-size: 4rem;
+  display: flex;
-  opacity: 0.5;
+  align-items: center;
-  transition: all 0.3s ease;
+  justify-content: center;
-}
+  width: 120px;
-
+  height: 120px;
-.status-icon.training {
-  opacity: 1;
-  animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
-
-  0%,
-  100% {
-    transform: scale(1);
-  }
-
-  50% {
-    transform: scale(1.1);
-  }
 }
 
 .status-text {
@@ -225,7 +211,7 @@ const handleStopTraining = async () => {
   font-size: 1rem;
 }
 
-.status-icon.training+.status-text {
+.status-section:has(.meditation-icon.training) .status-text {
   color: #ff8844;
 }