dengzhifeng/ufutx-pc-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 20250617 「Ai健康、Ai婚恋」页面布局

Browse Source
This commit is contained in:
mac·ufutx 2025-06-17 18:50:41 +08:00
parent 320871c60d
commit a9bc68fd0f
9 changed files with 284 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/router/routes.ts
View File

@ -9,11 +9,11 @@ import type { RouteRecordRaw } from 'vue-router' // 添加type关键字
// import About from '@/views/About/About.vue'
// import About from '@/views/About.vue'
// import I18nDemo from '../views/I18nDemo.vue'
import Layout from '@/layout/Layout.vue'
// import Layout from '@/layout/Layout.vue'
const routes: RouteRecordRaw[] = [
{
path: '/',
component: Layout,
component: () => import('@/layout/Layout.vue'), // 动态导入
children: [
{ path: '', name: 'Home', component: () => import('@/views/Home/Home.vue') },
{ path: 'news', name: 'News', component: () => import('@/views/News/News.vue') },

14
src/views/Network/Network.vue
View File

@ -3,9 +3,12 @@
<!-- Banner 模块-->
<Banner />
<!-- &lt;!&ndash; 核心价值模块&ndash;&gt;-->
<!-- <CoreValue />-->
<SevenDimensions />
<!-- &lt;!&ndash; 应用场景模块&ndash;&gt;-->
<!-- <UseCases />-->
<UseCases />
<OneStopSolution />
<AiHealthProcess />
<CustomerCases />
<!-- &lt;!&ndash; 全球服务模块&ndash;&gt;-->
<!-- <GlobalService />-->
<!-- &lt;!&ndash; 客户反馈模块&ndash;&gt;-->
@ -17,8 +20,11 @@
<script setup lang="ts">
import Banner from './sections/Banner.vue'
// import CoreValue from './sections/CoreValue.vue'
// import UseCases from './sections/UseCases.vue'
import SevenDimensions from './sections/SevenDimensions.vue'
import UseCases from './sections/UseCases.vue'
import OneStopSolution from '@/views/Network/sections/OneStopSolution.vue'
import AiHealthProcess from '@/views/Network/sections/AiHealthProcess.vue'
import CustomerCases from '@/views/Network/sections/CustomerCases.vue'
// import GlobalService from './sections/GlobalService.vue'
// import CustomerFeedback from './sections/CustomerFeedback.vue'
// import Partners from './sections/Partners.vue'

86
src/views/Network/sections/AiHealthProcess.vue Normal file
View File

@ -0,0 +1,86 @@
<template>
<section class="ai-health-process">
<h2 class="section-title">友福AI健康方案流程</h2>
<div class="process-steps">
<img
clas="section-icon"
src="https://images.health.ufutx.com/202506/17/4a36942f896903dbd195e31026483b4a.png"
alt=""
/>
<!-- <div class="step">-->
<!-- <div class="step-number">01</div>-->
<!-- <h3 class="step-title">体检报告</h3>-->
<!-- <p>全方位解析身体的健康数据</p>-->
<!-- </div>-->
<!-- <div class="step">-->
<!-- <div class="step-number">02</div>-->
<!-- <h3 class="step-title">健康信息采集</h3>-->
<!-- <p>个性化健康信息录入</p>-->
<!-- </div>-->
<!-- <div class="step">-->
<!-- <div class="step-number">03</div>-->
<!-- <h3 class="step-title">人工智能分析</h3>-->
<!-- <p>多维度数据智能解读</p>-->
<!-- </div>-->
<!-- <div class="step">-->
<!-- <div class="step-number">04</div>-->
<!-- <h3 class="step-title">定制健康方案</h3>-->
<!-- <p>生成专属健康管理方案</p>-->
<!-- </div>-->
<!-- <div class="step">-->
<!-- <div class="step-number">05</div>-->
<!-- <h3 class="step-title">APP跟踪服务</h3>-->
<!-- <p>实时跟踪健康状态</p>-->
<!-- </div>-->
</div>
</section>
</template>
<script setup lang="ts">
// 无额外逻辑，纯展示
</script>
<style scoped lang="less">
.ai-health-process {
padding: 50px 190px;
text-align: center;
background: #f6f8fe;
.mt(20px);
}
.section-title {
font-size: @font-size-xxl;
color: @text-color;
font-weight: bold;
}
.process-steps {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin-top: 40px;
}
.step {
width: 160px;
margin: 20px;
}
.step-number {
width: 60px;
height: 60px;
border: 2px solid #409eff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: #409eff;
margin: 0 auto 16px;
}
.step-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 8px;
}
.step p {
font-size: 14px;
color: #666;
}
</style>

2
src/views/Network/sections/CustomerFeedback.vue → src/views/Network/sections/CustomerCases.vue
View File

@ -1,6 +1,6 @@
<template>
<section class="feedback-section">
<div class="feedback-title">客户反馈</div>
<div class="feedback-title">真实客户案例</div>
<div class="feedback-list">
<div v-for="(item, index) in feedbackList" :key="index" class="feedback-card">
<div class="avatar-container">

92
src/views/Network/sections/OneStopSolution.vue Normal file
View File

@ -0,0 +1,92 @@
<template>
<section class="one-stop-solution">
<h2 class="section-title">一站式解决身心健康问题</h2>
<p class="section-subtitle">以数据驱动，从根源改善，助力实现可持续的健康提升</p>
<div class="solution-graph">
<img
clas="section-icon"
src="https://images.health.ufutx.com/202506/17/9f4bcbe591f96658e08151466cd5b932.png"
alt=""
/>
</div>
<div class="stats">
<p>超90%以上客户实现长期的健康状态优化</p>
</div>
</section>
</template>
<script setup lang="ts">
// 无额外逻辑，纯展示
</script>
<style scoped lang="less">
.one-stop-solution {
padding: 50px 20px;
text-align: center;
background: radial-gradient(83.44% 50% at 50% 50%, #fff 0%, #e8f0ff 100%);
}
.section-title {
font-size: @font-size-xxl;
color: @text-color;
font-weight: bold;
}
.section-subtitle {
font-size: 20px;
color: @text-color-secondary;
.mt(20px);
}
.solution-graph {
.mt(50px);
//position: relative;
//width: 300px;
//height: 300px;
//margin: 0 auto;
}
.core {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background: #409eff;
border-radius: 50%;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.ring {
position: absolute;
width: 120px;
height: 120px;
border: 2px dashed #409eff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: #409eff;
}
/* 调整环形位置 */
.ring:nth-child(2) {
top: 20px;
left: 90px;
}
.ring:nth-child(3) {
top: 180px;
left: 90px;
}
.ring:nth-child(4) {
top: 90px;
left: 20px;
}
.ring:nth-child(5) {
top: 90px;
right: 20px;
}
.stats {
margin-top: 40px;
font-size: 14px;
color: #666;
}
</style>

123
src/views/Network/sections/Partners.vue
View File

@ -1,123 +0,0 @@
<template>
<section class="partner-section">
<div class="partner-header">
<h2 class="partner-title">合作伙伴</h2>
<p class="partner-subtitle">正与众多客户一起创造更多价值</p>
</div>
<div class="partner-logos">
<div v-for="index in 21" :key="index" class="partner-logo-item">
<!-- <img :src="logo.src" :alt="logo.alt" class="partner-logo" />-->
<img
src="https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png"
alt="新浪健康"
class="partner-logo"
/>
</div>
</div>
</section>
</template>
<script setup lang="ts">
// 使用提供的图片链接作为所有合作伙伴Logo
// const partnerLogos = [
// {
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
// alt: '新浪健康'
// },
// {
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
// alt: '新浪健康'
// },
// {
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
// alt: '新浪健康'
// },
// {
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
// alt: '新浪健康'
// },
// {
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
// alt: '新浪健康'
// },
// {
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
// alt: '新浪健康'
// },
// {
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
// alt: '新浪健康'
// },
// {
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
// alt: '新浪健康'
// }
// ]
</script>
<style scoped lang="less">
@import '@/styles/global.less';
.partner-section {
width: 100%;
text-align: center;
.partner-header {
.my(50px);
.partner-title {
font-size: @font-size-xxl;
font-weight: @font-weight-bold;
color: @text-color;
margin-bottom: @space-sm;
}
.partner-subtitle {
font-size: 20px;
color: @text-color-secondary;
.mt(20px);
}
}
.partner-logos {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: @space-xl;
justify-items: center;
.px(160px);
.pb(50px);
.partner-logo-item {
width: 100%;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
.partner-logo {
width: 230px;
//max-height: 60px;
object-fit: contain;
transition: transform 0.3s ease;
&:hover {
transform: scale(1.1);
}
}
}
}
}
// 响应式适配
@media (max-width: @tablet-breakpoint) {
.partner-logos {
gap: @space-md;
.partner-logo-item {
height: 60px;
}
.partner-logo {
max-height: 40px;
}
}
}
</style>

10
src/views/Network/sections/CoreValue.vue → src/views/Network/sections/SevenDimensions.vue
View File

@ -1,12 +1,12 @@
<template>
<section class="core-value">
<div class="container">
<h3 class="section-title">核心价值</h3>
<p class="section-desc">友福同享AI健康解决方案应用场景</p>
<!-- <h3 class="section-title">核心价值</h3>-->
<!-- <p class="section-desc">友福同享AI健康解决方案应用场景</p>-->
<!-- 替换为实际图示路径 -->
<img
src="https://images.health.ufutx.com/202506/12/5bbcb1bc1347f58df6a38aecc41dbe30.png"
alt="核心价值图示"
src="https://images.health.ufutx.com/202506/17/28710422aa9cf68a38cfbd19abd7ebf0.png"
alt="七大核心维度"
class="diagram"
/>
</div>
@ -20,7 +20,7 @@
<style scoped lang="less">
.core-value {
//padding: 80px 0;
.pt(100px);
//.pt(100px);
//background-color: red;
.container {
//max-width: 1200px;

122
src/views/Network/sections/UseCases.vue
View File

@ -1,11 +1,12 @@
<template>
<section class="scene-section">
<h2 class="scene-title">友福同享AI健康解决方案应用场景</h2>
<!-- <h2 class="scene-title">一站式解决身心健康问题</h2>-->
<!-- <p class="scene-subtitle">以数据驱动，从根源改善，助力实现可持续的健康提升</p>-->
<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-name" v-html="item.name"></p>
<p class="scene-desc">{{ item.desc }}</p>
</div>
</div>
@ -16,29 +17,29 @@
<script setup lang="ts">
const sceneList = [
{
name: '地区政府/社区健康服务',
name: '健康评估<br/>多维度健康评估',
desc: '提供社区健康管理解决方案，提升居民健康水平，降低医疗成本。',
icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
icon: 'https://images.health.ufutx.com/202506/17/e9154a90cda4a24ff0cb3c0fb83795e5.png' // 替换为实际图标
},
{
name: '医院体检中心/健康管理机构',
name: '健康方案<br/>全方位的精准健康方案',
desc: '智能化健康评估系统，提升体检效率，优化健康管理流程。',
icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
icon: 'https://images.health.ufutx.com/202506/17/e9154a90cda4a24ff0cb3c0fb83795e5.png'
},
{
name: '企业员工健康管理',
desc: '降低企业医疗成本，提升员工健康与生产力。',
icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
name: '健康数据<br/>AI健康数据洞察',
desc: '基于生理+心理双指标模型，结合AI多维度模型分析，为组织和个人提供科学精准的健康解决方案。',
icon: 'https://images.health.ufutx.com/202506/17/e9154a90cda4a24ff0cb3c0fb83795e5.png'
},
{
name: '健康产业链供应商',
name: '健康服务团队<br/>双重认证教练团队',
desc: '连接健康产业上下游，提供精准数据分析和市场洞察。',
icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
icon: 'https://images.health.ufutx.com/202506/17/e9154a90cda4a24ff0cb3c0fb83795e5.png'
},
{
name: '健康管理专业培训',
name: '健康监测<br/>实时动态健康监测',
desc: '提供专业健康管理培训课程，培养行业人才，提升服务质量。',
icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
icon: 'https://images.health.ufutx.com/202506/17/e9154a90cda4a24ff0cb3c0fb83795e5.png'
}
]
</script>
@ -48,97 +49,118 @@ const sceneList = [
.scene-section {
text-align: center;
background-color: @bg-color;
background-color: #f5f7fe;
.py(130px);
.scene-title {
font-size: @font-size-xxl;
font-weight: @font-weight-bold;
color: @text-color;
.pb(60px);
.pt(100px);
.pb(20px);
.pt(40px);
}
.scene-subtitle {
font-size: @font-size-md;
color: @text-color-secondary;
max-width: 600px;
margin: 0 auto 80px;
}
.scene-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: @space-lg;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
justify-items: center;
.px(192px);
margin: 0 auto;
}
.scene-item {
width: 284px;
height: 336px;
perspective: 1000px; // 3D透视效果
perspective: 1000px;
cursor: pointer;
width: 100%;
.scene-inner {
position: relative;
width: 100%;
height: 100%;
padding: 0px 16px;
.pt(20px);
.pb(30px);
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); // 平滑过渡
background: #ffffff;
border-radius: @border-radius-lg;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
transition: all 0.4s 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);
width: 291px;
height: 219px;
transition: all 0.4s 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);
font-size: @font-size-lg;
font-weight: bold;
color: @text-color-secondary;
text-align: center;
//background: pink;
.mt(10px);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.scene-desc {
font-size: @font-size-sm;
color: @text-color-light;
line-height: 1.4;
line-height: 25px;
text-align: center;
max-height: 0;
opacity: 0;
.px(20px);
margin-top: 10px;
overflow: hidden;
transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
margin-top: -10px; // 初始位置向上偏移
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
}
// 悬停状态
&: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%);
transform: translateY(-15px) scale(1.05);
box-shadow: 0 15px 35px rgba(50, 120, 255, 0.15);
//background: linear-gradient(180deg, #ffffff 0%, #e6f0ff 100%);
}
&:hover .scene-icon {
transform: scale(1.1);
margin-bottom: 8px;
//transform: scale(1.15);
//margin-bottom: 10px;
}
&:hover .scene-name {
color: @primary-color;
transform: translateY(5px);
}
&:hover .scene-desc {
max-height: 100px;
max-height: 120px;
opacity: 1;
transform: translateY(10px);
}
}
}
@media (max-width: @tablet-breakpoint) {
.scene-list {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: @space-lg;
}
.scene-item {
width: 100%;
max-width: 280px;
height: 280px;
}
}
@media (max-width: @mobile-breakpoint) {
.scene-list {
grid-template-columns: 1fr;
}
}
</style>

32
vite.config.ts
View File

@ -59,24 +59,24 @@ export default defineConfig({
// const componentName = id.split('element-plus/es/components/')[1].split('/')[0]
// return `element-${componentName}`
// }
// if (id.includes('node_modules')) {
// // 将第三方库单独分包（如 axios、vue 等）
// return id.split('node_modules/')[1].split('/')[0]
// }
if (id.includes('node_modules')) {
// 将第三方库单独分包（如 axios、vue 等）
return id.split('node_modules/')[1].split('/')[0]
}
// 1. 将 Element Plus 整体打包为一个 chunk
// 只分割实际使用的库
if (id.includes('vue') || id.includes('vue-router') || id.includes('pinia')) {
return 'vue-vendor'
}
if (id.includes('axios') || id.includes('nprogress')) {
return 'utils'
}
// 不强制分割第三方依赖，让 Vite 自动处理
if (id.includes('node_modules') && !id.includes('@babel') && !id.includes('@types')) {
return undefined // 取消手动分割
}
// if (id.includes('vue') || id.includes('vue-router') || id.includes('pinia')) {
// return 'vue-vendor'
// }
//
// if (id.includes('axios') || id.includes('nprogress')) {
// return 'utils'
// }
//
// // 不强制分割第三方依赖，让 Vite 自动处理
// if (id.includes('node_modules') && !id.includes('@babel') && !id.includes('@types')) {
// return undefined // 取消手动分割
// }
}
}
}