榆钱落尽槿花稀
b7278a8ea7
2.大标题表述已修正 3.首页医生团队简介区域超出问题已解决 4.图片资源全面优化，涵盖背景图、医生照片及轮播图 5.时间展示格式优化，图片自适应显示功能已完善 6.轮播图最大高度限制
425 lines
12 KiB
Vue
425 lines
12 KiB
Vue
<template>
|
||
<div v-if="!isMobile" style="background-color:rgba(26, 172, 162, 1);">
|
||
<div class="group_29 flex-col" :style="{ height: broadcast.length > 5 ? '450px' : 'auto' }">
|
||
<!-- PC端页脚 - 保持原有设计 -->
|
||
<div class="text-wrapper_57 flex-row">
|
||
<span class="text_69">联系我们</span>
|
||
<span class="text_70">就医指南</span>
|
||
<span class="text_71">科室导航</span>
|
||
<span class="text_72">联系我们</span>
|
||
<span class="text_73">就医指南</span>
|
||
<span class="text_74">科室导航</span>
|
||
</div>
|
||
<div class="block_4 flex-col"></div>
|
||
<div class="block_9 flex-row">
|
||
<div class="text-wrapper_58 flex-col justify-between">
|
||
<span class="text_75">地址：信阳市工业城城东路（京珠高速入口东500米）</span>
|
||
<span class="text_76">电话：0376-6555196</span>
|
||
<span class="text_77">门诊时间：周一至周五8:00-12:00；下午13:30-17:00</span>
|
||
</div>
|
||
<div class="text-wrapper_59 flex-col justify-between">
|
||
<NuxtLink to="/info/30316">
|
||
<div class="text_81">门诊就医流程</div>
|
||
</NuxtLink>
|
||
<NuxtLink to="/info/30317">
|
||
<div class="text_82">住院就医流程</div>
|
||
</NuxtLink>
|
||
<NuxtLink to="/about">
|
||
<div class="text_83">医院位置</div>
|
||
</NuxtLink>
|
||
</div>
|
||
<div class="text-wrapper_60 flex-col justify-between">
|
||
<NuxtLink to="/info/30242">
|
||
<div class="text_87">结核科</div>
|
||
</NuxtLink>
|
||
<NuxtLink to="/info/30240">
|
||
<div class="text_89">中医科</div>
|
||
</NuxtLink>
|
||
<NuxtLink to="/info/30239">
|
||
<div class="text_88">急诊医学科</div>
|
||
</NuxtLink>
|
||
</div>
|
||
<div class="text-wrapper_61 flex-col">
|
||
<NuxtLink to="/info/30241">
|
||
<div class="text_93">感染科</div>
|
||
</NuxtLink>
|
||
<NuxtLink to="/info/30238">
|
||
<div class="text_94">外科</div>
|
||
</NuxtLink>
|
||
</div>
|
||
<div class="bottom_list">
|
||
<div v-for="item in broadcast" class="broadcast-item">
|
||
<a :href="item.live_address" target="_blank">
|
||
<img :src="item.news_images[0]" class="bottom-img" :alt="item.title">
|
||
</a>
|
||
<div style="color: #ffffff;font-size: 15px;margin-top: 10px;">{{ item.title }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="background-color: rgba(26, 172, 162, 1);padding: 20px 0px;text-align: center;color: #ffffff;">
|
||
<a href="https://beian.miit.gov.cn/" target="_blank">ICP备2025118630号</a>
|
||
</div>
|
||
</div>
|
||
<!-- 使用条件渲染来分别显示PC端和移动端页脚 -->
|
||
|
||
|
||
<!-- 移动端全新页脚设计 -->
|
||
<div v-else class="mobile-footer">
|
||
<!-- 主要信息区 -->
|
||
<div class="mobile-main-info">
|
||
<div class="hospital-info">
|
||
<h3>信阳第五人民医院</h3>
|
||
<p><i class="location-icon"></i> 地址：信阳市工业城城东路（京珠高速入口东500米）</p>
|
||
<p><i class="phone-icon"></i> 电话：0376-6555196</p>
|
||
<p><i class="email-icon"></i> 门诊时间：周一至周五8:00-12:00；下午13:30-17:00</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 快速链接区域（可折叠） -->
|
||
<div class="mobile-quick-links">
|
||
<div class="link-section" @click="toggleSection('guide')">
|
||
<h4>就医指南 <i :class="{ 'arrow-down': !openSections.guide, 'arrow-up': openSections.guide }"></i></h4>
|
||
<div v-if="openSections.guide" class="section-content">
|
||
<NuxtLink to="/phone_info/30316">
|
||
<div>门诊就医流程</div>
|
||
</NuxtLink>
|
||
<NuxtLink to="/phone_info/30317">
|
||
<div>住院就医流程</div>
|
||
</NuxtLink>
|
||
<NuxtLink to="/phone_about">
|
||
<div>医院位置</div>
|
||
</NuxtLink>
|
||
<NuxtLink to="/phone_about">
|
||
<div>来院路线</div>
|
||
</NuxtLink>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="link-section" @click="toggleSection('departments')">
|
||
<h4>科室导航 <i :class="{ 'arrow-down': !openSections.departments, 'arrow-up': openSections.departments }"></i></h4>
|
||
<div v-if="openSections.departments" class="section-content">
|
||
<NuxtLink to="/info/30242">
|
||
<div>结核科</div>
|
||
</NuxtLink>
|
||
<NuxtLink to="/info/30240">
|
||
<div>中医科</div>
|
||
</NuxtLink>
|
||
<NuxtLink to="/info/30239">
|
||
<div>急诊医学科</div>
|
||
</NuxtLink>
|
||
<NuxtLink to="/info/30241">
|
||
<div>感染科</div>
|
||
</NuxtLink>
|
||
<NuxtLink to="/info/30238">
|
||
<div>外科</div>
|
||
</NuxtLink>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部固定信息和二维码 -->
|
||
<div class="mobile-bottom">
|
||
<div class="qr-codes">
|
||
<div class="qr-item" v-for="item in broadcast">
|
||
<a :href="item.live_address" target="_blank">
|
||
<img :src="item.news_images[0]" class="qr-code service-qr" :alt="item.title">
|
||
</a>
|
||
<p>{{ item.title }}</p>
|
||
</div>
|
||
</div>
|
||
<div class="copyright">
|
||
<a href="https://beian.miit.gov.cn/" target="_blank">ICP备2025118630号</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, onUnmounted, reactive } from 'vue';
|
||
import $api from '@/service/webRequest'
|
||
// 用于检测设备类型的响应式变量
|
||
const isMobile = ref(false);
|
||
|
||
// 移动端页脚的折叠部分状态管理
|
||
const openSections = reactive({
|
||
guide: false,
|
||
departments: false,
|
||
contact: false
|
||
});
|
||
|
||
// 切换折叠部分的显示状态
|
||
const toggleSection = (section) => {
|
||
openSections[section] = !openSections[section];
|
||
};
|
||
|
||
// 检查是否为移动设备的函数
|
||
const checkIfMobile = () => {
|
||
// 判断是否是手机端
|
||
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||
if (coMobile) {
|
||
console.log('访问自手机端或平板');
|
||
isMobile.value = true
|
||
} else {
|
||
console.log('访问自PC端');
|
||
isMobile.value = false
|
||
}
|
||
};
|
||
|
||
// 组件挂载时添加窗口大小变化的监听
|
||
onMounted(() => {
|
||
// 初始检查
|
||
checkIfMobile();
|
||
getBroadcast();
|
||
// 添加窗口大小变化监听
|
||
window.addEventListener('resize', checkIfMobile);
|
||
});
|
||
|
||
// 组件卸载时移除监听，避免内存泄漏
|
||
onUnmounted(() => {
|
||
window.removeEventListener('resize', checkIfMobile);
|
||
});
|
||
|
||
const broadcast = ref([]);
|
||
const getBroadcast = () => {
|
||
$api.post("/api/Broadcast/wl_url")
|
||
.then((res) => {
|
||
console.log(res);
|
||
broadcast.value = res.data.data;
|
||
})
|
||
.catch((err) => {
|
||
console.dir(err)
|
||
})
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "@/assets/css/index.css";
|
||
|
||
/* PC端样式保持不变 */
|
||
|
||
/* 移动端全新页脚样式 */
|
||
.mobile-footer {
|
||
background-color: #f5f5f5;
|
||
font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
|
||
color: #333;
|
||
padding: 20px 15px;
|
||
|
||
.mobile-main-info {
|
||
background-color: #fff;
|
||
border-radius: 8px;
|
||
padding: 15px;
|
||
margin-bottom: 15px;
|
||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||
|
||
.hospital-info {
|
||
h3 {
|
||
color: rgba(26, 172, 162, 1);
|
||
font-size: 18px;
|
||
margin-bottom: 10px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
p {
|
||
font-size: 14px;
|
||
margin: 8px 0;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
i {
|
||
margin-right: 8px;
|
||
width: 16px;
|
||
height: 16px;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
|
||
.location-icon {
|
||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(26, 172, 162, 1)'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E") no-repeat center;
|
||
}
|
||
|
||
.phone-icon {
|
||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(26, 172, 162, 1)'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") no-repeat center;
|
||
}
|
||
|
||
.email-icon {
|
||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(26, 172, 162, 1)'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") no-repeat center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.mobile-quick-links {
|
||
.link-section {
|
||
background-color: #fff;
|
||
border-radius: 8px;
|
||
margin-bottom: 10px;
|
||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||
overflow: hidden;
|
||
|
||
h4 {
|
||
margin: 0;
|
||
padding: 15px;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
color: #333;
|
||
position: relative;
|
||
|
||
i {
|
||
width: 12px;
|
||
height: 12px;
|
||
transition: transform 0.3s;
|
||
}
|
||
|
||
.arrow-down {
|
||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E") no-repeat center;
|
||
}
|
||
|
||
.arrow-up {
|
||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E") no-repeat center;
|
||
}
|
||
}
|
||
|
||
.section-content {
|
||
padding: 0 15px 15px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
div {
|
||
color: #666;
|
||
text-decoration: none;
|
||
padding: 8px 0;
|
||
font-size: 14px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
&:active {
|
||
color: rgba(26, 172, 162, 1);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.mobile-bottom {
|
||
margin-top: 20px;
|
||
|
||
.qr-codes {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-bottom: 15px;
|
||
flex-wrap: wrap;
|
||
|
||
.qr-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin: 15px;
|
||
|
||
.qr-code {
|
||
width: 80px;
|
||
height: 80px;
|
||
background-color: #fff;
|
||
border-radius: 4px;
|
||
margin-bottom: 5px;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
p {
|
||
font-size: 12px;
|
||
color: #666;
|
||
margin: 5px 0 0;
|
||
}
|
||
}
|
||
|
||
.service-qr {
|
||
/* 这里应该放真实的二维码图片 */
|
||
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(26, 172, 162, 1)'%3E%3Cpath d='M3 3h8v8H3V3zm2 2v4h4V5H5zm8-2h8v8h-8V3zm2 2v4h4V5h-4zM3 13h8v8H3v-8zm2 2v4h4v-4H5zm13-2h3v3h-3v-3zm0 5h3v3h-3v-3zm-5 0h3v3h-3v-3zm5-5h3v3h-3v-3z'/%3E%3C/svg%3E") no-repeat center;
|
||
background-size: 60px;
|
||
}
|
||
|
||
.subscribe-qr {
|
||
/* 这里应该放真实的二维码图片 */
|
||
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(26, 172, 162, 1)'%3E%3Cpath d='M3 3h8v8H3V3zm2 2v4h4V5H5zm8-2h8v8h-8V3zm2 2v4h4V5h-4zM3 13h8v8H3v-8zm2 2v4h4v-4H5zm13-2h3v3h-3v-3zm0 5h3v3h-3v-3zm-5 0h3v3h-3v-3zm5-5h3v3h-3v-3z'/%3E%3C/svg%3E") no-repeat center;
|
||
background-size: 60px;
|
||
}
|
||
}
|
||
|
||
.copyright {
|
||
text-align: center;
|
||
padding: 15px 0;
|
||
background-color: rgba(26, 172, 162, 1);
|
||
border-radius: 8px;
|
||
|
||
a {
|
||
color: #fff;
|
||
font-size: 12px;
|
||
text-decoration: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.text-wrapper_59 span {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.text-wrapper_60 span {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.text-wrapper_61 span {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.text-wrapper_62 span {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.bottom-img {
|
||
width: 100px;
|
||
height: 100px;
|
||
}
|
||
|
||
.bottom_list {
|
||
flex-wrap: wrap;
|
||
gap: 30px;
|
||
margin-left: 50px;
|
||
}
|
||
|
||
.group_29 {
|
||
height: 100%;
|
||
}
|
||
|
||
.broadcast-item {
|
||
float: left;
|
||
margin: 10px;
|
||
text-align: center;
|
||
}
|
||
|
||
.block_9 {
|
||
width: 81%;
|
||
}
|
||
|
||
@media screen and (max-width: 1440px) {
|
||
.bottom-img {
|
||
width: 90px;
|
||
height: 90px;
|
||
}
|
||
|
||
.block_9 {
|
||
width: 95%;
|
||
}
|
||
|
||
.bottom_list {
|
||
width: 350px;
|
||
}
|
||
}
|
||
</style>
|