BackToTop/index.vue

@@ -0,0 +1,155 @@
+<template>
+  <!-- 使用 Vue 的过渡组件，根据传入的 transitionName 决定过渡效果 -->
+  <transition :name="transitionName">
+    <!-- 当 visible 为 true 时显示返回顶部按钮，应用自定义样式 -->
+    <div v-show="visible" :style="customStyle" class="back-to-ceiling" @click="backToTop">
+      <!-- 返回顶部按钮的图标 -->
+      <svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class="Icon Icon--backToTopArrow" aria-hidden="true" style="height:16px;width:16px"><path d="M12.036 15.59a1 1 0 0 1-.997.995H5.032a.996.996 0 0 1-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29a1.003 1.003 0 0 1 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" /></svg>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  // 组件名称
+  name: 'BackToTop',
+  // 组件接收的属性
+  props: {
+    // 滚动高度达到该值时显示返回顶部按钮，默认 400
+    visibilityHeight: {
+      type: Number,
+      default: 400
+    },
+    // 返回的滚动位置，默认 0
+    backPosition: {
+      type: Number,
+      default: 0
+    },
+    // 自定义按钮样式
+    customStyle: {
+      type: Object,
+      default: function() {
+        return {
+          right: '50px',
+          bottom: '50px',
+          width: '40px',
+          height: '40px',
+          'border-radius': '4px',
+          'line-height': '45px',
+          background: '#e7eaf1'
+        }
+      }
+    },
+    // 过渡效果名称，默认 'fade'
+    transitionName: {
+      type: String,
+      default: 'fade'
+    }
+  },
+  // 组件的数据
+  data() {
+    return {
+      // 控制返回顶部按钮的显示与隐藏
+      visible: false,
+      // 定时器，用于滚动动画
+      interval: null,
+      // 标记是否正在滚动
+      isMoving: false
+    }
+  },
+  // 组件挂载后执行的钩子函数
+  mounted() {
+    // 监听窗口滚动事件
+    window.addEventListener('scroll', this.handleScroll)
+  },
+  // 组件销毁前执行的钩子函数
+  beforeDestroy() {
+    // 移除窗口滚动事件监听
+    window.removeEventListener('scroll', this.handleScroll)
+    // 清除定时器
+    if (this.interval) {
+      clearInterval(this.interval)
+    }
+  },
+  // 组件的方法
+  methods: {
+    // 处理滚动事件
+    handleScroll() {
+      // 当滚动高度超过 visibilityHeight 时显示按钮
+      this.visible = window.pageYOffset > this.visibilityHeight
+    },
+    // 返回顶部的方法
+    backToTop() {
+      // 如果正在滚动则不执行
+      if (this.isMoving) return
+      // 获取当前滚动位置
+      const start = window.pageYOffset
+      let i = 0
+      // 标记为正在滚动
+      this.isMoving = true
+      // 设置定时器，实现滚动动画
+      this.interval = setInterval(() => {
+        // 使用缓动函数计算下一个滚动位置
+        const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500))
+        if (next <= this.backPosition) {
+          // 滚动到指定位置
+          window.scrollTo(0, this.backPosition)
+          // 清除定时器
+          clearInterval(this.interval)
+          // 标记为滚动结束
+          this.isMoving = false
+        } else {
+          // 滚动到计算出的位置
+          window.scrollTo(0, next)
+        }
+        i++
+      }, 16.7)
+    },
+    /**
+     * 缓动函数，实现二次方的缓入缓出效果
+     * @param {number} t - 当前时间（从动画开始到现在的时间）
+     * @param {number} b - 起始值
+     * @param {number} c - 变化量（最终值 - 起始值）
+     * @param {number} d - 持续时间
+     * @returns {number} - 当前时间对应的数值
+     */
+    easeInOutQuad(t, b, c, d) {
+      if ((t /= d / 2) < 1) return c / 2 * t * t + b
+      return -c / 2 * (--t * (t - 2) - 1) + b
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 返回顶部按钮的基础样式 */
+.back-to-ceiling {
+  position: fixed;
+  display: inline-block;
+  text-align: center;
+  cursor: pointer;
+}
+
+/* 返回顶部按钮的悬停样式 */
+.back-to-ceiling:hover {
+  background: #d5dbe7;
+}
+
+/* 淡入动画的激活状态样式，过渡时间为 0.5 秒 */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity .5s;
+}
+
+/* 淡入动画的起始状态和淡出动画的结束状态样式，透明度为 0 */
+.fade-enter,
+.fade-leave-to {
+  opacity: 0
+}
+
+/* 返回顶部按钮图标的样式 */
+.back-to-ceiling .Icon {
+  fill: #9aaabf;
+  background: none;
+}
+</style>

