ykxiao
/
DemuMesDataV
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add borderbox1 component

This commit is contained in:
jiaming 2018-12-05 13:43:34 +08:00
parent 0db958b8cb
commit 95c30832ad
2 changed files with 54 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/components/borderBox1/img/border.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB

54
src/components/borderBox1/index.vue Normal file
View File

@ -0,0 +1,54 @@
<template>
<div class="border-box-1">
<img class="flash-left-top" src="./img/border.gif">
<img class="flash-right-top" src="./img/border.gif">
<img class="flash-left-bottom" src="./img/border.gif">
<img class="flash-right-bottom" src="./img/border.gif">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'BorderBox1'
}
</script>
<style lang="less">
.border-box-1 {
position: relative;
box-sizing: border-box;
min-width: 300px;
min-height: 300px;
padding: 35px;
overflow: hidden;
.flash-left-top, .flash-right-top, .flash-left-bottom, .flash-right-bottom {
position: absolute;
width: 250px;
}
.flash-left-top {
top: 0px;
left: -70px;
}
.flash-right-top {
top: 0px;
right: -70px;
transform: rotateY(180deg);
}
.flash-left-bottom {
bottom: 0px;
left: -70px;
transform: rotateX(180deg);
}
.flash-right-bottom {
bottom: 0px;
right: -70px;
transform: rotate(180deg);
}
}
</style>