魔改switch样式

大人世道变了，现在ui图都不按照框架来画，简直难为前端马农

默认switch是这样得

UI设计稿是这样的

你难道要我受挫组件，哈哈，这个可以有但没必要

直接魔改switch

代码Html

<switch :checked="1 === isDefault" color="#BB0015" @change="switch1Change" />

JS

const switch1Change = (e) => {isDefault.value = e.detail.value ? 1 : 0}

CSS（这个比较重要，需要穿透，不然不生效）

::v-deep .uni-switch-input {border: none;border-radius: 0;// background: red;width: 112upx;height: 54upx;transform: scaleX(-1);&::before {border-radius: 0;background: #dfdfdf;// transform: translateX(-20px);}&::after {// transform: translateX(26px);border-radius: 0;}}::v-deep .uni-switch-input.uni-switch-input-checked:after{transform: translateX(34px);}

成品：