361 lines
12 KiB
Vue
361 lines
12 KiB
Vue
<template>
|
||
<!-- 使用条件渲染来分别显示PC端和移动端页脚 -->
|
||
<div v-if="!isMobile" class="group_29 flex-col">
|
||
<!-- 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">地址：河南省信阳市XXXXXXXXXXX</span>
|
||
<span class="text_76">电话：0376-12345678</span>
|
||
<span class="text_77">邮箱：xys@diwuyifuyuan.com</span>
|
||
<span class="text_78">地址：河南省信阳市XXXXXXXXXXX</span>
|
||
<span class="text_79">电话：0376-12345678</span>
|
||
<span class="text_80">邮箱：xys@diwuyifuyuan.com</span>
|
||
</div>
|
||
<div class="text-wrapper_59 flex-col justify-between">
|
||
<span class="text_81">门诊就医流程</span>
|
||
<span class="text_82">住院就医流程</span>
|
||
<span class="text_83">医院位置</span>
|
||
<span class="text_84">门诊就医流程</span>
|
||
<span class="text_85">住院就医流程</span>
|
||
<span class="text_86">医院位置</span>
|
||
</div>
|
||
<div class="text-wrapper_60 flex-col justify-between">
|
||
<span class="text_87">内科五病区</span>
|
||
<span class="text_88">消化内科病区</span>
|
||
<span class="text_89">内科病区</span>
|
||
<span class="text_90">内科五病区</span>
|
||
<span class="text_91">消化内科病区</span>
|
||
<span class="text_92">内科病区</span>
|
||
</div>
|
||
<div class="text-wrapper_61 flex-col">
|
||
<span class="text_93">健康体检科</span>
|
||
<span class="text_94">中医科门诊</span>
|
||
<span class="text_95">妇产科门诊</span>
|
||
<span class="text_96">健康体检科</span>
|
||
<span class="text_97">中医科门诊</span>
|
||
<span class="text_98">妇产科门诊</span>
|
||
</div>
|
||
<div class="text-wrapper_62 flex-col">
|
||
<span class="text_99">健康体检科</span>
|
||
<span class="text_100">中医科门诊</span>
|
||
<span class="text_101">妇产科门诊</span>
|
||
<span class="text_102">健康体检科</span>
|
||
<span class="text_103">中医科门诊</span>
|
||
<span class="text_104">妇产科门诊</span>
|
||
</div>
|
||
<div class="section_5 flex-col"></div>
|
||
<div class="section_6 flex-col"></div>
|
||
</div>
|
||
<div class="text-wrapper_63 flex-row">
|
||
<span class="text_105">来院路线</span>
|
||
<span class="text_106">内科病区</span>
|
||
<span class="text_107">妇产科门诊</span>
|
||
<span class="text_108">妇产科门诊</span>
|
||
<span class="text_109">服务号</span>
|
||
<span class="text_110">订阅号</span>
|
||
<span class="text_111">来院路线</span>
|
||
<span class="text_112">内科病区</span>
|
||
<span class="text_113">妇产科门诊</span>
|
||
<span class="text_114">妇产科门诊</span>
|
||
<span class="text_115">服务号</span>
|
||
<span class="text_116">订阅号</span>
|
||
</div>
|
||
<div style="background-color: rgba(26, 172, 162, 1);padding-bottom: 20px;text-align: center;color: #ffffff;">
|
||
<a href="https://beian.miit.gov.cn/" target="_blank">ICP备2025118630号</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 移动端全新页脚设计 -->
|
||
<div v-else class="mobile-footer">
|
||
<!-- 主要信息区 -->
|
||
<div class="mobile-main-info">
|
||
<div class="hospital-info">
|
||
<h3>信阳第五人民医院</h3>
|
||
<p><i class="location-icon"></i> 地址：河南省信阳市XXXXXXXXXXX</p>
|
||
<p><i class="phone-icon"></i> 电话：0376-12345678</p>
|
||
<p><i class="email-icon"></i> 邮箱：xys@diwuyifuyuan.com</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">
|
||
<a href="#">门诊就医流程</a>
|
||
<a href="#">住院就医流程</a>
|
||
<a href="#">医院位置</a>
|
||
<a href="#">来院路线</a>
|
||
</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">
|
||
<a href="#">内科五病区</a>
|
||
<a href="#">消化内科病区</a>
|
||
<a href="#">内科病区</a>
|
||
<a href="#">健康体检科</a>
|
||
<a href="#">中医科门诊</a>
|
||
<a href="#">妇产科门诊</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部固定信息和二维码 -->
|
||
<div class="mobile-bottom">
|
||
<div class="qr-codes">
|
||
<div class="qr-item">
|
||
<div class="qr-code service-qr"></div>
|
||
<p>服务号</p>
|
||
</div>
|
||
<div class="qr-item">
|
||
<div class="qr-code subscribe-qr"></div>
|
||
<p>订阅号</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';
|
||
|
||
// 用于检测设备类型的响应式变量
|
||
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();
|
||
// 添加窗口大小变化监听
|
||
window.addEventListener('resize', checkIfMobile);
|
||
});
|
||
|
||
// 组件卸载时移除监听，避免内存泄漏
|
||
onUnmounted(() => {
|
||
window.removeEventListener('resize', checkIfMobile);
|
||
});
|
||
</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;
|
||
|
||
a {
|
||
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;
|
||
|
||
.qr-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin: 0 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;
|
||
}
|
||
</style>
|