Browse Source

引入了starborder组件,优化gameview

master
hanqin 3 days ago
parent
commit
b4455a6c43
  1. 27
      Build_God_Game/src/views/GameView.vue

27
Build_God_Game/src/views/GameView.vue

@ -45,6 +45,10 @@ const menuItems = computed(() => [
{ label: '捡垃圾', icon: scrapIcon, useImage: true }, { label: '捡垃圾', icon: scrapIcon, useImage: true },
]) ])
const formatNumber = (num: number) => {
return Math.floor(num).toLocaleString('zh-CN')
}
const handleLogout = () => { const handleLogout = () => {
authStore.logout() authStore.logout()
characterStore.clearCurrentCharacter() characterStore.clearCurrentCharacter()
@ -79,6 +83,14 @@ const handleBreakthrough = async () => {
<div class="game-page"> <div class="game-page">
<Particles :particle-count="100" :particle-colors="['#ffffff', '#cccccc']" class="particles-bg" /> <Particles :particle-count="100" :particle-colors="['#ffffff', '#cccccc']" class="particles-bg" />
<div class="game-container"> <div class="game-container">
<div style="text-align: center; margin-bottom: 20px;">
<StarBorder
as="div"
color="#22c55e"
speed="6s"
:thickness="2"
style="display: block; width: 100%; max-width: 480px;"
>
<div class="character-header" @click="handleSwitchCharacter"> <div class="character-header" @click="handleSwitchCharacter">
<div class="character-info"> <div class="character-info">
<span class="character-name">{{ characterStore.currentCharacter?.name || '未选择角色' }}</span> <span class="character-name">{{ characterStore.currentCharacter?.name || '未选择角色' }}</span>
@ -86,6 +98,8 @@ const handleBreakthrough = async () => {
</div> </div>
<span class="switch-btn">切换角色</span> <span class="switch-btn">切换角色</span>
</div> </div>
</StarBorder>
</div>
<div style="text-align: center;"> <div style="text-align: center;">
<ShinyText class="welcome-text" text="✨ 欢迎来到我的世界" :speed="2" :delay="0.5" :disabled="false" :color="'#b5b5b5'" <ShinyText class="welcome-text" text="✨ 欢迎来到我的世界" :speed="2" :delay="0.5" :disabled="false" :color="'#b5b5b5'"
:shine-color="'#34fef1'" :spread="120" :direction="'left'" :yoyo="false" :pause-on-hover="false" /> :shine-color="'#34fef1'" :spread="120" :direction="'left'" :yoyo="false" :pause-on-hover="false" />
@ -116,7 +130,7 @@ const handleBreakthrough = async () => {
<span class="next-level">{{ nextLevelName }}</span> <span class="next-level">{{ nextLevelName }}</span>
</div> </div>
<div class="exp-info"> <div class="exp-info">
<span class="exp-text">{{ currentExp }} / {{ nextLevelMinExp }} 经验</span> <span class="exp-text">{{ formatNumber(currentExp) }} / {{ formatNumber(nextLevelMinExp) }} 经验</span>
<el-progress :percentage="Math.floor(expProgress)" color="#ff8844" :show-text="false" :stroke-width="8" /> <el-progress :percentage="Math.floor(expProgress)" color="#ff8844" :show-text="false" :stroke-width="8" />
<span class="exp-percent">{{ Math.floor(expProgress) }}%</span> <span class="exp-percent">{{ Math.floor(expProgress) }}%</span>
</div> </div>
@ -185,9 +199,9 @@ const handleBreakthrough = async () => {
border: 1px solid rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px; border-radius: 12px;
padding: 12px 16px; padding: 12px 16px;
margin-bottom: 20px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
height: 100%;
} }
.character-header:hover { .character-header:hover {
@ -226,6 +240,15 @@ const handleBreakthrough = async () => {
font-weight: bold; font-weight: bold;
} }
.star-border{
background: transparent;
border: none;
padding: 12px 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
.menu-grid { .menu-grid {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);

Loading…
Cancel
Save