feat: 20250704
This commit is contained in:
parent
09c3be2a0c
commit
1c99cb6c75
@ -243,7 +243,16 @@ html, body {
|
||||
/* 防止长英文单词溢出 */
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.text-1-line-ellipsis {
|
||||
/* 核心属性：单行省略 */
|
||||
display: block; /* 或者 inline-block，根据布局需求调整 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap; /* 强制文本在一行显示 */
|
||||
|
||||
/* 兼容性补充（可选，现代浏览器一般已支持基础单行省略） */
|
||||
word-break: break-word;
|
||||
}
|
||||
// 响应式工具类
|
||||
@media (max-width: @mobile-breakpoint) {
|
||||
.mobile-hide { display: none !important; }
|
||||
|
||||
@ -3,47 +3,298 @@
|
||||
<div class="container">
|
||||
<h3 class="section-title">核心价值</h3>
|
||||
<p class="section-desc">友福同享AI健康解决方案应用场景</p>
|
||||
<!-- 替换为实际图示路径 -->
|
||||
<img
|
||||
src="https://images.health.ufutx.com/202506/12/5bbcb1bc1347f58df6a38aecc41dbe30.png"
|
||||
alt="核心价值图示"
|
||||
class="diagram"
|
||||
/>
|
||||
|
||||
<div class="diagram-wrapper" :style="{ backgroundImage: `url(${diagramBg})` }">
|
||||
<!-- 循环渲染所有模块 -->
|
||||
<div v-for="item in modules" :key="item.id" :class="['module', `module-${item.id}`]">
|
||||
<div
|
||||
class="module-content"
|
||||
:class="{
|
||||
hover: isHover === item.id,
|
||||
'hover-delay': isHover === item.id && isDelay[item.id]
|
||||
}"
|
||||
@mouseenter="handleMouseEnter(item.id)"
|
||||
@mouseleave="handleMouseLeave(item.id)"
|
||||
>
|
||||
<div class="icon">
|
||||
<img :src="item.icon" :alt="item.title" />
|
||||
</div>
|
||||
<div class="text">{{ item.title }}</div>
|
||||
<div
|
||||
v-if="isHover === item.id && isDelay[item.id]"
|
||||
class="desc"
|
||||
:class="{ show: isHover === item.id && isDelay[item.id] }"
|
||||
>
|
||||
{{ item.description }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 暂无逻辑，纯展示
|
||||
import { ref } from 'vue'
|
||||
|
||||
// 底图地址
|
||||
const diagramBg = 'https://images.health.ufutx.com/202507/04/3b6a1b49d79c1cd13a59187e58c614a7.png'
|
||||
|
||||
// 模块数据（统一管理）
|
||||
const modules = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'AI赋能精准决策',
|
||||
description: '基于海量数据分析，提供精准的健康风险评估与干预建议。',
|
||||
icon: 'https://images.health.ufutx.com/202507/04/4a47a0db6e60853dedfcfdf08a5ca249.png'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '创新七大核心要素更新人体全局系统',
|
||||
description: '自愈力、免疫力、抵抗力、平衡力、代谢力、情绪力及认知力。',
|
||||
icon: 'https://images.health.ufutx.com/202507/04/4a47a0db6e60853dedfcfdf08a5ca249.png'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '全方位的AI健康管理系统',
|
||||
description: '精准营养方案+心理疏导陪伴+饮食方案+关键要素指导。',
|
||||
icon: 'https://images.health.ufutx.com/202507/04/4a47a0db6e60853dedfcfdf08a5ca249.png'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '双重认证教练团队全程支持',
|
||||
description: '国家卫健委《营养指导员》+营养师协会《身心健康管理师》双证教练服务指导。',
|
||||
icon: 'https://images.health.ufutx.com/202507/04/4a47a0db6e60853dedfcfdf08a5ca249.png'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: '构建健康产业生态',
|
||||
description: '整合产业链协同，链接多方资源，打造开放共赢的智慧健康生态系统。',
|
||||
icon: 'https://images.health.ufutx.com/202507/04/4a47a0db6e60853dedfcfdf08a5ca249.png'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: '创新模式-身心双指标评估，生成精准个性化方案',
|
||||
description:
|
||||
'整合个人身理+心理健康数据、健康行为、个人及家族疾病史及生活方式等多维度数据，全方面分析精准个性化方案。',
|
||||
icon: 'https://images.health.ufutx.com/202507/04/4a47a0db6e60853dedfcfdf08a5ca249.png'
|
||||
}
|
||||
]
|
||||
|
||||
// 控制当前悬浮的模块（0为无悬浮）
|
||||
const isHover = ref<number>(0)
|
||||
// 控制每个模块的延迟状态
|
||||
const isDelay = ref<Record<number, boolean>>({})
|
||||
// 存储定时器ID，用于清除延迟
|
||||
const delayTimer = ref<Record<number, NodeJS.Timeout>>({})
|
||||
|
||||
// 鼠标进入：触发hover状态+延迟布局
|
||||
const handleMouseEnter = (moduleId: number) => {
|
||||
isHover.value = moduleId
|
||||
// 延迟0.4s触发布局变化（等尺寸动画结束）
|
||||
delayTimer.value[moduleId] = setTimeout(() => {
|
||||
isDelay.value[moduleId] = true
|
||||
}, 400)
|
||||
}
|
||||
|
||||
// 鼠标离开：清除状态+定时器
|
||||
const handleMouseLeave = (moduleId: number) => {
|
||||
isHover.value = 0
|
||||
clearTimeout(delayTimer.value[moduleId])
|
||||
isDelay.value[moduleId] = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.core-value {
|
||||
//padding: 80px 0;
|
||||
.pt(100px);
|
||||
//background-color: red;
|
||||
padding: 100px 0;
|
||||
background-color: #fff;
|
||||
|
||||
.container {
|
||||
//max-width: 1200px;
|
||||
width: 100%;
|
||||
max-width: 1920px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
text-align: center;
|
||||
|
||||
.section-title {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
font-size: 20px;
|
||||
color: @text-color-secondary;
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.diagram {
|
||||
//max-width: 800px;
|
||||
width: 1920px;
|
||||
height: auto;
|
||||
.diagram-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 840px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
||||
// 通用模块样式
|
||||
.module {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
|
||||
.module-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 50px;
|
||||
padding: 10px 16px;
|
||||
width: 190px;
|
||||
height: 70px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
transform-origin: center center;
|
||||
transition:
|
||||
height 0.2s ease,
|
||||
width 0.3s ease,
|
||||
transform 1s ease;
|
||||
|
||||
/* 统一过渡时间和缓动函数 */
|
||||
//transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
// 图标样式
|
||||
.icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
flex-shrink: 0;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
// 文字样式（单行省略）
|
||||
.text {
|
||||
width: 130px;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// 描述文本
|
||||
.desc {
|
||||
width: 90%;
|
||||
opacity: 1;
|
||||
visibility: hidden;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
// hover基础动画
|
||||
&.hover {
|
||||
width: 300px;
|
||||
height: auto;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
transform: translateX(-20%);
|
||||
.text {
|
||||
overflow: auto;
|
||||
text-overflow: ellipsis;
|
||||
white-space: pre-wrap;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// 延迟布局样式
|
||||
&.hover-delay {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
align-items: start;
|
||||
justify-items: center;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 各模块定位（与数据ID对应）
|
||||
.module-1 {
|
||||
bottom: 482px;
|
||||
left: 521px;
|
||||
}
|
||||
.module-2 {
|
||||
bottom: 482px;
|
||||
left: 1185px;
|
||||
}
|
||||
.module-3 {
|
||||
bottom: 240px;
|
||||
left: 376px;
|
||||
}
|
||||
.module-4 {
|
||||
bottom: 240px;
|
||||
left: 1328px;
|
||||
}
|
||||
.module-5 {
|
||||
bottom: 83px;
|
||||
left: 852px;
|
||||
}
|
||||
.module-6 {
|
||||
bottom: 381px;
|
||||
left: 842px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式适配
|
||||
@media (max-width: 768px) {
|
||||
.core-value {
|
||||
padding: 60px 0;
|
||||
|
||||
.container {
|
||||
.section-title {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.diagram-wrapper {
|
||||
height: auto;
|
||||
padding-bottom: 150%;
|
||||
|
||||
.module {
|
||||
.module-content {
|
||||
width: 150px;
|
||||
height: 60px;
|
||||
|
||||
.icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.text {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&.hover {
|
||||
width: 250px;
|
||||
height: auto;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
402
src/views/Home/sections/CoreValueV2.vue
Normal file
402
src/views/Home/sections/CoreValueV2.vue
Normal file
@ -0,0 +1,402 @@
|
||||
<template>
|
||||
<section class="core-value">
|
||||
<div class="container">
|
||||
<h3 class="section-title">核心价值</h3>
|
||||
<p class="section-desc">友福同享AI健康解决方案应用场景</p>
|
||||
|
||||
<div class="diagram-wrapper" :style="{ backgroundImage: `url(${diagramBg})` }">
|
||||
<!-- 模块1：AI赋能精准决策 -->
|
||||
<div class="module module-1">
|
||||
<div
|
||||
class="module-content"
|
||||
:class="{ hover: isHover === 1, 'hover-delay': isHover === 1 && isDelay[1] }"
|
||||
@mouseenter="handleMouseEnter(1)"
|
||||
@mouseleave="handleMouseLeave(1)"
|
||||
>
|
||||
<div class="icon">
|
||||
<img src="https://images.health.ufutx.com/202507/04/4a47a0db6e60853dedfcfdf08a5ca249.png" alt="icon" />
|
||||
</div>
|
||||
<div class="text">AI赋能精准决策</div>
|
||||
<div v-if="isHover === 1 && isDelay[1]" class="desc" :class="{ show: isHover === 1 && isDelay[1] }">
|
||||
基于海量数据分析，提供精准的健康风险评估与干预建议。
|
||||
</div>
|
||||
<!-- <div class="desc" :class="{ show: isHover === 1 && isDelay[1] }" v-show="isHover === 1">-->
|
||||
<!-- 基于海量数据分析，提供精准的健康风险评估与干预建议。-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 模块2：创新七大核心 -->
|
||||
<div class="module module-2">
|
||||
<div
|
||||
class="module-content"
|
||||
:class="{ hover: isHover === 2, 'hover-delay': isHover === 2 && isDelay[2] }"
|
||||
@mouseenter="handleMouseEnter(2)"
|
||||
@mouseleave="handleMouseLeave(2)"
|
||||
>
|
||||
<div class="icon">
|
||||
<img src="https://images.health.ufutx.com/202507/04/4a47a0db6e60853dedfcfdf08a5ca249.png" alt="icon" />
|
||||
</div>
|
||||
<div class="text">创新七大核心...</div>
|
||||
<div class="desc" :class="{ show: isHover === 2 && isDelay[2] }">
|
||||
七大核心技术支撑，构建全场景健康服务体系。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 模块3：全方位的AI健... -->
|
||||
<div class="module module-3">
|
||||
<div
|
||||
class="module-content"
|
||||
:class="{ hover: isHover === 3, 'hover-delay': isHover === 3 && isDelay[3] }"
|
||||
@mouseenter="handleMouseEnter(3)"
|
||||
@mouseleave="handleMouseLeave(3)"
|
||||
>
|
||||
<div class="icon">
|
||||
<img src="https://images.health.ufutx.com/202507/04/4a47a0db6e60853dedfcfdf08a5ca249.png" alt="icon" />
|
||||
</div>
|
||||
<div class="text">全方位的AI健...</div>
|
||||
<div class="desc" :class="{ show: isHover === 3 && isDelay[3] }">
|
||||
覆盖全生命周期，提供一站式AI健康管理服务。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 模块4：双重认证教练... -->
|
||||
<div class="module module-4">
|
||||
<div
|
||||
class="module-content"
|
||||
:class="{ hover: isHover === 4, 'hover-delay': isHover === 4 && isDelay[4] }"
|
||||
@mouseenter="handleMouseEnter(4)"
|
||||
@mouseleave="handleMouseLeave(4)"
|
||||
>
|
||||
<div class="icon">
|
||||
<img src="https://images.health.ufutx.com/202507/04/4a47a0db6e60853dedfcfdf08a5ca249.png" alt="icon" />
|
||||
</div>
|
||||
<div class="text">双重认证教练...</div>
|
||||
<div class="desc" :class="{ show: isHover === 4 && isDelay[4] }">
|
||||
专业认证教练团队，提供个性化健康指导方案。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 模块5：构建健康产业... -->
|
||||
<div class="module module-5">
|
||||
<div
|
||||
class="module-content"
|
||||
:class="{ hover: isHover === 5, 'hover-delay': isHover === 5 && isDelay[5] }"
|
||||
@mouseenter="handleMouseEnter(5)"
|
||||
@mouseleave="handleMouseLeave(5)"
|
||||
>
|
||||
<div class="icon">
|
||||
<img src="https://images.health.ufutx.com/202507/04/4a47a0db6e60853dedfcfdf08a5ca249.png" alt="icon" />
|
||||
</div>
|
||||
<div class="text">构建健康产业...</div>
|
||||
<div class="desc" :class="{ show: isHover === 5 && isDelay[5] }">
|
||||
整合产业资源，打造闭环健康服务生态系统。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 模块6：中间模块 -->
|
||||
<div class="module module-6">
|
||||
<div
|
||||
class="module-content"
|
||||
:class="{ hover: isHover === 6, 'hover-delay': isHover === 6 && isDelay[6] }"
|
||||
@mouseenter="handleMouseEnter(6)"
|
||||
@mouseleave="handleMouseLeave(6)"
|
||||
>
|
||||
<div class="icon">
|
||||
<img src="https://images.health.ufutx.com/202507/04/4a47a0db6e60853dedfcfdf08a5ca249.png" alt="icon" />
|
||||
</div>
|
||||
<div class="text">创新模式-身心双指标评估</div>
|
||||
<div class="desc" :class="{ show: isHover === 6 && isDelay[6] }">
|
||||
结合生理与心理健康数据，生成个性化评估方案。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <!– 中心模块 –>-->
|
||||
<!-- <div class="center-module">-->
|
||||
<!-- <div class="center-icon">-->
|
||||
<!-- <img-->
|
||||
<!-- src="https://images.health.ufutx.com/202507/04/4a47a0db6e60853dedfcfdf08a5ca249.png"-->
|
||||
<!-- alt="center icon"-->
|
||||
<!-- />-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="center-title">创新模式-身心双指标评估，生成精准个性化方案</div>-->
|
||||
<!-- <div class="center-desc">-->
|
||||
<!-- 整合个人身理+心理健康数据、健康行为、个人及家族疾病史及生活方式等，多维度数据，全方面分析精准个性化方案-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
// 底图地址
|
||||
const diagramBg = 'https://images.health.ufutx.com/202507/04/3b6a1b49d79c1cd13a59187e58c614a7.png'
|
||||
|
||||
// 控制当前悬浮的模块（0为无悬浮）
|
||||
const isHover = ref<number>(0)
|
||||
// 控制每个模块的延迟状态
|
||||
const isDelay = ref<Record<number, boolean>>({})
|
||||
// 存储定时器ID，用于清除延迟
|
||||
const delayTimer = ref<Record<number, NodeJS.Timeout>>({})
|
||||
|
||||
// 鼠标进入：触发hover状态+延迟布局
|
||||
const handleMouseEnter = (moduleId: number) => {
|
||||
isHover.value = moduleId
|
||||
// 延迟0.4s触发布局变化（等尺寸动画结束）
|
||||
delayTimer.value[moduleId] = setTimeout(() => {
|
||||
isDelay.value[moduleId] = true
|
||||
}, 400)
|
||||
}
|
||||
|
||||
// 鼠标离开：清除状态+定时器
|
||||
const handleMouseLeave = (moduleId: number) => {
|
||||
isHover.value = 0
|
||||
clearTimeout(delayTimer.value[moduleId])
|
||||
isDelay.value[moduleId] = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.core-value {
|
||||
padding: 100px 0;
|
||||
background-color: #fff;
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1920px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
text-align: center;
|
||||
|
||||
.section-title {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.diagram-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 840px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
||||
// 通用模块样式
|
||||
.module {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
/* 移除模块本身的偏移，避免影响子元素定位 */
|
||||
// 模块内容容器（核心样式）
|
||||
.module-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 50px;
|
||||
padding: 10px 16px;
|
||||
width: 190px;
|
||||
height: 70px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
transform-origin: center center; /* 基于自身中心变换 */
|
||||
transition: all 0.8s ease;
|
||||
// hover基础动画（尺寸和缩放）
|
||||
&.hover {
|
||||
width: 300px;
|
||||
height: auto;
|
||||
transform: translateX(-20%); /* 基于中心放大1.1倍，无偏移 */
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
// 延迟布局样式（hover后0.4s生效，切换为网格布局）
|
||||
&.hover-delay {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto; /* 图标区 | 空白区 | 描述区 */
|
||||
align-items: start;
|
||||
justify-items: center;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
padding: 20px; /* 增加内边距，避免内容贴边 */
|
||||
}
|
||||
// 图标样式
|
||||
.icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
flex-shrink: 0; /* 防止图标缩小 */
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
// 文字样式（单行省略）
|
||||
.text {
|
||||
width: 130px;
|
||||
font-size: 18px;
|
||||
color: @text-color;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// 描述文本（默认隐藏，hover后显示在底部）
|
||||
.desc {
|
||||
width: 90%; /* 限制宽度，避免超出容器 */
|
||||
opacity: 1;
|
||||
visibility: hidden;
|
||||
font-size: 14px;
|
||||
color: @text-color-secondary;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
//transition:
|
||||
//opacity 0.3s ease 0.2s,
|
||||
//visibility 0.3s ease 0.2s;
|
||||
&.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 各模块定位（根据设计图微调，确保初始位置正确）
|
||||
.module-1 {
|
||||
bottom: 482px;
|
||||
left: 521px;
|
||||
}
|
||||
.module-2 {
|
||||
top: 288px;
|
||||
right: 521px;
|
||||
}
|
||||
.module-3 {
|
||||
top: 530px;
|
||||
left: 376px;
|
||||
}
|
||||
.module-4 {
|
||||
top: 530px;
|
||||
right: 376px;
|
||||
}
|
||||
.module-5 {
|
||||
top: 687px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%); /* 水平居中 */
|
||||
}
|
||||
.module-6 {
|
||||
bottom: 381px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%); /* 水平居中 */
|
||||
&.hover {
|
||||
width: 300px;
|
||||
height: auto;
|
||||
transform: translateX(-50%) !important; /* 基于中心放大1.1倍，无偏移 */
|
||||
}
|
||||
}
|
||||
|
||||
// 中心模块
|
||||
.center-module {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
|
||||
.center-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin: 0 auto 16px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.center-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.center-desc {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式适配
|
||||
@media (max-width: 768px) {
|
||||
.core-value {
|
||||
padding: 60px 0;
|
||||
|
||||
.container {
|
||||
.section-title {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.diagram-wrapper {
|
||||
height: auto;
|
||||
padding-bottom: 150%; /* 自适应高度 */
|
||||
|
||||
.module {
|
||||
.module-content {
|
||||
width: 150px;
|
||||
height: 60px;
|
||||
|
||||
.icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&.hover {
|
||||
width: 250px;
|
||||
height: 220px;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center-module {
|
||||
width: 80%;
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user