add new component
This commit is contained in:
jiaming743
parent
a842010afd
commit
addf491d2b
|
|
@ -0,0 +1,122 @@
|
||||||
|
<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>
|
||||||
|
|
@ -0,0 +1,176 @@
|
||||||
|
<template>
|
||||||
|
<div class="dv-decoration-10" :ref="ref">
|
||||||
|
<svg :width="width" :height="height">
|
||||||
|
<polyline
|
||||||
|
stroke="rgba(0, 194, 255, 0.3)"
|
||||||
|
stroke-width="2"
|
||||||
|
:points="`0, ${height / 2} ${width}, ${height / 2}`"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<polyline
|
||||||
|
stroke="rgba(0, 194, 255, 1)"
|
||||||
|
stroke-width="2"
|
||||||
|
:points="`5, ${height / 2} ${width * 0.2 - 3}, ${height / 2}`"
|
||||||
|
:stroke-dasharray="`0, ${width * 0.2}`"
|
||||||
|
fill="freeze"
|
||||||
|
>
|
||||||
|
<animate
|
||||||
|
:id="animationId2"
|
||||||
|
attributeName="stroke-dasharray"
|
||||||
|
:values="`0, ${width * 0.2};${width * 0.2}, 0;`"
|
||||||
|
dur="3s"
|
||||||
|
:begin="`${animationId1}.end`"
|
||||||
|
fill="freeze"
|
||||||
|
/>
|
||||||
|
<animate
|
||||||
|
attributeName="stroke-dasharray"
|
||||||
|
:values="`${width * 0.2}, 0;0, ${width * 0.2}`"
|
||||||
|
dur="0.01s"
|
||||||
|
:begin="`${animationId7}.end`"
|
||||||
|
fill="freeze"
|
||||||
|
/>
|
||||||
|
</polyline>
|
||||||
|
|
||||||
|
<polyline
|
||||||
|
stroke="rgba(0, 194, 255, 1)"
|
||||||
|
stroke-width="2"
|
||||||
|
:points="`${width * 0.2 + 3}, ${height / 2} ${width * 0.8 - 3}, ${height / 2}`"
|
||||||
|
:stroke-dasharray="`0, ${width * 0.6}`"
|
||||||
|
>
|
||||||
|
<animate
|
||||||
|
:id="animationId4"
|
||||||
|
attributeName="stroke-dasharray"
|
||||||
|
:values="`0, ${width * 0.6};${width * 0.6}, 0`"
|
||||||
|
dur="3s"
|
||||||
|
:begin="`${animationId3}.end + 1s`"
|
||||||
|
fill="freeze"
|
||||||
|
/>
|
||||||
|
<animate
|
||||||
|
attributeName="stroke-dasharray"
|
||||||
|
:values="`${width * 0.6}, 0;0, ${width * 0.6}`"
|
||||||
|
dur="0.01s"
|
||||||
|
:begin="`${animationId7}.end`"
|
||||||
|
fill="freeze"
|
||||||
|
/>
|
||||||
|
</polyline>
|
||||||
|
|
||||||
|
<polyline
|
||||||
|
stroke="rgba(0, 194, 255, 1)"
|
||||||
|
stroke-width="2"
|
||||||
|
:points="`${width * 0.8 + 3}, ${height / 2} ${width - 5}, ${height / 2}`"
|
||||||
|
:stroke-dasharray="`0, ${width * 0.2}`"
|
||||||
|
>
|
||||||
|
<animate
|
||||||
|
:id="animationId6"
|
||||||
|
attributeName="stroke-dasharray"
|
||||||
|
:values="`0, ${width * 0.2};${width * 0.2}, 0`"
|
||||||
|
dur="3s"
|
||||||
|
:begin="`${animationId5}.end + 1s`"
|
||||||
|
fill="freeze"
|
||||||
|
/>
|
||||||
|
<animate
|
||||||
|
attributeName="stroke-dasharray"
|
||||||
|
:values="`${width * 0.2}, 0;0, ${width * 0.3}`"
|
||||||
|
dur="0.01s"
|
||||||
|
:begin="`${animationId7}.end`"
|
||||||
|
fill="freeze"
|
||||||
|
/>
|
||||||
|
</polyline>
|
||||||
|
|
||||||
|
<circle cx="2" :cy="height / 2" r="2" fill="#03709f">
|
||||||
|
<animate
|
||||||
|
:id="animationId1"
|
||||||
|
attributeName="fill"
|
||||||
|
values="#03709f;#00c2ff"
|
||||||
|
:begin="`0s;${animationId7}.end`"
|
||||||
|
dur="0.3s"
|
||||||
|
fill="freeze"
|
||||||
|
/>
|
||||||
|
</circle>
|
||||||
|
|
||||||
|
<circle :cx="width * 0.2" :cy="height / 2" r="2" fill="#03709f">
|
||||||
|
<animate
|
||||||
|
:id="animationId3"
|
||||||
|
attributeName="fill"
|
||||||
|
values="#03709f;#00c2ff"
|
||||||
|
:begin="`${animationId2}.end`"
|
||||||
|
dur="0.3s"
|
||||||
|
fill="freeze"
|
||||||
|
/>
|
||||||
|
<animate
|
||||||
|
attributeName="fill"
|
||||||
|
values="#03709f;#03709f"
|
||||||
|
dur="0.01s"
|
||||||
|
:begin="`${animationId7}.end`"
|
||||||
|
fill="freeze"
|
||||||
|
/>
|
||||||
|
</circle>
|
||||||
|
|
||||||
|
<circle :cx="width * 0.8" :cy="height / 2" r="2" fill="#03709f">
|
||||||
|
<animate
|
||||||
|
:id="animationId5"
|
||||||
|
attributeName="fill"
|
||||||
|
values="#03709f;#00c2ff"
|
||||||
|
:begin="`${animationId4}.end`"
|
||||||
|
dur="0.3s"
|
||||||
|
fill="freeze"
|
||||||
|
/>
|
||||||
|
<animate
|
||||||
|
attributeName="fill"
|
||||||
|
values="#03709f;#03709f"
|
||||||
|
dur="0.01s"
|
||||||
|
:begin="`${animationId7}.end`"
|
||||||
|
fill="freeze"
|
||||||
|
/>
|
||||||
|
</circle>
|
||||||
|
|
||||||
|
<circle :cx="width - 2" :cy="height / 2" r="2" fill="#03709f">
|
||||||
|
<animate
|
||||||
|
:id="animationId7"
|
||||||
|
attributeName="fill"
|
||||||
|
values="#03709f;#00c2ff"
|
||||||
|
:begin="`${animationId6}.end`"
|
||||||
|
dur="0.3s"
|
||||||
|
fill="freeze"
|
||||||
|
/>
|
||||||
|
<animate
|
||||||
|
attributeName="fill"
|
||||||
|
values="#03709f;#03709f"
|
||||||
|
dur="0.01s"
|
||||||
|
:begin="`${animationId7}.end`"
|
||||||
|
fill="freeze"
|
||||||
|
/>
|
||||||
|
</circle>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import autoResize from '../../mixins/autoResize.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Decoration9',
|
||||||
|
mixins: [autoResize],
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
ref: 'decoration-10',
|
||||||
|
|
||||||
|
animationId1: `d10ani1${(new Date()).getTime()}`,
|
||||||
|
animationId2: `d10ani2${(new Date()).getTime()}`,
|
||||||
|
animationId3: `d10ani3${(new Date()).getTime()}`,
|
||||||
|
animationId4: `d10ani4${(new Date()).getTime()}`,
|
||||||
|
animationId5: `d10ani5${(new Date()).getTime()}`,
|
||||||
|
animationId6: `d10ani6${(new Date()).getTime()}`,
|
||||||
|
animationId7: `d10ani7${(new Date()).getTime()}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.dv-decoration-10 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,141 @@
|
||||||
|
<template>
|
||||||
|
<div class="dv-decoration-9" :ref="ref">
|
||||||
|
<svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
|
||||||
|
<defs>
|
||||||
|
<polygon :id="polygonId" points="15, 46.5, 21, 47.5, 21, 52.5, 15, 53.5" />
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<circle
|
||||||
|
cx="50"
|
||||||
|
cy="50"
|
||||||
|
r="45"
|
||||||
|
fill="transparent"
|
||||||
|
stroke="rgba(3, 166, 224, 0.5)"
|
||||||
|
stroke-width="10"
|
||||||
|
stroke-dasharray="80, 100, 30, 100"
|
||||||
|
>
|
||||||
|
<animateTransform
|
||||||
|
attributeName="transform"
|
||||||
|
type="rotate"
|
||||||
|
values="0 50 50;360 50 50"
|
||||||
|
dur="3s"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
/>
|
||||||
|
</circle>
|
||||||
|
|
||||||
|
<circle
|
||||||
|
cx="50"
|
||||||
|
cy="50"
|
||||||
|
r="45"
|
||||||
|
fill="transparent"
|
||||||
|
stroke="rgba(3, 166, 224, 0.8)"
|
||||||
|
stroke-width="6"
|
||||||
|
stroke-dasharray="50, 66, 100, 66"
|
||||||
|
>
|
||||||
|
<animateTransform
|
||||||
|
attributeName="transform"
|
||||||
|
type="rotate"
|
||||||
|
values="0 50 50;-360 50 50"
|
||||||
|
dur="3s"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
/>
|
||||||
|
</circle>
|
||||||
|
|
||||||
|
<circle
|
||||||
|
cx="50"
|
||||||
|
cy="50"
|
||||||
|
r="38"
|
||||||
|
fill="transparent"
|
||||||
|
stroke="rgba(3, 166, 224, 0.2)"
|
||||||
|
stroke-width="1"
|
||||||
|
stroke-dasharray="5, 1"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<use
|
||||||
|
v-for="(foo, i) in new Array(20).fill(0)"
|
||||||
|
:key="i"
|
||||||
|
:xlink:href="`#${polygonId}`"
|
||||||
|
stroke="rgba(3, 166, 224, 0.6)"
|
||||||
|
:fill="Math.random() > 0.4 ? 'transparent' : 'rgba(3, 166, 224, 0.8)'"
|
||||||
|
>
|
||||||
|
<animateTransform
|
||||||
|
attributeName="transform"
|
||||||
|
type="rotate"
|
||||||
|
values="0 50 50;360 50 50"
|
||||||
|
dur="3s"
|
||||||
|
:begin="`${i * 0.15}s`"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
/>
|
||||||
|
</use>
|
||||||
|
|
||||||
|
<circle
|
||||||
|
cx="50"
|
||||||
|
cy="50"
|
||||||
|
r="26"
|
||||||
|
fill="transparent"
|
||||||
|
stroke="rgba(3, 166, 224, 0.2)"
|
||||||
|
stroke-width="1"
|
||||||
|
stroke-dasharray="5, 1"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import autoResize from '../../mixins/autoResize.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Decoration9',
|
||||||
|
mixins: [autoResize],
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
ref: 'decoration-9',
|
||||||
|
|
||||||
|
polygonId: `decoration-9-polygon-${(new Date()).getTime()}`,
|
||||||
|
|
||||||
|
svgWH: [100, 100],
|
||||||
|
|
||||||
|
svgScale: [1, 1]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
afterAutoResizeMixinInit () {
|
||||||
|
const { calcScale } = this
|
||||||
|
|
||||||
|
calcScale()
|
||||||
|
},
|
||||||
|
calcScale () {
|
||||||
|
const { width, height, svgWH } = this
|
||||||
|
|
||||||
|
const [w, h] = svgWH
|
||||||
|
|
||||||
|
this.svgScale = [width / w, height / h]
|
||||||
|
},
|
||||||
|
onResize () {
|
||||||
|
const { calcScale } = this
|
||||||
|
|
||||||
|
calcScale()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.dv-decoration-9 {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
position: absolute;
|
||||||
|
left: 0px;
|
||||||
|
top: 0px;
|
||||||
|
transform-origin: left top;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -10,6 +10,7 @@ import borderBox5 from './borderBox5/index'
|
||||||
import borderBox6 from './borderBox6/index'
|
import borderBox6 from './borderBox6/index'
|
||||||
import borderBox7 from './borderBox7/index'
|
import borderBox7 from './borderBox7/index'
|
||||||
import borderBox8 from './borderBox8/index'
|
import borderBox8 from './borderBox8/index'
|
||||||
|
import borderBox9 from './borderBox9/index'
|
||||||
|
|
||||||
// decoration
|
// decoration
|
||||||
import decoration1 from './decoration1/index'
|
import decoration1 from './decoration1/index'
|
||||||
|
|
@ -20,6 +21,8 @@ import decoration5 from './decoration5/index'
|
||||||
import decoration6 from './decoration6/index'
|
import decoration6 from './decoration6/index'
|
||||||
import decoration7 from './decoration7/index'
|
import decoration7 from './decoration7/index'
|
||||||
import decoration8 from './decoration8/index'
|
import decoration8 from './decoration8/index'
|
||||||
|
import decoration9 from './decoration9/index'
|
||||||
|
import decoration10 from './decoration10/index'
|
||||||
|
|
||||||
// charts
|
// charts
|
||||||
import charts from './charts/index.vue'
|
import charts from './charts/index.vue'
|
||||||
|
|
@ -47,6 +50,7 @@ export default function (Vue) {
|
||||||
Vue.component('dvBorderBox6', borderBox6)
|
Vue.component('dvBorderBox6', borderBox6)
|
||||||
Vue.component('dvBorderBox7', borderBox7)
|
Vue.component('dvBorderBox7', borderBox7)
|
||||||
Vue.component('dvBorderBox8', borderBox8)
|
Vue.component('dvBorderBox8', borderBox8)
|
||||||
|
Vue.component('dvBorderBox9', borderBox9)
|
||||||
|
|
||||||
// decoration
|
// decoration
|
||||||
Vue.component('dvDecoration1', decoration1)
|
Vue.component('dvDecoration1', decoration1)
|
||||||
|
|
@ -57,6 +61,8 @@ export default function (Vue) {
|
||||||
Vue.component('dvDecoration6', decoration6)
|
Vue.component('dvDecoration6', decoration6)
|
||||||
Vue.component('dvDecoration7', decoration7)
|
Vue.component('dvDecoration7', decoration7)
|
||||||
Vue.component('dvDecoration8', decoration8)
|
Vue.component('dvDecoration8', decoration8)
|
||||||
|
Vue.component('dvDecoration9', decoration9)
|
||||||
|
Vue.component('dvDecoration10', decoration10)
|
||||||
|
|
||||||
// charts
|
// charts
|
||||||
Vue.component('dvCharts', charts)
|
Vue.component('dvCharts', charts)
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue