xinyang5yuan-web/pages/index.vue

<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>