feat: 20250617 「友福同享app、生态合作」等页面布局
This commit is contained in:
parent
a9bc68fd0f
commit
cdd632ea25
BIN
src/assets/icons/android.png
Normal file
BIN
src/assets/icons/android.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 830 B |
BIN
src/assets/icons/ios.png
Normal file
BIN
src/assets/icons/ios.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 798 B |
@ -30,6 +30,7 @@
|
||||
|
||||
@text-color: #0E0E0E; // 主文本色
|
||||
@text-color-secondary: #66676C; // 次要文本色
|
||||
@text-color-primary: #18CA6E; // 主色调文本
|
||||
@text-color-light: #748EA6; // 浅色文本
|
||||
@bg-color: #fff; // 背景色
|
||||
@bg-color-light: #f5f7fa; // 浅背景色
|
||||
@ -221,6 +222,27 @@ html, body {
|
||||
// 文本工具类
|
||||
.text-bold { font-weight: @font-weight-bold; }
|
||||
.text-muted { color: @text-color-light; }
|
||||
/* 两行文本省略样式 */
|
||||
.text-2-line-ellipsis {
|
||||
/* 核心属性 */
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
|
||||
/* 兼容性补充 */
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-word;
|
||||
white-space: normal;
|
||||
|
||||
/* 可选：自定义省略号样式 */
|
||||
/* 注意：部分浏览器不支持自定义省略号，这是一个实验性属性 */
|
||||
text-overflow: ellipsis;
|
||||
-webkit-text-overflow: ellipsis;
|
||||
|
||||
/* 防止长英文单词溢出 */
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
// 响应式工具类
|
||||
@media (max-width: @mobile-breakpoint) {
|
||||
|
||||
@ -1,31 +1,29 @@
|
||||
<template>
|
||||
<div class="home-page">
|
||||
<!-- Banner 模块-->
|
||||
<Banner />
|
||||
<!-- <!– 核心价值模块–>-->
|
||||
<!-- <CoreValue />-->
|
||||
<!-- <!– 应用场景模块–>-->
|
||||
<!-- <UseCases />-->
|
||||
<!-- <!– 全球服务模块–>-->
|
||||
<!-- <GlobalService />-->
|
||||
<!-- <!– 客户反馈模块–>-->
|
||||
<!-- <CustomerFeedback />-->
|
||||
<!-- <!– 合作伙伴模块–>-->
|
||||
<!-- <Partners />-->
|
||||
<div class="about-page">
|
||||
<BannerCarousel />
|
||||
<CompanyIntro />
|
||||
<RedefineHealth />
|
||||
<CompanyValues />
|
||||
<QualificationCarousel />
|
||||
<MissionVision />
|
||||
<Partners />
|
||||
<!-- <FooterContact />-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Banner from './sections/Banner.vue'
|
||||
// import CoreValue from './sections/CoreValue.vue'
|
||||
// import UseCases from './sections/UseCases.vue'
|
||||
// import GlobalService from './sections/GlobalService.vue'
|
||||
// import CustomerFeedback from './sections/CustomerFeedback.vue'
|
||||
// import Partners from './sections/Partners.vue'
|
||||
import BannerCarousel from './sections/BannerCarousel.vue'
|
||||
import CompanyIntro from './sections/CompanyIntro.vue'
|
||||
import RedefineHealth from './sections/RedefineHealth.vue'
|
||||
import CompanyValues from './sections/CompanyValues.vue'
|
||||
import QualificationCarousel from './sections/QualificationCarousel.vue'
|
||||
import MissionVision from './sections/MissionVision.vue'
|
||||
import Partners from './sections/Partners.vue'
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.home-page {
|
||||
// 可设置全局背景或间距，按需扩展
|
||||
.about-page {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -80,7 +80,8 @@
|
||||
top: 230px;
|
||||
right: 169px;
|
||||
padding: 20px 20px 0 20px;
|
||||
width: 320px;
|
||||
width: 330px;
|
||||
height: 384px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
background: rgba(51, 51, 51, 0.3);
|
||||
111
src/views/About/sections/CompanyIntro.vue
Normal file
111
src/views/About/sections/CompanyIntro.vue
Normal file
@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<section class="company-intro">
|
||||
<div class="intro-content">
|
||||
<div class="intro-card">
|
||||
<h2 class="card-title">简介<br />友福同享</h2>
|
||||
<p class="card-desc">友福同享—<br />AI精准健康的领航者</p>
|
||||
<p class="card-text">
|
||||
友福同享（深圳）智能科技有限公司以人工智能为核心驱动力，专注于生命科学与AI技术融合，打造主动式精准健康管理平台。<br />
|
||||
公司依托先进的算法模型与多维度数据体系，为个人提供精准预测与个性化健康方案，业务覆盖全球20+国家和地区，同时深度赋能企业、政府及医疗健康机构，提供标准化、场景化的AI健康解决方案，构建健康产业新生态。
|
||||
</p>
|
||||
</div>
|
||||
<div class="team-info">
|
||||
<h3 class="team-title">专业团队，引领AI健康未来</h3>
|
||||
<ul class="team-list">
|
||||
<li>汇聚华为/腾讯/IBM技术领袖 + 清华/康奈尔/中科院学术权威，团队具备：</li>
|
||||
<br />
|
||||
<li>✔️ 20年以上跨领域行业经验</li>
|
||||
<li>✔️ 半导体芯片异构、生物医学工程、数字安全等复合技术背景</li>
|
||||
<li>✔️ 联合国组技术标准制定参与经验</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
/* 无业务逻辑 */
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.company-intro {
|
||||
padding: 0px 192px 100px 192px;
|
||||
.intro-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 198px;
|
||||
|
||||
.intro-card {
|
||||
//position: absolute;
|
||||
//top: -430px;
|
||||
//left: 192px;
|
||||
margin-top: -430px;
|
||||
z-index: 9;
|
||||
width: 622px;
|
||||
background: #313fa8;
|
||||
color: #fff;
|
||||
padding: 160px 40px;
|
||||
text-align: left;
|
||||
.card-title {
|
||||
font-size: 80px;
|
||||
.mb(82px);
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 40px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
font-size: @font-size-lg;
|
||||
line-height: 36px;
|
||||
.mt(20px);
|
||||
}
|
||||
}
|
||||
|
||||
.team-info {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
.team-title {
|
||||
font-size: 50px;
|
||||
font-weight: bold;
|
||||
color: @text-color;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.team-list {
|
||||
font-size: @font-size-lg;
|
||||
color: @text-color-secondary;
|
||||
list-style: none;
|
||||
|
||||
line-height: 34px;
|
||||
li {
|
||||
margin: 10px 0;
|
||||
|
||||
&::before {
|
||||
content: ' ';
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @tablet-breakpoint) {
|
||||
padding: 40px 20px;
|
||||
.intro-content {
|
||||
flex-direction: column;
|
||||
|
||||
.intro-card {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.team-info {
|
||||
order: 1;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
180
src/views/About/sections/CompanyValues.vue
Normal file
180
src/views/About/sections/CompanyValues.vue
Normal file
@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<section class="company-values">
|
||||
<h2 class="section-title">企业价值观</h2>
|
||||
<div class="values-tabs">
|
||||
<span
|
||||
v-for="(tab, index) in valueTabs"
|
||||
:key="index"
|
||||
:class="{ active: currentTab === index }"
|
||||
@click="currentTab = index"
|
||||
>{{ tab }}</span
|
||||
>
|
||||
</div>
|
||||
<!-- 健康优先 -->
|
||||
<div v-show="currentTab === 0" class="values-content">
|
||||
<div class="content-row">
|
||||
<div class="content-text">
|
||||
<h3>健康优先</h3>
|
||||
<p>• 优先关注、保障员工的身心健康</p>
|
||||
<p>• 持续输出健康理念与服务，帮助用户预防疾病</p>
|
||||
<p>• 积极推动行业进步，促进全民健康意识提升</p>
|
||||
</div>
|
||||
<div class="content-img">
|
||||
<img src="https://images.health.ufutx.com/202506/18/about-values-1.png" alt="健康优先" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 使命驱动 -->
|
||||
<div v-show="currentTab === 1" class="values-content">
|
||||
<div class="content-row">
|
||||
<div class="content-text">
|
||||
<h3>使命驱动</h3>
|
||||
<p>• 以提升人类生命质量为核心使命</p>
|
||||
<p>• 持续投入研发，推动AI健康技术突破</p>
|
||||
<p>• 让健康管理触达每一个人</p>
|
||||
</div>
|
||||
<div class="content-img">
|
||||
<img src="https://images.health.ufutx.com/202506/18/about-values-2.png" alt="使命驱动" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 鼓励创新 -->
|
||||
<div v-show="currentTab === 2" class="values-content">
|
||||
<div class="content-row">
|
||||
<div class="content-text">
|
||||
<h3>鼓励创新</h3>
|
||||
<p>• 建立创新奖励机制，支持员工突破</p>
|
||||
<p>• 与全球科研机构合作，探索前沿技术</p>
|
||||
<p>• 持续优化产品，引领行业创新方向</p>
|
||||
</div>
|
||||
<div class="content-img">
|
||||
<img src="https://images.health.ufutx.com/202506/18/about-values-3.png" alt="鼓励创新" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 注重成长 -->
|
||||
<div v-show="currentTab === 3" class="values-content">
|
||||
<div class="content-row">
|
||||
<div class="content-text">
|
||||
<h3>注重成长</h3>
|
||||
<p>• 为员工提供丰富的培训与晋升机会</p>
|
||||
<p>• 助力合作伙伴成长，实现生态共赢</p>
|
||||
<p>• 推动行业人才培养，输出专业标准</p>
|
||||
</div>
|
||||
<div class="content-img">
|
||||
<img src="https://images.health.ufutx.com/202506/18/about-values-4.png" alt="注重成长" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 团队精神 -->
|
||||
<div v-show="currentTab === 4" class="values-content">
|
||||
<div class="content-row">
|
||||
<div class="content-text">
|
||||
<h3>团队精神</h3>
|
||||
<p>• 倡导开放协作，打破部门壁垒</p>
|
||||
<p>• 以结果为导向，高效执行</p>
|
||||
<p>• 相互支持，共同攻克行业难题</p>
|
||||
</div>
|
||||
<div class="content-img">
|
||||
<img src="https://images.health.ufutx.com/202506/18/about-values-5.png" alt="团队精神" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 创始人精神 -->
|
||||
<div v-show="currentTab === 5" class="values-content">
|
||||
<div class="content-row">
|
||||
<div class="content-text">
|
||||
<h3>创始人精神</h3>
|
||||
<p>• 坚持长期主义，深耕健康领域</p>
|
||||
<p>• 以用户价值为核心，拒绝短视行为</p>
|
||||
<p>• 永葆创业激情，持续突破自我</p>
|
||||
</div>
|
||||
<div class="content-img">
|
||||
<img src="https://images.health.ufutx.com/202506/18/about-values-6.png" alt="创始人精神" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const valueTabs = ['健康优先', '使命驱动', '鼓励创新', '注重成长', '团队精神', '创始人精神']
|
||||
const currentTab = ref(0)
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.company-values {
|
||||
padding: 80px 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
.section-title {
|
||||
font-size: @font-size-xxl;
|
||||
font-weight: bold;
|
||||
color: @text-color-primary;
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.values-tabs {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
margin-bottom: 40px;
|
||||
|
||||
span {
|
||||
font-size: @font-size-md;
|
||||
color: @text-color-secondary;
|
||||
cursor: pointer;
|
||||
padding-bottom: 5px;
|
||||
border-bottom: 2px solid transparent;
|
||||
|
||||
&.active {
|
||||
color: @primary-color;
|
||||
border-bottom: 2px solid @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.values-content {
|
||||
.content-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 60px;
|
||||
|
||||
.content-text {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
|
||||
h3 {
|
||||
font-size: @font-size-lg;
|
||||
font-weight: bold;
|
||||
color: @text-color-primary;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
p {
|
||||
font-size: @font-size-sm;
|
||||
color: @text-color-light;
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
.content-img {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
img {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @tablet-breakpoint) {
|
||||
.content-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
.content-text {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
84
src/views/About/sections/MissionVision.vue
Normal file
84
src/views/About/sections/MissionVision.vue
Normal file
@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<section class="mission-vision">
|
||||
<div class="mv-content">
|
||||
<div class="mv-text">
|
||||
<h2 class="mv-title">使命与愿景</h2>
|
||||
<p class="mv-desc">使命-提升人类生命质量 —— 愿景-成为健康生活方式的引领者</p>
|
||||
<p class="mv-text-detail">
|
||||
友福同享致力于通过AI技术与生命科学的融合，为每个人提供精准、主动的健康管理方案。<br /><br />
|
||||
我们相信，健康是生命的基石，而科技是推动健康进步的核心力量。未来，我们将持续突破创新，构建更完善的健康生态，让“主动健康”成为全民生活方式。
|
||||
</p>
|
||||
</div>
|
||||
<div class="mv-img">
|
||||
<img src="https://images.health.ufutx.com/202506/18/about-mv.png" alt="使命愿景" class="mv-bg-img" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
/* 无业务逻辑 */
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.mission-vision {
|
||||
padding: 80px 20px;
|
||||
background: #f5f7fe;
|
||||
|
||||
.mv-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
.mv-text {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
|
||||
.mv-title {
|
||||
font-size: @font-size-xxl;
|
||||
font-weight: bold;
|
||||
color: @text-color-primary;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.mv-desc {
|
||||
font-size: @font-size-lg;
|
||||
color: @text-color-secondary;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.mv-text-detail {
|
||||
font-size: @font-size-sm;
|
||||
color: @text-color-light;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
|
||||
.mv-img {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
|
||||
.mv-bg-img {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @tablet-breakpoint) {
|
||||
.mv-content {
|
||||
flex-direction: column;
|
||||
|
||||
.mv-text {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.mv-img {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
75
src/views/About/sections/Partners.vue
Normal file
75
src/views/About/sections/Partners.vue
Normal file
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<section class="partners">
|
||||
<h2 class="section-title">合作伙伴</h2>
|
||||
<p class="section-subtitle">正与众多客户一起创造更多价值</p>
|
||||
<div class="partners-grid">
|
||||
<div v-for="(item, i) in partnerList" :key="i" class="partner-item">
|
||||
<img :src="item.logo" alt="合作伙伴logo" class="partner-logo" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const partnerList = [
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-tencent.png' },
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-sino.png' },
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-alibaba.png' },
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-junyi.png' },
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-sogou.png' },
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-toutiao.png' },
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-sina.png' },
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-sogou.png' },
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-sina.png' },
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-toutiao.png' },
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-acfun.png' },
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-sogou.png' },
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-acfun.png' },
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-toutiao.png' },
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-sogou.png' },
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-sina.png' },
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-toutiao.png' },
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-askdoc.png' }
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.partners {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
|
||||
.section-title {
|
||||
font-size: @font-size-xxl;
|
||||
font-weight: bold;
|
||||
color: @text-color-primary;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: @font-size-md;
|
||||
color: @text-color-secondary;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.partners-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
gap: 40px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
.partner-item {
|
||||
.partner-logo {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
filter: grayscale(100%);
|
||||
transition: filter 0.3s;
|
||||
|
||||
&:hover {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
86
src/views/About/sections/QualificationCarousel.vue
Normal file
86
src/views/About/sections/QualificationCarousel.vue
Normal file
@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<section class="qualification">
|
||||
<h2 class="section-title">资质认证</h2>
|
||||
<p class="section-subtitle">成立至今获得多项荣誉</p>
|
||||
<div class="carousel-container">
|
||||
<button class="carousel-btn prev" @click="slide(-1)">‹</button>
|
||||
<div class="carousel-track" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
|
||||
<div v-for="(item, i) in qualifications" :key="i" class="carousel-slide">
|
||||
<img :src="item.img" alt="资质证书" class="slide-img" />
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-btn next" @click="slide(1)">›</button>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const qualifications = ref([
|
||||
{ img: 'https://images.health.ufutx.com/202506/18/about-cert-1.png' },
|
||||
{ img: 'https://images.health.ufutx.com/202506/18/about-cert-2.png' },
|
||||
{ img: 'https://images.health.ufutx.com/202506/18/about-cert-3.png' },
|
||||
{ img: 'https://images.health.ufutx.com/202506/18/about-cert-4.png' },
|
||||
{ img: 'https://images.health.ufutx.com/202506/18/about-cert-5.png' }
|
||||
])
|
||||
const currentIndex = ref(0)
|
||||
|
||||
const slide = (direction: number) => {
|
||||
currentIndex.value = (currentIndex.value + direction + qualifications.value.length) % qualifications.value.length
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.qualification {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
|
||||
.section-title {
|
||||
font-size: @font-size-xxl;
|
||||
font-weight: bold;
|
||||
color: @text-color-primary;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.section-subtitle {
|
||||
font-size: @font-size-md;
|
||||
color: @text-color-secondary;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.carousel-container {
|
||||
position: relative;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
|
||||
.carousel-track {
|
||||
display: flex;
|
||||
transition: transform 0.5s ease;
|
||||
.carousel-slide {
|
||||
flex: 0 0 100%;
|
||||
.slide-img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.carousel-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 10px 15px;
|
||||
cursor: pointer;
|
||||
font-size: @font-size-lg;
|
||||
|
||||
&.prev {
|
||||
left: 20px;
|
||||
}
|
||||
&.next {
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
93
src/views/About/sections/RedefineHealth.vue
Normal file
93
src/views/About/sections/RedefineHealth.vue
Normal file
@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<section class="redefine-health">
|
||||
<h2 class="section-title">我们重新定义健康未来</h2>
|
||||
<p class="section-subtitle">未来的健康趋势与持久的生活改变</p>
|
||||
<div class="health-grid">
|
||||
<div v-for="(item, i) in healthItems" :key="i" class="health-item">
|
||||
<img :src="item.icon" alt="健康图标" class="item-icon" />
|
||||
<p class="item-title">{{ item.title }}</p>
|
||||
<p class="item-desc">{{ item.desc }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const healthItems = [
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/about-redefine-1.png',
|
||||
title: '生命科学+AI的深度融合',
|
||||
desc: '让人体健康管理像科研一样自然'
|
||||
},
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/about-redefine-2.png',
|
||||
title: '万亿级产业新基建',
|
||||
desc: '从个人健康到城市级智慧医疗的完整生态'
|
||||
},
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/about-redefine-3.png',
|
||||
title: '人人都拥有的数字健康管家',
|
||||
desc: '让真实有效的健康管理普惠全民'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.redefine-health {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
|
||||
.section-title {
|
||||
font-size: @font-size-xxl;
|
||||
font-weight: bold;
|
||||
color: @text-color-primary;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: @font-size-md;
|
||||
color: @text-color-secondary;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.health-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 40px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
@media (max-width: @tablet-breakpoint) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
@media (max-width: @mobile-breakpoint) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.health-item {
|
||||
background: #fff;
|
||||
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;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: @font-size-lg;
|
||||
font-weight: medium;
|
||||
color: @text-color-primary;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.item-desc {
|
||||
font-size: @font-size-sm;
|
||||
color: @text-color-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,31 +1,50 @@
|
||||
<template>
|
||||
<div class="home-page">
|
||||
<!-- Banner 模块-->
|
||||
<div class="app-page">
|
||||
<Banner />
|
||||
<!-- <!– 核心价值模块–>-->
|
||||
<!-- <CoreValue />-->
|
||||
<!-- <!– 应用场景模块–>-->
|
||||
<!-- <UseCases />-->
|
||||
<!-- <!– 全球服务模块–>-->
|
||||
<!-- <GlobalService />-->
|
||||
<!-- <!– 客户反馈模块–>-->
|
||||
<!-- <CustomerFeedback />-->
|
||||
<!-- <!– 合作伙伴模块–>-->
|
||||
<!-- <Partners />-->
|
||||
|
||||
<div class="section-divider">全方位健康生活方式的引领者</div>
|
||||
<FeatureNav />
|
||||
<HealthDevice :device="healthBand" />
|
||||
<SpeechModule />
|
||||
<HealthDevice :device="bodyScale" />
|
||||
<ApplicationScenes />
|
||||
<DownloadSection />
|
||||
<!-- <FooterContact />-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Banner from './sections/Banner.vue'
|
||||
// import CoreValue from './sections/CoreValue.vue'
|
||||
// import UseCases from './sections/UseCases.vue'
|
||||
// import GlobalService from './sections/GlobalService.vue'
|
||||
// import CustomerFeedback from './sections/CustomerFeedback.vue'
|
||||
// import Partners from './sections/Partners.vue'
|
||||
import HealthDevice from './sections/HealthDevice.vue'
|
||||
import SpeechModule from './sections/SpeechModule.vue'
|
||||
import ApplicationScenes from './sections/ApplicationScenes.vue'
|
||||
import DownloadSection from './sections/DownloadSection.vue'
|
||||
import FeatureNav from '@/views/App/sections/FeatureNav.vue'
|
||||
|
||||
const healthBand = {
|
||||
title: '健康手环',
|
||||
desc: 'AI精准个性化健康方案服务<br/>智能穿戴设备数据监测，健康手环/你的专属健康管家，智能体脂秤、精准计算身体状态',
|
||||
img: 'https://images.health.ufutx.com/202506/18/2e9c9d64bdcf03fbe5041720f03033ca.png'
|
||||
}
|
||||
|
||||
const bodyScale = {
|
||||
title: '智能体脂秤',
|
||||
desc: 'AI精准个性化健康方案服务<br/>智能穿戴设备数据监测，健康手环/你的专属健康管家，智能体脂秤、精准计算身体状态',
|
||||
img: 'https://images.health.ufutx.com/202506/18/8bac1effee823f0f85b164e20b7ab08e.png'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.home-page {
|
||||
// 可设置全局背景或间距，按需扩展
|
||||
.app-page {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.section-divider {
|
||||
text-align: center;
|
||||
font-size: 50px;
|
||||
color: @text-color;
|
||||
font-weight: bold;
|
||||
.mt(100px);
|
||||
}
|
||||
</style>
|
||||
|
||||
198
src/views/App/sections/ApplicationScenes.vue
Normal file
198
src/views/App/sections/ApplicationScenes.vue
Normal file
@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<section class="app-scenes">
|
||||
<h3 class="app-title">应用场景</h3>
|
||||
<!-- <div class="scenes-tabs">-->
|
||||
<!-- <span v-for="(tab, i) in tabs" :key="i" :class="{ active: currentTab === i }" @click="currentTab = i">{{-->
|
||||
<!-- tab-->
|
||||
<!-- }}</span>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- 标签切换（友福动态 / 媒体报道） -->
|
||||
<el-tabs v-model="activeTab" class="news-tabs" @tab-click="resetPage">
|
||||
<el-tab-pane label="友福健康生态" name="dynamic"></el-tab-pane>
|
||||
<el-tab-pane label="幸福婚恋" name="report"></el-tab-pane>
|
||||
<el-tab-pane label="个人成长" name="growth"></el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<div v-show="currentTab === 0" class="scenes-content">
|
||||
<div class="scene-desc">
|
||||
<div class="speech-title">
|
||||
<img class="icon" src="https://images.health.ufutx.com/202506/18/2874b7295fd3fd2490838369b17affd3.png" />
|
||||
<p>友福健康生态</p>
|
||||
</div>
|
||||
<p class="speech-subtitle">
|
||||
AI精准个性化健康方案服务：透过友福七维AI健康修复系统分析多维度身心健康数据，量身打造专属的精准健康管理方案。<br />
|
||||
智能穿戴设备数据监测：搭载AI模型算法的智能穿戴设备，医用级精度实时监测您的体温、睡眠、心率、血氧、血压等多项生理参数，时刻守护您的身心健康。<br />
|
||||
友福商城：精选高品质、值得信赖的健康生活好物，为您的健康生活严格把关。
|
||||
</p>
|
||||
</div>
|
||||
<div class="scene-img">
|
||||
<img src="https://images.health.ufutx.com/202506/18/d2b5ca33bd970f64a6301fa75ae2eb22.png" alt="健康生态" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="currentTab === 1" class="scenes-content">
|
||||
<div class="scene-desc">
|
||||
<p class="speech-title">
|
||||
幸福婚恋板块专注为单身用户打造高效、真实的交友环境，通过AI精准匹配、身份验证体系、以及个性化社交标签，
|
||||
</p>
|
||||
<p>帮助用户快速找到契合的伴侣，同时提供恋爱指导、关系维护等延伸服务，让爱情更长久。</p>
|
||||
</div>
|
||||
<div class="scene-img">
|
||||
<!-- <img src="@/assets/scene-dating.png" alt="幸福婚恋" />-->
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="currentTab === 2" class="scenes-content">
|
||||
<div class="scene-desc">
|
||||
<p>个人成长模块聚焦用户的职业与个人能力提升，提供AI驱动的演讲训练、知识学习、以及社交技巧课程，</p>
|
||||
<p>帮助用户突破社交瓶颈，提升自信，在职业与生活中实现全面成长。</p>
|
||||
</div>
|
||||
<div class="scene-img">
|
||||
<!-- <img src="@/assets/scene-growth.png" alt="个人成长" />-->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const tabs = ['友福健康生态', '幸福婚恋', '个人成长']
|
||||
|
||||
const activeTab = ref('dynamic') // 默认显示“友福动态”
|
||||
const currentTab = ref(0)
|
||||
|
||||
const resetPage = () => {
|
||||
// currentPage.value = 1 // 切换标签时重置页码
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
/* 标签切换样式（还原设计的蓝色下划线） */
|
||||
.news-tabs {
|
||||
.py(50px);
|
||||
:deep(.el-tabs__nav-wrap) {
|
||||
//margin-bottom: 1.04167vw;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
height: 0.5px;
|
||||
background-color: #b5b5b5;
|
||||
z-index: var(--el-index-normal);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-tabs__active-bar) {
|
||||
background-color: @primary-dark; // 下划线颜色
|
||||
height: 3px;
|
||||
bottom: -10px !important;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__header) {
|
||||
margin: 0;
|
||||
.el-tabs__nav {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
gap: 100px;
|
||||
.el-tabs__item {
|
||||
font-size: @font-size-lg;
|
||||
color: @text-color-secondary;
|
||||
|
||||
&.is-active {
|
||||
color: @primary-dark; // 激活态文字颜色
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.news-tabs {
|
||||
// 关键：让选项卡居中
|
||||
:deep(.el-tabs__header) {
|
||||
width: 100%; // 占满容器宽度，为居中提供基础
|
||||
.el-tabs__nav {
|
||||
justify-content: center; // 水平居中对齐
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-scenes {
|
||||
text-align: center;
|
||||
padding: 0 192px;
|
||||
.app-title {
|
||||
color: @text-color;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
line-height: 32px; /* 100% */
|
||||
letter-spacing: 0.32px;
|
||||
//.mb(50px);
|
||||
}
|
||||
.scenes-tabs {
|
||||
margin-bottom: 40px;
|
||||
|
||||
span {
|
||||
margin: 0 20px;
|
||||
font-size: @font-size-md;
|
||||
color: @text-color-secondary;
|
||||
cursor: pointer;
|
||||
padding-bottom: 5px;
|
||||
border-bottom: 2px solid transparent;
|
||||
|
||||
&.active {
|
||||
color: @primary-color;
|
||||
border-bottom: 2px solid @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scenes-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 30px;
|
||||
.scene-desc {
|
||||
width: 600px;
|
||||
text-align: left;
|
||||
padding: 0 40px;
|
||||
.speech-title {
|
||||
color: @text-color;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
display: flex; // 启用 Flex 布局
|
||||
align-items: center; // 子元素垂直居中
|
||||
gap: 10px;
|
||||
.mb(20px);
|
||||
.icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
.speech-subtitle {
|
||||
color: @text-color;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.scene-img {
|
||||
text-align: center;
|
||||
width: 600px;
|
||||
img {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @tablet-breakpoint) {
|
||||
flex-direction: column;
|
||||
.scene-desc {
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -4,56 +4,56 @@
|
||||
<!-- 替换为实际背景图路径 -->
|
||||
<img src="https://images.health.ufutx.com/202506/13/19ee6e89c397511fef5ba05d9798cc76.png" alt="Banner背景" />
|
||||
</div>
|
||||
<!-- <div class="news-panel">-->
|
||||
<!-- <div-->
|
||||
<!-- v-for="(item, index) in newsList"-->
|
||||
<!-- :key="index"-->
|
||||
<!-- class="news-item"-->
|
||||
<!-- :class="{ active: activeIndex === index }"-->
|
||||
<!-- @mouseenter="activeIndex = index"-->
|
||||
<!-- @mouseleave="activeIndex = null"-->
|
||||
<!-- >-->
|
||||
<!-- <div class="icon">-->
|
||||
<!-- <img :src="activeIndex === index ? item.hoverIcon : item.icon" />-->
|
||||
<!-- </div>-->
|
||||
<!-- <span class="text">{{ item.title }}</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<div class="news-panel">
|
||||
<div
|
||||
v-for="(item, index) in newsList"
|
||||
:key="index"
|
||||
class="news-item"
|
||||
:class="{ active: activeIndex === index }"
|
||||
@mouseenter="activeIndex = index"
|
||||
@mouseleave="activeIndex = null"
|
||||
>
|
||||
<div class="icon">
|
||||
<img :src="activeIndex === index ? item.hoverIcon : item.icon" />
|
||||
</div>
|
||||
<span class="text">{{ item.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// import { ref } from 'vue'
|
||||
|
||||
// const activeIndex = ref<number | null>(null)
|
||||
const activeIndex = ref<number | null>(null)
|
||||
//
|
||||
// const newsList = [
|
||||
// {
|
||||
// title: '新闻！热门健康方案服务',
|
||||
// icon: 'https://images.health.ufutx.com/202506/13/2acac19e00b1621a7fc2143323deafd7.png',
|
||||
// hoverIcon: 'https://images.health.ufutx.com/202506/13/2acac19e00b1621a7fc2143323deafd7.png'
|
||||
// },
|
||||
// {
|
||||
// title: '新闻专访！健康方案',
|
||||
// icon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png',
|
||||
// hoverIcon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png'
|
||||
// },
|
||||
// {
|
||||
// title: '新闻！健康方案专访频道',
|
||||
// icon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png',
|
||||
// hoverIcon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png'
|
||||
// },
|
||||
// {
|
||||
// title: '专访新闻！健康方案',
|
||||
// icon: 'https://images.health.ufutx.com/202506/13/27550d3aa8786ca56a1b73f64967d45d.png',
|
||||
// hoverIcon: 'https://images.health.ufutx.com/202506/13/27550d3aa8786ca56a1b73f64967d45d.png'
|
||||
// },
|
||||
// {
|
||||
// title: '新闻！健康方案专访频道',
|
||||
// icon: 'https://images.health.ufutx.com/202506/13/11ccc759cfe3bbbc27ff9bcd34f074d0.png',
|
||||
// hoverIcon: 'https://images.health.ufutx.com/202506/13/11ccc759cfe3bbbc27ff9bcd34f074d0.png'
|
||||
// }
|
||||
// ]
|
||||
const newsList = [
|
||||
{
|
||||
title: '新闻！热门健康方案服务',
|
||||
icon: 'https://images.health.ufutx.com/202506/13/2acac19e00b1621a7fc2143323deafd7.png',
|
||||
hoverIcon: 'https://images.health.ufutx.com/202506/13/2acac19e00b1621a7fc2143323deafd7.png'
|
||||
},
|
||||
{
|
||||
title: '新闻专访！健康方案',
|
||||
icon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png',
|
||||
hoverIcon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png'
|
||||
},
|
||||
{
|
||||
title: '新闻！健康方案专访频道',
|
||||
icon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png',
|
||||
hoverIcon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png'
|
||||
},
|
||||
{
|
||||
title: '专访新闻！健康方案',
|
||||
icon: 'https://images.health.ufutx.com/202506/13/27550d3aa8786ca56a1b73f64967d45d.png',
|
||||
hoverIcon: 'https://images.health.ufutx.com/202506/13/27550d3aa8786ca56a1b73f64967d45d.png'
|
||||
},
|
||||
{
|
||||
title: '新闻！健康方案专访频道',
|
||||
icon: 'https://images.health.ufutx.com/202506/13/11ccc759cfe3bbbc27ff9bcd34f074d0.png',
|
||||
hoverIcon: 'https://images.health.ufutx.com/202506/13/11ccc759cfe3bbbc27ff9bcd34f074d0.png'
|
||||
}
|
||||
]
|
||||
// 暂无逻辑，纯展示
|
||||
</script>
|
||||
|
||||
@ -80,7 +80,8 @@
|
||||
top: 230px;
|
||||
right: 169px;
|
||||
padding: 20px 20px 0 20px;
|
||||
width: 320px;
|
||||
width: 330px;
|
||||
height: 384px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
background: rgba(51, 51, 51, 0.3);
|
||||
|
||||
120
src/views/App/sections/DownloadSection.vue
Normal file
120
src/views/App/sections/DownloadSection.vue
Normal file
@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<section class="app-promotion">
|
||||
<!-- <div class="section-bg">-->
|
||||
<!-- <h2 class="section-title">提供专属健康服务和服务方案</h2>-->
|
||||
<!-- <el-button type="primary" class="consult-btn"> 领取您的AI健康解决方案 </el-button>-->
|
||||
<!-- </div>-->
|
||||
<div class="app-download">
|
||||
<div class="app-item">
|
||||
<div class="app-section">
|
||||
<img src="@/assets/icons/ios.png" alt="iOS" />
|
||||
<p><span class="_text">iOS</span>客户端</p>
|
||||
</div>
|
||||
<span>版本号：1.1.1</span>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<div class="app-section">
|
||||
<img src="@/assets/icons/android.png" alt="Android" />
|
||||
<p><span class="_text">Android</span>客户端</p>
|
||||
</div>
|
||||
<span>版本号：1.1.1</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.app-promotion {
|
||||
text-align: center;
|
||||
.pt(50px);
|
||||
background: #ffffff;
|
||||
}
|
||||
.section-bg {
|
||||
.pt(36px);
|
||||
.pb(36px);
|
||||
background-image: url('https://images.health.ufutx.com/202506/18/e403f857ad7385ea660987cbcbdcf198.png');
|
||||
}
|
||||
.section-title {
|
||||
font-weight: bold;
|
||||
font-size: 30px;
|
||||
padding: 10px;
|
||||
.mb(10px);
|
||||
}
|
||||
.consult-btn {
|
||||
//display: flex;
|
||||
height: 57px;
|
||||
padding: 16px 30px;
|
||||
border-radius: 10px;
|
||||
background: var(--Style, #1060ff);
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
.mt(10px);
|
||||
}
|
||||
.app-download {
|
||||
height: 620px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
width: 100%;
|
||||
background-image: url('https://images.health.ufutx.com/202506/18/f27ffc4b59df0dc6f53133bb1115b44a.png');
|
||||
background-size: cover;
|
||||
}
|
||||
.app-item {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
width: 408px;
|
||||
height: 150px;
|
||||
padding: 50px 50px 30px 50px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 30px;
|
||||
background: var(--ffffff, #fff);
|
||||
.mt(428px);
|
||||
.app-section {
|
||||
.flex-center();
|
||||
}
|
||||
._text {
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.app-item img {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.app-item p {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
.ml(3px);
|
||||
}
|
||||
.app-item span {
|
||||
font-size: 15px;
|
||||
color: #666;
|
||||
letter-spacing: 0.9px;
|
||||
}
|
||||
.contact-info {
|
||||
margin-top: 40px;
|
||||
}
|
||||
.contact-info p {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin: 8px 0;
|
||||
}
|
||||
.qrcode-group {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.qrcode-group img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
</style>
|
||||
134
src/views/App/sections/FeatureNav.vue
Normal file
134
src/views/App/sections/FeatureNav.vue
Normal file
@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<div class="feature-nav">
|
||||
<div
|
||||
v-for="(item, index) in navList"
|
||||
:key="index"
|
||||
class="nav-item"
|
||||
:class="{ active: item.active }"
|
||||
@click="handleSelect(index)"
|
||||
>
|
||||
<div class="nav-icon" :style="{ backgroundImage: `url(${item.icon})` }"></div>
|
||||
<span class="nav-text">{{ item.text }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const navList = ref([
|
||||
{
|
||||
text: '健康手环',
|
||||
active: true,
|
||||
icon: 'https://images.health.ufutx.com/202506/18/4aae244f94bbf8bf352e8ab8e2270a81.png'
|
||||
},
|
||||
{
|
||||
text: '智能体脂秤',
|
||||
active: false,
|
||||
icon: 'https://images.health.ufutx.com/202506/18/4aae244f94bbf8bf352e8ab8e2270a81.png'
|
||||
},
|
||||
{
|
||||
text: '商城',
|
||||
active: false,
|
||||
icon: 'https://images.health.ufutx.com/202506/18/4aae244f94bbf8bf352e8ab8e2270a81.png'
|
||||
},
|
||||
{
|
||||
text: '个人成长',
|
||||
active: false,
|
||||
icon: 'https://images.health.ufutx.com/202506/18/4aae244f94bbf8bf352e8ab8e2270a81.png'
|
||||
},
|
||||
{
|
||||
text: '单身标签',
|
||||
active: false,
|
||||
icon: 'https://images.health.ufutx.com/202506/18/4aae244f94bbf8bf352e8ab8e2270a81.png'
|
||||
}
|
||||
])
|
||||
|
||||
const handleSelect = (index: number) => {
|
||||
navList.value.forEach((item, i) => {
|
||||
item.active = i === index
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '@/styles/global.less';
|
||||
|
||||
.feature-nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 50px;
|
||||
padding-top: 50px;
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
&:not(:first-child)::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -30px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 1px;
|
||||
height: 12px;
|
||||
background-color: #cccccc;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
width: 12px;
|
||||
height: 20px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.nav-text {
|
||||
font-size: 26px;
|
||||
color: @text-color-secondary;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.nav-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
.nav-text {
|
||||
color: #18ca6e;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover:not(.active) {
|
||||
.nav-icon {
|
||||
opacity: 0.8;
|
||||
}
|
||||
.nav-text {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式适配 */
|
||||
@media (max-width: @tablet-breakpoint) {
|
||||
.feature-nav {
|
||||
gap: 40px;
|
||||
.nav-item {
|
||||
&:not(:first-child)::before {
|
||||
left: -20px;
|
||||
height: 8px;
|
||||
}
|
||||
.nav-text {
|
||||
font-size: @font-size-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
125
src/views/App/sections/HealthDevice.vue
Normal file
125
src/views/App/sections/HealthDevice.vue
Normal file
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<section class="health-device">
|
||||
<div class="device-content">
|
||||
<div class="device-img">
|
||||
<img :src="device.img" alt="设备界面" />
|
||||
</div>
|
||||
<div class="device-info">
|
||||
<h3 class="device-title">{{ device.title }}</h3>
|
||||
<h3 class="device-subtitle">AI精准个性化健康方案服务</h3>
|
||||
<p class="device-desc" v-html="device.desc"></p>
|
||||
<el-button type="success" class="download-btn">立即下载</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElButton } from 'element-plus'
|
||||
import FeatureNav from '@/views/App/sections/FeatureNav.vue'
|
||||
|
||||
const props = defineProps({
|
||||
device: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({
|
||||
title: '健康手环',
|
||||
desc: 'AI精准个性化健康方案服务',
|
||||
img: 'https://images.health.ufutx.com/202506/18/2e9c9d64bdcf03fbe5041720f03033ca.png'
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '@/styles/global.less';
|
||||
|
||||
.health-device {
|
||||
padding: 50px 192px 80px 192px;
|
||||
background: #fff;
|
||||
|
||||
.section-divider {
|
||||
text-align: center;
|
||||
font-size: 50px;
|
||||
color: @text-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
.device-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
//justify-content: space-between;
|
||||
gap: 132px;
|
||||
|
||||
.device-img {
|
||||
//flex: 1;
|
||||
//text-align: center;
|
||||
width: 900px;
|
||||
height: 716px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
img {
|
||||
width: 100%;
|
||||
background: #f6fffa;
|
||||
}
|
||||
}
|
||||
|
||||
.device-info {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
|
||||
.device-title {
|
||||
color: #18ca6e;
|
||||
font-size: 36px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
}
|
||||
.device-subtitle {
|
||||
color: #0e0e0e;
|
||||
font-size: 36px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
}
|
||||
.device-desc {
|
||||
color: var(--66676-c, #66676c);
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 36px; /* 180% */
|
||||
text-transform: capitalize;
|
||||
.my(30px);
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
display: flex;
|
||||
padding: 16px 30px;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
border-radius: 100px;
|
||||
border: 1px solid var(--18-ca-6-e, #18ca6e);
|
||||
background: #18ca6e;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @tablet-breakpoint) {
|
||||
flex-direction: column;
|
||||
padding: 40px 20px;
|
||||
|
||||
.device-content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
.device-info {
|
||||
.device-desc {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
104
src/views/App/sections/SpeechModule.vue
Normal file
104
src/views/App/sections/SpeechModule.vue
Normal file
@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<section class="speech-module">
|
||||
<div class="speech-content">
|
||||
<div class="speech-info">
|
||||
<h3 class="speech-title">1分钟演讲</h3>
|
||||
<p class="speech-subtitle">每日演讲练习 开场不再词穷</p>
|
||||
<p class="speech-desc">
|
||||
跨出社交圈，“一分钟演讲”<br />
|
||||
立即让未来的灵魂伴侣更了解你，轻松打开话题
|
||||
</p>
|
||||
<el-button type="success" class="download-btn">立即下载</el-button>
|
||||
</div>
|
||||
<div class="speech-img">
|
||||
<!-- <img src="@/assets/speech-app.png" alt="演讲界面" />-->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElButton } from 'element-plus'
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '@/styles/global.less';
|
||||
|
||||
.speech-module {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 0px 192px;
|
||||
height: 1003px;
|
||||
background-image: url('https://images.health.ufutx.com/202506/18/84b3dbef5488efa0b793acb28d2a732f.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
|
||||
.speech-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 444px;
|
||||
//background: red;
|
||||
.speech-info {
|
||||
//flex: 1;
|
||||
text-align: left;
|
||||
.speech-title {
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
color: @text-color-primary;
|
||||
}
|
||||
|
||||
.speech-subtitle {
|
||||
font-size: 36px;
|
||||
color: @text-color;
|
||||
.mt(10px);
|
||||
}
|
||||
|
||||
.speech-desc {
|
||||
font-size: 20px;
|
||||
color: @text-color-secondary;
|
||||
line-height: 36px;
|
||||
.my(30px);
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
display: flex;
|
||||
padding: 16px 30px;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
border-radius: 100px;
|
||||
border: 1px solid var(--18-ca-6-e, #18ca6e);
|
||||
background: #18ca6e;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.speech-img {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @tablet-breakpoint) {
|
||||
flex-direction: column;
|
||||
padding: 40px 20px;
|
||||
|
||||
.speech-content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
.speech-info {
|
||||
.speech-desc {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,31 +1,22 @@
|
||||
<template>
|
||||
<div class="home-page">
|
||||
<!-- Banner 模块-->
|
||||
<div class="dating-page">
|
||||
<Banner />
|
||||
<!-- <!– 核心价值模块–>-->
|
||||
<!-- <CoreValue />-->
|
||||
<!-- <!– 应用场景模块–>-->
|
||||
<!-- <UseCases />-->
|
||||
<!-- <!– 全球服务模块–>-->
|
||||
<!-- <GlobalService />-->
|
||||
<!-- <!– 客户反馈模块–>-->
|
||||
<!-- <CustomerFeedback />-->
|
||||
<!-- <!– 合作伙伴模块–>-->
|
||||
<!-- <Partners />-->
|
||||
<PainPoints />
|
||||
<AiTags />
|
||||
<SuccessStories />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Banner from './sections/Banner.vue'
|
||||
// import CoreValue from './sections/CoreValue.vue'
|
||||
// import UseCases from './sections/UseCases.vue'
|
||||
// import GlobalService from './sections/GlobalService.vue'
|
||||
// import CustomerFeedback from './sections/CustomerFeedback.vue'
|
||||
// import Partners from './sections/Partners.vue'
|
||||
import PainPoints from './sections/PainPoints.vue'
|
||||
import AiTags from './sections/AiTags.vue'
|
||||
import SuccessStories from './sections/SuccessStories.vue'
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.home-page {
|
||||
// 可设置全局背景或间距，按需扩展
|
||||
.dating-page {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
127
src/views/Dating/sections/AiTags.vue
Normal file
127
src/views/Dating/sections/AiTags.vue
Normal file
@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<section class="ai-tags">
|
||||
<div class="tags-header">
|
||||
<h2 class="tags-title">友福AI婚恋-专属单身标签</h2>
|
||||
<p class="tags-subtitle">Right Beside You, They Love Each Other!</p>
|
||||
<el-button type="primary" class="download-btn">立即下载</el-button>
|
||||
<div class="tags-icon">
|
||||
<img src="https://images.health.ufutx.com/202506/18/3b16ca61dc63eb22c102aed934301c0a.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="tags-carousel">-->
|
||||
<!-- <div class="tag-item" v-for="(item, i) in tags" :key="i">-->
|
||||
<!-- <img :src="item.img" alt="单身标签" class="tag-img" />-->
|
||||
<!-- <p class="tag-desc">{{ item.desc }}</p>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElButton } from 'element-plus'
|
||||
|
||||
// const tags = [
|
||||
// {
|
||||
// img: '@/assets/tag-1.png',
|
||||
// desc: '霍小楠 • 27岁硕士 • 生活博主'
|
||||
// },
|
||||
// {
|
||||
// img: '@/assets/tag-2.png',
|
||||
// desc: '李浩然 • 30岁医生 • 运动达人'
|
||||
// },
|
||||
// {
|
||||
// img: '@/assets/tag-3.png',
|
||||
// desc: '苏晓萱 • 25岁设计师 • 文艺青年'
|
||||
// }
|
||||
// ]
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '@/styles/global.less';
|
||||
|
||||
.ai-tags {
|
||||
padding: 100px 192px;
|
||||
text-align: center;
|
||||
background: #ffffff;
|
||||
|
||||
.tags-header {
|
||||
.tags-title {
|
||||
font-size: 50px;
|
||||
font-weight: bold;
|
||||
color: @text-color;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
|
||||
.tags-subtitle {
|
||||
font-size: 60px;
|
||||
color: #b5b5b5;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
.download-btn {
|
||||
padding: 16px 30px;
|
||||
border-radius: 100px;
|
||||
background: var(--Style, #1060ff);
|
||||
color: var(--ffffff, #fff);
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
//.tags-carousel {
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// gap: 60px;
|
||||
// margin-top: 60px;
|
||||
// animation: rotate 10s infinite linear;
|
||||
// transform-origin: center;
|
||||
//
|
||||
// @keyframes rotate {
|
||||
// 0% {
|
||||
// transform: rotate(0deg);
|
||||
// }
|
||||
// 100% {
|
||||
// transform: rotate(360deg);
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .tag-item {
|
||||
// width: 180px;
|
||||
// height: 240px;
|
||||
// background: #fff;
|
||||
// border-radius: 12px;
|
||||
// box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
|
||||
// padding: 20px;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
//
|
||||
// .tag-img {
|
||||
// width: 120px;
|
||||
// height: 120px;
|
||||
// border-radius: 50%;
|
||||
// object-fit: cover;
|
||||
// margin-bottom: 20px;
|
||||
// }
|
||||
//
|
||||
// .tag-desc {
|
||||
// font-size: @font-size-sm;
|
||||
// color: @text-color-secondary;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
|
||||
@media (max-width: @tablet-breakpoint) {
|
||||
.tags-carousel {
|
||||
flex-direction: column;
|
||||
animation: none;
|
||||
gap: 30px;
|
||||
|
||||
.tag-item {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -80,7 +80,8 @@
|
||||
top: 230px;
|
||||
right: 169px;
|
||||
padding: 20px 20px 0 20px;
|
||||
width: 320px;
|
||||
width: 330px;
|
||||
height: 384px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
background: rgba(51, 51, 51, 0.3);
|
||||
|
||||
127
src/views/Dating/sections/PainPoints.vue
Normal file
127
src/views/Dating/sections/PainPoints.vue
Normal file
@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<section class="pain-points">
|
||||
<div class="pain-points-group">
|
||||
<h2 class="section-title">婚恋市场痛点重构</h2>
|
||||
<div class="points-grid">
|
||||
<div v-for="(item, i) in points" :key="i" class="point-card">
|
||||
<div class="hero-section">
|
||||
<div class="point-icon">
|
||||
<img :src="item.icon" alt="痛点图标" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-section">
|
||||
<p class="point-title">{{ item.title }}</p>
|
||||
<p class="point-desc">{{ item.desc }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const points = [
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/2bf6cfbc4fef2c4d8e276e95398405a0.png',
|
||||
title: '传统婚介困境',
|
||||
desc: '效率低/规则混乱'
|
||||
},
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/2bf6cfbc4fef2c4d8e276e95398405a0.png',
|
||||
title: '资料真假难辨',
|
||||
desc: '生物特征+社交轨迹验证'
|
||||
},
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/2bf6cfbc4fef2c4d8e276e95398405a0.png',
|
||||
title: '匹配维度单一',
|
||||
desc: '多维度开放模型'
|
||||
},
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/2bf6cfbc4fef2c4d8e276e95398405a0.png',
|
||||
title: '售后服务缺失',
|
||||
desc: '关系认证及延伸服务'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '@/styles/global.less';
|
||||
|
||||
.pain-points {
|
||||
padding: 30px 192px;
|
||||
text-align: center;
|
||||
background: #f6f8fe;
|
||||
.pain-points-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
|
||||
/* 底部导航 0.8透模糊 */
|
||||
backdrop-filter: blur(25px);
|
||||
}
|
||||
.section-title {
|
||||
font-size: @font-size-xxl;
|
||||
font-weight: bold;
|
||||
color: @text-color;
|
||||
margin-bottom: 50px;
|
||||
.mt(50px);
|
||||
}
|
||||
|
||||
.points-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
margin: 0 auto;
|
||||
.pb(20px);
|
||||
@media (max-width: @tablet-breakpoint) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
@media (max-width: @mobile-breakpoint) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.point-card {
|
||||
background: #fff;
|
||||
border-radius: @border-radius-lg;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
|
||||
overflow: hidden;
|
||||
.hero-section {
|
||||
padding: 50px 80px;
|
||||
background-color: #cedff8;
|
||||
}
|
||||
.point-icon {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
.text-section {
|
||||
padding: 16px 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
background-color: #e4eefb;
|
||||
align-items: start;
|
||||
.point-title {
|
||||
font-size: @font-size-lg;
|
||||
font-weight: bold;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
.point-desc {
|
||||
font-size: @font-size-lg;
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
94
src/views/Dating/sections/SuccessStories.vue
Normal file
94
src/views/Dating/sections/SuccessStories.vue
Normal file
@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<section class="success-stories">
|
||||
<h2 class="section-title">就在你身边，他们相爱啦！</h2>
|
||||
<p class="section-subtitle">Right Beside You, They Love Each Other!</p>
|
||||
<el-button type="primary" class="download-btn">立即下载</el-button>
|
||||
<div class="stories-icon">
|
||||
<img src="https://images.health.ufutx.com/202506/18/1a837037ce7fb8502a211a01e19fbf55.png" alt="" />
|
||||
</div>
|
||||
<!-- <div class="stories-grid">-->
|
||||
<!-- <div class="story-item" v-for="(item, i) in stories" :key="i">-->
|
||||
<!-- <img :src="item.img" alt="成功故事" class="story-img" />-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElButton } from 'element-plus'
|
||||
|
||||
// const stories = [
|
||||
// { img: '@/assets/story-1.jpg' },
|
||||
// { img: '@/assets/story-2.jpg' },
|
||||
// { img: '@/assets/story-3.jpg' },
|
||||
// { img: '@/assets/story-4.jpg' },
|
||||
// { img: '@/assets/story-5.jpg' },
|
||||
// { img: '@/assets/story-6.jpg' }
|
||||
// ]
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '@/styles/global.less';
|
||||
|
||||
.success-stories {
|
||||
padding: 100px 192px;
|
||||
text-align: center;
|
||||
|
||||
.section-title {
|
||||
font-size: 50px;
|
||||
font-weight: bold;
|
||||
color: @text-color;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 60px;
|
||||
color: #b5b5b5;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
padding: 16px 30px;
|
||||
border-radius: 100px;
|
||||
background: var(--Style, #1060ff);
|
||||
color: var(--ffffff, #fff);
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.stories-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
|
||||
.story-item {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.story-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @tablet-breakpoint) {
|
||||
.stories-grid {
|
||||
gap: 10px;
|
||||
|
||||
.story-item {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,31 +1,32 @@
|
||||
<template>
|
||||
<div class="home-page">
|
||||
<!-- Banner 模块-->
|
||||
<div class="ecosystem-page">
|
||||
<Banner />
|
||||
<!-- <!– 核心价值模块–>-->
|
||||
<!-- <CoreValue />-->
|
||||
<!-- <!– 应用场景模块–>-->
|
||||
<!-- <UseCases />-->
|
||||
<!-- <!– 全球服务模块–>-->
|
||||
<!-- <GlobalService />-->
|
||||
<!-- <!– 客户反馈模块–>-->
|
||||
<!-- <CustomerFeedback />-->
|
||||
<!-- <!– 合作伙伴模块–>-->
|
||||
<!-- <Partners />-->
|
||||
<CoreAdvantages />
|
||||
<RegionCooperation />
|
||||
<HealthManagement />
|
||||
<MedicalCooperation />
|
||||
<EnterpriseCooperation />
|
||||
<CooperationConsult />
|
||||
<TalentTraining />
|
||||
<CityPartner />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Banner from './sections/Banner.vue'
|
||||
// import CoreValue from './sections/CoreValue.vue'
|
||||
// import UseCases from './sections/UseCases.vue'
|
||||
// import GlobalService from './sections/GlobalService.vue'
|
||||
// import CustomerFeedback from './sections/CustomerFeedback.vue'
|
||||
// import Partners from './sections/Partners.vue'
|
||||
import CoreAdvantages from './sections/CoreAdvantages.vue'
|
||||
import RegionCooperation from './sections/RegionCooperation.vue'
|
||||
import HealthManagement from './sections/HealthManagement.vue'
|
||||
import MedicalCooperation from './sections/MedicalCooperation.vue'
|
||||
import EnterpriseCooperation from './sections/EnterpriseCooperation.vue'
|
||||
import CooperationConsult from './sections/CooperationConsult.vue'
|
||||
import TalentTraining from './sections/TalentTraining.vue'
|
||||
import CityPartner from './sections/CityPartner.vue'
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.home-page {
|
||||
// 可设置全局背景或间距，按需扩展
|
||||
.ecosystem-page {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -80,7 +80,8 @@
|
||||
top: 230px;
|
||||
right: 169px;
|
||||
padding: 20px 20px 0 20px;
|
||||
width: 320px;
|
||||
width: 330px;
|
||||
height: 384px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
background: rgba(51, 51, 51, 0.3);
|
||||
|
||||
122
src/views/Ecosystem/sections/CityPartner.vue
Normal file
122
src/views/Ecosystem/sections/CityPartner.vue
Normal file
@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<section class="city-partner">
|
||||
<h2 class="section-title">城市合伙人</h2>
|
||||
<p class="section-subtitle">“拓展城市合伙人，共赢亿级AI健康市场”</p>
|
||||
<div class="partner-banner">
|
||||
<img
|
||||
src="https://images.health.ufutx.com/202506/18/eco-partner-banner.png"
|
||||
alt="合伙人Banner"
|
||||
class="banner-img"
|
||||
/>
|
||||
</div>
|
||||
<p class="partner-desc">友福同享诚募城市合伙人，共同开拓AI健康管理蓝海市场。</p>
|
||||
<h3 class="support-title">加入友福同享，您将获得 4 大支持</h3>
|
||||
<div class="support-grid">
|
||||
<div v-for="(item, i) in supports" :key="i" class="support-item">
|
||||
<img :src="item.icon" alt="支持图标" class="item-icon" />
|
||||
<p class="item-title">{{ item.title }}</p>
|
||||
<p class="item-desc">{{ item.desc }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const supports = [
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/eco-support-1.png',
|
||||
title: '总部全方位支持',
|
||||
desc: '市场、运营、技术全流程支持'
|
||||
},
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/eco-support-2.png',
|
||||
title: '总部直营培训',
|
||||
desc: '专属培训，快速掌握要点'
|
||||
},
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/eco-support-3.png',
|
||||
title: '独家方案输出',
|
||||
desc: '定制化AI健康方案'
|
||||
},
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/eco-support-4.png',
|
||||
title: '共享万亿机遇',
|
||||
desc: '抢占千亿AI健康市场'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.city-partner {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
|
||||
.section-title {
|
||||
font-size: @font-size-xxl;
|
||||
font-weight: bold;
|
||||
color: @text-color-primary;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.section-subtitle {
|
||||
font-size: @font-size-md;
|
||||
color: @text-color-secondary;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.partner-banner {
|
||||
.banner-img {
|
||||
width: 80%;
|
||||
height: auto;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
.partner-desc {
|
||||
font-size: @font-size-sm;
|
||||
color: @text-color-light;
|
||||
line-height: 1.8;
|
||||
max-width: 800px;
|
||||
margin: 0 auto 40px;
|
||||
}
|
||||
.support-title {
|
||||
font-size: @font-size-lg;
|
||||
font-weight: medium;
|
||||
color: @text-color-primary;
|
||||
margin: 60px 0 40px;
|
||||
}
|
||||
.support-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 40px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto 60px;
|
||||
|
||||
@media (max-width: @tablet-breakpoint) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
@media (max-width: @mobile-breakpoint) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
.support-item {
|
||||
background: #fff;
|
||||
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;
|
||||
}
|
||||
.item-title {
|
||||
font-size: @font-size-lg;
|
||||
font-weight: medium;
|
||||
color: @text-color-primary;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.item-desc {
|
||||
font-size: @font-size-sm;
|
||||
color: @text-color-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
36
src/views/Ecosystem/sections/CooperationConsult.vue
Normal file
36
src/views/Ecosystem/sections/CooperationConsult.vue
Normal file
@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<section class="cooperation-consult">
|
||||
<div class="consult-content">
|
||||
<p class="consult-text">欢迎健康产业链企业与我们洽谈合作，共创产业新价值</p>
|
||||
<el-button type="primary" class="consult-btn">合作咨询</el-button>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElButton } from 'element-plus'
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.cooperation-consult {
|
||||
background: #2c3e50;
|
||||
color: #fff;
|
||||
padding: 60px 20px;
|
||||
text-align: center;
|
||||
|
||||
.consult-content {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
|
||||
.consult-text {
|
||||
font-size: @font-size-md;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.consult-btn {
|
||||
padding: 12px 40px;
|
||||
font-size: @font-size-md;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
85
src/views/Ecosystem/sections/CoreAdvantages.vue
Normal file
85
src/views/Ecosystem/sections/CoreAdvantages.vue
Normal file
@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<section class="core-advantages">
|
||||
<h2 class="section-title">核心优势</h2>
|
||||
<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" />
|
||||
<p class="item-title">{{ item.title }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const advantages = [
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/eco-adv-1.png',
|
||||
title: 'AI+生命科学创新系统'
|
||||
},
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/eco-adv-2.png',
|
||||
title: '丰富的市场验证与成功案例'
|
||||
},
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/eco-adv-3.png',
|
||||
title: '独有技术护城河'
|
||||
},
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/eco-adv-4.png',
|
||||
title: '完整的服务生态闭环'
|
||||
},
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/eco-adv-5.png',
|
||||
title: '低风险的合作保障'
|
||||
},
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/eco-adv-6.png',
|
||||
title: '百亿赛道先行者'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.core-advantages {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
|
||||
.section-title {
|
||||
font-size: @font-size-xxl;
|
||||
font-weight: bold;
|
||||
color: @text-color-primary;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.section-subtitle {
|
||||
font-size: @font-size-md;
|
||||
color: @text-color-secondary;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.advantages-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 40px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
@media (max-width: @tablet-breakpoint) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
@media (max-width: @mobile-breakpoint) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
.advantage-item {
|
||||
.item-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.item-title {
|
||||
font-size: @font-size-sm;
|
||||
color: @text-color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
63
src/views/Ecosystem/sections/EnterpriseCooperation.vue
Normal file
63
src/views/Ecosystem/sections/EnterpriseCooperation.vue
Normal file
@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<section class="enterprise-cooperation">
|
||||
<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" />
|
||||
<!-- 标签可动态配置，此处简化 -->
|
||||
<div class="pyramid-labels">
|
||||
<span>终端用户</span>
|
||||
<span>健康设备商/保险/金融</span>
|
||||
<span>友福AI生态中枢平台</span>
|
||||
<span>政府/医疗机构</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
/* 无业务逻辑 */
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.enterprise-cooperation {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
background: #f5f7fe;
|
||||
|
||||
.section-title {
|
||||
font-size: @font-size-xxl;
|
||||
font-weight: bold;
|
||||
color: @text-color-primary;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.section-subtitle {
|
||||
font-size: @font-size-md;
|
||||
color: @text-color-secondary;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.cooperation-pyramid {
|
||||
position: relative;
|
||||
.pyramid-img {
|
||||
width: 40%;
|
||||
height: auto;
|
||||
}
|
||||
.pyramid-labels {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
span {
|
||||
font-size: @font-size-sm;
|
||||
color: @text-color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
67
src/views/Ecosystem/sections/HealthManagement.vue
Normal file
67
src/views/Ecosystem/sections/HealthManagement.vue
Normal file
@ -0,0 +1,67 @@
|
||||
<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>
|
||||
62
src/views/Ecosystem/sections/MedicalCooperation.vue
Normal file
62
src/views/Ecosystem/sections/MedicalCooperation.vue
Normal file
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<section class="medical-cooperation">
|
||||
<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" />
|
||||
<!-- 标签可动态配置，此处简化 -->
|
||||
<div class="funnel-labels">
|
||||
<span>健康管理中心</span>
|
||||
<span>专科指导</span>
|
||||
<span>轻量化AI赋能</span>
|
||||
<span>数据反哺价值提升</span>
|
||||
<span>全链提效</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
/* 无业务逻辑 */
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.medical-cooperation {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
|
||||
.section-title {
|
||||
font-size: @font-size-xxl;
|
||||
font-weight: bold;
|
||||
color: @text-color-primary;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.section-subtitle {
|
||||
font-size: @font-size-md;
|
||||
color: @text-color-secondary;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.cooperation-funnel {
|
||||
position: relative;
|
||||
.funnel-img {
|
||||
width: 60%;
|
||||
height: auto;
|
||||
}
|
||||
.funnel-labels {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
span {
|
||||
font-size: @font-size-sm;
|
||||
color: @text-color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
89
src/views/Ecosystem/sections/RegionCooperation.vue
Normal file
89
src/views/Ecosystem/sections/RegionCooperation.vue
Normal file
@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<section class="region-cooperation">
|
||||
<h2 class="section-title">地区单位合作</h2>
|
||||
<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>
|
||||
<p class="item-desc">{{ item.desc }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const cooperations = [
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/eco-region-1.png',
|
||||
title: 'AI+生命科学创新系统',
|
||||
desc: '国际顶尖AI+健康管理系统，30+项专利技术护航'
|
||||
},
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/eco-region-2.png',
|
||||
title: '丰富的市场验证与成功案例',
|
||||
desc: '已服务50+城市，数千万用户验证，效果显著'
|
||||
},
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/eco-region-3.png',
|
||||
title: '独有技术护城河',
|
||||
desc: '核心算法准确率超95%，领先行业30%'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.region-cooperation {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
background: #f5f7fe;
|
||||
|
||||
.section-title {
|
||||
font-size: @font-size-xxl;
|
||||
font-weight: bold;
|
||||
color: @text-color-primary;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.section-subtitle {
|
||||
font-size: @font-size-md;
|
||||
color: @text-color-secondary;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.cooperation-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 40px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
@media (max-width: @tablet-breakpoint) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
@media (max-width: @mobile-breakpoint) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
.cooperation-item {
|
||||
background: #fff;
|
||||
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;
|
||||
}
|
||||
.item-title {
|
||||
font-size: @font-size-lg;
|
||||
font-weight: medium;
|
||||
color: @text-color-primary;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.item-desc {
|
||||
font-size: @font-size-sm;
|
||||
color: @text-color-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
127
src/views/Ecosystem/sections/TalentTraining.vue
Normal file
127
src/views/Ecosystem/sections/TalentTraining.vue
Normal file
@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<section class="talent-training">
|
||||
<h2 class="section-title">身心健康管理人才培训</h2>
|
||||
<p class="section-subtitle">创新服务模式，双证加持兼具晋升转接口</p>
|
||||
<div class="training-grid">
|
||||
<div v-for="(item, i) in trainings" :key="i" class="training-item">
|
||||
<img :src="item.icon" alt="培训图标" class="item-icon" />
|
||||
<p class="item-title">{{ item.title }}</p>
|
||||
<p class="item-desc">{{ item.desc }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="training-ring">
|
||||
<img src="https://images.health.ufutx.com/202506/18/eco-ring.png" alt="环形图" class="ring-img" />
|
||||
<!-- 标签可动态配置，此处简化 -->
|
||||
<div class="ring-labels">
|
||||
<span>你将获得</span>
|
||||
<span>谁适合来参加？</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const trainings = [
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/eco-train-1.png',
|
||||
title: '立足行业前沿',
|
||||
desc: '掌握AI健康管理核心技能'
|
||||
},
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/eco-train-2.png',
|
||||
title: '权威双证加持',
|
||||
desc: '提升职业竞争力'
|
||||
},
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/eco-train-3.png',
|
||||
title: '专业团队赋能',
|
||||
desc: '加速职业成长'
|
||||
},
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/eco-train-4.png',
|
||||
title: '融入万亿生态',
|
||||
desc: '共享发展机遇'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.talent-training {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
|
||||
.section-title {
|
||||
font-size: @font-size-xxl;
|
||||
font-weight: bold;
|
||||
color: @text-color-primary;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.section-subtitle {
|
||||
font-size: @font-size-md;
|
||||
color: @text-color-secondary;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.training-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 40px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto 60px;
|
||||
|
||||
@media (max-width: @tablet-breakpoint) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
@media (max-width: @mobile-breakpoint) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
.training-item {
|
||||
background: #fff;
|
||||
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;
|
||||
}
|
||||
.item-title {
|
||||
font-size: @font-size-lg;
|
||||
font-weight: medium;
|
||||
color: @text-color-primary;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.item-desc {
|
||||
font-size: @font-size-sm;
|
||||
color: @text-color-light;
|
||||
}
|
||||
}
|
||||
.training-ring {
|
||||
position: relative;
|
||||
.ring-img {
|
||||
width: 60%;
|
||||
height: auto;
|
||||
}
|
||||
.ring-labels {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
span {
|
||||
font-size: @font-size-xs;
|
||||
color: @text-color-primary;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
padding: 5px 10px;
|
||||
border-radius: @border-radius-md;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -86,7 +86,8 @@ const newsList = [
|
||||
top: 230px;
|
||||
right: 169px;
|
||||
padding: 20px 20px 0 20px;
|
||||
width: 320px;
|
||||
width: 330px;
|
||||
height: 384px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
background: rgba(51, 51, 51, 0.3);
|
||||
|
||||
@ -2,19 +2,18 @@
|
||||
<div class="home-page">
|
||||
<!-- Banner 模块-->
|
||||
<Banner />
|
||||
<!-- <!– 核心价值模块–>-->
|
||||
<!-- 七维度模块-->
|
||||
<SevenDimensions />
|
||||
<!-- <!– 应用场景模块–>-->
|
||||
<!-- 应用场景模块-->
|
||||
<UseCases />
|
||||
<!-- 一站式解决方案-->
|
||||
<OneStopSolution />
|
||||
<!-- AI健康流程-->
|
||||
<AiHealthProcess />
|
||||
<!-- 客户案例-->
|
||||
<CustomerCases />
|
||||
<!-- <!– 全球服务模块–>-->
|
||||
<!-- <GlobalService />-->
|
||||
<!-- <!– 客户反馈模块–>-->
|
||||
<!-- <CustomerFeedback />-->
|
||||
<!-- <!– 合作伙伴模块–>-->
|
||||
<!-- <Partners />-->
|
||||
<!-- APP 推广与合作咨询-->
|
||||
<AppPromotion />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -25,6 +24,7 @@ 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 AppPromotion from '@/views/Network/sections/AppPromotion.vue'
|
||||
// import GlobalService from './sections/GlobalService.vue'
|
||||
// import CustomerFeedback from './sections/CustomerFeedback.vue'
|
||||
// import Partners from './sections/Partners.vue'
|
||||
|
||||
129
src/views/Network/sections/AppPromotion.vue
Normal file
129
src/views/Network/sections/AppPromotion.vue
Normal file
@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<section class="app-promotion">
|
||||
<div class="section-bg">
|
||||
<h2 class="section-title">提供专属健康服务和服务方案</h2>
|
||||
<el-button type="primary" class="consult-btn"> 领取您的AI健康解决方案 </el-button>
|
||||
</div>
|
||||
<div class="app-download">
|
||||
<div class="app-item">
|
||||
<div class="app-section">
|
||||
<img src="@/assets/icons/ios.png" alt="iOS" />
|
||||
<p><span class="_text">iOS</span>客户端</p>
|
||||
</div>
|
||||
<span>版本号：1.1.1</span>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<div class="app-section">
|
||||
<img src="@/assets/icons/android.png" alt="Android" />
|
||||
<p><span class="_text">Android</span>客户端</p>
|
||||
</div>
|
||||
<span>版本号：1.1.1</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="contact-info">-->
|
||||
<!-- <p>联系我们：181-4852-2763</p>-->
|
||||
<!-- <p>合作邮箱：tfhux2023.com</p>-->
|
||||
<!-- <div class="qrcode-group">-->
|
||||
<!-- <img src="@/assets/qr-code-1.png" alt="公众号" />-->
|
||||
<!-- <img src="@/assets/qr-code-2.png" alt="小程序" />-->
|
||||
<!-- <img src="@/assets/qr-code-3.png" alt="官网" />-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElButton } from 'element-plus' // 确保按需导入
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.app-promotion {
|
||||
text-align: center;
|
||||
}
|
||||
.section-bg {
|
||||
.pt(36px);
|
||||
.pb(36px);
|
||||
background-image: url('https://images.health.ufutx.com/202506/18/e403f857ad7385ea660987cbcbdcf198.png');
|
||||
}
|
||||
.section-title {
|
||||
font-weight: bold;
|
||||
font-size: 30px;
|
||||
padding: 10px;
|
||||
.mb(10px);
|
||||
}
|
||||
.consult-btn {
|
||||
//display: flex;
|
||||
height: 57px;
|
||||
padding: 16px 30px;
|
||||
border-radius: 10px;
|
||||
background: var(--Style, #1060ff);
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
.mt(10px);
|
||||
}
|
||||
.app-download {
|
||||
height: 620px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
width: 100%;
|
||||
background-image: url('https://images.health.ufutx.com/202506/18/f27ffc4b59df0dc6f53133bb1115b44a.png');
|
||||
background-size: cover;
|
||||
}
|
||||
.app-item {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
width: 408px;
|
||||
height: 150px;
|
||||
padding: 50px 50px 30px 50px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 30px;
|
||||
background: var(--ffffff, #fff);
|
||||
.mt(428px);
|
||||
.app-section {
|
||||
.flex-center();
|
||||
}
|
||||
._text {
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.app-item img {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.app-item p {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
.ml(3px);
|
||||
}
|
||||
.app-item span {
|
||||
font-size: 15px;
|
||||
color: #666;
|
||||
letter-spacing: 0.9px;
|
||||
}
|
||||
.contact-info {
|
||||
margin-top: 40px;
|
||||
}
|
||||
.contact-info p {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin: 8px 0;
|
||||
}
|
||||
.qrcode-group {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.qrcode-group img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
</style>
|
||||
@ -86,7 +86,8 @@ const newsList = [
|
||||
top: 230px;
|
||||
right: 169px;
|
||||
padding: 20px 20px 0 20px;
|
||||
width: 320px;
|
||||
width: 330px;
|
||||
height: 384px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
background: rgba(51, 51, 51, 0.3);
|
||||
|
||||
@ -7,8 +7,8 @@
|
||||
<img :src="item.avatar" alt="avatar" class="avatar" />
|
||||
</div>
|
||||
<div class="feedback-info">
|
||||
<p class="username">{{ item.username }}</p>
|
||||
<p class="comment">{{ item.comment }}</p>
|
||||
<!-- <p class="username">{{ item.username }}</p>-->
|
||||
<p class="comment text-2-line-ellipsis">{{ item.comment }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -20,17 +20,17 @@
|
||||
const feedbackList = [
|
||||
{
|
||||
username: '章小样',
|
||||
comment: '操作简单，容易上手',
|
||||
comment: '交付与实施阶段很专业，坚持每天汇报进度和风险，并提出很多合理建议~',
|
||||
avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
|
||||
},
|
||||
{
|
||||
username: '章小样',
|
||||
comment: '界面简约清晰，功能强大',
|
||||
comment: '交付与实施阶段很专业，坚持每天汇报进度和风险，并提出很多合理建议~',
|
||||
avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
|
||||
},
|
||||
{
|
||||
username: '章小样',
|
||||
comment: '操作简单，容易上手',
|
||||
comment: '交付与实施阶段很专业，坚持每天汇报进度和风险，并提出很多合理建议~',
|
||||
avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
|
||||
},
|
||||
{
|
||||
@ -40,62 +40,62 @@ const feedbackList = [
|
||||
},
|
||||
{
|
||||
username: '章小样',
|
||||
comment: '操作简单，容易上手',
|
||||
comment: '交付与实施阶段很专业，坚持每天汇报进度和风险，并提出很多合理建议~',
|
||||
avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
|
||||
},
|
||||
{
|
||||
username: '章小样',
|
||||
comment: '操作简单，容易上手',
|
||||
comment: '交付与实施阶段很专业，坚持每天汇报进度和风险，并提出很多合理建议~',
|
||||
avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
|
||||
},
|
||||
{
|
||||
username: '派小喵萌宠',
|
||||
comment: '操作简单，容易上手',
|
||||
comment: '交付与实施阶段很专业，坚持每天汇报进度和风险，并提出很多合理建议~',
|
||||
avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
|
||||
},
|
||||
{
|
||||
username: '章小样',
|
||||
comment: '操作简单，容易上手',
|
||||
comment: '交付与实施阶段很专业，坚持每天汇报进度和风险，并提出很多合理建议~',
|
||||
avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
|
||||
},
|
||||
{
|
||||
username: '章小样',
|
||||
comment: '操作简单，容易上手',
|
||||
comment: '交付与实施阶段很专业，坚持每天汇报进度和风险，并提出很多合理建议~',
|
||||
avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
|
||||
},
|
||||
{
|
||||
username: '派小喵萌宠',
|
||||
comment: '操作简单，容易上手',
|
||||
comment: '交付与实施阶段很专业，坚持每天汇报进度和风险，并提出很多合理建议~',
|
||||
avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
|
||||
},
|
||||
{
|
||||
username: '章小样',
|
||||
comment: '操作简单，容易上手',
|
||||
comment: '交付与实施阶段很专业，坚持每天汇报进度和风险，并提出很多合理建议~',
|
||||
avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
|
||||
},
|
||||
{
|
||||
username: '章小样',
|
||||
comment: '操作简单，容易上手',
|
||||
comment: '交付与实施阶段很专业，坚持每天汇报进度和风险，并提出很多合理建议~',
|
||||
avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
|
||||
},
|
||||
{
|
||||
username: '派小喵萌宠',
|
||||
comment: '操作简单，容易上手',
|
||||
comment: '交付与实施阶段很专业，坚持每天汇报进度和风险，并提出很多合理建议~',
|
||||
avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
|
||||
},
|
||||
{
|
||||
username: '章小样',
|
||||
comment: '操作简单，容易上手',
|
||||
comment: '交付与实施阶段很专业，坚持每天汇报进度和风险，并提出很多合理建议~',
|
||||
avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
|
||||
},
|
||||
{
|
||||
username: '章小样',
|
||||
comment: '操作简单，容易上手',
|
||||
comment: '交付与实施阶段很专业，坚持每天汇报进度和风险，并提出很多合理建议~',
|
||||
avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
|
||||
},
|
||||
{
|
||||
username: '派小喵萌宠',
|
||||
comment: '操作简单，容易上手',
|
||||
comment: '交付与实施阶段很专业，坚持每天汇报进度和风险，并提出很多合理建议~',
|
||||
avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
|
||||
}
|
||||
]
|
||||
@ -134,13 +134,13 @@ const feedbackList = [
|
||||
}
|
||||
|
||||
.feedback-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: @padding;
|
||||
border-radius: 16px;
|
||||
background: var(--ffffff, #fff);
|
||||
transition: @transition;
|
||||
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
border-radius: 100px;
|
||||
background: #f3f5f7;
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
@ -148,7 +148,7 @@ const feedbackList = [
|
||||
|
||||
.avatar-container {
|
||||
flex-shrink: 0;
|
||||
margin-right: 12px;
|
||||
//margin-right: 12px;
|
||||
|
||||
.avatar {
|
||||
width: @avatar-size;
|
||||
@ -169,8 +169,9 @@ const feedbackList = [
|
||||
}
|
||||
|
||||
.comment {
|
||||
width: 250px;
|
||||
font-size: 14px;
|
||||
color: @subtext-color;
|
||||
color: @text-color;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,51 +0,0 @@
|
||||
<template>
|
||||
<section class="global-service">
|
||||
<div class="container">
|
||||
<h3 class="section-title">我们全球服务覆盖范围</h3>
|
||||
<p class="section-desc">覆盖国家/地区：65+ · 客户产业覆盖范围：18+</p>
|
||||
<!-- 替换为实际地图路径 -->
|
||||
<img
|
||||
src="https://images.health.ufutx.com/202506/12/2acedc9535b108d6cd079b34bb01e78e.jpeg"
|
||||
alt="世界地图"
|
||||
class="world-map"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 暂无逻辑，纯展示
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.global-service {
|
||||
//padding: 80px 0;
|
||||
background-color: #fff;
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
.px(192px);
|
||||
.section-title {
|
||||
//background: red;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
.mt(100px);
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
font-size: 20px;
|
||||
color: @text-color-secondary;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.world-map {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
.mb(70px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -24,6 +24,7 @@
|
||||
padding: 50px 20px;
|
||||
text-align: center;
|
||||
background: radial-gradient(83.44% 50% at 50% 50%, #fff 0%, #e8f0ff 100%);
|
||||
.mt(20px);
|
||||
}
|
||||
.section-title {
|
||||
font-size: @font-size-xxl;
|
||||
|
||||
@ -80,7 +80,8 @@ const newsList = [
|
||||
top: 230px;
|
||||
right: 169px;
|
||||
padding: 20px 20px 0 20px;
|
||||
width: 320px;
|
||||
width: 330px;
|
||||
height: 384px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
background: rgba(51, 51, 51, 0.3);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user