51 lines
1.4 KiB
Vue
51 lines
1.4 KiB
Vue
<template>
|
|
<div class="bg-[#0A404E] bg-opacity-40 flex flex-col w-full" :style="{ width, height }">
|
|
<div
|
|
class="flex items-center justify-between px-14px relative flex-none"
|
|
:style="{ height: headHeight }"
|
|
>
|
|
<div
|
|
class="flex items-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
|
|
>
|
|
<span class="block w-8.5px h-8.5px rounded-full bg-[#6CCDDA]"></span>
|
|
<span class="ml-10.5px text-18px">{{ title }}</span>
|
|
</div>
|
|
<div class="absolute left-100px right-100px">
|
|
<slot name="center"> </slot>
|
|
</div>
|
|
<slot name="right">
|
|
<img class="w-76.5px h-7.5px" :src="HeadIcon" alt="" srcset="" />
|
|
</slot>
|
|
</div>
|
|
<div class="px-14px pb-14px flex-1">
|
|
<div class="bg-[#293E4E] bg-opacity-30 h-full">
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import HeadIcon from '/@/assets/images/head-icon.png'
|
|
defineProps({
|
|
title: {
|
|
type: String as PropType<string>,
|
|
default: '标题',
|
|
},
|
|
width: {
|
|
type: String as PropType<string>,
|
|
default: '200px',
|
|
},
|
|
height: {
|
|
type: String as PropType<string>,
|
|
default: '200px',
|
|
},
|
|
headHeight: {
|
|
type: String as PropType<string>,
|
|
default: '49px',
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style lang="less" scoped></style>
|