1. Switch大小
添加类名:class="my-switch"
、以防修改所有switch
<a-switch checked-children="开" un-checked-children="关" class="my-switch" v-model:checked="checked" />
<a-switch checked-children="开" un-checked-children="关" v-model:checked="checked" />
在全局less中
这样写
// 修改switch的宽高
.my-switch.ant-switch {
min-width: 80px;
height: 50px;
// 修改字体大小
.ant-switch-inner {
font-size: 20px;
}
// 修改白色圆点大小
&.ant-switch::after {
width: 30px;
height: 30px;
top: 10px;
}
}
2. checkbox大小
起个类名class="my-check"
<a-checkbox class="my-check" v-model:checked="checked">Checkbox</a-checkbox>
<a-checkbox v-model:checked="checked">Checkbox</a-checkbox>
全局less文件中
.my-check.ant-checkbox-wrapper {
// 字体大小
font-size: 20px;
.ant-checkbox-inner {
// 设置 checkbox 的大小
width: 40px;
height: 40px;
font-size: 20px;
// 设置对勾的 大小 和 位置
&::after {
top: 14px;
left: 6px;
width: 16px;
height: 28px;
}
}
}