kangwj
/
unis_crm
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改登录页面

main
kangwenjing 2026-04-03 13:43:47 +08:00
parent 67c41f8e88
commit eda76e84c0
3 changed files with 206 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
.idea/workspace.xml
View File

@ -4,23 +4,7 @@
<option name="autoReloadType" value="SELECTIVE" /> <option name="autoReloadType" value="SELECTIVE" />
</component> </component>
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="4c558d98-824e-4a48-ba48-bd2e6172f9f4" name="更改" comment="修改定位信息 0323"> <list default="true" id="4c558d98-824e-4a48-ba48-bd2e6172f9f4" name="更改" comment="修改定位信息 0323" />
<change beforePath="$PROJECT_DIR$/backend/src/main/java/com/unis/crm/dto/expansion/ChannelExpansionItemDTO.java" beforeDir="false" afterPath="$PROJECT_DIR$/backend/src/main/java/com/unis/crm/dto/expansion/ChannelExpansionItemDTO.java" afterDir="false" />
<change beforePath="$PROJECT_DIR$/backend/src/main/java/com/unis/crm/dto/expansion/SalesExpansionItemDTO.java" beforeDir="false" afterPath="$PROJECT_DIR$/backend/src/main/java/com/unis/crm/dto/expansion/SalesExpansionItemDTO.java" afterDir="false" />
<change beforePath="$PROJECT_DIR$/backend/src/main/java/com/unis/crm/dto/opportunity/OpportunityItemDTO.java" beforeDir="false" afterPath="$PROJECT_DIR$/backend/src/main/java/com/unis/crm/dto/opportunity/OpportunityItemDTO.java" afterDir="false" />
<change beforePath="$PROJECT_DIR$/backend/src/main/java/com/unis/crm/mapper/ProfileMapper.java" beforeDir="false" afterPath="$PROJECT_DIR$/backend/src/main/java/com/unis/crm/mapper/ProfileMapper.java" afterDir="false" />
<change beforePath="$PROJECT_DIR$/backend/src/main/java/com/unis/crm/service/impl/ExpansionServiceImpl.java" beforeDir="false" afterPath="$PROJECT_DIR$/backend/src/main/java/com/unis/crm/service/impl/ExpansionServiceImpl.java" afterDir="false" />
<change beforePath="$PROJECT_DIR$/backend/src/main/java/com/unis/crm/service/impl/OpportunityServiceImpl.java" beforeDir="false" afterPath="$PROJECT_DIR$/backend/src/main/java/com/unis/crm/service/impl/OpportunityServiceImpl.java" afterDir="false" />
<change beforePath="$PROJECT_DIR$/backend/src/main/java/com/unis/crm/service/impl/WorkServiceImpl.java" beforeDir="false" afterPath="$PROJECT_DIR$/backend/src/main/java/com/unis/crm/service/impl/WorkServiceImpl.java" afterDir="false" />
<change beforePath="$PROJECT_DIR$/backend/src/main/resources/mapper/expansion/ExpansionMapper.xml" beforeDir="false" afterPath="$PROJECT_DIR$/backend/src/main/resources/mapper/expansion/ExpansionMapper.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/backend/src/main/resources/mapper/opportunity/OpportunityMapper.xml" beforeDir="false" afterPath="$PROJECT_DIR$/backend/src/main/resources/mapper/opportunity/OpportunityMapper.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/backend/src/main/resources/mapper/profile/ProfileMapper.xml" beforeDir="false" afterPath="$PROJECT_DIR$/backend/src/main/resources/mapper/profile/ProfileMapper.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/backend/src/main/resources/mapper/work/WorkMapper.xml" beforeDir="false" afterPath="$PROJECT_DIR$/backend/src/main/resources/mapper/work/WorkMapper.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/lib/auth.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/lib/auth.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/pages/Expansion.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/pages/Expansion.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/pages/Opportunities.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/pages/Opportunities.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/pages/Work.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/pages/Work.tsx" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" /> <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
@ -99,6 +83,7 @@
<workItem from="1774574410059" duration="200000" /> <workItem from="1774574410059" duration="200000" />
<workItem from="1774576185724" duration="1651000" /> <workItem from="1774576185724" duration="1651000" />
<workItem from="1774763863609" duration="16084000" /> <workItem from="1774763863609" duration="16084000" />
<workItem from="1775116718799" duration="3143000" />
</task> </task>
<task id="LOCAL-00001" summary="修改定位信息 0323"> <task id="LOCAL-00001" summary="修改定位信息 0323">
<option name="closed" value="true" /> <option name="closed" value="true" />

