<!-- src/views/Ranking/KingAndQueen/components/borderImg.vue -->
<template>
  <div style="width: 100%">
    <!-- 头部 -->
    <div style="position: relative; margin-bottom: -2px">
      <img
        v-smart-img
        :src="borderTopUrl"
        alt=""
        style="min-height: 25.15vw; 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-size: 1.3em; font-weight: 860; margin-bottom: 1%">
          {{ title }}
        </div>
      </div>
    </div>

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

    <!-- 尾部 -->
    <img
      v-smart-img
      :src="borderBottomUrl"
      alt=""
      style="min-height: 18.59vw; width: 100%; display: block"
    />
  </div>
</template>

<script setup>
import { getWebpUrl } from '@/config/imagePaths.js'

// 获取OSS图片URL的函数
const borderTopUrl = getWebpUrl('Ranking/KingQueenWebp/', 'border-top')
const borderBottomUrl = getWebpUrl('Ranking/KingQueenWebp/', 'border-bottom')

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>
