pendulum/web/src/components/Section/index.vue

<script setup lang="ts">
defineProps({
  title: {
    type: String,
    default: ''
  },
  subtitle: {
    type: String,
    default: ''
  },
  dark: {
    type: Boolean,
    default: false
  },
  bgImage: {
    type: String,
    default: ''
  },
  bgColor: {
    type: String,
    default: ''
  },
  heroSection: {
    type: Boolean,
    default: false
  },
  centered: {
    type: Boolean,
    default: false
  }
})
</script>

<template>
  <section
    class="section"
    :class="{
      'dark': dark,
      'hero-section': heroSection,
      'centered': centered
    }"
    :style="{
      backgroundImage: bgImage ? `url('${bgImage}')` : 'none',
      backgroundColor: bgColor || ''
    }"
  >
    <div v-if="title || subtitle" class="section-header">
      <h2 v-if="title" class="headline">{{ title }}</h2>
      <p v-if="subtitle" class="description">{{ subtitle }}</p>
    </div>
    <div class="section-content">
      <slot></slot>
    </div>
  </section>
</template>

<style lang="scss" scoped>
@use '@/assets/styles/variables' as v;
@use '@/assets/styles/mixins' as m;

.section {
  padding: v.$spacing-xxxl 0;
  position: relative;

  &.dark {
    color: v.$text-color-light;
  }

  &.hero-section {
    background-size: cover;
    background-position: center;
    min-height: 400px;
    @include m.flex-column;
    justify-content: center;
  }

  &.centered {
    text-align: center;

    .section-content {
      @include m.flex-column;
      align-items: center;
    }
  }

  .section-header {
    @include m.flex-column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: v.$content-max-width;
    margin: 0 auto v.$spacing-xl;
    min-height: 100px; // 确保有足够的空间进行垂直居中

    .headline {
      font-size: v.$font-size-xxl;
      margin-bottom: v.$spacing-md;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .description {
      font-size: v.$font-size-md;
      line-height: 1.6;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .section-content {
    max-width: v.$container-width;
    margin: 0 auto;
    padding: 0 v.$spacing-md;
    @include m.flex-column;
    align-items: center;
    justify-content: center;

    // 如果section-content内部有需要占满宽度的元素，可以使用以下样式
    :deep(> *) {
      width: 100%;
    }
  }
}
</style>