forked from dengzhifeng/ufutx-pc-website
90 lines
2.3 KiB
Vue
90 lines
2.3 KiB
Vue
<template>
|
||
<section class="region-cooperation">
|
||
<h2 class="section-title">地区单位合作</h2>
|
||
<p class="section-subtitle">助力健康中国战略落地，完善健康城市建设</p>
|
||
<div class="cooperation-grid">
|
||
<div v-for="(item, i) in cooperations" :key="i" class="cooperation-item">
|
||
<img :src="item.icon" alt="合作图标" class="item-icon" />
|
||
<p class="item-title">{{ item.title }}</p>
|
||
<p class="item-desc">{{ item.desc }}</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
const cooperations = [
|
||
{
|
||
icon: 'https://images.health.ufutx.com/202506/18/eco-region-1.png',
|
||
title: 'AI+生命科学创新系统',
|
||
desc: '国际顶尖AI+健康管理系统，30+项专利技术护航'
|
||
},
|
||
{
|
||
icon: 'https://images.health.ufutx.com/202506/18/eco-region-2.png',
|
||
title: '丰富的市场验证与成功案例',
|
||
desc: '已服务50+城市，数千万用户验证，效果显著'
|
||
},
|
||
{
|
||
icon: 'https://images.health.ufutx.com/202506/18/eco-region-3.png',
|
||
title: '独有技术护城河',
|
||
desc: '核心算法准确率超95%，领先行业30%'
|
||
}
|
||
]
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.region-cooperation {
|
||
text-align: center;
|
||
padding: 80px 20px;
|
||
background: #f5f7fe;
|
||
|
||
.section-title {
|
||
font-size: @font-size-xxl;
|
||
font-weight: bold;
|
||
color: @text-color-primary;
|
||
margin-bottom: 10px;
|
||
}
|
||
.section-subtitle {
|
||
font-size: @font-size-md;
|
||
color: @text-color-secondary;
|
||
margin-bottom: 40px;
|
||
}
|
||
.cooperation-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 40px;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
|
||
@media (max-width: @tablet-breakpoint) {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
@media (max-width: @mobile-breakpoint) {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
.cooperation-item {
|
||
background: #fff;
|
||
padding: 30px;
|
||
border-radius: @border-radius-lg;
|
||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
|
||
|
||
.item-icon {
|
||
width: 80px;
|
||
height: 80px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.item-title {
|
||
font-size: @font-size-lg;
|
||
font-weight: medium;
|
||
color: @text-color-primary;
|
||
margin-bottom: 10px;
|
||
}
|
||
.item-desc {
|
||
font-size: @font-size-sm;
|
||
color: @text-color-light;
|
||
}
|
||
}
|
||
}
|
||
</style>
|