update dist and lib

2019-12-06 21:07:16 +08:00
parent aeb021e5e4
commit 6876dec1ca
43 changed files with 7026 additions and 3592 deletions
--- a/dist/datav.map.vue.js
+++ b/dist/datav.map.vue.js
--- a/dist/datav.min.vue.js
+++ b/dist/datav.min.vue.js
--- a/lib/components/borderBox1/src/main.vue
+++ b/lib/components/borderBox1/src/main.vue
@@ -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>
--- a/lib/components/borderBox10/src/main.css
+++ b/lib/components/borderBox10/src/main.css
@@ -2,7 +2,6 @@
  position: relative;
  width: 100%;
  height: 100%;
-  box-shadow: inset 0 0 25px 3px #1d48c4;
  border-radius: 6px;
 }
 .dv-border-box-10 .border {
--- a/lib/components/borderBox10/src/main.vue
+++ b/lib/components/borderBox10/src/main.vue
@@ -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>
--- a/lib/components/borderBox11/index.js
+++ b/lib/components/borderBox11/index.js
@@ -0,0 +1,6 @@
+import './src/main.css'
+import BorderBox11 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox11.name, BorderBox11)
+}
--- a/lib/components/borderBox11/src/main.css
+++ b/lib/components/borderBox11/src/main.css
@@ -0,0 +1,21 @@
+.dv-border-box-11 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.dv-border-box-11 .dv-border-svg-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+}
+.dv-border-box-11 .dv-border-svg-container polyline {
+  fill: none;
+  stroke-width: 1;
+}
+.dv-border-box-11 .border-box-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
--- a/lib/components/borderBox11/src/main.vue
+++ b/lib/components/borderBox11/src/main.vue
@@ -0,0 +1,268 @@
+<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>
--- a/lib/components/borderBox12/index.js
+++ b/lib/components/borderBox12/index.js
@@ -0,0 +1,6 @@
+import './src/main.css'
+import BorderBox12 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox12.name, BorderBox12)
+}
--- a/lib/components/borderBox12/src/main.css
+++ b/lib/components/borderBox12/src/main.css
@@ -0,0 +1,17 @@
+.dv-border-box-12 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.dv-border-box-12 .dv-border-svg-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+}
+.dv-border-box-12 .border-box-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
--- a/lib/components/borderBox12/src/main.vue
+++ b/lib/components/borderBox12/src/main.vue
@@ -0,0 +1,143 @@
+<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>
--- a/lib/components/borderBox13/index.js
+++ b/lib/components/borderBox13/index.js
@@ -0,0 +1,6 @@
+import './src/main.css'
+import BorderBox13 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox13.name, BorderBox13)
+}
--- a/lib/components/borderBox13/src/main.css
+++ b/lib/components/borderBox13/src/main.css
@@ -0,0 +1,17 @@
+.dv-border-box-13 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.dv-border-box-13 .dv-border-svg-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+}
+.dv-border-box-13 .border-box-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
--- a/lib/components/borderBox13/src/main.vue
+++ b/lib/components/borderBox13/src/main.vue
@@ -0,0 +1,89 @@
+<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>
--- a/lib/components/borderBox2/src/main.css
+++ b/lib/components/borderBox2/src/main.css
@@ -14,15 +14,6 @@
  fill: none;
  stroke-width: 1;
 }
