Files
dvcp_v2_webapp/components/layout/AiDvPanel/borders/border10.vue
2023-05-29 15:26:47 +08:00

64 lines
1.1 KiB
Vue

<template>
<section class="border10" :class="'border10-' + theme">
<div class="border10-title">
<!-- <img src="../asset/ic-badge.png" v-if="theme === '1'" /> -->
<h2>{{ title }}</h2>
</div>
<div class="slot">
<slot/>
</div>
</section>
</template>
<script>
export default {
name: 'border10',
props: ['title', 'theme']
}
</script>
<style lang="scss" scoped>
.border10 {
height: 100%;
.border10-title {
display: flex;
height: 41px;
padding: 0 23px;
box-sizing: border-box;
background-image: url(../asset/border10.png);
background-size: 100% 41px;
background-repeat: no-repeat;
h2 {
position: relative;
top: -3px;
font-size: 24px;
color: #E2EBF1;
font-weight: normal;
}
img {
width: 28px;
height: 28px;
margin-right: 8px;
}
}
&.border10-1 .border10-title {
// background-image: url(../asset/border8.png);
// background-position: bottom;
&:after {
background: #FFA086;
}
}
.slot {
height: calc(100% - 41px);
padding-top: 19px;
}
}
</style>