From eeafaa255a5197abb99ebdb9be39934332db263c Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Thu, 11 Sep 2025 12:29:32 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=96=B0=E7=BB=84=E4=BB=B6):=20=E5=B0=81?=
 =?UTF-8?q?=E8=A3=85=E6=8E=92=E8=A1=8C=E6=A6=9C=E5=BC=B9=E7=AA=97=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TopList/borderImg.vue | 64 ++++++++++++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 src/components/TopList/borderImg.vue

diff --git a/src/components/TopList/borderImg.vue b/src/components/TopList/borderImg.vue
new file mode 100644
index 0000000..3e57e64
--- /dev/null
+++ b/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>