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

53
src/styles/common.less
View File

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

8
src/styles/variables.less
View File

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

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

@@ -15,82 +15,55 @@ const emit = defineEmits<{
<template> <template>
<div class="demand-bar"> <div class="demand-bar">
<div class="container demand-bar__inner"> <p class="demand-bar__tip">
<p class="demand-bar__tip"> 提交后我们的专业顾问将在一个工作日内与您联系，为您提供一对一服务
<span class="demand-bar__info" aria-hidden="true">i</span> </p>
提交后我们的专业顾问将在一个工作日内与您联系，为您提供一对一服务 <div class="demand-bar__actions">
</p> <button
<div class="demand-bar__actions"> class="demand-bar__btn"
<button type="button"
class="demand-bar__btn" :disabled="props.saving || props.submitting"
type="button" @click="emit('save-draft')"
:disabled="props.saving || props.submitting" >
@click="emit('save-draft')" {{ props.saving ? '保存中…' : '保存草稿' }}
> </button>
{{ props.saving ? '保存中…' : '保存草稿' }} <button
</button> class="demand-bar__btn"
<button type="button"
class="demand-bar__btn" :disabled="props.saving || props.submitting"
type="button" @click="emit('reset')"
:disabled="props.saving || props.submitting" >
@click="emit('reset')" 重置
> </button>
重置 <button
</button> class="demand-bar__btn"
<button type="button"
class="demand-bar__btn demand-bar__btn--primary" :disabled="props.saving || props.submitting"
type="button" @click="emit('submit')"
:disabled="props.submitting" >
@click="emit('submit')" {{ props.submitting ? '提交中…' : '立即提报' }}
> </button>
{{ props.submitting ? '提交中…' : '立即提报' }}
</button>
</div>
</div> </div>
</div> </div>
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>
.demand-bar { .demand-bar {
position: fixed; // 设计稿里操作栏不是 fixed 底栏，而是卡片内的一行：
right: 0; // el66 提示文字 x=240 y=2297，按钮 el36/34/32 x=1009/1288/1567 y=2280 w=232 h=63。
bottom: 0; // 内容左边界 194，提示文字比它右移 46px；按钮右边界 1799 与输入框右边界齐平。
left: 0; .flex(row, space-between, center);
z-index: 10; margin-top: 66px;
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;
}
&__tip { &__tip {
.flex(row, flex-start, center); // 提示文字左边界 240 = 内容左边界 194 + 46。
gap: 10px; margin: 0 0 0 114px;
min-width: 0;
font-size: 20px; font-size: 20px;
font-weight: 500; font-weight: 500;
line-height: 29px; line-height: 29px;
color: @demand-heading; 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 { &__actions {
.flex(row, flex-end, center); .flex(row, flex-end, center);
gap: 47px; gap: 47px;
@@ -118,16 +91,6 @@ const emit = defineEmits<{
opacity: 0.6; opacity: 0.6;
cursor: not-allowed; 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"> <div class="demand-attach__head">
<span class="demand-attach__label">附件上传</span> <span class="demand-attach__label">附件上传</span>
<span class="demand-attach__hint">支持图片/文档/压缩包，大小不超过1G</span> <span class="demand-attach__hint">支持图片/文档/压缩包，大小不超过1G</span>
<button
class="demand-attach__pick"
type="button"
:disabled="props.uploading"
@click="pick"
>
{{ props.uploading ? '上传中…' : '上传文档' }}
</button>
<input <input
ref="inputRef" ref="inputRef"
class="demand-attach__input" class="demand-attach__input"
@@ -122,7 +114,16 @@ function onDownload(file: DemandAttachment): void {
> >
</div> </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 <li
v-for="(file, index) in props.files" v-for="(file, index) in props.files"
:key="`${file.ossId ?? file.originalName}-${index}`" :key="`${file.ossId ?? file.originalName}-${index}`"
@@ -201,8 +202,13 @@ function onDownload(file: DemandAttachment): void {
<style lang="less" scoped> <style lang="less" scoped>
.demand-attach { .demand-attach {
.flex(column, flex-start, stretch); .flex(column, flex-start, stretch);
// el59标签底 1405 → el54 顶 1419 = 14px；el54 底 1509 → el53 顶 1529 = 20px。
gap: 14px; gap: 14px;
&__list {
gap: 20px;
}
&__head { &__head {
.flex(row, flex-start, center); .flex(row, flex-start, center);
} }
@@ -221,23 +227,26 @@ function onDownload(file: DemandAttachment): void {
margin-left: 20px; margin-left: 20px;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 23px;
color: @demand-line; color: @demand-line;
} }
&__pick { // 设计稿 el54：x=194 y=1419 w=1605 h=90，整块浅灰上传区。
flex-shrink: 0; &__drop {
height: 40px; width: 100%;
padding: 0 @spacing-lg; height: 90px;
border: 1px solid @demand-line; padding: 0;
border: none;
border-radius: @radius-sm; border-radius: @radius-sm;
background: @white; background: @demand-upload-bg;
font-family: inherit;
font-size: 16px; font-size: 16px;
color: @demand-line; color: @demand-line;
cursor: pointer; cursor: pointer;
transition: border-color 0.2s, color 0.2s; transition: background 0.2s, color 0.2s;
&:hover:not(:disabled) { &:hover:not(:disabled) {
border-color: @demand-accent; background: darken(@demand-upload-bg, 4%);
color: @demand-accent; color: @demand-accent;
} }
@@ -259,6 +268,13 @@ function onDownload(file: DemandAttachment): void {
list-style: none; 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 { &__item {
.flex(row, flex-start, center); .flex(row, flex-start, center);
gap: @spacing-base; 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 v-else
class="biz-types__icon" class="biz-types__icon"
:name="option.icon" :name="option.icon"
:size="40" :size="68"
/> />
<span class="biz-types__name">{{ option.label }}</span> <span class="biz-types__name">{{ option.label }}</span>
<span v-if="option.desc" class="biz-types__desc">{{ option.desc }}</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; gap: 0;
height: 206px; height: 206px;
box-sizing: border-box; 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: 1px solid @demand-line;
border-radius: @radius-base; border-radius: @radius-base;
background: @white; 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 { &__check {
position: absolute; position: absolute;
top: 22px; top: 22px;
@@ -108,14 +112,16 @@ const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
box-shadow: inset 0 0 0 3px @demand-selected-bg; 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 { &__icon {
margin-bottom: 15px; margin-bottom: 33px;
} }
&__logo { &__logo {
width: 40px; width: 68px;
height: 40px; height: 68px;
margin-bottom: 15px; margin-bottom: 33px;
object-fit: contain; 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> <style lang="less" scoped>
.demand-info { .demand-info {
.flex(column, flex-start, stretch); .flex(column, flex-start, stretch);
gap: 29px; // 设计稿纵向节奏：输入框底 881 → el42 标签顶 911 = 30px；
// textarea 底 1224 → el60 "预算范围" 顶 1254 = 30px。
gap: 30px;
width: 1605px; width: 1605px;
&__field { &__field {

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

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

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

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

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

@@ -85,36 +85,41 @@ 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 17px; margin: 26px 0 0;
width: 680px; width: 100%;
&__field { &__field {
.flex(column, flex-start, stretch); .flex(column, flex-start, stretch);
gap: 8px; gap: 6px;
width: 680px; width: 100%;
} }
// 第一个字段底（457+40=497... 按标签 438+17+6+40=501）→ 第二标签 520，间距 19px
&__field + &__field { &__field + &__field {
margin-top: 40px; margin-top: 19px;
} }
&__label { &__label {
font-size: 13px * @auth-font-scale; font-size: 13px;
font-weight: 500; font-weight: 500;
line-height: 17px * @auth-font-scale; line-height: 17px;
color: #1f2937; color: #1f2937;
text-align: center;
} }
&__input { &__input {
width: 100%; width: 100%;
height: 39px * @auth-font-scale; height: 40px;
padding: 0 12px * @auth-font-scale; padding: 0 12px;
border: 1px solid #dde1e7; border: 1px solid #dde1e7;
border-radius: @radius-sm; border-radius: @radius-sm;
background: @white; background: @white;
font-size: 13px * @auth-font-scale; font-size: 13px;
color: #1f2937; color: #1f2937;
outline: none; outline: none;
transition: border-color 0.2s; transition: border-color 0.2s;
@@ -129,20 +134,21 @@ function onSubmit(): void {
} }
} }
// 设计稿 #38：勾选框 (992.2,623) 7.5×14，勾选文字 622
&__agree { &__agree {
.flex(row, flex-start, center); .flex(row, flex-start, center);
gap: 8px; gap: 8px;
margin-top: 22px; margin-top: 14px;
font-size: 12px * @auth-font-scale; font-size: 12px;
font-weight: 400; font-weight: 400;
line-height: 16px * @auth-font-scale; line-height: 16px;
color: #6b7280; color: #6b7280;
cursor: pointer; cursor: pointer;
input { input {
flex-shrink: 0; flex-shrink: 0;
width: 16px * @auth-font-scale; width: 14px;
height: 16px * @auth-font-scale; height: 14px;
margin: 0; margin: 0;
accent-color: @primary-strong; accent-color: @primary-strong;
} }
@@ -153,15 +159,16 @@ function onSubmit(): void {
} }
} }
// 设计稿 #38：按钮文字 (1302,669) 54×20
&__submit { &__submit {
width: 100%; width: 100%;
height: 46px * @auth-font-scale; height: 46px;
margin-top: 18px; margin-top: 17px;
border: none; border: none;
border-radius: @radius-sm; border-radius: @radius-sm;
background: @primary-strong; background: @primary-strong;
color: @white; color: @white;
font-size: 15px * @auth-font-scale; font-size: 15px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: background 0.2s; 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"> <p class="auth-page__switch">
没有账号？<RouterLink class="auth-page__link" to="/register">立即注册</RouterLink> 没有账号？<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> </p>
</div> </div>
</main> </main>
@@ -142,26 +144,21 @@ async function onGetCode(target: string): Promise<void> {
<style lang="less" scoped> <style lang="less" scoped>
.auth-page { .auth-page {
&__subtitle { // 设计稿 #36：两个 tab 顶 406，字号 14px，选中下划线 2px 位于 429。
margin: 12px 0 0; // tab 文字底 425，下划线顶 429 → padding-bottom 6px。
font-size: 13px * @auth-font-scale; // 上间距 26px：副标题底 380 → tab 文字顶 406。
font-weight: 400;
line-height: 17px * @auth-font-scale;
color: #6b7280;
}
&__tabs { &__tabs {
.flex(row, flex-start, center); .flex(row, flex-start, center);
gap: 24px; gap: 24px;
margin: 26px 0 0 17px; margin: 26px 0 0;
} }
&__tab { &__tab {
position: relative; position: relative;
padding: 0 0 8px; padding: 0 0 6px;
border: none; border: none;
background: transparent; background: transparent;
font-size: 22px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #4b5563; color: #4b5563;
cursor: pointer; cursor: pointer;
@@ -183,13 +180,20 @@ async function onGetCode(target: string): Promise<void> {
} }
} }
// 设计稿 #36：「没有账号？」(1325,774)、「立即注册」(1384.5,774) 12px。
// 「找回密码」为设计稿外的补充入口，按同样式接在分隔符后。
&__switch { &__switch {
align-self: center; align-self: center;
margin: 53px 0 0; margin: 53px 0 0;
font-size: 12px * @auth-font-scale; font-size: 12px;
font-weight: 400; font-weight: 400;
line-height: 16px * @auth-font-scale; line-height: 16px;
color: #6b7280; color: #6b7280;
&-sep {
margin: 0 8px;
color: #d0d5dd;
}
} }
} }
</style> </style>

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

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

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

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