forked from dengzhifeng/ufutx-pc-website
94 lines
2.5 KiB
Vue
94 lines
2.5 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">
|
||
<div class="section-icon">
|
||
<img :src="item.icon" alt="合作图标" class="item-icon" />
|
||
<p class="item-title">{{ item.title }}</p>
|
||
</div>
|
||
<p class="item-desc">{{ item.desc }}</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
const cooperations = [
|
||
{
|
||
icon: 'https://images.health.ufutx.com/202506/19/f3c8ac06eca308002736e3e42e026265.png',
|
||
title: 'AI+生命科学创新系统',
|
||
desc: '创新的友福七维AI健康修复系统，30+独家专利及知识产权支撑，实现真正的生命健康'
|
||
},
|
||
{
|
||
icon: 'https://images.health.ufutx.com/202506/19/f3c8ac06eca308002736e3e42e026265.png',
|
||
title: '丰富的市场验证与成功案例',
|
||
desc: '已服务13+国家、70+地区客户，数千例客户成功案例'
|
||
},
|
||
{
|
||
icon: 'https://images.health.ufutx.com/202506/19/f3c8ac06eca308002736e3e42e026265.png',
|
||
title: '独有技术护城河',
|
||
desc: '创新AI算法×双模型评估体系，精准度超传统300%'
|
||
}
|
||
]
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.region-cooperation {
|
||
text-align: center;
|
||
padding: 100px 192px;
|
||
background: #ffffff;
|
||
|
||
.section-title {
|
||
font-size: @font-size-xxl;
|
||
font-weight: bold;
|
||
color: @text-color;
|
||
margin-bottom: 20px;
|
||
}
|
||
.section-subtitle {
|
||
font-size: @font-size-lg;
|
||
color: @text-color-secondary;
|
||
margin-bottom: 60px;
|
||
}
|
||
.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: #f5f7fe;
|
||
padding: 30px;
|
||
text-align: left;
|
||
.section-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
//gap:;
|
||
.item-icon {
|
||
width: 60px;
|
||
height: 60px;
|
||
padding: 10px;
|
||
}
|
||
}
|
||
.item-title {
|
||
font-size: @font-size-lg;
|
||
font-weight: 600;
|
||
color: @text-color;
|
||
}
|
||
.item-desc {
|
||
font-size: @font-size-sm;
|
||
color: @text-color-secondary;
|
||
}
|
||
}
|
||
}
|
||
</style>
|