You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
467 lines
15 KiB
467 lines
15 KiB
<template>
|
|
<div class="container1" style="padding: 10px 16px" v-show="!isShowVideo">
|
|
<Swiper
|
|
class="swiper"
|
|
:slidesPerView="1"
|
|
:spaceBetween="30"
|
|
:speed="1400"
|
|
:loop="true"
|
|
:modules="[Autoplay, Pagination]"
|
|
:autoplay="{
|
|
delay: 2000,
|
|
disableOnInteraction: false,
|
|
}"
|
|
:pagination="{ clickable: true }"
|
|
>
|
|
<SwiperSlide v-for="(props, index) in swiperData" :key="`blog-slider-${index}`">
|
|
<img :src="props.image" alt="" class="img" @click="handleNav('/health')" />
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
<CustomTransition>
|
|
<div class="card-main">
|
|
<div class="about-card1 card-profile-image">
|
|
<div class="card-profile-image__image-container" @click="handleNav('/reportQuery')">
|
|
<div class="text">
|
|
<p class="title font-color">查报告</p>
|
|
<p class="subtitle font-color">专家解读特惠</p>
|
|
</div>
|
|
<img src="../assets/image/index1/cbg.png" alt="Landing bio image" class="image" />
|
|
</div>
|
|
</div>
|
|
<div class="about-card2 card-profile-image" @click="handleNav({ name: 'Contact', params: { type: 1 } })">
|
|
<div class="card-profile-image__image-container">
|
|
<div class="text">
|
|
<p class="title font-color">预约体检</p>
|
|
<p class="subtitle font-color">快去预约吧</p>
|
|
</div>
|
|
<img src="../assets/image/index1/tj.png" alt="Landing bio image" class="image" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CustomTransition>
|
|
<!--
|
|
<div class="typebox">
|
|
<ul class="container">
|
|
<li class="container-item" v-for="item in typeboxes" :key="item.title">
|
|
<img :src="item.icon" class="icon" />
|
|
<p class="title">{{ item.title }}</p>
|
|
</li>
|
|
</ul>
|
|
<ul class="container">
|
|
<li class="container-item" v-for="item in typeboxes" :key="item.title">
|
|
<img :src="item.icon" class="icon" />
|
|
<p class="title">{{ item.title }}</p>
|
|
</li>
|
|
</ul>
|
|
</div> -->
|
|
|
|
<div class="expert-forum">
|
|
<div class="header">
|
|
<h2 class="title">专家讲坛</h2>
|
|
<!-- handleNav('/ConsultationList') -->
|
|
<p class="subtitle" @click="showTips">
|
|
更多
|
|
<van-icon name="arrow" class="icon-right" />
|
|
</p>
|
|
</div>
|
|
<div class="scroll-container">
|
|
<div class="card" v-for="(item, index) in experts" :key="index">
|
|
<div class="video-thumbnail">
|
|
<img :src="item.image" alt="Expert Image" class="video-img" />
|
|
<div class="play-overlay" @click="handlePlayClick(item)">
|
|
<img src="../assets/image/index1/playBtn.svg" class="play-btn" />
|
|
</div>
|
|
</div>
|
|
<div class="overlay">
|
|
<p class="overlay-title">{{ item.title }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="qa-card">
|
|
<div class="qa-card-title">
|
|
<div class="title">细胞咨询</div>
|
|
<p class="subtitle" @click="showTips">
|
|
更多
|
|
<van-icon name="arrow" class="icon-right" />
|
|
</p>
|
|
</div>
|
|
<div class="qa-contain">
|
|
<div class="qa-section" v-for="(item, index) in profiles" :key="index">
|
|
<div class="profile-item">
|
|
<div class="video-thumbnail">
|
|
<img :src="item.image" alt="Expert Image" class="video-img" />
|
|
<div class="play-overlay" @click="handlePlayClick(item)">
|
|
<img src="../assets/image/index1/playBtn.svg" class="play-btn" />
|
|
</div>
|
|
</div>
|
|
<div class="profile-info" @click="handleNav({ name: 'ConsultationDetails', params: { id: index } })">
|
|
<h3 class="profile-name">{{ item.name }}</h3>
|
|
<p class="profile-description">{{ item.date }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="inquiries-card">
|
|
<div class="inquiries-card-title">
|
|
<div class="title">在线问诊</div>
|
|
<p class="subtitle" @click="showTips">
|
|
更多
|
|
<van-icon name="arrow" class="icon-right" />
|
|
</p>
|
|
</div>
|
|
<Swiper class="swiper" :slidesPerView="3" :spaceBetween="10" :speed="1400" loop freeMode>
|
|
<SwiperSlide v-for="doctor in doctors" :key="doctor.name">
|
|
<div class="doctor" @click="handleNav({ name: 'Contact', params: { type: 1 } })">
|
|
<img :src="doctor.image" class="doctor-image" />
|
|
<div class="doctor-info">
|
|
<h3 class="title">{{ doctor.name }}</h3>
|
|
<div class="stat">
|
|
<p class="subtitle">{{ doctor.specialty }}</p>
|
|
<span class="des">{{ doctor.rating }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="isShowVideo" class="video-modal">
|
|
<div class="video-container">
|
|
<img src="../assets/image/index1/close.png" alt="" @click="handleClosedVideo" class="close-btn" />
|
|
<video
|
|
ref="video"
|
|
class="video-player"
|
|
controls
|
|
autoplay
|
|
@ended="handleVideoEnded"
|
|
x5-video-player-orientation="portraint"
|
|
>
|
|
<source :src="currentVideoUrl" type="video/mp4" />
|
|
</video>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, nextTick, reactive, inject, onMounted, onBeforeUnmount } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import { showToast, closeToast } from 'vant';
|
|
import { Swiper, SwiperSlide } from 'swiper/vue';
|
|
import { Autoplay, Pagination, Navigation } from 'swiper/modules';
|
|
import CustomTransition from '@/components/shared/CustomTransition.vue';
|
|
|
|
import banner1 from '@/assets/image/index1/111.jpg';
|
|
import banner2 from '@/assets/image/index1/222.jpg';
|
|
import banner3 from '@/assets/image/index1/333.jpg';
|
|
import banner4 from '@/assets/image/index1/444.jpg';
|
|
import icon1 from '@/assets/image/index1/icon01.png';
|
|
import icon2 from '@/assets/image/index1/icon02.png';
|
|
import icon3 from '@/assets/image/index1/icon03.png';
|
|
import icon4 from '@/assets/image/index1/icon04.png';
|
|
|
|
import wlh from '@/assets/image/index1/吴华林.jpg';
|
|
import hwx from '@/assets/image/index1/胡文详.jpg';
|
|
import ydh from '@/assets/image/index1/袁道红.jpg';
|
|
import lt from '@/assets/image/index1/李陶.jpg';
|
|
|
|
import v1 from '@/assets/image/capture/1.png';
|
|
import v2 from '@/assets/image/capture/2.png';
|
|
import v3 from '@/assets/image/capture/3.png';
|
|
import v4 from '@/assets/image/capture/4.png';
|
|
import v5 from '@/assets/image/capture/5.png';
|
|
import v6 from '@/assets/image/capture/6.png';
|
|
import v7 from '@/assets/image/capture/7.png';
|
|
import v8 from '@/assets/image/capture/8.png';
|
|
import v9 from '@/assets/image/capture/9.png';
|
|
import v10 from '@/assets/image/capture/10.png';
|
|
import v11 from '@/assets/image/capture/11.png';
|
|
import v12 from '@/assets/image/capture/12.png';
|
|
import v13 from '@/assets/image/capture/13.png';
|
|
|
|
const router = useRouter();
|
|
const currentVideoUrl = ref(null);
|
|
const isShowVideo = ref(false);
|
|
const video = ref(null);
|
|
const scrollPosition = ref(0);
|
|
|
|
const experts = ref([
|
|
{
|
|
image: 'https://th.bing.com/th?id=OVP.fpr1d5mn2EywIjYyAT6NwgIIFF&w=243&h=136&c=7&rs=1&qlt=90&o=5&pid=2.1',
|
|
videoUrl: 'https://h5.bodk.com.cn/video/基因检测原来是这么回事！.mp4',
|
|
title: '科普基因检测是什么',
|
|
},
|
|
{
|
|
image: 'https://th.bing.com/th?id=OVP.86cx5n825LQSi4tGcXf7MgIIEk&w=206&h=115&c=7&rs=1&qlt=90&o=6&pid=1.7',
|
|
videoUrl: 'https://h5.bodk.com.cn/video/基因检测科普小视频_腾讯视频.mp4',
|
|
title: '基因检测科普小视频',
|
|
},
|
|
{
|
|
image: 'https://th.bing.com/th?id=OVP.EZUvQXBB1XTSn3F_Gt0eZQEsDc&w=243&h=136&c=7&rs=1&qlt=90&o=5&pid=2.1',
|
|
videoUrl: 'https://h5.bodk.com.cn/video/国家全面推广基因检测_腾讯视频.mp4',
|
|
title: '国家全面推广基因检测技术',
|
|
},
|
|
{
|
|
image: 'https://th.bing.com/th?id=OVP.xeTiXpO1OEtgSuqH3BE7egEsC7&w=243&h=136&c=7&rs=1&qlt=90&o=5&pid=2.1',
|
|
videoUrl: 'https://h5.bodk.com.cn/video/一分钟带你了解基因检测.mp4',
|
|
title: '一分钟带你了解基因检测',
|
|
},
|
|
]);
|
|
|
|
const swiperData = ref([
|
|
{
|
|
image: banner1,
|
|
},
|
|
{
|
|
image: banner2,
|
|
},
|
|
{
|
|
image: banner3,
|
|
},
|
|
{
|
|
image: banner4,
|
|
},
|
|
]);
|
|
|
|
const questions = ref([
|
|
{
|
|
id: 1,
|
|
question: '什么是肺癌基因检测？',
|
|
answer:
|
|
'肺癌根据不同的基因突变情况又可以分为不同的分子类型，可选择对应的靶向药物，行基因检测可判断选择针对性药物治疗',
|
|
docImg: 'https://img.99.com.cn/uploads/doctor/litpic/20200705084940269.jpg',
|
|
name: '崔方博',
|
|
title: '副主任医师',
|
|
},
|
|
{
|
|
id: 2,
|
|
question: '基因检测适用人群分布以及要求？',
|
|
answer: '基因检测适用于多种人群，通常无需特殊要求，结合医科学检查结果进行综合分析以便早期预防',
|
|
docImg: 'https://img.99.com.cn/uploads/doctor/201912/2019120404052457.jpg',
|
|
name: '裴爱华',
|
|
title: '副主任医师',
|
|
},
|
|
{
|
|
id: 3,
|
|
question: '基因配对治疗癌症',
|
|
answer:
|
|
'基因配对治疗（也称为“基因匹配治疗”或“精准治疗”）是一种基于癌症患者的基因特征，制定个性化治疗方案的前沿医学技术。其核心理念是通过分析癌细胞中的基因突变、表达模式及其他基因特征，来选择最有效的治疗方法，从而提高治疗效果并减少副作用。',
|
|
docImg: 'https://img.99.com.cn/uploads/doctor/litpic/20200819152243416.jpg',
|
|
name: '梁茵',
|
|
title: '主任医师',
|
|
},
|
|
{
|
|
id: 4,
|
|
question: '全基因检测一共多少项',
|
|
answer:
|
|
'全基因检测的项目数可包括数百万个变异位点。这些项目涵盖了从单碱基变异到大段基因组结构变化的广泛范围。具体检测和报告的项目数取决于分析的深度和目标，通常会由专业人员根据检测目的进行筛选和解释。',
|
|
docImg: 'https://img.99.com.cn/uploads/202201/2022012105134615.jpg',
|
|
name: '李立杰',
|
|
title: '副主任医师',
|
|
},
|
|
]);
|
|
|
|
const profiles = reactive([
|
|
{
|
|
image: v1,
|
|
name: '5000万单位的干细胞进入身体后会发挥哪些效果',
|
|
videoUrl: 'https://h5.bodk.com.cn/video/Popular/1.mp4',
|
|
date: '2024-03-18',
|
|
},
|
|
{
|
|
image: v2,
|
|
name: '都说干细胞、免疫细胞可以抗衰老，它们发挥的作用是什么',
|
|
videoUrl: 'https://h5.bodk.com.cn/video/Popular/2.mp4',
|
|
date: '2024-03-25',
|
|
},
|
|
{
|
|
image: v3,
|
|
name: '干细胞的功能和作用',
|
|
videoUrl: 'https://h5.bodk.com.cn/video/Popular/3.mp4',
|
|
date: '2024-04-07',
|
|
},
|
|
{
|
|
image: v4,
|
|
name: '干细胞的四大神奇功能',
|
|
videoUrl: 'https://h5.bodk.com.cn/video/Popular/4.mp4',
|
|
date: '2024-04-07',
|
|
},
|
|
{
|
|
image: v5,
|
|
name: '干细胞对身体的几大作用，你知道几个？',
|
|
videoUrl: 'https://h5.bodk.com.cn/video/Popular/5.mp4',
|
|
date: '2024-05-19',
|
|
},
|
|
{
|
|
image: v6,
|
|
name: '干细胞发挥的三大功能',
|
|
videoUrl: 'https://h5.bodk.com.cn/video/Popular/6.mp4',
|
|
date: '2024-07-01',
|
|
},
|
|
{
|
|
image: v7,
|
|
name: '干细胞技术是什么？',
|
|
videoUrl: 'https://h5.bodk.com.cn/video/Popular/7.mp4',
|
|
date: '2024-07-19',
|
|
},
|
|
{
|
|
image: v8,
|
|
name: '干细胞如何成为你的个人健康守护者！',
|
|
videoUrl: 'https://h5.bodk.com.cn/video/Popular/8.mp4',
|
|
date: '2024-07-20',
|
|
},
|
|
{
|
|
image: v9,
|
|
name: '健康人打干细胞有哪些作用？',
|
|
videoUrl: 'https://h5.bodk.com.cn/video/Popular/9.mp4',
|
|
date: '2024-07-28',
|
|
},
|
|
{
|
|
image: v10,
|
|
name: '科普：干细胞抗衰的十二大功效',
|
|
videoUrl: 'https://h5.bodk.com.cn/video/Popular/10.mp4',
|
|
date: '2024-08-02',
|
|
},
|
|
{
|
|
image: v11,
|
|
name: '人体的奥秘之细胞功能',
|
|
videoUrl: 'https://h5.bodk.com.cn/video/Popular/11.mp4',
|
|
date: '2024-08-15',
|
|
},
|
|
{
|
|
image: v12,
|
|
name: '什么是干细胞？它的类型、功能和作用如何？',
|
|
videoUrl: 'https://h5.bodk.com.cn/video/Popular/12.mp4',
|
|
date: '2024-08-15',
|
|
},
|
|
{
|
|
image: v13,
|
|
name: '细胞知识分享：人体免疫细胞的重要性',
|
|
videoUrl: 'https://h5.bodk.com.cn/video/Popular/13.mp4',
|
|
date: '2024-08-20',
|
|
},
|
|
]);
|
|
|
|
const doctors = ref([
|
|
{
|
|
image: wlh,
|
|
name: '吴林华',
|
|
specialty: '生物医学专家',
|
|
rating: '湖北中医药大学教授',
|
|
experience: '8 年',
|
|
},
|
|
{
|
|
image: ydh,
|
|
name: '袁道红',
|
|
specialty: '生物科学专家',
|
|
rating: '中国管理科学院',
|
|
experience: '8 年',
|
|
},
|
|
{
|
|
image: hwx,
|
|
name: '胡文祥',
|
|
specialty: '干细胞专家',
|
|
rating: '中国科学院博士',
|
|
experience: '8 年',
|
|
},
|
|
{
|
|
image: lt,
|
|
name: '李陶',
|
|
specialty: '干细胞科学家',
|
|
rating: '日本东京大学博士',
|
|
experience: '8 年',
|
|
},
|
|
]);
|
|
|
|
const typeboxes = ref([
|
|
{ icon: icon1, title: '样本服务' },
|
|
{ icon: icon2, title: '健康服务' },
|
|
{ icon: icon3, title: '智能服务' },
|
|
{ icon: icon4, title: '体检服务' },
|
|
]);
|
|
|
|
const handlePlayClick = (item) => {
|
|
currentVideoUrl.value = item.videoUrl;
|
|
nextTick(() => {
|
|
video.value?.play();
|
|
isShowVideo.value = true;
|
|
scrollPosition.value = window.scrollY;
|
|
});
|
|
};
|
|
|
|
const handleClosedVideo = () => {
|
|
isShowVideo.value = false;
|
|
nextTick(() => {
|
|
window.scrollTo(0, scrollPosition.value);
|
|
exitFullScreen();
|
|
});
|
|
};
|
|
|
|
const handleVideoEnded = () => {
|
|
currentVideoUrl.value = null;
|
|
isShowVideo.value = false;
|
|
nextTick(() => {
|
|
window.scrollTo(0, scrollPosition.value);
|
|
exitFullScreen();
|
|
});
|
|
};
|
|
|
|
const handleOrientationChange = () => {
|
|
if (window.screen.orientation.type.includes('landscape')) {
|
|
enterFullScreen();
|
|
} else {
|
|
exitFullScreen();
|
|
}
|
|
};
|
|
|
|
const enterFullScreen = () => {
|
|
if (video.value?.requestFullscreen) {
|
|
video.value?.requestFullscreen();
|
|
} else if (video.value?.webkitRequestFullscreen) {
|
|
video.value?.webkitRequestFullscreen();
|
|
} else if (video.value?.mozRequestFullScreen) {
|
|
video.value?.mozRequestFullScreen();
|
|
} else if (video.value?.msRequestFullscreen) {
|
|
video.value?.msRequestFullscreen();
|
|
}
|
|
};
|
|
|
|
const exitFullScreen = () => {
|
|
if (document.exitFullscreen) {
|
|
document.exitFullscreen();
|
|
} else if (document?.webkitExitFullscreen) {
|
|
document?.webkitExitFullscreen();
|
|
} else if (document?.mozCancelFullScreen) {
|
|
document?.mozCancelFullScreen();
|
|
} else if (document?.msExitFullscreen) {
|
|
document?.msExitFullscreen();
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
window.addEventListener('orientationchange', handleOrientationChange);
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
closeToast();
|
|
window.removeEventListener('orientationchange', handleOrientationChange);
|
|
});
|
|
|
|
const handleNav = (url) => {
|
|
router.push(url);
|
|
};
|
|
|
|
const showTips = () => {
|
|
showToast({
|
|
message: '暂无更多数据',
|
|
duration: 1500,
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style type="text/scss" scoped>
|
|
@import url(@/assets/styles/pages/_healthy01.scss);
|
|
</style>
|
|
|