diff --git a/Build_God_Game/src/assets/images/meditation.svg b/Build_God_Game/src/assets/images/meditation.svg new file mode 100644 index 0000000..2a067a7 --- /dev/null +++ b/Build_God_Game/src/assets/images/meditation.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Build_God_Game/src/components/MeditationIcon/MeditationIcon.vue b/Build_God_Game/src/components/MeditationIcon/MeditationIcon.vue new file mode 100644 index 0000000..25cdf4f --- /dev/null +++ b/Build_God_Game/src/components/MeditationIcon/MeditationIcon.vue @@ -0,0 +1,121 @@ + + + + + \ No newline at end of file diff --git a/Build_God_Game/src/views/TrainingView.vue b/Build_God_Game/src/views/TrainingView.vue index 0bdb42f..bea8044 100644 --- a/Build_God_Game/src/views/TrainingView.vue +++ b/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 () => {
-
- {{ isTraining ? 'πŸ”₯' : 'πŸ’€' }} +
+
{{ isTraining ? 'ζ­£εœ¨ζ‰“εδΈ­...' : 'ζœͺ开始打坐' }} @@ -198,26 +199,11 @@ const handleStopTraining = async () => { } .status-icon { - font-size: 4rem; - opacity: 0.5; - transition: all 0.3s ease; -} - -.status-icon.training { - opacity: 1; - animation: pulse 2s infinite; -} - -@keyframes pulse { - - 0%, - 100% { - transform: scale(1); - } - - 50% { - transform: scale(1.1); - } + display: flex; + align-items: center; + justify-content: center; + width: 120px; + height: 120px; } .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; }