114 lines
2.3 KiB
Vue
114 lines
2.3 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"
|
||
>
|
||
<div class="home-business__icon">
|
||
<!-- TODO(蓝湖): 替换业务图标切图 -->
|
||
<span>{{ line.name.slice(0, 2) }}</span>
|
||
</div>
|
||
<h4 class="home-business__name">
|
||
{{ line.name }}
|
||
</h4>
|
||
<p class="home-business__desc text-secondary">
|
||
{{ 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-sm;
|
||
padding: @spacing-lg;
|
||
border-radius: @radius-lg;
|
||
background: @white;
|
||
box-shadow: @shadow-base;
|
||
transition: transform 0.2s, box-shadow 0.2s;
|
||
|
||
&:hover {
|
||
box-shadow: @shadow-lg;
|
||
transform: translateY(-2px);
|
||
|
||
.home-business__more {
|
||
color: @primary-color;
|
||
}
|
||
}
|
||
}
|
||
|
||
&__icon {
|
||
.flex(row, center);
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: @radius-base;
|
||
background: @primary-light;
|
||
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;
|
||
.multi-ellipsis(2);
|
||
}
|
||
|
||
&__more {
|
||
font-size: @font-size-sm;
|
||
color: @text-color-secondary;
|
||
transition: color 0.2s;
|
||
}
|
||
}
|
||
</style>
|