hulai-website/components/about/XiaohongshuShowcase.vue

<template>
  <section class="section">
    <div class="container">
      <CommonSectionTitle title="小红书上的呼籁" subtitle="XIAOHONGSHU" />

      <div class="xhs-card">
        <!-- 顶部：品牌主页截图作为横幅 -->
        <div class="xhs-banner">
          <img
            :src="images.xiaohongshu.storefront"
            alt="呼籁旅行小红书品牌主页 - Mr.小雷-呼籁旅行 50万家庭青睐的草原旅行品牌"
            width="800"
            height="300"
            loading="lazy"
          />
        </div>

        <!-- 底部：数据 + 信息 -->
        <div class="xhs-body">
          <!-- 账号信息 -->
          <div class="xhs-header">
            <div class="xhs-account">
              <span class="xhs-account-name">{{ xhs.account }}</span>
              <span class="xhs-badge">{{ xhs.verifiedType }}</span>
            </div>
            <p class="xhs-tagline">{{ xhs.tagline }}</p>
          </div>

          <!-- 数据指标 -->
          <div class="xhs-stats">
            <div class="xhs-stat">
              <span class="xhs-stat-value">{{ xhs.followers }}</span>
              <span class="xhs-stat-label">粉丝</span>
            </div>
            <div class="xhs-stat-divider" />
            <div class="xhs-stat">
              <span class="xhs-stat-value">{{ xhs.likes }}</span>
              <span class="xhs-stat-label">获赞与收藏</span>
            </div>
          </div>

          <!-- 荣誉 + 描述 -->
          <div class="xhs-awards">
            <span v-for="award in xhs.awards" :key="award" class="xhs-award">{{ award }}</span>
          </div>

          <p class="xhs-desc">{{ xhs.description }}</p>

          <div class="xhs-tags">
            <span v-for="tag in xhs.tags" :key="tag" class="xhs-tag">{{ tag }}</span>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import images from '~/data/images.json'
defineProps({ xhs: { type: Object, required: true } })
</script>

<style lang="less" scoped>
.xhs-card {
  max-width: 800px;
  margin: 0 auto;
  border-radius: @border-radius-lg;
  overflow: hidden;
  background: @color-bg-white;
  box-shadow: @shadow-md;
}

.xhs-banner {
  position: relative;
  overflow: hidden;

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

.xhs-body {
  padding: @space-xl;

  .respond-md({
    padding: @space-xl @space-2xl;
  });
}

.xhs-header {
  margin-bottom: @space-lg;
}

.xhs-account {
  display: flex;
  align-items: center;
  gap: @space-sm;
  margin-bottom: @space-xs;
  flex-wrap: wrap;
}

.xhs-account-name {
  font-size: @font-size-lg;
  font-weight: @font-weight-bold;
  color: @color-text-primary;
}

.xhs-badge {
  display: inline-block;
  padding: 2px 10px;
  background: #ff2442;
  color: #fff;
  font-size: @font-size-xs;
  border-radius: 20px;
  font-weight: @font-weight-medium;
}

.xhs-tagline {
  font-size: @font-size-base;
  color: @color-primary;
  font-weight: @font-weight-medium;
  margin: 0;
}

.xhs-stats {
  display: flex;
  align-items: center;
  gap: @space-lg;
  padding: @space-lg 0;
  margin-bottom: @space-lg;
  border-top: 1px solid @color-border;
  border-bottom: 1px solid @color-border;
}

.xhs-stat {
  text-align: center;
  flex: 1;
}

.xhs-stat-divider {
  width: 1px;
  height: 32px;
  background: @color-border;
  flex-shrink: 0;
}

.xhs-stat-value {
  display: block;
  font-size: 24px;
  font-weight: @font-weight-bold;
  color: @color-text-primary;
  line-height: 1.2;

  .respond-md({
    font-size: 28px;
  });
}

.xhs-stat-label {
  font-size: @font-size-xs;
  color: @color-text-muted;
  margin-top: 4px;
  display: block;
}

.xhs-awards {
  display: flex;
  flex-wrap: wrap;
  gap: @space-sm;
  margin-bottom: @space-md;
}

.xhs-award {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  background: linear-gradient(135deg, #FFF8E1, #FFF3CD);
  color: #B8860B;
  font-size: @font-size-sm;
  font-weight: @font-weight-medium;
  border-radius: @border-radius-sm;
  border: 1px solid #F0D58C;

  &::before {
    content: "🏆";
    margin-right: 6px;
  }
}

.xhs-desc {
  font-size: @font-size-sm;
  color: @color-text-secondary;
  line-height: @line-height-loose;
  margin-bottom: @space-md;
}

.xhs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: @space-sm;
}

.xhs-tag {
  font-size: @font-size-xs;
  color: @color-text-secondary;
  background: @color-bg-gray;
  padding: 4px 12px;
  border-radius: 20px;
}
</style>