魔改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更新:现在页面尺寸变化也不会影响按钮