xinyang5yuan-web/components/AppFooter.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&#64;diwuyifuyuan.com</span>
        <span class="text_78">地址：河南省信阳市XXXXXXXXXXX</span>
        <span class="text_79">电话：0376-12345678</span>
        <span class="text_80">邮箱：xys&#64;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="flex flex-row" style="gap: 30px;margin-left: 50px;">
        <div v-for="item in broadcast" class="text-center">
          <a :href="item.live_address" target="_blank">
            <img src="public/images/y1.png" width="150px" height="150px" alt="服务号">
          </a>
          <div style="color: #ffffff;font-size: 15px;margin-top: 10px;">{{ item.title }}</div>
        </div>
      </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_111">来院路线</span>
      <span class="text_112">内科病区</span>
      <span class="text_113">妇产科门诊</span>
      <span class="text_114">妇产科门诊</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';
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;

        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>