diff --git a/ruoyi-ui/src/components/IconSelect/index.vue b/ruoyi-ui/src/components/IconSelect/index.vue
index 2404321..8dadc02 100644
--- a/ruoyi-ui/src/components/IconSelect/index.vue
+++ b/ruoyi-ui/src/components/IconSelect/index.vue
@@ -5,16 +5,14 @@
<i slot="suffix" class="el-icon-search el-input__icon" />
</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>
@@ -63,27 +61,21 @@ export default {
}
.icon-list {
height: 200px;
- ::v-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/ruoyi-ui/src/layout/components/AppMain.vue b/ruoyi-ui/src/layout/components/AppMain.vue
index b7a87ae..a25c562 100644
--- a/ruoyi-ui/src/layout/components/AppMain.vue
+++ b/ruoyi-ui/src/layout/components/AppMain.vue
@@ -50,3 +50,26 @@ export default {
}
}
</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/ruoyi-ui/src/layout/components/TagsView/ScrollPane.vue b/ruoyi-ui/src/layout/components/TagsView/ScrollPane.vue
index c110bf1..f92d99b 100644
--- a/ruoyi-ui/src/layout/components/TagsView/ScrollPane.vue
+++ b/ruoyi-ui/src/layout/components/TagsView/ScrollPane.vue
@@ -1,94 +1,94 @@
-<template>
- <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
- <slot />
- </el-scrollbar>
-</template>
-
-<script>
-const tagAndTagSpacing = 4 // tagAndTagSpacing
-
-export default {
- name: 'ScrollPane',
- data() {
- return {
- left: 0
- }
- },
- computed: {
- scrollWrapper() {
- return this.$refs.scrollContainer.$refs.wrap
- }
- },
- mounted() {
- this.scrollWrapper.addEventListener('scroll', this.emitScroll, true)
- },
- beforeDestroy() {
- this.scrollWrapper.removeEventListener('scroll', this.emitScroll)
- },
- methods: {
- handleScroll(e) {
- const eventDelta = e.wheelDelta || -e.deltaY * 40
- const $scrollWrapper = this.scrollWrapper
- $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
- },
- emitScroll() {
- this.$emit('scroll')
- },
- moveToTarget(currentTag) {
- const $container = this.$refs.scrollContainer.$el
- const $containerWidth = $container.offsetWidth
- const $scrollWrapper = this.scrollWrapper
- const tagList = this.$parent.$refs.tag
-
- let firstTag = null
- let lastTag = null
-
- // find first tag and last tag
- if (tagList.length > 0) {
- firstTag = tagList[0]
- lastTag = tagList[tagList.length - 1]
- }
-
- if (firstTag === currentTag) {
- $scrollWrapper.scrollLeft = 0
- } else if (lastTag === currentTag) {
- $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
- } else {
- // find preTag and nextTag
- const currentIndex = tagList.findIndex(item => item === currentTag)
- const prevTag = tagList[currentIndex - 1]
- const nextTag = tagList[currentIndex + 1]
-
- // the tag's offsetLeft after of nextTag
- const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
-
- // the tag's offsetLeft before of prevTag
- const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
-
- if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
- $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
- } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
- $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
- }
- }
- }
- }
-}
-</script>
-
-<style lang="scss" scoped>
-.scroll-container {
- white-space: nowrap;
- position: relative;
- overflow: hidden;
- width: 100%;
- ::v-deep {
- .el-scrollbar__bar {
- bottom: 0px;
- }
- .el-scrollbar__wrap {
- height: 49px;
- }
- }
-}
-</style>
+<template>
+ <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+ <slot />
+ </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+ name: 'ScrollPane',
+ data() {
+ return {
+ left: 0
+ }
+ },
+ computed: {
+ scrollWrapper() {
+ return this.$refs.scrollContainer.$refs.wrap
+ }
+ },
+ mounted() {
+ this.scrollWrapper.addEventListener('scroll', this.emitScroll, true)
+ },
+ beforeDestroy() {
+ this.scrollWrapper.removeEventListener('scroll', this.emitScroll)
+ },
+ methods: {
+ handleScroll(e) {
+ const eventDelta = e.wheelDelta || -e.deltaY * 40
+ const $scrollWrapper = this.scrollWrapper
+ $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+ },
+ emitScroll() {
+ this.$emit('scroll')
+ },
+ moveToTarget(currentTag) {
+ const $container = this.$refs.scrollContainer.$el
+ const $containerWidth = $container.offsetWidth
+ const $scrollWrapper = this.scrollWrapper
+ const tagList = this.$parent.$refs.tag
+
+ let firstTag = null
+ let lastTag = null
+
+ // find first tag and last tag
+ if (tagList.length > 0) {
+ firstTag = tagList[0]
+ lastTag = tagList[tagList.length - 1]
+ }
+
+ if (firstTag === currentTag) {
+ $scrollWrapper.scrollLeft = 0
+ } else if (lastTag === currentTag) {
+ $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+ } else {
+ // find preTag and nextTag
+ const currentIndex = tagList.findIndex(item => item === currentTag)
+ const prevTag = tagList[currentIndex - 1]
+ const nextTag = tagList[currentIndex + 1]
+
+ // the tag's offsetLeft after of nextTag
+ const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+ // the tag's offsetLeft before of prevTag
+ const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+ if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+ $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+ } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+ $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+ }
+ }
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+ white-space: nowrap;
+ position: relative;
+ overflow: hidden;
+ width: 100%;
+ ::v-deep {
+ .el-scrollbar__bar {
+ bottom: 0px;
+ }
+ .el-scrollbar__wrap {
+ height: 39px;
+ }
+ }
+}
+</style>
diff --git a/ruoyi-ui/src/layout/index.vue b/ruoyi-ui/src/layout/index.vue
index b7c9ab0..dba4393 100644
--- a/ruoyi-ui/src/layout/index.vue
+++ b/ruoyi-ui/src/layout/index.vue
@@ -1,19 +1,17 @@
<template>
<div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
- <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/>
- <tags-view v-if="needTagsView"/>
- </div>
- <app-main/>
- <right-panel>
- <settings/>
- </right-panel>
- </el-scrollbar>
+ <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">
+ <div :class="{'fixed-header':fixedHeader}">
+ <navbar/>
+ <tags-view v-if="needTagsView"/>
</div>
+ <app-main/>
+ <right-panel>
+ <settings/>
+ </right-panel>
+ </div>
</div>
</template>
@@ -74,18 +72,6 @@ export default {
height: 100%;
width: 100%;
- .el-scrollbar{
- height: 100%;
- }
-
- ::v-deep .el-scrollbar__bar.is-vertical {
- z-index: 10;
- }
-
- ::v-deep .el-scrollbar__wrap {
- overflow-x: hidden;
- }
-
&.mobile.openSidebar {
position: fixed;
top: 0;