<template>
|
<div
|
class="c-border-decorate"
|
:style="{
|
borderTop: topShow ? `1px solid rgba(255,255,255,0.2)` : '',
|
borderBottom: bottomShow ? `1px solid rgba(255,255,255,0.2)` : '',
|
padding: paddingstyle
|
}"
|
>
|
<div v-if="topShow" class="_border-top"></div>
|
<div v-if="topShow" class="_triangle-1"></div>
|
<slot></slot>
|
<div v-if="bottomShow" class="_triangle-2"></div>
|
<div v-if="bottomShow" class="_border-bottom"></div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'border-decorate',
|
props: {
|
topShow: {
|
type: Boolean,
|
default: true
|
},
|
bottomShow: {
|
type: Boolean,
|
default: true
|
}
|
},
|
data () {
|
return {
|
msg:'Welcome to your vueName'
|
}
|
},
|
computed: {
|
paddingstyle() {
|
if(this.topShow && this.bottomShow) {
|
return '15px 15px'
|
} else if(!this.topShow && this.bottomShow) {
|
return '0px 15px 15px'
|
} else if(this.topShow && !this.bottomShow) {
|
return '15px 15px 0px'
|
} else {
|
return '0px 15px'
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.c-border-decorate {
|
position: relative;
|
min-height: 40px;
|
._border-top::before, ._border-top::after, ._border-bottom::before, ._border-bottom::after {
|
content: '';
|
display: inline-block;
|
position: absolute;
|
width: 15px;
|
height: 15px;
|
}
|
._border-top::before, ._border-top::after {
|
top: -1px;
|
border-top: 1px solid #389BC7;
|
}
|
._border-bottom::before, ._border-bottom::after {
|
bottom: -1px;
|
border-bottom: 1px solid #389BC7;
|
}
|
._border-top::before, ._border-bottom::before {
|
|
border-left: 1px solid #389BC7;
|
left: 0;
|
}
|
._border-top::after, ._border-bottom::after {
|
border-right: 1px solid #389BC7;
|
right: 0;
|
}
|
._triangle-1, ._triangle-2 {
|
position: absolute;
|
left: 50%;
|
transform: translate(-50%, 0);
|
width: 0px;
|
height: 0px;
|
background: linear-gradient(180deg,#ffe3c4, #fdc392);
|
border-radius: 3px;
|
border-left: 8px solid transparent;
|
border-right: 8px solid transparent;
|
filter: drop-shadow(0px 0px 8px rgba(251,207,163,0.60));
|
}
|
._triangle-1 {
|
top: 5px;
|
border-top: 10px solid #fdc392;
|
}
|
._triangle-2 {
|
bottom: 5px;
|
border-bottom: 10px solid #fdc392;
|
|
}
|
}
|
|
</style>
|
