70 lines
1.5 KiB
Vue
70 lines
1.5 KiB
Vue
<template>
|
|
<section class="subHeader">
|
|
<div class="subHeader-title" :class="{right:!!$scopedSlots.right}">
|
|
<h2 class="fill" v-text="title"/>
|
|
<slot name="right"/>
|
|
</div>
|
|
<div class="divider"/>
|
|
<div class="slot">
|
|
<slot/>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'subHeader',
|
|
props: ['title']
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.subHeader {
|
|
//background: #7583900f;
|
|
|
|
.subHeader-title {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 51px;
|
|
padding: 0 8px 0 46px;
|
|
box-sizing: border-box;
|
|
background-image: linear-gradient(90deg, #00d4ff00 0%, rgba(0, 212, 255, 0.3) 12%, #0080ff00 100%), url("https://cdn.sinoecare.com/i/2024/09/03/66d6d5b006572.png");
|
|
background-size: 100% 6px, 54px 42px;
|
|
background-position: center bottom, left center;
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
h2 {
|
|
font-size: 20px;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
}
|
|
|
|
|
|
img {
|
|
width: 28px;
|
|
height: 28px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
&.right {
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
|
|
.divider {
|
|
height: 7px;
|
|
background-image: linear-gradient(110deg, transparent 0% 14%, #1F979A 15% 29%, transparent 30% 44%, #1F979ABF 45% 59%, transparent 60% 74%, #1F979A82 75% 89%, transparent 90% 100%),
|
|
linear-gradient(90deg, #243132 80%, #02FEFF 99%);
|
|
background-size: 21px 7px, 100% 3px;
|
|
background-position: calc(100% - 92px) top, left center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.slot {
|
|
height: calc(100% - 60px);
|
|
padding-top: 12px;
|
|
}
|
|
}
|
|
</style>
|