175 lines
3.4 KiB
Vue
175 lines
3.4 KiB
Vue
<script setup lang="ts">
|
||
import type { BusinessLine } from '@/types/business/home'
|
||
|
||
interface Props {
|
||
lines: BusinessLine[]
|
||
}
|
||
|
||
defineProps<Props>()
|
||
</script>
|
||
|
||
<template>
|
||
<section class="home-business">
|
||
<div class="home-business__head">
|
||
<h3 class="home-business__title">
|
||
业务服务
|
||
</h3>
|
||
<span class="home-business__slogan text-secondary">研发智造一体化自营平台，全链路质量兜底</span>
|
||
</div>
|
||
|
||
<div class="home-business__grid">
|
||
<RouterLink
|
||
v-for="line in lines"
|
||
:key="line.id"
|
||
:to="`/business/${line.id}`"
|
||
class="home-business__card"
|
||
:class="`home-business__card--${line.id}`"
|
||
>
|
||
<div class="home-business__card-head">
|
||
<span class="home-business__icon">
|
||
<!-- TODO(蓝湖): 替换业务图标切图 -->
|
||
{{ line.name.slice(0, 2) }}
|
||
</span>
|
||
<h4 class="home-business__name">
|
||
{{ line.name }}
|
||
</h4>
|
||
</div>
|
||
<p class="home-business__desc">
|
||
{{ line.desc }}
|
||
</p>
|
||
<span class="home-business__more">了解详情 ></span>
|
||
</RouterLink>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<style lang="less" scoped>
|
||
.home-business {
|
||
&__head {
|
||
.flex(row, space-between);
|
||
margin-bottom: @spacing-base;
|
||
}
|
||
|
||
&__title {
|
||
font-size: @font-size-xl;
|
||
font-weight: 600;
|
||
color: @heading-color;
|
||
}
|
||
|
||
&__slogan {
|
||
font-size: @font-size-sm;
|
||
}
|
||
|
||
&__grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: @spacing-base;
|
||
}
|
||
|
||
&__card {
|
||
.flex(column, flex-start);
|
||
gap: @spacing-base;
|
||
padding: @spacing-lg;
|
||
border-radius: @radius-lg;
|
||
background: @primary-light;
|
||
box-shadow: @shadow-base;
|
||
transition: transform 0.2s, box-shadow 0.2s;
|
||
|
||
&:hover {
|
||
box-shadow: @shadow-lg;
|
||
transform: translateY(-2px);
|
||
}
|
||
}
|
||
|
||
&__card-head {
|
||
.flex(row, flex-start);
|
||
gap: @spacing-sm;
|
||
}
|
||
|
||
&__icon {
|
||
.flex(row, center);
|
||
flex-shrink: 0;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: @radius-base;
|
||
background: @white;
|
||
color: @primary-color;
|
||
font-size: @font-size-base;
|
||
font-weight: 600;
|
||
}
|
||
|
||
&__name {
|
||
font-size: @font-size-lg;
|
||
font-weight: 600;
|
||
color: @heading-color;
|
||
}
|
||
|
||
&__desc {
|
||
min-height: 40px;
|
||
font-size: @font-size-sm;
|
||
color: @text-color-secondary;
|
||
.multi-ellipsis(2);
|
||
}
|
||
|
||
&__more {
|
||
align-self: flex-end;
|
||
font-size: @font-size-sm;
|
||
color: @text-color-secondary;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
// 四类业务各自的主题色（与设计稿一致：卡片浅色底 + 同色系图标/文案）
|
||
&__card--internet {
|
||
background: #e8f0ff;
|
||
|
||
.home-business__icon {
|
||
color: #3370ff;
|
||
}
|
||
|
||
.home-business__desc,
|
||
.home-business__more {
|
||
color: #598bff;
|
||
}
|
||
}
|
||
|
||
&__card--hardware {
|
||
background: #e7f8ec;
|
||
|
||
.home-business__icon {
|
||
color: #22b14c;
|
||
}
|
||
|
||
.home-business__desc,
|
||
.home-business__more {
|
||
color: #34c724;
|
||
}
|
||
}
|
||
|
||
&__card--iot {
|
||
background: #f0eaff;
|
||
|
||
.home-business__icon {
|
||
color: #7c4dff;
|
||
}
|
||
|
||
.home-business__desc,
|
||
.home-business__more {
|
||
color: #9a7bff;
|
||
}
|
||
}
|
||
|
||
&__card--manufacturing {
|
||
background: #fff2e4;
|
||
|
||
.home-business__icon {
|
||
color: #ff8f1f;
|
||
}
|
||
|
||
.home-business__desc,
|
||
.home-business__more {
|
||
color: #ffa94d;
|
||
}
|
||
}
|
||
}
|
||
</style>
|