feat: 20250617 「生态合作、关于我们」等页面布局
This commit is contained in:
parent
cdd632ea25
commit
025ea5e832
@ -4,7 +4,9 @@
|
||||
<p class="section-subtitle">完整的服务生态闭环</p>
|
||||
<div class="advantages-grid">
|
||||
<div v-for="(item, i) in advantages" :key="i" class="advantage-item">
|
||||
<img :src="item.icon" alt="优势图标" class="item-icon" />
|
||||
<div class="section-icon">
|
||||
<img :src="item.icon" alt="优势图标" class="item-icon" />
|
||||
</div>
|
||||
<p class="item-title">{{ item.title }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -14,27 +16,27 @@
|
||||
<script setup lang="ts">
|
||||
const advantages = [
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/eco-adv-1.png',
|
||||
icon: 'https://images.health.ufutx.com/202506/19/cde9fb5a9b0174733c1bd9ae19bb5a51.png',
|
||||
title: 'AI+生命科学创新系统'
|
||||
},
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/eco-adv-2.png',
|
||||
title: '丰富的市场验证与成功案例'
|
||||
icon: 'https://images.health.ufutx.com/202506/19/cde9fb5a9b0174733c1bd9ae19bb5a51.png',
|
||||
title: '市场验证与成功案例'
|
||||
},
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/eco-adv-3.png',
|
||||
icon: 'https://images.health.ufutx.com/202506/19/cde9fb5a9b0174733c1bd9ae19bb5a51.png',
|
||||
title: '独有技术护城河'
|
||||
},
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/eco-adv-4.png',
|
||||
icon: 'https://images.health.ufutx.com/202506/19/cde9fb5a9b0174733c1bd9ae19bb5a51.png',
|
||||
title: '完整的服务生态闭环'
|
||||
},
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/eco-adv-5.png',
|
||||
icon: 'https://images.health.ufutx.com/202506/19/cde9fb5a9b0174733c1bd9ae19bb5a51.png',
|
||||
title: '低风险的合作保障'
|
||||
},
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/eco-adv-6.png',
|
||||
icon: 'https://images.health.ufutx.com/202506/19/cde9fb5a9b0174733c1bd9ae19bb5a51.png',
|
||||
title: '百亿赛道先行者'
|
||||
}
|
||||
]
|
||||
@ -43,24 +45,25 @@ const advantages = [
|
||||
<style scoped lang="less">
|
||||
.core-advantages {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
|
||||
padding: 100px 192px;
|
||||
border-top: 30px solid #f5f7fe;
|
||||
border-bottom: 30px solid #f5f7fe;
|
||||
.section-title {
|
||||
font-size: @font-size-xxl;
|
||||
font-weight: bold;
|
||||
color: @text-color-primary;
|
||||
margin-bottom: 10px;
|
||||
//background: red;
|
||||
color: @text-color;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.section-subtitle {
|
||||
font-size: @font-size-md;
|
||||
font-size: 20px;
|
||||
color: @text-color-secondary;
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.advantages-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 40px;
|
||||
max-width: 1200px;
|
||||
gap: 80px;
|
||||
margin: 0 auto;
|
||||
|
||||
@media (max-width: @tablet-breakpoint) {
|
||||
@ -71,14 +74,29 @@ const advantages = [
|
||||
}
|
||||
}
|
||||
.advantage-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
flex: 1 0 0;
|
||||
.section-icon {
|
||||
display: flex;
|
||||
width: 190px;
|
||||
padding: 2px 25.666px 0px 26.334px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 20px 20px 20px 0px;
|
||||
background: linear-gradient(180deg, rgba(236, 243, 255, 0) 0%, #ecf3ff 100%);
|
||||
}
|
||||
.item-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
width: 138px;
|
||||
height: 138px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.item-title {
|
||||
font-size: @font-size-sm;
|
||||
color: @text-color-primary;
|
||||
font-size: @font-size-lg;
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,14 +3,18 @@
|
||||
<h2 class="section-title">企业/产业链合作</h2>
|
||||
<p class="section-subtitle">从单点受益到生态共赢，重构健康产业价值</p>
|
||||
<div class="cooperation-pyramid">
|
||||
<img src="https://images.health.ufutx.com/202506/18/eco-pyramid.png" alt="金字塔模型" class="pyramid-img" />
|
||||
<img
|
||||
src="https://images.health.ufutx.com/202506/19/31b93a2590b7410aa30de25c430e990c.png"
|
||||
alt="金字塔模型"
|
||||
class="pyramid-img"
|
||||
/>
|
||||
<!-- 标签可动态配置，此处简化 -->
|
||||
<div class="pyramid-labels">
|
||||
<span>终端用户</span>
|
||||
<span>健康设备商/保险/金融</span>
|
||||
<span>友福AI生态中枢平台</span>
|
||||
<span>政府/医疗机构</span>
|
||||
</div>
|
||||
<!-- <div class="pyramid-labels">-->
|
||||
<!-- <span>终端用户</span>-->
|
||||
<!-- <span>健康设备商/保险/金融</span>-->
|
||||
<!-- <span>友福AI生态中枢平台</span>-->
|
||||
<!-- <span>政府/医疗机构</span>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -22,24 +26,24 @@
|
||||
<style scoped lang="less">
|
||||
.enterprise-cooperation {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
padding: 100px 0px;
|
||||
background: #f5f7fe;
|
||||
|
||||
.section-title {
|
||||
font-size: @font-size-xxl;
|
||||
font-weight: bold;
|
||||
color: @text-color-primary;
|
||||
color: @text-color;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.section-subtitle {
|
||||
font-size: @font-size-md;
|
||||
font-size: @font-size-lg;
|
||||
color: @text-color-secondary;
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.cooperation-pyramid {
|
||||
position: relative;
|
||||
.pyramid-img {
|
||||
width: 40%;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.pyramid-labels {
|
||||
|
||||
@ -1,66 +1,174 @@
|
||||
<template>
|
||||
<section class="health-management">
|
||||
<div class="management-grid">
|
||||
<div v-for="(item, i) in managements" :key="i" class="management-item">
|
||||
<!-- 2x2卡片布局 -->
|
||||
<div class="health-grid">
|
||||
<div
|
||||
v-for="(item, index) in sections"
|
||||
:key="index"
|
||||
class="health-item"
|
||||
@mouseenter="highlightSector(index)"
|
||||
@mouseleave="resetHighlight"
|
||||
>
|
||||
<h3 class="item-title">{{ item.title }}</h3>
|
||||
<p class="item-desc">{{ item.desc }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 中间扇形（SVG实现） -->
|
||||
<div class="sector-svg-container">
|
||||
<svg class="sector-svg" viewBox="0 0 400 400">
|
||||
<defs>
|
||||
<linearGradient id="sectorGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#1E6DD8" />
|
||||
<stop offset="100%" stop-color="#4B89DC" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- 圆心平移到(200,200) -->
|
||||
<g transform="translate(200, 200)">
|
||||
<!-- 左上扇形：精准个性化AI健康管理 -->
|
||||
<path d="M0,0 L0,-100 A100,100 0 0,0 -100,0 Z" class="sector" :class="{ active: highlightedSector === 0 }" />
|
||||
<!-- 右上扇形：智能健康监测 -->
|
||||
<path d="M0,0 L100,0 A100,100 0 0,0 0,-100 Z" class="sector" :class="{ active: highlightedSector === 1 }" />
|
||||
<!-- 左下扇形：医疗资源整合 -->
|
||||
<path d="M0,0 L-100,0 A100,100 0 0,0 0,100 Z" class="sector" :class="{ active: highlightedSector === 2 }" />
|
||||
<!-- 右下扇形：健康教育与促进 -->
|
||||
<path d="M0,0 L0,100 A100,100 0 0,0 100,0 Z" class="sector" :class="{ active: highlightedSector === 3 }" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const managements = [
|
||||
import { ref } from 'vue'
|
||||
|
||||
const sections = [
|
||||
{
|
||||
title: '精准个性化AI健康管理',
|
||||
desc: '根据居民健康数据，提供个性化健康干预方案'
|
||||
desc: '根据居民的健康数据和风险评估结果，提供个性化的健康建议和干预措施。制定针对性的全方位健康改善计划，包括精准营养、饮食、运动、心理等方面的辅导。'
|
||||
},
|
||||
{
|
||||
title: '智能健康监测',
|
||||
desc: '利用可穿戴设备实时监测健康风险'
|
||||
desc: '利用可穿戴设备实时收集居民的健康数据，如心率、血压、血糖等。通过大数据分析，对居民的健康状况进行动态监测和风险评估。'
|
||||
},
|
||||
{
|
||||
title: '医疗资源整合',
|
||||
desc: '连接基层医疗机构，提升服务可及性'
|
||||
desc: '连接社区卫生服务中心、乡镇卫生院、诊所等基层医疗机构，为居民提供便捷的医疗服务。实现远程健康管理的执行，提高医疗服务的可达性和效率。'
|
||||
},
|
||||
{
|
||||
title: '健康教育与促进',
|
||||
desc: '普及健康知识，培育AI+大健康人才'
|
||||
desc: '通过社区活动、线上平台等方式，普及健康知识，提高居民的健康意识。健康人才培育场景，协同培训AI+大健康领域新型人才，解决地区人才就业问题'
|
||||
}
|
||||
]
|
||||
|
||||
const highlightedSector = ref(3)
|
||||
|
||||
const highlightSector = (index: number) => {
|
||||
highlightedSector.value = index
|
||||
}
|
||||
|
||||
const resetHighlight = () => {
|
||||
highlightedSector.value = -1
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.health-management {
|
||||
padding: 80px 20px;
|
||||
max-width: 1200px;
|
||||
position: relative;
|
||||
padding: 0px 192px;
|
||||
//max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
.management-grid {
|
||||
.health-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 40px;
|
||||
gap: 10px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
@media (max-width: @tablet-breakpoint) {
|
||||
grid-template-columns: 1fr;
|
||||
.health-item {
|
||||
//width: 762px;
|
||||
padding: 100px 50px;
|
||||
background: #f6f8fe;
|
||||
text-align: left;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
&:nth-child(1) {
|
||||
border-top-left-radius: 8px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
border-top-right-radius: 8px;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
border-bottom-left-radius: 8px;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #e6ebf8;
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 50px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 400;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
.item-desc {
|
||||
font-size: 20px;
|
||||
color: @text-color-secondary;
|
||||
line-height: 34px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
.sector-svg-container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 468px;
|
||||
height: 468px;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.sector-svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sector {
|
||||
fill: #cde2ff;
|
||||
stroke: none;
|
||||
//stroke-width: 10;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.sector.active {
|
||||
fill: url(#sectorGradient);
|
||||
transform: scale(1.05);
|
||||
filter: drop-shadow(0 0 10px rgba(30, 109, 216, 0.5));
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.health-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
|
||||
.health-item {
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
}
|
||||
.item-desc {
|
||||
font-size: @font-size-sm;
|
||||
color: @text-color-light;
|
||||
line-height: 1.6;
|
||||
|
||||
.sector-svg-container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,15 +3,19 @@
|
||||
<h2 class="section-title">医疗健康合作</h2>
|
||||
<p class="section-subtitle">赋能医疗健康产业升级，重新定义数字健康服务标准</p>
|
||||
<div class="cooperation-funnel">
|
||||
<img src="https://images.health.ufutx.com/202506/18/eco-funnel.png" alt="漏斗模型" class="funnel-img" />
|
||||
<img
|
||||
src="https://images.health.ufutx.com/202506/19/61d397f0f9529af1d1c583bb9ff1cc41.png"
|
||||
alt="漏斗模型"
|
||||
class="funnel-img"
|
||||
/>
|
||||
<!-- 标签可动态配置，此处简化 -->
|
||||
<div class="funnel-labels">
|
||||
<span>健康管理中心</span>
|
||||
<span>专科指导</span>
|
||||
<span>轻量化AI赋能</span>
|
||||
<span>数据反哺价值提升</span>
|
||||
<span>全链提效</span>
|
||||
</div>
|
||||
<!-- <div class="funnel-labels">-->
|
||||
<!-- <span>健康管理中心</span>-->
|
||||
<!-- <span>专科指导</span>-->
|
||||
<!-- <span>轻量化AI赋能</span>-->
|
||||
<!-- <span>数据反哺价值提升</span>-->
|
||||
<!-- <span>全链提效</span>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -23,18 +27,18 @@
|
||||
<style scoped lang="less">
|
||||
.medical-cooperation {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
padding: 100px 192px;
|
||||
|
||||
.section-title {
|
||||
font-size: @font-size-xxl;
|
||||
font-weight: bold;
|
||||
color: @text-color-primary;
|
||||
color: @text-color;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.section-subtitle {
|
||||
font-size: @font-size-md;
|
||||
font-size: @font-size-lg;
|
||||
color: @text-color-secondary;
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.cooperation-funnel {
|
||||
position: relative;
|
||||
|
||||
@ -4,8 +4,10 @@
|
||||
<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>
|
||||
<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>
|
||||
@ -15,19 +17,19 @@
|
||||
<script setup lang="ts">
|
||||
const cooperations = [
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/eco-region-1.png',
|
||||
icon: 'https://images.health.ufutx.com/202506/19/f3c8ac06eca308002736e3e42e026265.png',
|
||||
title: 'AI+生命科学创新系统',
|
||||
desc: '国际顶尖AI+健康管理系统，30+项专利技术护航'
|
||||
desc: '创新的友福七维AI健康修复系统，30+独家专利及知识产权支撑，实现真正的生命健康'
|
||||
},
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/eco-region-2.png',
|
||||
icon: 'https://images.health.ufutx.com/202506/19/f3c8ac06eca308002736e3e42e026265.png',
|
||||
title: '丰富的市场验证与成功案例',
|
||||
desc: '已服务50+城市，数千万用户验证，效果显著'
|
||||
desc: '已服务16+国家、70+地区客户，数千例客户成功案例'
|
||||
},
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/eco-region-3.png',
|
||||
icon: 'https://images.health.ufutx.com/202506/19/f3c8ac06eca308002736e3e42e026265.png',
|
||||
title: '独有技术护城河',
|
||||
desc: '核心算法准确率超95%，领先行业30%'
|
||||
desc: '创新AI算法×双模型评估体系，精准度超传统300%'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
@ -35,25 +37,25 @@ const cooperations = [
|
||||
<style scoped lang="less">
|
||||
.region-cooperation {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
background: #f5f7fe;
|
||||
padding: 100px 192px;
|
||||
background: #ffffff;
|
||||
|
||||
.section-title {
|
||||
font-size: @font-size-xxl;
|
||||
font-weight: bold;
|
||||
color: @text-color-primary;
|
||||
margin-bottom: 10px;
|
||||
color: @text-color;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.section-subtitle {
|
||||
font-size: @font-size-md;
|
||||
font-size: @font-size-lg;
|
||||
color: @text-color-secondary;
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.cooperation-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 40px;
|
||||
max-width: 1200px;
|
||||
//max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
@media (max-width: @tablet-breakpoint) {
|
||||
@ -64,25 +66,27 @@ const cooperations = [
|
||||
}
|
||||
}
|
||||
.cooperation-item {
|
||||
background: #fff;
|
||||
background: #f5f7fe;
|
||||
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;
|
||||
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: medium;
|
||||
color: @text-color-primary;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
color: @text-color;
|
||||
}
|
||||
.item-desc {
|
||||
font-size: @font-size-sm;
|
||||
color: @text-color-light;
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,6 +9,7 @@ import Components from 'unplugin-vue-components/vite'
|
||||
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
|
||||
|
||||
import legacy from '@vitejs/plugin-legacy'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
@ -48,7 +49,27 @@ export default defineConfig({
|
||||
svgo: { plugins: [{ name: 'removeViewBox' }] }
|
||||
})
|
||||
],
|
||||
server: {
|
||||
host: '0.0.0.0', // 允许外部访问
|
||||
port: 3000, // 指定端口
|
||||
open: true, // 自动打开浏览器
|
||||
fs: {
|
||||
strict: false // 允许访问项目根目录外的文件
|
||||
},
|
||||
// 代理配置（如有跨域问题）
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:8080',
|
||||
changeOrigin: true,
|
||||
rewrite: path => path.replace(/^\/api/, '')
|
||||
}
|
||||
}
|
||||
},
|
||||
optimizeDeps: {
|
||||
include: ['element-plus'] // 预构建依赖
|
||||
},
|
||||
build: {
|
||||
chunkSizeWarningLimit: 1000, // 增大分块警告阈值
|
||||
rollupOptions: {
|
||||
// external: ['element-plus', 'element-plus/dist/index.css'], // 排除 Element Plus
|
||||
// external: ['element-plus'], // 排除 Element Plus 从打包中
|
||||
|
||||
Loading…
Reference in New Issue
Block a user