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

Add color configuration items to customize colors

This commit is contained in:
JM 2019-12-06 20:55:51 +08:00
parent f4888ad9cd
commit 14765c6e79
20 changed files with 866 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/borderBox1/src/main.vue
View File

@ -8,36 +8,36 @@
:class="`${item} border`"
>
<polygon
fill="#4fd2dd"
:fill="mergedColor[0]"
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"
:values="`${mergedColor[0]};${mergedColor[1]};${mergedColor[0]}`"
dur="0.5s"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<polygon
fill="#235fa7"
:fill="mergedColor[1]"
points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"
>
<animate
attributeName="fill"
values="#235fa7;#4fd2dd;#235fa7"
:values="`${mergedColor[1]};${mergedColor[0]};${mergedColor[1]}`"
dur="0.5s"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<polygon
fill="#4fd2dd"
:fill="mergedColor[0]"
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"
:values="`${mergedColor[0]};${mergedColor[1]};transparent`"
dur="1s"
begin="0s"
repeatCount="indefinite"
@ -52,12 +52,45 @@
</template>
<script>
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default {
name: 'DvBorderBox1',
props: {
color: {
type: Array,
default: () => ([])
}
},
data () {
return {
border: ['left-top', 'right-top', 'left-bottom', 'right-bottom']
border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],
defaultColor: ['#4fd2dd', '#235fa7'],
mergedColor: []
}
},
watch: {
color () {
const { mergeColor } = this
mergeColor()
}
},
methods: {
mergeColor () {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
}
},
mounted () {
const { mergeColor } = this
mergeColor()
}
}
</script>

40
src/components/borderBox10/src/main.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="dv-border-box-10">
<div class="dv-border-box-10" :style="`box-shadow: inset 0 0 25px 3px ${mergedColor[0]}`">
<svg
width="150px"
height="150px"
@ -8,7 +8,7 @@
:class="`${item} border`"
>
<polygon
fill="#d3e1f8"
:fill="mergedColor[1]"
points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3"
/>
</svg>
@ -20,12 +20,45 @@
</template>
<script>
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default {
name: 'DvBorderBox10',
props: {
color: {
type: Array,
default: () => ([])
}
},
data () {
return {
border: ['left-top', 'right-top', 'left-bottom', 'right-bottom']
border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],
defaultColor: ['#1d48c4', '#d3e1f8'],
mergedColor: []
}
},
watch: {
color () {
const { mergeColor } = this
mergeColor()
}
},
methods: {
mergeColor () {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
}
},
mounted () {
const { mergeColor } = this
mergeColor()
}
}
</script>
@ -35,7 +68,6 @@ export default {
position: relative;
width: 100%;
height: 100%;
box-shadow: inset 0 0 25px 3px #1d48c4;
border-radius: 6px;
.border {

67
src/components/borderBox2/src/main.vue
View File

@ -1,14 +1,18 @@
<template>
<div class="dv-border-box-2" :ref="ref">
<svg class="dv-border-svg-container" :width="width" :height="height">
<polyline class="dv-bb2-line1"
:points="`2, 2 ${width - 2} ,2 ${width - 2}, ${height - 2} 2, ${height - 2} 2, 2`" />
<polyline class="dv-bb2-line2"
:points="`6, 6 ${width - 6}, 6 ${width - 6}, ${height - 6} 6, ${height - 6} 6, 6`" />
<circle cx="11" cy="11" r="1" />
<circle :cx="width - 11" cy="11" r="1" />
<circle :cx="width - 11" :cy="height - 11" r="1" />
<circle cx="11" :cy="height - 11" r="1" />
<polyline
:stroke="mergedColor[0]"
:points="`2, 2 ${width - 2} ,2 ${width - 2}, ${height - 2} 2, ${height - 2} 2, 2`"
/>
<polyline
:stroke="mergedColor[1]"
:points="`6, 6 ${width - 6}, 6 ${width - 6}, ${height - 6} 6, ${height - 6} 6, 6`"
/>
<circle :fill="mergedColor[0]" cx="11" cy="11" r="1" />
<circle :fill="mergedColor[0]" :cx="width - 11" cy="11" r="1" />
<circle :fill="mergedColor[0]" :cx="width - 11" :cy="height - 11" r="1" />
<circle :fill="mergedColor[0]" cx="11" :cy="height - 11" r="1" />
</svg>
<div class="border-box-content">
@ -20,13 +24,46 @@
<script>
import autoResize from '../../../mixin/autoResize'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default {
name: 'DvBorderBox2',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
}
},
data () {
return {
ref: 'border-box-2'
ref: 'border-box-2',
defaultColor: ['#fff', 'rgba(255, 255, 255, 0.6)'],
mergedColor: []
}
},
watch: {
color () {
const { mergeColor } = this
mergeColor()
}
},
methods: {
mergeColor () {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
}
},
mounted () {
const { mergeColor } = this
mergeColor()
}
}
</script>
@ -48,18 +85,6 @@ export default {
fill: none;
stroke-width: 1;
}
circle {
fill: #fff;
}
}
.dv-bb2-line1 {
stroke: #fff;
}
.dv-bb2-line2 {
stroke: fade(#fff, 60);
}
.border-box-content {

52
src/components/borderBox3/src/main.vue
View File

@ -2,13 +2,21 @@
<div class="dv-border-box-3" :ref="ref">
<svg class="dv-border-svg-container" :width="width" :height="height">
<polyline class="dv-bb3-line1"
:points="`4, 4 ${width - 22} ,4 ${width - 22}, ${height - 22} 4, ${height - 22} 4, 4`" />
:stroke="mergedColor[0]"
:points="`4, 4 ${width - 22} ,4 ${width - 22}, ${height - 22} 4, ${height - 22} 4, 4`"
/>
<polyline class="dv-bb3-line2"
:points="`10, 10 ${width - 16}, 10 ${width - 16}, ${height - 16} 10, ${height - 16} 10, 10`" />
:stroke="mergedColor[1]"
:points="`10, 10 ${width - 16}, 10 ${width - 16}, ${height - 16} 10, ${height - 16} 10, 10`"
/>
<polyline class="dv-bb3-line2"
:points="`16, 16 ${width - 10}, 16 ${width - 10}, ${height - 10} 16, ${height - 10} 16, 16`" />
:stroke="mergedColor[1]"
:points="`16, 16 ${width - 10}, 16 ${width - 10}, ${height - 10} 16, ${height - 10} 16, 16`"
/>
<polyline class="dv-bb3-line2"
:points="`22, 22 ${width - 4}, 22 ${width - 4}, ${height - 4} 22, ${height - 4} 22, 22`" />
:stroke="mergedColor[1]"
:points="`22, 22 ${width - 4}, 22 ${width - 4}, ${height - 4} 22, ${height - 4} 22, 22`"
/>
</svg>
<div class="border-box-content">
@ -20,13 +28,46 @@
<script>
import autoResize from '../../../mixin/autoResize'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default {
name: 'DvBorderBox3',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
}
},
data () {
return {
ref: 'border-box-3'
ref: 'border-box-3',
defaultColor: ['#2862b7', '#2862b7'],
mergedColor: []
}
},
watch: {
color () {
const { mergeColor } = this
mergeColor()
}
},
methods: {
mergeColor () {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
}
},
mounted () {
const { mergeColor } = this
mergeColor()
}
}
</script>
@ -46,7 +87,6 @@ export default {
polyline {
fill: none;
stroke: #2862b7;
}
}

