feat(mobile): 优化移动端头部功能
- 在移动端标题栏添加登录按钮,未登录时显示- 实现移动端标题栏点击返回主页功能 - 调整移动端搜索栏样式
This commit is contained in:
@@ -120,10 +120,13 @@
|
||||
<el-button @click="isCollapsed = !isCollapsed" text circle class="mobile-menu-toggle">
|
||||
<el-icon size="24"><Menu /></el-icon>
|
||||
</el-button>
|
||||
<h1 class="mobile-title">我的笔记</h1>
|
||||
<h1 class="mobile-title" @click="resetToHomeView">我的笔记</h1>
|
||||
<el-button text circle class="mobile-search-toggle" @click="handleSearch">
|
||||
<el-icon size="22"><Search /></el-icon>
|
||||
</el-button>
|
||||
<el-button v-if="!userStore.isLoggedIn" text circle class="mobile-login-toggle" @click="goToLogin">
|
||||
<el-icon size="24"><User /></el-icon>
|
||||
</el-button>
|
||||
</el-header>
|
||||
|
||||
<!-- Mobile Search Bar -->
|
||||
@@ -335,7 +338,7 @@ import {
|
||||
generateRegistrationCode,
|
||||
updatePassword
|
||||
} from '@/api/CommonApi.js'
|
||||
import { Plus, Fold, Expand, Folder, Document, Search, Edit, Delete, ArrowDown, Clock, Lock, InfoFilled, Menu } from "@element-plus/icons-vue";
|
||||
import { Plus, Fold, Expand, Folder, Document, Search, Edit, Delete, ArrowDown, Clock, Lock, InfoFilled, Menu, User } from "@element-plus/icons-vue";
|
||||
import { useUserStore } from '../stores/user';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { privateNoteContent } from '../utils/privateNoteContent.js';
|
||||
@@ -1268,6 +1271,16 @@ const resetUpdatePasswordForm = () => {
|
||||
}
|
||||
</style>
|
||||
|
||||
.mobile-title {
|
||||
cursor: pointer;
|
||||
}
|
||||
.mobile-search-container {
|
||||
.mobile-search-container {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
padding: 0 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
<style scoped>
|
||||
/* 整体布局 */
|
||||
.home-page {
|
||||
|
||||
Reference in New Issue
Block a user