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-13 16:13:56 +08:00
parent a067fd8357
commit 0b974bd36a
5 changed files with 95 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/SmsCodeInput.vue
View File

@@ -32,42 +32,44 @@ function onGetCode(): void {
.sms-code {
.flex(row, stretch);
gap: @spacing-sm;
width: 100%;
&__input {
flex: 1;
min-width: 0;
height: 40px;
padding: 0 12px;
height: 44px;
padding: 0 @spacing-base;
border: 1px solid @border-color;
border-radius: @radius-sm;
background: @white;
font-size: 13px;
color: #1f2937;
border-radius: @radius-base;
background: @bg-color-light;
font-size: @font-size-base;
color: @heading-color;
outline: none;
transition: border-color 0.2s;
transition: border-color 0.2s, background 0.2s;
box-sizing: border-box;
&:focus {
border-color: @primary-strong;
background: @white;
}
&::placeholder {
color: #1f2937;
color: @text-color-secondary;
}
}
// 设计稿 #38：「获取验证码」是带蓝色描边的独立按钮（62×16 文字居中），
// 不是纯文字链接。按键宽 88px，与输入框间距 @spacing-sm。
&__btn {
flex-shrink: 0;
width: 88px;
height: 40px;
padding: 0;
min-width: 120px;
height: 44px;
padding: 0 @spacing-base;
border: 1px solid @primary-strong;
border-radius: @radius-sm;
border-radius: @radius-base;
background: @white;
color: @primary-strong;
font-size: 12px;
font-weight: 400;
font-size: @font-size-sm;
font-weight: 500;
white-space: nowrap;
text-align: center;
cursor: pointer;
transition: all 0.2s;
@@ -78,8 +80,9 @@ function onGetCode(): void {
}
&:disabled {
border-color: @text-color-disabled;
color: @text-color-disabled;
border-color: @border-color;
background: @bg-color-light;
color: @text-color-secondary;
cursor: not-allowed;
}
}

5
src/styles/common.less
View File

@@ -85,9 +85,8 @@
.flex(column, center, center);
flex: 1;
min-width: 0;
// 设计稿三页的标题顶分别为 306/287/268，卡片在 1080 视口中居中后
// 会比标注高 15px，用上内边距把内容整体下移补平。
padding: 80px 0 40px;
// 底部多留白，整体视觉中心上移，「欢迎登录」不再偏下
padding: 24px 0 120px;
}
// 设计稿表单区统一 693px 宽。标题/副标题按自身文字宽度相对表单居中，

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

@@ -67,70 +67,58 @@ const localAgree = computed({
</template>
<style lang="less" scoped>
// 设计稿 #36（账号密码登录）纵向坐标：
// 账号标签 457 → 密码标签 585（差 128）
// 密码输入框底 ~648 → 勾选行 641 区间 → 登录按钮文字 688
// 表单左边界与 title 内缩对齐：1032.5 - 982.5(title 层中心对齐后) ≈ 0，
// 实测 title padding-left 17px 抵消 693/714 的差，故表单不再额外内缩。
.login-form {
.flex(column, flex-start, stretch);
margin: 26px 0 0;
gap: @spacing-lg;
width: 100%;
margin-top: @spacing-xl;
&__field {
.flex(column, flex-start, stretch);
// 标签底 474 → 输入框顶 480，间距 6px
gap: 6px;
gap: @spacing-sm;
width: 100%;
}
// 第一个字段底（480+40=520）→ 第二个字段标签顶 585，间距 65px
&__field + &__field {
margin-top: 65px;
}
&__label {
font-size: 13px;
font-size: @font-size-sm;
font-weight: 500;
line-height: 17px;
color: #1f2937;
text-align: center;
line-height: 1.4;
color: @heading-color;
text-align: left;
}
&__input {
width: 100%;
height: 40px;
padding: 0 12px;
height: 44px;
padding: 0 @spacing-base;
border: 1px solid @border-color;
border-radius: @radius-sm;
background: @white;
font-size: 13px;
color: #1f2937;
border-radius: @radius-base;
background: @bg-color-light;
font-size: @font-size-base;
color: @heading-color;
outline: none;
transition: border-color 0.2s;
transition: border-color 0.2s, background 0.2s;
box-sizing: border-box;
&:focus {
border-color: @primary-strong;
background: @white;
}
&::placeholder {
color: #1f2937;
color: @text-color-secondary;
}
}
// 设计稿 #36：勾选框 (1042.2,642) 7.5×14，文字 12px 起于 x=1059。
// 注：设计稿勾选标注 y=642 与密码输入框底 648 重叠，二者无法同时满足，
// 这里按视觉取勾选行落在输入框下方 8px。
&__agree {
.flex(row, flex-start, center);
gap: 8px;
margin-top: 8px;
font-size: 12px;
font-weight: 400;
line-height: 16px;
color: #6b7280;
gap: @spacing-sm;
margin: 0;
font-size: @font-size-sm;
line-height: 1.5;
color: @text-color-secondary;
cursor: pointer;
user-select: none;
input {
flex-shrink: 0;
@@ -146,17 +134,15 @@ const localAgree = computed({
}
}
// 设计稿 #36：按钮文字 (1352,688) 54×20 居中，按钮盒约 693×46
&__submit {
width: 100%;
height: 46px;
// 勾选行底 657 → 按钮顶 674
margin-top: 17px;
height: 44px;
margin: 0;
border: none;
border-radius: @radius-sm;
border-radius: @radius-base;
background: @primary-strong;
color: @white;
font-size: 15px;
font-size: @font-size-base;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;

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

@@ -85,65 +85,58 @@ function onSubmit(): void {
</template>
<style lang="less" scoped>
// 设计稿 #38（手机验证码登录）纵向坐标：
// 手机号标签 438 → 验证码标签 520（差 82）
// 验证码输入框底 ~588 → 勾选行 622 → 登录按钮文字 669
.sms-login {
.flex(column, flex-start, stretch);
margin: 26px 0 0;
gap: @spacing-lg;
width: 100%;
margin-top: @spacing-xl;
&__field {
.flex(column, flex-start, stretch);
gap: 6px;
gap: @spacing-sm;
width: 100%;
}
// 第一个字段底（457+40=497... 按标签 438+17+6+40=501）→ 第二标签 520，间距 19px
&__field + &__field {
margin-top: 19px;
}
&__label {
font-size: 13px;
font-size: @font-size-sm;
font-weight: 500;
line-height: 17px;
color: #1f2937;
text-align: center;
line-height: 1.4;
color: @heading-color;
text-align: left;
}
&__input {
width: 100%;
height: 40px;
padding: 0 12px;
height: 44px;
padding: 0 @spacing-base;
border: 1px solid @border-color;
border-radius: @radius-sm;
background: @white;
font-size: 13px;
color: #1f2937;
border-radius: @radius-base;
background: @bg-color-light;
font-size: @font-size-base;
color: @heading-color;
outline: none;
transition: border-color 0.2s;
transition: border-color 0.2s, background 0.2s;
box-sizing: border-box;
&:focus {
border-color: @primary-strong;
background: @white;
}
&::placeholder {
color: #1f2937;
color: @text-color-secondary;
}
}
// 设计稿 #38：勾选框 (992.2,623) 7.5×14，勾选文字 622
&__agree {
.flex(row, flex-start, center);
gap: 8px;
margin-top: 14px;
font-size: 12px;
font-weight: 400;
line-height: 16px;
color: #6b7280;
gap: @spacing-sm;
margin: 0;
font-size: @font-size-sm;
line-height: 1.5;
color: @text-color-secondary;
cursor: pointer;
user-select: none;
input {
flex-shrink: 0;
@@ -159,16 +152,15 @@ function onSubmit(): void {
}
}
// 设计稿 #38：按钮文字 (1302,669) 54×20
&__submit {
width: 100%;
height: 46px;
margin-top: 17px;
height: 44px;
margin: 0;
border: none;
border-radius: @radius-sm;
border-radius: @radius-base;
background: @primary-strong;
color: @white;
font-size: 15px;
font-size: @font-size-base;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;

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

@@ -144,26 +144,31 @@ async function onGetCode(target: string): Promise<void> {
<style lang="less" scoped>
.auth-page {
// 设计稿 #36：两个 tab 顶 406，字号 14px，选中下划线 2px 位于 429。
// tab 文字底 425，下划线顶 429 → padding-bottom 6px。
// 上间距 26px：副标题底 380 → tab 文字顶 406。
&__tabs {
.flex(row, flex-start, center);
gap: 24px;
margin: 26px 0 0;
gap: @spacing-xl;
width: 100%;
margin-top: @spacing-xl;
border-bottom: 1px solid @border-color;
}
&__tab {
position: relative;
padding: 0 0 6px;
padding: 0 0 @spacing-sm;
margin-bottom: -1px;
border: none;
background: transparent;
font-size: 14px;
font-size: @font-size-base;
font-weight: 400;
color: #4b5563;
line-height: 1.4;
color: @text-color-secondary;
cursor: pointer;
transition: color 0.2s;
&:hover {
color: @heading-color;
}
&.is-active {
font-weight: 600;
color: @primary-strong;
@@ -175,24 +180,23 @@ async function onGetCode(target: string): Promise<void> {
bottom: 0;
left: 0;
height: 2px;
border-radius: 1px;
background: @primary-strong;
}
}
}
// 设计稿 #36：「没有账号？」(1325,774)、「立即注册」(1384.5,774) 12px。
// 「找回密码」为设计稿外的补充入口，按同样式接在分隔符后。
&__switch {
align-self: center;
margin: 53px 0 0;
font-size: 12px;
margin: @spacing-xl 0 0;
font-size: @font-size-sm;
font-weight: 400;
line-height: 16px;
color: #6b7280;
line-height: 1.5;
color: @text-color-secondary;
&-sep {
margin: 0 8px;
color: #d0d5dd;
margin: 0 @spacing-sm;
color: @border-color;
}
}
}