90
src/components/borderBox4/src/main.vue
View File

@ -1,18 +1,25 @@
<template>
<div class="dv-border-box-4" :ref="ref">
<svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
<polyline class="dv-bb4-line-1" :points="`145, ${height - 5} 40, ${height - 5} 10, ${height - 35}
10, 40 40, 5 150, 5 170, 20 ${width - 15}, 20`"/>
<polyline class="dv-bb4-line-2" :points="`245, ${height - 1} 36, ${height - 1} 14, ${height - 23}
14, ${height - 100}`" />
<polyline class="dv-bb4-line-3" :points="`7, ${height - 40} 7, ${height - 75}`" />
<polyline class="dv-bb4-line-4" :points="`28, 24 13, 41 13, 64`" />
<polyline class="dv-bb4-line-5" :points="`5, 45 5, 140`" />
<polyline class="dv-bb4-line-6" :points="`14, 75 14, 180`" />
<polyline class="dv-bb4-line-7" :points="`55, 11 147, 11 167, 26 250, 26`" />
<polyline class="dv-bb4-line-8" :points="`158, 5 173, 16`" />
<polyline class="dv-bb4-line-9" :points="`200, 17 ${width - 10}, 17`" />
<polyline class="dv-bb4-line-10" :points="`385, 17 ${width - 10}, 17`" />
<polyline class="dv-bb4-line-1"
:stroke="mergedColor[0]"
:points="`145, ${height - 5} 40, ${height - 5} 10, ${height - 35}
10, 40 40, 5 150, 5 170, 20 ${width - 15}, 20`"
/>
<polyline
:stroke="mergedColor[1]"
class="dv-bb4-line-2" :points="`245, ${height - 1} 36, ${height - 1} 14, ${height - 23}
14, ${height - 100}`"
/>
<polyline class="dv-bb4-line-3" :stroke="mergedColor[0]" :points="`7, ${height - 40} 7, ${height - 75}`" />
<polyline class="dv-bb4-line-4" :stroke="mergedColor[0]" :points="`28, 24 13, 41 13, 64`" />
<polyline class="dv-bb4-line-5" :stroke="mergedColor[0]" :points="`5, 45 5, 140`" />
<polyline class="dv-bb4-line-6" :stroke="mergedColor[1]" :points="`14, 75 14, 180`" />
<polyline class="dv-bb4-line-7" :stroke="mergedColor[1]" :points="`55, 11 147, 11 167, 26 250, 26`" />
<polyline class="dv-bb4-line-8" :stroke="mergedColor[1]" :points="`158, 5 173, 16`" />
<polyline class="dv-bb4-line-9" :stroke="mergedColor[0]" :points="`200, 17 ${width - 10}, 17`" />
<polyline class="dv-bb4-line-10" :stroke="mergedColor[1]" :points="`385, 17 ${width - 10}, 17`" />
</svg>
<div class="border-box-content">
@ -24,19 +31,50 @@
<script>
import autoResize from '../../../mixin/autoResize'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default {
name: 'DvBorderBox4',
mixins: [autoResize],
data () {
return {
ref: 'border-box-4'
}
},
props: {
color: {
type: Array,
default: () => ([])
},
reverse: {
type: Boolean,
default: false
}
},
data () {
return {
ref: 'border-box-4',
defaultColor: ['red', 'rgba(0,0,255,0.8)'],
mergedColor: []
}
},
watch: {
color () {
const { mergeColor } = this
mergeColor()
}
},
methods: {
mergeColor () {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
}
},
mounted () {
const { mergeColor } = this
mergeColor()
}
}
</script>
@ -63,14 +101,6 @@ export default {
}
}
.sred {
stroke: red;
}
.sblue {
stroke: fade(blue, 80);
}
.sw1 {
stroke-width: 1;
}
@ -81,53 +111,43 @@ export default {
}
.dv-bb4-line-1 {
.sred;
.sw1;
}
.dv-bb4-line-2 {
.sblue;
.sw1;
}
.dv-bb4-line-3 {
.sred;
.sw3;
}
.dv-bb4-line-4 {
.sred;
.sw3;
}
.dv-bb4-line-5 {
.sred;
.sw1;
}
.dv-bb4-line-6 {
.sblue;
.sw1;
}
.dv-bb4-line-7 {
.sblue;
.sw1;
}
.dv-bb4-line-8 {
.sblue;
.sw3;
}
.dv-bb4-line-9 {
.sred;
.sw3;
stroke-dasharray: 100 250;
}
.dv-bb4-line-10 {
.sblue;
.sw1;
stroke-dasharray: 80 270;
}

74
src/components/borderBox5/src/main.vue
View File

@ -1,14 +1,22 @@
<template>
<div class="dv-border-box-5" :ref="ref">
<svg :class="`dv-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
<polyline class="dv-bb5-line-1" :points="`8, 5 ${width - 5}, 5 ${width - 5}, ${height - 100}
${width - 100}, ${height - 5} 8, ${height - 5} 8, 5`" />
<polyline class="dv-bb5-line-2" :points="`3, 5 ${width - 20}, 5 ${width - 20}, ${height - 60}
${width - 74}, ${height - 5} 3, ${height - 5} 3, 5`" />
<polyline class="dv-bb5-line-3" :points="`50, 13 ${width - 35}, 13`" />
<polyline class="dv-bb5-line-4" :points="`15, 20 ${width - 35}, 20`" />
<polyline class="dv-bb5-line-5" :points="`15, ${height - 20} ${width - 110}, ${height - 20}`" />
<polyline class="dv-bb5-line-6" :points="`15, ${height - 13} ${width - 110}, ${height - 13}`" />
<polyline
class="dv-bb5-line-1"
:stroke="mergedColor[0]"
:points="`8, 5 ${width - 5}, 5 ${width - 5}, ${height - 100}
${width - 100}, ${height - 5} 8, ${height - 5} 8, 5`"
/>
<polyline
class="dv-bb5-line-2"
:stroke="mergedColor[1]"
:points="`3, 5 ${width - 20}, 5 ${width - 20}, ${height - 60}
${width - 74}, ${height - 5} 3, ${height - 5} 3, 5`"
/>
<polyline class="dv-bb5-line-3" :stroke="mergedColor[1]" :points="`50, 13 ${width - 35}, 13`" />
<polyline class="dv-bb5-line-4" :stroke="mergedColor[1]" :points="`15, 20 ${width - 35}, 20`" />
<polyline class="dv-bb5-line-5" :stroke="mergedColor[1]" :points="`15, ${height - 20} ${width - 110}, ${height - 20}`" />
<polyline class="dv-bb5-line-6" :stroke="mergedColor[1]" :points="`15, ${height - 13} ${width - 110}, ${height - 13}`" />
</svg>
<div class="border-box-content">
@ -20,19 +28,50 @@
<script>
import autoResize from '../../../mixin/autoResize'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default {
name: 'DvBorderBox5',
mixins: [autoResize],
data () {
return {
ref: 'border-box-5'
}
},
props: {
color: {
type: Array,
default: () => ([])
},
reverse: {
type: Boolean,
default: false
}
},
data () {
return {
ref: 'border-box-5',
defaultColor: ['rgba(255, 255, 255, 0.35)', 'rgba(255, 255, 255, 0.20)'],
mergedColor: []
}
},
watch: {
color () {
const { mergeColor } = this
mergeColor()
}
},
methods: {
mergeColor () {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
}
},
mounted () {
const { mergeColor } = this
mergeColor()
}
}
</script>
@ -59,23 +98,16 @@ export default {
}
}
.dv-bb5-line-1 {
.dv-bb5-line-1, .dv-bb5-line-2 {
stroke-width: 1;
stroke: fade(#fff, 35);
}
.dv-bb5-line-2 {
stroke: fade(#fff, 20);
}
.dv-bb5-line-3, .dv-bb5-line-6 {
stroke-width: 5;
stroke: fade(#fff, 15);
}
.dv-bb5-line-4, .dv-bb5-line-5 {
stroke-width: 2;
stroke: fade(#fff, 15);
}
.border-box-content {

72
src/components/borderBox6/src/main.vue
View File

@ -1,22 +1,22 @@
<template>
<div class="dv-border-box-6" :ref="ref">
<svg class="dv-svg-container" :width="width" :height="height">
<circle cx="5" cy="5" r="2"/>
<circle :cx="width - 5" cy="5" r="2" />
<circle :cx="width - 5" :cy="height - 5" r="2" />
<circle cx="5" :cy="height - 5" r="2" />
<polyline :points="`10, 4 ${width - 10}, 4`" />
<polyline :points="`10, ${height - 4} ${width - 10}, ${height - 4}`" />
<polyline :points="`5, 70 5, ${height - 70}`" />
<polyline :points="`${width - 5}, 70 ${width - 5}, ${height - 70}`" />
<polyline :points="`3, 10, 3, 50`" />
<polyline :points="`7, 30 7, 80`" />
<polyline :points="`${width - 3}, 10 ${width - 3}, 50`" />
<polyline :points="`${width - 7}, 30 ${width - 7}, 80`" />
<polyline :points="`3, ${height - 10} 3, ${height - 50}`" />
<polyline :points="`7, ${height - 30} 7, ${height - 80}`" />
<polyline :points="`${width - 3}, ${height - 10} ${width - 3}, ${height - 50}`" />
<polyline :points="`${width - 7}, ${height - 30} ${width - 7}, ${height - 80}`" />
<circle :fill="mergedColor[1]" cx="5" cy="5" r="2"/>
<circle :fill="mergedColor[1]" :cx="width - 5" cy="5" r="2" />
<circle :fill="mergedColor[1]" :cx="width - 5" :cy="height - 5" r="2" />
<circle :fill="mergedColor[1]" cx="5" :cy="height - 5" r="2" />
<polyline :stroke="mergedColor[0]" :points="`10, 4 ${width - 10}, 4`" />
<polyline :stroke="mergedColor[0]" :points="`10, ${height - 4} ${width - 10}, ${height - 4}`" />
<polyline :stroke="mergedColor[0]" :points="`5, 70 5, ${height - 70}`" />
<polyline :stroke="mergedColor[0]" :points="`${width - 5}, 70 ${width - 5}, ${height - 70}`" />
<polyline :stroke="mergedColor[0]" :points="`3, 10, 3, 50`" />
<polyline :stroke="mergedColor[0]" :points="`7, 30 7, 80`" />
<polyline :stroke="mergedColor[0]" :points="`${width - 3}, 10 ${width - 3}, 50`" />
<polyline :stroke="mergedColor[0]" :points="`${width - 7}, 30 ${width - 7}, 80`" />
<polyline :stroke="mergedColor[0]" :points="`3, ${height - 10} 3, ${height - 50}`" />
<polyline :stroke="mergedColor[0]" :points="`7, ${height - 30} 7, ${height - 80}`" />
<polyline :stroke="mergedColor[0]" :points="`${width - 3}, ${height - 10} ${width - 3}, ${height - 50}`" />
<polyline :stroke="mergedColor[0]" :points="`${width - 7}, ${height - 30} ${width - 7}, ${height - 80}`" />
</svg>
<div class="border-box-content">
@ -28,13 +28,46 @@
<script>
import autoResize from '../../../mixin/autoResize.js'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default {
name: 'DvBorderBox6',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
}
},
data () {
return {
ref: 'border-box-6'
ref: 'border-box-6',
defaultColor: ['rgba(255, 255, 255, 0.35)', 'gray'],
mergedColor: []
}
},
watch: {
color () {
const { mergeColor } = this
mergeColor()
}
},
methods: {
mergeColor () {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
}
},
mounted () {
const { mergeColor } = this
mergeColor()
}
}
</script>
@ -52,14 +85,9 @@ export default {
width: 100%;
height: 100%;
circle {
fill: gray;
}
polyline {
fill: none;
stroke-width: 1;
stroke: fade(#fff, 35);
}
}

68
src/components/borderBox7/src/main.vue
View File

@ -1,15 +1,20 @@
<template>
<div class="dv-border-box-7" :ref="ref">
<svg class="dv-svg-container" :width="width" :height="height">
<polyline class="dv-bb7-line-width-2" :points="`0, 25 0, 0 25, 0`" />
<polyline class="dv-bb7-line-width-2" :points="`${width - 25}, 0 ${width}, 0 ${width}, 25`" />
<polyline class="dv-bb7-line-width-2" :points="`${width - 25}, ${height} ${width}, ${height} ${width}, ${height - 25}`" />
<polyline class="dv-bb7-line-width-2" :points="`0, ${height - 25} 0, ${height} 25, ${height}`" />
<polyline class="dv-bb7-line-width-5" :points="`0, 10 0, 0 10, 0`" />
<polyline class="dv-bb7-line-width-5" :points="`${width - 10}, 0 ${width}, 0 ${width}, 10`" />
<polyline class="dv-bb7-line-width-5" :points="`${width - 10}, ${height} ${width}, ${height} ${width}, ${height - 10}`" />
<polyline class="dv-bb7-line-width-5" :points="`0, ${height - 10} 0, ${height} 10, ${height}`" />
<template>
<div
class="dv-border-box-7"
:style="`box-shadow: inset 0 0 40px ${mergedColor[0]}; border: 1px solid ${mergedColor[0]}`"
:ref="ref"
>
<svg class="dv-svg-container" :width="width" :height="height">
<polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`0, 25 0, 0 25, 0`" />
<polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, 0 ${width}, 0 ${width}, 25`" />
<polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, ${height} ${width}, ${height} ${width}, ${height - 25}`" />
<polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`0, ${height - 25} 0, ${height} 25, ${height}`" />
<polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`0, 10 0, 0 10, 0`" />
<polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`${width - 10}, 0 ${width}, 0 ${width}, 10`" />
<polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`${width - 10}, ${height} ${width}, ${height} ${width}, ${height - 10}`" />
<polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`0, ${height - 10} 0, ${height} 10, ${height}`" />
</svg>
<div class="border-box-content">
@ -21,26 +26,55 @@
<script>
import autoResize from '../../../mixin/autoResize'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default {
name: 'DvBorderBox7',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
}
},
data () {
return {
ref: 'border-box-7'
ref: 'border-box-7',
defaultColor: ['rgba(128,128,128,0.3)', 'rgba(128,128,128,0.5)'],
mergedColor: []
}
},
watch: {
color () {
const { mergeColor } = this
mergeColor()
}
},
methods: {
mergeColor () {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
}
},
mounted () {
const { mergeColor } = this
mergeColor()
}
}
</script>
<style lang="less">
.dv-border-box-7 {
@color: fade(gray, 30);
position: relative;
width: 100%;
height: 100%;
box-shadow: inset 0 0 40px fade(@color, 30);
border: 1px solid @color;
.dv-svg-container {
position: absolute;
@ -56,12 +90,10 @@ export default {
}
.dv-bb7-line-width-2 {
stroke: @color;
stroke-width: 2;
}
.dv-bb7-line-width-5 {
stroke: fade(gray, 50);
stroke-width: 5;
}

47
src/components/borderBox8/src/main.vue
View File

@ -24,7 +24,7 @@
<mask :id="mask">
<circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
<animateMotion
dur="3s"
:dur="`${dur}s`"
:path="`M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`"
rotate="auto"
repeatCount="indefinite"
@ -34,13 +34,13 @@
</defs>
<use
stroke="#235fa7"
:stroke="mergedColor[0]"
stroke-width="1"
:xlink:href="`#${path}`"
/>
<use
stroke="#4fd2dd"
:stroke="mergedColor[1]"
stroke-width="3"
:xlink:href="`#${path}`"
:mask="`url(#${mask})`"
@ -49,7 +49,7 @@
attributeName="stroke-dasharray"
:from="`0, ${length}`"
:to="`${length}, 0`"
dur="3s"
:dur="`${dur}s`"
repeatCount="indefinite"
/>
</use>
@ -64,16 +64,34 @@
<script>
import autoResize from '../../../mixin/autoResize'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default {
name: 'DvBorderBox8',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
},
dur: {
type: Number,
default: 3
}
},
data () {
const timestamp = Date.now()
return {
ref: 'border-box-8',
path: `border-box-8-path-${timestamp}`,
gradient: `border-box-8-gradient-${timestamp}`,
mask: `border-box-8-mask-${timestamp}`
mask: `border-box-8-mask-${timestamp}`,
defaultColor: ['#235fa7', '#4fd2dd'],
mergedColor: []
}
},
computed: {
@ -82,6 +100,25 @@ export default {
return (width + height - 5) * 2
}
},
watch: {
color () {
const { mergeColor } = this
mergeColor()
}
},
methods: {
mergeColor () {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
}
},
mounted () {
const { mergeColor } = this
mergeColor()
}
}
</script>

