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

5
src/styles/common.less
View File

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

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

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

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

@@ -85,65 +85,58 @@ function onSubmit(): void {
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>
// 设计稿 #38（手机验证码登录）纵向坐标：
// 手机号标签 438 → 验证码标签 520（差 82）
// 验证码输入框底 ~588 → 勾选行 622 → 登录按钮文字 669
.sms-login { .sms-login {
.flex(column, flex-start, stretch); .flex(column, flex-start, stretch);
margin: 26px 0 0; gap: @spacing-lg;
width: 100%; width: 100%;
margin-top: @spacing-xl;
&__field { &__field {
.flex(column, flex-start, stretch); .flex(column, flex-start, stretch);
gap: 6px; gap: @spacing-sm;
width: 100%; width: 100%;
} }
// 第一个字段底（457+40=497... 按标签 438+17+6+40=501）→ 第二标签 520，间距 19px
&__field + &__field {
margin-top: 19px;
}
&__label { &__label {
font-size: 13px; font-size: @font-size-sm;
font-weight: 500; font-weight: 500;
line-height: 17px; line-height: 1.4;
color: #1f2937; color: @heading-color;
text-align: center; text-align: left;
} }
&__input { &__input {
width: 100%; width: 100%;
height: 40px; height: 44px;
padding: 0 12px; padding: 0 @spacing-base;
border: 1px solid @border-color; border: 1px solid @border-color;
border-radius: @radius-sm; border-radius: @radius-base;
background: @white; background: @bg-color-light;
font-size: 13px; font-size: @font-size-base;
color: #1f2937; color: @heading-color;
outline: none; outline: none;
transition: border-color 0.2s; transition: border-color 0.2s, background 0.2s;
box-sizing: border-box; box-sizing: border-box;
&:focus { &:focus {
border-color: @primary-strong; border-color: @primary-strong;
background: @white;
} }
&::placeholder { &::placeholder {
color: #1f2937; color: @text-color-secondary;
} }
} }
// 设计稿 #38：勾选框 (992.2,623) 7.5×14，勾选文字 622
&__agree { &__agree {
.flex(row, flex-start, center); .flex(row, flex-start, center);
gap: 8px; gap: @spacing-sm;
margin-top: 14px; margin: 0;
font-size: 12px; font-size: @font-size-sm;
font-weight: 400; line-height: 1.5;
line-height: 16px; color: @text-color-secondary;
color: #6b7280;
cursor: pointer; cursor: pointer;
user-select: none;
input { input {
flex-shrink: 0; flex-shrink: 0;
@@ -159,16 +152,15 @@ function onSubmit(): void {
} }
} }
// 设计稿 #38：按钮文字 (1302,669) 54×20
&__submit { &__submit {
width: 100%; width: 100%;
height: 46px; height: 44px;
margin-top: 17px; margin: 0;
border: none; border: none;
border-radius: @radius-sm; border-radius: @radius-base;
background: @primary-strong; background: @primary-strong;
color: @white; color: @white;
font-size: 15px; font-size: @font-size-base;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: background 0.2s; 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> <style lang="less" scoped>
.auth-page { .auth-page {
// 设计稿 #36：两个 tab 顶 406，字号 14px，选中下划线 2px 位于 429。
// tab 文字底 425，下划线顶 429 → padding-bottom 6px。
// 上间距 26px：副标题底 380 → tab 文字顶 406。
&__tabs { &__tabs {
.flex(row, flex-start, center); .flex(row, flex-start, center);
gap: 24px; gap: @spacing-xl;
margin: 26px 0 0; width: 100%;
margin-top: @spacing-xl;
border-bottom: 1px solid @border-color;
} }
&__tab { &__tab {
position: relative; position: relative;
padding: 0 0 6px; padding: 0 0 @spacing-sm;
margin-bottom: -1px;
border: none; border: none;
background: transparent; background: transparent;
font-size: 14px; font-size: @font-size-base;
font-weight: 400; font-weight: 400;
color: #4b5563; line-height: 1.4;
color: @text-color-secondary;
cursor: pointer; cursor: pointer;
transition: color 0.2s; transition: color 0.2s;
&:hover {
color: @heading-color;
}
&.is-active { &.is-active {
font-weight: 600; font-weight: 600;
color: @primary-strong; color: @primary-strong;
@@ -175,24 +180,23 @@ async function onGetCode(target: string): Promise<void> {
bottom: 0; bottom: 0;
left: 0; left: 0;
height: 2px; height: 2px;
border-radius: 1px;
background: @primary-strong; background: @primary-strong;
} }
} }
} }
// 设计稿 #36：「没有账号？」(1325,774)、「立即注册」(1384.5,774) 12px。
// 「找回密码」为设计稿外的补充入口，按同样式接在分隔符后。
&__switch { &__switch {
align-self: center; align-self: center;
margin: 53px 0 0; margin: @spacing-xl 0 0;
font-size: 12px; font-size: @font-size-sm;
font-weight: 400; font-weight: 400;
line-height: 16px; line-height: 1.5;
color: #6b7280; color: @text-color-secondary;
&-sep { &-sep {
margin: 0 8px; margin: 0 @spacing-sm;
color: #d0d5dd; color: @border-color;
} }
} }
} }