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

add backgroudColor config

This commit is contained in:
jiaming743 2020-04-25 16:42:04 +08:00
parent 419fa0c3a9
commit 5ee1d408b6
13 changed files with 124 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,16 @@
<template>
<div class="dv-border-box-1">
<div class="dv-border-box-1" :ref="ref">
<svg class="border" :width="width" :height="height">
<polygon :fill="backgroundColor" :points="`10, 27 10, ${height - 27} 13, ${height - 24} 13, ${height - 21} 24, ${height - 11}
38, ${height - 11} 41, ${height - 8} 73, ${height - 8} 75, ${height - 10} 81, ${height - 10}
85, ${height - 6} ${width - 85}, ${height - 6} ${width - 81}, ${height - 10} ${width - 75}, ${height - 10}
${width - 73}, ${height - 8} ${width - 41}, ${height - 8} ${width - 38}, ${height - 11}
${width - 24}, ${height - 11} ${width - 13}, ${height - 21} ${width - 13}, ${height - 24}
${width - 10}, ${height - 27} ${width - 10}, 27 ${width - 13}, 25 ${width - 13}, 21
${width - 24}, 11 ${width - 38}, 11 ${width - 41}, 8 ${width - 73}, 8 ${width - 75}, 10
${width - 81}, 10 ${width - 85}, 6 85, 6 81, 10 75, 10 73, 8 41, 8 38, 11 24, 11 13, 21 13, 24`" />
</svg>
<svg
width="150px"
height="150px"
@ -52,20 +63,29 @@
</template>
<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: 'DvBorderBox1',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
},
backgroundColor: {
type: String,
default: 'transparent'
}
},
data () {
return {
ref: 'border-box-1',
border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],
defaultColor: ['#4fd2dd', '#235fa7'],

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

@ -1,5 +1,12 @@
<template>
<div class="dv-border-box-10" :style="`box-shadow: inset 0 0 25px 3px ${mergedColor[0]}`">
<div class="dv-border-box-10" :ref="ref" :style="`box-shadow: inset 0 0 25px 3px ${mergedColor[0]}`">
<svg class="border" :width="width" :height="height">
<polygon :fill="backgroundColor" :points="`
4, 0 ${width - 4}, 0 ${width}, 4 ${width}, ${height - 4} ${width - 4}, ${height}
4, ${height} 0, ${height - 4} 0, 4
`" />
</svg>
<svg
width="150px"
height="150px"
@ -20,20 +27,29 @@
</template>
<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: 'DvBorderBox10',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
},
backgroundColor: {
type: String,
default: 'transparent'
}
},
data () {
return {
ref: 'border-box-10',
border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],
defaultColor: ['#1d48c4', '#d3e1f8'],

11
src/components/borderBox11/src/main.vue
View File

@ -14,6 +14,13 @@
</filter>
</defs>
<polygon :fill="backgroundColor" :points="`
20, 32 ${width * 0.5 - titleWidth / 2}, 32 ${width * 0.5 - titleWidth / 2 + 20}, 53
${width * 0.5 + titleWidth / 2 - 20}, 53 ${width * 0.5 + titleWidth / 2}, 32
${width - 20}, 32 ${width - 8}, 48 ${width - 8}, ${height - 25} ${width - 20}, ${height - 8}
20, ${height - 8} 8, ${height - 25} 8, 50
`" />
<polyline
:stroke="mergedColor[0]"
:filter="`url(#${filterId})`"
@ -231,6 +238,10 @@ export default {
title: {
type: String,
default: ''
},
backgroundColor: {
type: String,
default: 'transparent'
}
},
data () {

6
src/components/borderBox12/src/main.vue
View File

@ -28,7 +28,7 @@
<path
v-if="width && height"
fill="transparent"
:fill="backgroundColor"
stroke-width="2"
:stroke="mergedColor[0]"
:d="`
@ -106,6 +106,10 @@ export default {
color: {
type: Array,
default: () => ([])
},
backgroundColor: {
type: String,
default: 'transparent'
}
},
data () {

6
src/components/borderBox13/src/main.vue
View File

@ -2,7 +2,7 @@
<div class="dv-border-box-13" :ref="ref">
<svg class="dv-border-svg-container" :width="width" :height="height">
<path
fill="transparent"
:fill="backgroundColor"
:stroke="mergedColor[0]"
:d="`
M 5 20 L 5 10 L 12 3 L 60 3 L 68 10
@ -54,6 +54,10 @@ export default {
color: {
type: Array,
default: () => ([])
},
backgroundColor: {
type: String,
default: 'transparent'
}
},
data () {

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

@ -1,6 +1,10 @@
<template>
<div class="dv-border-box-2" :ref="ref">
<svg class="dv-border-svg-container" :width="width" :height="height">
<polygon :fill="backgroundColor" :points="`
7, 7 ${width - 7}, 7 ${width - 7}, ${height - 7} 7, ${height - 7}
`" />
<polyline
:stroke="mergedColor[0]"
:points="`2, 2 ${width - 2} ,2 ${width - 2}, ${height - 2} 2, ${height - 2} 2, 2`"
@ -35,6 +39,10 @@ export default {
color: {
type: Array,
default: () => ([])
},
backgroundColor: {
type: String,
default: 'transparent'
}
},
data () {

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

@ -1,6 +1,10 @@
<template>
<div class="dv-border-box-3" :ref="ref">
<svg class="dv-border-svg-container" :width="width" :height="height">
<polygon :fill="backgroundColor" :points="`
23, 23 ${width - 24}, 23 ${width - 24}, ${height - 24} 23, ${height - 24}
`" />
<polyline class="dv-bb3-line1"
:stroke="mergedColor[0]"
:points="`4, 4 ${width - 22} ,4 ${width - 22}, ${height - 22} 4, ${height - 22} 4, 4`"
@ -39,6 +43,10 @@ export default {
color: {
type: Array,
default: () => ([])
},
backgroundColor: {
type: String,
default: 'transparent'
}
},
data () {

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

@ -1,6 +1,11 @@
<template>
<div class="dv-border-box-4" :ref="ref">
<svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
<polygon :fill="backgroundColor" :points="`
${width - 15}, 22 170, 22 150, 7 40, 7 28, 21 32, 24
16, 42 16, ${height - 32} 41, ${height - 7} ${width - 15}, ${height - 7}
`" />
<polyline class="dv-bb4-line-1"
:stroke="mergedColor[0]"
:points="`145, ${height - 5} 40, ${height - 5} 10, ${height - 35}
@ -46,6 +51,10 @@ export default {
reverse: {
type: Boolean,
default: false
},
backgroundColor: {
type: String,
default: 'transparent'
}
},
data () {

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

@ -1,6 +1,10 @@
<template>
<div class="dv-border-box-5" :ref="ref">
<svg :class="`dv-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
<polygon :fill="backgroundColor" :points="`
10, 22 ${width - 22}, 22 ${width - 22}, ${height - 86} ${width - 84}, ${height - 24} 10, ${height - 24}
`" />
<polyline
class="dv-bb5-line-1"
:stroke="mergedColor[0]"
@ -43,6 +47,10 @@ export default {
reverse: {
type: Boolean,
default: false
},
backgroundColor: {
type: String,
default: 'transparent'
}
},
data () {

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

@ -1,6 +1,10 @@
<template>
<div class="dv-border-box-6" :ref="ref">
<svg class="dv-svg-container" :width="width" :height="height">
<polygon :fill="backgroundColor" :points="`
9, 7 ${width - 9}, 7 ${width - 9}, ${height - 7} 9, ${height - 7}
`" />
<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" />
@ -39,6 +43,10 @@ export default {
color: {
type: Array,
default: () => ([])
},
backgroundColor: {
type: String,
default: 'transparent'
}
},
data () {

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

@ -2,7 +2,7 @@
<template>
<div
class="dv-border-box-7"
:style="`box-shadow: inset 0 0 40px ${mergedColor[0]}; border: 1px solid ${mergedColor[0]}`"
:style="`box-shadow: inset 0 0 40px ${mergedColor[0]}; border: 1px solid ${mergedColor[0]}; background-color: ${backgroundColor}`"
:ref="ref"
>
<svg class="dv-svg-container" :width="width" :height="height">
@ -37,6 +37,10 @@ export default {
color: {
type: Array,
default: () => ([])
},
backgroundColor: {
type: String,
default: 'transparent'
}
},
data () {

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

@ -33,6 +33,8 @@
</mask>
</defs>
<polygon :fill="backgroundColor" :points="`5, 5 ${width - 5}, 5 ${width - 5} ${height - 5} 5, ${height - 5}`" />
<use
:stroke="mergedColor[0]"
stroke-width="1"
@ -79,6 +81,10 @@ export default {
dur: {
type: Number,
default: 3
},
backgroundColor: {
type: String,
default: 'transparent'
}
},
data () {

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

@ -105,6 +105,15 @@
</mask>
</defs>
<polygon :fill="backgroundColor" :points="`
15, 9 ${width * 0.1 + 1}, 9 ${width * 0.1 + 4}, 6 ${width * 0.52 + 2}, 6
${width * 0.52 + 6}, 10 ${width * 0.58 - 7}, 10 ${width * 0.58 - 2}, 6
${width * 0.9 + 2}, 6 ${width * 0.9 + 6}, 10 ${width - 10}, 10 ${width - 10}, ${height * 0.1 - 6}
${width - 6}, ${height * 0.1 - 1} ${width - 6}, ${height * 0.8 + 1} ${width - 10}, ${height * 0.8 + 6}
${width - 10}, ${height - 10} ${width * 0.92 + 7}, ${height - 10} ${width * 0.92 + 2}, ${height - 6}
11, ${height - 6} 11, ${height * 0.15 - 2} 15, ${height * 0.15 - 7}
`" />
<rect x="0" y="0" :width="width" :height="height" :fill="`url(#${gradientId})`" :mask="`url(#${maskId})`" />
</svg>
@ -128,6 +137,10 @@ export default {
color: {
type: Array,
default: () => ([])
},
backgroundColor: {
type: String,
default: 'transparent'
}
},
data () {