hulai-website/components/layout/AppFooter.vue

<template>
  <footer class="app-footer">
    <div class="footer-container">
      <div v-if="brand && images" class="footer-grid">
        <!-- 品牌信息 -->
        <div class="footer-brand">
          <div class="footer-brand-main">
            <div class="footer-logo">
              <img v-if="images?.logo?.main" :src="images.logo.main" alt="呼籁旅行" class="footer-logo-img" width="44" height="44" />
              <div class="footer-logo-text">
                <span class="logo-text">呼籁旅行</span>
                <span class="logo-sub">HULAI TRAVEL</span>
              </div>
            </div>
            <p class="footer-desc">{{ brand?.slogan?.functional }}</p>
          </div>
        </div>

        <!-- 导航链接 -->
        <div v-for="group in footerNav" :key="group.title" class="footer-nav-group">
          <h4 class="footer-nav-title">{{ group.title }}</h4>
          <ul class="footer-nav-list">
            <li v-for="link in group.links" :key="link.to">
              <NuxtLink :to="link.to" class="footer-nav-link">{{ link.text }}</NuxtLink>
            </li>
          </ul>
        </div>

        <!-- 二维码区（桌面端独立列，手机端嵌入品牌区下方） -->
        <div v-if="qrChannels.length" class="footer-qr-list">
          <CommonQRCodeBlock
            v-for="ch in qrChannels"
            :key="ch.type"
            :image="ch.qrImage"
            :label="ch.label"
            size="small"
          />
        </div>
      </div>

      <!-- 底部信息 -->
      <div class="footer-bottom">
        <p v-if="brand?.serviceEntity" class="footer-company">旅行服务：{{ brand.serviceEntity }}</p>
        <p class="footer-legal">
          <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener" class="footer-icp-link">{{ brand?.icp }}</a>
          <span class="footer-divider">|</span>
          {{ brand?.icpEntity }}
        </p>
        <p class="footer-copyright">
          © {{ new Date().getFullYear() }} {{ brand?.fullName }} 版权所有
        </p>
      </div>
    </div>
  </footer>
</template>

<script setup>
const { data: brand } = await usePublicApi('brand')
const { data: images } = await usePublicApi('images')
const { data: navData } = await usePublicApi('navigation')
const { data: contact } = await usePublicApi('contact')

const footerNav = computed(() => navData.value?.footer || [])
const qrChannels = computed(() => (contact.value?.channels || []).filter(c => c.qrImage && !c.hidden))
</script>

<style lang="less" scoped>
.app-footer {
  background: linear-gradient(180deg, @color-primary-dark 0%, #0F2419 100%);
  color: rgba(255, 255, 255, 0.7);
  padding: @space-2xl 0 @space-lg;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, @color-primary, @color-accent, @color-primary);
  }
}

.footer-container {
  .container();
}

.footer-grid {
  display: grid;
  // 手机端：品牌区占满一行，三个导航组 3 列并排，二维码单独一行
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    'brand brand brand'
    'nav1 nav2 nav3'
    'qr qr qr';
  gap: @space-lg @space-md;

  .respond-md({
    // 桌面端：品牌 | 3 列导航 | 二维码，布局紧凑
    grid-template-columns: 1.3fr 1fr 1fr 1fr auto;
    grid-template-areas: 'brand nav1 nav2 nav3 qr';
    gap: @space-2xl;
    align-items: start;
  });
}

.footer-qr-list {
  grid-area: qr;
  display: flex;
  gap: @space-md;
  flex-shrink: 0;

  // 手机端二维码缩到 64px
  @media (max-width: 767px) {
    :deep(.qr-image) {
      width: 64px;
      height: 64px;
    }
  }

  .respond-md({
    gap: @space-lg;
  });
}

.footer-brand {
  grid-area: brand;
  margin-bottom: 0;
  // 手机端：logo + 文字 + 二维码横向排列，节省高度
  display: flex;
  align-items: flex-start;
  gap: @space-md;
  flex-wrap: wrap;

  .respond-md({
    // 桌面端：品牌信息紧凑堆叠（logo + slogan），二维码移到右侧独立列
    display: block;
    margin-bottom: 0;
  });
}

.footer-brand-main {
  flex: 1;
  min-width: 0;

  .respond-md({
    flex: none;
    width: 100%;
  });
}

.footer-nav-group:nth-child(2) { grid-area: nav1; }
.footer-nav-group:nth-child(3) { grid-area: nav2; }
.footer-nav-group:nth-child(4) { grid-area: nav3; }

.footer-logo {
  display: flex;
  align-items: center;
  gap: @space-sm;
  margin-bottom: @space-md;
}

.footer-logo-img {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  flex-shrink: 0;

  .respond-md({
    width: 44px;
    height: 44px;
  });
}

.footer-logo-text {
  display: flex;
  flex-direction: column;

  .logo-text {
    font-size: @font-size-lg;
    font-weight: @font-weight-bold;
    color: #fff;
  }

  .logo-sub {
    font-size: @font-size-xs;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 2px;
  }
}

.footer-desc {
  font-size: 12px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;

  .respond-md({
    font-size: @font-size-sm;
    margin-bottom: 0;
  });
}

.footer-nav-title {
  font-size: @font-size-sm;
  font-weight: @font-weight-medium;
  color: #fff;
  margin-bottom: @space-sm;

  .respond-md({
    font-size: @font-size-base;
    margin-bottom: @space-md;
  });
}

.footer-nav-list {
  display: flex;
  flex-direction: column;
  gap: 6px;

  .respond-md({
    gap: @space-sm;
  });
}

.footer-nav-link {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color @transition-fast;

  .respond-md({
    font-size: @font-size-sm;
  });

  &:hover {
    color: #fff;
  }
}

.footer-bottom {
  margin-top: @space-2xl;
  padding-top: @space-lg;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.footer-company {
  font-size: @font-size-sm;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: @space-xs;
}

.footer-legal {
  font-size: @font-size-xs;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: @space-xs;
}

.footer-divider {
  margin: 0 @space-sm;
  opacity: 0.5;
}

.footer-copyright {
  font-size: @font-size-xs;
  color: rgba(255, 255, 255, 0.45);
}

.footer-icp-link {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color @transition-fast;

  &:hover {
    color: rgba(255, 255, 255, 0.8);
  }
}
</style>