@liujitcn/kratos-taro-app-core 0.0.78 → 0.0.80

package/src/views/pages/login/login.scss

@@ -1,47 +1,67 @@
+page {
+  background-color: #eef3f8;
+}
+
 .login-page {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   min-height: 100vh;
-  padding: 48px 40px 56px;
-  background: linear-gradient(180deg, #f4fbf8 0%, #fff 45%, #fff 100%);
+  padding: 48px 40px calc(56px + env(safe-area-inset-bottom));
+  background: var(--kratos-bg-gradient);
   box-sizing: border-box;
 }
 
+/* 自绘头部：左返回（复用 k-ic）、右上角语言（复用 k-lg-lang），替代原生导航栏 */
+.login-header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 44PX;
+  padding: env(safe-area-inset-top) 28px 0;
+  box-sizing: content-box;
+}
+
+/* #ifdef weapp */
+.login-header {
+  /* 右上角避让小程序胶囊 */
+  padding-right: 220px;
+}
+/* #endif */
+
+/* k-ic 已提供方形图标按钮视觉，这里只补字号以容纳返回符号 */
+.login-back {
+  font-size: 36px;
+  line-height: 1;
+}
+
 .login-locale {
-  position: absolute;
-  top: calc(24px + env(safe-area-inset-top));
-  right: 28px;
-  z-index: 2;
+  max-width: calc(100% - 120px);
 }
 
