zhangchao/cz-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat 登录页面

Browse Source
This commit is contained in:
Ironsp
2026-10-01 14:02:50 +08:00
parent eda0bc2200
commit b99b2a0a88
13 changed files with 481 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/views/login/cpns/LoginForm.vue
View File

@@ -80,25 +80,25 @@ const localAgree = computed({
}
&__field + &__field {
margin-top: 64px;
margin-top: 40px;
}
&__label {
font-size: 13px; // 设计稿 13/500 #1F2937
font-size: 13px * @auth-font-scale; // 设计稿 13/500 #1F2937，×@auth-font-scale
font-weight: 500;
line-height: 17px;
line-height: 17px * @auth-font-scale;
color: #1f2937;
}
// 设计稿：输入框 680×39、白底 + #DDE1E7 描边、文字 13/400
// 设计稿：输入框 680×39、白底 + #DDE1E7 描边、文字 13/400（盒高随字体 ×@auth-font-scale）
&__input {
width: 100%;
height: 39px;
padding: 0 12px;
height: 39px * @auth-font-scale;
padding: 0 12px * @auth-font-scale;
border: 1px solid #dde1e7;
border-radius: @radius-sm;
background: @white;
font-size: 13px;
font-size: 13px * @auth-font-scale;
color: #1f2937;
outline: none;
transition: border-color 0.2s;
@@ -113,21 +113,22 @@ const localAgree = computed({
}
}
// 设计稿：协议行 @(1039,641)；密码输入底 649 → 协议行文字基线对齐
// 设计稿：协议行标 @(1039,641)，但密码输入框实为 y610→649 —— 设计值自相矛盾（重叠 8px）。
// 取与短信登录/注册/找回密码三页一致的 22px 间距（同页切 Tab 也不会跳）。
&__agree {
.flex(row, flex-start, center);
gap: 8px;
margin-top: -8px;
font-size: 12px;
margin-top: 22px;
font-size: 12px * @auth-font-scale;
font-weight: 400;
line-height: 16px;
line-height: 16px * @auth-font-scale;
color: #6b7280;
cursor: pointer;
input {
flex-shrink: 0;
width: 16px;
height: 16px;
width: 16px * @auth-font-scale;
height: 16px * @auth-font-scale;
margin: 0;
accent-color: @primary-strong;
}
@@ -139,16 +140,16 @@ const localAgree = computed({
}
}
// 设计稿：登录按钮 680×46 @y675、#024FFF 实底、文字 15/500
// 设计稿：登录按钮 680×46 @y675、#024FFF 实底、文字 15/500（盒高随字体 ×@auth-font-scale）
&__submit {
width: 100%;
height: 46px;
height: 46px * @auth-font-scale;
margin-top: 18px;
border: none;
border-radius: @radius-sm;
background: @primary-strong;
color: @white;
font-size: 15px;
font-size: 15px * @auth-font-scale;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;

30
src/views/login/cpns/SmsLoginForm.vue
View File

@@ -97,27 +97,27 @@ function onSubmit(): void {
width: 680px;
}
// 设计稿：手机号输入底 502 → 验证码标签 520 = 18；标签行盒 17 → 18
// 与账号密码登录两字段间距一致
&__field + &__field {
margin-top: 18px;
margin-top: 40px;
}
&__label {
font-size: 13px; // 设计稿 13/500 #1F2937
font-size: 13px * @auth-font-scale; // 设计稿 13/500 #1F2937，×@auth-font-scale
font-weight: 500;
line-height: 17px;
line-height: 17px * @auth-font-scale;
color: #1f2937;
}
// 设计稿：输入框 680×39、白底 + #DDE1E7 描边、文字 13/400
// 设计稿：输入框 680×39、白底 + #DDE1E7 描边、文字 13/400（盒高随字体 ×@auth-font-scale）
&__input {
width: 100%;
height: 39px;
padding: 0 12px;
height: 39px * @auth-font-scale;
padding: 0 12px * @auth-font-scale;
border: 1px solid #dde1e7;
border-radius: @radius-sm;
background: @white;
font-size: 13px;
font-size: 13px * @auth-font-scale;
color: #1f2937;
outline: none;
transition: border-color 0.2s;
@@ -137,16 +137,16 @@ function onSubmit(): void {
.flex(row, flex-start, center);
gap: 8px;
margin-top: 22px;
font-size: 12px;
font-size: 12px * @auth-font-scale;
font-weight: 400;
line-height: 16px;
line-height: 16px * @auth-font-scale;
color: #6b7280;
cursor: pointer;
input {
flex-shrink: 0;
width: 16px;
height: 16px;
width: 16px * @auth-font-scale;
height: 16px * @auth-font-scale;
margin: 0;
accent-color: @primary-strong;
}
@@ -158,16 +158,16 @@ function onSubmit(): void {
}
}
// 设计稿：登录按钮 680×46 @y656、#024FFF 实底、文字 15/500
// 设计稿：登录按钮 680×46 @y656、#024FFF 实底、文字 15/500（盒高随字体 ×@auth-font-scale）
&__submit {
width: 100%;
height: 46px;
height: 46px * @auth-font-scale;
margin-top: 18px;
border: none;
border-radius: @radius-sm;
background: @primary-strong;
color: @white;
font-size: 15px;
font-size: 15px * @auth-font-scale;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;

27
src/views/login/index.vue
View File

@@ -146,13 +146,13 @@ async function onGetCode(target: string): Promise<void> {
</style>
<style lang="less" scoped>
// ===== 账号密码登录页专属（--auth-form-x/y 默认值即本页基准） =====
// ===== 账号密码 / 手机验证码登录页专属 =====
.auth-page {
&__subtitle {
margin: 12px 0 0;
font-size: 13px; // 设计稿 13/400 #6B7280
font-size: 13px * @auth-font-scale; // 设计稿 13/400 #6B7280，整体 ×@auth-font-scale
font-weight: 400;
line-height: 17px;
line-height: 17px * @auth-font-scale;
color: #6b7280;
}
@@ -161,14 +161,14 @@ async function onGetCode(target: string): Promise<void> {
.flex(row, flex-start, center);
gap: 24px;
margin: 26px 0 0 17px; // 406 − 363 = 43；x1039 − 1022 = 17
height: 25px;
}
&__tab {
padding: 0;
position: relative;
padding: 0 0 8px;
border: none;
background: transparent;
font-size: 14px; // 设计稿 14/400 #4B5563 → 激活 14/600 #024FFF
font-size: 22px; // 固定 22px
font-weight: 400;
color: #4b5563;
cursor: pointer;
@@ -177,15 +177,26 @@ async function onGetCode(target: string): Promise<void> {
&.is-active {
font-weight: 600;
color: @primary-strong;
// 抵消 html zoom，保证两 Tab 下划线视觉均为 2px（否则 2px×zoom 会因亚像素取整一粗一细）
&::after {
content: '';
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: calc(2px / @page-zoom);
background: @primary-strong;
}
}
}
&__switch {
align-self: center; // 设计稿：X 居中 @(1325,774)
margin: 53px 0 0; // 按钮底 721 → 774
font-size: 12px; // 设计稿 12/400 #6B7280
font-size: 12px * @auth-font-scale; // 设计稿 12/400 #6B7280
font-weight: 400;
line-height: 16px;
line-height: 16px * @auth-font-scale;
color: #6b7280;
}
}

37
src/views/login/register.vue
View File

@@ -159,11 +159,8 @@ onBeforeUnmount(() => {
</template>
<style lang="less" scoped>
// 设计稿（注册账号）：表单列起点 x999（--auth-form-x 982 + 17）、垂直顶 268
// 注册账号页：表单块由 .auth-page__main 在右区内居中（设计稿 02）
.register {
--auth-form-x: 982px;
--auth-form-y: 268px;
&__form {
.flex(column, flex-start, stretch);
// 副标题底 342 → 首个标签 368 = 26（副标题行盒 17 + 外边距 12 → 实际需补 38）
@@ -183,20 +180,20 @@ onBeforeUnmount(() => {
}
&__label {
font-size: 13px; // 设计稿 13/500 #1F2937
font-size: 13px * @auth-font-scale; // 设计稿 13/500 #1F2937，×@auth-font-scale
font-weight: 500;
line-height: 17px;
line-height: 17px * @auth-font-scale;
color: #1f2937;
}
&__input {
width: 100%;
height: 39px;
padding: 0 12px;
height: 39px * @auth-font-scale;
padding: 0 12px * @auth-font-scale;
border: 1px solid #dde1e7;
border-radius: @radius-sm;
background: @white;
font-size: 13px;
font-size: 13px * @auth-font-scale;
color: #1f2937;
outline: none;
transition: border-color 0.2s;
@@ -216,16 +213,16 @@ onBeforeUnmount(() => {
.flex(row, flex-start, center);
gap: 8px;
margin-top: 22px;
font-size: 12px;
font-size: 12px * @auth-font-scale;
font-weight: 400;
line-height: 16px;
line-height: 16px * @auth-font-scale;
color: #6b7280;
cursor: pointer;
input {
flex-shrink: 0;
width: 16px;
height: 16px;
width: 16px * @auth-font-scale;
height: 16px * @auth-font-scale;
margin: 0;
accent-color: @primary-strong;
}
@@ -236,16 +233,16 @@ onBeforeUnmount(() => {
}
}
// 设计稿：注册按钮 680×46 @y782、#024FFF 实底、文字 15/500
// 设计稿：注册按钮 680×46 @y782、#024FFF 实底、文字 15/500（盒高随字体 ×@auth-font-scale）
&__submit {
width: 100%;
height: 46px;
height: 46px * @auth-font-scale;
margin-top: 18px;
border: none;
border-radius: @radius-sm;
background: @primary-strong;
color: @white;
font-size: 15px;
font-size: 15px * @auth-font-scale;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
@@ -259,17 +256,17 @@ onBeforeUnmount(() => {
&__switch {
align-self: center;
margin: 16px 0 0;
font-size: 12px;
font-size: 12px * @auth-font-scale;
font-weight: 400;
line-height: 16px;
line-height: 16px * @auth-font-scale;
color: #6b7280;
}
&__subtitle {
margin: 12px 0 0;
font-size: 13px; // 设计稿 13/400 #6B7280
font-size: 13px * @auth-font-scale; // 设计稿 13/400 #6B7280，×@auth-font-scale
font-weight: 400;
line-height: 17px;
line-height: 17px * @auth-font-scale;
color: #6b7280;
}
}

37
src/views/login/reset.vue
View File

@@ -161,11 +161,8 @@ onBeforeUnmount(() => {
</template>
<style lang="less" scoped>
// 设计稿（找回密码）：表单列起点 x1040（--auth-form-x 1023 + 17）、垂直顶 261
// 找回密码页：表单块由 .auth-page__main 在右区内居中（设计稿 02）
.reset {
--auth-form-x: 1023px;
--auth-form-y: 261px;
&__form {
.flex(column, flex-start, stretch);
// 副标题底 335 → 首个标签 361 = 26（副标题行盒 17 + 外边距 12 → 实际需补 38）
@@ -185,20 +182,20 @@ onBeforeUnmount(() => {
}
&__label {
font-size: 13px; // 设计稿 13/500 #1F2937
font-size: 13px * @auth-font-scale; // 设计稿 13/500 #1F2937，×@auth-font-scale
font-weight: 500;
line-height: 17px;
line-height: 17px * @auth-font-scale;
color: #1f2937;
}
&__input {
width: 100%;
height: 39px;
padding: 0 12px;
height: 39px * @auth-font-scale;
padding: 0 12px * @auth-font-scale;
border: 1px solid #dde1e7;
border-radius: @radius-sm;
background: @white;
font-size: 13px;
font-size: 13px * @auth-font-scale;
color: #1f2937;
outline: none;
transition: border-color 0.2s;
@@ -218,16 +215,16 @@ onBeforeUnmount(() => {
.flex(row, flex-start, center);
gap: 8px;
margin-top: 22px;
font-size: 12px;
font-size: 12px * @auth-font-scale;
font-weight: 400;
line-height: 16px;
line-height: 16px * @auth-font-scale;
color: #6b7280;
cursor: pointer;
input {
flex-shrink: 0;
width: 16px;
height: 16px;
width: 16px * @auth-font-scale;
height: 16px * @auth-font-scale;
margin: 0;
accent-color: @primary-strong;
}
@@ -238,16 +235,16 @@ onBeforeUnmount(() => {
}
}
// 设计稿：确认修改按钮 680×46 @y775、#024FFF 实底、文字 15/500
// 设计稿：确认修改按钮 680×46 @y775、#024FFF 实底、文字 15/500（盒高随字体 ×@auth-font-scale）
&__submit {
width: 100%;
height: 46px;
height: 46px * @auth-font-scale;
margin-top: 18px;
border: none;
border-radius: @radius-sm;
background: @primary-strong;
color: @white;
font-size: 15px;
font-size: 15px * @auth-font-scale;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
@@ -261,17 +258,17 @@ onBeforeUnmount(() => {
&__switch {
align-self: center;
margin: 17px 0 0;
font-size: 12px;
font-size: 12px * @auth-font-scale;
font-weight: 400;
line-height: 16px;
line-height: 16px * @auth-font-scale;
color: #6b7280;
}
&__subtitle {
margin: 12px 0 0;
font-size: 13px; // 设计稿 13/400 #6B7280
font-size: 13px * @auth-font-scale; // 设计稿 13/400 #6B7280，×@auth-font-scale
font-weight: 400;
line-height: 17px;
line-height: 17px * @auth-font-scale;
color: #6b7280;
}
}