<script setup lang="ts">
|
|
const props = withDefaults(
|
defineProps<{
|
// 标题
|
title: number | string,
|
}>(),
|
{
|
title: "",
|
}
|
);
|
</script>
|
|
<template>
|
<div class="flex justify-between item-center">
|
<div class="item_title" v-if="title !== ''">
|
<span class="title-inner"> {{ title }} </span>
|
</div>
|
<slot name="top"></slot>
|
</div>
|
|
<div :class="title !== '' ? 'item_title_content' : 'item_title_content_def'">
|
|
<!-- 内容插槽 -->
|
<slot name="content"></slot>
|
</div>
|
</template>
|
|
<style scoped lang="scss">
|
$item-title-height: 38px;
|
//$item_title_content-height: calc(100% - 38px);
|
|
.item_title {
|
background-image: url("@/assets/img/candantop.png");
|
background-size: 231px 100%;
|
background-repeat: no-repeat;
|
height: $item-title-height;
|
line-height: $item-title-height;
|
width: 100%;
|
color: #31abe3;
|
text-align: center;
|
// background: linear-gradient(to right, transparent, #0f0756, transparent);
|
position: relative;
|
display: flex;
|
align-items: center;
|
//justify-content: center;
|
|
.title-inner {
|
margin-left: 25px;
|
margin-top: 4px;
|
color: #fff;
|
font-weight: 400;
|
letter-spacing: 2px;
|
font-size: 20px;
|
font-style: italic;
|
font-family: '200-SSBoYaTi';
|
//background: linear-gradient(
|
// 92deg,
|
// #0072ff 0%,
|
// #00eaff 48.8525390625%,
|
// #01aaff 100%
|
//);
|
//-webkit-background-clip: text;
|
//-webkit-text-fill-color: transparent;
|
}
|
}
|
|
:deep(.dv-border-box-content) {
|
box-sizing: border-box;
|
padding: 6px 16px 0px;
|
}
|
|
.item_title_content {
|
//height: $item_title_content-height;
|
margin: 20px 0;
|
}
|
|
.item_title_content_def {
|
width: 100%;
|
height: 100%;
|
}
|
</style>
|