-.dv-border-box-2 .dv-border-svg-container circle {
-  fill: #fff;
-}
-.dv-border-box-2 .dv-bb2-line1 {
-  stroke: #fff;
-}
-.dv-border-box-2 .dv-bb2-line2 {
-  stroke: rgba(255, 255, 255, 0.6);
-}
 .dv-border-box-2 .border-box-content {
  position: relative;
  width: 100%;
--- a/lib/components/borderBox2/src/main.vue
+++ b/lib/components/borderBox2/src/main.vue
@@ -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>
--- a/lib/components/borderBox3/src/main.css
+++ b/lib/components/borderBox3/src/main.css
@@ -12,7 +12,6 @@
 }
 .dv-border-box-3 .dv-border-svg-container polyline {
  fill: none;
-  stroke: #2862b7;
 }
 .dv-border-box-3 .dv-bb3-line1 {
  stroke-width: 3;
--- a/lib/components/borderBox3/src/main.vue
+++ b/lib/components/borderBox3/src/main.vue
@@ -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>
--- a/lib/components/borderBox4/src/main.css
+++ b/lib/components/borderBox4/src/main.css
@@ -16,12 +16,6 @@
 .dv-border-box-4 .dv-border-svg-container polyline {
  fill: none;
 }
-.dv-border-box-4 .sred {
-  stroke: red;
-}
-.dv-border-box-4 .sblue {
-  stroke: rgba(0, 0, 255, 0.8);
-}
 .dv-border-box-4 .sw1 {
  stroke-width: 1;
 }
@@ -30,48 +24,38 @@
  stroke-linecap: round;
 }
 .dv-border-box-4 .dv-bb4-line-1 {
-  stroke: red;
  stroke-width: 1;
 }
 .dv-border-box-4 .dv-bb4-line-2 {
-  stroke: rgba(0, 0, 255, 0.8);
  stroke-width: 1;
 }
 .dv-border-box-4 .dv-bb4-line-3 {
-  stroke: red;
  stroke-width: 3px;
  stroke-linecap: round;
 }
 .dv-border-box-4 .dv-bb4-line-4 {
-  stroke: red;
  stroke-width: 3px;
  stroke-linecap: round;
 }
 .dv-border-box-4 .dv-bb4-line-5 {
-  stroke: red;
  stroke-width: 1;
 }
 .dv-border-box-4 .dv-bb4-line-6 {
-  stroke: rgba(0, 0, 255, 0.8);
  stroke-width: 1;
 }
 .dv-border-box-4 .dv-bb4-line-7 {
-  stroke: rgba(0, 0, 255, 0.8);
  stroke-width: 1;
 }
 .dv-border-box-4 .dv-bb4-line-8 {
-  stroke: rgba(0, 0, 255, 0.8);
  stroke-width: 3px;
  stroke-linecap: round;
 }
 .dv-border-box-4 .dv-bb4-line-9 {
-  stroke: red;
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-dasharray: 100 250;
 }
 .dv-border-box-4 .dv-bb4-line-10 {
-  stroke: rgba(0, 0, 255, 0.8);
  stroke-width: 1;
  stroke-dasharray: 80 270;
 }
--- a/lib/components/borderBox4/src/main.vue
+++ b/lib/components/borderBox4/src/main.vue
@@ -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>
--- a/lib/components/borderBox5/src/main.css
+++ b/lib/components/borderBox5/src/main.css
@@ -16,22 +16,17 @@
 .dv-border-box-5 .dv-svg-container polyline {
  fill: none;
 }
-.dv-border-box-5 .dv-bb5-line-1 {
-  stroke-width: 1;
-  stroke: rgba(255, 255, 255, 0.35);
-}
+.dv-border-box-5 .dv-bb5-line-1,
 .dv-border-box-5 .dv-bb5-line-2 {
-  stroke: rgba(255, 255, 255, 0.2);
+  stroke-width: 1;
 }
 .dv-border-box-5 .dv-bb5-line-3,
 .dv-border-box-5 .dv-bb5-line-6 {
  stroke-width: 5;
-  stroke: rgba(255, 255, 255, 0.15);
 }
 .dv-border-box-5 .dv-bb5-line-4,
 .dv-border-box-5 .dv-bb5-line-5 {
  stroke-width: 2;
-  stroke: rgba(255, 255, 255, 0.15);
 }
 .dv-border-box-5 .border-box-content {
  position: relative;
--- a/lib/components/borderBox5/src/main.vue
+++ b/lib/components/borderBox5/src/main.vue
@@ -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>
--- a/lib/components/borderBox6/src/main.css
+++ b/lib/components/borderBox6/src/main.css
@@ -10,13 +10,9 @@
  width: 100%;
  height: 100%;
 }
