魔改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; height: 54upx; width: 54upx; } &::after { height: 54upx; width: 54upx; border-radius: 0; } } ::v-deep .uni-switch-input.uni-switch-input-checked:after{ transform: translateX(58upx); }

成品：

2025/3/4已知问题，当页面尺寸调整时会变形，例如下图（现已修复）

2025/3/4更新:现在页面尺寸变化也不会影响按钮