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

feat ui设计稿bug修复

Browse Source
This commit is contained in:
Ironsp
2026-10-01 10:53:13 +08:00
parent 9ab6253c81
commit 1601bdd82c
89 changed files with 4741 additions and 3652 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -55,57 +55,63 @@ onMounted(() => {
</script>
<template>
<div class="demand-page">
<div class="container demand" :class="{ 'is-loading': loading }">
<header class="demand__head">
<h1 class="demand__title">
<div class="demand-page" :class="{ 'is-loading': loading }">
<!-- 设计稿：导航下方 1920×179 白色通栏页头（标题 36/700 @x112，副标题 24/500 @y171） -->
<header class="demand-page__hero">
<div class="container demand-page__hero-inner">
<h1 class="demand-page__title">
需求提报
</h1>
<p class="demand__subtitle">
<p class="demand-page__subtitle">
填写您的需求信息，专业顾问将快速与您联系
</p>
</header>
</div>
</header>
<!-- ① 选择业务类型 -->
<section class="demand__card">
<h2 class="demand__section">
<span class="demand__index">1</span>
选择业务类型<span class="demand__required">*</span>
</h2>
<DemandBizTypes
:options="bizTypeOptions"
:model-value="form.bizType"
@update:model-value="onBizType"
/>
</section>
<!-- 设计稿：三段内容同处一张 1780×2186 白卡（矩形 148286 @(70,271)） -->
<div class="container">
<div class="demand">
<!-- ① 选择业务类型 -->
<section class="demand__section">
<h2 class="demand__heading">
<span class="demand__index">01</span>
<span class="demand__label">选择业务类型<span class="demand__required">*</span></span>
</h2>
<DemandBizTypes
:options="bizTypeOptions"
:model-value="form.bizType"
@update:model-value="onBizType"
/>
</section>
<!-- ② 填写需求信息 -->
<section class="demand__card">
<h2 class="demand__section">
<span class="demand__index">2</span>
填写需求信息<span class="demand__required">*</span>
</h2>
<DemandInfoForm
:demand="form"
:budget-options="budgetOptions"
:uploading="uploading"
@update="onUpdate"
@upload="onUpload"
@remove-file="onRemoveFile"
/>
</section>
<!-- ② 填写需求信息 -->
<section class="demand__section">
<h2 class="demand__heading">
<span class="demand__index">02</span>
<span class="demand__label">填写需求信息<span class="demand__required">*</span></span>
</h2>
<DemandInfoForm
:demand="form"
:budget-options="budgetOptions"
:uploading="uploading"
@update="onUpdate"
@upload="onUpload"
@remove-file="onRemoveFile"
/>
</section>
<!-- ③ 确认信息并补充备注 -->
<section class="demand__card">
<h2 class="demand__section">
<span class="demand__index">3</span>
确认信息并补充备注
</h2>
<DemandConfirmForm
:demand="form"
@update="onUpdate"
/>
</section>
<!-- ③ 确认信息并补充备注 -->
<section class="demand__section">
<h2 class="demand__heading">
<span class="demand__index">03</span>
<span class="demand__label">确认信息并补充备注</span>
</h2>
<DemandConfirmForm
:demand="form"
@update="onUpdate"
/>
</section>
</div>
</div>
<DemandActionBar
@@ -120,96 +126,98 @@ onMounted(() => {
<style lang="less" scoped>
.demand-page {
padding-top: @spacing-lg;
// 固定底条 72px + 呼吸间距，避免遮住 ③ 卡片
// 固定底条 72px + 呼吸间距
padding-bottom: 104px;
// 设计稿：导航下方 179 设计px（≈138px）白色通栏横幅，其下为页面底色
background: linear-gradient(to bottom, @white 0, @white 138px, @bg-color 138px);
&.is-loading {
.demand {
opacity: 0.6;
pointer-events: none;
}
&.is-loading .demand {
opacity: 0.6;
pointer-events: none;
}
}
.demand {
// 设计稿：标题距横幅顶 32 设计px、副标题行距 15 设计px、横幅下留白 50 设计px
&__head {
.flex(column, flex-start, stretch);
gap: 11px;
margin-bottom: 50px;
// 设计稿：白色通栏页头 @(0,72) 1920×179，文案 36/700 @(112,104)、24/500 @(112,171)
&__hero {
height: 179px;
box-sizing: border-box;
padding-top: 32px;
background: @white;
}
&__hero-inner {
padding-left: 42px; // 文案 x112 = 内容区 x70 + 42
}
&__title {
font-size: @font-size-xxl;
margin: 0;
font-size: 36px;
font-weight: 700;
line-height: 1.45;
line-height: 52px;
color: @demand-ink;
}
&__subtitle {
font-size: 18px;
margin: 15px 0 0;
font-size: 24px;
font-weight: 500;
line-height: 35px;
color: @demand-subtitle;
}
}
// 设计稿三段内容位于同一张白色大卡内：三张卡无缝拼接呈现同一张卡的观感
&__card {
padding: 24px 40px 24px 49px;
border-radius: 0;
background: @white;
// 设计稿：白卡 @(70,271) 1780×2186；三段标题序号 x134、标题文字 x194
.demand {
margin-top: 20px; // 271 − (72+179) = 20
padding: 48px 56px 111px; // 序号顶 319 − 271 = 48
background: @white;
// 三卡相连，不再留块间距
& + & {
margin-top: 0;
}
&:first-of-type {
padding-top: 37px;
border-radius: @radius-base @radius-base 0 0;
}
&:last-of-type {
padding-bottom: 40px;
border-radius: 0 0 @radius-base @radius-base;
}
&__heading {
.flex(row, flex-start, center);
gap: 15px;
margin: 0 0 50px; // 01：序号块底 389 → 业务卡顶 439
padding-left: 8px; // 序号落 x134 = 卡内 x70+64 → 64-56 = 8
}
// 区块标题：序号落在卡左内边距列（x=134 设计px），标题文字对齐内容列（x=194）
&__section {
.flex(row, flex-start, baseline);
gap: @spacing-xs;
margin-bottom: 16px;
font-size: @font-size-title;
font-weight: 500;
color: @demand-heading;
}
// 内容列（卡片栅格 / 表单）与区块标题文字对齐到 x=194 设计列（60 设计px ≈ 46px）
&__section + * {
margin-left: 46px;
}
// ① 段标题到卡片栅格的间距更大（56 设计px ≈ 43px）
&__card:first-of-type &__section {
margin-bottom: 40px;
}
/** 区块序号：设计稿 48 设计px 蓝色数字（01/02/03） */
&__index {
flex-shrink: 0;
width: 42px;
font-size: 37px;
font-size: 48px; // 设计稿 48/500 #024FFF
font-weight: 500;
line-height: 1;
line-height: 70px;
font-variant-numeric: tabular-nums;
color: @demand-accent;
}
&__label {
font-size: 28px; // 设计稿 28/500 #333333
font-weight: 500;
line-height: 41px;
color: @demand-heading;
}
&__required {
margin-left: 2px;
color: @danger-color;
}
// 表单列对齐标题文字 x194 = 卡内 x70 + 124（序号行宽 55 + gap 15 + 序号内缩 8 = 78，再补 46）
&__heading + * {
margin-left: 46px;
}
// 段间距（设计稿实测）：01 区底 645 → 02 序号顶 705 = 60；02 区底 1639 → 03 序号顶 1689 = 50
&__section + &__section {
margin-top: 60px;
}
&__section + &__section:last-of-type {
margin-top: 50px;
}
// ② ③ 段：标题块(70) 与首个表单标签间距更紧（序号顶 705/1689 → 标签顶 789/1779 = 84/90）
&__section + &__section &__heading {
margin-bottom: 0;
}
&__section + &__section &__heading + * {
margin-top: 14px;
}
}
</style>