123 lines
3.2 KiB
Vue
123 lines
3.2 KiB
Vue
|
<template>
|
||
|
|
<div class="dv-border-box-9" :ref="ref">
|
||
|
|
<svg class="dv-svg-container">
|
||
|
|
<defs>
|
||
|
|
<linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" stop-color="#11eefd" />
|
||
|
|
<stop offset="100%" stop-color="#0078d2" />
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<mask :id="maskId">
|
||
|
|
<polyline
|
||
|
|
stroke="#fff"
|
||
|
|
stroke-width="3"
|
||
|
|
fill="transparent"
|
||
|
|
:points="`8, ${height * 0.4} 8, 3, ${width * 0.4 + 7}, 3`"
|
||
|
|
/>
|
||
|
|
<polyline
|
||
|
|
fill="#fff"
|
||
|
|
:points="
|
||
|
|
`8, ${height * 0.15} 8, 3, ${width * 0.1 + 7}, 3
|
||
|
|
${width * 0.1}, 8 14, 8 14, ${height * 0.15 - 7}
|
||
|
|
`"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<polyline
|
||
|
|
stroke="#fff"
|
||
|
|
stroke-width="3"
|
||
|
|
fill="transparent"
|
||
|
|
:points="`${width * 0.5}, 3 ${width - 3}, 3, ${width - 3}, ${height * 0.25}`"
|
||
|
|
/>
|
||
|
|
<polyline
|
||
|
|
fill="#fff"
|
||
|
|
:points="`
|
||
|
|
${width * 0.52}, 3 ${width * 0.58}, 3
|
||
|
|
${width * 0.58 - 7}, 9 ${width * 0.52 + 7}, 9
|
||
|
|
`"
|
||
|
|
/>
|
||
|
|
<polyline
|
||
|
|
fill="#fff"
|
||
|
|
:points="`
|
||
|
|
${width * 0.9}, 3 ${width - 3}, 3 ${width - 3}, ${height * 0.1}
|
||
|
|
${width - 9}, ${height * 0.1 - 7} ${width - 9}, 9 ${width * 0.9 + 7}, 9
|
||
|
|
`"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<polyline
|
||
|
|
stroke="#fff"
|
||
|
|
stroke-width="3"
|
||
|
|
fill="transparent"
|
||
|
|
:points="`8, ${height * 0.5} 8, ${height - 3} ${width * 0.3 + 7}, ${height - 3}`"
|
||
|
|
/>
|
||
|
|
<polyline
|
||
|
|
fill="#fff"
|
||
|
|
:points="`
|
||
|
|
8, ${height * 0.55} 8, ${height * 0.7}
|
||
|
|
2, ${height * 0.7 - 7} 2, ${height * 0.55 + 7}
|
||
|
|
`"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<polyline
|
||
|
|
stroke="#fff"
|
||
|
|
stroke-width="3"
|
||
|
|
fill="transparent"
|
||
|
|
:points="`${width * 0.35}, ${height - 3} ${width - 3}, ${height - 3} ${width - 3}, ${height * 0.35}`"
|
||
|
|
/>
|
||
|
|
<polyline
|
||
|
|
fill="#fff"
|
||
|
|
:points="`
|
||
|
|
${width * 0.92}, ${height - 3} ${width - 3}, ${height - 3} ${width - 3}, ${height * 0.8}
|
||
|
|
${width - 9}, ${height * 0.8 + 7} ${width - 9}, ${height - 9} ${width * 0.92 + 7}, ${height - 9}
|
||
|
|
`"
|
||
|
|
/>
|
||
|
|
</mask>
|
||
|
|
</defs>
|
||
|
|
|
||
|
|
<rect x="0" y="0" :width="width" :height="height" :fill="`url(#${gradientId})`" :mask="`url(#${maskId})`" />
|
||
|
|
</svg>
|
||
|
|
|
||
|
|
<div class="border-box-content">
|
||
|
|
<slot></slot>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import autoResize from '../../mixins/autoResize.js'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'BorderBox9',
|
||
|
|
mixins: [autoResize],
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
ref: 'border-box-9',
|
||
|
|
|
||
|
|
gradientId: `border-box-9-gradient-${(new Date()).getTime()}`,
|
||
|
|
maskId: `border-box-9-mask-${(new Date()).getTime()}`
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less">
|
||
|
|
.dv-border-box-9 {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
svg {
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
left: 0px;
|
||
|
|
top: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.border-box-content {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|