Files
dvcp_v2_webapp/project/biaopin/dv/weiyang/comps/subHeader.vue
2024-09-13 16:41:20 +08:00

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>