Breadcrumb/index.vue

@@ -0,0 +1,138 @@
+<template>
+  <!-- 定义面包屑导航组件，使用 Element UI 的 el-breadcrumb 组件，设置分隔符为 / -->
+  <el-breadcrumb class="app-breadcrumb" separator="/">
+    <!-- 使用过渡组件，实现面包屑项切换时的动画效果，动画名称为 breadcrumb -->
+    <transition-group name="breadcrumb">
+      <!-- 遍历 levelList 数组，为每个元素生成一个面包屑项 -->
+      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
+        <!-- 如果当前项不需要重定向或者是最后一项，则显示为普通文本 -->
+        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
+        <!-- 否则显示为可点击的链接，点击时调用 handleLink 方法 -->
+        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
+      </el-breadcrumb-item>
+    </transition-group>
+  </el-breadcrumb>
+</template>
+
+<script>
+// 导入 pathToRegexp 库，用于路径编译
+import pathToRegexp from 'path-to-regexp'
+
+export default {
+  /**
+   * 组件的数据函数，返回组件的初始数据
+   * @returns {Object} 包含 levelList 的数据对象
+   */
+  data() {
+    return {
+      // 存储面包屑导航的层级列表
+      levelList: null
+    }
+  },
+  /**
+   * 组件的监听器，监听路由变化
+   */
+  watch: {
+    /**
+     * 监听 $route 对象的变化
+     * @param {Object} route - 新的路由对象
+     */
+    $route(route) {
+      // 如果当前路由是重定向页面，则不更新面包屑导航
+      if (route.path.startsWith('/redirect/')) {
+        return
+      }
+      // 调用 getBreadcrumb 方法更新面包屑导航
+      this.getBreadcrumb()
+    }
+  },
+  /**
+   * 组件创建完成后的钩子函数
+   */
+  created() {
+    // 调用 getBreadcrumb 方法初始化面包屑导航
+    this.getBreadcrumb()
+  },
+  /**
+   * 组件的方法
+   */
+  methods: {
+    /**
+     * 获取面包屑导航数据
+     */
+    getBreadcrumb() {
+      // 过滤出包含 meta.title 的路由记录
+      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
+      // 获取匹配的第一个路由记录
+      const first = matched[0]
+
+      // 如果第一个路由不是控制台页面，则在面包屑导航中添加控制台页面
+      if (!this.isDashboard(first)) {
+        matched = [{ path: '/dashboard', meta: { title: '控制台' }}].concat(matched)
+      }
+
+      // 过滤出包含 meta.title 且 meta.breadcrumb 不为 false 的路由记录
+      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
+    },
+    /**
+     * 判断路由是否为控制台页面
+     * @param {Object} route - 路由对象
+     * @returns {boolean} 是否为控制台页面
+     */
+    isDashboard(route) {
+      // 获取路由的名称
+      const name = route && route.name
+      // 如果路由没有名称，则返回 false
+      if (!name) {
+        return false
+      }
+      // 比较路由名称是否为控制台（忽略大小写）
+      return name.trim().toLocaleLowerCase() === '控制台'.toLocaleLowerCase()
+    },
+    /**
+     * 编译路径，解决路径参数问题
+     * @param {string} path - 原始路径
+     * @returns {string} 编译后的路径
+     */
+    pathCompile(path) {
+      // 获取当前路由的参数
+      const { params } = this.$route
+      // 使用 pathToRegexp 编译路径
+      var toPath = pathToRegexp.compile(path)
+      // 返回编译后的路径
+      return toPath(params)
+    },
+    /**
+     * 处理面包屑项的点击事件
+     * @param {Object} item - 点击的面包屑项
+     */
+    handleLink(item) {
+      // 解构出重定向路径和原始路径
+      const { redirect, path } = item
+      // 如果存在重定向路径，则跳转到重定向路径
+      if (redirect) {
+        this.$router.push(redirect)
+        return
+      }
+      // 否则跳转到编译后的原始路径
+      this.$router.push(this.pathCompile(path))
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+/* 定义面包屑导航的样式 */
+.app-breadcrumb.el-breadcrumb {
+  display: inline-block;
+  font-size: 14px;
+  line-height: 50px;
+  margin-left: 8px;
+
+  /* 定义不可点击的面包屑项的样式 */
+  .no-redirect {
+    color: #97a8be;
+    cursor: text;
+  }
+}
+</style>

DataTable/index.vue

@@ -0,0 +1,296 @@
+<template>
+  <!-- 组件容器，使用 app-container 类名 -->
+  <div class="app-container">
+
+    <!-- 筛选条件容器 -->
+    <div class="filter-container">
+      <!-- 插槽，用于插入自定义筛选内容 -->
+      <slot name="filter-content" />
+
+      <!-- Element UI 行布局 -->
+      <el-row>
+        <!-- Element UI 列布局 -->
+        <el-col>
+          <!-- 当 options.addRoute 存在时显示添加按钮 -->
+          <el-button v-if="options.addRoute" type="primary" icon="el-icon-plus" @click="handleAdd">添加</el-button>
+        </el-col>
+      </el-row>
+
+    </div>
+
+    <!-- 当 multiShow 为 true 且 options.multiActions 存在时显示批量操作容器 -->
+    <div v-show="multiShow && options.multiActions" class="filter-container">
+
+      <!-- Element UI 下拉选择框，用于选择批量操作 -->
+      <el-select v-model="multiNow" :placeholder="selectedLabel" class="filter-item" style="width: 130px" @change="handleOption">
+        <!-- 循环渲染批量操作选项 -->
+        <el-option
+          v-for="item in options.multiActions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+
+    </div>
+
+    <!-- Element UI 表格，显示数据列表 -->
+    <el-table
+      v-loading="listLoading"
+      :data="dataList.records"
+      :header-cell-style="{'background':'#f2f3f4', 'color':'#555', 'font-weight':'bold', 'line-height':'32px'}"
+      border
+      fit
+      highlight-current-row
+      @selection-change="handleSelection"
+    >
+
+      <!-- 当 options.multi 为 true 时显示多选列 -->
+      <el-table-column
+        v-if="options.multi"
+        align="center"
+        type="selection"
+        width="55"
+      />
+
+      <!-- 插槽，用于插入自定义表格列 -->
+      <slot name="data-columns" />
+
+    </el-table>
+
+    <!-- 分页组件，当总数据量大于 0 时显示 -->
+    <pagination v-show="dataList.total>0" :total="dataList.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+  </div>
+</template>
+
+<script>
+// 从公共 API 模块导入列表查询、删除数据和更改状态的方法
+import { fetchList, deleteData, changeState } from '@/api/common'
+// 导入分页组件
+import Pagination from '@/components/Pagination'
+
+export default {
+  // 组件名称
+  name: 'PagingTable',
+  // 注册子组件
+  components: { Pagination },
+  // 组件入参
+  props: {
+    options: {
+      type: Object,
+      default: () => {
+        return {
+          // 批量操作选项数组
+          multiActions: [],
+          // 列表请求的 API 地址
+          listUrl: '/exam/api',
+          // 删除数据请求的 API 地址
+          deleteUrl: '',
+          // 更改状态请求的 API 地址
+          stateUrl: '',
+          // 是否支持批量操作
+          multi: false
+        }
+      }
+    },
+
+    // 列表查询参数
+    listQuery: {
+      type: Object,
+      default: () => {
+        return {
+          // 当前页码
+          current: 1,
+          // 每页显示的数据量
+          size: 10,
+          // 其他查询参数
+          params: {},
+          // 时间戳，用于防止缓存
+          t: 0
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      // 接口返回的数据列表
+      dataList: {
+        // 总数据量
+        total: 0
+      },
+      // 数据加载状态标识
+      listLoading: true,
+      // 选中的数据 ID 数组
+      selectedIds: [],
+      // 选中的数据对象数组
+      selectedObjs: [],
+      // 显示已选中的项数提示文本
+      selectedLabel: '',
+      // 是否显示批量操作区域
+      multiShow: false,
+      // 当前选中的批量操作标识
+      multiNow: ''
+    }
+  },
+  watch: {
+
+    // 检测查询参数变化，当变化时重新获取数据列表
+    listQuery: {
+      handler() {
+        this.getList()
+      },
+      deep: true
+    }
+  },
+  // 组件创建完成后调用获取数据列表的方法
+  created() {
+    this.getList()
+  },
+  methods: {
+
+    /**
+     * 添加数据跳转方法
+     * 如果 options.addRoute 存在，则跳转到指定路由；否则打印提示信息
+     */
+    handleAdd() {
+      if (this.options.addRoute) {
+        this.$router.push({ name: this.options.addRoute, params: {}})
+        return
+      }
+      console.log('未设置添加数据跳转路由！')
+    },
+
+    /**
+     * 查询数据列表方法
+     * 发送请求获取数据列表，并更新组件数据
+     */
+    getList() {
+      this.listLoading = true
+      this.listQuery.t = new Date().getTime()
+      fetchList(this.options.listUrl, this.listQuery).then(response => {
+        this.dataList = response.data
+        this.listLoading = false
+      })
+    },
+
+    /**
+     * 搜索方法
+     * 重新调用获取数据列表的方法
+     */
+    handleFilter() {
+      // 重新搜索
+      this.getList()
+    },
+
+    /**
+     * 批量操作回调方法
+     * 根据选中的批量操作标识执行相应操作
+     * @param {string} v - 当前选中的批量操作标识
+     */
+    handleOption(v) {
+      this.multiNow = ''
+
+      // 内部消化的操作
+      if (v === 'delete') {
+        this.handleDelete()
+        return
+      }
+
+      if (v === 'enable') {
+        this.handleState(0)
+        return
+      }
+
+      if (v === 'disable') {
+        this.handleState(1)
+        return
+      }
+
+      // 向外回调的操作
+      this.$emit('multi-actions', { opt: v, ids: this.selectedIds })
+    },
+
+    /**
+     * 修改状态方法，用于启用或禁用数据
+     * 发送请求修改选中数据的状态，并在成功后重新获取数据列表
+     * @param {number} state - 要修改成的状态值
+     */
+    handleState(state) {
+      // 修改状态
+      changeState(this.options.stateUrl, this.selectedIds, state).then(response => {
+        if (response.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '状态修改成功!'
+          })
+
+          // 重新搜索
+          this.getList()
+        }
+      })
+    },
+
+    /**
+     * 删除数据方法
+     * 先检查是否有选中数据，有则弹出确认对话框，确认后发送删除请求并重新获取数据列表
+     */
+    handleDelete() {
+      if (this.selectedIds.length === 0) {
+        this.$message({
+          message: '请至少选择一条数据！',
+          type: 'warning'
+        })
+        return
+      }
+
+      // 删除
+      this.$confirm('确实要删除吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteData(this.options.deleteUrl, this.selectedIds).then(() => {
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          })
+          this.getList()
+        })
+      })
+    },
+
+    /**
+     * 列表多选操作方法
+     * 处理表格多选变化事件，更新选中数据的相关信息并触发事件
+     * @param {Array} val - 当前选中的数据对象数组
+     */
+    handleSelection(val) {
+      const ids = []
+      val.forEach(row => {
+        ids.push(row.id)
+      })
+
+      this.selectedObjs = val
+      this.selectedIds = ids
+      this.multiShow = ids.length > 0
+      this.selectedLabel = '已选' + ids.length + '项'
+
+      this.$emit('select-changed', { ids: this.selectedIds, objs: this.selectedObjs })
+    }
+
+  }
+}
+</script>
+
+<style>
+
+  /* 筛选容器内筛选项的样式，设置左外边距 */
+  .filter-container .filter-item{
+    margin-left: 5px;
+  }
+
+  /* 筛选容器内第一个筛选项的样式，取消左外边距 */
+  .filter-container .filter-item:first-child{
+    margin-left: 0px;
+  }
+</style>

