jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-05-27 21:17:39 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: ui fix

Browse Source
This commit is contained in:
Tim
2025-08-15 11:24:01 +08:00
parent b385945c2d
commit e9c9fbd742
3 changed files with 16 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend_nuxt/app.vue
View File

@@ -1,6 +1,5 @@
<template> <template>
<div id="app"> <div id="app">
<div class="header-container"> <div class="header-container">
<HeaderComponent <HeaderComponent
ref="header" ref="header"
@@ -10,7 +9,6 @@
</div> </div>
<div class="main-container"> <div class="main-container">
<div class="menu-container" v-click-outside="handleMenuOutside"> <div class="menu-container" v-click-outside="handleMenuOutside">
<MenuComponent :visible="!hideMenu && menuVisible" @item-click="menuVisible = false" /> <MenuComponent :visible="!hideMenu && menuVisible" @item-click="menuVisible = false" />
</div> </div>
@@ -18,7 +16,11 @@
<NuxtPage keepalive /> <NuxtPage keepalive />
</div> </div>
<div v-if='!menuVisible && route.path !== "/new-post"' class="new-post-icon" @click="goToNewPost"> <div
v-if="!menuVisible && route.path !== '/new-post'"
class="new-post-icon"
@click="goToNewPost"
>
<i class="fas fa-edit"></i> <i class="fas fa-edit"></i>
</div> </div>
</div> </div>
@@ -116,9 +118,10 @@ export default {
} }
.new-post-icon { .new-post-icon {
background-color: var(--primary-color); background-color: var(--new-post-icon-color);
width: 40px; color: white;
height: 40px; width: 60px;
height: 60px;
border-radius: 50%; border-radius: 50%;
position: fixed; position: fixed;
bottom: 40px; bottom: 40px;
@@ -127,6 +130,7 @@ export default {
cursor: pointer; cursor: pointer;
z-index: 1000; z-index: 1000;
display: flex; display: flex;
backdrop-filter: blur(5px);
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }

2
frontend_nuxt/assets/global.css
View File

@@ -2,6 +2,7 @@
--primary-color-hover: rgb(9, 95, 105); --primary-color-hover: rgb(9, 95, 105);
--primary-color: rgb(10, 110, 120); --primary-color: rgb(10, 110, 120);
--primary-color-disabled: rgba(93, 152, 156, 0.5); --primary-color-disabled: rgba(93, 152, 156, 0.5);
--new-post-icon-color: rgba(10, 111, 120, 0.598);
--header-height: 60px; --header-height: 60px;
--header-background-color: white; --header-background-color: white;
--header-border-color: lightgray; --header-border-color: lightgray;
@@ -42,6 +43,7 @@
--background-color-blur: var(--background-color); --background-color-blur: var(--background-color);
--menu-border-color: #555; --menu-border-color: #555;
--normal-border-color: #555; --normal-border-color: #555;
--new-post-icon-color: rgba(10, 111, 120, 0.598);
--menu-selected-background-color: rgba(255, 255, 255, 0.1); --menu-selected-background-color: rgba(255, 255, 255, 0.1);
--menu-text-color: white; --menu-text-color: white;
/* --normal-background-color: #000000; */ /* --normal-background-color: #000000; */

7
frontend_nuxt/components/HeaderComponent.vue
View File

@@ -25,11 +25,7 @@
<i class="fas fa-search"></i> <i class="fas fa-search"></i>
</div> </div>
<ToolTip <ToolTip v-if="!isMobile" content="发帖" placement="bottom">
v-if="!isMobile"
content="发帖"
placement="bottom"
>
<div class="new-post-icon" @click="goToNewPost"> <div class="new-post-icon" @click="goToNewPost">
<i class="fas fa-edit"></i> <i class="fas fa-edit"></i>
</div> </div>
@@ -294,6 +290,7 @@ onMounted(async () => {
.new-post-icon { .new-post-icon {
font-size: 18px; font-size: 18px;
cursor: pointer; cursor: pointer;
margin-right: 10px;
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {