105 行
2.6 KiB
Vue
105 行
2.6 KiB
Vue
<template>
|
|
<section class="section section--gray">
|
|
<div class="container">
|
|
<CommonSectionTitle :title="`${subsidiaries.length}家集团企业`" subtitle="各司其职，共同为您的旅行保驾护航" />
|
|
|
|
<!-- 集团母公司 -->
|
|
<div v-if="parent" class="sub-parent">
|
|
<span class="sub-parent-tag">集团母公司</span>
|
|
<h3 class="sub-parent-name">{{ parent.name }}</h3>
|
|
<p class="sub-parent-role">{{ parent.role }}</p>
|
|
<p v-if="parent.established" class="sub-parent-date">成立于{{ formatDate(parent.established) }}</p>
|
|
</div>
|
|
|
|
<!-- 子公司网格 -->
|
|
<div class="sub-grid">
|
|
<div v-for="sub in children" :key="sub.name" class="sub-item">
|
|
<h3 class="sub-name">{{ sub.name }}</h3>
|
|
<p class="sub-role">{{ sub.role }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({ subsidiaries: { type: Array, required: true } })
|
|
|
|
const parent = props.subsidiaries.find(s => s.role.includes('集团母公司') || s.role.includes('母公司'))
|
|
const children = props.subsidiaries.filter(s => s !== parent)
|
|
|
|
function formatDate(dateStr) {
|
|
const [year, month] = dateStr.split('-')
|
|
return `${year}年${parseInt(month)}月`
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.sub-parent {
|
|
max-width: 900px;
|
|
margin: 0 auto @space-xl;
|
|
padding: @space-xl @space-2xl;
|
|
background: @color-bg-white;
|
|
border: 1px solid @color-border;
|
|
border-radius: @border-radius-lg;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
|
text-align: center;
|
|
}
|
|
|
|
.sub-parent-tag {
|
|
display: inline-block;
|
|
font-size: @font-size-xs;
|
|
color: @color-bg-white;
|
|
background: @color-primary;
|
|
padding: 2px 12px;
|
|
border-radius: 20px;
|
|
margin-bottom: @space-sm;
|
|
}
|
|
|
|
.sub-parent-name {
|
|
font-size: @font-size-lg;
|
|
font-weight: @font-weight-bold;
|
|
color: @color-text-primary;
|
|
margin-bottom: @space-xs;
|
|
}
|
|
|
|
.sub-parent-role {
|
|
font-size: @font-size-base;
|
|
color: @color-text-secondary;
|
|
margin-bottom: @space-xs;
|
|
}
|
|
|
|
.sub-parent-date {
|
|
font-size: @font-size-xs;
|
|
color: @color-text-muted;
|
|
margin: 0;
|
|
}
|
|
|
|
.sub-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: @space-md;
|
|
|
|
.respond-md({ grid-template-columns: repeat(2, 1fr); });
|
|
.respond-lg({ grid-template-columns: repeat(2, 1fr); max-width: 900px; margin-left: auto; margin-right: auto; });
|
|
}
|
|
|
|
.sub-item {
|
|
padding: @space-lg;
|
|
background: @color-bg-white;
|
|
border-radius: @border-radius-md;
|
|
border: 1px solid @color-border;
|
|
}
|
|
|
|
.sub-name {
|
|
font-size: @font-size-base;
|
|
color: @color-primary;
|
|
margin-bottom: @space-xs;
|
|
}
|
|
|
|
.sub-role {
|
|
font-size: @font-size-sm;
|
|
color: @color-text-secondary;
|
|
}
|
|
</style>
|