<template>
|
<div
|
class="data-board-content-item"
|
:style="{
|
marginBottom: hasBottom ? '18px' : '0',
|
}"
|
>
|
<div class="data-board-content-item-title">
|
<div class="data-board-content-item-title-text">{{ title }}</div>
|
</div>
|
<slot></slot>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
defineOptions({
|
name: 'DataBoardContentItem',
|
});
|
|
type Props = {
|
title: string;
|
hasBottom?: boolean;
|
};
|
|
const props = withDefaults(defineProps<Props>(), {
|
hasBottom: true,
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
@use '@/style/common.scss' as *;
|
|
.data-board-content-item {
|
display: flex;
|
flex-direction: column;
|
background: rgba(0, 5, 18, 0.27);
|
|
.data-board-content-item-title {
|
display: flex;
|
height: 42px;
|
font-family: YouSheBiaoTiHei Regular;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
background-image: url('@/assets/dataBoard/data-board-title-bg.png');
|
|
.data-board-content-item-title-text {
|
padding-left: 36px;
|
font-size: 24px;
|
line-height: 32px;
|
background: linear-gradient(to bottom, #ffffff, #b5efff);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
}
|
}
|
</style>
|