15
frontend/src/pages/Login.tsx
View File

@ -265,8 +265,23 @@ export default function LoginPage() {
</div> </div>
<div className="login-panel-formWrap"> <div className="login-panel-formWrap">
<div className="login-mobile-brand">
<div className="login-brand-lockup">
<div className="login-brand-mark">
<img src="/crm-favicon.svg" alt={appName} />
</div>
<div>
<p className="login-brand-kicker">智慧销售协同平台</p>
<h1>{appName}</h1>
</div>
</div>
<p className="login-mobile-description">{systemDescription}</p>
</div>
<div className="login-panel-header"> <div className="login-panel-header">
<p className="login-panel-eyebrow">欢迎回来</p> <p className="login-panel-eyebrow">欢迎回来</p>
<h3>账号登录</h3>
<p>输入账号信息后进入 CRM 工作台，继续处理拓展、商机与日报。</p>
</div> </div>
<form className="login-form" onSubmit={handleSubmit}> <form className="login-form" onSubmit={handleSubmit}>

272
frontend/src/pages/login.css
View File

@ -1,25 +1,35 @@
.login-page-shell { .login-page-shell {
--login-ink: #0f172a;
--login-body: #334155;
--login-muted: #64748b;
--login-line: rgba(148, 163, 184, 0.28);
--login-surface: rgba(255, 255, 255, 0.82);
--login-surface-strong: rgba(255, 255, 255, 0.94);
--login-accent: #7c3aed;
--login-accent-strong: #4338ca;
--login-accent-soft: rgba(124, 58, 237, 0.14);
--login-shadow: 0 28px 80px rgba(15, 23, 42, 0.14);
position: relative; position: relative;
min-height: 100vh; min-height: 100vh;
min-height: 100dvh; min-height: 100dvh;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
background: background:
radial-gradient(circle at top left, rgba(139, 92, 246, 0.12), transparent 34%), radial-gradient(circle at top left, rgba(167, 139, 250, 0.2), transparent 34%),
radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.08), transparent 30%), radial-gradient(circle at bottom right, rgba(96, 165, 250, 0.14), transparent 32%),
linear-gradient(180deg, #f8fafc 0%, #eef2ff 52%, #f8fafc 100%); linear-gradient(160deg, #fbfaff 0%, #f1efff 42%, #f7f8fc 100%);
background-size: cover; background-size: cover;
background-position: center; background-position: center;
color: #334155; color: var(--login-body);
} }
.login-page-backdrop { .login-page-backdrop {
position: absolute; position: absolute;
inset: 0; inset: 0;
background: background:
radial-gradient(circle at 20% 18%, rgba(196, 181, 253, 0.5), transparent 24%), radial-gradient(circle at 18% 16%, rgba(196, 181, 253, 0.5), transparent 24%),
radial-gradient(circle at 85% 80%, rgba(191, 219, 254, 0.42), transparent 22%), radial-gradient(circle at 82% 84%, rgba(191, 219, 254, 0.48), transparent 22%),
linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.4)); linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.52));
} }
.login-page-grid { .login-page-grid {
@ -51,12 +61,12 @@
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
border-radius: 22px; border-radius: 22px;
background: linear-gradient(135deg, #ede9fe, #ddd6fe); background: linear-gradient(145deg, rgba(237, 233, 254, 0.98), rgba(224, 231, 255, 0.88));
border: 1px solid rgba(139, 92, 246, 0.12); border: 1px solid rgba(124, 58, 237, 0.12);
box-shadow: 0 18px 40px rgba(139, 92, 246, 0.12); box-shadow: 0 18px 40px rgba(124, 58, 237, 0.14);
font-size: 1.75rem; font-size: 1.75rem;
font-weight: 700; font-weight: 700;
color: #7c3aed; color: var(--login-accent);
} }
.login-brand-mark img { .login-brand-mark img {
@ -70,7 +80,7 @@
font-size: 0.78rem; font-size: 0.78rem;
letter-spacing: 0.24em; letter-spacing: 0.24em;
text-transform: uppercase; text-transform: uppercase;
color: #8b5cf6; color: var(--login-accent);
} }
.login-brand-lockup h1 { .login-brand-lockup h1 {
@ -79,7 +89,7 @@
font-weight: 700; font-weight: 700;
line-height: 1.08; line-height: 1.08;
white-space: nowrap; white-space: nowrap;
color: #0f172a; color: var(--login-ink);
} }
.login-panel { .login-panel {
@ -93,10 +103,10 @@
max-width: 980px; max-width: 980px;
padding: 18px; padding: 18px;
border-radius: 32px; border-radius: 32px;
background: rgba(255, 255, 255, 0.78); background: var(--login-surface);
color: #0f172a; color: var(--login-ink);
border: 1px solid rgba(226, 232, 240, 0.92); border: 1px solid rgba(255, 255, 255, 0.68);
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08); box-shadow: var(--login-shadow);
backdrop-filter: blur(24px); backdrop-filter: blur(24px);
} }
@ -116,9 +126,9 @@
padding: 36px; padding: 36px;
border-radius: 28px; border-radius: 28px;
background: background:
radial-gradient(circle at top left, rgba(139, 92, 246, 0.14), transparent 34%), radial-gradient(circle at top left, rgba(124, 58, 237, 0.16), transparent 34%),
linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.86)); linear-gradient(155deg, rgba(255, 255, 255, 0.96), rgba(243, 244, 255, 0.92));
border: 1px solid rgba(226, 232, 240, 0.84); border: 1px solid rgba(226, 232, 240, 0.76);
} }
.login-panel-formWrap { .login-panel-formWrap {
@ -127,8 +137,28 @@
justify-content: center; justify-content: center;
padding: 34px 32px; padding: 34px 32px;
border-radius: 28px; border-radius: 28px;
background: rgba(255, 255, 255, 0.94); background:
border: 1px solid rgba(226, 232, 240, 0.82); linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
border: 1px solid rgba(226, 232, 240, 0.8);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
.login-mobile-brand {
display: none;
margin-bottom: 24px;
padding: 18px 18px 16px;
border-radius: 24px;
background:
radial-gradient(circle at top right, rgba(191, 219, 254, 0.22), transparent 30%),
linear-gradient(145deg, rgba(244, 241, 255, 0.96), rgba(255, 255, 255, 0.98));
border: 1px solid rgba(203, 213, 225, 0.64);
}
.login-mobile-description {
margin: 14px 0 0;
font-size: 0.95rem;
line-height: 1.7;
color: var(--login-muted);
} }
.login-panel-header { .login-panel-header {
@ -145,20 +175,25 @@
.login-panel-header p { .login-panel-header p {
margin: 0; margin: 0;
color: #475569; color: var(--login-muted);
line-height: 1.7; line-height: 1.72;
} }
.login-panel-eyebrow { .login-panel-eyebrow {
color: #7c3aed !important; color: var(--login-accent) !important;
font-size: clamp(1.4rem, 1.5vw, 1.75rem); font-size: 1.18rem;
font-weight: 700; font-weight: 700;
line-height: 1.2; line-height: 1.2;
letter-spacing: 0.04em; letter-spacing: 0.12em;
text-transform: uppercase; text-transform: uppercase;
text-align: left; text-align: left;
} }
.login-panel-header > p:not(.login-panel-eyebrow),
.login-panel-header h3 {
display: none;
}
.login-form { .login-form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -172,27 +207,34 @@
} }
.login-field span { .login-field span {
font-size: 0.94rem; font-size: 0.92rem;
font-weight: 600; font-weight: 700;
color: #0f172a; letter-spacing: 0.01em;
color: var(--login-ink);
} }
.login-field input { .login-field input {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
border: 1px solid rgba(148, 163, 184, 0.45); border: 1px solid var(--login-line);
border-radius: 16px; border-radius: 18px;
background: rgba(255, 255, 255, 0.96); background: rgba(248, 250, 252, 0.94);
padding: 14px 16px; padding: 15px 16px;
font-size: 1rem; font-size: 1rem;
color: #0f172a; color: var(--login-ink);
outline: none; outline: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}
.login-field input::placeholder {
color: #94a3b8;
} }
.login-field input:focus { .login-field input:focus {
border-color: rgba(124, 58, 237, 0.48); border-color: rgba(124, 58, 237, 0.5);
box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.12); background: rgba(255, 255, 255, 0.98);
box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
transform: translateY(-1px); transform: translateY(-1px);
} }
@ -207,9 +249,9 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
border: 1px solid rgba(148, 163, 184, 0.45); border: 1px solid var(--login-line);
border-radius: 16px; border-radius: 18px;
background: #ffffff; background: rgba(248, 250, 252, 0.96);
cursor: pointer; cursor: pointer;
min-height: 52px; min-height: 52px;
padding: 0; padding: 0;
@ -226,7 +268,7 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 16px; gap: 16px;
color: #475569; color: var(--login-muted);
font-size: 0.92rem; font-size: 0.92rem;
} }
@ -240,7 +282,7 @@
.login-checkbox input { .login-checkbox input {
width: 16px; width: 16px;
height: 16px; height: 16px;
accent-color: #7c3aed; accent-color: var(--login-accent);
} }
.login-hint { .login-hint {
@ -249,29 +291,31 @@
.login-error { .login-error {
border-radius: 16px; border-radius: 16px;
background: rgba(254, 226, 226, 0.9); background: rgba(254, 242, 242, 0.92);
border: 1px solid rgba(248, 113, 113, 0.3); border: 1px solid rgba(248, 113, 113, 0.3);
padding: 12px 14px; padding: 12px 14px;
color: #b91c1c; color: #b91c1c;
font-size: 0.94rem; font-size: 0.94rem;
line-height: 1.55;
} }
.login-submit { .login-submit {
min-height: 54px; min-height: 56px;
border: 0; border: 0;
border-radius: 18px; border-radius: 20px;
background: linear-gradient(135deg, #7c3aed, #4f46e5); background: linear-gradient(135deg, #7c3aed, #4f46e5);
color: #f8fafc; color: #f8fafc;
font-size: 1rem; font-size: 1rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer; cursor: pointer;
box-shadow: 0 16px 32px rgba(124, 58, 237, 0.2); box-shadow: 0 18px 34px rgba(124, 58, 237, 0.2);
transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease; transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
} }
.login-submit:hover:not(:disabled) { .login-submit:hover:not(:disabled) {
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 20px 38px rgba(124, 58, 237, 0.24); box-shadow: 0 22px 40px rgba(124, 58, 237, 0.26);
} }
.login-submit:disabled, .login-submit:disabled,
@ -295,11 +339,12 @@
.login-panel-card { .login-panel-card {
margin: 0 auto; margin: 0 auto;
max-width: 460px; max-width: 460px;
padding: 0; padding: 10px;
background: transparent; border-radius: 30px;
border: 0; background: rgba(255, 255, 255, 0.64);
box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.54);
backdrop-filter: none; box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12);
backdrop-filter: blur(18px);
} }
.login-panel-layout { .login-panel-layout {
@ -312,57 +357,102 @@
} }
.login-panel-formWrap { .login-panel-formWrap {
padding: 30px; padding: 28px 24px;
}
.login-mobile-brand {
display: block;
} }
} }
@media (max-width: 640px) { @media (max-width: 640px) {
.login-page-grid { .login-page-grid {
min-height: 100vh;
min-height: 100dvh;
align-items: center;
justify-items: center;
padding: padding:
max(16px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-top))
16px 12px
max(20px, calc(16px + env(safe-area-inset-bottom))); max(14px, calc(12px + env(safe-area-inset-bottom)));
}
.login-panel {
width: 100%;
} }
.login-panel-card { .login-panel-card {
max-width: none; width: 100%;
padding: 0; max-width: 100%;
} padding: 6px;
.login-panel-formWrap {
padding: 20px 16px;
border-radius: 24px; border-radius: 24px;
} }
.login-panel-formWrap {
padding: 18px 14px 14px;
border-radius: 20px;
}
.login-panel-header { .login-panel-header {
margin-bottom: 22px; display: none;
text-align: center;
} }
.login-panel-header h3 { .login-mobile-brand {
font-size: 1.6rem; margin-bottom: 16px;
padding: 12px;
border-radius: 18px;
} }
.login-panel-header p { .login-mobile-brand .login-brand-lockup {
font-size: 1.25rem; align-items: center;
line-height: 1.6; gap: 12px;
}
.login-mobile-brand .login-brand-mark {
height: 48px;
width: 48px;
border-radius: 16px;
}
.login-mobile-brand .login-brand-kicker {
margin-bottom: 6px;
font-size: 0.68rem;
letter-spacing: 0.18em;
}
.login-mobile-brand .login-brand-lockup h1 {
font-size: clamp(1.02rem, 5.8vw, 1.24rem);
white-space: nowrap;
line-height: 1.1;
}
.login-mobile-description {
margin-top: 12px;
font-size: 0.88rem;
line-height: 1.65;
}
.login-mobile-brand .login-brand-kicker,
.login-mobile-description,
.login-panel-header > p:not(.login-panel-eyebrow) {
display: none;
} }
.login-form { .login-form {
gap: 16px; gap: 12px;
} }
.login-field { .login-field {
gap: 8px; gap: 6px;
} }
.login-field span { .login-field span {
font-size: 0.9rem; font-size: 0.86rem;
} }
.login-field input { .login-field input {
min-height: 50px; min-height: 46px;
padding: 13px 14px; padding: 11px 13px;
border-radius: 14px; border-radius: 14px;
font-size: 16px; font-size: 16px;
} }
@ -372,14 +462,13 @@
} }
.login-captcha-button { .login-captcha-button {
min-height: 50px; min-height: 46px;
border-radius: 14px; border-radius: 14px;
} }
.login-form-meta { .login-form-meta {
flex-direction: column; justify-content: flex-start;
align-items: flex-start; gap: 10px;
gap: 12px;
} }
.login-hint { .login-hint {
@ -392,19 +481,36 @@
} }
.login-submit { .login-submit {
min-height: 52px; min-height: 50px;
border-radius: 16px; border-radius: 16px;
} }
} }
@media (max-width: 400px) { @media (max-width: 400px) {
.login-page-grid { .login-page-grid {
padding-left: 10px;
padding-right: 10px;
}
.login-panel-formWrap {
padding-left: 12px; padding-left: 12px;
padding-right: 12px; padding-right: 12px;
} }
.login-panel-formWrap { .login-mobile-brand {
padding-left: 14px; padding: 10px;
padding-right: 14px; }
.login-mobile-brand .login-brand-mark {
height: 44px;
width: 44px;
}
.login-mobile-brand .login-brand-lockup {
gap: 10px;
}
.login-mobile-brand .login-brand-lockup h1 {
font-size: clamp(0.96rem, 5.4vw, 1.12rem);
} }
} }