52 lines
1.2 KiB
Vue
52 lines
1.2 KiB
Vue
<script setup lang="ts">
|
||
/**
|
||
* 页面头部（白底通栏）：主标题 22/700 #1F2937 + 副标语 13/400 #6B7280。
|
||
*
|
||
* <p>43 张设计稿实测：标题顶 y125（顶栏 72 → 内容区 padding-top 53 含 1px 描边）、
|
||
* 行盒 29 → 副标语 ink y162（标题盒底 154 + 8）。整块白底高 179（72 → 251）。</p>
|
||
*/
|
||
interface Props {
|
||
title: string
|
||
slogan?: string
|
||
}
|
||
|
||
defineProps<Props>()
|
||
</script>
|
||
|
||
<template>
|
||
<header class="page-head">
|
||
<div class="container">
|
||
<h1 class="page-head__title">
|
||
{{ title }}
|
||
</h1>
|
||
<p v-if="slogan" class="page-head__slogan">
|
||
{{ slogan }}
|
||
</p>
|
||
</div>
|
||
</header>
|
||
</template>
|
||
|
||
<style lang="less" scoped>
|
||
.page-head {
|
||
background: @white;
|
||
padding-bottom: 72px; // 副标语盒底 179 → 页头块底 251（块高 179）
|
||
|
||
&__title {
|
||
padding-top: 52px; // 顶栏 72 → 标题 ink 124（design 125）
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
line-height: 29px;
|
||
color: @finance-ink;
|
||
}
|
||
|
||
&__slogan {
|
||
padding-bottom: 0;
|
||
margin-top: 9px; // 标题盒底 153 → 副标语盒顶 162
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
line-height: 17px;
|
||
color: @finance-muted-text;
|
||
}
|
||
}
|
||
</style>
|