facat/bidding_watcher
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化移动端顶部导航栏样式和布局

Browse Source
This commit is contained in:
dmy
2026-01-19 17:05:04 +08:00
parent e3880408b7
commit bdc62a2975
1 changed files with 17 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/App.vue
View File

@@ -3,11 +3,11 @@
<!-- 移动端顶部导航栏 --> <!-- 移动端顶部导航栏 -->
<el-header v-if="isMobile" class="mobile-header"> <el-header v-if="isMobile" class="mobile-header">
<div class="mobile-header-content"> <div class="mobile-header-content">
<el-button type="primary" link @click="toggleSidebar"> <el-button type="primary" link @click="toggleSidebar" class="header-btn">
<el-icon :size="24"><Fold /></el-icon> <el-icon :size="24"><Fold /></el-icon>
</el-button> </el-button>
<span v-if="!isMobile" class="mobile-title">投标信息一览</span> <span v-if="isMobile" class="mobile-title">投标信息一览</span>
<el-button type="primary" link @click="handleLogout" v-if="currentUser"> <el-button type="primary" link @click="handleLogout" v-if="currentUser" class="header-btn">
<el-icon :size="24"><SwitchButton /></el-icon> <el-icon :size="24"><SwitchButton /></el-icon>
</el-button> </el-button>
</div> </div>
@@ -385,12 +385,21 @@ onUnmounted(() => {
flex-direction: column; flex-direction: column;
} }
.is-mobile .el-main {
padding-top: 60px;
}
.mobile-header { .mobile-header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #434a50; background-color: #434a50;
color: white; color: white;
padding: 0; padding: 0;
height: 50px !important; height: 50px !important;
line-height: 50px; line-height: 50px;
z-index: 1001;
} }
.mobile-header-content { .mobile-header-content {
@@ -401,6 +410,11 @@ onUnmounted(() => {
padding: 0 10px; padding: 0 10px;
} }
.header-btn {
min-width: 44px;
min-height: 44px;
}
.mobile-title { .mobile-title {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;