DepartTreeSelect/index.vue

@@ -0,0 +1,250 @@
+<!-- 树状选择器 -->
+<template>
+  <!-- Element UI 弹出框组件，用于显示树状菜单 -->
+  <el-popover
+    ref="popover"
+    placement="bottom-start"
+    trigger="click"
+    @show="onShowPopover"
+    @hide="onHidePopover"
+  >
+    <!-- Element UI 树组件，用于显示部门树状结构 -->
+    <el-tree
+      ref="tree"
+      :style="`min-width: ${treeWidth}`"
+      :data="data"
+      :props="props"
+      :expand-on-click-node="false"
+      :filter-node-method="filterNode"
+      placeholder="选择部门"
+      class="select-tree"
+      :check-strictly="false"
+      highlight-current
+      default-expand-all
+      @node-click="onClickNode"
+    />
+    <!-- Element UI 输入框组件，作为弹出框的触发元素 -->
+    <el-input
+      slot="reference"
+      ref="input"
+      v-model="labelModel"
+      :style="`width: ${width}px`"
+      :class="{ 'rotate': showStatus }"
+      :placeholder="placeholder"
+      clearable
+      suffix-icon="el-icon-arrow-down"
+    />
+  </el-popover>
+</template>
+
+<script>
+export default {
+  // 组件名称
+  name: 'DepartTree',
+  // 设置绑定参数，指定 prop 为 value，事件为 selected
+  model: {
+    prop: 'value',
+    event: 'selected'
+  },
+  // 组件接收的属性
+  props: {
+    // 接收绑定的选中值
+    value: String,
+    // 输入框的宽度
+    width: String,
+    // 选项数据，必须为数组类型
+    options: {
+      type: Array,
+      required: true
+    },
+    // 输入框的占位符文本
+    placeholder: {
+      type: String,
+      required: false,
+      default: '请选择'
+    },
+    // 树节点的配置选项
+    props: {
+      type: Object,
+      required: false,
+      default: () => ({
+        parent: 'parentId',
+        value: 'rowGuid',
+        label: 'areaName',
+        children: 'children'
+      })
+    }
+  },
+  // 组件的数据
+  data() {
+    return {
+      // 树状菜单的显示状态
+      showStatus: false,
+      // 树状菜单的宽度
+      treeWidth: 'auto',
+      // 输入框显示的文本
+      labelModel: '',
+      // 实际请求传递的值
+      valueModel: '0'
+    }
+  },
+  // 计算属性
+  computed: {
+    // 判断选项数据是否为树状结构
+    dataType() {
+      const jsonStr = JSON.stringify(this.options)
+      return jsonStr.indexOf(this.props.children) !== -1
+    },
+    // 若选项数据不是树状结构，则将其转换为树状结构
+    data() {
+      return this.dataType ? this.options : this.switchTree()
+    }
+  },
+  // 监听器
+  watch: {
+    // 监听输入框显示文本的变化，若为空则清空选中值，并过滤树节点
+    labelModel(val) {
+      if (!val) {
+        this.valueModel = ''
+      }
+      this.$refs.tree.filter(val)
+    },
+    // 监听绑定值的变化，更新输入框显示的文本
+    value(val) {
+      this.labelModel = this.queryTree(this.data, val)
+    }
+  },
+  // 组件创建完成后的钩子函数
+  created() {
+    // 若存在初始绑定值，则更新输入框显示的文本
+    if (this.value) {
+      this.labelModel = this.queryTree(this.data, this.value)
+    }
+    // 等待 DOM 更新完成后，同步输入框宽度到树状菜单宽度
+    this.$nextTick(() => {
+      this.treeWidth = `${(this.width || this.$refs.input.$refs.input.clientWidth) - 24}px`
+    })
+  },
+  // 组件的方法
+  methods: {
+    // 点击树节点时的处理方法
+    onClickNode(node) {
+      // 更新输入框显示的文本
+      this.labelModel = node[this.props.label]
+      // 更新实际请求传递的值
+      this.valueModel = node[this.props.value]
+      // 关闭树状菜单
+      this.onCloseTree()
+    },
+    // 将扁平数组转换为树状层级结构
+    switchTree() {
+      return this.cleanChildren(this.buildTree(this.options, '0'))
+    },
+    // 关闭树状菜单
+    onCloseTree() {
+      this.$refs.popover.showPopper = false
+    },
+    // 弹出框显示时的处理方法
+    onShowPopover() {
+      // 更新树状菜单显示状态
+      this.showStatus = true
+      // 清除树节点的过滤
+      this.$refs.tree.filter(false)
+    },
+    // 弹出框隐藏时的处理方法
+    onHidePopover() {
+      // 更新树状菜单显示状态
+      this.showStatus = false
+      // 触发 selected 事件，传递实际请求的值
+      this.$emit('selected', this.valueModel)
+    },
+    // 树节点过滤方法
+    filterNode(query, data) {
+      // 若查询文本为空，则显示所有节点
+      if (!query) return true
+      // 根据节点的 label 属性进行过滤
+      return data[this.props.label].indexOf(query) !== -1
+    },
+    // 在树状数据中搜索指定 ID 对应的 label
+    queryTree(tree, id) {
+      let stark = []
+      stark = stark.concat(tree)
+      while (stark.length) {
+        const temp = stark.shift()
+        if (temp[this.props.children]) {
+          stark = stark.concat(temp[this.props.children])
+        }
+        if (temp[this.props.value] === id) {
+          return temp[this.props.label]
+        }
+      }
+      return ''
+    },
+    // 将一维的扁平数组转换为多层级对象
+    buildTree(data, id = '0') {
+      const fa = (parentId) => {
+        const temp = []
+        for (let i = 0; i < data.length; i++) {
+          const n = data[i]
+          if (n[this.props.parent] === parentId) {
+            n.children = fa(n.rowGuid)
+            temp.push(n)
+          }
+        }
+        return temp
+      }
+      return fa(id)
+    },
+    // 清除树状数据中为空的 children 属性
+    cleanChildren(data) {
+      const fa = (list) => {
+        list.map((e) => {
+          if (e.children.length) {
+            fa(e.children)
+          } else {
+            delete e.children
+          }
+          return e
+        })
+        return list
+      }
+      return fa(data)
+    }
+  }
+}
+</script>
+
+<style>
+  /* 带后缀图标的输入框样式 */
+  .el-input.el-input--suffix {
+    cursor: pointer;
+    overflow: hidden;
+  }
+  /* 带后缀图标且旋转状态的输入框样式，使后缀图标旋转 180 度 */
+  .el-input.el-input--suffix.rotate .el-input__suffix {
+    transform: rotate(180deg);
+  }
+  /* 树状选择器样式，设置最大高度和垂直滚动条 */
+  .select-tree {
+    max-height: 350px;
+    overflow-y: scroll;
+  }
+  /* 菜单滚动条样式 */
+  .select-tree::-webkit-scrollbar {
+    z-index: 11;
+    width: 6px;
+  }
+  .select-tree::-webkit-scrollbar-track,
+  .select-tree::-webkit-scrollbar-corner {
+    background: #fff;
+  }
+  .select-tree::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    width: 6px;
+    background: #b4bccc;
+  }
+  .select-tree::-webkit-scrollbar-track-piece {
+    background: #fff;
+    width: 6px;
+  }
+</style>