diff --git a/clientarea/hgcloud/css/regist.css b/clientarea/hgcloud/css/regist.css index a98d7be..5b117df 100644 --- a/clientarea/hgcloud/css/regist.css +++ b/clientarea/hgcloud/css/regist.css @@ -1,275 +1,456 @@ +/* ============================================ + 注册页面 — BlackFruit 暗色科技风 + 配色:深蓝 #0a0c16 / 蓝 #38BDF8 / 紫 #6366F1 + ============================================ */ + * { margin: 0; padding: 0; + box-sizing: border-box; } + #regist { - height: 100vh; + min-height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; + background: #0a0c16; + background-image: + radial-gradient(ellipse 80% 60% at 50% 0%, rgba(56, 189, 248, 0.08) 0%, transparent 60%), + radial-gradient(ellipse 60% 50% at 80% 100%, rgba(99, 102, 241, 0.06) 0%, transparent 50%); } -.custom-form { - margin-top: 0.3rem; -} -.custom-form .el-form-item__label { - line-height: 1; -} -.custom-form .el-select { - width: 100%; -} + +/* ---- 登录容器 ---- */ .login-container { - width: 15.7rem; - height: 8.2rem; + width: 960px; + min-height: 600px; display: flex; justify-content: center; align-items: center; position: relative; } -/* 背景板 开始 */ + +.login-jump-btn { + position: absolute; + top: 20px; + right: 20px; + z-index: 20; +} + +.login-jump-btn .btn { + background: rgba(56, 189, 248, 0.15); + border: 1px solid rgba(56, 189, 248, 0.3); + color: #38BDF8; + border-radius: 8px; +} + +.login-jump-btn .btn a { + color: inherit; + text-decoration: none; +} + +/* ---- 左侧装饰背景板 ---- */ .container-back { - width: 15.7rem; - height: 6.8rem; - background: var(--color-primary); + width: 960px; + height: 560px; + background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%); border-radius: 20px; overflow: hidden; position: relative; - font-family: Source Han Sans CN; + border: 1px solid rgba(255, 255, 255, 0.06); } + .back-text { - font-size: 0.27rem; + font-size: 16px; z-index: 10; color: #FFFFFF; - margin-top: 1.39rem; - margin-left: 0.65rem; + margin-top: 140px; + margin-left: 65px; font-weight: 400; + position: relative; } + .text-welcome { - font-size: 0.74rem; - font-family: Bahnschrift; - line-height: 0.74rem; + font-size: 48px; + font-family: 'Inter', 'Bahnschrift', sans-serif; + line-height: 1; + font-weight: 700; + background: linear-gradient(135deg, #38BDF8 0%, #6366F1 50%, #EC4899 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + letter-spacing: 4px; } + .text-title { - margin-top: 5px; + margin-top: 12px; + font-size: 18px; + color: rgba(226, 232, 240, 0.85); } + .text-level { - font-size: 0.12rem; - margin-top: 0.81rem; + font-size: 13px; + margin-top: 60px; + color: rgba(148, 163, 184, 0.5); } + +/* 装饰光线 */ .back-line1, .back-line2, .back-line3 { width: 60px; - background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%); + background: linear-gradient(180deg, rgba(56, 189, 248, 0.12) 0%, transparent 100%); z-index: 2; position: absolute; } + .back-line1 { - height: 5rem; - opacity: 1; + height: 500px; transform: rotate(45deg); - top: -1.2rem; - left: 4.15rem; + top: -120px; + left: 300px; } + .back-line2 { - height: 7rem; + height: 600px; transform: rotate(110deg); - top: 0px; - left: 5rem; + top: 0; + left: 400px; + background: linear-gradient(180deg, rgba(99, 102, 241, 0.1) 0%, transparent 100%); } + .back-line3 { - height: 5rem; + height: 500px; transform: rotate(45deg); - top: 2.3rem; - left: 1.5rem; + top: 200px; + left: 100px; + background: linear-gradient(180deg, rgba(236, 72, 153, 0.08) 0%, transparent 100%); } -/* 背景板结束 */ -/* 前景 登录框 开始 */ + +/* ---- 右侧注册表单卡片(毛玻璃) ---- */ .container-before { - width: 7.5rem; - height: 8rem; + width: 440px; + max-height: 580px; overflow-y: auto; - background: #FFFFFF; - box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.1); + background: rgba(15, 23, 42, 0.85); + backdrop-filter: blur(24px); + -webkit-backdrop-filter: blur(24px); + border: 1px solid rgba(255, 255, 255, 0.08); + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); position: absolute; - right: 0.9rem; - border: 4px; + right: 60px; + border-radius: 16px; z-index: 10; } -.login { - padding-top: 0.8rem; - padding-left: 1.24rem; - padding-right: 1.05rem; - font-size: 14px; - font-family: PingFang SC; - font-weight: 400; - line-height: 14px; + +/* 自定义滚动条 */ +.container-before::-webkit-scrollbar { + width: 4px; } + +.container-before::-webkit-scrollbar-track { + background: transparent; +} + +.container-before::-webkit-scrollbar-thumb { + background: rgba(56, 189, 248, 0.2); + border-radius: 4px; +} + +.login { + padding: 48px 40px 36px; + font-size: 14px; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + line-height: 1.5; +} + +/* ---- 标题区 ---- */ .login-text { display: flex; flex-direction: column; } + .login-text-title { - font-size: 0.32rem; - color: #1E2736; - line-height: 0.32rem; + font-size: 24px; + color: #F1F5F9; + line-height: 1; + font-weight: 600; } + .login-text-regist { - font-weight: Regular; - margin-top: 0.08rem; - color: #1E2736; + margin-top: 8px; + color: rgba(148, 163, 184, 0.7); + font-size: 14px; } + .login-text-regist a { - color: var(--color-primary); + color: #38BDF8; cursor: pointer; + text-decoration: none; + transition: color 0.2s; } + +.login-text-regist a:hover { + color: #7DD3FC; +} + +/* ---- 切换标签(邮箱/手机) ---- */ .login-form { - margin-top: 0.68rem; + margin-top: 28px; } + .login-top { display: flex; - flex-direction: row; + gap: 24px; + border-bottom: 1px solid rgba(255, 255, 255, 0.06); + padding-bottom: 0; } + .login-email, .login-phone { - height: 0.34rem; - color: #666B80; + padding-bottom: 10px; + color: rgba(148, 163, 184, 0.6); cursor: pointer; + font-size: 14px; + transition: color 0.2s; + border-bottom: 2px solid transparent; + margin-bottom: -1px; } + +.login-email:hover, +.login-phone:hover { + color: rgba(226, 232, 240, 0.8); +} + .active { - color: var(--color-primary); - border-bottom: 2px solid var(--color-primary); -} -.login-email { - margin-right: 0.4rem; + color: #38BDF8 !important; + border-bottom: 2px solid #38BDF8 !important; } + +/* ---- 表单 ---- */ .form-main { - margin-top: 0.3rem; + margin-top: 20px; } + .form-item { - margin-top: 0.3rem; + margin-top: 16px; } + +/* Element UI 输入框覆盖 → 暗色风格 */ +.form-main .el-input__inner, +.form-main .el-textarea__inner, +.form-main .el-select .el-input__inner, +.custom-form .el-input__inner, +.custom-form .el-textarea__inner { + background: rgba(30, 41, 59, 0.6) !important; + border: 1px solid rgba(255, 255, 255, 0.08) !important; + color: #E2E8F0 !important; + border-radius: 10px !important; + height: 44px !important; + line-height: 44px !important; + transition: all 0.2s ease; +} + +.form-main .el-input__inner:focus, +.form-main .el-textarea__inner:focus, +.custom-form .el-input__inner:focus, +.custom-form .el-textarea__inner:focus { + border-color: rgba(56, 189, 248, 0.4) !important; + box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.08) !important; +} + +.form-main .el-input__inner::placeholder, +.custom-form .el-input__inner::placeholder { + color: rgba(148, 163, 184, 0.4) !important; +} + +/* 自定义表单 label */ +.custom-form { + margin-top: 8px; +} + +.custom-form .el-form-item__label { + color: rgba(226, 232, 240, 0.7) !important; + line-height: 1; + padding-bottom: 6px !important; + font-size: 13px; +} + +.custom-form .el-checkbox__label { + color: rgba(148, 163, 184, 0.7) !important; +} + +/* 手机号 select 前置 */ .input-with-select .el-input-group__prepend { - background: #FFFFFF; - width: 60px; + background: rgba(30, 41, 59, 0.6) !important; + border: 1px solid rgba(255, 255, 255, 0.08) !important; + border-right: none !important; + border-radius: 10px 0 0 10px !important; + color: #E2E8F0 !important; } + +/* 验证码按钮 */ .code-item { display: flex; - flex-direction: row; + gap: 10px; } + .code-btn { - margin-left: 0.1rem; - background: var(--color-primary); - color: #FFFFFF; + background: linear-gradient(135deg, #38BDF8, #6366F1) !important; + border: none !important; + color: #FFFFFF !important; + border-radius: 10px !important; + white-space: nowrap; + padding: 0 16px !important; + font-size: 13px; } -.rember-item { - margin-top: 0.2rem; - display: flex; - justify-content: space-between; + +/* ---- 协议勾选 ---- */ +.read-item { + margin-top: 12px; } -.rember-item a { - color: var(--color-primary); + +.read-text { + flex: 1; + font-size: 13px; + line-height: 1.6; + padding: 0 8px; + color: rgba(148, 163, 184, 0.6); + font-weight: 400; +} + +.read-item a { + color: #38BDF8; cursor: pointer; + text-decoration: none; } + +.read-item a:hover { + color: #7DD3FC; +} + +.read-item .el-checkbox__inner { + background: rgba(30, 41, 59, 0.6) !important; + border-color: rgba(255, 255, 255, 0.12) !important; +} + +.read-item .el-checkbox__input.is-checked .el-checkbox__inner { + background: #38BDF8 !important; + border-color: #38BDF8 !important; +} + +/* 错误提示 */ +.read-item .el-alert--error { + background: rgba(239, 68, 68, 0.1) !important; + border: 1px solid rgba(239, 68, 68, 0.2); + border-radius: 8px; + color: #FCA5A5 !important; +} + +.read-item .el-alert--error .el-alert__title { + color: #FCA5A5 !important; +} + +/* ---- 注册按钮 ---- */ .login-btn { width: 100%; height: 46px; - background: var(--color-primary); + background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%) !important; + border: none !important; + border-radius: 10px !important; + font-size: 15px !important; + font-weight: 600; + letter-spacing: 2px; + transition: all 0.3s ease; + box-shadow: 0 4px 16px rgba(56, 189, 248, 0.3); } -.read-text { - flex: 1; - font-size: 14px; - line-height: 19px; - padding: 0 10px; - color: #606266; - font-weight: 500; + +.login-btn:hover { + transform: translateY(-1px); + box-shadow: 0 6px 24px rgba(56, 189, 248, 0.45); } -.read-item { - margin-top: 0.2rem; -} -.read-item a { - color: var(--color-primary); - cursor: pointer; -} -.line-item { - margin-top: 0.4rem; -} -.line-item text { - font-size: 16px; - color: #1E2736; -} -.type-btn { - width: 100%; - height: 0.46rem; - font-size: 0.16rem; + +/* 隐藏的密码字段 */ +.empty-input { + position: absolute; + opacity: 0; + width: 0; + height: 0; } + +/* ---- 移动端适配 ---- */ @media screen and (max-width: 750px) { - .login-btn { - font-size: 0.34rem; - height: 0.8rem; - } - .type-btn { - border: none; - color: var(--color-primary); - font-size: 0.34rem; - } - .code-btn { - font-size: 0.32rem; - height: 0.8rem; + #regist { + background: #0a0c16; } + .login-container { - height: calc(100vh - 1.2rem); + height: auto; + min-height: 100vh; width: 100vw; - background: #F2F2FE; - padding: 0.6rem 0; + padding: 20px 16px; + flex-direction: column; } + .container-back { display: none; } + .container-before { width: 100%; - height: 100%; - margin: 0rem 0.3rem; - position: unset; - z-index: 0; + max-height: none; + position: static; + border-radius: 16px; + background: rgba(15, 23, 42, 0.9); } + .login { - padding-top: 1.17rem; - padding-left: 0.3rem; - padding-right: 0.3rem; - font-size: 0.26rem; - line-height: 0.3rem; + padding: 36px 24px 28px; } + .login-text-title { - font-size: 0.4rem; + font-size: 22px; } + .login-text-regist { - margin-top: 0.1rem; - font-size: 0.28rem; + font-size: 13px; } - .login-form { - margin-top: 1.21rem; - } - .form-main { - margin-top: 0.6rem; + + .login-top { + gap: 16px; } + .login-email, .login-phone { - height: 0.34rem; - width: 100%; + font-size: 14px; + width: 50%; text-align: center; - color: #666B80; - cursor: pointer; - padding-bottom: 0.13rem; } + + .login-form { + margin-top: 20px; + } + + .form-main { + margin-top: 16px; + } + + .login-btn { + height: 44px; + font-size: 15px !important; + } + + .code-btn { + font-size: 13px; + height: 44px; + } + + .read-text { + font-size: 12px; + } + .el-checkbox__label { - font-size: 0.26rem; - } - .read-item { - line-height: 0.3rem; - } - .read-item .check-div { - display: flex; - white-space: inherit; + font-size: 13px; } }