From 390f0c88f0067197fd2ee04c74943a276310f0cf Mon Sep 17 00:00:00 2001
From: jiaming <743192023@qq.com>
Date: Sat, 8 Dec 2018 19:05:03 +0800
Subject: [PATCH] add decoration 4

---
 src/components/decoration4/index.vue | 109 +++++++++++++++++++++++++++
 1 file changed, 109 insertions(+)
 create mode 100644 src/components/decoration4/index.vue

diff --git a/src/components/decoration4/index.vue b/src/components/decoration4/index.vue
new file mode 100644
index 0000000..362dc5b
--- /dev/null
+++ b/src/components/decoration4/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div :class="`decoration-4 ${reverse ? 'reverse' : 'normal'}`" :ref="ref">
+    <svg :class="`svg-container ${reverse ? 'ani-width' : 'ani-height'}`">
+      <template v-if="!reverse">
+        <polyline class="lighter-line" :points="`3, 5 3, ${height - 5}`" />
+        <polyline class="bolder-line" :points="`3, 5 3, ${height - 5}`" />
+      </template>
+
+      <template v-else>
+        <polyline class="lighter-line" :points="`5, 3 ${width - 5},3`" />
+        <polyline class="bolder-line" :points="`5, 3 ${width - 5},3`" />
+      </template>
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Decoration4',
+  data () {
+    return {
+      ref: `decoration-4-${(new Date()).getTime()}`,
+      width: 0,
+      height: 0
+    }
+  },
+  props: ['reverse'],
+  methods: {
+    init () {
+      const { $nextTick, $refs, ref } = this
+
+      $nextTick(e => {
+        this.width = $refs[ref].clientWidth
+        this.height = $refs[ref].clientHeight
+      })
+    }
+  },
+  mounted () {
+    const { init } = this
+
+    init()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import url('../../assets/style/index.less');
+
+.decoration-4 {
+
+  &.normal {
+    width: 6px;
+  }
+
+  &.reverse {
+    height: 6px;
+  }
+
+  .svg-container {
+
+    &.ani-height {
+      width: 100%;
+      height: 0%;
+      animation: ani-height 3s ease-in-out infinite;
+    }
+
+    &.ani-width {
+      width: 0%;
+      height: 100%;
+      animation: ani-width 3s ease-in-out infinite;
+    }
+
+    polyline {
+      fill: none;
+      stroke: fade(gray, 25);
+    }
+  }
+
+  .lighter-line {
+    stroke-width: 1px;
+  }
+
+  .bolder-line {
+    stroke-width: 3px;
+    stroke-dasharray: 20, 80;
+    stroke-dashoffset: -30;
+  }
+
+  @keyframes ani-height {
+    70% {
+      height: 100%;
+    }
+
+    100% {
+      height: 100%;
+    }
+  }
+
+  @keyframes ani-width {
+    70% {
+      width: 100%;
+    }
+
+    100% {
+      width: 100%;
+    }
+  }
+}
+</style>