71
src/components/borderBox9/src/main.vue
View File

@ -3,8 +3,40 @@
<svg class="dv-svg-container" :width="width" :height="height">
<defs>
<linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#11eefd" />
<stop offset="100%" stop-color="#0078d2" />
<animate
attributeName="x1"
values="0%;100%;0%"
dur="10s"
begin="0s"
repeatCount="indefinite"
/>
<animate
attributeName="x2"
values="100%;0%;100%"
dur="10s"
begin="0s"
repeatCount="indefinite"
/>
<stop offset="0%" :stop-color="mergedColor[0]">
<animate
attributeName="stop-color"
:values="`${mergedColor[0]};${mergedColor[1]};${mergedColor[0]}`"
dur="10s"
begin="0s"
repeatCount="indefinite"
/>
</stop>
<stop offset="100%" :stop-color="mergedColor[1]">
<animate
attributeName="stop-color"
:values="`${mergedColor[1]};${mergedColor[0]};${mergedColor[1]}`"
dur="10s"
begin="0s"
repeatCount="indefinite"
/>
</stop>
</linearGradient>
<mask :id="maskId">
@ -85,17 +117,50 @@
<script>
import autoResize from '../../../mixin/autoResize'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default {
name: 'DvBorderBox9',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
}
},
data () {
const timestamp = Date.now()
return {
ref: 'border-box-9',
gradientId: `border-box-9-gradient-${timestamp}`,
maskId: `border-box-9-mask-${timestamp}`
maskId: `border-box-9-mask-${timestamp}`,
defaultColor: ['#11eefd', '#0078d2'],
mergedColor: []
}
},
watch: {
color () {
const { mergeColor } = this
mergeColor()
}
},
methods: {
mergeColor () {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
}
},
mounted () {
const { mergeColor } = this
mergeColor()
}
}
</script>

