hookehuyr

style(PhoneSettingPage): 调整验证码输入和按钮的样式

统一表单元素的样式,改进间距和焦点状态
......@@ -43,7 +43,7 @@
<!-- 验证码输入 -->
<div class="mb-6">
<label for="verificationCode" class="block text-sm font-medium text-gray-700 mb-2">
<label for="verificationCode" class="block text-sm font-medium text-gray-700">
验证码 <span class="text-red-500">*</span>
</label>
<div class="flex space-x-2">
......@@ -54,13 +54,13 @@
required
maxlength="6"
placeholder="请输入验证码"
class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500"
/>
<button
type="button"
:disabled="countdown > 0 || !isPhoneValid"
@click="sendVerificationCode"
class="px-4 py-3 border border-transparent text-sm font-medium rounded-lg text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
class="mt-1 px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
>
{{ countdown > 0 ? `${countdown}秒后重试` : '获取验证码' }}
</button>
......