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 @@ + +
+ 记住我 + 忘记密码? +
- - - - - - - - - -
- 记住我 - 忘记密码? -
- - - - -
+ {{ loading ? '登录中...' : '登录' }} + + +
-
- -

智慧养老平台

-

创建新账号

-
- - - - +
+
+
+ +

智慧养老平台

+

创建新账号

+
+ + - - - + + - - - - - - - - - - - - - - - - -
- - - - - {{ cooldown > 0 ? `${cooldown}s` : '获取验证码' }} - -
-
- - - 注 册 - - - - -
+ +
+
联系方式验证
+ +
+
+ + 手机验证 +
+ + +
+ + + + + {{ phoneCooldown > 0 ? `${phoneCooldown}s` : '获取验证码' }} + +
+
+ + + + + + +
+ +
+
+ + 邮箱验证 +
+ + +
+ + + + + {{ emailCooldown > 0 ? `${emailCooldown}s` : '获取验证码' }} + +
+
+ + + + + + +
+
+
+ + + 注 册 + + + +
@@ -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