41
src/components/decoration1/src/main.vue
View File

@ -8,7 +8,7 @@
<rect
v-if="Math.random() > 0.6"
:key="i"
fill="#fff"
:fill="mergedColor[0]"
:x="point[0] - halfPointSideLength"
:y="point[1] - halfPointSideLength"
:width="pointSideLength"
@ -17,7 +17,7 @@
<animate
v-if="Math.random() > 0.6"
attributeName="fill"
values="#fff;transparent"
:values="`${mergedColor[0]};transparent`"
dur="1s"
:begin="Math.random() * 2"
repeatCount="indefinite"
@ -27,7 +27,7 @@
<rect
v-if="rects[0]"
fill="#0de7c2"
:fill="mergedColor[1]"
:x="rects[0][0] - pointSideLength"
:y="rects[0][1] - pointSideLength"
:width="pointSideLength * 2"
@ -61,7 +61,7 @@
<rect
v-if="rects[1]"
fill="#0de7c2"
:fill="mergedColor[1]"
:x="rects[1][0] - 40"
:y="rects[1][1] - pointSideLength"
:width="40"
@ -87,9 +87,19 @@
<script>
import autoResize from '../../../mixin/autoResize'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default {
name: 'DvDecoration1',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
}
},
data () {
const pointSideLength = 2.5
@ -108,7 +118,18 @@ export default {
points: [],
rects: []
rects: [],
defaultColor: ['#fff', '#0de7c2'],
mergedColor: []
}
},
watch: {
color () {
const { mergeColor } = this
mergeColor()
}
},
methods: {
@ -160,7 +181,17 @@ export default {
const { calcSVGData } = this
calcSVGData()
},
mergeColor () {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
}
},
mounted () {
const { mergeColor } = this
mergeColor()
}
}
</script>

