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

RuoYi

2023-04-23 a606973cbe850ae0c983094b37d8e0da34de4505

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

 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 @@
    }

    .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;


 ruoyi-ui/src/layout/components/AppMain.vue

@@ -50,3 +50,26 @@
  }

}

</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>


 ruoyi-ui/src/layout/components/TagsView/ScrollPane.vue

@@ -87,7 +87,7 @@
      bottom: 0px;

    }

    .el-scrollbar__wrap {

      height: 49px;

      height: 39px;

    }

  }

}


 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>



@@ -73,18 +71,6 @@
    position: relative;

    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;