jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-02-24 23:20:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add menu ui

Browse Source
This commit is contained in:
tim
2025-07-02 22:34:13 +08:00
parent ce2ff8c94a
commit f607b54957
4 changed files with 89 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,14 @@
<template>
<header class="header">
<div class="logo">🌴</div>
<button class="menu-btn" @click="$emit('toggle-menu')">☰</button>
<div class="header-content">
<button class="menu-btn" @click="$emit('toggle-menu')">
<i class="fas fa-bars"></i>
</button>
<div class="logo-container">
<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>
</header>
</template>
@@ -19,12 +26,38 @@ export default {
height: var(--header-height);
background-color: var(--header-background-color);
color: var(--header-text-color);
border-bottom: 1px solid var(--header-border-color);
}
.logo-container {
display: flex;
align-items: center;
font-size: 20px;
font-weight: bold;
}
.header-content {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
height: 100%;
margin: 0 auto;
max-width: var(--page-max-width);
}
.menu-btn {
font-size: 24px;
background: none;
border: none;
color: inherit;
cursor: pointer;
opacity: 0.4;
margin-right: 10px;
}
.menu-btn:hover {
opacity: 0.8;
}
</style>