hulai-website/components/guides/GuideToddlerSection.vue

<template>
  <div class="toddler-section">
    <!-- 推荐项目 -->
    <div class="toddler-group">
      <h3 class="group-title group-title--green">{{ data.recommended.title }}</h3>
      <p class="group-desc">{{ data.recommended.desc }}</p>
      <div class="toddler-items">
        <div v-for="item in data.recommended.items" :key="item.name" class="toddler-item toddler-item--green">
          <span class="toddler-item-icon">{{ item.icon }}</span>
          <div>
            <strong class="toddler-item-name">{{ item.name }}</strong>
            <p class="toddler-item-desc">{{ item.desc }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 视情况选择 -->
    <div class="toddler-group">
      <h3 class="group-title group-title--amber">{{ data.conditional.title }}</h3>
      <p class="group-desc">{{ data.conditional.desc }}</p>
      <div class="toddler-items">
        <div v-for="item in data.conditional.items" :key="item.name" class="toddler-item toddler-item--amber">
          <span class="toddler-item-icon">{{ item.icon }}</span>
          <div>
            <strong class="toddler-item-name">{{ item.name }}</strong>
            <p class="toddler-item-desc">{{ item.desc }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 不建议参与 -->
    <div class="toddler-group">
      <h3 class="group-title group-title--muted">{{ data.notRecommended.title }}</h3>
      <p class="group-desc">{{ data.notRecommended.desc }}</p>
      <div class="toddler-not-items">
        <div v-for="item in data.notRecommended.items" :key="item.name" class="toddler-not-item">
          <strong>{{ item.name }}</strong> — {{ item.reason }}
        </div>
      </div>
    </div>

    <!-- 装备 -->
    <div class="toddler-group">
      <h3 class="group-title group-title--green">宝宝出行装备</h3>
      <div class="toddler-equip">
        <div v-for="eq in data.equipment" :key="eq.name" class="equip-item" :class="{ 'equip-item--provided': eq.provided }">
          <strong class="equip-name">{{ eq.name }}</strong>
          <span v-if="eq.provided" class="equip-badge">呼籁提供</span>
          <p class="equip-desc">{{ eq.desc }}</p>
        </div>
      </div>
    </div>

    <!-- 用餐 -->
    <div class="toddler-group">
      <h3 class="group-title group-title--green">宝宝用餐小贴士</h3>
      <ul class="toddler-dining">
        <li v-for="(tip, i) in data.dining" :key="i">{{ tip }}</li>
      </ul>
    </div>

    <!-- 温馨提醒 -->
    <div class="toddler-notes">
      <div v-for="note in data.notes" :key="note.title" class="toddler-note">
        <strong>{{ note.title }}</strong>
        <p>{{ note.content }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  data: { type: Object, required: true },
})
</script>

<style lang="less" scoped>
.toddler-section {
  display: flex;
  flex-direction: column;
  gap: @space-2xl;
}

.toddler-group {
  // group container
}

.group-title {
  font-size: @font-size-lg;
  margin: 0 0 @space-sm;

  &--green { color: @color-primary; }
  &--amber { color: @color-accent; }
  &--muted { color: @color-text-muted; }
}

.group-desc {
  font-size: @font-size-sm;
  color: @color-text-secondary;
  margin-bottom: @space-lg;
}

.toddler-items {
  display: flex;
  flex-direction: column;
  gap: @space-md;
}

.toddler-item {
  display: flex;
  gap: @space-md;
  padding: @space-md @space-lg;
  background: @color-bg-white;
  border-radius: @border-radius-md;
  border-left: 3px solid @color-border;

  &--green { border-left-color: @color-primary; }
  &--amber { border-left-color: @color-accent; }
}

.toddler-item-icon {
  font-size: @font-size-lg;
  flex-shrink: 0;
}

.toddler-item-name {
  color: @color-text-primary;
  font-size: @font-size-base;
}

.toddler-item-desc {
  font-size: @font-size-sm;
  color: @color-text-secondary;
  margin: @space-xs 0 0;
  line-height: @line-height-base;
}

.toddler-not-items {
  display: flex;
  flex-direction: column;
  gap: @space-sm;
}

.toddler-not-item {
  padding: @space-sm @space-md;
  border-left: 2px solid @color-border;
  font-size: @font-size-sm;
  color: @color-text-muted;
  line-height: @line-height-base;

  strong {
    color: @color-text-secondary;
  }
}

.toddler-equip {
  display: flex;
  flex-direction: column;
  gap: @space-md;
}

.equip-item {
  background: @color-bg-white;
  border: 1px solid @color-border;
  border-radius: @border-radius-md;
  padding: @space-md @space-lg;

  &--provided {
    border-top: 3px solid @color-primary;
  }
}

.equip-name {
  font-size: @font-size-base;
  color: @color-primary;
}

.equip-badge {
  display: inline-block;
  margin-left: @space-sm;
  padding: 2px @space-sm;
  background: @color-primary-bg;
  color: @color-primary;
  font-size: @font-size-xs;
  border-radius: @border-radius-sm;
}

.equip-desc {
  font-size: @font-size-sm;
  color: @color-text-secondary;
  margin: @space-xs 0 0;
  line-height: @line-height-base;
}

.toddler-dining {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: @space-sm;

  li {
    font-size: @font-size-sm;
    color: @color-text-secondary;
    line-height: @line-height-base;
    padding-left: @space-md;
    position: relative;

    &::before {
      content: '☑';
      position: absolute;
      left: 0;
      color: @color-primary;
    }
  }
}

.toddler-notes {
  display: flex;
  flex-direction: column;
  gap: @space-md;
}

.toddler-note {
  background: @color-bg-white;
  border: 1px solid @color-border;
  border-radius: @border-radius-md;
  padding: @space-md @space-lg;

  strong {
    color: @color-primary;
    font-size: @font-size-base;
  }

  p {
    font-size: @font-size-sm;
    color: @color-text-secondary;
    margin: @space-xs 0 0;
    line-height: @line-height-base;
  }
}
</style>