FKJ-HHArome/components/customSwitch/index.acss

.main .cus-switch {
  display: flex;
  align-items: center;
  font-size: calc(20vmax / 12.80);
}

.main .cus-switch .switch-main {
  position: relative;
  width: calc(58vmax / 12.80);
  height: calc(34vmax / 12.80);
  background: #fff;
  border: calc(1vmax / 12.80) solid #ccc;
  margin-right: calc(20vmax / 12.80);
  transition: all 0.3s ease;
}

.main .cus-switch .capsule {
  border-radius: calc(36vmax / 12.80);
}

.main .cus-switch .square {
  border-radius: calc(6vmax / 12.80);
  width: calc(58vmax / 12.80);
}

.main .cus-switch .switch-main::after {
  content: "";
  position: absolute;
  left: calc(3vmax / 12.80);
  top: calc(3vmax / 12.80);
  width: calc(28vmax / 12.80);
  height: calc(28vmax / 12.80);
  background: #fff;
  box-shadow: 0 0 0 calc(1vmax / 12.80) #ccc;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.main .cus-switch .capsule::after {
  border-radius: 50%;
}

.main .cus-switch .square::after {
  border-radius: calc(6vmax / 12.80);
}

.main .cus-switch .checked {
  background: rgba(61, 115, 255, 1);
  border-color: rgba(61, 115, 255, 1);
}
.main .cus-switch .checked::after{
  box-shadow: none;
}
.main .cus-switch .capsule.checked::after {
  transform: translateX(calc(58vmax / 12.80 - 34vmax / 12.80));
}

.main .cus-switch .square.checked::after {
  transform: translateX(calc(58vmax / 12.80 - 34vmax / 12.80));
}

.main .cus-switch .disabled {
  opacity: 0.4;
}

/*竖屏样式*/
.portrait-main .cus-switch {
  display: flex;
  align-items: center;
  font-size: calc(20vmin / 12.80);
  /*padding: calc(10vmax / 12.80);*/
  /*background: red;*/
}

.portrait-main .cus-switch .switch-main {
  position: relative;
  width: calc(70vmin / 12.80);
  height: calc(40vmin / 12.80);
  background: #fff;
  border: calc(1vmin / 12.80) solid #ccc;
  margin-right: calc(20vmin / 12.80);
  transition: all 0.3s ease;
}

.portrait-main .cus-switch .capsule {
  border-radius: calc(36vmin / 12.80);
}

.portrait-main .cus-switch .square {
  border-radius: calc(6vmin / 12.80);
  width: calc(70vmin / 12.80);
}

.portrait-main .cus-switch .switch-main::after {
  content: "";
  position: absolute;
  left: calc(6vmin / 12.80);
  top: calc(6vmin / 12.80);
  width: calc(28vmin / 12.80);
  height: calc(28vmin / 12.80);
  background: #fff;
  box-shadow: 0 0 0 calc(1vmin / 12.80) #ccc;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.portrait-main .cus-switch .capsule::after {
  border-radius: 50%;
}

.portrait-main .cus-switch .square::after {
  border-radius: calc(6vmin / 12.80);
}

.portrait-main .cus-switch .checked {
  background: rgba(61, 115, 255, 1);
  border-color: rgba(61, 115, 255, 1);
}
.portrait-main .cus-switch .checked::after{
  box-shadow: none;
}
.portrait-main .cus-switch .capsule.checked::after {
  transform: translateX(calc(70vmin / 12.80 - 40vmin / 12.80));
}

.portrait-main .cus-switch .square.checked::after {
  transform: translateX(calc(70vmin / 12.80 - 40vmin / 12.80));
}

.portrait-main .cus-switch .disabled {
  opacity: 0.4;
}