feat(mobile): 优化移动端头部功能
- 在移动端标题栏添加登录按钮,未登录时显示- 实现移动端标题栏点击返回主页功能 - 调整移动端搜索栏样式
This commit is contained in:
@@ -120,10 +120,13 @@
|
|||||||
<el-button @click="isCollapsed = !isCollapsed" text circle class="mobile-menu-toggle">
|
<el-button @click="isCollapsed = !isCollapsed" text circle class="mobile-menu-toggle">
|
||||||
<el-icon size="24"><Menu /></el-icon>
|
<el-icon size="24"><Menu /></el-icon>
|
||||||
</el-button>
|
</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-button text circle class="mobile-search-toggle" @click="handleSearch">
|
||||||
<el-icon size="22"><Search /></el-icon>
|
<el-icon size="22"><Search /></el-icon>
|
||||||
</el-button>
|
</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>
|
</el-header>
|
||||||
|
|
||||||
<!-- Mobile Search Bar -->
|
<!-- Mobile Search Bar -->
|
||||||
@@ -335,7 +338,7 @@ import {
|
|||||||
generateRegistrationCode,
|
generateRegistrationCode,
|
||||||
updatePassword
|
updatePassword
|
||||||
} from '@/api/CommonApi.js'
|
} 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 { useUserStore } from '../stores/user';
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
import { privateNoteContent } from '../utils/privateNoteContent.js';
|
import { privateNoteContent } from '../utils/privateNoteContent.js';
|
||||||
@@ -1268,6 +1271,16 @@ const resetUpdatePasswordForm = () => {
|
|||||||
}
|
}
|
||||||
</style>
|
</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>
|
<style scoped>
|
||||||
/* 整体布局 */
|
/* 整体布局 */
|
||||||
.home-page {
|
.home-page {
|
||||||
|
|||||||
Reference in New Issue
Block a user