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-09 09:29:08 +08:00
parent aa440d6bb5
commit f73103a2a6
14 changed files with 294 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/SmsCodeInput.vue
View File

@@ -36,12 +36,12 @@ function onGetCode(): void {
&__input {
flex: 1;
min-width: 0;
height: 39px * @auth-font-scale;
padding: 0 12px * @auth-font-scale;
height: 40px;
padding: 0 12px;
border: 1px solid #dde1e7;
border-radius: @radius-sm;
background: @white;
font-size: 13px * @auth-font-scale;
font-size: 13px;
color: #1f2937;
outline: none;
transition: border-color 0.2s;
@@ -55,25 +55,30 @@ function onGetCode(): void {
}
}
// 设计稿 #38：「获取验证码」是带蓝色描边的独立按钮（62×16 文字居中），
// 不是纯文字链接。按键宽 88px，与输入框间距 @spacing-sm。
&__btn {
flex-shrink: 0;
min-width: 74px * @auth-font-scale;
height: 39px * @auth-font-scale;
width: 88px;
height: 40px;
padding: 0;
border: none;
background: transparent;
border: 1px solid @primary-strong;
border-radius: @radius-sm;
background: @white;
color: @primary-strong;
font-size: 12px * @auth-font-scale;
font-size: 12px;
font-weight: 400;
text-align: right;
text-align: center;
cursor: pointer;
transition: color 0.2s;
transition: all 0.2s;
&:hover:not(:disabled) {
color: @primary-hover;
background: @primary-strong;
color: @white;
}
&:disabled {
border-color: @text-color-disabled;
color: @text-color-disabled;
cursor: not-allowed;
}

53
src/styles/common.less
View File

@@ -22,50 +22,56 @@
min-height: 100vh;
background: @white;
// 设计稿 #36/#38/#39 的左侧品牌区为固定 784px 渐变块。
&__brand {
.flex(column, flex-start, center);
.flex(column, flex-start, flex-start);
flex: 0 0 @login-brand-width;
padding: 304px 24px 0;
padding: 304px 0 0 257px;
background: linear-gradient(
160deg,
@auth-gradient-from 0%,
@auth-gradient-to 100%
);
color: @white;
text-align: center;
text-align: left;
}
&__logo {
margin: 0;
font-size: 40px * @auth-font-scale;
font-size: 40px;
font-weight: 700;
line-height: 58px * @auth-font-scale;
line-height: 58px;
color: @white;
}
&__key {
margin: 26px 0 0;
font-size: 15px * @auth-font-scale;
font-size: 15px;
font-weight: 400;
letter-spacing: 0.5px;
color: @white;
}
&__slogan {
margin: 246px 0 0;
font-size: 22px * @auth-font-scale;
// logo(116) + key 上距 26 + key(20) = 162；设计稿 slogan 顶 715，
// 故与 key 底(446+20=466) 间距 249px。
margin: 249px 0 0;
font-size: 22px;
font-weight: 600;
line-height: 29px * @auth-font-scale;
line-height: 29px;
letter-spacing: 8px;
color: @white;
}
// 设计稿 #39：右上角「游客模式」12px，标注框 (1840,24) 64.2×16
// （64.2 含 Sketch 文本框内边距，实际文字 48px），右留白 16px。
&__guest {
position: absolute;
top: 28px;
right: 32px;
font-size: 20px;
top: 24px;
right: 16px;
font-size: 12px;
font-weight: 400;
line-height: 16px;
color: #1f2937;
text-decoration: none;
transition: color 0.2s;
@@ -79,27 +85,40 @@
.flex(column, center, center);
flex: 1;
min-width: 0;
padding: 40px 0;
// 设计稿三页的标题顶分别为 306/287/268，卡片在 1080 视口中居中后
// 会比标注高 15px，用上内边距把内容整体下移补平。
padding: 80px 0 40px;
}
// 设计稿表单区统一 693px 宽。标题/副标题按自身文字宽度相对表单居中，
// 不额外内缩——设计稿标注的 714px 宽是 Sketch 文本框含内边距的值。
&__card {
.flex(column, flex-start, flex-start);
width: 693px;
width: @login-form-width;
text-align: left;
}
&__title {
margin: 0;
font-size: 34px * @auth-font-scale;
font-size: 34px;
font-weight: 700;
line-height: 45px * @auth-font-scale;
line-height: 45px;
color: #1f2937;
}
// 三页副标题样式一致且模板类名统一为 auth-page__subtitle，
// 放在公共层，避免各页 scoped 选择器与模板类名不匹配。
&__subtitle {
margin: 12px 0 0;
font-size: 13px;
font-weight: 400;
line-height: 17px;
color: #6b7280;
}
&__title,
&__subtitle {
align-self: center;
padding-left: 17px;
text-align: center;
}

8
src/styles/variables.less
View File

@@ -78,9 +78,11 @@
@footer-height: 481px;
@footer-inset: 70px;
@login-brand-width: 35%;
@login-form-offset: 1022px;
@auth-font-scale: 1.5;
// 登录/注册/找回密码三页共用的品牌区宽度。设计稿 #36/#38/#39 的左侧渐变
// artboard 均为 784×1080，是固定值而非百分比。
@login-brand-width: 784px;
// 表单区宽度。设计稿 el12/el14/el19 等标签层统一 693px 宽。
@login-form-width: 693px;
@shadow-base: 0 2px 8px rgba(31, 39, 51, 0.08);
@shadow-lg: 0 4px 16px rgba(31, 39, 51, 0.12);

2
src/views/demand/cpns/BizTypeIcon.vue
View File

@@ -6,7 +6,7 @@ interface Props {
size?: number
}
withDefaults(defineProps<Props>(), { size: 40 })
withDefaults(defineProps<Props>(), { size: 68 })
</script>
<template>

109
src/views/demand/cpns/DemandActionBar.vue
View File

@@ -15,82 +15,55 @@ const emit = defineEmits<{
<template>
<div class="demand-bar">
<div class="container demand-bar__inner">
<p class="demand-bar__tip">
<span class="demand-bar__info" aria-hidden="true">i</span>
提交后我们的专业顾问将在一个工作日内与您联系，为您提供一对一服务
</p>
<div class="demand-bar__actions">
<button
class="demand-bar__btn"
type="button"
:disabled="props.saving || props.submitting"
@click="emit('save-draft')"
>
{{ props.saving ? '保存中…' : '保存草稿' }}
</button>
<button
class="demand-bar__btn"
type="button"
:disabled="props.saving || props.submitting"
@click="emit('reset')"
>
重置
</button>
<button
class="demand-bar__btn demand-bar__btn--primary"
type="button"
:disabled="props.submitting"
@click="emit('submit')"
>
{{ props.submitting ? '提交中…' : '立即提报' }}
</button>
</div>
<p class="demand-bar__tip">
提交后我们的专业顾问将在一个工作日内与您联系，为您提供一对一服务
</p>
<div class="demand-bar__actions">
<button
class="demand-bar__btn"
type="button"
:disabled="props.saving || props.submitting"
@click="emit('save-draft')"
>
{{ props.saving ? '保存中…' : '保存草稿' }}
</button>
<button
class="demand-bar__btn"
type="button"
:disabled="props.saving || props.submitting"
@click="emit('reset')"
>
重置
</button>
<button
class="demand-bar__btn"
type="button"
:disabled="props.saving || props.submitting"
@click="emit('submit')"
>
{{ props.submitting ? '提交中…' : '立即提报' }}
</button>
</div>
</div>
</template>
<style lang="less" scoped>
.demand-bar {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
border-top: 1px solid @border-color;
background: @white;
&__inner {
.flex(row, space-between, center);
height: 104px;
gap: @spacing-base;
padding-left: 170px;
padding-right: 121px;
}
// 设计稿里操作栏不是 fixed 底栏，而是卡片内的一行：
// el66 提示文字 x=240 y=2297，按钮 el36/34/32 x=1009/1288/1567 y=2280 w=232 h=63。
// 内容左边界 194，提示文字比它右移 46px；按钮右边界 1799 与输入框右边界齐平。
.flex(row, space-between, center);
margin-top: 66px;
&__tip {
.flex(row, flex-start, center);
gap: 10px;
min-width: 0;
// 提示文字左边界 240 = 内容左边界 194 + 46。
margin: 0 0 0 114px;
font-size: 20px;
font-weight: 500;
line-height: 29px;
color: @demand-heading;
}
&__info {
.flex(row, center, center);
flex-shrink: 0;
width: 26px;
height: 26px;
border: 1px solid @demand-accent;
border-radius: 50%;
font-size: 16px;
font-style: normal;
font-weight: 600;
color: @demand-accent;
}
&__actions {
.flex(row, flex-end, center);
gap: 47px;
@@ -118,16 +91,6 @@ const emit = defineEmits<{
opacity: 0.6;
cursor: not-allowed;
}
&--primary {
min-width: 232px;
background: @demand-secondary-bg;
color: @white;
&:hover:not(:disabled) {
background: darken(@demand-secondary-bg, 6%);
}
}
}
}
</style>
</style>

50
src/views/demand/cpns/DemandAttachments.vue
View File

@@ -105,14 +105,6 @@ function onDownload(file: DemandAttachment): void {
<div class="demand-attach__head">
<span class="demand-attach__label">附件上传</span>
<span class="demand-attach__hint">支持图片/文档/压缩包，大小不超过1G</span>
<button
class="demand-attach__pick"
type="button"
:disabled="props.uploading"
@click="pick"
>
{{ props.uploading ? '上传中…' : '上传文档' }}
</button>
<input
ref="inputRef"
class="demand-attach__input"
@@ -122,7 +114,16 @@ function onDownload(file: DemandAttachment): void {
>
</div>
<ul v-if="props.files.length > 0" class="demand-attach__list">
<button
class="demand-attach__drop"
type="button"
:disabled="props.uploading"
@click="pick"
>
{{ props.uploading ? '上传中…' : '点击上传附件' }}
</button>
<ul class="demand-attach__list">
<li
v-for="(file, index) in props.files"
:key="`${file.ossId ?? file.originalName}-${index}`"
@@ -201,8 +202,13 @@ function onDownload(file: DemandAttachment): void {
<style lang="less" scoped>
.demand-attach {
.flex(column, flex-start, stretch);
// el59标签底 1405 → el54 顶 1419 = 14px；el54 底 1509 → el53 顶 1529 = 20px。
gap: 14px;
&__list {
gap: 20px;
}
&__head {
.flex(row, flex-start, center);
}
@@ -221,23 +227,26 @@ function onDownload(file: DemandAttachment): void {
margin-left: 20px;
font-size: 16px;
font-weight: 400;
line-height: 23px;
color: @demand-line;
}
&__pick {
flex-shrink: 0;
height: 40px;
padding: 0 @spacing-lg;
border: 1px solid @demand-line;
// 设计稿 el54：x=194 y=1419 w=1605 h=90，整块浅灰上传区。
&__drop {
width: 100%;
height: 90px;
padding: 0;
border: none;
border-radius: @radius-sm;
background: @white;
background: @demand-upload-bg;
font-family: inherit;
font-size: 16px;
color: @demand-line;
cursor: pointer;
transition: border-color 0.2s, color 0.2s;
transition: background 0.2s, color 0.2s;
&:hover:not(:disabled) {
border-color: @demand-accent;
background: darken(@demand-upload-bg, 4%);
color: @demand-accent;
}
@@ -259,6 +268,13 @@ function onDownload(file: DemandAttachment): void {
list-style: none;
}
// el53：x=194 y=1529 w=1605 h=90，空态占位块；有附件时列表项本身就是这个高度。
&__list:empty {
height: 90px;
border-radius: @radius-sm;
background: @demand-upload-bg;
}
&__item {
.flex(row, flex-start, center);
gap: @spacing-base;

18
src/views/demand/cpns/DemandBizTypes.vue
View File

@@ -39,7 +39,7 @@ const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
v-else
class="biz-types__icon"
:name="option.icon"
:size="40"
:size="68"
/>
<span class="biz-types__name">{{ option.label }}</span>
<span v-if="option.desc" class="biz-types__desc">{{ option.desc }}</span>
@@ -72,7 +72,10 @@ const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
gap: 0;
height: 206px;
box-sizing: border-box;
padding: 44px 16px 0;
// 设计稿 el21 "互联网软件" y=545 → 卡片 y=439 距顶 106px。
// 插画 el4 y=444 h=110 的框底 554 已越过 name 顶545，说明插画切片含
// 透明边距；按文字层定位为准，插画框给68px 见方、左对齐即可。
padding: 4px 16px 0;
border: 1px solid @demand-line;
border-radius: @radius-base;
background: @white;
@@ -90,6 +93,7 @@ const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
}
}
// el8 "圆形51" x=442 y=467 w=30 h=30：卡片 x=194 w=307，右内缩 29px、上移 22px。
&__check {
position: absolute;
top: 22px;
@@ -108,14 +112,16 @@ const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
box-shadow: inset 0 0 0 3px @demand-selected-bg;
}
// el4 插画 x=233 / el3 x=542 / el1 x=875 / el2 x=1190：
// 四张卡的插画都在卡片左边线右侧 27~39px 处，不是水平居中，按左对齐处理。
&__icon {
margin-bottom: 15px;
margin-bottom: 33px;
}
&__logo {
width: 40px;
height: 40px;
margin-bottom: 15px;
width: 68px;
height: 68px;
margin-bottom: 33px;
object-fit: contain;
}

4
src/views/demand/cpns/DemandInfoForm.vue
View File

@@ -174,7 +174,9 @@ function onBudgetManualBlur(event: Event): void {
<style lang="less" scoped>
.demand-info {
.flex(column, flex-start, stretch);
gap: 29px;
// 设计稿纵向节奏：输入框底 881 → el42 标签顶 911 = 30px；
// textarea 底 1224 → el60 "预算范围" 顶 1254 = 30px。
gap: 30px;
width: 1605px;
&__field {

41
src/views/demand/index.vue
View File

@@ -105,22 +105,22 @@ onMounted(() => {
@update="onUpdate"
/>
</section>
<DemandActionBar
:saving="saving"
:submitting="submitting"
@save-draft="onSaveDraft"
@reset="onReset"
@submit="onSubmit"
/>
</div>
</div>
<DemandActionBar
:saving="saving"
:submitting="submitting"
@save-draft="onSaveDraft"
@reset="onReset"
@submit="onSubmit"
/>
</div>
</template>
<style lang="less" scoped>
.demand-page {
padding-bottom: 104px;
// 操作栏已收进卡片内（设计稿 el36 y=2280），不需要为fixed 底栏预留空白。
&.is-loading .demand {
opacity: 0.6;
@@ -135,7 +135,8 @@ onMounted(() => {
}
&__hero-inner {
padding-left: 42px;
// 设计稿 el82：标题左边界 112px（hero 白底 1920 宽，标题左起 112）。
padding-left: 112px;
}
&__title {
@@ -157,12 +158,16 @@ onMounted(() => {
.demand {
margin-top: 20px; // 271 − (72+179) = 20
padding: 48px 56px 111px;
// 设计稿 el83 卡片 x=70 w=1780；内容左边界 194（el68 输入框 x=194 w=1605），
// 右边界 1799。故左内边距 56、右内边距 51（不对称是设计稿本身如此）。
padding: 48px 51px 114px 56px;
background: @white;
&__heading {
.flex(row, flex-start, center);
gap: 15px;
// 设计稿三个 heading 的标签都比序号低 23px（el80 "01" y=319 →
// el79 "选择业务类型*" y=342），不是垂直居中，故用flex-start + margin-top。
.flex(row, flex-start, flex-start);
gap: 4px;
margin: 0 0 50px;
padding-left: 8px;
}
@@ -177,6 +182,8 @@ onMounted(() => {
}
&__label {
// 与序号的顶部落差 23px（el80 y=319 → el79 y=342）。
margin-top: 23px;
font-size: 28px;
font-weight: 500;
line-height: 41px;
@@ -188,22 +195,26 @@ onMounted(() => {
color: @danger-color;
}
// 内容左边界 194：卡片 x=70 + padding-left 56 + 内容缩进 68。
&__heading + * {
margin-left: 46px;
margin-left: 68px;
}
// el29业务类型卡片底 645 → el78 "02" 顶 705 = 60px。
&__section + &__section {
margin-top: 60px;
}
// el53 附件灰块底 1619 → el76 "03" 顶 1689 = 70px。
&__section + &__section:last-of-type {
margin-top: 50px;
margin-top: 70px;
}
&__section + &__section &__heading {
margin-bottom: 0;
}
// el78 "02" 底 775 → el70 "项目名称*" 顶 789 = 14px。
&__section + &__section &__heading + * {
margin-top: 14px;
}

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

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

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

@@ -85,36 +85,41 @@ 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 17px;
width: 680px;
margin: 26px 0 0;
width: 100%;
&__field {
.flex(column, flex-start, stretch);
gap: 8px;
width: 680px;
gap: 6px;
width: 100%;
}
// 第一个字段底（457+40=497... 按标签 438+17+6+40=501）→ 第二标签 520，间距 19px
&__field + &__field {
margin-top: 40px;
margin-top: 19px;
}
&__label {
font-size: 13px * @auth-font-scale;
font-size: 13px;
font-weight: 500;
line-height: 17px * @auth-font-scale;
line-height: 17px;
color: #1f2937;
text-align: center;
}
&__input {
width: 100%;
height: 39px * @auth-font-scale;
padding: 0 12px * @auth-font-scale;
height: 40px;
padding: 0 12px;
border: 1px solid #dde1e7;
border-radius: @radius-sm;
background: @white;
font-size: 13px * @auth-font-scale;
font-size: 13px;
color: #1f2937;
outline: none;
transition: border-color 0.2s;
@@ -129,20 +134,21 @@ function onSubmit(): void {
}
}
// 设计稿 #38：勾选框 (992.2,623) 7.5×14，勾选文字 622
&__agree {
.flex(row, flex-start, center);
gap: 8px;
margin-top: 22px;
font-size: 12px * @auth-font-scale;
margin-top: 14px;
font-size: 12px;
font-weight: 400;
line-height: 16px * @auth-font-scale;
line-height: 16px;
color: #6b7280;
cursor: pointer;
input {
flex-shrink: 0;
width: 16px * @auth-font-scale;
height: 16px * @auth-font-scale;
width: 14px;
height: 14px;
margin: 0;
accent-color: @primary-strong;
}
@@ -153,15 +159,16 @@ function onSubmit(): void {
}
}
// 设计稿 #38：按钮文字 (1302,669) 54×20
&__submit {
width: 100%;
height: 46px * @auth-font-scale;
margin-top: 18px;
height: 46px;
margin-top: 17px;
border: none;
border-radius: @radius-sm;
background: @primary-strong;
color: @white;
font-size: 15px * @auth-font-scale;
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;

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

@@ -131,6 +131,8 @@ async function onGetCode(target: string): Promise<void> {
<p class="auth-page__switch">
没有账号？<RouterLink class="auth-page__link" to="/register">立即注册</RouterLink>
<span class="auth-page__switch-sep">|</span>
<RouterLink class="auth-page__link" to="/reset-password">找回密码</RouterLink>
</p>
</div>
</main>
@@ -142,26 +144,21 @@ async function onGetCode(target: string): Promise<void> {
<style lang="less" scoped>
.auth-page {
&__subtitle {
margin: 12px 0 0;
font-size: 13px * @auth-font-scale;
font-weight: 400;
line-height: 17px * @auth-font-scale;
color: #6b7280;
}
// 设计稿 #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 17px;
margin: 26px 0 0;
}
&__tab {
position: relative;
padding: 0 0 8px;
padding: 0 0 6px;
border: none;
background: transparent;
font-size: 22px;
font-size: 14px;
font-weight: 400;
color: #4b5563;
cursor: pointer;
@@ -183,13 +180,20 @@ async function onGetCode(target: string): Promise<void> {
}
}
// 设计稿 #36：「没有账号？」(1325,774)、「立即注册」(1384.5,774) 12px。
// 「找回密码」为设计稿外的补充入口，按同样式接在分隔符后。
&__switch {
align-self: center;
margin: 53px 0 0;
font-size: 12px * @auth-font-scale;
font-size: 12px;
font-weight: 400;
line-height: 16px * @auth-font-scale;
line-height: 16px;
color: #6b7280;
&-sep {
margin: 0 8px;
color: #d0d5dd;
}
}
}
</style>

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

@@ -157,38 +157,43 @@ onBeforeUnmount(() => {
</template>
<style lang="less" scoped>
// 设计稿 #39（注册账号）纵向坐标：
// 手机号标签 368 → 验证码标签 450 → 设置密码标签 532 → 确认密码标签 658
// 前三个字段间距均为 82px；设置密码字段含密码强度条，故到确认密码为 126px。
.register {
&__form {
.flex(column, flex-start, stretch);
margin: 38px 0 0 17px;
width: 680px;
margin: 26px 0 0;
width: 100%;
}
&__field {
.flex(column, flex-start, stretch);
gap: 8px;
width: 680px;
gap: 6px;
width: 100%;
}
// 字段盒 = 标签17 + gap6 + 输入框40 = 63px；63 + 19 = 82px 字段间距
&__field + &__field {
margin-top: 18px;
margin-top: 19px;
}
&__label {
font-size: 13px * @auth-font-scale;
font-size: 13px;
font-weight: 500;
line-height: 17px * @auth-font-scale;
line-height: 17px;
color: #1f2937;
text-align: center;
}
&__input {
width: 100%;
height: 39px * @auth-font-scale;
padding: 0 12px * @auth-font-scale;
height: 40px;
padding: 0 12px;
border: 1px solid #dde1e7;
border-radius: @radius-sm;
background: @white;
font-size: 13px * @auth-font-scale;
font-size: 13px;
color: #1f2937;
outline: none;
transition: border-color 0.2s;
@@ -203,20 +208,21 @@ onBeforeUnmount(() => {
}
}
// 设计稿 #39：勾选框 (1002.2,749) 7.5×14
&__agree {
.flex(row, flex-start, center);
gap: 8px;
margin-top: 22px;
font-size: 12px * @auth-font-scale;
margin-top: 21px;
font-size: 12px;
font-weight: 400;
line-height: 16px * @auth-font-scale;
line-height: 16px;
color: #6b7280;
cursor: pointer;
input {
flex-shrink: 0;
width: 16px * @auth-font-scale;
height: 16px * @auth-font-scale;
width: 14px;
height: 14px;
margin: 0;
accent-color: @primary-strong;
}
@@ -227,15 +233,16 @@ onBeforeUnmount(() => {
}
}
// 设计稿 #39：按钮文字 (1312,795) 54×20
&__submit {
width: 100%;
height: 46px * @auth-font-scale;
margin-top: 18px;
height: 46px;
margin-top: 17px;
border: none;
border-radius: @radius-sm;
background: @primary-strong;
color: @white;
font-size: 15px * @auth-font-scale;
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
@@ -245,20 +252,13 @@ onBeforeUnmount(() => {
}
}
// 设计稿 #39：「已有账号？」(1285,844)、「立即登录」(1344.5,844)
&__switch {
align-self: center;
margin: 16px 0 0;
font-size: 12px * @auth-font-scale;
margin: 17px 0 0;
font-size: 12px;
font-weight: 400;
line-height: 16px * @auth-font-scale;
color: #6b7280;
}
&__subtitle {
margin: 12px 0 0;
font-size: 13px * @auth-font-scale;
font-weight: 400;
line-height: 17px * @auth-font-scale;
line-height: 16px;
color: #6b7280;
}
}

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

@@ -159,38 +159,42 @@ onBeforeUnmount(() => {
</template>
<style lang="less" scoped>
// 找回密码与注册同为 4 字段布局（手机号/验证码/设置密码/确认密码），
// 间距规则与设计稿 #39 注册页一致。
.reset {
&__form {
.flex(column, flex-start, stretch);
margin: 38px 0 0 17px;
width: 680px;
margin: 26px 0 0;
width: 100%;
}
&__field {
.flex(column, flex-start, stretch);
gap: 8px;
width: 680px;
gap: 6px;
width: 100%;
}
// 字段盒 = 标签17 + gap6 + 输入框40 = 63px；63 + 19 = 82px 字段间距
&__field + &__field {
margin-top: 18px;
margin-top: 19px;
}
&__label {
font-size: 13px * @auth-font-scale;
font-size: 13px;
font-weight: 500;
line-height: 17px * @auth-font-scale;
line-height: 17px;
color: #1f2937;
text-align: center;
}
&__input {
width: 100%;
height: 39px * @auth-font-scale;
padding: 0 12px * @auth-font-scale;
height: 40px;
padding: 0 12px;
border: 1px solid #dde1e7;
border-radius: @radius-sm;
background: @white;
font-size: 13px * @auth-font-scale;
font-size: 13px;
color: #1f2937;
outline: none;
transition: border-color 0.2s;
@@ -208,17 +212,17 @@ onBeforeUnmount(() => {
&__agree {
.flex(row, flex-start, center);
gap: 8px;
margin-top: 22px;
font-size: 12px * @auth-font-scale;
margin-top: 21px;
font-size: 12px;
font-weight: 400;
line-height: 16px * @auth-font-scale;
line-height: 16px;
color: #6b7280;
cursor: pointer;
input {
flex-shrink: 0;
width: 16px * @auth-font-scale;
height: 16px * @auth-font-scale;
width: 14px;
height: 14px;
margin: 0;
accent-color: @primary-strong;
}
@@ -231,13 +235,13 @@ onBeforeUnmount(() => {
&__submit {
width: 100%;
height: 46px * @auth-font-scale;
margin-top: 18px;
height: 46px;
margin-top: 17px;
border: none;
border-radius: @radius-sm;
background: @primary-strong;
color: @white;
font-size: 15px * @auth-font-scale;
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
@@ -250,17 +254,9 @@ onBeforeUnmount(() => {
&__switch {
align-self: center;
margin: 17px 0 0;
font-size: 12px * @auth-font-scale;
font-size: 12px;
font-weight: 400;
line-height: 16px * @auth-font-scale;
color: #6b7280;
}
&__subtitle {
margin: 12px 0 0;
font-size: 13px * @auth-font-scale;
font-weight: 400;
line-height: 17px * @auth-font-scale;
line-height: 16px;
color: #6b7280;
}
}