feat(新组件): 封装排行榜弹窗组件

src/components/TopList/borderImg.vue

@@ -0,0 +1,64 @@
+<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-size: 20px;
+            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></style>