Modify package structure

src/components/borderBox9/index.js

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

src/components/borderBox9/src/main.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="dv-border-box-9" :ref="ref">
+    <svg class="dv-svg-container">
+      <defs>
+        <linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" stop-color="#11eefd" />
+          <stop offset="100%" stop-color="#0078d2" />
+        </linearGradient>
+
+        <mask :id="maskId">
+          <polyline
+            stroke="#fff"
+            stroke-width="3"
+            fill="transparent"
+            :points="`8, ${height * 0.4} 8, 3, ${width * 0.4 + 7}, 3`"
+          />
+          <polyline
+            fill="#fff"
+            :points="
+              `8, ${height * 0.15} 8, 3, ${width * 0.1 + 7}, 3
+              ${width * 0.1}, 8 14, 8 14, ${height * 0.15 - 7}
+            `"
+          />
+
+          <polyline
+            stroke="#fff"
+            stroke-width="3"
+            fill="transparent"
+            :points="`${width * 0.5}, 3 ${width - 3}, 3, ${width - 3}, ${height * 0.25}`"
+          />
+          <polyline
+            fill="#fff"
+            :points="`
+              ${width * 0.52}, 3 ${width * 0.58}, 3
+              ${width * 0.58 - 7}, 9 ${width * 0.52 + 7}, 9
+            `"
+          />
+          <polyline
+            fill="#fff"
+            :points="`
+              ${width * 0.9}, 3 ${width - 3}, 3 ${width - 3}, ${height * 0.1}
+              ${width - 9}, ${height * 0.1 - 7} ${width - 9}, 9 ${width * 0.9 + 7}, 9
+            `"
+          />
+
+          <polyline
+            stroke="#fff"
+            stroke-width="3"
+            fill="transparent"
+            :points="`8, ${height * 0.5} 8, ${height - 3} ${width * 0.3 + 7}, ${height - 3}`"
+          />
+          <polyline
+            fill="#fff"
+            :points="`
+              8, ${height * 0.55} 8, ${height * 0.7}
+              2, ${height * 0.7 - 7} 2, ${height * 0.55 + 7}
+            `"
+          />
+
+          <polyline
+            stroke="#fff"
+            stroke-width="3"
+            fill="transparent"
+            :points="`${width * 0.35}, ${height - 3} ${width - 3}, ${height - 3} ${width - 3}, ${height * 0.35}`"
+          />
+          <polyline
+            fill="#fff"
+            :points="`
+              ${width * 0.92}, ${height - 3} ${width - 3}, ${height - 3} ${width - 3}, ${height * 0.8}
+              ${width - 9}, ${height * 0.8 + 7} ${width - 9}, ${height - 9} ${width * 0.92 + 7}, ${height - 9}
+            `"
+          />
+        </mask>
+      </defs>
+
+      <rect x="0" y="0" :width="width" :height="height" :fill="`url(#${gradientId})`" :mask="`url(#${maskId})`" />
+    </svg>
+
+    <div class="border-box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+export default {
+  name: 'DvBorderBox9',
+  mixins: [autoResize],
+  data () {
+    return {
+      ref: 'border-box-9',
+
+      gradientId: `border-box-9-gradient-${(new Date()).getTime()}`,
+      maskId: `border-box-9-mask-${(new Date()).getTime()}`
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.dv-border-box-9 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  svg {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0px;
+    top: 0px;
+  }
+
+  .border-box-content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>