<template> <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', 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; width: 100%; height: 100%; .border { position: absolute; } .right-top { right: 0px; transform: rotateY(180deg); } .left-bottom { bottom: 0px; transform: rotateX(180deg); } .right-bottom { right: 0px; bottom: 0px; transform: rotateX(180deg) rotateY(180deg); } .border-box-content { position: relative; width: 100%; height: 100%; } } </style>