87 lines
1.4 KiB
Vue
87 lines
1.4 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-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>
|