han
/
Build_God
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

把游戏里面的elementplus切换成暗黑主题

master
hanqin 2 days ago
parent
0d7b65c486
commit
1ad18af0b4
3 changed files with 43 additions and 14 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      Build_God_Game/index.html
  2. 1
      Build_God_Game/src/main.ts
  3. 52
      Build_God_Game/src/views/CharacterView.vue

2
Build_God_Game/index.html
View File

@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en" class="dark">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />

1
Build_God_Game/src/main.ts
View File

@ -5,6 +5,7 @@ import App from './App.vue'
import router from './router' import router from './router'
import ElementPlus from 'element-plus' import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css'
const app = createApp(App) const app = createApp(App)
app.use(ElementPlus) app.use(ElementPlus)

52
Build_God_Game/src/views/CharacterView.vue
View File

@ -3,7 +3,7 @@ import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { useCharacterStore } from '@/stores/character' import { useCharacterStore } from '@/stores/character'
import { useAuthStore } from '@/stores/auth' import { useAuthStore } from '@/stores/auth'
import { ElProgress } from 'element-plus' import { ElMessage, ElProgress } from 'element-plus'
import Particles from '@/components/Particles/Particles.vue' import Particles from '@/components/Particles/Particles.vue'
import GlareHover from '@/components/GlareHover/GlareHover.vue' import GlareHover from '@/components/GlareHover/GlareHover.vue'
import ElectricBorder from '@/components/ElectricBorder/ElectricBorder.vue' import ElectricBorder from '@/components/ElectricBorder/ElectricBorder.vue'
@ -20,6 +20,8 @@ const newCharacterName = ref('')
const newCharacterProfessionId = ref<number | null>(null) const newCharacterProfessionId = ref<number | null>(null)
const showProfessionSelection = ref(false) const showProfessionSelection = ref(false)
const errorMsg = ref('') const errorMsg = ref('')
const deleteDialogVisible = ref(false)
const characterToDelete = ref<number | null>(null)
onMounted(async () => { onMounted(async () => {
await characterStore.fetchCharacters() await characterStore.fetchCharacters()
@ -84,11 +86,26 @@ const handleSelectCharacter = async (characterId: number) => {
} }
} }
const handleDeleteCharacter = async (characterId: number, event: Event) => { const handleDeleteCharacter = (characterId: number, event: Event) => {
event.stopPropagation() event.stopPropagation()
if (confirm('确定要删除这个角色吗？此操作不可恢复！')) { characterToDelete.value = characterId
await characterStore.deleteCharacter(characterId) deleteDialogVisible.value = true
} }
const confirmDelete = async () => {
if (characterToDelete.value) {
var bo = await characterStore.deleteCharacter(characterToDelete.value)
if (bo == true) {
deleteDialogVisible.value = false
characterToDelete.value = null
ElMessage.success('删除成功了，如果有一天你后悔了，记得找我')
}
}
}
const deleteCharacter = async (characterId: number) => {
await characterStore.deleteCharacter(characterId)
} }
const handleLogout = () => { const handleLogout = () => {
@ -119,7 +136,7 @@ const formatNumber = (num: number) => {
<div class="character-container"> <div class="character-container">
<div class="page-header"> <div class="page-header">
<TextType :text="['选 择 角 色']" :typingSpeed="75" :pauseDuration="1500" :showCursor="true" cursorCharacter="|" <TextType :text="['选 择 角 色']" :typingSpeed="75" :pauseDuration="1500" :showCursor="false" cursorCharacter="|"
style="font-size: 1.5rem; font-weight: bold;" /> style="font-size: 1.5rem; font-weight: bold;" />
</div> </div>
@ -188,16 +205,27 @@ const formatNumber = (num: number) => {
</div> </div>
<div class="page-footer"> <div class="page-footer">
<StarBorder <StarBorder as="div" color="#e63d3d" speed="3s" :thickness="3">
as="div" <div class="btn-out">
color="#e63d3d"
speed="3s"
:thickness="3"
><div class="btn-out">
退出登录 退出登录
</div></StarBorder>
</div> </div>
</StarBorder>
</div>
</div>
<el-dialog v-model="deleteDialogVisible" title="确认删除" width="500" center>
<span style="color: #fff; text-align: center; display: block;">
你真的想删除这个角色吗？
</span>
<template #footer>
<div class="dialog-footer">
<el-button @click="deleteDialogVisible = false">取消</el-button>
<el-button type="danger" @click="confirmDelete">
确定删除
</el-button>
</div> </div>
</template>
</el-dialog>
<!-- 创建角色对话框 --> <!-- 创建角色对话框 -->
<div v-if="showCreateDialog" class="dialog-overlay" @click="showCreateDialog = false"> <div v-if="showCreateDialog" class="dialog-overlay" @click="showCreateDialog = false">

Write Preview
Loading…
Cancel
Save