element Switch 样式修改

需求

在项目中需要用到Switch 开关，但是开关的样式不好看，element的Switch样式：

期望样式：

解决代码

<template>
  <d2-container>
    <el-switch v-model="isOpen" active-color="#39BC65" inactive-color="#ff4949" :active-text="showName"></el-switch>
  </d2-container>
</template>

<script>
export default {
  computed: {
    showName() {
      return this.isOpen ? 'on' : 'off'
    }
  },
  data() {
    return {
      isOpen: false
    }
  }

}
</script>

<style lang="scss" scoped>
:deep(.el-switch) {
  position: relative;
  user-select: none;

  .el-switch__core {
    width: 45px !important;
  }

  &.is-checked .el-switch__label {
    position: absolute;
    top: 0px;
    left: -3px;
    color: #fff;
  }

  .el-switch__label {
    position: absolute;
    top: 0px;
    left: 10px;
    color: #fff;
  }
}
</style>