xinyang5yuan-web/components/AppFooter.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>
        </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="/phone_info/30242">
            <div>结核科</div>
          </NuxtLink>
          <NuxtLink to="/phone_info/30240">
            <div>中医科</div>
          </NuxtLink>
          <NuxtLink to="/phone_info/30239">
            <div>急诊医学科</div>
          </NuxtLink>
          <NuxtLink to="/phone_info/30241">
            <div>感染科</div>
          </NuxtLink>
          <NuxtLink to="/phone_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>