diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 72f2274..87307df 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -18,57 +18,128 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ phoneCooldown > 0 ? `${phoneCooldown}s` : '获取验证码' }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ emailCooldown > 0 ? `${emailCooldown}s` : '获取验证码' }}
+
+
+
+
+
+
+
+
+
+
+
+
+ 记住我
+ 忘记密码?
+
-
-
-
-
-
-
-
-
-
-
- 记住我
- 忘记密码?
-
-
-
- {{ loading ? '登录中...' : '登录' }}
-
-
-
- 还没有账号?
- 立即注册
-
-
+ {{ loading ? '登录中...' : '登录' }}
+
+
+
+ 还没有账号?
+ 立即注册
+
-
-
-
-
-
+
+
+
+
+
-
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 注 册
-
-
-
-
- 已有账号?
-
立即登录
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
联系方式验证
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 邮箱验证
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 注 册
+
+
+
+
+ 已有账号?
+ 立即登录
+
@@ -125,7 +181,7 @@
@@ -272,7 +367,7 @@ const sendVerifyCode = () => {
}
.register-card {
- width: 500px;
+ width: 1100px;
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.9);
border-radius: 20px;
@@ -322,11 +417,22 @@ const sendVerifyCode = () => {
.verify-code-input {
display: flex;
gap: 10px;
+ align-items: flex-start;
+}
+
+.verify-code-input .el-input {
+ flex: 1;
}
.verify-code-input .el-button {
width: 120px;
height: 50px;
+ margin-top: 0;
+}
+
+.verify-section .el-form-item:not(:first-child) .el-input {
+ width: calc(100% - 130px);
+ margin-left: 130px;
}
.register-button {
@@ -348,4 +454,131 @@ const sendVerifyCode = () => {
.login-link a:hover {
color: #66b1ff;
}
+
+.divider {
+ text-align: center;
+ color: #909399;
+ font-size: 14px;
+ margin: 20px 0;
+ position: relative;
+ display: flex;
+ align-items: center;
+}
+
+.divider::before,
+.divider::after {
+ content: '';
+ flex: 1;
+ height: 1px;
+ background: #dcdfe6;
+ margin: 0 16px;
+}
+
+.verify-section {
+ background: #f8f9fa;
+ border-radius: 12px;
+ padding: 20px;
+ margin-bottom: 15px;
+}
+
+.verify-title {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ color: #409EFF;
+ font-size: 16px;
+ font-weight: 500;
+ margin-bottom: 20px;
+}
+
+.verify-title .el-icon {
+ font-size: 20px;
+}
+
+.verify-code-input {
+ display: flex;
+ gap: 10px;
+}
+
+.verify-code-input .el-input {
+ flex: 1;
+}
+
+.verify-code-input .el-button {
+ width: 120px;
+ height: 50px;
+}
+
+/* 优化输入框样式 */
+.custom-input {
+ height: 50px;
+}
+
+.custom-input :deep(.el-input__wrapper) {
+ background: white;
+ border: 1px solid #e4e7ed;
+ box-shadow: none !important;
+ transition: all 0.3s;
+}
+
+.custom-input :deep(.el-input__wrapper:hover) {
+ border-color: #c0c4cc;
+}
+
+.custom-input :deep(.el-input__wrapper.is-focus) {
+ border-color: #409EFF;
+}
+
+/* 优化按钮样式 */
+.el-button {
+ border-radius: 8px;
+ font-weight: 500;
+ transition: all 0.3s;
+}
+
+.el-button:not(:disabled):hover {
+ transform: translateY(-1px);
+ box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
+}
+
+.register-content {
+ display: flex;
+ gap: 30px;
+ margin-bottom: 30px;
+}
+
+.basic-info {
+ flex: 1;
+ padding-right: 30px;
+ border-right: 1px solid #e4e7ed;
+}
+
+.verify-info {
+ flex: 1;
+}
+
+/* 响应式布局 */
+@media (max-width: 992px) {
+ .register-card {
+ width: 95%;
+ max-width: 500px;
+ }
+
+ .register-content {
+ flex-direction: column;
+ gap: 20px;
+ }
+
+ .basic-info {
+ padding-right: 0;
+ border-right: none;
+ border-bottom: 1px solid #e4e7ed;
+ padding-bottom: 20px;
+ }
+
+ .verify-section .el-form-item:not(:first-child) .el-input {
+ width: 100%;
+ margin-left: 0;
+ }
+}
\ No newline at end of file