65 lines
1.2 KiB
Vue
65 lines
1.2 KiB
Vue
<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>
|