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

This commit is contained in:
dmy
2026-01-19 17:05:04 +08:00
parent e3880408b7
commit bdc62a2975

View File

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