jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-03-20 19:17:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: update code

Browse Source
This commit is contained in:
tim
2025-07-05 13:35:54 +08:00
parent 7e988dbd63
commit f58a22e068
1 changed files with 52 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
open-isle-cli/src/components/HeaderComponent.vue
View File

@@ -1,12 +1,20 @@
<template> <template>
<header class="header"> <header class="header">
<div class="header-content"> <div class="header-content">
<button v-if="showMenuBtn" class="menu-btn" @click="$emit('toggle-menu')"> <div class="header-content-left">
<i class="fas fa-bars"></i> <button v-if="showMenuBtn" class="menu-btn" @click="$emit('toggle-menu')">
</button> <i class="fas fa-bars"></i>
<div class="logo-container" @click="goToHome"> </button>
<img alt="OpenIsle" src="https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/image.png" width="60" height="60"> <div class="logo-container" @click="goToHome">
<div class="logo-text">OpenIsle</div> <img alt="OpenIsle" src="https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/image.png"
width="60" height="60">
<div class="logo-text">OpenIsle</div>
</div>
</div>
<div class="header-content-right">
<div class="header-content-item-main" @click="goToLogin">登录</div>
<div class="header-content-item-secondary" @click="goToSignup">注册</div>
</div> </div>
</div> </div>
</header> </header>
@@ -24,6 +32,12 @@ export default {
methods: { methods: {
goToHome() { goToHome() {
this.$router.push('/') this.$router.push('/')
},
goToLogin() {
this.$router.push('/login')
},
goToSignup() {
this.$router.push('/signup')
} }
} }
} }
@@ -52,12 +66,26 @@ export default {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between;
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0 auto; margin: 0 auto;
max-width: var(--page-max-width); max-width: var(--page-max-width);
} }
.header-content-left {
display: flex;
flex-direction: row;
align-items: center;
}
.header-content-right {
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
}
.menu-btn { .menu-btn {
font-size: 24px; font-size: 24px;
background: none; background: none;
@@ -72,4 +100,22 @@ export default {
opacity: 0.8; opacity: 0.8;
} }
.header-content-item-main {
background-color: var(--primary-color);
color: white;
padding: 8px 16px;
border-radius: 10px;
cursor: pointer;
}
.header-content-item-main:hover {
background-color: var(--primary-color-hover);
}
.header-content-item-secondary {
color: var(--primary-color);
text-decoration: underline;
cursor: pointer;
}
</style> </style>