From 78526a4bab6d71127d9a50bc5c4bb0088d8aec06 Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: 星期日, 23 四月 2023 16:43:38 +0800
Subject: [PATCH] 恢复翻页/切换路由滚动功能
---
src/components/IconSelect/index.vue | 30 +++++---------
src/layout/components/TagsView/ScrollPane.vue | 2
src/layout/index.vue | 26 +++----------
src/layout/components/AppMain.vue | 24 ++++++++++++
4 files changed, 42 insertions(+), 40 deletions(-)
diff --git a/src/components/IconSelect/index.vue b/src/components/IconSelect/index.vue
index dbfd048..26172fc 100644
--- a/src/components/IconSelect/index.vue
+++ b/src/components/IconSelect/index.vue
@@ -11,16 +11,14 @@
<template #suffix><i class="el-icon-search el-input__icon" /></template>
</el-input>
<div class="icon-list">
- <el-scrollbar>
- <div class="list-container">
- <div v-for="(item, index) in iconList" class="icon-item-wrapper" :key="index" @click="selectedIcon(item)">
- <div :class="['icon-item', { active: activeIcon === item }]">
- <svg-icon :icon-class="item" class-name="icon" style="height: 30px;width: 16px;" />
- <span :title="item">{{ item }}</span>
- </div>
+ <div class="list-container">
+ <div v-for="(item, index) in iconList" class="icon-item-wrapper" :key="index" @click="selectedIcon(item)">
+ <div :class="['icon-item', { active: activeIcon === item }]">
+ <svg-icon :icon-class="item" class-name="icon" style="height: 25px;width: 16px;"/>
+ <span>{{ item }}</span>
</div>
</div>
- </el-scrollbar>
+ </div>
</div>
</div>
</template>
@@ -61,7 +59,7 @@
</script>
<style lang='scss' scoped>
- .icon-body {
+ .icon-body {
width: 100%;
padding: 10px;
.icon-search {
@@ -70,27 +68,21 @@
}
.icon-list {
height: 200px;
- :deep(.el-scrollbar) {
- height: 100%;
- .el-scrollbar__wrap {
- overflow-x: hidden;
- }
- }
+ overflow: auto;
.list-container {
display: flex;
flex-wrap: wrap;
.icon-item-wrapper {
width: calc(100% / 3);
- height: 30px;
- line-height: 30px;
- margin-bottom: -5px;
+ height: 25px;
+ line-height: 25px;
cursor: pointer;
display: flex;
.icon-item {
display: flex;
max-width: 100%;
height: 100%;
- padding: 0 2px;
+ padding: 0 5px;
&:hover {
background: #ececec;
border-radius: 5px;
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index c4199b0..8d3a136 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -42,3 +42,27 @@
}
}
</style>
+
+<style lang="scss">
+// fix css style bug in open el-dialog
+.el-popup-parent--hidden {
+ .fixed-header {
+ padding-right: 6px;
+ }
+}
+
+::-webkit-scrollbar {
+ width: 6px;
+ height: 6px;
+}
+
+::-webkit-scrollbar-track {
+ background-color: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+ background-color: #c0c0c0;
+ border-radius: 3px;
+}
+</style>
+
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
index ff058ba..8c8be44 100644
--- a/src/layout/components/TagsView/ScrollPane.vue
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -99,7 +99,7 @@
bottom: 0px;
}
:deep(.el-scrollbar__wrap) {
- height: 49px;
+ height: 39px;
}
}
</style>
\ No newline at end of file
diff --git a/src/layout/index.vue b/src/layout/index.vue
index b81b4b3..4d04ea0 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -3,14 +3,12 @@
<div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
<sidebar v-if="!sidebar.hide" class="sidebar-container" />
<div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
- <el-scrollbar>
- <div :class="{ 'fixed-header': fixedHeader }">
- <navbar @setLayout="setLayout" />
- <tags-view v-if="needTagsView" />
- </div>
- <app-main />
- <settings ref="settingRef" />
- </el-scrollbar>
+ <div :class="{ 'fixed-header': fixedHeader }">
+ <navbar @setLayout="setLayout" />
+ <tags-view v-if="needTagsView" />
+ </div>
+ <app-main />
+ <settings ref="settingRef" />
</div>
</div>
</template>
@@ -73,18 +71,6 @@
position: relative;
height: 100%;
width: 100%;
-
- .el-scrollbar {
- height: 100%;
- }
-
- :deep(.el-scrollbar__bar).is-vertical {
- z-index: 10;
- }
-
- :deep(.el-scrollbar__wrap) {
- overflow-x: hidden;
- }
&.mobile.openSidebar {
position: fixed;
--
Gitblit v1.9.3