手写switch组件

效果图

html部分

    <div className={styles.container} style={style}>
      <span className={styles.text}>{label}</span>
      <div className={styles.button}>
        <label className={styles.toggle} onClick={handleClickToggle}>
          <input className={styles.toggle_checkbox} type="checkbox" checked={value} />
          <div className={styles.toggle_switch}>
            <div x-if={value} className={styles.kai}>
              开
            </div>
            <div x-else className={styles.guan}>
              关
            </div>
          </div>
        </label>
      </div>
    </div>

css部分

.container {
  width: 100%;
  height: 58rpx;
  position: absolute;
  left: 0;
}

.text {
  position: absolute;
  left: 80rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 32rpx;
  font-weight: 400;
  color: #5f6676;
}
.button {
  position: absolute;
  right: 80rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 143rpx;
  height: 48rpx;
  border-radius: 24rpx;
}
*,
*:before,
*:after {
  box-sizing: border-box;
}

.toggle {
  cursor: pointer;
  display: inline-block;
}

.toggle_switch {
  display: inline-block;
  background: linear-gradient(180deg, #999999 0%, #cccccc 100%);
  border-radius: 29rpx;
  width: 150rpx;
  height: 58rpx;
  position: relative;
  vertical-align: middle;
  box-shadow: 0px 2rpx 4rpx 0px rgba(187, 204, 219, 0.67);
  transition: background 0.25s;
}
.toggle_switch:before,
.toggle_switch:after {
  content: '';
}
.toggle_switch:before {
  display: block;
  width: 48rpx;
  height: 48rpx;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, #ffffff 100%);
  box-shadow: none;
  position: absolute;
  border-radius: 50%;
  top: 5rpx;
  left: 5rpx;
  transition: left 0.25s;
}
.toggle:hover .toggle_switch:before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, #ffffff 100%);
}
.toggle_checkbox:checked + .toggle_switch {
  background: linear-gradient(180deg, #0097ff 0%, #36d6ff 100%);
}
.toggle_checkbox:checked + .toggle_switch:before {
  left: 97rpx;
  box-shadow: 0px 2rpx 4rpx 0px #30a0ff;
}

.toggle_checkbox {
  position: absolute;
  visibility: hidden;
}
.kai {
  width: 32rpx;
  height: 32rpx;
  position: absolute;
  left: 33rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 32rpx;
  font-weight: normal;
  font-family: 'FZLanTingYuanS-B-GB', sans-serif;
  line-height: 32rpx;
  color: #ffffff;
}

.guan {
  width: 32rpx;
  height: 32rpx;
  position: absolute;
  left: 79rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 32rpx;
  font-weight: normal;
  font-family: 'FZLanTingYuanS-B-GB', sans-serif;
  line-height: 32rpx;
  color: #ffffff;
}