65
src/components/decoration10/src/main.vue
View File

@ -2,13 +2,13 @@
<div class="dv-decoration-10" :ref="ref">
<svg :width="width" :height="height">
<polyline
stroke="rgba(0, 194, 255, 0.3)"
:stroke="mergedColor[1]"
stroke-width="2"
:points="`0, ${height / 2} ${width}, ${height / 2}`"
/>
<polyline
stroke="rgba(0, 194, 255, 1)"
:stroke="mergedColor[0]"
stroke-width="2"
:points="`5, ${height / 2} ${width * 0.2 - 3}, ${height / 2}`"
:stroke-dasharray="`0, ${width * 0.2}`"
@ -32,7 +32,7 @@
</polyline>
<polyline
stroke="rgba(0, 194, 255, 1)"
:stroke="mergedColor[0]"
stroke-width="2"
:points="`${width * 0.2 + 3}, ${height / 2} ${width * 0.8 - 3}, ${height / 2}`"
:stroke-dasharray="`0, ${width * 0.6}`"
@ -55,7 +55,7 @@
</polyline>
<polyline
stroke="rgba(0, 194, 255, 1)"
:stroke="mergedColor[0]"
stroke-width="2"
:points="`${width * 0.8 + 3}, ${height / 2} ${width - 5}, ${height / 2}`"
:stroke-dasharray="`0, ${width * 0.2}`"
@ -77,65 +77,65 @@
/>
</polyline>
<circle cx="2" :cy="height / 2" r="2" fill="#03709f">
<circle cx="2" :cy="height / 2" r="2" :fill="mergedColor[1]">
<animate
:id="animationId1"
attributeName="fill"
values="#03709f;#00c2ff"
:values="`${mergedColor[1]};${mergedColor[0]}`"
:begin="`0s;${animationId7}.end`"
dur="0.3s"
fill="freeze"
/>
</circle>
<circle :cx="width * 0.2" :cy="height / 2" r="2" fill="#03709f">
<circle :cx="width * 0.2" :cy="height / 2" r="2" :fill="mergedColor[1]">
<animate
:id="animationId3"
attributeName="fill"
values="#03709f;#00c2ff"
:values="`${mergedColor[1]};${mergedColor[0]}`"
:begin="`${animationId2}.end`"
dur="0.3s"
fill="freeze"
/>
<animate
attributeName="fill"
values="#03709f;#03709f"
:values="`${mergedColor[1]};${mergedColor[1]}`"
dur="0.01s"
:begin="`${animationId7}.end`"
fill="freeze"
/>
</circle>
<circle :cx="width * 0.8" :cy="height / 2" r="2" fill="#03709f">
<circle :cx="width * 0.8" :cy="height / 2" r="2" :fill="mergedColor[1]">
<animate
:id="animationId5"
attributeName="fill"
values="#03709f;#00c2ff"
:values="`${mergedColor[1]};${mergedColor[0]}`"
:begin="`${animationId4}.end`"
dur="0.3s"
fill="freeze"
/>
<animate
attributeName="fill"
values="#03709f;#03709f"
:values="`${mergedColor[1]};${mergedColor[1]}`"
dur="0.01s"
:begin="`${animationId7}.end`"
fill="freeze"
/>
</circle>
<circle :cx="width - 2" :cy="height / 2" r="2" fill="#03709f">
<circle :cx="width - 2" :cy="height / 2" r="2" :fill="mergedColor[1]">
<animate
:id="animationId7"
attributeName="fill"
values="#03709f;#00c2ff"
:values="`${mergedColor[1]};${mergedColor[0]}`"
:begin="`${animationId6}.end`"
dur="0.3s"
fill="freeze"
/>
<animate
attributeName="fill"
values="#03709f;#03709f"
:values="`${mergedColor[1]};${mergedColor[1]}`"
dur="0.01s"
:begin="`${animationId7}.end`"
fill="freeze"
@ -148,9 +148,19 @@
<script>
import autoResize from '../../../mixin/autoResize'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default {
name: 'DvDecoration10',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
}
},
data () {
const timestamp = Date.now()
return {
@ -162,8 +172,31 @@ export default {
animationId4: `d10ani4${timestamp}`,
animationId5: `d10ani5${timestamp}`,
animationId6: `d10ani6${timestamp}`,
animationId7: `d10ani7${timestamp}`
animationId7: `d10ani7${timestamp}`,
defaultColor: ['#00c2ff', 'rgba(0, 194, 255, 0.3)'],
mergedColor: []
}
},
watch: {
color () {
const { mergeColor } = this
mergeColor()
}
},
methods: {
mergeColor () {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
}
},
mounted () {
const { mergeColor } = this
mergeColor()
}
}
</script>

