63 lines
1.1 KiB
Vue
63 lines
1.1 KiB
Vue
<template>
|
|
<section class="rightTopBorder">
|
|
<div class="corner" v-for="item in border" :key="item" :class="item"/>
|
|
<slot/>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "rightTopBorder",
|
|
data() {
|
|
return {
|
|
border: ['left-top', 'right-top', 'left-bottom', 'right-bottom']
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.rightTopBorder {
|
|
position: relative;
|
|
height: 32px;
|
|
min-width: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 0 4px 2px #1745DE inset;
|
|
background: rgba(#000972, .3) no-repeat center;
|
|
|
|
.corner {
|
|
height: 18px;
|
|
width: 18px;
|
|
position: absolute;
|
|
display: block;
|
|
background-image: url("./assets/corner.svg");
|
|
background-repeat: no-repeat;
|
|
|
|
&.left-top {
|
|
left: -6px;
|
|
top: -6px;
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
&.right-top {
|
|
right: -6px;
|
|
top: -6px;
|
|
}
|
|
|
|
&.left-bottom {
|
|
left: -6px;
|
|
bottom: -6px;
|
|
transform: rotateX(180deg) rotateY(180deg);
|
|
}
|
|
|
|
&.right-bottom {
|
|
right: -6px;
|
|
bottom: -6px;
|
|
transform: rotateX(180deg);
|
|
}
|
|
}
|
|
}
|
|
</style>
|