wo123/xinyang5yuan-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
xinyang5yuan-web/pages/index.vue

469 lines
16 KiB
Vue
Raw Normal View History

首页
2025-04-01 17:45:42 +08:00
<template>
<div class="section_3 flex-col">
<div class="group_6 flex-col relative">
<swiper class="swiper-container w-full" :slides-per-view="1" @swiper="onSwiperNews"
v-bind="swiperOptionsNews" @slideChange="onSlideChangeNews">
<swiper-slide>
<img src="public/images/sw1.png" class="w-full"/>
</swiper-slide>
</swiper>
<div class="flex items-center justify-center gap-5 absolute w-full z-10 bottom-[80px]">
<div class="w-[30px] bg-white h-[5px]" :class="activeIndex == 0 ? '' : 'opacity-50'"></div>
<div class="w-[30px] bg-white h-[5px]" :class="activeIndex == 1 ? '' : 'opacity-50'"></div>
<div class="w-[30px] bg-white h-[5px]" :class="activeIndex == 2 ? '' : 'opacity-50'"></div>
<div class="w-[30px] bg-white h-[5px]" :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 justify-start" style="height: 167px;">
<div class="box_22 flex-col">
<span class="text_59">医院信息查询</span>
<span class="text_60">Hospital&nbsp;information&nbsp;inquiry</span>
<div class="group_26 flex-col">
<span class="text_61">请输入您要查询的内容</span>
<div class="group_27 flex-col">
<div class="group_28 flex-col">
<img src="public/images/ser.png" />
</div>
</div>
</div>
</div>
<div class="box_23 flex-col">
<div class="image-wrapper_7 flex-col i2">
<img class="image_16" referrerpolicy="no-referrer" src="public/images/k5.png" />
</div>
<span class="text_62">医院概况</span>
<span class="text_63">Hospital&nbsp;Overview</span>
</div>
<div class="box_24 flex-col">
<div class="image-wrapper_8 flex-col">
<img class="image_16" referrerpolicy="no-referrer" src="public/images/k1.png" />
</div>
<span class="text_64">患者服务</span>
<span class="paragraph_3">
Patient&nbsp;Services
<br />
</span>
</div>
<div class="box_25 flex-col">
<div class="image-wrapper_9 flex-col">
<img class="label_5" referrerpolicy="no-referrer" src="public/images/k4.png" />
</div>
<span class="text_65">医院位置</span>
<span class="text_66">Hospital&nbsp;location</span>
</div>
</div>
<div class="box_35 flex-row justify-start">
<div class="group_18 flex-col">
<div class="group_19 flex-col"></div>
</div>
<div class="group_36 flex-col justify-between">
<div class="box_14 flex-col">
<div class="image-text_20 flex-col justify-between">
<div class="image-wrapper_2 flex-col">
<img class="label_1" referrerpolicy="no-referrer" src="public/images/k6.png" />
</div>
<span class="text-group_6">紧急服务</span>
</div>
<span class="text_34">Emergency&nbsp;services</span>
</div>
<div class="box_15 flex-col">
<div class="section_4 flex-col">
<div class="block_2 flex-col align-center">
<div class="image-wrapper_3 flex-col">
<img class="label_2" referrerpolicy="no-referrer" src="public/images/k2.png" />
</div>
</div>
<span class="text_35">医生团队</span>
<span class="paragraph_2">
Doctor&nbsp;team
<br />
<br />
</span>
</div>
</div>
</div>
<div class="group_37 flex-col justify-between">
<div class="box_16 flex-col">
<div class="image-wrapper_4 flex-col">
<img class="image_10" referrerpolicy="no-referrer" src="public/images/k3.png" />
</div>
<span class="text_36">科室介绍</span>
<span class="text_37">Department&nbsp;Introduction</span>
</div>
<img class="image_11" referrerpolicy="no-referrer" src="public/images/ks1.png" />
</div>
</div>
</div>
<div class="flex-col z-10" style="flex-direction: row; margin: 0 auto;margin-top: 30px;">
<img class="image_12" referrerpolicy="no-referrer" src="public/images/ks4.png" />
<div class="box_26 flex-col">
<div class="group_38 flex-row justify-between">
<div class="image-wrapper_10 flex-col">
<img class="label_6" referrerpolicy="no-referrer" src="public/images/k7.png" />
</div>
<span class="text_67">医院简介</span>
</div>
<span class="text_68">
医院内设科室15个，现有专业技术人员109人，其中高级职称7人，中级职称25人，医院设有120张床位，拥有先进的医疗设备，如飞利浦螺旋CT、德国CE公司800mAX线机、意大利移动式床边X光机、日本心电监护仪、日本肺功能测量系统、人工肝、全自动肝病治疗仪、中心监护系统、纤维内窥镜系统、有创和无创呼吸系统、重症监护系统、心脏除颤系统、中心负压和供氧系统、自动心电分析系统、全自动生化分析系统、全自动血液和尿检测系统、全自动酶标仪、荷兰彩色B超等先进医疗设备。信阳市第五人民医院奉行救死扶伤，全心全意为人民服务的宗旨，全体医务人员将以优质的服务质量、精湛的医疗技术，为广大患者提供满意周到的服务。
</span>
</div>
</div>
<div class="z-10 justify-around align-center gap-10 san_count">
<!--左侧-->
<div class="w-[50%]">
<div class="align-center justify-between ">
<div class="align-center">
<img class="label_3" referrerpolicy="no-referrer" src="public/images/c2.png" />
<span class="text_38">通知公告</span>
</div>
<div class="flex-row align-center"
style="border:1px solid #000;padding: 10px 20px;border-radius: 50px;">
<span class="text_39">查看更多</span>
<div class="group_22 flex-col">
<img src="public/images/right.png" />
</div>
</div>
</div>
<div class="mt-[20px]">
<div v-for="(item, index) in 3">
<div v-if="index == 0">
<img class="image_13" referrerpolicy="no-referrer" src="public/images/new.png" />
</div>
<div class="mt-[20px]">
<span class="text_41">国际交流添新篇发，合作共筑医疗梦&nbsp;意大利锡耶纳大学教</span>
</div>
<div class="mt-[10px]">
<span class="text_43">
与北京华通国康公益基金会理事长陈冉率11人专家代表团，到我院进行深度参观交流。我院院长高社干、党委副书记牛牧青、副院长富奇志及相关职能科室负责人参加了会议。
</span>
</div>
<div class="mt-[10px]">
<span class="text_45">2025-04-15</span>
</div>
<div class="mt-[10px]" v-if="index < 2">
<div class="box_19 flex-col"></div>
</div>
</div>
</div>
</div>
<div class="w-[50%]">
<div class="align-center justify-between ">
<div class="align-center">
<img class="label_3" referrerpolicy="no-referrer" src="public/images/c1.png" />
<span class="text_38">医院动态</span>
</div>
<div class="flex-row align-center"
style="border: 1px solid #000;padding: 10px 20px;border-radius: 50px;">
<span class="text_39">查看更多</span>
<div class="group_22 flex-col">
<img src="public/images/right.png" />
</div>
</div>
</div>
<div class="mt-[20px]">
<div v-for="(item, index) in 3">
<div v-if="index == 0">
<img class="image_13" referrerpolicy="no-referrer" src="public/images/new1.png" />
</div>
<div class="mt-[20px]">
<span class="text_41">国际交流添新篇发，合作共筑医疗梦&nbsp;意大利锡耶纳大学教</span>
</div>
<div class="mt-[10px]">
<span class="text_43">
与北京华通国康公益基金会理事长陈冉率11人专家代表团，到我院进行深度参观交流。我院院长高社干、党委副书记牛牧青、副院长富奇志及相关职能科室负责人参加了会议。
</span>
</div>
<div class="mt-[10px]">
<span class="text_45">2025-04-15</span>
</div>
<div class="mt-[10px]" v-if="index < 2">
<div class="box_19 flex-col"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box_33 flex-col">
<div class="box_2 flex-col">
<div class="text-wrapper_47 flex-row"><span class="text_13">医生团队</span></div>
<div class="box_34 flex-row">
<div class="group_9 flex-col">
<div id="swipen_next" style="cursor: pointer;">
<img class="w-[50px]" src="public/images/left.png" />
</div>
</div>
<swiper class="swiper-container h-full w-full" :slides-per-view="1" @swiper="onSwiperDoctor"
v-bind="swiperOptionsDoctor" @slideChange="onSlideChangeDoctor">
<swiper-slide v-for="item in 20">
<div class="group_10 flex-col">
<div class="image-text_15 flex-col justify-between">
<img class="image_3" referrerpolicy="no-referrer" src="public/images/y1.png" />
<div class="text-group_13 flex-row justify-between">
<span class="text_14">李商隐</span>
<span class="text_15">副主任医师</span>
</div>
</div>
<span class="text_16">擅长:从事眼科临床工作20年，对眼科临床疾病的诊断和治疗累积了丰富的经验</span>
</div>
</swiper-slide>
</swiper>
<div class="group_15 flex-col">
<div id="swipen_prev" style="cursor: pointer;">
<img class="w-[50px]" src="public/images/right2.png" />
</div>
</div>
</div>
<div class="flex-row mt-[20px]">
<div class="flex items-center justify-center gap-5 w-full z-10">
<div class="w-[20px] bg-[#57D1C8] h-[5px]" :class="activedIndex == 0 ? '' : 'opacity-50'"></div>
<div class="w-[20px] bg-[#57D1C8] h-[5px]" :class="activedIndex == 1 ? '' : 'opacity-50'"></div>
<div class="w-[20px] bg-[#57D1C8] h-[5px]" :class="activedIndex == 2 ? '' : 'opacity-50'"></div>
<div class="w-[20px] bg-[#57D1C8] h-[5px]" :class="activedIndex == 3 ? '' : 'opacity-50'"></div>
</div>
</div>
</div>
</div>
<div class="bg-white pb-[50px]">
<div class="block_6 flex-row justify-center">
<div @click="card = 1" :class="['text-wrapper_12', card == 1 ? 'text-wrapper_12-is' : '', 'flex-col']">
<span class="text_29">先进设备</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">医院环境</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">荣誉资质</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">公益行动</span>
<div v-if="card == 4" class="box_7 flex-col"></div>
</div>
</div>
<div class="block_8 flex-row">
<div class="box_10 flex-col">
<div id="kkswipen_next" style="cursor: pointer;">
<img class="w-[50px]" src="public/images/left.png" />
</div>
</div>
<swiper class="swiper-container h-full w-full" :slides-per-view="4" @swiper="onSwiperKK"
v-bind="swiperOptionsKK" @slideChange="onSlideChangeKK">
<swiper-slide v-for="(item, index) in 32">
<div class="list-items_1 flex-col" :key="index">
<img src="public/images/t1.png">
<div class="text-wrapper_13 flex-col">
<span class="text_33">26人高压氧舱</span>
</div>
</div>
</swiper-slide>
</swiper>
<div class="box_11 flex-col">
<div id="kkswipen_prev" style="cursor: pointer;">
<img class="w-[50px]" src="public/images/right2.png" />
</div>
</div>
</div>
<div class="flex-row mt-[40px]">
<div class="flex items-center justify-center gap-5 w-full z-10">
<div class="w-[20px] bg-[#57D1C8] h-[5px]" :class="activedKKIndex == 0 ? '' : 'opacity-50'"></div>
<div class="w-[20px] bg-[#57D1C8] h-[5px]" :class="activedKKIndex == 1 ? '' : 'opacity-50'"></div>
<div class="w-[20px] bg-[#57D1C8] h-[5px]" :class="activedKKIndex == 2 ? '' : 'opacity-50'"></div>
<div class="w-[20px] bg-[#57D1C8] h-[5px]" :class="activedKKIndex == 3 ? '' : 'opacity-50'"></div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { nextTick, ref } 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'
const { locale } = useI18n()
const card = ref(1);
const activeIndex = ref(0);
const onSlideChangeNews = (s) => {
activeIndex.value = s.realIndex;
}
// Swiper配置
const swiperOptionsNews = {
autoplay: {
delay: 6000,
disableOnInteraction: false,
},
direction: 'horizontal',
slidesPerView: 1,
speed: 500,
effect: 'fade',
loop: true,
modules: [Navigation, EffectFade, Autoplay],
navigation: {
nextEl: '#swipen_prev',
prevEl: '#swipen_next',
},
}
// banner
let newsSwiper: any = null
const onSwiperNews = (swiper: any) => {
newsSwiper = swiper
}
// Swiper配置
const swiperOptionsDoctor = {
direction: 'horizontal',
slidesPerView: 5,
slidesPerGroup: 5,
speed: 700,
loop: false,
modules: [Navigation],
navigation: {
nextEl: '#swipen_prev',
prevEl: '#swipen_next',
},
}
//医生团队
const activedIndex = ref(0);
let doctorSwiper: any = null
const onSwiperDoctor = (swiper: any) => {
doctorSwiper = swiper
}
const onSlideChangeDoctor = (s) => {
activedIndex.value = s.snapIndex;
}
const swiperOptionsKK = {
direction: 'horizontal',
slidesPerView: 4,
slidesPerGroup: 4,
speed: 700,
loop: false,
modules: [Navigation, Grid],
grid: {
fill: 'column',
rows: 2,
},
navigation: {
nextEl: '#kkswipen_prev',
prevEl: '#kkswipen_next',
},
}
let kkSwiper = null;
const activedKKIndex = ref(0);
const onSwiperKK = (swiper: any) => {
kkSwiper = swiper
}
const onSlideChangeKK = (s) => {
activedKKIndex.value = s.snapIndex;
}
onMounted(() => {
})
</script>
<style lang="scss" scoped>
@import "@/assets/animate/animate.min.css";
@import "@/assets/css/index.css";
@keyframes stroke {
to {
stroke-dashoffset: 0;
}
}
@keyframes hover-stroke {
from {
stroke-dashoffset: 320;
}
to {
stroke-dashoffset: 0;
}
}
.st0 {
fill: none;
stroke: #FFFFFF;
stroke-width: 3;
stroke-miterlimit: 3;
}
.st1 {
fill: none;
stroke: #FFFFFF;
stroke-width: 3;
stroke-miterlimit: 3;
}
.st2 {
fill: none;
stroke: #FFFFFF;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
/* 初始状态 - 全局设置 */
.st0,
.st1,
.st2 {
stroke-dasharray: 320;
stroke-dashoffset: 0;
}
/* 页面加载时的动画 */
.st0 {
animation: stroke 1.5s ease-in-out 0.5s forwards;
}
.st1 {
animation: stroke 1.5s ease-in-out 0.7s forwards;
}
.st2 {
animation: stroke 1.5s ease-in-out 0.9s forwards;
}
/* 然后应用新的悬停动画 */
.box_23:hover .st0 {
animation: hover-stroke 1.5s ease-in-out 0.9 forwards;
}
.box_23:hover .st1 {
animation: hover-stroke 1.5s ease-in-out 0.1s forwards;
}
.box_23:hover .st2 {
animation: hover-stroke 1.2s ease-in-out 0.8s forwards;
}
</style>
Reference in New Issue Copy Permalink