diff --git a/src/components/decoration7/img/decoration.png b/src/components/decoration7/img/decoration.png
new file mode 100644
index 0000000..7404336
Binary files /dev/null and b/src/components/decoration7/img/decoration.png differ
diff --git a/src/components/decoration7/index.vue b/src/components/decoration7/index.vue
new file mode 100644
index 0000000..92fd037
--- /dev/null
+++ b/src/components/decoration7/index.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="decoration-7">
+    <img src="./img/decoration.png" />
+    <slot></slot>
+    <img class="reverse" src="./img/decoration.png" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Decoration7'
+}
+</script>
+
+<style lang="less">
+.decoration-7 {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  .reverse {
+    transform: rotate(180deg);
+  }
+}
+</style>
diff --git a/src/components/index.js b/src/components/index.js
index 15acbef..3108b80 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -12,6 +12,7 @@ import decoration3 from './decoration3/index'
 import decoration4 from './decoration4/index'
 import decoration5 from './decoration5/index'
 import decoration6 from './decoration6/index'
+import decoration7 from './decoration7/index'
 import loading from './loading/index.vue'
 
 import capsuleChart from './capsuleChart/index.vue'
@@ -44,6 +45,7 @@ export default function (Vue) {
   Vue.component('decoration4', decoration4)
   Vue.component('decoration5', decoration5)
   Vue.component('decoration6', decoration6)
+  Vue.component('decoration7', decoration7)
   Vue.component('loading', loading)
 
   Vue.component('capsuleChart', capsuleChart)