refactor(layout): 优化首页布局以解决移动端白屏问题
- 添加 list-view-container 和 note-list-wrapper 类以优化列表视图布局- 在移动端样式中添加相应的布局调整,确保内容区域高度适配屏幕 - 通过 flex布局改善滚动体验,避免白屏现象
This commit is contained in:
@@ -17,6 +17,21 @@
|
|||||||
|
|
||||||
.home-page.is-mobile .content {
|
.home-page.is-mobile .content {
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-page.is-mobile .list-view-container {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-page.is-mobile .note-list-wrapper {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-overlay {
|
.sidebar-overlay {
|
||||||
|
|||||||
@@ -43,7 +43,7 @@
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- Home/List View -->
|
<!-- Home/List View -->
|
||||||
<div v-else>
|
<div v-else class="list-view-container">
|
||||||
<HomeHeader
|
<HomeHeader
|
||||||
:is-mobile="isMobile"
|
:is-mobile="isMobile"
|
||||||
v-model:search-keyword="searchKeyword"
|
v-model:search-keyword="searchKeyword"
|
||||||
@@ -56,11 +56,13 @@
|
|||||||
@upload-markdown="handleMarkdownUpload"
|
@upload-markdown="handleMarkdownUpload"
|
||||||
@toggle-collapse="isCollapsed = !isCollapsed"
|
@toggle-collapse="isCollapsed = !isCollapsed"
|
||||||
/>
|
/>
|
||||||
<NoteList
|
<div class="note-list-wrapper">
|
||||||
:files="groupMarkdownFiles"
|
<NoteList
|
||||||
:is-user-logged-in="userStore.isLoggedIn"
|
:files="groupMarkdownFiles"
|
||||||
@preview="previewFile"
|
:is-user-logged-in="userStore.isLoggedIn"
|
||||||
/>
|
@preview="previewFile"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-main>
|
</el-main>
|
||||||
</el-container>
|
</el-container>
|
||||||
@@ -497,6 +499,17 @@ watch([selectedFile, showEditor], ([newFile, newShowEditor]) => {
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.list-view-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-list-wrapper {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.home-page {
|
.home-page {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|||||||
Reference in New Issue
Block a user