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

update for v 2.0.0

Browse Source
This commit is contained in:
jiaming743
2019-06-25 19:57:04 +08:00
parent 5c52a7b49d
commit 31fa0c6698
57 changed files with 2696 additions and 4887 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
components/borderBox1/index.vue
View File

@ -1,54 +1,99 @@
<template>
<div class="dv-border-box-1">
<img class="dv-flash-left-top" src="./img/border.gif">
<img class="dv-flash-right-top" src="./img/border.gif">
<img class="dv-flash-left-bottom" src="./img/border.gif">
<img class="dv-flash-right-bottom" src="./img/border.gif">
<slot></slot>
<div class="dv-border-box-1" :ref="ref">
<svg
width="150px"
height="150px"
:key="item"
v-for="item in border"
:class="`${item} border`"
>
<polygon
fill="#4fd2dd"
points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
>
<animate
attributeName="fill"
values="#4fd2dd;#235fa7;#4fd2dd"
dur=".5s"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<polygon
fill="#235fa7"
points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"
>
<animate
attributeName="fill"
values="#235fa7;#4fd2dd;#235fa7"
dur=".5s"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<polygon
fill="#4fd2dd"
points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
>
<animate
attributeName="fill"
values="#4fd2dd;#235fa7;#transparent"
dur="1s"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
</svg>
<div class="border-box-content">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: 'BorderBox1'
name: 'BorderBox1',
data () {
return {
ref: 'border-box-1',
border: ['left-top', 'right-top', 'left-bottom', 'right-bottom']
}
}
}
</script>
<style lang="less">
.dv-border-box-1 {
position: relative;
box-sizing: border-box;
min-width: 300px;
min-height: 300px;
padding: 35px;
overflow: hidden;
width: 100%;
height: 100%;
.dv-flash-left-top, .dv-flash-right-top, .dv-flash-left-bottom, .dv-flash-right-bottom {
.border {
position: absolute;
width: 250px;
}
.dv-flash-left-top {
top: 0px;
left: -70px;
}
.dv-flash-right-top {
top: 0px;
right: -70px;
.right-top {
right: 0px;
transform: rotateY(180deg);
}
.dv-flash-left-bottom {
.left-bottom {
bottom: 0px;
left: -70px;
transform: rotateX(180deg);
}
.dv-flash-right-bottom {
.right-bottom {
right: 0px;
bottom: 0px;
right: -70px;
transform: rotate(180deg);
transform: rotateX(180deg) rotateY(180deg);
}
.border-box-content {
position: relative;
width: 100%;
height: 100%;
}
}
</style>