作者 若依
提交者 Gitee

!707 恢复翻页/切换路由滚动功能

Merge pull request !707 from 也曾为你像超人/master
@@ -5,16 +5,14 @@ @@ -5,16 +5,14 @@
5 <i slot="suffix" class="el-icon-search el-input__icon" /> 5 <i slot="suffix" class="el-icon-search el-input__icon" />
6 </el-input> 6 </el-input>
7 <div class="icon-list"> 7 <div class="icon-list">
8 - <el-scrollbar>  
9 <div class="list-container"> 8 <div class="list-container">
10 <div v-for="(item, index) in iconList" class="icon-item-wrapper" :key="index" @click="selectedIcon(item)"> 9 <div v-for="(item, index) in iconList" class="icon-item-wrapper" :key="index" @click="selectedIcon(item)">
11 <div :class="['icon-item', { active: activeIcon === item }]"> 10 <div :class="['icon-item', { active: activeIcon === item }]">
12 - <svg-icon :icon-class="item" class-name="icon" style="height: 30px;width: 16px;" />  
13 - <span :title="item">{{ item }}</span> 11 + <svg-icon :icon-class="item" class-name="icon" style="height: 25px;width: 16px;"/>
  12 + <span>{{ item }}</span>
14 </div> 13 </div>
15 </div> 14 </div>
16 </div> 15 </div>
17 - </el-scrollbar>  
18 </div> 16 </div>
19 </div> 17 </div>
20 </template> 18 </template>
@@ -63,27 +61,21 @@ export default { @@ -63,27 +61,21 @@ export default {
63 } 61 }
64 .icon-list { 62 .icon-list {
65 height: 200px; 63 height: 200px;
66 - ::v-deep .el-scrollbar {  
67 - height: 100%;  
68 - .el-scrollbar__wrap {  
69 - overflow-x: hidden;  
70 - }  
71 - } 64 + overflow: auto;
72 .list-container { 65 .list-container {
73 display: flex; 66 display: flex;
74 flex-wrap: wrap; 67 flex-wrap: wrap;
75 .icon-item-wrapper { 68 .icon-item-wrapper {
76 width: calc(100% / 3); 69 width: calc(100% / 3);
77 - height: 30px;  
78 - line-height: 30px;  
79 - margin-bottom: -5px; 70 + height: 25px;
  71 + line-height: 25px;
80 cursor: pointer; 72 cursor: pointer;
81 display: flex; 73 display: flex;
82 .icon-item { 74 .icon-item {
83 display: flex; 75 display: flex;
84 max-width: 100%; 76 max-width: 100%;
85 height: 100%; 77 height: 100%;
86 - padding: 0 2px; 78 + padding: 0 5px;
87 &:hover { 79 &:hover {
88 background: #ececec; 80 background: #ececec;
89 border-radius: 5px; 81 border-radius: 5px;
@@ -50,3 +50,26 @@ export default { @@ -50,3 +50,26 @@ export default {
50 } 50 }
51 } 51 }
52 </style> 52 </style>
  53 +
  54 +<style lang="scss">
  55 +// fix css style bug in open el-dialog
  56 +.el-popup-parent--hidden {
  57 + .fixed-header {
  58 + padding-right: 6px;
  59 + }
  60 +}
  61 +
  62 +::-webkit-scrollbar {
  63 + width: 6px;
  64 + height: 6px;
  65 +}
  66 +
  67 +::-webkit-scrollbar-track {
  68 + background-color: #f1f1f1;
  69 +}
  70 +
  71 +::-webkit-scrollbar-thumb {
  72 + background-color: #c0c0c0;
  73 + border-radius: 3px;
  74 +}
  75 +</style>
@@ -87,7 +87,7 @@ export default { @@ -87,7 +87,7 @@ export default {
87 bottom: 0px; 87 bottom: 0px;
88 } 88 }
89 .el-scrollbar__wrap { 89 .el-scrollbar__wrap {
90 - height: 49px; 90 + height: 39px;
91 } 91 }
92 } 92 }
93 } 93 }
@@ -3,7 +3,6 @@ @@ -3,7 +3,6 @@
3 <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/> 3 <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
4 <sidebar v-if="!sidebar.hide" class="sidebar-container"/> 4 <sidebar v-if="!sidebar.hide" class="sidebar-container"/>
5 <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container"> 5 <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
6 - <el-scrollbar>  
7 <div :class="{'fixed-header':fixedHeader}"> 6 <div :class="{'fixed-header':fixedHeader}">
8 <navbar/> 7 <navbar/>
9 <tags-view v-if="needTagsView"/> 8 <tags-view v-if="needTagsView"/>
@@ -12,7 +11,6 @@ @@ -12,7 +11,6 @@
12 <right-panel> 11 <right-panel>
13 <settings/> 12 <settings/>
14 </right-panel> 13 </right-panel>
15 - </el-scrollbar>  
16 </div> 14 </div>
17 </div> 15 </div>
18 </template> 16 </template>
@@ -74,18 +72,6 @@ export default { @@ -74,18 +72,6 @@ export default {
74 height: 100%; 72 height: 100%;
75 width: 100%; 73 width: 100%;
76 74
77 - .el-scrollbar{  
78 - height: 100%;  
79 - }  
80 -  
81 - ::v-deep .el-scrollbar__bar.is-vertical {  
82 - z-index: 10;  
83 - }  
84 -  
85 - ::v-deep .el-scrollbar__wrap {  
86 - overflow-x: hidden;  
87 - }  
88 -  
89 &.mobile.openSidebar { 75 &.mobile.openSidebar {
90 position: fixed; 76 position: fixed;
91 top: 0; 77 top: 0;