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

new borderbox

This commit is contained in:
JM 2019-12-06 20:56:12 +08:00
parent b439b17593
commit aa78fee05b
6 changed files with 586 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/borderBox11/index.js Normal file
View File

@ -0,0 +1,5 @@
import BorderBox11 from './src/main.vue'
export default function (Vue) {
Vue.component(BorderBox11.name, BorderBox11)
}

295
src/components/borderBox11/src/main.vue Normal file
View File

@ -0,0 +1,295 @@
<template>
<div class="dv-border-box-11" :ref="ref">
<svg class="dv-border-svg-container" :width="width" :height="height">
<defs>
<filter :id="filterId" height="150%" width="150%" x="-25%" y="-25%">
<feMorphology operator="dilate" radius="2" in="SourceAlpha" result="thicken" />
<feGaussianBlur in="thicken" stdDeviation="3" result="blurred" />
<feFlood :flood-color="mergedColor[1]" result="glowColor" />
<feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored" />
<feMerge>
<feMergeNode in="softGlowColored"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<polyline
:stroke="mergedColor[0]"
:filter="`url(#${filterId})`"
:points="`
${(width - titleWidth) / 2}, 30
20, 30 7, 50 7, ${50 + (height - 167) / 2}
13, ${55 + (height - 167) / 2} 13, ${135 + (height - 167) / 2}
7, ${140 + (height - 167) / 2} 7, ${height - 27}
20, ${height - 7} ${width - 20}, ${height - 7} ${width - 7}, ${height - 27}
${width - 7}, ${140 + (height - 167) / 2} ${width - 13}, ${135 + (height - 167) / 2}
${width - 13}, ${55 + (height - 167) / 2} ${width - 7}, ${50 + (height - 167) / 2}
${width - 7}, 50 ${width - 20}, 30 ${(width + titleWidth) / 2}, 30
${(width + titleWidth) / 2 - 20}, 7 ${(width - titleWidth) / 2 + 20}, 7
${(width - titleWidth) / 2}, 30 ${(width - titleWidth) / 2 + 20}, 52
${(width + titleWidth) / 2 - 20}, 52 ${(width + titleWidth) / 2}, 30
`"
/>
<polygon
:stroke="mergedColor[0]"
fill="transparent"
:points="`
${(width + titleWidth) / 2 - 5}, 30 ${(width + titleWidth) / 2 - 21}, 11
${(width + titleWidth) / 2 - 27}, 11 ${(width + titleWidth) / 2 - 8}, 34
`"
/>
<polygon
:stroke="mergedColor[0]"
fill="transparent"
:points="`
${(width - titleWidth) / 2 + 5}, 30 ${(width - titleWidth) / 2 + 22}, 49
${(width - titleWidth) / 2 + 28}, 49 ${(width - titleWidth) / 2 + 8}, 26
`"
/>
<polygon
:stroke="mergedColor[0]"
:fill="fade(mergedColor[1] || defaultColor[1], 30)"
:filter="`url(#${filterId})`"
:points="`
${(width + titleWidth) / 2 - 11}, 37 ${(width + titleWidth) / 2 - 32}, 11
${(width - titleWidth) / 2 + 23}, 11 ${(width - titleWidth) / 2 + 11}, 23
${(width - titleWidth) / 2 + 33}, 49 ${(width + titleWidth) / 2 - 22}, 49
`"
/>
<polygon
:filter="`url(#${filterId})`"
:fill="mergedColor[0]"
opacity="1"
:points="`
${(width - titleWidth) / 2 - 10}, 37 ${(width - titleWidth) / 2 - 31}, 37
${(width - titleWidth) / 2 - 25}, 46 ${(width - titleWidth) / 2 - 4}, 46
`"
>
<animate
attributeName="opacity"
values="1;0.7;1"
dur="2s"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<polygon
:filter="`url(#${filterId})`"
:fill="mergedColor[0]"
opacity="0.7"
:points="`
${(width - titleWidth) / 2 - 40}, 37 ${(width - titleWidth) / 2 - 61}, 37
${(width - titleWidth) / 2 - 55}, 46 ${(width - titleWidth) / 2 - 34}, 46
`"
>
<animate
attributeName="opacity"
values="0.7;0.4;0.7"
dur="2s"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<polygon
:filter="`url(#${filterId})`"
:fill="mergedColor[0]"
opacity="0.5"
:points="`
${(width - titleWidth) / 2 - 70}, 37 ${(width - titleWidth) / 2 - 91}, 37
${(width - titleWidth) / 2 - 85}, 46 ${(width - titleWidth) / 2 - 64}, 46
`"
>
<animate
attributeName="opacity"
values="0.5;0.2;0.5"
dur="2s"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<polygon
:filter="`url(#${filterId})`"
:fill="mergedColor[0]"
opacity="1"
:points="`
${(width + titleWidth) / 2 + 30}, 37 ${(width + titleWidth) / 2 + 9}, 37
${(width + titleWidth) / 2 + 3}, 46 ${(width + titleWidth) / 2 + 24}, 46
`"
>
<animate
attributeName="opacity"
values="1;0.7;1"
dur="2s"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<polygon
:filter="`url(#${filterId})`"
:fill="mergedColor[0]"
opacity="0.7"
:points="`
${(width + titleWidth) / 2 + 60}, 37 ${(width + titleWidth) / 2 + 39}, 37
${(width + titleWidth) / 2 + 33}, 46 ${(width + titleWidth) / 2 + 54}, 46
`"
>
<animate
attributeName="opacity"
values="0.7;0.4;0.7"
dur="2s"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<polygon
:filter="`url(#${filterId})`"
:fill="mergedColor[0]"
opacity="0.5"
:points="`
${(width + titleWidth) / 2 + 90}, 37 ${(width + titleWidth) / 2 + 69}, 37
${(width + titleWidth) / 2 + 63}, 46 ${(width + titleWidth) / 2 + 84}, 46
`"
>
<animate
attributeName="opacity"
values="0.5;0.2;0.5"
dur="2s"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<text
class="dv-border-box-11-title"
:x="`${width / 2}`"
y="32"
fill="#fff"
font-size="18"
text-anchor="middle"
dominant-baseline="middle"
>
{{ title }}
</text>
<polygon
:fill="mergedColor[0]"
:filter="`url(#${filterId})`"
:points="`
7, ${53 + (height - 167) / 2} 11, ${57 + (height - 167) / 2}
11, ${133 + (height - 167) / 2} 7, ${137 + (height - 167) / 2}
`"
/>
<polygon
:fill="mergedColor[0]"
:filter="`url(#${filterId})`"
:points="`
${width - 7}, ${53 + (height - 167) / 2} ${width - 11}, ${57 + (height - 167) / 2}
${width - 11}, ${133 + (height - 167) / 2} ${width - 7}, ${137 + (height - 167) / 2}
`"
/>
</svg>
<div class="border-box-content">
<slot></slot>
</div>
</div>
</template>
<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: 'DvBorderBox11',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
},
titleWidth: {
type: Number,
default: 250
},
title: {
type: String,
default: ''
}
},
data () {
const timestamp = Date.now()
return {
ref: 'border-box-11',
filterId: `borderr-box-11-filterId-${timestamp}`,
defaultColor: ['#8aaafb', '#1f33a2'],
mergedColor: []
}
},
watch: {
color () {
const { mergeColor } = this
mergeColor()
}
},
methods: {
mergeColor () {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
},
fade
},
mounted () {
const { mergeColor } = this
mergeColor()
}
}
</script>
<style lang="less">
.dv-border-box-11 {
position: relative;
width: 100%;
height: 100%;
.dv-border-svg-container {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
polyline {
fill: none;
stroke-width: 1;
}
}
.border-box-content {
position: relative;
width: 100%;
height: 100%;
}
}
</style>

5
src/components/borderBox12/index.js Normal file
View File

@ -0,0 +1,5 @@
import BorderBox12 from './src/main.vue'
export default function (Vue) {
Vue.component(BorderBox12.name, BorderBox12)
}

165
src/components/borderBox12/src/main.vue Normal file
View File

@ -0,0 +1,165 @@
<template>
<div class="dv-border-box-12" :ref="ref">
<svg class="dv-border-svg-container" :width="width" :height="height">
<defs>
<filter :id="filterId" height="150%" width="150%" x="-25%" y="-25%">
<feMorphology operator="dilate" radius="1" in="SourceAlpha" result="thicken" />
<feGaussianBlur in="thicken" stdDeviation="2" result="blurred" />
<feFlood :flood-color="fade(mergedColor[1] || defaultColor[1], 70)" result="glowColor">
<animate
attributeName="flood-color"
:values="`
${fade(mergedColor[1] || defaultColor[1], 70)};
${fade(mergedColor[1] || defaultColor[1], 30)};
${fade(mergedColor[1] || defaultColor[1], 70)};
`"
dur="3s"
begin="0s"
repeatCount="indefinite"
/>
</feFlood>
<feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored" />
<feMerge>
<feMergeNode in="softGlowColored"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<path
v-if="width && height"
fill="transparent"
stroke-width="2"
:stroke="mergedColor[0]"
:d="`
M15 5 L ${width - 15} 5 Q ${width - 5} 5, ${width - 5} 15
L ${width - 5} ${height - 15} Q ${width - 5} ${height - 5}, ${width - 15} ${height - 5}
L 15, ${height - 5} Q 5 ${height - 5} 5 ${height - 15} L 5 15
Q 5 5 15 5
`"
/>
<path
stroke-width="2"
fill="transparent"
stroke-linecap="round"
:filter="`url(#${filterId})`"
:stroke="mergedColor[1]"
:d="`M 20 5 L 15 5 Q 5 5 5 15 L 5 20`"
/>
<path
stroke-width="2"
fill="transparent"
stroke-linecap="round"
:filter="`url(#${filterId})`"
:stroke="mergedColor[1]"
:d="`M ${width - 20} 5 L ${width - 15} 5 Q ${width - 5} 5 ${width - 5} 15 L ${width - 5} 20`"
/>
<path
stroke-width="2"
fill="transparent"
stroke-linecap="round"
:filter="`url(#${filterId})`"
:stroke="mergedColor[1]"
:d="`
M ${width - 20} ${height - 5} L ${width - 15} ${height - 5}
Q ${width - 5} ${height - 5} ${width - 5} ${height - 15}
L ${width - 5} ${height - 20}
`"
/>
<path
stroke-width="2"
fill="transparent"
stroke-linecap="round"
:filter="`url(#${filterId})`"
:stroke="mergedColor[1]"
:d="`
M 20 ${height - 5} L 15 ${height - 5}
Q 5 ${height - 5} 5 ${height - 15}
L 5 ${height - 20}
`"
/>
</svg>
<div class="border-box-content">
<slot></slot>
</div>
</div>
</template>
<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: 'DvBorderBox12',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
}
},
data () {
const timestamp = +new Date()
return {
ref: 'border-box-12',
filterId: `borderr-box-12-filterId-${timestamp}`,
defaultColor: ['#2e6099', '#7ce7fd'],
mergedColor: []
}
},
watch: {
color () {
const { mergeColor } = this
mergeColor()
}
},
methods: {
mergeColor () {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
},
fade
},
mounted () {
const { mergeColor } = this
mergeColor()
}
}
</script>
<style lang="less">
.dv-border-box-12 {
position: relative;
width: 100%;
height: 100%;
.dv-border-svg-container {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
.border-box-content {
position: relative;
width: 100%;
height: 100%;
}
}
</style>

5
src/components/borderBox13/index.js Normal file
View File

@ -0,0 +1,5 @@
import BorderBox13 from './src/main.vue'
export default function (Vue) {
Vue.component(BorderBox13.name, BorderBox13)
}

111
src/components/borderBox13/src/main.vue Normal file
View File

@ -0,0 +1,111 @@
<template>
<div class="dv-border-box-13" :ref="ref">
<svg class="dv-border-svg-container" :width="width" :height="height">
<path
fill="transparent"
:stroke="mergedColor[0]"
:d="`
M 5 20 L 5 10 L 12 3 L 60 3 L 68 10
L ${width - 20} 10 L ${width - 5} 25
L ${width - 5} ${height - 5} L 20 ${height - 5}
L 5 ${height - 20} L 5 20
`"
/>
<path
fill="transparent"
stroke-width="3"
stroke-linecap="round"
stroke-dasharray="10, 5"
:stroke="mergedColor[0]"
:d="`M 16 9 L 61 9`"
/>
<path
fill="transparent"
:stroke="mergedColor[1]"
:d="`M 5 20 L 5 10 L 12 3 L 60 3 L 68 10`"
/>
<path
fill="transparent"
:stroke="mergedColor[1]"
:d="`M ${width - 5} ${height - 30} L ${width - 5} ${height - 5} L ${width - 30} ${height - 5}`"
/>
</svg>
<div class="border-box-content">
<slot></slot>
</div>
</div>
</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: 'DvBorderBox13',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
}
},
data () {
const timestamp = +new Date()
return {
ref: 'border-box-13',
defaultColor: ['#6586ec', '#2cf7fe'],
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-13 {
position: relative;
width: 100%;
height: 100%;
.dv-border-svg-container {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
.border-box-content {
position: relative;
width: 100%;
height: 100%;
}
}
</style>