qjkankan_v1.1.1/packages/qjkankan-editor/src/framework/SettingPC.vue

<template>
  <div class="pc-setting" app-border dir-left>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: "pc-setting",
  props: {
    scrollbar: {
      type: Boolean,
      default: true
    }
  },
  mounted() {
    // 添加滚动条
    this.scrollbar &&
      this.$nextTick(() =>
        $(this.$el).mCustomScrollbar({
          axis: "y",
          scrollInertia: 200,
          autoHideScrollbar: false
        })
      );
  },
  activated() {
    this.scrollbar &&
      this.$nextTick(() => {
        $(this.$el).mCustomScrollbar("update");
        $(this.$el).mCustomScrollbar("scrollTo", "top", 0);
      });
  }
};
</script>
<style lang="less" scoped>
.pc-setting {
  // width: 100%;
  .view-setting {
    padding: 10px;
    > li {
      padding: 10px;
      font-size: 14px;
      .title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        label {
          color: #ababab;
          font-size: 12px;
        }
      }
      .remark {
        display: block;
        white-space: normal;
        font-size: 12px;
        line-height: 1.5;
        color: #ababab;
      }
    }
    .title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        label {
          color: #ababab;
          font-size: 12px;
        }
      }
      .remark {
        display: block;
        white-space: normal;
        font-size: 12px;
        line-height: 1.5;
        color: #ababab;
      }
  }

  /deep/ .vue-slider {
    padding: 7px 10px !important;
  }
  /deep/ .vue-slider-process {
    background-color: @color;
  }
  /deep/ .vue-slider-dot-tooltip-inner {
    border-color: @color;
    background-color: @color;
  }
}
</style>