jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-02-22 22:21:09 +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>
<header class="header">
<div class="header-content">
<button v-if="showMenuBtn" class="menu-btn" @click="$emit('toggle-menu')">
<i class="fas fa-bars"></i>
</button>
<div class="logo-container" @click="goToHome">
<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 class="header-content-left">
<button v-if="showMenuBtn" class="menu-btn" @click="$emit('toggle-menu')">
<i class="fas fa-bars"></i>
</button>
<div class="logo-container" @click="goToHome">
<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>
</header>
@@ -24,6 +32,12 @@ export default {
methods: {
goToHome() {
this.$router.push('/')
},
goToLogin() {
this.$router.push('/login')
},
goToSignup() {
this.$router.push('/signup')
}
}
}
@@ -52,12 +66,26 @@ export default {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100%;
margin: 0 auto;
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 {
font-size: 24px;
background: none;
@@ -72,4 +100,22 @@ export default {
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>