Skip to content

A
audit_material_manage
Commit 69996bfc authored by Andy-bubu's avatar Andy-bubu
Browse files
Options

登录设计skill同步

parent ca178639
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 109 additions and 27 deletions
src/design-system/tokens.css
View file @ 69996bfc
......@@ -153,13 +153,13 @@
var(--surface)
);
--rc-modal-radius: 1.5rem;
--rc-modal-padding: 1.5rem;
--rc-modal-padding: 1.75rem;
--rc-modal-title-size: var(--rc-text-md);
--rc-modal-title-weight: var(--rc-font-medium);
--rc-modal-title-line-height: 1.5rem;
--rc-modal-section-gap: 0.5rem;
--rc-modal-section-gap: 0.75rem;
--rc-modal-footer-gap: 0.5rem;
--rc-modal-footer-margin: 1.25rem;
--rc-modal-footer-margin: 1.5rem;
--rc-modal-backdrop-blur: 0.75rem;
--rc-modal-close-size: 1.5rem;
--rc-modal-close-inset: var(--rc-modal-padding);
......@@ -171,8 +171,8 @@
--rc-modal-width-xl: 46rem;
--rc-modal-width-2xl: 52.5rem;
--rc-modal-width-3xl: 60rem;
--rc-modal-width-4xl: 64rem;
--rc-modal-width-5xl: 70rem;
--rc-modal-width-4xl: 68rem;
--rc-modal-width-5xl: 76rem;
--rc-data-grid-action-size: 2rem;
--rc-data-grid-action-radius: 999px;
--rc-list-pagination-gap: 0.5rem;
......
src/design-system/xinyuan-portable.css
View file @ 69996bfc
......@@ -3668,7 +3668,15 @@ body {
body .login-page {
--rc-login-brand-logo-size: 2.25rem;
--rc-login-card-brand-gap: 0.875rem;
--rc-login-card-brand-margin-bottom: 2rem;
--rc-login-card-brand-title-size: 2rem;
--rc-login-panel-width: 28rem;
--rc-login-control-height: 2.5rem;
--rc-login-captcha-gap: 0.75rem;
--rc-login-captcha-image-max-height: 1.875rem;
--rc-login-submit-height: 2.875rem;
--rc-login-submit-margin-top: 0.875rem;
--rc-login-field-filled-background: #fbf1f1;
--rc-login-field-filled-background-hover: #faeaea;
--rc-login-field-autofill-background: #fbf1f1;
......@@ -3681,12 +3689,28 @@ body .login-brand img {
height: var(--rc-login-brand-logo-size) !important;
}
body .login-card-brand {
justify-content: center;
gap: var(--rc-login-card-brand-gap) !important;
margin-bottom: var(--rc-login-card-brand-margin-bottom);
text-align: center;
}
body .login-card-brand strong {
color: var(--rc-text-primary);
font-size: var(--rc-login-card-brand-title-size);
font-weight: 650;
line-height: 1.15;
letter-spacing: 0;
white-space: nowrap;
}
body .login-card [data-slot='card-header'] {
display: none !important;
}
body .login-card [data-slot='card-content'] {
padding-top: 1.75rem !important;
padding: 2.25rem !important;
}
body
......@@ -3927,24 +3951,62 @@ body
}
body .login-captcha-row {
grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
align-items: stretch;
gap: var(--rc-login-captcha-gap) !important;
width: 100%;
min-width: 0;
}
body
.login-captcha-row
:is(.login-field, .login-input, .input, [data-slot='input']) {
min-width: 0;
height: var(--rc-login-control-height) !important;
min-height: var(--rc-login-control-height) !important;
}
body .login-captcha-button {
display: inline-flex !important;
width: 100% !important;
min-width: 0 !important;
height: var(--rc-login-control-height) !important;
min-height: var(--rc-login-control-height) !important;
align-items: center !important;
justify-content: center !important;
padding: 0.25rem 0.5rem !important;
border-radius: var(--field-radius, calc(var(--radius) * 1.5)) !important;
}
body .login-captcha-button :is(.captcha-image, .captcha-image svg) {
max-height: calc(var(--rc-login-control-height) - 1rem) !important;
body .login-captcha-button > :is(span, div, [data-slot='content']) {
display: inline-flex !important;
width: 100% !important;
height: 100% !important;
align-items: center !important;
justify-content: center !important;
}
body .login-captcha-button .captcha-image {
display: inline-flex !important;
width: 100% !important;
height: 100% !important;
align-items: center !important;
justify-content: center !important;
}
body .login-captcha-button :is(.captcha-image svg, .captcha-image img) {
display: block !important;
width: auto !important;
max-width: 100% !important;
height: var(--rc-login-captcha-image-max-height) !important;
max-height: var(--rc-login-captcha-image-max-height) !important;
}
body .login-submit-button {
height: var(--rc-login-submit-height) !important;
min-height: var(--rc-login-submit-height) !important;
margin-top: var(--rc-login-submit-margin-top) !important;
border-radius: var(--rc-button-radius, 999px) !important;
}
.dark .login-page,
......
src/global.less
View file @ 69996bfc
......@@ -339,8 +339,9 @@ a {
border: 1px solid var(--rc-border-default);
background: var(--rc-bg-subtle);
color: var(--rc-text-secondary);
padding: 12px 16px;
padding: 14px 18px;
font-size: 14px;
line-height: 22px;
}
.rc-notice--info {
......@@ -444,7 +445,7 @@ a {
border-radius: var(--rc-radius-container);
border: 1px solid var(--rc-border-default);
background: var(--rc-bg-surface);
padding: 16px;
padding: 18px;
}
.rc-form-section__title {
......@@ -456,7 +457,25 @@ a {
}
.rc-form-section > div:last-child {
margin-top: 16px;
margin-top: 18px;
}
.rc-modal-check-card {
min-height: 76px;
padding: 14px 16px;
}
.rc-modal-check-card [data-slot='description'] {
margin-top: 2px;
font-size: 13px;
line-height: 18px;
}
.rc-modal-field-group {
border-radius: var(--rc-radius-container);
border: 1px solid var(--rc-border-default);
background: var(--rc-bg-surface);
padding: 16px;
}
.rc-textarea-single-surface::before,
......@@ -513,13 +532,13 @@ a {
}
.rc-material-detail-body {
margin-top: 16px;
margin-top: 18px;
}
.rc-material-detail-content {
display: grid;
min-height: 0;
gap: 14px;
gap: 18px;
grid-template-columns: 1fr;
}
......@@ -527,19 +546,19 @@ a {
display: grid;
min-width: 0;
align-items: center;
gap: 12px;
gap: 16px;
grid-template-columns: minmax(0, 1fr) auto;
border-radius: var(--rc-radius-container);
border: 1px solid var(--rc-border-default);
background: var(--rc-bg-surface);
padding: 14px 16px;
padding: 18px 20px;
}
.rc-material-detail-summary__main {
display: grid;
min-width: 0;
align-items: center;
gap: 10px;
gap: 12px;
grid-template-columns: minmax(0, 1fr) auto;
}
......@@ -551,7 +570,7 @@ a {
min-width: 0;
overflow: hidden;
color: var(--rc-text-primary);
font-size: 15px;
font-size: 16px;
font-weight: 550;
line-height: 22px;
text-overflow: ellipsis;
......@@ -563,7 +582,7 @@ a {
min-width: 0;
flex-wrap: wrap;
gap: 4px 12px;
margin-top: 4px;
margin-top: 6px;
color: var(--rc-text-muted);
font-size: 13px;
line-height: 18px;
......@@ -594,7 +613,7 @@ a {
display: grid;
min-width: 0;
align-content: start;
gap: 12px;
gap: 16px;
}
.rc-material-detail-check-card {
......
src/pages/Login.jsx
View file @ 69996bfc
......@@ -80,13 +80,13 @@ export default function LoginPage() {
return (
<main className="login-page">
<section className="login-shell">
<div className="login-brand">
<img alt="鑫元基金" src={xinyuanLogoRed} />
<strong>{appTitle}</strong>
</div>
<Card className="login-card">
<Card.Content>
<div className="login-brand login-card-brand">
<img alt="鑫元基金" src={xinyuanLogoRed} />
<strong>{appTitle}</strong>
</div>
<form className="login-form" onSubmit={handleSubmit}>
<TextField
className="login-field"
......@@ -130,9 +130,9 @@ export default function LoginPage() {
<div className="login-captcha-field grid gap-2">
<Label>验证码</Label>
<div className="login-captcha-row flex gap-3">
<div className="login-captcha-row grid gap-3">
<TextField
className="login-field min-w-0 flex-1"
className="login-field min-w-0"
data-has-value={captchaCode ? 'true' : undefined}
isDisabled={loading}
isRequired
......@@ -154,7 +154,7 @@ export default function LoginPage() {
setError('');
refreshCaptcha();
}}
className="login-captcha-button w-28 shrink-0 overflow-hidden px-2 sm:w-[9.25rem] [&_.captcha-image_svg]:h-auto [&_.captcha-image_svg]:max-w-full"
className="login-captcha-button overflow-hidden"
>
{captchaData?.image ? (
<span
......@@ -178,6 +178,7 @@ export default function LoginPage() {
<Button
fullWidth
className="login-submit-button"
isDisabled={loading || captchaLoading}
isPending={loading}
type="submit"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment