榆钱落尽槿花稀
b7278a8ea7
2.大标题表述已修正 3.首页医生团队简介区域超出问题已解决 4.图片资源全面优化，涵盖背景图、医生照片及轮播图 5.时间展示格式优化，图片自适应显示功能已完善 6.轮播图最大高度限制
620 lines
18 KiB
Vue
620 lines
18 KiB
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 v-for="item in swiperList">
|
|
<img :src="item.rotation_image" class="w-full max-h-[600px]" style="object-fit: cover;" />
|
|
</swiper-slide>
|
|
</swiper>
|
|
<div class="flex items-center justify-center gap-5 absolute w-full z-10 bottom-[80px]">
|
|
<div v-for="(item, index) in swiperList" class="w-[30px] bg-white h-[5px]"
|
|
:class="activeIndex == index ? '' : '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 information inquiry</span>
|
|
<div class="group_26 flex-col">
|
|
<input type="text" class="text_61" v-model="searchContent" placeholder="请输入您要查询的内容">
|
|
<NuxtLink :to="'/search/' + searchContent">
|
|
<div class="group_27 flex-col">
|
|
<div class="group_28 flex-col">
|
|
<img src="public/images/ser.png" />
|
|
</div>
|
|
</div>
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
<NuxtLink to="/about">
|
|
<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 Overview</span>
|
|
</div>
|
|
</NuxtLink>
|
|
<NuxtLink to="/list/23">
|
|
<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 Services
|
|
<br />
|
|
</span>
|
|
</div>
|
|
</NuxtLink>
|
|
<NuxtLink to="/about">
|
|
<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 location</span>
|
|
</div>
|
|
</NuxtLink>
|
|
</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">
|
|
<NuxtLink to="/list/87">
|
|
<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 services</span>
|
|
</div>
|
|
</NuxtLink>
|
|
<NuxtLink to="/list/-3">
|
|
<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 team
|
|
<br />
|
|
<br />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</NuxtLink>
|
|
</div>
|
|
<div class="group_37 flex-col justify-between">
|
|
<NuxtLink to="/list/34">
|
|
<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 Introduction</span>
|
|
</div>
|
|
</NuxtLink>
|
|
</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="hospitalInfo.image" />
|
|
<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">
|
|
{{ hospitalInfo.description }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="z-10 justify-around align-center gap-10 san_count">
|
|
<!--左侧-->
|
|
<div class="left-my-news 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>
|
|
<NuxtLink to="/list/90">
|
|
<div class="flex-row align-center"
|
|
style="border:1px solid #000;padding: 10px 20px;border-radius: 50px;cursor: pointer;">
|
|
<span class="text_39">查看更多</span>
|
|
<div class="group_22 flex-col">
|
|
<img src="public/images/right.png" />
|
|
</div>
|
|
</div>
|
|
</NuxtLink>
|
|
</div>
|
|
<div class="mt-[20px]">
|
|
<div v-for="(item, index) in msgList" class="cursor-pointer" @click="goDetail(item)">
|
|
<div v-if="index == 0">
|
|
<img class="image_13" referrerpolicy="no-referrer" :src="item.news_image[0]" />
|
|
</div>
|
|
<div class="mt-[20px]">
|
|
<span class="text_41">{{ item.news_title }}</span>
|
|
</div>
|
|
<div class="mt-[10px]">
|
|
<span class="text_43">
|
|
{{ item.news_titleshort }}
|
|
</span>
|
|
</div>
|
|
<div class="mt-[10px]">
|
|
<span class="text_45">{{ formattedYearMonthDay(item.showtime) }}</span>
|
|
</div>
|
|
<div class="mt-[10px]" v-if="index < 2">
|
|
<div class="box_19 flex-col"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="left-my-news 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>
|
|
<NuxtLink to="/list/91">
|
|
<div class="flex-row align-center"
|
|
style="cursor: pointer;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>
|
|
</NuxtLink>
|
|
</div>
|
|
<div class="mt-[20px]">
|
|
<div v-for="(item, index) in dtList" class="cursor-pointer" @click="goDetail(item)">
|
|
<div v-if="index == 0">
|
|
<img class="image_13" referrerpolicy="no-referrer" :src="item.news_image[0]" />
|
|
</div>
|
|
<div class="mt-[20px]">
|
|
<span class="text_41">{{ item.news_title }}</span>
|
|
</div>
|
|
<div class="mt-[10px]">
|
|
<span class="text_43">
|
|
{{ item.news_titleshort }}
|
|
</span>
|
|
</div>
|
|
<div class="mt-[10px]">
|
|
<span class="text_45">{{ formattedYearMonthDay(item.showtime) }}</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 ysList" @click="goYsDetail(item)">
|
|
<div class="group_10 flex-col cursor-pointer">
|
|
<div class="image-text_15 flex-col justify-between">
|
|
<img class="image_3" referrerpolicy="no-referrer" :src="item.news_image[0]" />
|
|
<div class="text-group_13 flex-row">
|
|
<span class="text_14">{{ item.news_title }}</span>
|
|
<span class="text_15">{{ item.news_key }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="text_16 my_text_2">{{ item.news_auto }}</div>
|
|
</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 v-for="(item, index) in ysTotal" class="w-[20px] bg-[#57D1C8] h-[5px]"
|
|
:class="activedIndex == index ? '' : 'opacity-50'"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white pb-[50px]">
|
|
<div class="block_6 flex-row justify-center">
|
|
<div v-for="item in bottomList" @click="cardOpen(item)"
|
|
:class="['text-wrapper_12', card == item.id ? 'text-wrapper_12-is' : '', 'flex-col']">
|
|
<span class="text_29">{{ item.name }}</span>
|
|
<div v-if="card == item.id" 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 bottomInfoList" @click="goDetail(item)">
|
|
<div class="list-items_1 flex-col cursor-pointer" :key="index">
|
|
<img style="width: 100%;max-height: 220px;object-fit: cover;" :src="item.news_image[0]">
|
|
<div class="text-wrapper_13 flex-col">
|
|
<span class="text_33">{{ item.news_title }}</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 v-for="(item, index) in bottomInfoTotal" class="w-[20px] bg-[#57D1C8] h-[5px]"
|
|
:class="activedKKIndex == index ? '' : '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'
|
|
import { c } from 'naive-ui'
|
|
const { locale } = useI18n()
|
|
|
|
const searchContent = ref('');
|
|
|
|
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;
|
|
}
|
|
const router = useRouter()
|
|
onMounted(() => {
|
|
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
|
if (coMobile) {
|
|
router.push('/phone_index')
|
|
} else {
|
|
router.push('/')
|
|
}
|
|
getSwiperList();
|
|
getHospitalInfo();
|
|
getMsgList();
|
|
getDtList();
|
|
getYsList();
|
|
getBottomList();
|
|
|
|
})
|
|
|
|
//轮播图
|
|
const swiperList = ref([]);
|
|
const getSwiperList = () => {
|
|
$api.post("/api/index/rotation")
|
|
.then((res: any) => {
|
|
console.log(res)
|
|
swiperList.value = res.data.data;
|
|
})
|
|
.catch((err) => {
|
|
console.dir(err)
|
|
})
|
|
}
|
|
// 通知公告
|
|
const msgList = ref([]);
|
|
const getMsgList = () => {
|
|
$api.post("/api/news/index", { gory_id: 90, page: 1, pageSize: 3 })
|
|
.then((res: any) => {
|
|
console.log(res)
|
|
msgList.value = res.data.data.list;
|
|
})
|
|
.catch((err) => {
|
|
console.dir(err)
|
|
})
|
|
}
|
|
// 医院动态
|
|
const dtList = ref([]);
|
|
const getDtList = () => {
|
|
$api.post("/api/news/index", { gory_id: 91, page: 1, pageSize: 3 })
|
|
.then((res: any) => {
|
|
console.log(res)
|
|
dtList.value = res.data.data.list;
|
|
})
|
|
.catch((err) => {
|
|
console.dir(err)
|
|
})
|
|
}
|
|
// 医生团队
|
|
const ysList = ref([]);
|
|
const ysTotal = ref(0);
|
|
const getYsList = () => {
|
|
$api.post("/api/Newsbx/index", { page: 1, pageSize: 9999 })
|
|
.then((res: any) => {
|
|
console.log(res)
|
|
ysList.value = res.data.data.list;
|
|
//计算页数
|
|
ysTotal.value = Math.ceil(res.data.data.total_count / 5);
|
|
})
|
|
.catch((err) => {
|
|
console.dir(err)
|
|
})
|
|
}
|
|
//医院简介
|
|
const hospitalInfo = ref({});
|
|
const getHospitalInfo = () => {
|
|
$api.post("/api/Broadcast/hospital_overview")
|
|
.then((res: any) => {
|
|
console.log(res)
|
|
hospitalInfo.value = res.data.data;
|
|
})
|
|
.catch((err) => {
|
|
console.dir(err)
|
|
})
|
|
}
|
|
//先进设备等
|
|
const card = ref(1);
|
|
const bottomList = ref({});
|
|
const getBottomList = () => {
|
|
$api.post("/api/news/group", { flag: 'index' })
|
|
.then((res: any) => {
|
|
console.log(res)
|
|
bottomList.value = res.data.data;
|
|
card.value = res.data.data[0].id;
|
|
getBottomInfoList();
|
|
})
|
|
.catch((err) => {
|
|
console.dir(err)
|
|
})
|
|
}
|
|
//先进设备list
|
|
const bottomInfoList = ref({});
|
|
const bottomInfoTotal = ref(0);
|
|
const getBottomInfoList = () => {
|
|
$api.post("/api/news/index", { gory_id: card.value, page: 1, pageSize: 999 })
|
|
.then((res: any) => {
|
|
console.log(res)
|
|
bottomInfoList.value = res.data.data.list;
|
|
bottomInfoTotal.value = Math.ceil(res.data.data.total_count / 8);
|
|
})
|
|
.catch((err) => {
|
|
console.dir(err)
|
|
})
|
|
}
|
|
const cardOpen = (item) => {
|
|
card.value = item.id;
|
|
getBottomInfoList();
|
|
}
|
|
const openUrl = (index: number) => {
|
|
if (index == 0) {
|
|
window.location.href = `/about`
|
|
} else if (index == 1) {
|
|
sessionStorage.setItem('group_id', '23')
|
|
window.location.href = `/list/23`
|
|
} else if (index == 2) {
|
|
sessionStorage.setItem('group_id', '87')
|
|
window.location.href = `/list/87`
|
|
} else if (index == 3) {
|
|
sessionStorage.setItem('group_id', '-3')
|
|
window.location.href = `/list/-3`
|
|
} else if (index == 4) {
|
|
sessionStorage.setItem('group_id', '34')
|
|
window.location.href = `/list/34`
|
|
} else if (index == 5) {
|
|
sessionStorage.setItem('group_id', '90')
|
|
window.location.href = `/list/90`
|
|
} else if (index == 6) {
|
|
sessionStorage.setItem('group_id', '91')
|
|
window.location.href = `/list/91`
|
|
}
|
|
else {
|
|
sessionStorage.setItem('group_id', '0')
|
|
window.location.href = `/`
|
|
}
|
|
}
|
|
// 计算 "YYYY.MM.DD" 格式
|
|
const formattedYearMonthDay = (showtime) => {
|
|
const date = new Date(showtime);
|
|
const year = date.getFullYear();
|
|
const month = (date.getMonth() + 1).toString().padStart(2, "0");
|
|
const day = date.getDate().toString().padStart(2, "0");
|
|
return `${year}-${month}-${day}`;
|
|
};
|
|
const goDetail = (item) => {
|
|
sessionStorage.setItem('group_id', '-2')
|
|
window.open(`/info/${item.id}`)
|
|
}
|
|
const goYsDetail = (item) => {
|
|
sessionStorage.setItem('group_id', '-3')
|
|
window.open(`/ys_info/${item.id}`)
|
|
}
|
|
</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>
|