68 lines
1.5 KiB
Vue
68 lines
1.5 KiB
Vue
|
<template>
|
|||
|
|
<section class="health-management">
|
|||
|
|
<div class="management-grid">
|
|||
|
|
<div v-for="(item, i) in managements" :key="i" class="management-item">
|
|||
|
|
<h3 class="item-title">{{ item.title }}</h3>
|
|||
|
|
<p class="item-desc">{{ item.desc }}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
const managements = [
|
|||
|
|
{
|
|||
|
|
title: '精准个性化AI健康管理',
|
|||
|
|
desc: '根据居民健康数据，提供个性化健康干预方案'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '智能健康监测',
|
|||
|
|
desc: '利用可穿戴设备实时监测健康风险'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '医疗资源整合',
|
|||
|
|
desc: '连接基层医疗机构，提升服务可及性'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '健康教育与促进',
|
|||
|
|
desc: '普及健康知识，培育AI+大健康人才'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="less">
|
|||
|
|
.health-management {
|
|||
|
|
padding: 80px 20px;
|
|||
|
|
max-width: 1200px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
|
|||
|
|
.management-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(2, 1fr);
|
|||
|
|
gap: 40px;
|
|||
|
|
|
|||
|
|
@media (max-width: @tablet-breakpoint) {
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.management-item {
|
|||
|
|
background: #fff;
|
|||
|
|
padding: 30px;
|
|||
|
|
border-radius: @border-radius-lg;
|
|||
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
|
|||
|
|
|
|||
|
|
.item-title {
|
|||
|
|
font-size: @font-size-lg;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: @text-color-primary;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
.item-desc {
|
|||
|
|
font-size: @font-size-sm;
|
|||
|
|
color: @text-color-light;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|