style(CheckoutPage): 优化表单标签样式和文案一致性
将表单中的必填项标签的星号改为红色,并统一将“购物车”文案改为“课程”以提高一致性
Showing
1 changed file
with
6 additions
and
6 deletions
| 1 | <template> | 1 | <template> |
| 2 | - <AppLayout :title="orderComplete ? '支付成功' : '结账'" :show-back-button="!orderComplete" :hide-bottom-nav="true" @back-click="router.back()"> | 2 | + <AppLayout :title="orderComplete ? '支付成功' : '结账'" :hide-bottom-nav="true" @back-click="router.back()"> |
| 3 | <div v-if="cartItems.length === 0 && !orderComplete" class="h-screen flex flex-col items-center justify-center px-4"> | 3 | <div v-if="cartItems.length === 0 && !orderComplete" class="h-screen flex flex-col items-center justify-center px-4"> |
| 4 | <FrostedGlass class="p-6 rounded-xl text-center"> | 4 | <FrostedGlass class="p-6 rounded-xl text-center"> |
| 5 | <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-400 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | 5 | <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-400 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| ... | @@ -102,7 +102,7 @@ | ... | @@ -102,7 +102,7 @@ |
| 102 | 102 | ||
| 103 | <div class="space-y-3"> | 103 | <div class="space-y-3"> |
| 104 | <div> | 104 | <div> |
| 105 | - <label class="block text-sm text-gray-600 mb-1">姓名 *</label> | 105 | + <label class="block text-sm text-gray-600 mb-1">姓名 <span class="text-red-500">*</span></label> |
| 106 | <input | 106 | <input |
| 107 | v-model="formData.name" | 107 | v-model="formData.name" |
| 108 | type="text" | 108 | type="text" |
| ... | @@ -113,7 +113,7 @@ | ... | @@ -113,7 +113,7 @@ |
| 113 | </div> | 113 | </div> |
| 114 | 114 | ||
| 115 | <div> | 115 | <div> |
| 116 | - <label class="block text-sm text-gray-600 mb-1">手机号码 *</label> | 116 | + <label class="block text-sm text-gray-600 mb-1">手机号码 <span class="text-red-500">*</span></label> |
| 117 | <input | 117 | <input |
| 118 | v-model="formData.phone" | 118 | v-model="formData.phone" |
| 119 | type="tel" | 119 | type="tel" |
| ... | @@ -134,7 +134,7 @@ | ... | @@ -134,7 +134,7 @@ |
| 134 | </div> | 134 | </div> |
| 135 | 135 | ||
| 136 | <div> | 136 | <div> |
| 137 | - <label class="block text-sm text-gray-600 mb-1">联系地址 *</label> | 137 | + <label class="block text-sm text-gray-600 mb-1">联系地址 <span class="text-red-500">*</span></label> |
| 138 | <input | 138 | <input |
| 139 | v-model="formData.address" | 139 | v-model="formData.address" |
| 140 | type="text" | 140 | type="text" |
| ... | @@ -222,7 +222,7 @@ | ... | @@ -222,7 +222,7 @@ |
| 222 | }" | 222 | }" |
| 223 | class="text-sm text-red-500" | 223 | class="text-sm text-red-500" |
| 224 | > | 224 | > |
| 225 | - 清空购物车 | 225 | + 清空课程 |
| 226 | </button> | 226 | </button> |
| 227 | </div> | 227 | </div> |
| 228 | <button | 228 | <button |
| ... | @@ -247,7 +247,7 @@ | ... | @@ -247,7 +247,7 @@ |
| 247 | <ConfirmDialog | 247 | <ConfirmDialog |
| 248 | v-model:show="showConfirmDialog" | 248 | v-model:show="showConfirmDialog" |
| 249 | title="确认删除" | 249 | title="确认删除" |
| 250 | - :message="itemToDelete ? `确定要删除 ${itemToDelete.title || '此商品'} 吗?` : '确定要清空购物车吗?'" | 250 | + :message="itemToDelete ? `确定要删除 ${itemToDelete.title || '此商品'} 吗?` : '确定要清空课程吗?'" |
| 251 | @confirm="() => { | 251 | @confirm="() => { |
| 252 | if (itemToDelete) { | 252 | if (itemToDelete) { |
| 253 | if (cartItems.length === 1) { | 253 | if (cartItems.length === 1) { | ... | ... |
-
Please register or login to post a comment