33
src/components/decoration2/src/main.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="dv-decoration-2" :ref="ref">
<svg :width="`${width}px`" :height="`${height}px`">
<rect :x="x" :y="y" :width="w" :height="h" fill="#3faacb">
<rect :x="x" :y="y" :width="w" :height="h" :fill="mergedColor[0]">
<animate
:attributeName="reverse ? 'height' : 'width'"
from="0"
@ -14,7 +14,7 @@
/>
</rect>
<rect :x="x" :y="y" width="1" height="1" fill="#fff">
<rect :x="x" :y="y" width="1" height="1" :fill="mergedColor[1]">
<animate
:attributeName="reverse ? 'y' : 'x'"
from="0"
@ -33,10 +33,18 @@
<script>
import autoResize from '../../../mixin/autoResize'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default {
name: 'DvDecoration2',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
},
reverse: {
type: Boolean,
default: false
@ -50,10 +58,19 @@ export default {
y: 0,
w: 0,
h: 0
h: 0,
defaultColor: ['#3faacb', '#fff'],
mergedColor: []
}
},
watch: {
color () {
const { mergeColor } = this
mergeColor()
},
reverse () {
const { calcSVGData } = this
@ -85,7 +102,17 @@ export default {
const { calcSVGData } = this
calcSVGData()
},
mergeColor () {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
}
},
mounted () {
const { mergeColor } = this
mergeColor()
}
}
</script>

