<template>
  <div style="width: 100%">
    <!-- 头部 -->
    <div style="position: relative; margin-bottom: -2px">
      <img
        src="/src/assets/images/TopList/border-top.png"
        alt=""
        style="width: 100%; display: block"
      />
      <div
        style="
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        "
      >
        <div
          style="
            color: #fff;

            font-weight: 860;
            font-family: 'SF Pro';
            margin-bottom: 1%;
          "
        >
          {{ title }}
        </div>
      </div>
    </div>

    <!-- 中间内容 -->
    <div v-if="showBorder"></div>
    <slot></slot>

    <!-- 尾部 -->
    <img
      src="/src/assets/images/TopList/border-bottom.png"
      alt=""
      style="width: 100%; display: block"
    />
  </div>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    required: true,
  },

  showBorder: {
    type: Boolean,
    default: false,
  },
})
</script>

<style lang="scss" scoped>
* {
  color: black;
}

@media screen and (min-width: 375px) {
  * {
    font-size: 20px;
  }
}

@media screen and (min-width: 768px) {
  * {
    font-size: 30px;
  }
}

@media screen and (min-width: 1024px) {
  * {
    font-size: 40px;
  }
}
</style>