+/* k-lg-lang 已提供视觉样式，这里只补多语言文案的截断处理 */
 .login-locale__value {
-  padding: 12px 16px;
-  color: #16806d;
-  font-size: 24px;
+  max-width: 240px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .login-hero {
-  margin-bottom: 40px;
+  margin-bottom: 44px;
   text-align: center;
 }
 
-.login-logo-shell {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 180px;
-  height: 180px;
-  margin-bottom: 24px;
-  border-radius: 44px;
-  background: rgba(255, 255, 255, 0.92);
-  box-shadow: 0 18px 44px rgba(40, 187, 156, 0.12);
-}
-
+/* k-lg-logo 已提供渐变底板，这里只约束内部实际 Logo 图片尺寸 */
 .login-logo {
-  width: 120px;
-  height: 120px;
+  width: 100px;
+  height: 100px;
 }
 
 .login-hero-copy {
@@ -49,23 +69,9 @@
   flex-direction: column;
 }
 
-.login-title {
-  color: #1f2937;
-  font-size: 44px;
-  font-weight: 600;
-}
-
-.login-subtitle {
-  margin-top: 12px;
-  color: #6b7280;
-  font-size: 26px;
-}
-
+/* k-glass/k-glass--lit 已提供卡片底色与描边，这里只补内部留白 */
 .login-panel {
-  padding: 36px 28px 30px;
-  border-radius: 24px;
-  background: rgba(255, 255, 255, 0.96);
-  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
+  padding: 36px 30px 30px;
 }
 
 .login-form {
@@ -75,54 +81,36 @@
 
 .login-bind-tip {
   margin-bottom: 20px;
-  color: #6b7280;
+  color: var(--kratos-color-text-muted);
   font-size: 24px;
   line-height: 1.5;
   text-align: center;
 }
 
-.login-input {
+/* k-lg-field__input 已提供输入框视觉，这里只修复 Taro H5 端 weui-input 内层尺寸 */
+.k-lg-field__input .weui-input {
   width: 100%;
-  height: 88px;
-  padding: 0 30px;
-  margin-bottom: 20px;
-  border: 1PX solid #e5e7eb;
-  border-radius: 24px;
+  height: 100%;
+  padding: 0;
   box-sizing: border-box;
-  color: #1f2937;
-  font-size: 28px;
-  background: #f9fbfa;
-
-  .weui-input {
-    width: 100%;
-    height: 100%;
-    padding: 0;
-    box-sizing: border-box;
-    color: inherit;
-    font: inherit;
-  }
+  color: inherit;
+  font: inherit;
 }
 
-.login-button {
+/* 密码/验证码行内尾随的小按钮： k-lg-field 没有对应词汇，保留页面局部样式 */
+.password-toggle {
   display: flex;
+  flex: 0 0 52px;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  height: 88px;
-  margin-top: 12px;
-  border-radius: 24px;
-  color: #fff;
-  font-size: 30px;
-  font-weight: 500;
-  box-shadow: 0 18px 36px rgba(40, 187, 156, 0.24);
-
-  &::after {
-    border: 0;
-  }
+  width: 52px;
+  height: 52px;
+  margin-left: 12px;
 }
 
-.login-button-primary {
-  background: linear-gradient(135deg, #34c8aa 0%, #28bb9c 100%);
+.password-toggle-icon {
+  width: 24px;
+  height: 24px;
 }
 
 .login-phone-icon {
@@ -130,44 +118,16 @@
   font-size: 40px;
 }
 
-.captcha-row {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 88px;
-  padding: 0 12px 0 30px;
-  margin-bottom: 20px;
-  border: 1PX solid #e5e7eb;
-  border-radius: 24px;
-  box-sizing: border-box;
-  background: #f9fbfa;
-}
-
-.captcha-input {
-  flex: 1;
-  height: 100%;
-  padding: 0;
-  margin-bottom: 0;
-  border: 0;
-  background: transparent;
-}
-
 .captcha-divider {
+  flex-shrink: 0;
   width: 1px;
   height: 44px;
-  background: #e7ebf0;
+  background: var(--kratos-color-border);
 }
 
+/* k-lg-cap 已提供验证码色块视觉，这里只补行内间距 */
 .captcha-trigger {
-  display: flex;
-  flex: 0 0 170px;
-  align-items: center;
-  justify-content: center;
-  height: 72px;
   margin-left: 14px;
-  border-radius: 18px;
-  box-sizing: border-box;
-  background: #fff;
 }
 
 .captcha-image {
@@ -185,9 +145,10 @@
   justify-content: center;
   padding: 24px;
   box-sizing: border-box;
-  background: rgba(15, 23, 42, 0.38);
+  background: var(--kratos-color-mask);
 }
 
+/* 行为验证码弹层保留白底：第三方验证码图片为浅色素材。 */
 .login-behavior-panel {
   position: relative;
   width: auto;
@@ -252,16 +213,16 @@
     height: 56px;
     margin-top: -28px;
     border-radius: 999px;
-    color: #fff;
-    fill: #fff;
-    background: linear-gradient(135deg, #36d6b4 0%, #20aa8f 100%);
-    box-shadow: 0 14px 28px rgba(40, 187, 156, 0.28);
+    color: var(--kratos-color-on-primary);
+    fill: var(--kratos-color-on-primary);
+    background: linear-gradient(135deg, var(--kratos-color-primary-deep) 0%, var(--kratos-color-primary) 100%);
+    box-shadow: 0 14px 28px rgba(40, 240, 212, 0.28);
   }
 }
 
 .login-tips {
   margin-top: 26px;
-  color: #999;
+  color: var(--kratos-color-text-muted);
   font-size: 22px;
   line-height: 1.6;
 }
@@ -274,7 +235,7 @@
   align-items: center;
   justify-content: center;
   padding: 40px;
-  background: rgba(15, 23, 42, 0.46);
+  background: var(--kratos-color-mask);
 }
 
 .mfa-panel {
@@ -283,14 +244,15 @@
   width: 100%;
   max-width: 520px;
   padding: 32px;
+  border: 1PX solid var(--kratos-color-border-accent);
   border-radius: 24px;
-  background: #fff;
+  background: var(--kratos-color-surface-solid);
   box-sizing: border-box;
 }
 
 .mfa-title {
   margin-bottom: 20px;
-  color: #172a35;
+  color: var(--kratos-color-text);
   font-size: 32px;
   font-weight: 700;
 }
@@ -300,56 +262,61 @@
   align-items: center;
   gap: 10px;
   margin: 4px 0 20px;
-  color: #53636d;
+  color: var(--kratos-color-text-muted);
   font-size: 24px;
   line-height: 1.4;
 }
 
-.login-agreement {
+/* MFA 弹窗未纳入本次登录页改版词汇，沿用原有独立按钮/输入框视觉，仅改为按面板作用域限定 */
+.mfa-panel .login-input {
+  width: 100%;
+  height: 96px;
+  margin-bottom: 20px;
+  padding: 0 30px;
+  border: 1PX solid var(--kratos-color-border);
+  border-radius: 20px;
+  box-sizing: border-box;
+  color: var(--kratos-color-text);
+  font-size: 28px;
+  background: var(--kratos-color-surface-2);
+}
+
+.mfa-panel .login-button {
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
   justify-content: center;
   width: 100%;
-  max-width: 100%;
-  min-width: 0;
-  gap: 6px;
-  box-sizing: border-box;
-}
+  height: 96px;
+  margin-top: 12px;
+  border-radius: 20px;
+  color: var(--kratos-color-on-primary);
+  font-size: 30px;
+  font-weight: 800;
+  box-shadow: 0 0 40px rgba(40, 240, 212, 0.35);
 
-.login-agree-icon {
-  flex: 0 0 auto;
-  width: 26px;
-  height: 26px;
-  margin-right: 2px;
-  border: 2px solid #d1d5db;
-  border-radius: 50%;
-  box-sizing: border-box;
-  background-color: #fff;
+  &::after {
+    border: 0;
+  }
 }
 
-.login-agree-icon.checked {
-  border-color: #28bb9c;
-  background-color: #28bb9c;
-  box-shadow: inset 0 0 0 6px #fff;
+.mfa-panel .login-button-primary {
+  background: linear-gradient(135deg, var(--kratos-color-primary-deep) 0%, var(--kratos-color-primary) 100%);
 }
 
-.login-agree-link {
+.login-agreement {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
   min-width: 0;
-  color: #28bb9c;
-  overflow-wrap: anywhere;
 }
 
+.login-agree-link,
 .login-agree-desc,
 .login-agree-separator {
   min-width: 0;
   overflow-wrap: anywhere;
 }
 
-.login-agree-desc {
-  color: #9ca3af;
-}
-
 .login-tips--shake {
   animation: login-shake 0.5s both;
 }