-.dv-border-box-6 .dv-svg-container circle {
-  fill: gray;
-}
 .dv-border-box-6 .dv-svg-container polyline {
  fill: none;
  stroke-width: 1;
-  stroke: rgba(255, 255, 255, 0.35);
 }
 .dv-border-box-6 .border-box-content {
  position: relative;
--- a/lib/components/borderBox6/src/main.vue
+++ b/lib/components/borderBox6/src/main.vue
@@ -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>
--- a/lib/components/borderBox7/src/main.css
+++ b/lib/components/borderBox7/src/main.css
@@ -2,8 +2,6 @@
  position: relative;
  width: 100%;
  height: 100%;
-  box-shadow: inset 0 0 40px rgba(128, 128, 128, 0.3);
-  border: 1px solid rgba(128, 128, 128, 0.3);
 }
 .dv-border-box-7 .dv-svg-container {
  position: absolute;
@@ -17,11 +15,9 @@
  stroke-linecap: round;
 }
 .dv-border-box-7 .dv-bb7-line-width-2 {
-  stroke: rgba(128, 128, 128, 0.3);
  stroke-width: 2;
 }
 .dv-border-box-7 .dv-bb7-line-width-5 {
-  stroke: rgba(128, 128, 128, 0.5);
  stroke-width: 5;
 }
 .dv-border-box-7 .border-box-content {
--- a/lib/components/borderBox7/src/main.vue
+++ b/lib/components/borderBox7/src/main.vue
@@ -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,13 +26,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: '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>
--- a/lib/components/borderBox8/src/main.vue
+++ b/lib/components/borderBox8/src/main.vue
@@ -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>
--- a/lib/components/borderBox9/src/main.vue
+++ b/lib/components/borderBox9/src/main.vue
@@ -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>
--- a/lib/components/decoration1/src/main.vue
+++ b/lib/components/decoration1/src/main.vue
@@ -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>
--- a/lib/components/decoration10/src/main.vue
+++ b/lib/components/decoration10/src/main.vue
@@ -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>
--- a/lib/components/decoration11/index.js
+++ b/lib/components/decoration11/index.js
@@ -0,0 +1,6 @@
+import './src/main.css'
+import Decoration11 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Decoration11.name, Decoration11)
+}
--- a/lib/components/decoration11/src/main.css
+++ b/lib/components/decoration11/src/main.css
@@ -0,0 +1,16 @@
+.dv-decoration-11 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+.dv-decoration-11 .decoration-content {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
--- a/lib/components/decoration11/src/main.vue
+++ b/lib/components/decoration11/src/main.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="dv-decoration-11" :ref="ref">
+    <svg :width="width" :height="height">
+      <polygon
+        :fill="fade(mergedColor[1] || defaultColor[1], 10)"
+        :stroke="mergedColor[1]"
+        :points="`20 10, 25 4, 55 4 60 10`"
+      />
+
+      <polygon
+        :fill="fade(mergedColor[1] || defaultColor[1], 10)"
+        :stroke="mergedColor[1]"
+        :points="`20 ${height - 10}, 25 ${height - 4}, 55 ${height - 4} 60 ${height - 10}`"
+      />
+
+      <polygon
+        :fill="fade(mergedColor[1] || defaultColor[1], 10)"
+        :stroke="mergedColor[1]"
+        :points="`${width - 20} 10, ${width - 25} 4, ${width - 55} 4 ${width - 60} 10`"
+      />
+
+      <polygon
+        :fill="fade(mergedColor[1] || defaultColor[1], 10)"
+        :stroke="mergedColor[1]"
+        :points="`${width - 20} ${height - 10}, ${width - 25} ${height - 4}, ${width - 55} ${height - 4} ${width - 60} ${height - 10}`"
+      />
+
+      <polygon
+        :fill="fade(mergedColor[0] || defaultColor[0], 20)"
+        :stroke="mergedColor[0]"
+        :points="`
+          20 10, 5 ${height / 2} 20 ${height - 10}
+          ${width - 20} ${height - 10} ${width - 5} ${height / 2} ${width - 20} 10
+        `"
+      />
+
+      <polyline
+        fill="transparent"
+        :stroke="fade(mergedColor[0] || defaultColor[0], 70)"
+        :points="`25 18, 15 ${height / 2} 25 ${height - 18}`"
+      />
+
+      <polyline
+        fill="transparent"
+        :stroke="fade(mergedColor[0] || defaultColor[0], 70)"
+        :points="`${width - 25} 18, ${width - 15} ${height / 2} ${width - 25} ${height - 18}`"
+      />
+    </svg>
+
+    <div class="decoration-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: 'DvDecoration11',
+  mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    }
+  },
+  data () {
+    const timestamp = Date.now()
+    return {
+      ref: 'decoration-11',
+
+      defaultColor: ['#1a98fc', '#2cf7fe'],
+
+      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>
--- a/lib/components/decoration2/src/main.vue
+++ b/lib/components/decoration2/src/main.vue
@@ -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>
--- a/lib/components/decoration3/src/main.vue
+++ b/lib/components/decoration3/src/main.vue
@@ -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>
--- a/lib/components/decoration4/src/main.vue
+++ b/lib/components/decoration4/src/main.vue
@@ -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>
--- a/lib/components/decoration5/src/main.vue
+++ b/lib/components/decoration5/src/main.vue
@@ -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>
--- a/lib/components/decoration6/src/main.vue
+++ b/lib/components/decoration6/src/main.vue
@@ -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>
--- a/lib/components/decoration7/src/main.vue
+++ b/lib/components/decoration7/src/main.vue
@@ -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,7 +33,43 @@
 </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>
--- a/lib/components/decoration8/src/main.vue
+++ b/lib/components/decoration8/src/main.vue
@@ -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>
--- a/lib/components/decoration9/src/main.vue
+++ b/lib/components/decoration9/src/main.vue
@@ -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>
--- a/lib/components/scrollBoard/src/main.vue
+++ b/lib/components/scrollBoard/src/main.vue
@@ -134,6 +134,12 @@ export default {
         * @default index = false
         */
        index: false,
+        /**
+         * @description index Header
+         * @type {String}
+         * @default indexHeader = '#'
+         */
+        indexHeader: '#',
        /**
         * @description Carousel type
         * @type {String}
@@ -217,7 +223,7 @@ export default {
      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
    },
    calcHeaderData () {
-      let { header, index } = this.mergedConfig
+      let { header, index, indexHeader} = this.mergedConfig

      if (!header.length) {
        this.header = []
@@ -227,7 +233,7 @@ export default {

      header = [...header]

-      if (index) header.unshift('#')
+      if (index) header.unshift(indexHeader)

      this.header = header
    },
--- a/lib/index.js
+++ b/lib/index.js
@@ -4,6 +4,9 @@
 export { default as activeRingChart } from './components/activeRingChart/index'
 export { default as borderBox1 } from './components/borderBox1/index'
 export { default as borderBox10 } from './components/borderBox10/index'
+export { default as borderBox11 } from './components/borderBox11/index'
+export { default as borderBox12 } from './components/borderBox12/index'
+export { default as borderBox13 } from './components/borderBox13/index'
 export { default as borderBox2 } from './components/borderBox2/index'
 export { default as borderBox3 } from './components/borderBox3/index'
 export { default as borderBox4 } from './components/borderBox4/index'
@@ -17,6 +20,7 @@ export { default as charts } from './components/charts/index'
 export { default as conicalColumnChart } from './components/conicalColumnChart/index'
 export { default as decoration1 } from './components/decoration1/index'
 export { default as decoration10 } from './components/decoration10/index'
+export { default as decoration11 } from './components/decoration11/index'
 export { default as decoration2 } from './components/decoration2/index'
 export { default as decoration3 } from './components/decoration3/index'
 export { default as decoration4 } from './components/decoration4/index'
@@ -50,6 +54,9 @@ import borderBox7 from './components/borderBox7/index'
 import borderBox8 from './components/borderBox8/index'
 import borderBox9 from './components/borderBox9/index'
 import borderBox10 from './components/borderBox10/index'
+import borderBox11 from './components/borderBox11/index'
+import borderBox12 from './components/borderBox12/index'
+import borderBox13 from './components/borderBox13/index'

 // decoration
 import decoration1 from './components/decoration1/index'
@@ -62,6 +69,7 @@ import decoration7 from './components/decoration7/index'
 import decoration8 from './components/decoration8/index'
 import decoration9 from './components/decoration9/index'
 import decoration10 from './components/decoration10/index'
+import decoration11 from './components/decoration11/index'

 // charts
 import charts from './components/charts/index'
@@ -94,6 +102,9 @@ export default function (Vue) {
  Vue.use(borderBox8)
  Vue.use(borderBox9)
  Vue.use(borderBox10)
+  Vue.use(borderBox11)
+  Vue.use(borderBox12)
+  Vue.use(borderBox13)

  // decoration
  Vue.use(decoration1)
@@ -106,6 +117,7 @@ export default function (Vue) {
  Vue.use(decoration8)
  Vue.use(decoration9)
  Vue.use(decoration10)
+  Vue.use(decoration11)

  // charts
  Vue.use(charts)