若依
2 years ago
committed by
Gitee
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
4 changed files with
138 additions and
137 deletions
-
ruoyi-ui/src/components/IconSelect/index.vue
-
ruoyi-ui/src/layout/components/AppMain.vue
-
ruoyi-ui/src/layout/components/TagsView/ScrollPane.vue
-
ruoyi-ui/src/layout/index.vue
|
@ -5,16 +5,14 @@ |
|
|
<i slot="suffix" class="el-icon-search el-input__icon" /> |
|
|
<i slot="suffix" class="el-icon-search el-input__icon" /> |
|
|
</el-input> |
|
|
</el-input> |
|
|
<div class="icon-list"> |
|
|
<div class="icon-list"> |
|
|
<el-scrollbar> |
|
|
|
|
|
<div class="list-container"> |
|
|
<div class="list-container"> |
|
|
<div v-for="(item, index) in iconList" class="icon-item-wrapper" :key="index" @click="selectedIcon(item)"> |
|
|
<div v-for="(item, index) in iconList" class="icon-item-wrapper" :key="index" @click="selectedIcon(item)"> |
|
|
<div :class="['icon-item', { active: activeIcon === item }]"> |
|
|
<div :class="['icon-item', { active: activeIcon === item }]"> |
|
|
<svg-icon :icon-class="item" class-name="icon" style="height: 30px;width: 16px;" /> |
|
|
<svg-icon :icon-class="item" class-name="icon" style="height: 25px;width: 16px;"/> |
|
|
<span :title="item">{{ item }}</span> |
|
|
<span>{{ item }}</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</el-scrollbar> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
@ -63,27 +61,21 @@ export default { |
|
|
} |
|
|
} |
|
|
.icon-list { |
|
|
.icon-list { |
|
|
height: 200px; |
|
|
height: 200px; |
|
|
::v-deep .el-scrollbar { |
|
|
overflow: auto; |
|
|
height: 100%; |
|
|
|
|
|
.el-scrollbar__wrap { |
|
|
|
|
|
overflow-x: hidden; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.list-container { |
|
|
.list-container { |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
flex-wrap: wrap; |
|
|
.icon-item-wrapper { |
|
|
.icon-item-wrapper { |
|
|
width: calc(100% / 3); |
|
|
width: calc(100% / 3); |
|
|
height: 30px; |
|
|
height: 25px; |
|
|
line-height: 30px; |
|
|
line-height: 25px; |
|
|
margin-bottom: -5px; |
|
|
|
|
|
cursor: pointer; |
|
|
cursor: pointer; |
|
|
display: flex; |
|
|
display: flex; |
|
|
.icon-item { |
|
|
.icon-item { |
|
|
display: flex; |
|
|
display: flex; |
|
|
max-width: 100%; |
|
|
max-width: 100%; |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
padding: 0 2px; |
|
|
padding: 0 5px; |
|
|
&:hover { |
|
|
&:hover { |
|
|
background: #ececec; |
|
|
background: #ececec; |
|
|
border-radius: 5px; |
|
|
border-radius: 5px; |
|
|
|
@ -50,3 +50,26 @@ export default { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</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> |
|
|
|
@ -87,7 +87,7 @@ export default { |
|
|
bottom: 0px; |
|
|
bottom: 0px; |
|
|
} |
|
|
} |
|
|
.el-scrollbar__wrap { |
|
|
.el-scrollbar__wrap { |
|
|
height: 49px; |
|
|
height: 39px; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
@ -3,7 +3,6 @@ |
|
|
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/> |
|
|
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/> |
|
|
<sidebar v-if="!sidebar.hide" class="sidebar-container"/> |
|
|
<sidebar v-if="!sidebar.hide" class="sidebar-container"/> |
|
|
<div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container"> |
|
|
<div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container"> |
|
|
<el-scrollbar> |
|
|
|
|
|
<div :class="{'fixed-header':fixedHeader}"> |
|
|
<div :class="{'fixed-header':fixedHeader}"> |
|
|
<navbar/> |
|
|
<navbar/> |
|
|
<tags-view v-if="needTagsView"/> |
|
|
<tags-view v-if="needTagsView"/> |
|
@ -12,7 +11,6 @@ |
|
|
<right-panel> |
|
|
<right-panel> |
|
|
<settings/> |
|
|
<settings/> |
|
|
</right-panel> |
|
|
</right-panel> |
|
|
</el-scrollbar> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
@ -74,18 +72,6 @@ export default { |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
width: 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 { |
|
|
&.mobile.openSidebar { |
|
|
position: fixed; |
|
|
position: fixed; |
|
|
top: 0; |
|
|
top: 0; |
|
|