From a077bbc828b95dcadea58330ef81d5eee479770a Mon Sep 17 00:00:00 2001 From: yiqiu Date: Thu, 19 Mar 2026 18:52:50 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=99=BB=E5=BD=95=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E6=9E=81=E7=AE=80=E6=9A=97=E8=89=B2=E9=A3=8E=E6=A0=BC?= =?UTF-8?q?=20+=20=E7=99=BB=E5=BD=95=E6=B3=A8=E5=86=8C=E5=8A=A0=E8=BF=94?= =?UTF-8?q?=E5=9B=9E=E9=A6=96=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit login.css: 完全重写为 AkileCloud 风格 - 无卡片/边缘光晕/无边框深灰输入框 - 纯蓝按钮 #165DFF / 胶囊Tab / 暗色第三方登录 - 二维码区域/安全验证/语言切换暗色适配 login.php + regist.php: - 左上角新增「← 返回首页」按钮(fixed定位) - 悬停白色+微透明背景 regist.css: 补上 .back-home-link 样式 --- clientarea/hgcloud/css/login.css | 720 ++++++++++++++++++++---------- clientarea/hgcloud/css/regist.css | 32 ++ clientarea/hgcloud/login.php | 4 + clientarea/hgcloud/regist.php | 4 + 4 files changed, 525 insertions(+), 235 deletions(-) diff --git a/clientarea/hgcloud/css/login.css b/clientarea/hgcloud/css/login.css index 1156c26..6337a05 100644 --- a/clientarea/hgcloud/css/login.css +++ b/clientarea/hgcloud/css/login.css @@ -1,391 +1,641 @@ +/* ============================================ + 登录页面 — 参考 AkileCloud 极简暗色风格 + 与 regist.css 统一配色 + ============================================ */ + [v-cloak] { + display: none !important; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +#login { + min-height: 100vh; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + background: #0d1117; + background-image: + radial-gradient(ellipse 50% 50% at 0% 0%, rgba(22, 93, 255, 0.12) 0%, transparent 70%), + radial-gradient(ellipse 50% 50% at 100% 0%, rgba(22, 93, 255, 0.08) 0%, transparent 70%), + radial-gradient(ellipse 50% 50% at 100% 100%, rgba(99, 102, 241, 0.08) 0%, transparent 70%), + radial-gradient(ellipse 50% 50% at 0% 100%, rgba(99, 102, 241, 0.06) 0%, transparent 70%); +} + +/* ---- 容器 ---- */ +.login-container { + width: 100%; + max-width: 420px; + display: flex; + justify-content: center; + align-items: center; + position: relative; + padding: 40px 20px; +} + +/* 隐藏左侧装饰 */ +.container-back { display: none; } -.lang-option { + +/* 顶部按钮区 */ +.login-jump-btn { + position: fixed; + top: 24px; + right: 24px; + z-index: 20; display: flex; align-items: center; - column-gap: 5px; + gap: 12px; } -.lang-option .lang-img { - width: 30px; - height: 20px; - display: inline-block; - vertical-align: middle; + +.login-jump-btn .btn { + background: rgba(22, 93, 255, 0.1); + border: 1px solid rgba(22, 93, 255, 0.25); + color: #165DFF; + border-radius: 6px; + font-size: 13px; } -.read-text { - flex: 1; - font-size: 14px; - line-height: 19px; - padding: 0 10px; - color: #606266; - font-weight: 500; + +.login-jump-btn .btn a { + color: inherit; + text-decoration: none; } -#login { - height: 100vh; - width: 100vw; + +/* 语言切换 */ +.login-jump-btn .lang-box { display: flex; - justify-content: center; - align-items: center; + gap: 8px; } -.login-container { - width: 15.7rem; - height: 8.2rem; - display: flex; - justify-content: center; - align-items: center; - position: relative; + +.login-jump-btn .lang-box span { + color: rgba(139, 148, 158, 0.6); + cursor: pointer; + font-size: 13px; + padding: 4px 8px; + border-radius: 4px; + transition: all 0.2s; } -.container-back { - width: 15.7rem; - height: 6.8rem; - background: var(--color-primary); - border-radius: 20px; - overflow: hidden; - position: relative; - font-family: Source Han Sans CN; + +.login-jump-btn .lang-box span:hover { + color: rgba(255, 255, 255, 0.8); } -.container-back .back-text { - font-size: 0.27rem; - z-index: 10; - color: #ffffff; - margin-top: 1.39rem; - margin-left: 0.65rem; - font-weight: 400; -} -.container-back .text-welcome { - font-size: 0.74rem; - font-family: Bahnschrift; - line-height: 0.74rem; -} -.container-back .text-title { - margin-top: 5px; -} -.container-back .text-level { - font-size: 0.12rem; - margin-top: 0.81rem; -} -.back-line1, -.back-line2, -.back-line3 { - width: 0.6rem; - background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%); - z-index: 2; - position: absolute; -} -.back-line1 { - height: 5rem; - opacity: 1; - transform: rotate(45deg); - top: -1.2rem; - left: 4.15rem; -} -.back-line2 { - height: 7rem; - transform: rotate(110deg); - top: 0; - left: 5rem; -} -.back-line3 { - height: 5rem; - transform: rotate(45deg); - top: 2.3rem; - left: 1.5rem; - clip-path: polygon(0px 0.3rem, 0.64rem 0px, 100% 100%, 0 100%); + +.login-jump-btn .lang-box span.active { + color: #FFFFFF; + background: rgba(22, 93, 255, 0.15); } + +/* ---- 表单区域 — 无卡片 ---- */ .container-before { - width: 7.5rem; - height: 8rem; - background: #ffffff; - box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.1); - position: absolute; - right: 0.9rem; - border: 4px; - z-index: 10; + width: 100%; + background: transparent; + box-shadow: none; + border: none; + position: static; + overflow: visible; } + .login { - padding-top: 0.8rem; - padding-left: 1.24rem; - padding-right: 1.05rem; + padding: 0; font-size: 14px; - font-family: PingFang SC; - font-weight: 400; - line-height: 14px; + font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif; + line-height: 1.5; position: relative; } -.login .lang-box { - position: absolute; - right: 0.1rem; - top: 0.1rem; -} + +/* 二维码切换按钮 */ .login .qr-code { position: absolute; - right: 1.05rem; - top: 0.8rem; + right: 0; + top: 0; cursor: pointer; - width: 0.48rem; - height: 0.48rem; + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 8px; + transition: background 0.2s; } + +.login .qr-code:hover { + background: rgba(255, 255, 255, 0.05); +} + +.login .qr-code svg, .login .qr-code .login-icon { - fill: var(--color-primary); - width: 100%; - height: 100%; + width: 28px; + height: 28px; } + +/* 二维码区域 */ .login .qr-box { display: flex; flex-direction: column; align-items: center; justify-content: center; - width: 100%; - height: 100%; + padding: 20px 0; } + .login .qr-box .qr-box-img { width: 200px; height: 200px; position: relative; + border-radius: 12px; + overflow: hidden; + background: #1c2028; } + .login .qr-box .qr-box-img img { cursor: pointer; width: 100%; height: 100%; } + .login .qr-box .qr-box-img .qr-expire-time { position: absolute; - top: 0; - left: 0; + inset: 0; z-index: 2; - width: 100%; - height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; - background: rgba(0, 0, 0, 0.5); - color: #ffffff; + background: rgba(0, 0, 0, 0.7); + color: #FFFFFF; font-size: 14px; - font-weight: 500; - line-height: 14px; cursor: pointer; } + .login .qr-box .qr-box-img .qr-expire-time .el-icon-refresh-right { font-size: 30px; } + .login .qr-box .qr-box-tips { - margin-top: 10px; - font-size: 14px; - color: #666; + margin-top: 14px; + font-size: 13px; + color: rgba(139, 148, 158, 0.6); } + +/* 微信选择账户 */ .login .qr-box-select-account { - box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; - gap: 0.2rem; + gap: 16px; width: 100%; - height: 100%; - padding: 0.2rem; - border-radius: 10px; - border: 1px solid #e5e5e5; + padding: 20px; + border-radius: 12px; + border: 1px solid rgba(255, 255, 255, 0.06); + background: rgba(28, 32, 40, 0.5); } + .login .qr-box-select-account .qr-box-back { width: 100%; display: flex; align-items: center; - justify-content: flex-start; gap: 5px; - font-size: 16px; - color: var(--color-primary); + font-size: 14px; + color: #165DFF; cursor: pointer; } + .login .qr-box-select-account .qr-box-select-account-title { font-size: 14px; - color: #666; + color: rgba(139, 148, 158, 0.7); } + +/* ---- 标题 ---- */ .login-text { display: flex; flex-direction: column; + align-items: center; + text-align: center; + margin-bottom: 32px; } + .login-text-title { - font-size: 0.32rem; - color: #1e2736; - line-height: 0.32rem; + font-size: 28px; + color: #FFFFFF; + line-height: 1.2; + font-weight: 700; + letter-spacing: 1px; } + .login-text-regist { - font-weight: Regular; - margin-top: 0.08rem; - color: #1e2736; + margin-top: 10px; + color: rgba(139, 148, 158, 0.8); + font-size: 14px; } + .login-text-regist a { - color: var(--color-primary); + color: #165DFF; cursor: pointer; + text-decoration: none; + transition: color 0.2s; } + +.login-text-regist a:hover { + color: #4080FF; +} + +/* ---- Tab 切换 ---- */ .login-form { - margin-top: 0.68rem; + margin-top: 0; } + .login-top { display: flex; - flex-direction: row; + gap: 0; + margin-bottom: 20px; + background: rgba(255, 255, 255, 0.04); + border-radius: 8px; + padding: 4px; } + .login-email, .login-phone { - height: 0.34rem; - color: #666b80; + flex: 1; + padding: 10px 0; + color: rgba(139, 148, 158, 0.7); cursor: pointer; + font-size: 14px; + text-align: center; + transition: all 0.25s ease; + border: none; + border-radius: 6px; + border-bottom: none; + margin-bottom: 0; } + +.login-email:hover, +.login-phone:hover { + color: rgba(255, 255, 255, 0.8); +} + .active { - color: var(--color-primary); - border-bottom: 2px solid var(--color-primary); -} -.login-email { - margin-right: 0.4rem; + color: #FFFFFF !important; + background: rgba(22, 93, 255, 0.15) !important; + border-bottom: none !important; } + +/* ---- 输入框 ---- */ .form-main { - margin-top: 0.3rem; + margin-top: 0; } + .form-item { - margin-top: 0.3rem; + margin-top: 14px; } + +.form-item:first-child { + margin-top: 0; +} + +.form-main .el-input__inner, +.form-main .el-textarea__inner, +.form-main .el-select .el-input__inner { + background: #1c2028 !important; + border: 1px solid transparent !important; + color: #E6E8EB !important; + border-radius: 8px !important; + height: 46px !important; + line-height: 46px !important; + font-size: 14px !important; + transition: all 0.2s ease; +} + +.form-main .el-input__inner:hover { + border-color: rgba(22, 93, 255, 0.2) !important; +} + +.form-main .el-input__inner:focus, +.form-main .el-textarea__inner:focus { + border-color: #165DFF !important; + box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.12) !important; +} + +.form-main .el-input__inner::placeholder { + color: rgba(139, 148, 158, 0.5) !important; +} + .input-with-select .el-input-group__prepend { - background: #ffffff; - width: 60px; + background: #1c2028 !important; + border: 1px solid transparent !important; + border-right: 1px solid rgba(255,255,255,0.06) !important; + border-radius: 8px 0 0 8px !important; + color: #E6E8EB !important; } + +/* 验证码 */ .code-item { display: flex; - flex-direction: row; + gap: 10px; } + .code-btn { - margin-left: 0.1rem; - color: #ffffff; + background: #1c2028 !important; + border: none !important; + color: #165DFF !important; + border-radius: 8px !important; + white-space: nowrap; + padding: 0 16px !important; + font-size: 13px; + font-weight: 500; } + +.code-btn:hover { + background: rgba(22, 93, 255, 0.12) !important; +} + +/* ---- 记住密码 / 忘记密码 ---- */ .rember-item { - margin-top: 0.2rem; + margin-top: 14px; display: flex; align-items: center; justify-content: space-between; line-height: 1.5; } + .rember-item a { - color: var(--color-primary); + color: #165DFF; cursor: pointer; + text-decoration: none; + font-size: 13px; } + +.rember-item a:hover { + color: #4080FF; +} + +.rember-item .el-checkbox__inner { + background: #1c2028 !important; + border-color: rgba(255, 255, 255, 0.1) !important; +} + +.rember-item .el-checkbox__input.is-checked .el-checkbox__inner { + background: #165DFF !important; + border-color: #165DFF !important; +} + +.read-text { + flex: 1; + font-size: 13px; + line-height: 1.6; + padding: 0 6px; + color: rgba(139, 148, 158, 0.55); + font-weight: 400; +} + +.read-text a { + color: #165DFF; + cursor: pointer; + text-decoration: none; +} + +/* 错误提示 */ +.read-item { + margin-top: 12px; +} + +.read-item .el-alert--error { + background: rgba(239, 68, 68, 0.08) !important; + border: 1px solid rgba(239, 68, 68, 0.15); + border-radius: 8px; +} + +.read-item .el-alert--error .el-alert__title { + color: #F87171 !important; + font-size: 13px; +} + +/* ---- 登录按钮 ---- */ .login-btn { width: 100%; height: 46px; + background: #165DFF !important; + border: none !important; + border-radius: 8px !important; + font-size: 15px !important; + font-weight: 600; + color: #FFFFFF !important; + letter-spacing: 1px; + transition: all 0.2s ease; } + +.login-btn:hover { + background: #4080FF !important; +} + +.login-btn:active { + background: #0E42D2 !important; +} + +/* 切换登录方式按钮 */ .pass-btn { width: 100%; - height: 46px; + height: 42px; margin-left: 0 !important; - margin-top: 0.15rem; + margin-top: 10px; + background: transparent !important; + border: 1px solid rgba(255, 255, 255, 0.08) !important; + border-radius: 8px !important; + color: rgba(139, 148, 158, 0.8) !important; + font-size: 14px !important; + transition: all 0.2s; } -.read-item { - margin-top: 0.2rem; -} -.read-item a { - color: var(--color-primary); - cursor: pointer; + +.pass-btn:hover { + color: #FFFFFF !important; + border-color: rgba(22, 93, 255, 0.3) !important; } + +/* ---- 第三方登录 ---- */ .line-item { - margin-top: 0.4rem; + margin-top: 24px; } -.line-item text { - font-size: 16px; - color: #1e2736; + +.line-item .el-divider__text { + background: #0d1117 !important; + color: rgba(139, 148, 158, 0.4) !important; + font-size: 13px; } -.type-btn { - width: 100%; - height: 46px; - font-size: 0.16rem; + +.line-item .el-divider { + border-color: rgba(255, 255, 255, 0.06) !important; } + .login-type { display: flex; align-items: center; - column-gap: 0.15rem; + justify-content: center; + gap: 16px; flex-wrap: wrap; } -.a-text { - color: var(--color-primary); - cursor: pointer; - margin-right: 5px; -} + .oauth-item { display: flex; align-items: center; + justify-content: center; padding: 10px; cursor: pointer; + border-radius: 10px; + background: #1c2028; + transition: all 0.2s; } -.oauth-item:hover .oauth-img { - filter: brightness(0.8); + +.oauth-item:hover { + background: rgba(22, 93, 255, 0.1); + transform: translateY(-1px); } + .oauth-img { - width: 40px; - height: 40px; + width: 32px; + height: 32px; } + +/* 语言选项 */ +.lang-option { + display: flex; + align-items: center; + gap: 5px; +} + +.lang-option .lang-img { + width: 24px; + height: 16px; +} + +/* Element UI 下拉暗色 */ +.el-select-dropdown { + background: #1c2028 !important; + border: 1px solid rgba(255,255,255,0.06) !important; +} + +.el-select-dropdown__item { + color: #E6E8EB !important; +} + +.el-select-dropdown__item.hover, +.el-select-dropdown__item:hover { + background: rgba(22, 93, 255, 0.1) !important; +} + +/* 安全验证对话框暗色 */ +.el-dialog { + background: #1c2028 !important; + border: 1px solid rgba(255, 255, 255, 0.06); + border-radius: 12px; +} + +.el-dialog__title { + color: #E6E8EB !important; +} + +.el-dialog__headerbtn .el-dialog__close { + color: rgba(139, 148, 158, 0.6) !important; +} + +/* ---- 返回首页按钮(公共) ---- */ +.back-home-link { + position: fixed; + top: 24px; + left: 24px; + z-index: 20; + display: flex; + align-items: center; + gap: 6px; + color: rgba(139, 148, 158, 0.6); + text-decoration: none; + font-size: 13px; + padding: 6px 12px; + border-radius: 6px; + transition: all 0.2s; +} + +.back-home-link:hover { + color: #FFFFFF; + background: rgba(255, 255, 255, 0.05); +} + +.back-home-link svg { + width: 16px; + height: 16px; +} + +/* ---- 移动端 ---- */ @media screen and (max-width: 750px) { + #login { + background-image: + radial-gradient(ellipse 80% 40% at 50% 0%, rgba(22, 93, 255, 0.12) 0%, transparent 70%), + radial-gradient(ellipse 80% 40% at 50% 100%, rgba(99, 102, 241, 0.08) 0%, transparent 70%); + } + .login-container { - height: calc(100vh - 1.2rem); - width: 100vw; - background: #f2f2fe; - padding: 0.6rem 0; - } - .container-back { - display: none; - } - .container-before { - width: 100%; - height: 100%; - margin: 0rem 0.3rem; - position: unset; - z-index: 0; - } - .login { - padding-top: 1.17rem; - padding-left: 0.3rem; - padding-right: 0.3rem; - font-size: 0.26rem; - line-height: 0.3rem; - } - .login .qr-code { - right: 0.3rem; - top: 1.17rem; - cursor: pointer; + padding: 80px 24px 40px; + max-width: 100%; + align-items: flex-start; } + .login-text-title { - font-size: 0.4rem; + font-size: 22px; } + .login-text-regist { - margin-top: 0.16rem; - font-size: 0.28rem; + font-size: 13px; } - .login-form { - margin-top: 1.21rem; + + .login-text { + margin-bottom: 24px; } - .form-main { - margin-top: 0.6rem; - } - .login-email, - .login-phone { - height: 0.34rem; - width: 100%; - text-align: center; - color: #666b80; - cursor: pointer; - padding-bottom: 0.13rem; - } - .el-checkbox__label { - font-size: 0.22rem; - } - .read-item { - line-height: 0.3rem; + + .form-main .el-input__inner { + height: 44px !important; + line-height: 44px !important; } + .login-btn { - font-size: 0.34rem; - height: 0.8rem; + height: 44px; } - .type-btn { - border: none; - color: var(--color-primary); - font-size: 0.34rem; + + .login-jump-btn { + top: 16px; + right: 16px; + } + + .back-home-link { + top: 16px; + left: 16px; + } + + .login .qr-code { + width: 32px; + height: 32px; + } + + .login .qr-code svg, + .login .qr-code .login-icon { + width: 24px; + height: 24px; + } + + .read-text { + font-size: 12px; + } + + .oauth-item { + padding: 8px; + } + + .oauth-img { + width: 28px; + height: 28px; } } diff --git a/clientarea/hgcloud/css/regist.css b/clientarea/hgcloud/css/regist.css index 20b1f3a..c4178e0 100644 --- a/clientarea/hgcloud/css/regist.css +++ b/clientarea/hgcloud/css/regist.css @@ -401,7 +401,39 @@ right: 16px; } + .back-home-link { + top: 16px; + left: 16px; + } + .read-text { font-size: 12px; } } + +/* ---- 返回首页按钮 ---- */ +.back-home-link { + position: fixed; + top: 24px; + left: 24px; + z-index: 20; + display: flex; + align-items: center; + gap: 6px; + color: rgba(139, 148, 158, 0.6); + text-decoration: none; + font-size: 13px; + padding: 6px 12px; + border-radius: 6px; + transition: all 0.2s; +} + +.back-home-link:hover { + color: #FFFFFF; + background: rgba(255, 255, 255, 0.05); +} + +.back-home-link svg { + width: 16px; + height: 16px; +} diff --git a/clientarea/hgcloud/login.php b/clientarea/hgcloud/login.php index 949879f..a0667e4 100644 --- a/clientarea/hgcloud/login.php +++ b/clientarea/hgcloud/login.php @@ -17,6 +17,10 @@
+ + + 返回首页 +