diff --git a/src/components/decoration2/index.vue b/src/components/decoration2/index.vue
index 7665f9c..193cc7c 100644
--- a/src/components/decoration2/index.vue
+++ b/src/components/decoration2/index.vue
@@ -34,23 +34,25 @@ export default {
 </script>
 
 <style lang="less" scoped>
+@import url('../../assets/style/index.less');
+
 .decoration-2 {
 
   .reverse, .normal {
-    background-color: #3faacb;
+    background-color: @D2LC;
   }
 
   .normal {
     width: 0%;
     height: 1px;
-    border-right: 1px solid #fff;
+    border-right: 1px solid @D2TC;
     animation: normal-amt 6s ease-in-out infinite;
   }
 
   .reverse {
     width: 1px;
     height: 0%;
-    border-bottom: 1px solid #fff;
+    border-bottom: 1px solid @D2TC;
     animation: reverse-amt 6s ease-in-out infinite;
   }
 
diff --git a/src/components/decoration3/img/decoration.gif b/src/components/decoration3/img/decoration.gif
new file mode 100644
index 0000000..35b143e
Binary files /dev/null and b/src/components/decoration3/img/decoration.gif differ
diff --git a/src/components/decoration3/index.vue b/src/components/decoration3/index.vue
new file mode 100644
index 0000000..ce5ec5a
--- /dev/null
+++ b/src/components/decoration3/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="decoration-3">
+    <img src="./img/decoration.gif" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Decoration3'
+}
+</script>
+
+<style lang="less">
+.decoration-3 {
+
+  img {
+    width: 100%;
+  }
+}
+</style>