<template>
  <el-drawer
    class="right"
    :visible.sync="show"
    size="300px"
    title="主题设置"
    :modal="true"
    :show-close="true"
    :with-header="true"
    :direction="direction"
  >
    <slot />
  </el-drawer>
</template>

<script>
export default {
  name: 'RightPanel',
  props: {},
  data() {
    return {
      show: false
    }
  },
  computed: {
    theme() {
      return this.$store.state.settings.defaultTheme
    }
  },
  methods: {
    changeSettings(show) {
      this.show = show
    }
  }
}
</script>

<style lang="scss" scoped>
.right ::v-deep {
  .el-drawer__header {
    color: rgb(89, 89, 89);
    font-size: 15px;
    margin-bottom: 0;
    padding: 13px 16px;
    border-bottom: 1px solid rgb(244, 244, 244);
  }

  .el-drawer__close-btn {
    font-size: 18px;
    color: rgb(140, 140, 140);
    padding: 0;
    cursor: pointer;
    background-color: transparent;
    border-style: none;
  }

  .el-drawer__body {
    overflow: auto;

    &::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>
