158 lines
4.0 KiB
Vue
158 lines
4.0 KiB
Vue
<script setup lang="ts">
|
||
import { useRouter } from 'vue-router'
|
||
import bannerIllustration from '@/assets/home/banner-illustration.png'
|
||
|
||
// 设计稿顶部为静态头图（非轮播、不走接口）：底 #F3F4F8 渐变，
|
||
// 左侧标题 60px + 副标题 24px + 双按钮 183×55，右侧插画 723×598（蓝湖设计稿切图）
|
||
const router = useRouter()
|
||
|
||
function goDemand(): void {
|
||
router.push('/demand')
|
||
}
|
||
|
||
function goCases(): void {
|
||
router.push('/cases')
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<section class="home-banner">
|
||
<div class="home-banner__inner">
|
||
<h1 class="home-banner__title">虫子智造研发一体化平台</h1>
|
||
<p class="home-banner__subtitle">一站式智能软硬件研发与量产综合服务商</p>
|
||
|
||
<div class="home-banner__actions">
|
||
<button class="home-banner__btn home-banner__btn--primary" type="button" @click="goDemand">
|
||
需求提报
|
||
</button>
|
||
<button class="home-banner__btn home-banner__btn--ghost" type="button" @click="goCases">
|
||
案例中心
|
||
</button>
|
||
</div>
|
||
|
||
<div class="home-banner__visual">
|
||
<img
|
||
class="home-banner__illustration"
|
||
:src="bannerIllustration"
|
||
alt="虫子智造研发一体化平台"
|
||
>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<style lang="less" scoped>
|
||
.home-banner {
|
||
// 设计稿头图通栏 1920×661（画板 y73，位于顶栏 72 之下）
|
||
position: relative;
|
||
height: 661px;
|
||
overflow: hidden;
|
||
background: @home-banner-bg;
|
||
// .home 是 column flex 容器，需显式占满整行，否则被内容宽度收缩
|
||
width: 100%;
|
||
flex: 0 0 auto;
|
||
|
||
// 内容区按设计稿 1920 画布居中；两侧内容一律相对它定位，保证 1:1
|
||
&__inner {
|
||
position: relative;
|
||
width: 100%;
|
||
max-width: @container-width;
|
||
height: 100%;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
// 设计稿标题 x150 y257（画板绝对）→ banner 内 y257−73=184
|
||
&__title {
|
||
position: absolute;
|
||
top: 184px;
|
||
left: 150px;
|
||
margin: 0;
|
||
color: @banner-title-color;
|
||
font-size: @font-size-hero-lg;
|
||
font-weight: 700;
|
||
line-height: 87px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
// 设计稿副标题 x150 y360 → banner 内 y287
|
||
&__subtitle {
|
||
position: absolute;
|
||
top: 287px;
|
||
left: 150px;
|
||
margin: 0;
|
||
color: @banner-title-color;
|
||
font-size: 24px;
|
||
font-weight: 500;
|
||
line-height: 35px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
// 设计稿按钮组 x150 y465 → banner 内 y392；两钮 183×55，间距 20（150+183=333 → 353）
|
||
&__actions {
|
||
position: absolute;
|
||
top: 392px;
|
||
left: 150px;
|
||
.flex(row, flex-start, center);
|
||
gap: 20px;
|
||
}
|
||
|
||
&__btn {
|
||
width: 183px;
|
||
height: 55px;
|
||
border-radius: 8px;
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
line-height: 1;
|
||
cursor: pointer;
|
||
|
||
&--primary {
|
||
background: linear-gradient(135deg, @btn-gradient-from 0%, @btn-gradient-to 100%);
|
||
border: none;
|
||
color: @white;
|
||
}
|
||
|
||
// 设计稿：2px 渐变描边 + 白底 + 蓝色文字（实测 #2B5FF0）
|
||
&--ghost {
|
||
position: relative;
|
||
background: @white;
|
||
border: none;
|
||
color: @btn-ghost-color;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
border-radius: 8px;
|
||
padding: 2px;
|
||
background: linear-gradient(135deg, @btn-gradient-from 0%, @btn-gradient-to 100%);
|
||
-webkit-mask:
|
||
linear-gradient(#fff 0 0) content-box,
|
||
linear-gradient(#fff 0 0);
|
||
mask:
|
||
linear-gradient(#fff 0 0) content-box,
|
||
linear-gradient(#fff 0 0);
|
||
-webkit-mask-composite: xor;
|
||
mask-composite: exclude;
|
||
pointer-events: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 设计稿插画 723×598 @ canvas (928,104) → banner 内 y104−73=31
|
||
&__visual {
|
||
position: absolute;
|
||
top: 31px;
|
||
left: 928px;
|
||
width: 723px;
|
||
height: 598px;
|
||
}
|
||
|
||
&__illustration {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
}
|
||
</style>
|