570 lines
23 KiB
Vue
570 lines
23 KiB
Vue
<template>
|
||
<div class="section_3 flex-col">
|
||
<div class="group_6 flex-col relative">
|
||
<swiper class="swiper-container w-full" v-bind="swiperOptionsNews" @swiper="onSwiperNews"
|
||
@slideChange="onSlideChangeNews">
|
||
<swiper-slide>
|
||
<img src="public/images/sw1.png" class="w-full" />
|
||
</swiper-slide>
|
||
<swiper-slide>
|
||
<img src="public/images/sw1.png" class="w-full" />
|
||
</swiper-slide>
|
||
<swiper-slide>
|
||
<img src="public/images/sw1.png" class="w-full" />
|
||
</swiper-slide>
|
||
<swiper-slide>
|
||
<img src="public/images/sw1.png" class="w-full" />
|
||
</swiper-slide>
|
||
</swiper>
|
||
<div class="flex items-center justify-center gap-2 absolute w-full z-10 bottom-[30px]">
|
||
<div class="w-[20px] bg-white h-[3px] rounded-full" :class="activeIndex == 0 ? '' : 'opacity-50'"></div>
|
||
<div class="w-[20px] bg-white h-[3px] rounded-full" :class="activeIndex == 1 ? '' : 'opacity-50'"></div>
|
||
<div class="w-[20px] bg-white h-[3px] rounded-full" :class="activeIndex == 2 ? '' : 'opacity-50'"></div>
|
||
<div class="w-[20px] bg-white h-[3px] rounded-full" :class="activeIndex == 3 ? '' : 'opacity-50'"></div>
|
||
</div>
|
||
</div>
|
||
<!--第二块-->
|
||
<div class="flex-col er_back">
|
||
<div class="group_17 flex-col z-10">
|
||
<div class="box_35 flex-row flex-wrap justify-center gap-4 px-4" style="height: auto; padding: 20px 0;">
|
||
<div class="box_22 flex-col w-full mb-6">
|
||
<span class="text_59 text-xl">医院信息查询</span>
|
||
<span class="text_60 text-sm">Hospital information inquiry</span>
|
||
<div class="group_26 flex-col mt-2">
|
||
<span class="text_61 text-sm">请输入您要查询的内容</span>
|
||
<div class="group_27 flex-col">
|
||
<div class="group_28 flex-col">
|
||
<img src="public/images/ser.png" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="box_35 flex-row flex-wrap justify-center px-4 gap-4">
|
||
<div class="group_36 flex-row flex-wrap justify-between">
|
||
<div class="box_23 flex-col w-[48%] mb-4">
|
||
<div class="image-wrapper_7 flex-col i2">
|
||
<img class="image_16 w-12 h-12" referrerpolicy="no-referrer"
|
||
src="public/images/k5.png" />
|
||
</div>
|
||
<span class="text-sm">医院概况</span>
|
||
<span class="text-xs">Hospital Overview</span>
|
||
</div>
|
||
<div class="box_24 flex-col w-[48%] mb-4" style="background-color: #BDAA82;">
|
||
<div class="image-wrapper_7 flex-col i2">
|
||
<img class="image_16 w-12 h-12" referrerpolicy="no-referrer"
|
||
src="public/images/k1.png" />
|
||
</div>
|
||
<span class="text-sm">患者服务</span>
|
||
<span class="text-xs">Patient Services</span>
|
||
</div>
|
||
<div class="box_24 flex-col w-[48%] mb-4" style="background-color: #1F96AE;">
|
||
<div class="image-wrapper_7 flex-col i2">
|
||
<img class="label_5 w-12 h-12" referrerpolicy="no-referrer"
|
||
src="public/images/k4.png" />
|
||
</div>
|
||
<span class="text-sm">医院位置</span>
|
||
<span class="text-xs">Hospital location</span>
|
||
</div>
|
||
<div class="box_24 flex-col w-[48%] mb-4" style="background-color: #ffffff;color: #000;">
|
||
<div class="image-wrapper_7 flex-col i2">
|
||
<img class="label_5 w-12 h-12" referrerpolicy="no-referrer"
|
||
src="public/images/k6.png" />
|
||
</div>
|
||
<span class="text-sm">紧急服务</span>
|
||
<span class="text-xs">Emergency services</span>
|
||
</div>
|
||
<div class="box_24 flex-col w-[48%] mb-4" style="background-color: #466C9A;;">
|
||
<div class="image-wrapper_7 flex-col i2">
|
||
<img class="label_5 w-12 h-12" referrerpolicy="no-referrer"
|
||
src="public/images/k2.png" />
|
||
</div>
|
||
<span class="text-sm">医生团队</span>
|
||
<span class="text-xs">Doctor team</span>
|
||
</div>
|
||
<div class="box_24 flex-col w-[48%] mb-4" style="background-color: #B8C489;">
|
||
<div class="image-wrapper_7 flex-col i2">
|
||
<img class="label_5 w-12 h-12" referrerpolicy="no-referrer"
|
||
src="public/images/k3.png" />
|
||
</div>
|
||
<span class="text-sm">科室介绍</span>
|
||
<span class="text-xs">Department Introduction</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex-col z-10 px-4">
|
||
<img class="w-full mb-4" referrerpolicy="no-referrer" src="public/images/ks4.png" />
|
||
<div class="box_26 flex-col">
|
||
<div class="group_38 flex-row justify-between items-center mb-2">
|
||
<div class="image-wrapper_10 flex-col">
|
||
<img class="label_6 w-8 h-8" referrerpolicy="no-referrer" src="public/images/k7.png" />
|
||
</div>
|
||
<span class="text_67 text-lg font-medium">医院简介</span>
|
||
</div>
|
||
<span class="text_68 text-sm leading-relaxed">
|
||
医院内设科室15个，现有专业技术人员109人，其中高级职称7人，中级职称25人，医院设有120张床位，拥有先进的医疗设备，如飞利浦螺旋CT、德国CE公司800mAX线机、意大利移动式床边X光机、日本心电监护仪、日本肺功能测量系统、人工肝、全自动肝病治疗仪、中心监护系统、纤维内窥镜系统、有创和无创呼吸系统、重症监护系统、心脏除颤系统、中心负压和供氧系统、自动心电分析系统、全自动生化分析系统、全自动血液和尿检测系统、全自动酶标仪、荷兰彩色B超等先进医疗设备。信阳市第五人民医院奉行救死扶伤，全心全意为人民服务的宗旨，全体医务人员将以优质的服务质量、精湛的医疗技术，为广大患者提供满意周到的服务。
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="z-10 flex-col gap-8 px-4 py-6">
|
||
<!--通知公告-->
|
||
<div class="w-full">
|
||
<div class="flex justify-between items-center mb-4">
|
||
<div class="flex items-center">
|
||
<img class="label_3 w-6 h-6 mr-2" referrerpolicy="no-referrer" src="public/images/c2.png" />
|
||
<span class="text_38 text-lg">通知公告</span>
|
||
</div>
|
||
<div class="flex items-center border border-black px-3 py-1 rounded-full">
|
||
<span class="text_39 text-xs">查看更多</span>
|
||
<div class="group_22 flex-col ml-1">
|
||
<img src="public/images/right.png" class="w-4 h-4" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div v-for="(item, index) in 3" class="mb-4">
|
||
<div v-if="index == 0" class="mb-2">
|
||
<img class="image_13 w-full" referrerpolicy="no-referrer" src="public/images/new.png" />
|
||
</div>
|
||
<div class="mb-2">
|
||
<span class="text_41 text-base font-medium">国际交流添新篇发，合作共筑医疗梦 意大利锡耶纳大学教</span>
|
||
</div>
|
||
<div class="mb-2">
|
||
<span class="text_43 text-sm text-gray-600">
|
||
与北京华通国康公益基金会理事长陈冉率11人专家代表团，到我院进行深度参观交流。我院院长高社干、党委副书记牛牧青、副院长富奇志及相关职能科室负责人参加了会议。
|
||
</span>
|
||
</div>
|
||
<div class="mb-2">
|
||
<span class="text_45 text-xs text-gray-400">2025-04-15</span>
|
||
</div>
|
||
<div v-if="index < 2" class="mb-2">
|
||
<div class="box_19 w-full h-px bg-gray-200"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!--医院动态-->
|
||
<div class="w-full">
|
||
<div class="flex justify-between items-center mb-4">
|
||
<div class="flex items-center">
|
||
<img class="label_3 w-6 h-6 mr-2" referrerpolicy="no-referrer" src="public/images/c1.png" />
|
||
<span class="text_38 text-lg">医院动态</span>
|
||
</div>
|
||
<div class="flex items-center border border-black px-3 py-1 rounded-full">
|
||
<span class="text_39 text-xs">查看更多</span>
|
||
<div class="group_22 flex-col ml-1">
|
||
<img src="public/images/right.png" class="w-4 h-4" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div v-for="(item, index) in 3" class="mb-4">
|
||
<div v-if="index == 0" class="mb-2">
|
||
<img class="image_13 w-full" referrerpolicy="no-referrer"
|
||
src="public/images/new1.png" />
|
||
</div>
|
||
<div class="mb-2">
|
||
<span class="text_41 text-base font-medium">国际交流添新篇发，合作共筑医疗梦 意大利锡耶纳大学教</span>
|
||
</div>
|
||
<div class="mb-2">
|
||
<span class="text_43 text-sm text-gray-600">
|
||
与北京华通国康公益基金会理事长陈冉率11人专家代表团，到我院进行深度参观交流。我院院长高社干、党委副书记牛牧青、副院长富奇志及相关职能科室负责人参加了会议。
|
||
</span>
|
||
</div>
|
||
<div class="mb-2">
|
||
<span class="text_45 text-xs text-gray-400">2025-04-15</span>
|
||
</div>
|
||
<div v-if="index < 2" class="mb-2">
|
||
<div class="box_19 w-full h-px bg-gray-200"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="box_33 flex-col px-4 py-6">
|
||
<div class="box_2 flex-col">
|
||
<div class="text-wrapper_47 flex-row mb-4"><span class="text_13 text-lg font-medium">医生团队</span></div>
|
||
<div class="box_34 flex-row relative">
|
||
<swiper class="swiper-container h-full w-full" v-bind="swiperOptionsDoctor" @swiper="onSwiperDoctor"
|
||
@slideChange="onSlideChangeDoctor">
|
||
<swiper-slide v-for="item in 8">
|
||
<div class="group_10 flex-col p-2">
|
||
<div class="image-text_15 flex-col justify-between">
|
||
<img class="image_3 w-full" referrerpolicy="no-referrer"
|
||
src="public/images/y1.png" />
|
||
<div class="text-group_13 flex-row justify-between mt-2">
|
||
<span class="text_14 text-base font-medium">李商隐</span>
|
||
<span class="text_15 text-xs text-gray-600">副主任医师</span>
|
||
</div>
|
||
</div>
|
||
<span class="text_16 text-sm mt-2">擅长:从事眼科临床工作20年，对眼科临床疾病的诊断和治疗累积了丰富的经验</span>
|
||
</div>
|
||
</swiper-slide>
|
||
</swiper>
|
||
</div>
|
||
<div class="flex-row mt-4">
|
||
<div class="flex items-center justify-center gap-2 w-full">
|
||
<div class="w-[15px] bg-[#57D1C8] h-[3px] rounded-full"
|
||
:class="activedIndex == 0 ? '' : 'opacity-50'"></div>
|
||
<div class="w-[15px] bg-[#57D1C8] h-[3px] rounded-full"
|
||
:class="activedIndex == 1 ? '' : 'opacity-50'"></div>
|
||
<div class="w-[15px] bg-[#57D1C8] h-[3px] rounded-full"
|
||
:class="activedIndex == 2 ? '' : 'opacity-50'"></div>
|
||
<div class="w-[15px] bg-[#57D1C8] h-[3px] rounded-full"
|
||
:class="activedIndex == 3 ? '' : 'opacity-50'"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white pb-[30px] px-4">
|
||
<div class="block_6 flex-row justify-around mb-4">
|
||
<div @click="card = 1" :class="['text-wrapper_12', card == 1 ? 'text-wrapper_12-is' : '', 'flex-col']">
|
||
<span class="text_29 text-sm">先进设备</span>
|
||
<div v-if="card == 1" class="box_7 flex-col"></div>
|
||
</div>
|
||
<div @click="card = 2" :class="['text-wrapper_12', card == 2 ? 'text-wrapper_12-is' : '', 'flex-col']">
|
||
<span class="text_29 text-sm">医院环境</span>
|
||
<div v-if="card == 2" class="box_7 flex-col"></div>
|
||
</div>
|
||
<div @click="card = 3" :class="['text-wrapper_12', card == 3 ? 'text-wrapper_12-is' : '', 'flex-col']">
|
||
<span class="text_29 text-sm">荣誉资质</span>
|
||
<div v-if="card == 3" class="box_7 flex-col"></div>
|
||
</div>
|
||
<div @click="card = 4" :class="['text-wrapper_12', card == 4 ? 'text-wrapper_12-is' : '', 'flex-col']">
|
||
<span class="text_29 text-sm">公益行动</span>
|
||
<div v-if="card == 4" class="box_7 flex-col"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="block_8 flex-row relative">
|
||
<swiper class="swiper-container h-full w-full" v-bind="swiperOptionsKK" @swiper="onSwiperKK"
|
||
@slideChange="onSlideChangeKK">
|
||
<swiper-slide v-for="(item, index) in 16" :key="index">
|
||
<div class="list-items_1 flex-col p-2">
|
||
<img src="public/images/t1.png" class="w-full">
|
||
<div class="text-wrapper_13 flex-col mt-2">
|
||
<span class="text_33 text-xs text-center">26人高压氧舱</span>
|
||
</div>
|
||
</div>
|
||
</swiper-slide>
|
||
</swiper>
|
||
</div>
|
||
<div class="flex-row mt-4">
|
||
<div class="flex items-center justify-center gap-2 w-full">
|
||
<div class="w-[15px] bg-[#57D1C8] h-[3px] rounded-full"
|
||
:class="activedKKIndex == 0 ? '' : 'opacity-50'"></div>
|
||
<div class="w-[15px] bg-[#57D1C8] h-[3px] rounded-full"
|
||
:class="activedKKIndex == 1 ? '' : 'opacity-50'"></div>
|
||
<div class="w-[15px] bg-[#57D1C8] h-[3px] rounded-full"
|
||
:class="activedKKIndex == 2 ? '' : 'opacity-50'"></div>
|
||
<div class="w-[15px] bg-[#57D1C8] h-[3px] rounded-full"
|
||
:class="activedKKIndex == 3 ? '' : 'opacity-50'"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { Swiper, SwiperSlide } from 'swiper/vue'
|
||
import { nextTick, ref, onMounted } from 'vue'
|
||
import 'swiper/css'
|
||
import { Mousewheel, Navigation, Grid, EffectFade, Autoplay } from 'swiper/modules'
|
||
import 'swiper/css/mousewheel'
|
||
import 'swiper/css/navigation'
|
||
import 'swiper/css/grid'
|
||
import 'swiper/css/effect-fade'
|
||
import 'swiper/css/autoplay'
|
||
import * as swiperAni from '@/assets/animate/animate.js'
|
||
import $api from '@/service/webRequest'
|
||
import { useI18n } from 'vue-i18n'
|
||
import { useStore } from '~/store'
|
||
import type { Swiper as SwiperType } from 'swiper'
|
||
const { locale } = useI18n()
|
||
|
||
const card = ref(1);
|
||
|
||
const activeIndex = ref(0);
|
||
|
||
|
||
const onSlideChangeNews = (s: any) => {
|
||
activeIndex.value = s.realIndex;
|
||
}
|
||
|
||
// Swiper配置
|
||
const swiperOptionsNews = {
|
||
autoplay: {
|
||
delay: 6000,
|
||
disableOnInteraction: false,
|
||
},
|
||
direction: 'horizontal' as 'horizontal' | 'vertical',
|
||
speed: 500,
|
||
effect: 'fade',
|
||
loop: true,
|
||
modules: [Navigation, EffectFade, Autoplay],
|
||
navigation: {
|
||
nextEl: '#swipen_prev',
|
||
prevEl: '#swipen_next',
|
||
},
|
||
}
|
||
// banner
|
||
let newsSwiper: SwiperType | null = null
|
||
const onSwiperNews = (swiper: SwiperType) => {
|
||
newsSwiper = swiper
|
||
}
|
||
// Swiper配置
|
||
const swiperOptionsDoctor = {
|
||
direction: 'horizontal' as 'horizontal' | 'vertical',
|
||
slidesPerView: 2,
|
||
slidesPerGroup: 2,
|
||
spaceBetween: 10,
|
||
speed: 700,
|
||
loop: false,
|
||
modules: [Navigation],
|
||
navigation: {
|
||
nextEl: '#swipen_prev',
|
||
prevEl: '#swipen_next',
|
||
},
|
||
}
|
||
//医生团队
|
||
const activedIndex = ref(0);
|
||
let doctorSwiper: SwiperType | null = null
|
||
const onSwiperDoctor = (swiper: SwiperType) => {
|
||
doctorSwiper = swiper
|
||
}
|
||
const onSlideChangeDoctor = (s: any) => {
|
||
activedIndex.value = s.snapIndex;
|
||
}
|
||
|
||
|
||
const swiperOptionsKK = {
|
||
direction: 'horizontal' as 'horizontal' | 'vertical',
|
||
slidesPerView: 2,
|
||
slidesPerGroup: 2,
|
||
speed: 700,
|
||
loop: false,
|
||
modules: [Navigation, Grid],
|
||
grid: {
|
||
fill: 'row',
|
||
rows: 2,
|
||
},
|
||
navigation: {
|
||
nextEl: '#kkswipen_prev',
|
||
prevEl: '#kkswipen_next',
|
||
},
|
||
}
|
||
|
||
let kkSwiper: SwiperType | null = null;
|
||
const activedKKIndex = ref(0);
|
||
const onSwiperKK = (swiper: SwiperType) => {
|
||
kkSwiper = swiper
|
||
}
|
||
const onSlideChangeKK = (s: any) => {
|
||
activedKKIndex.value = s.snapIndex;
|
||
}
|
||
onMounted(() => {
|
||
// 在移动端视图下初始化
|
||
document.documentElement.style.fontSize = '16px';
|
||
})
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "@/assets/animate/animate.min.css";
|
||
@import "@/assets/css/index.css";
|
||
|
||
/* 添加更多响应式样式 */
|
||
.section_3 {
|
||
width: 100%;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.er_back {
|
||
padding: 10px;
|
||
}
|
||
|
||
.san_count {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 0 15px;
|
||
}
|
||
|
||
|
||
/* 调整标题间距 */
|
||
.text_59,
|
||
.text_67,
|
||
.text_38,
|
||
.text_13 {
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
/* 优化按钮样式 */
|
||
.text-wrapper_12 {
|
||
padding: 8px 12px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.text-wrapper_12-is {
|
||
color: #57D1C8;
|
||
}
|
||
|
||
.box_7 {
|
||
height: 2px;
|
||
background-color: #57D1C8;
|
||
width: 100%;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
/* 手机端专用样式 */
|
||
@media (max-width: 768px) {
|
||
|
||
// .flex-col {
|
||
// width: 100%;
|
||
// }
|
||
.group_17 {
|
||
width: 100% !important;
|
||
}
|
||
|
||
.box_22 {
|
||
width: 100% !important;
|
||
margin-bottom: 0px;
|
||
}
|
||
|
||
.group_26 {
|
||
width: 66% !important;
|
||
}
|
||
|
||
.group_27 {
|
||
left: 245px !important;
|
||
height: 39px !important;
|
||
}
|
||
|
||
.group_28 {
|
||
margin: 8px 0 0 22px;
|
||
}
|
||
.group_36{
|
||
height: auto!important;
|
||
margin-top: 0px!important;
|
||
}
|
||
.text_68 {
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
}
|
||
.box_23{
|
||
width: 48%;
|
||
text-align: center;
|
||
color: #fff;
|
||
height: 145px;
|
||
padding-top: 20px;
|
||
}
|
||
.box_24{
|
||
width: 48%;
|
||
text-align: center;
|
||
color: #fff;
|
||
height: 145px;
|
||
padding-top: 20px;
|
||
margin-top: 0px;
|
||
}
|
||
.image_16,
|
||
.label_5,
|
||
.label_1,
|
||
.label_2,
|
||
.image_10 {
|
||
width: 40px;
|
||
height: 40px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.text_62,
|
||
.text_64,
|
||
.text_65,
|
||
.text-group_6,
|
||
.text_35,
|
||
.text_36 {
|
||
font-size: 14px;
|
||
margin-top: 5px;
|
||
text-align: center;
|
||
}
|
||
|
||
.text_63,
|
||
.paragraph_3,
|
||
.text_66,
|
||
.text_34,
|
||
.paragraph_2,
|
||
.text_37 {
|
||
font-size: 10px;
|
||
text-align: center;
|
||
}
|
||
.image-wrapper_7{
|
||
margin: 0;
|
||
text-align: center;
|
||
width: 100%;
|
||
}
|
||
.box_26{
|
||
margin-left: 0px;;
|
||
height: auto;
|
||
padding:20px 10px;
|
||
margin-top: 0px;
|
||
}
|
||
.text_68{
|
||
margin: 0px;
|
||
height: auto;
|
||
width: 100%;
|
||
}
|
||
.group_38{
|
||
margin: 0 auto;
|
||
padding-bottom: 20px;
|
||
}
|
||
.image_13{
|
||
height: 100%;
|
||
}
|
||
.group_10{
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
.image_3 {
|
||
width:100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
.image-text_15{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.box_33 {
|
||
padding-top: 20px;
|
||
}
|
||
.box_34 {
|
||
margin-top: 20px;
|
||
}
|
||
.box_2{
|
||
height: 100%;
|
||
}
|
||
.text-wrapper_12{
|
||
height:38px
|
||
}
|
||
.block_6{
|
||
height: 100%;
|
||
}
|
||
.block_8{
|
||
height: 100%;
|
||
margin-top: 0px;
|
||
}
|
||
.list-items_1{
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
.text-wrapper_13{
|
||
width: 100%;
|
||
}
|
||
|
||
}
|
||
</style>
|