Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
fdade5b8 1 parent 707c8d24

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

为了提高 UI 一致性和用户体验，将注册页面的原生 checkbox 替换为 Vant 的 VanCheckbox 组件。同时更新了相关样式和属性配置。
Inline Side-by-side
Showing 2 changed files with 9 additions and 7 deletions
...@@ -26,6 +26,7 @@ declare module 'vue' { ...@@ -26,6 +26,7 @@ declare module 'vue' {
26 SummerCampCard: typeof import('./components/ui/SummerCampCard.vue')['default'] 26 SummerCampCard: typeof import('./components/ui/SummerCampCard.vue')['default']
27 TermsContent: typeof import('./components/ui/TermsContent.vue')['default'] 27 TermsContent: typeof import('./components/ui/TermsContent.vue')['default']
28 TermsPopup: typeof import('./components/ui/TermsPopup.vue')['default'] 28 TermsPopup: typeof import('./components/ui/TermsPopup.vue')['default']
29 + VanCheckbox: typeof import('vant/es')['Checkbox']
29 VanDatePicker: typeof import('vant/es')['DatePicker'] 30 VanDatePicker: typeof import('vant/es')['DatePicker']
30 VanIcon: typeof import('vant/es')['Icon'] 31 VanIcon: typeof import('vant/es')['Icon']
31 VanList: typeof import('vant/es')['List'] 32 VanList: typeof import('vant/es')['List']
......
...@@ -80,15 +80,14 @@ ...@@ -80,15 +80,14 @@
80 </div> 80 </div>
81 81
82 <div class="flex items-center"> 82 <div class="flex items-center">
83 - <input 83 + <van-checkbox
84 id="agreeTerms" 84 id="agreeTerms"
85 v-model="formData.agreeTerms" 85 v-model="formData.agreeTerms"
86 - type="checkbox" 86 + shape="square"
87 - class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded" 87 + checked-color="#4caf50"
88 - /> 88 + class="scale-90"
89 - <label for="agreeTerms" class="ml-2 block text-sm text-gray-700"> 89 + icon-size="18px"
90 - 我已阅读并同意 <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> 90 + ><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>
91 - </label>
92 </div> 91 </div>
93 92
94 <div> 93 <div>
...@@ -244,3 +243,5 @@ const handleSubmit = async () => { ...@@ -244,3 +243,5 @@ const handleSubmit = async () => {
244 } 243 }
245 } 244 }
246 </script> 245 </script>
246 +
247 +import { Checkbox as VanCheckbox } from 'vant'
......