hookehuyr

refactor(RegisterPage): 使用 VanCheckbox 替换原生 checkbox

为了提高 UI 一致性和用户体验,将注册页面的原生 checkbox 替换为 Vant 的 VanCheckbox 组件。同时更新了相关样式和属性配置。
......@@ -26,6 +26,7 @@ declare module 'vue' {
SummerCampCard: typeof import('./components/ui/SummerCampCard.vue')['default']
TermsContent: typeof import('./components/ui/TermsContent.vue')['default']
TermsPopup: typeof import('./components/ui/TermsPopup.vue')['default']
VanCheckbox: typeof import('vant/es')['Checkbox']
VanDatePicker: typeof import('vant/es')['DatePicker']
VanIcon: typeof import('vant/es')['Icon']
VanList: typeof import('vant/es')['List']
......
......@@ -80,15 +80,14 @@
</div>
<div class="flex items-center">
<input
<van-checkbox
id="agreeTerms"
v-model="formData.agreeTerms"
type="checkbox"
class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded"
/>
<label for="agreeTerms" class="ml-2 block text-sm text-gray-700">
我已阅读并同意 <a href="#" class="text-green-600 hover:text-green-500" @click.prevent="openTerms">用户协议</a> 和 <a href="#" class="text-green-600 hover:text-green-500" @click.prevent="openPrivacy">隐私政策</a>
</label>
shape="square"
checked-color="#4caf50"
class="scale-90"
icon-size="18px"
><span class="text-sm">我已阅读并同意 <a href="#" class="text-green-600 hover:text-green-500" @click.prevent="openTerms">用户协议</a> 和 <a href="#" class="text-green-600 hover:text-green-500" @click.prevent="openPrivacy">隐私政策</a></span></van-checkbox>
</div>
<div>
......@@ -244,3 +243,5 @@ const handleSubmit = async () => {
}
}
</script>
import { Checkbox as VanCheckbox } from 'vant'
......