145 lines
3.8 KiB
Vue
145 lines
3.8 KiB
Vue
<template>
|
|
<section class="scene-section">
|
|
<h2 class="scene-title">友福同享AI健康解决方案应用场景</h2>
|
|
<div class="scene-list">
|
|
<div v-for="(item, index) in sceneList" :key="index" class="scene-item">
|
|
<div class="scene-inner">
|
|
<img :src="item.icon" alt="场景图标" class="scene-icon" />
|
|
<p class="scene-name">{{ item.name }}</p>
|
|
<p class="scene-desc">{{ item.desc }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const sceneList = [
|
|
{
|
|
name: '地区政府/社区健康服务',
|
|
desc: '提供社区健康管理解决方案，提升居民健康水平，降低医疗成本。',
|
|
icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
|
|
},
|
|
{
|
|
name: '医院体检中心/健康管理机构',
|
|
desc: '智能化健康评估系统，提升体检效率，优化健康管理流程。',
|
|
icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
|
|
},
|
|
{
|
|
name: '企业员工健康管理',
|
|
desc: '降低企业医疗成本，提升员工健康与生产力。',
|
|
icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
|
|
},
|
|
{
|
|
name: '健康产业链供应商',
|
|
desc: '连接健康产业上下游，提供精准数据分析和市场洞察。',
|
|
icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
|
|
},
|
|
{
|
|
name: '健康管理专业培训',
|
|
desc: '提供专业健康管理培训课程，培养行业人才，提升服务质量。',
|
|
icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
|
|
}
|
|
]
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
@import '@/styles/global.less';
|
|
|
|
.scene-section {
|
|
text-align: center;
|
|
background-color: @bg-color;
|
|
|
|
.scene-title {
|
|
font-size: @font-size-xxl;
|
|
font-weight: @font-weight-bold;
|
|
color: @text-color;
|
|
.pb(60px);
|
|
.pt(100px);
|
|
}
|
|
|
|
.scene-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: @space-lg;
|
|
}
|
|
|
|
.scene-item {
|
|
width: 284px;
|
|
height: 336px;
|
|
perspective: 1000px; // 3D透视效果
|
|
cursor: pointer;
|
|
|
|
.scene-inner {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0px 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 16px;
|
|
background: linear-gradient(180deg, #fff 0%, #ecf2ff 100%);
|
|
border-radius: @border-radius-md;
|
|
transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); // 平滑过渡
|
|
|
|
// 初始状态
|
|
.scene-icon {
|
|
width: 150px;
|
|
transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
}
|
|
|
|
.scene-name {
|
|
font-size: @font-size-md;
|
|
font-weight: @font-weight-medium;
|
|
color: @text-color;
|
|
transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
}
|
|
|
|
.scene-desc {
|
|
font-size: @font-size-sm;
|
|
color: @text-color-light;
|
|
line-height: 1.4;
|
|
max-height: 0;
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
margin-top: -10px; // 初始位置向上偏移
|
|
}
|
|
}
|
|
|
|
// 悬停状态
|
|
&:hover .scene-inner {
|
|
transform: translateY(-10px) scale(1.05);
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
|
|
background: linear-gradient(180deg, #fff 0%, #e6f0ff 100%);
|
|
}
|
|
|
|
&:hover .scene-icon {
|
|
transform: scale(1.1);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
&:hover .scene-name {
|
|
color: @primary-color;
|
|
transform: translateY(5px);
|
|
}
|
|
|
|
&:hover .scene-desc {
|
|
max-height: 100px;
|
|
opacity: 1;
|
|
transform: translateY(10px);
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: @tablet-breakpoint) {
|
|
.scene-item {
|
|
width: 100%;
|
|
max-width: 280px;
|
|
}
|
|
}
|
|
</style>
|