hulai-website/components/about/MascotShowcase.vue

<template>
  <section class="section section--warm">
    <div class="container">
      <CommonSectionTitle :title="st('aboutPage.mascot', '品牌IP · 籁小咩')" :subtitle="st('aboutPage.mascot', 'LAI XIAO MIE', 'subtitle')" />

      <div class="mascot-hero">
        <div class="mascot-image">
          <img
            :src="images?.mascot?.front"
            alt="籁小咩 - 呼籁旅行品牌IP吉祥物，一只可爱的小羊形象"
            width="280"
            height="380"
            loading="lazy"
          />
        </div>
        <div class="mascot-info">
          <h3 class="mascot-name">籁小咩</h3>
          <p class="mascot-intro">呼籁旅行的品牌IP吉祥物，灵感来自呼伦贝尔草原上自由奔跑的小羊。圆润的羊毛卷发、温暖的大眼睛、招手的小手势——籁小咩代表着呼籁对每一个家庭的热情欢迎。</p>
          <div class="mascot-tags">
            <span class="mascot-tag">原创IP形象</span>
            <span class="mascot-tag">国家版权登记</span>
            <span class="mascot-tag">表情包</span>
          </div>
          <p class="mascot-copyright">国家版权局作品登记：国作登字-2026-F-00020268</p>
        </div>
      </div>

      <!-- 草原场景 -->
      <div class="mascot-banner">
        <img
          :src="images?.mascot?.banner"
          alt="籁小咩在呼伦贝尔草原上向你招手"
          width="800"
          height="300"
          loading="lazy"
        />
      </div>

      <!-- 表情包二维码 -->
      <div class="mascot-sticker">
        <div class="mascot-sticker-qr">
          <img
            :src="images?.mascot?.stickerQr"
            alt="籁小咩微信表情包二维码"
            width="160"
            height="160"
            loading="lazy"
          />
        </div>
        <div class="mascot-sticker-text">
          <p class="mascot-sticker-title">把籁小咩带进你的聊天</p>
          <p class="mascot-sticker-desc">微信扫一扫，免费领取「籁小咩」表情包。旅行前发给家人朋友，快乐先行一步。</p>
        </div>
      </div>

    </div>
  </section>
</template>

<script setup>
defineProps({
  images: { type: Object, default: () => ({}) },
})
const st = await useSectionTitles()
</script>

<style lang="less" scoped>
.mascot-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: @space-xl;
  max-width: 800px;
  margin: 0 auto @space-2xl;

  .respond-md({
    flex-direction: row;
    text-align: left;
    gap: @space-2xl;
  });
}

.mascot-image {
  flex-shrink: 0;

  img {
    width: 200px;
    height: auto;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.1));
  }
}

.mascot-info {
  flex: 1;
}

.mascot-name {
  font-size: 28px;
  font-weight: @font-weight-bold;
  color: @color-text-primary;
  margin: 0 0 @space-md;
}

.mascot-intro {
  font-size: @font-size-base;
  color: @color-text-secondary;
  line-height: @line-height-loose;
  margin-bottom: @space-lg;
}

.mascot-tags {
  display: flex;
  flex-wrap: wrap;
  gap: @space-sm;
  margin-bottom: @space-md;
  justify-content: center;

  .respond-md({
    justify-content: flex-start;
  });
}

.mascot-tag {
  font-size: @font-size-xs;
  color: @color-primary;
  background: @color-primary-bg;
  padding: 4px 12px;
  border-radius: 20px;
}

.mascot-copyright {
  font-size: @font-size-xs;
  color: @color-text-muted;
  margin: 0;
}

.mascot-banner {
  max-width: 800px;
  margin: 0 auto @space-2xl;
  border-radius: @border-radius-lg;
  overflow: hidden;

  img {
    width: 100%;
    height: auto;
    display: block;
  }
}

.mascot-sticker {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: @space-lg;
  max-width: 500px;
  margin: 0 auto;
  padding: @space-xl;
  background: @color-bg-white;
  border-radius: @border-radius-lg;
  border: 1px solid @color-border;

  .respond-md({
    flex-direction: row;
    text-align: left;
  });
}

.mascot-sticker-qr {
  flex-shrink: 0;

  img {
    width: 120px;
    height: 120px;
    border-radius: @border-radius-md;
  }
}

.mascot-sticker-text {
  flex: 1;
}

.mascot-sticker-title {
  font-size: @font-size-md;
  font-weight: @font-weight-medium;
  color: @color-text-primary;
  margin-bottom: @space-sm;
}

.mascot-sticker-desc {
  font-size: @font-size-sm;
  color: @color-text-secondary;
  line-height: 1.6;
  margin: 0;
}

</style>