37
src/components/decoration3/src/main.vue
View File

@ -7,7 +7,7 @@
>
<rect
:key="i"
fill="#7acaec"
:fill="mergedColor[0]"
:x="point[0] - halfPointSideLength"
:y="point[1] - halfPointSideLength"
:width="pointSideLength"
@ -16,7 +16,7 @@
<animate
v-if="Math.random() > 0.6"
attributeName="fill"
values="#7acaec;transparent"
:values="`${mergedColor.join(';')}`"
:dur="Math.random() + 1 + 's'"
:begin="Math.random() * 2"
repeatCount="indefinite"
@ -30,9 +30,19 @@
<script>
import autoResize from '../../../mixin/autoResize'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default {
name: 'DvDecoration3',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
}
},
data () {
const pointSideLength = 7
@ -49,7 +59,18 @@ export default {
pointSideLength,
halfPointSideLength: pointSideLength / 2,
points: []
points: [],
defaultColor: ['#7acaec', 'transparent'],
mergedColor: []
}
},
watch: {
color () {
const { mergeColor } = this
mergeColor()
}
},
methods: {
@ -91,7 +112,17 @@ export default {
const { calcSVGData } = this
calcSVGData()
},
mergeColor () {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
}
},
mounted () {
const { mergeColor } = this
mergeColor()
}
}
</script>

44
src/components/decoration4/src/main.vue
View File

@ -6,12 +6,12 @@
>
<svg :width="reverse ? width : 5" :height="reverse ? 5 : height">
<polyline
stroke="rgba(255, 255, 255, 0.3)"
:stroke="mergedColor[0]"
:points="reverse ? `0, 2.5 ${width}, 2.5` : `2.5, 0 2.5, ${height}`"
/>
<polyline
class="bold-line"
stroke="rgba(255, 255, 255, 0.3)"
:stroke="mergedColor[1]"
stroke-width="3"
stroke-dasharray="20, 80"
stroke-dashoffset="-30"
@ -25,14 +25,50 @@
<script>
import autoResize from '../../../mixin/autoResize'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default {
name: 'DvDecoration4',
mixins: [autoResize],
props: ['reverse'],
props: {
color: {
type: Array,
default: () => ([])
},
reverse: {
type: Boolean,
default: false
}
},
data () {
return {
ref: 'decoration-4'
ref: 'decoration-4',
defaultColor: ['rgba(255, 255, 255, 0.3)', 'rgba(255, 255, 255, 0.3)'],
mergedColor: []
}
},
watch: {
color () {
const { mergeColor } = this
mergeColor()
}
},
methods: {
mergeColor () {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
}
},
mounted () {
const { mergeColor } = this
mergeColor()
}
}
</script>

37
src/components/decoration5/src/main.vue
View File

@ -3,7 +3,7 @@
<svg :width="width" :height="height">
<polyline
fill="transparent"
stroke="#3f96a5"
:stroke="mergedColor[0]"
stroke-width="3"
:points="line1Points"
>
@ -22,7 +22,7 @@
</polyline>
<polyline
fill="transparent"
stroke="#3f96a5"
:stroke="mergedColor[1]"
stroke-width="2"
:points="line2Points"
>
@ -48,9 +48,19 @@ import autoResize from '../../../mixin/autoResize'
import { getPolylineLength } from '@jiaminghi/charts/lib/util'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default {
name: 'DvDecoration5',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
}
},
data () {
return {
ref: 'decoration-5',
@ -59,7 +69,18 @@ export default {
line2Points: '',
line1Length: 0,
line2Length: 0
line2Length: 0,
defaultColor: ['#3f96a5', '#3f96a5'],
mergedColor: []
}
},
watch: {
color () {
const { mergeColor } = this
mergeColor()
}
},
methods: {
@ -97,7 +118,17 @@ export default {
const { calcSVGData } = this
calcSVGData()
},
mergeColor () {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
}
},
mounted () {
const { mergeColor } = this
mergeColor()
}
}
</script>

35
src/components/decoration6/src/main.vue
View File

@ -6,7 +6,7 @@
>
<rect
:key="i"
fill="#7acaec"
:fill="mergedColor[Math.random() > 0.5 ? 0 : 1]"
:x="point[0] - halfRectWidth"
:y="point[1] - heights[i] / 2"
:width="rectWidth"
@ -43,9 +43,19 @@ import autoResize from '../../../mixin/autoResize'
import { randomExtend } from '../../../util'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default {
name: 'DvDecoration6',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
}
},
data () {
const rectWidth = 7
@ -65,7 +75,18 @@ export default {
points: [],
heights: [],
minHeights: [],
randoms: []
randoms: [],
defaultColor: ['#7acaec', '#7acaec'],
mergedColor: []
}
},
watch: {
color () {
const { mergeColor } = this
mergeColor()
}
},
methods: {
@ -116,7 +137,17 @@ export default {
const { calcSVGData } = this
calcSVGData()
},
mergeColor () {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
}
},
mounted () {
const { mergeColor } = this
mergeColor()
}
}
</script>

46
src/components/decoration7/src/main.vue
View File

@ -4,13 +4,13 @@
<polyline
stroke-width="4"
fill="transparent"
stroke="#1dc1f5"
:stroke="mergedColor[0]"
points="10, 0 19, 10 10, 20"
/>
<polyline
stroke-width="2"
fill="transparent"
stroke="#1dc1f5"
:stroke="mergedColor[1]"
points="2, 0 11, 10 2, 20"
/>
</svg>
@ -19,13 +19,13 @@
<polyline
stroke-width="4"
fill="transparent"
stroke="#1dc1f5"
:stroke="mergedColor[0]"
points="11, 0 2, 10 11, 20"
/>
<polyline
stroke-width="2"
fill="transparent"
stroke="#1dc1f5"
:stroke="mergedColor[1]"
points="19, 0 10, 10 19, 20"
/>
</svg>
@ -33,8 +33,44 @@
</template>
<script>
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default {
name: 'DvDecoration7'
name: 'DvDecoration7',
props: {
color: {
type: Array,
default: () => ([])
}
},
data () {
return {
defaultColor: ['#1dc1f5', '#1dc1f5'],
mergedColor: []
}
},
watch: {
color () {
const { mergeColor } = this
mergeColor()
}
},
methods: {
mergeColor () {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
}
},
mounted () {
const { mergeColor } = this
mergeColor()
}
}
</script>

37
src/components/decoration8/src/main.vue
View File

@ -2,21 +2,21 @@
<div class="dv-decoration-8" :ref="ref">
<svg :width="width" :height="height">
<polyline
stroke="#3f96a5"
:stroke="mergedColor[0]"
stroke-width="2"
fill="transparent"
:points="`${xPos(0)}, 0 ${xPos(30)}, ${height / 2}`"
/>
<polyline
stroke="#3f96a5"
:stroke="mergedColor[0]"
stroke-width="2"
fill="transparent"
:points="`${xPos(20)}, 0 ${xPos(50)}, ${height / 2} ${xPos(width)}, ${height / 2}`"
/>
<polyline
stroke="#3f96a5"
:stroke="mergedColor[1]"
fill="transparent"
stroke-width="3"
:points="`${xPos(0)}, ${height - 3}, ${xPos(200)}, ${height - 3}`"
@ -28,10 +28,18 @@
<script>
import autoResize from '../../../mixin/autoResize'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default {
name: 'DvDecoration8',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
},
reverse: {
type: Boolean,
default: false
@ -39,7 +47,18 @@ export default {
},
data () {
return {
ref: 'decoration-8'
ref: 'decoration-8',
defaultColor: ['#3f96a5', '#3f96a5'],
mergedColor: []
}
},
watch: {
color () {
const { mergeColor } = this
mergeColor()
}
},
methods: {
@ -49,7 +68,17 @@ export default {
if (!reverse) return pos
return width - pos
},
mergeColor () {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
}
},
mounted () {
const { mergeColor } = this
mergeColor()
}
}
</script>

62
src/components/decoration9/src/main.vue
View File

@ -10,7 +10,7 @@
cy="50"
r="45"
fill="transparent"
stroke="rgba(3, 166, 224, 0.5)"
:stroke="mergedColor[1]"
stroke-width="10"
stroke-dasharray="80, 100, 30, 100"
>
@ -18,7 +18,7 @@
attributeName="transform"
type="rotate"
values="0 50 50;360 50 50"
dur="3s"
:dur="`${dur}s`"
repeatCount="indefinite"
/>
</circle>
@ -28,7 +28,7 @@
cy="50"
r="45"
fill="transparent"
stroke="rgba(3, 166, 224, 0.8)"
:stroke="mergedColor[0]"
stroke-width="6"
stroke-dasharray="50, 66, 100, 66"
>
@ -36,7 +36,7 @@
attributeName="transform"
type="rotate"
values="0 50 50;-360 50 50"
dur="3s"
:dur="`${dur}s`"
repeatCount="indefinite"
/>
</circle>
@ -46,7 +46,7 @@
cy="50"
r="38"
fill="transparent"
stroke="rgba(3, 166, 224, 0.2)"
:stroke="fade(mergedColor[1] || defaultColor[1], 30)"
stroke-width="1"
stroke-dasharray="5, 1"
/>
@ -55,15 +55,15 @@
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)'"
:stroke="mergedColor[1]"
:fill="Math.random() > 0.4 ? 'transparent' : mergedColor[0]"
>
<animateTransform
attributeName="transform"
type="rotate"
values="0 50 50;360 50 50"
dur="3s"
:begin="`${i * 0.15}s`"
:dur="`${dur}s`"
:begin="`${i * dur / 20}s`"
repeatCount="indefinite"
/>
</use>
@ -73,7 +73,7 @@
cy="50"
r="26"
fill="transparent"
stroke="rgba(3, 166, 224, 0.2)"
:stroke="fade(mergedColor[1] || defaultColor[1], 30)"
stroke-width="1"
stroke-dasharray="5, 1"
/>
@ -86,9 +86,25 @@
<script>
import autoResize from '../../../mixin/autoResize'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
import { fade } from '@jiaminghi/color'
export default {
name: 'DvDecoration9',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
},
dur: {
type: Number,
default: 3
}
},
data () {
const timestamp = Date.now()
return {
@ -98,7 +114,18 @@ export default {
svgWH: [100, 100],
svgScale: [1, 1]
svgScale: [1, 1],
defaultColor: ['rgba(3, 166, 224, 0.8)', 'rgba(3, 166, 224, 0.5)'],
mergedColor: []
}
},
watch: {
color () {
const { mergeColor } = this
mergeColor()
}
},
methods: {
@ -118,7 +145,18 @@ export default {
const { calcScale } = this
calcScale()
}
},
mergeColor () {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
},
fade
},
mounted () {
const { mergeColor } = this
mergeColor()
}
}
</script>