新增样式

src/assets/styles/base.scss

@@ -96,9 +96,6 @@ html {
 }
 
 
-
-
-
 /*@media (min-width:1024px) {
 	body { font-size: 18px; }
 }

src/assets/styles/common.css

@@ -2848,7 +2848,7 @@ font-size: 14px;
         }
 
 .trigle .back_img{   
-        position: absolute;
+    position: absolute;
     top: 195px;
     width: 100%;
     height: 300px;

src/assets/styles/common.scss

@@ -0,0 +1,107 @@
+/*动画组件通用样式*/
+.wrap-container {
+  position: absolute;
+  overflow: hidden;
+  display: block;
+  cursor: default;
+  z-index: 0;
+  left: 0; 
+  top: 0; 
+  width: 100%; 
+  height: 100%;
+}
+
+%sn-container-before {
+  content: "";
+  position: absolute;
+  top: -2px;
+  width: 5px;
+  height: 5px;
+  border-color: #0a6aff;
+  border-style: solid;
+  border-top-width: 2px;
+  border-bottom-width: 0;
+}
+.sn-container {
+  position: absolute;
+  width: 500px; 
+  height: 550px;
+  border: 2px solid rgba(92,255,255,0.1);
+  background: rgba(10,106,255,0.1) url(../../assets/img/wg.png) repeat 50% 50% !important;
+  background-blend-mode: screen;
+  overflow: visible;
+  &:before {
+    @extend %sn-container-before;
+    left: -2px;
+    border-left-width: 2px;
+    border-right-width: 0;
+  }
+  &:after {
+    @extend %sn-container-before;
+    right: -2px;
+    border-left-width: 0;
+    border-right-width: 2px;
+  }
+
+  %sn-content-before {
+    content: "";
+    position: absolute;
+    bottom: -2px;
+    width: 5px;
+    height: 5px;
+    border-color: #0a6aff;
+    border-style: solid;
+    border-top-width: 0;
+    border-bottom-width: 2px;
+  }
+  .sn-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    .sn-title {
+      position: absolute;
+      height: 26px;
+      font-size: 16px;
+      color: #00c2ff;
+      line-height: 26px;
+      padding: 0 0 0 20px;
+      left: 10px;
+      right: 10px;
+      top: 10px;
+      &:before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 50%;
+        margin-top: -7px;
+        width: 14px;
+        height: 14px;
+        background: url(../../assets/img/sn-title.png) no-repeat 0% 0%;
+      }
+    }
+    &:before {
+      @extend %sn-content-before;
+      left: -2px;
+      border-left-width: 2px;
+      border-right-width: 0;
+    }
+    &:after {
+      @extend %sn-content-before;
+      right: -2px;
+      border-left-width: 0;
+      border-right-width: 2px;
+    }
+
+    .sn-body {
+      position: absolute;
+      top: 40px;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      
+    }
+    
+  }
+}

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/index.js

@@ -1,11 +1,15 @@
-import bgAnimation from './bgAnimation'
-import modal from './modal'
-import sinan from './sinan'
+import bgAnimation from './bgAnimation' // 登录界面背景图动画
+import modal from './modal' // 自定义全局模态框
+import sinan from './sinan' // 司南排名图
+import rimian from './rimian' // 日冕排名图
+import pyramid from './pyramid' // 金字塔数据图
 
 const components = {
   bgAnimation,
   modal,
-  sinan
+  sinan,
+  rimian,
+  pyramid
   
 };
 

src/components/pyramid/index.vue

@@ -0,0 +1,164 @@
+<template>
+  <!-- 金字塔数据 -->
+  <div class="wrap-container trigle"> 
+    <div class="back_img3"></div> 
+    <div class="back_img"></div> 
+    <div class="back_img1"></div> 
+    <div class="back_img2"></div>
+    <ul class="first"> 
+      <li></li>
+      <li></li>
+      <li></li> 
+      <li></li>
+      <li></li>
+      <li></li> 
+    </ul> 
+    <ul class="seconed"> 
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li> 
+    </ul> 
+    <ul class="third"> 
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li> 
+    </ul> 
+    <ul class="four"> 
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li> 
+    </ul>
+
+    <div class="detail detail_1"> 
+      <div class="detail_txt detail_txt1"> 
+        <span class="precent_txt precent_txt1"> 
+          <div class="chartsdom" style="-webkit-tap-highlight-color: transparent; user-select: none; background: transparent;">
+            <div style="position: relative; overflow: hidden; width: 50px; height: 50px; padding: 0px; margin: 0px; border-width: 0px;">
+              <canvas width="50" height="50" style="position: absolute; left: 0px; top: 0px; width: 50px; height: 50px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
+            </div>
+          </div> 
+        </span>
+
+        <div class="txt_right txt_right1"> 
+          <span> 
+            <div class="f_div aharrow_up">注册护士</div> 
+            <div class="s_div s_div1">872人</div> 
+          </span> 
+        </div>
+      </div>
+
+      <div class="arrow_contain arrow_contain1"> 
+        <span class="arrow arrow_1"></span> 
+      </div>
+    </div>
+    
+    <div class="detail detail_2"> 
+      <div class="detail_txt detail_txt2"> 
+        <span class="precent_txt precent_txt2"> 
+          <div class="chartsdom" style="-webkit-tap-highlight-color: transparent; user-select: none; background: transparent;">
+            <div style="position: relative; overflow: hidden; width: 50px; height: 50px; padding: 0px; margin: 0px; border-width: 0px;">
+              <canvas width="50" height="50" style="position: absolute; left: 0px; top: 0px; width: 50px; height: 50px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
+            </div>
+          </div> 
+        </span>
+        <div class="txt_right txt_right2"> 
+          <span> 
+            <div class="f_div aharrow_up">职业（助理）医师</div> 
+            <div class="s_div s_div2">872人</div> 
+          </span> 
+        </div> 
+      </div>
+      <div class="arrow_contain arrow_contain2"> 
+        <span class="arrow arrow_2"></span> 
+      </div> 
+    </div>
+
+    <div class="detail detail_3"> 
+      <div class="detail_txt detail_txt3"> 
+       <span class="precent_txt precent_txt3"> 
+          <div class="chartsdom" style="-webkit-tap-highlight-color: transparent; user-select: none; background: transparent;">
+            <div style="position: relative; overflow: hidden; width: 50px; height: 50px; padding: 0px; margin: 0px; border-width: 0px;">
+              <canvas width="50" height="50" style="position: absolute; left: 0px; top: 0px; width: 50px; height: 50px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
+            </div>
+          </div> 
+        </span>
+
+        <div class="txt_right txt_right3"> 
+          <span> 
+            <div class="f_div aharrow_down">技师</div> 
+            <div class="s_div s_div3">126人</div> 
+          </span> 
+        </div> 
+      </div>
+
+      <div class="arrow_contain arrow_contain3"> 
+        <span class="arrow arrow_3"></span> 
+      </div> 
+    </div>
+
+    <div class="detail detail_4"> 
+      <div class="detail_txt detail_txt4"> 
+        <span class="precent_txt precent_txt4"> 
+          <div class="chartsdom" style="-webkit-tap-highlight-color: transparent; user-select: none; background: transparent;">
+            <div style="position: relative; overflow: hidden; width: 50px; height: 50px; padding: 0px; margin: 0px; border-width: 0px;">
+              <canvas data-zr-dom-id="zr_0" width="50" height="50" style="position: absolute; left: 0px; top: 0px; width: 50px; height: 50px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
+            </div>
+          </div> 
+        </span>
+        <div class="txt_right txt_right4"> 
+          <span> 
+            <div class="f_div aharrow_down">药师</div> 
+            <div class="s_div s_div4">46人</div> 
+          </span> 
+        </div> 
+      </div>
+      <div class="arrow_contain arrow_contain4"> 
+        <span class="arrow arrow_4"></span> 
+      </div> 
+    </div> 
+
+  </div>
+
+    
+</template>
+
+<script>
+export default {
+  name: "pyramid",
+  data() {
+    return {
+      timer: null,
+      number: null,
+      
+    }
+  },
+  mounted() {
+    
+  },
+  methods: {
+    
+  },
+  beforeDestroy() {
+    
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.trigle {
+  left: 600px; 
+  top: 150px; 
+  width: 720px; 
+  height: 500px;
+}
+
+</style>

src/components/rimian/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <!-- 日冕排名图 -->
+  <div class="wrap-container sn-container"> 
+    <div class="sn-content"> 
+      <div class="sn-title">日冕排名图</div> 
+      <div class="sn-body"> 
+        <div class="wrap-container" style="height: 90%"> 
+          <canvas width="496" height="455" style="width: 496px; height: 455px;"></canvas> 
+        </div> 
+      </div> 
+    </div>   
+  </div>
+</template>
+
+<script>
+export default {
+  name: "rimian",
+  data() {
+    return {
+      
+      
+    }
+  },
+  mounted() {
+    
+  },
+  methods: {
+    
+  },
+  beforeDestroy() {
+    
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.sn-container {
+  left: 1370px;
+  top: 110px;
+}
+</style>

src/components/sinan/index.vue

@@ -64,7 +64,7 @@ export default {
         itemNum: 258,
         dataItem: 1288,
         dataSize: 12306,
-        workUnit: '农业局'
+        workUnit: '税务局'
       },{
         id: 2,
         itemNum: 568,
@@ -76,7 +76,7 @@ export default {
         itemNum: 208,
         dataItem: 1755,
         dataSize: 12043,
-        workUnit: '税务局'
+        workUnit: '农业局'
       },{
         id: 4,
         itemNum: 358,
@@ -114,662 +114,559 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.wrap-container {
-  position: absolute;
-  overflow: hidden;
-  display: block;
-  cursor: default;
-  z-index: 0;
-  left: 0; 
-  top: 0; 
-  width: 100%; 
-  height: 100%;
-}
-
-%sn-container-before {
-  content: "";
-  position: absolute;
-  top: -2px;
-  width: 5px;
-  height: 5px;
-  border-color: #0a6aff;
-  border-style: solid;
-  border-top-width: 2px;
-  border-bottom-width: 0;
-}
 .sn-container {
-  position: absolute;
   left: 50px; 
   top: 110px; 
-  width: 500px; 
-  height: 550px;
-  border: 2px solid rgba(92,255,255,0.1);
-  background: rgba(10,106,255,0.1) url(../../assets/img/wg.png) repeat 50% 50% !important;
-  background-blend-mode: screen;
-  overflow: visible;
-  &:before {
-    @extend %sn-container-before;
-    left: -2px;
-    border-left-width: 2px;
-    border-right-width: 0;
-  }
-  &:after {
-    @extend %sn-container-before;
-    right: -2px;
-    border-left-width: 0;
-    border-right-width: 2px;
-  }
-
-  %sn-content-before {
-    content: "";
-    position: absolute;
-    bottom: -2px;
-    width: 5px;
-    height: 5px;
-    border-color: #0a6aff;
-    border-style: solid;
-    border-top-width: 0;
-    border-bottom-width: 2px;
-  }
-  .sn-content {
+  .pd-main {
     position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
     height: 100%;
-    .sn-title {
+    width: 100%;
+    [class^=chart] {
       position: absolute;
-      height: 26px;
-      font-size: 16px;
-      color: #00c2ff;
-      line-height: 26px;
-      padding: 0 0 0 20px;
-      left: 10px;
-      right: 10px;
-      top: 10px;
-      &:before {
-        content: "";
-        position: absolute;
-        left: 0;
-        top: 50%;
-        margin-top: -7px;
-        width: 14px;
-        height: 14px;
-        background: url(../../assets/img/sn-title.png) no-repeat 0% 0%;
-      }
-    }
-    &:before {
-      @extend %sn-content-before;
-      left: -2px;
-      border-left-width: 2px;
-      border-right-width: 0;
+      -webkit-transform-origin: left top;
+      -moz-transform-origin: left top;
+      -ms-transform-origin: left top;
+      -o-transform-origin: left top;
+      transform-origin: left top;
     }
-    &:after {
-      @extend %sn-content-before;
-      right: -2px;
-      border-left-width: 0;
-      border-right-width: 2px;
+    .chart-1 {
+      width: 500px;
+      height: 410px;
+      top:55%;
+      left:50%;
+      -webkit-transform:translate(-50%,-50%);
+      -moz-transform:translate(-50%,-50%);
+      -ms-transform:translate(-50%,-50%);
+      -o-transform:translate(-50%,-50%);
+      transform:translate(-50%,-50%);
     }
 
-    .sn-body {
-      position: absolute;
-      top: 40px;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      .pd-main {
+    .compass {
+      width: 100%;
+      height: 100%;
+      -webkit-transform: scale(0.9);
+      -moz-transform: scale(0.9);
+      -ms-transform: scale(0.9);
+      -o-transform: scale(0.9);
+      transform: scale(0.9);
+      [class^=compass-bg-] {
+        position: absolute;
+        bottom: 0;
+      }
+
+      %compass-bg {
         position: absolute;
+        bottom: 0px;
+        left: 50%;
+        -webkit-transform: rotateX(-80deg) rotateZ(45deg) rotateY(0deg);
+        -moz-transform: rotateX(-80deg) rotateZ(45deg) rotateY(0deg);
+        transform: rotateX(-80deg) rotateZ(45deg) rotateY(0deg);
+      }
+      .compass-bg-1 {
+        @extend %compass-bg;
+        margin-left: -250px;
+        bottom: -200px;
+        width: 500px;
+        height: 500px;
+        background: -webkit-repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
+        background: -moz-repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
+        background: -o-repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
+        background: repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
+        display: none;
+      }
+      .compass-bg-2 {
+        @extend %compass-bg;
+        margin-left: -220px;
+        bottom: -170px;
+        width: 440px;
+        height: 440px;
+        background: -webkit-repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
+        background: -moz-repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
+        background: -o-repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
+        background: repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
+        display: none;
+      }
+      .compass-bg-3 {
+        @extend %compass-bg;
+        margin-left: -190px;
+        bottom: -140px;
+        width: 380px;
+        height: 380px;
+        background: -webkit-repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
+        background: -moz-repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
+        background: -o-repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
+        background: repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
+      }
+      .compass-bg-4 {
+        @extend %compass-bg;
+        margin-left: -160px;
+        bottom: -110px;
+        width: 320px;
+        height: 320px;
+        background: -webkit-repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
+        background: -moz-repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
+        background: -o-repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
+        background: repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
+      }
+      .compass-bg-5 {
+        @extend %compass-bg;
+        margin-left: -130px;
+        bottom: -80px;
+        width: 260px;
+        height: 260px;
+        -webkit-box-shadow: inset 0 0 10px 10px rgba(44, 183, 190, 0.8);
+        -moz-box-shadow: inset 0 0 10px 10px rgba(44, 183, 190, 0.8);
+        box-shadow: inset 0 0 10px 10px rgba(44, 183, 190, 0.8);
+      }
+      .compass-bg-6 {
+        @extend %compass-bg;
+        margin-left: -100px;
+        bottom: -50px;
+        width: 200px;
+        height: 200px;
+        background: -webkit-repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
+        background: -moz-repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
+        background: -o-repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
+        background: repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
+        display: none;
+      }
+      .compass-bg-7 {
+        @extend %compass-bg;
+        margin-left: -70px;
+        bottom: -20px;
+        width: 140px;
+        height: 140px;
+        background: -webkit-repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
+        background: -moz-repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
+        background: -o-repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
+        background: repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
+        -webkit-animation: bgshadow 3s linear infinite;     
+        -moz-animation: bgshadow 3s linear infinite;
+        -o-animation: bgshadow 3s linear infinite;
+        animation: bgshadow 3s linear infinite;
+      }
+
+      .compass-bg-c-1 {
+        width: 100%;
         height: 100%;
+        background: url(../../assets/img/chart1/compass-bg-1.png) no-repeat 50% 345px;
+      }
+      .compass-bg-c-2 {
         width: 100%;
-        [class^=chart] {
-          position: absolute;
-          -webkit-transform-origin: left top;
-          -moz-transform-origin: left top;
-          -ms-transform-origin: left top;
-          -o-transform-origin: left top;
-          transform-origin: left top;
+        height: 100%;
+        background: url(../../assets/img/chart1/compass-bg-2.png) no-repeat 65% 146px;
+        opacity: 0.8;
+        -webkit-animation: fadebg 3s linear infinite;
+        -moz-animation: fadebg 3s linear infinite;
+        -o-animation: fadebg 3s linear infinite;
+        animation: fadebg 3s linear infinite;
+      }
+      .compass-bg-c-3 {
+        width: 100%;
+        height: 100%;
+        background: url(../../assets/img/chart1/compass-bg-3.png) no-repeat 50% 227px;
+      }
+      .compass-bg-c-4 {
+        width: 100%;
+        height: 100%;
+        background: url(../../assets/img/chart1/compass-bg-4.png) no-repeat 50% 63px;
+        -webkit-animation: numberfade 5s linear infinite;
+        -moz-animation: numberfade 5s linear infinite;
+        -o-animation: numberfade 5s linear infinite;
+        animation: numberfade 5s linear infinite;
+      }
+
+      .compass-text {
+        position: absolute;
+        overflow: hidden;
+        left: 50%;
+        margin-left: -60px;
+        font-size: 12px;
+        background-color: rgba(0, 71, 157, 0.4);
+        padding: 5px 10px;
+        color: #00c2ff;
+        -webkit-border-radius: 6px;
+        -moz-border-radius: 6px;
+        border-radius: 6px;
+        line-height: 1.5;
+        /*-webkit-transform: scale(0.8);
+        -moz-transform: scale(0.8);
+        -ms-transform: scale(0.8);
+        -o-transform: scale(0.8);
+        transform: scale(0.8);*/
+        display: none;
+        &.compass-text-1 {
+          top: -77px;
+          left: 48px;
         }
-        .chart-1 {
-          width: 500px;
-          height: 410px;
-          top:55%;
-          left:50%;
-          -webkit-transform:translate(-50%,-50%);
-          -moz-transform:translate(-50%,-50%);
-          -ms-transform:translate(-50%,-50%);
-          -o-transform:translate(-50%,-50%);
-          transform:translate(-50%,-50%);
+        &.compass-text-2 {
+          top: -35px;
+          left: 152px;
         }
-
-        .compass {
-          width: 100%;
-          height: 100%;
-          -webkit-transform: scale(0.9);
-          -moz-transform: scale(0.9);
-          -ms-transform: scale(0.9);
-          -o-transform: scale(0.9);
-          transform: scale(0.9);
-          [class^=compass-bg-] {
-            position: absolute;
-            bottom: 0;
+        &.compass-text-3 {
+          top: 5px;
+          left: 250px;
+        }
+        &.compass-text-4 {
+          top: 49px;
+          left: 350px;
+        }
+        &.compass-text-5 {
+          top: 88px;
+          left: 450px;
+        }
+        &.compass-text-6 {
+          color: #d57a31;
+          bottom: -945px;
+          -webkit-animation-delay: 25s;
+          -moz-animation-delay: 25s;
+          -o-animation-delay: 25s;
+          animation-delay: 25s;
+        }
+        &.compass-text-7 {
+          color: #d57a31;
+          bottom: -1150px;
+          -webkit-animation-delay: 30s;
+          -moz-animation-delay: 30s;
+          -o-animation-delay: 30s;
+          animation-delay: 30s;
+        }
+        %span-nth-child {
+          margin-top: 0px;
+        }
+        span {
+          display: block;
+          &:nth-child(1) {
+            @extend %span-nth-child;
           }
-
-          %compass-bg {
-            position: absolute;
-            bottom: 0px;
-            left: 50%;
-            -webkit-transform: rotateX(-80deg) rotateZ(45deg) rotateY(0deg);
-            -moz-transform: rotateX(-80deg) rotateZ(45deg) rotateY(0deg);
-            transform: rotateX(-80deg) rotateZ(45deg) rotateY(0deg);
+          &:nth-child(2) {
+            @extend %span-nth-child;
           }
-          .compass-bg-1 {
-            @extend %compass-bg;
-            margin-left: -250px;
-            bottom: -200px;
-            width: 500px;
-            height: 500px;
-            background: -webkit-repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
-            background: -moz-repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
-            background: -o-repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
-            background: repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
-            display: none;
+          &:nth-child(3) {
+            @extend %span-nth-child;
           }
-          .compass-bg-2 {
-            @extend %compass-bg;
-            margin-left: -220px;
-            bottom: -170px;
-            width: 440px;
-            height: 440px;
-            background: -webkit-repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
-            background: -moz-repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
-            background: -o-repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
-            background: repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
-            display: none;
+        }
+        &.show {
+          display: block;
+        }
+      }
+
+      .compass-number {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        bottom: 50px;
+        > .szscale {
+          -webkit-transform: scale(1.2);
+          -moz-transform: scale(1.2);
+          -ms-transform: scale(1.2);
+          -o-transform: scale(1.2);
+          transform: scale(1.2);
+          -webkit-transform-origin: center bottom;
+          -moz-transform-origin: center bottom;
+          -ms-transform-origin: center bottom;
+          -o-transform-origin: center bottom;
+          transform-origin: center bottom;
+        }
+        > div {
+          position: absolute;
+          bottom: 0;
+          width: 55px;
+          height: 0;
+          -webkit-animation: sz 1s linear;
+          -moz-animation: sz 1s linear;
+          -o-animation: sz 1s linear;
+          animation: sz 1s linear;
+          -webkit-animation-fill-mode: forwards;
+          -moz-animation-fill-mode: forwards;
+          -o-animation-fill-mode: forwards;
+          animation-fill-mode: forwards;
+          -webkit-transition: 1s;
+          -o-transition: 1s;
+          -moz-transition: 1s;
+          transition: 1s;
+          &:nth-child(1) {
+            left: 5%;
+            color: #ff9232;
+            -webkit-animation-delay: 0s;
+            -moz-animation-delay: 0s;
+            -o-animation-delay: 0s;
+            animation-delay: 0s;
+            &:after {
+              -webkit-animation-delay: 0s;
+              -moz-animation-delay: 0s;
+              -o-animation-delay: 0s;
+              animation-delay: 0s;
+            }
           }
-          .compass-bg-3 {
-            @extend %compass-bg;
-            margin-left: -190px;
-            bottom: -140px;
-            width: 380px;
-            height: 380px;
-            background: -webkit-repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
-            background: -moz-repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
-            background: -o-repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
-            background: repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
+          &:nth-child(2) {
+            left: 25%;
+            color: #d5c245;
+            -webkit-animation-delay: 0.2s;
+            -moz-animation-delay: 0.2s;
+            -o-animation-delay: 0.2s;
+            animation-delay: 0.2s;
+            bottom: -10%;
+            &:after {
+              -webkit-animation-delay: 2.85s;
+              -moz-animation-delay: 2.85s;
+              -o-animation-delay: 2.85s;
+              animation-delay: 2.85s;
+            }
           }
-          .compass-bg-4 {
-            @extend %compass-bg;
-            margin-left: -160px;
-            bottom: -110px;
-            width: 320px;
-            height: 320px;
-            background: -webkit-repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
-            background: -moz-repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
-            background: -o-repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
-            background: repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
+          &:nth-child(3) {
+            left: 45%;
+            color: #01a455;
+            -webkit-animation-delay: 0.4s;
+            -moz-animation-delay: 0.4s;
+            -o-animation-delay: 0.4s;
+            animation-delay: 0.4s;
+            bottom: -20%;
+            &:after {
+              -webkit-animation-delay: 5.7s;
+              -moz-animation-delay: 5.7s;
+              -o-animation-delay: 5.7s;
+              animation-delay: 5.7s;
+            }
           }
-          .compass-bg-5 {
-            @extend %compass-bg;
-            margin-left: -130px;
-            bottom: -80px;
-            width: 260px;
-            height: 260px;
-            -webkit-box-shadow: inset 0 0 10px 10px rgba(44, 183, 190, 0.8);
-            -moz-box-shadow: inset 0 0 10px 10px rgba(44, 183, 190, 0.8);
-            box-shadow: inset 0 0 10px 10px rgba(44, 183, 190, 0.8);
+          &:nth-child(4) {
+            left: 65%;
+            color: #85adfb;
+            -webkit-animation-delay: 0.6s;
+            -moz-animation-delay: 0.6s;
+            -o-animation-delay: 0.6s;
+            animation-delay: 0.6s;
+            bottom: -30%;
+            &:after {
+              -webkit-animation-delay: 8.55s;
+              -moz-animation-delay: 8.55s;
+              -o-animation-delay: 8.55s;
+              animation-delay: 8.55s;
+            }
           }
-          .compass-bg-6 {
-            @extend %compass-bg;
-            margin-left: -100px;
-            bottom: -50px;
-            width: 200px;
-            height: 200px;
-            background: -webkit-repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
-            background: -moz-repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
-            background: -o-repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
-            background: repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
-            display: none;
+          &:nth-child(5) {
+            left: 85%;
+            color: #c36885;
+            -webkit-animation-delay: 0.8s;
+            -moz-animation-delay: 0.8s;
+            -o-animation-delay: 0.8s;
+            animation-delay: 0.8s;
+            bottom: -40%;
+            &:after {
+              -webkit-animation-delay: 11.4s;
+              -moz-animation-delay: 11.4s;
+              -o-animation-delay: 11.4s;
+              animation-delay: 11.4s;
+            }
           }
-          .compass-bg-7 {
-            @extend %compass-bg;
-            margin-left: -70px;
-            bottom: -20px;
-            width: 140px;
-            height: 140px;
-            background: -webkit-repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
-            background: -moz-repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
-            background: -o-repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
-            background: repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
-            -webkit-animation: bgshadow 3s linear infinite;     
-            -moz-animation: bgshadow 3s linear infinite;
-            -o-animation: bgshadow 3s linear infinite;
-            animation: bgshadow 3s linear infinite;
+          &:nth-child(6) {
+            left: 75%;
+            color: #f674a0;
+            -webkit-animation-delay: 1s;
+            -moz-animation-delay: 1s;
+            -o-animation-delay: 1s;
+            animation-delay: 1s;
+            bottom: -50%;
+            &:after {
+              -webkit-animation-delay: 14.25s;
+              -moz-animation-delay: 14.25s;
+              -o-animation-delay: 14.25s;
+              animation-delay: 14.25s;
+            }
+          }
+          &:nth-child(7) {
+            left: 87.5%;
+            color: #275fcc;
+            -webkit-animation-delay: 1.2s;
+            -moz-animation-delay: 1.2s;
+            -o-animation-delay: 1.2s;
+            animation-delay: 1.2s;
+            bottom: -60%;
+            &:after {
+              -webkit-animation-delay: 17.1s;
+              -moz-animation-delay: 17.1s;
+              -o-animation-delay: 17.1s;
+              animation-delay: 17.1s;
+            }
           }
 
-          .compass-bg-c-1 {
-            width: 100%;
+          span {
+            display: block;
+            width: 55px;
+            height: 55px;
+            line-height: 55px;
+            text-align: center;
+            /*padding-bottom: 55px;*/
+            -webkit-box-shadow: inset 0 0 15px currentColor;
+            -moz-box-shadow: inset 0 0 15px currentColor;
+            box-shadow: inset 0 0 15px currentColor;
+            -webkit-border-radius: 100%;
+            -moz-border-radius: 100%;
+            border-radius: 100%;
+          }
+          &:before {
+            content: "";
+            position: absolute;
             height: 100%;
-            background: url(../../assets/img/chart1/compass-bg-1.png) no-repeat 50% 345px;
+            border-left: 1px dashed currentColor;
+            height: 500px;
+            top: 55px;
+            left: 50%;
+            margin-left: -1px;
           }
-          .compass-bg-c-2 {
+          &:after {
+            content: "NO." attr(title);
+            position: absolute;
+            display: inline-block;
+            top: -20px;
             width: 100%;
+            font-family: "DIGITALDREAMFAT";
+            text-align: center;
+          }
+        }
+      }
+
+      .line-sx {
+        > div {
+          &:nth-child(2) {
+            height: 90%;
+            -webkit-animation-duration: 2s;
+            -moz-animation-duration: 2s;
+            -o-animation-duration: 2s;
+            animation-duration: 2s;
+            -webkit-animation-delay: 1.5s;
+            -moz-animation-delay: 1.5s;
+            -o-animation-delay: 1.5s;
+            animation-delay: 1.5s;
+            bottom: 0;
+            left: 51px;
+          }
+          &:nth-child(3) {
             height: 100%;
-            background: url(../../assets/img/chart1/compass-bg-2.png) no-repeat 65% 146px;
-            opacity: 0.8;
-            -webkit-animation: fadebg 3s linear infinite;
-            -moz-animation: fadebg 3s linear infinite;
-            -o-animation: fadebg 3s linear infinite;
-            animation: fadebg 3s linear infinite;
+            -webkit-animation-duration: 3s;
+            -moz-animation-duration: 3s;
+            -o-animation-duration: 3s;
+            animation-duration: 3s;
+            -webkit-animation-delay: 0s;
+            -moz-animation-delay: 0s;
+            -o-animation-delay: 0s;
+            animation-delay: 0s;
+            bottom: 32px;
+            left: 89px;
           }
-          .compass-bg-c-3 {
-            width: 100%;
+          &:nth-child(4) {
             height: 100%;
-            background: url(../../assets/img/chart1/compass-bg-3.png) no-repeat 50% 227px;
+            -webkit-animation-duration: 2.5s;
+            -moz-animation-duration: 2.5s;
+            -o-animation-duration: 2.5s;
+            animation-duration: 2.5s;
+            -webkit-animation-delay: 1s;
+            -moz-animation-delay: 1s;
+            -o-animation-delay: 1s;
+            animation-delay: 1s;
+            bottom: 3px;
+            left: 179px;
+            -webkit-filter: hue-rotate(180deg);
+            filter: hue-rotate(180deg);
           }
-          .compass-bg-c-4 {
-            width: 100%;
+          &:nth-child(5) {
+            height: 90%;
+            -webkit-animation-duration: 2s;
+            -moz-animation-duration: 2s;
+            -o-animation-duration: 2s;
+            animation-duration: 2s;
+            -webkit-animation-delay: 2s;
+            -moz-animation-delay: 2s;
+            -o-animation-delay: 2s;
+            animation-delay: 2s;
+            bottom: 42px;
+            left: 229px;
+          }
+          &:nth-child(6) {
             height: 100%;
-            background: url(../../assets/img/chart1/compass-bg-4.png) no-repeat 50% 63px;
-            -webkit-animation: numberfade 5s linear infinite;
-            -moz-animation: numberfade 5s linear infinite;
-            -o-animation: numberfade 5s linear infinite;
-            animation: numberfade 5s linear infinite;
+            -webkit-animation-duration: 2.5s;
+            -moz-animation-duration: 2.5s;
+            -o-animation-duration: 2.5s;
+            animation-duration: 2.5s;
+            -webkit-animation-delay: 0.5s;
+            -moz-animation-delay: 0.5s;
+            -o-animation-delay: 0.5s;
+            animation-delay: 0.5s;
+            bottom: 11px;
+            right: 48px;
           }
-
-          .compass-text {
-            position: absolute;
-            overflow: hidden;
-            left: 50%;
-            margin-left: -60px;
-            font-size: 12px;
-            background-color: rgba(0, 71, 157, 0.4);
-            padding: 5px 10px;
-            color: #00c2ff;
-            -webkit-border-radius: 6px;
-            -moz-border-radius: 6px;
-            border-radius: 6px;
-            line-height: 1.5;
-            -webkit-transform: scale(0.8);
-            -moz-transform: scale(0.8);
-            -ms-transform: scale(0.8);
-            -o-transform: scale(0.8);
-            transform: scale(0.8);
-            display: none;
-            &.compass-text-1 {
-              top: -70px;
-              left: 48px;
-            }
-            &.compass-text-2 {
-              top: -30px;
-              left: 152px;
-            }
-            &.compass-text-3 {
-              top: 10px;
-              left: 250px;
-            }
-            &.compass-text-4 {
-              top: 54px;
-              left: 350px;
-            }
-            &.compass-text-5 {
-              top: 93px;
-              left: 450px;
-            }
-            &.compass-text-6 {
-              color: #d57a31;
-              bottom: -950px;
-              -webkit-animation-delay: 25s;
-              -moz-animation-delay: 25s;
-              -o-animation-delay: 25s;
-              animation-delay: 25s;
-            }
-            &.compass-text-7 {
-              color: #d57a31;
-              bottom: -1150px;
-              -webkit-animation-delay: 30s;
-              -moz-animation-delay: 30s;
-              -o-animation-delay: 30s;
-              animation-delay: 30s;
-            }
-            %span-nth-child {
-              margin-top: 0px;
-            }
-            span {
-              display: block;
-              &:nth-child(1) {
-                @extend %span-nth-child;
-              }
-              &:nth-child(2) {
-                @extend %span-nth-child;
-              }
-              &:nth-child(3) {
-                @extend %span-nth-child;
-              }
-            }
-            &.show {
-              display: block;
-            }
+          &:nth-child(7) {
+            height: 90%;
+            -webkit-animation-duration: 3s;
+            -moz-animation-duration: 3s;
+            -o-animation-duration: 3s;
+            animation-duration: 3s;
+            -webkit-animation-delay: 2.5s;
+            -moz-animation-delay: 2.5s;
+            -o-animation-delay: 2.5s;
+            animation-delay: 2.5s;
+            bottom: -22px;
+            right: 174px;
+            -webkit-filter: hue-rotate(180deg);
+            filter: hue-rotate(180deg);
           }
-
-          .compass-number {
-            position: absolute;
-            width: 100%;
+          &:nth-child(8) {
+            height: 90%;
+            -webkit-animation-duration: 3s;
+            -moz-animation-duration: 3s;
+            -o-animation-duration: 3s;
+            animation-duration: 3s;
+            -webkit-animation-delay: 1.5s;
+            -moz-animation-delay: 1.5s;
+            -o-animation-delay: 1.5s;
+            animation-delay: 1.5s;
+            bottom: -22px;
+            right: 100px;
+          }
+          &:nth-child(9) {
             height: 100%;
-            overflow: hidden;
-            bottom: 50px;
-            > .szscale {
-              -webkit-transform: scale(1.2);
-              -moz-transform: scale(1.2);
-              -ms-transform: scale(1.2);
-              -o-transform: scale(1.2);
-              transform: scale(1.2);
-              -webkit-transform-origin: center bottom;
-              -moz-transform-origin: center bottom;
-              -ms-transform-origin: center bottom;
-              -o-transform-origin: center bottom;
-              transform-origin: center bottom;
-            }
-            > div {
-              position: absolute;
-              bottom: 0;
-              width: 55px;
-              height: 0;
-              -webkit-animation: sz 1s linear;
-              -moz-animation: sz 1s linear;
-              -o-animation: sz 1s linear;
-              animation: sz 1s linear;
-              -webkit-animation-fill-mode: forwards;
-              -moz-animation-fill-mode: forwards;
-              -o-animation-fill-mode: forwards;
-              animation-fill-mode: forwards;
-              -webkit-transition: 1s;
-              -o-transition: 1s;
-              -moz-transition: 1s;
-              transition: 1s;
-              &:nth-child(1) {
-                left: 5%;
-                color: #ff9232;
-                -webkit-animation-delay: 0s;
-                -moz-animation-delay: 0s;
-                -o-animation-delay: 0s;
-                animation-delay: 0s;
-                &:after {
-                  -webkit-animation-delay: 0s;
-                  -moz-animation-delay: 0s;
-                  -o-animation-delay: 0s;
-                  animation-delay: 0s;
-                }
-              }
-              &:nth-child(2) {
-                left: 25%;
-                color: #d5c245;
-                -webkit-animation-delay: 0.2s;
-                -moz-animation-delay: 0.2s;
-                -o-animation-delay: 0.2s;
-                animation-delay: 0.2s;
-                bottom: -10%;
-                &:after {
-                  -webkit-animation-delay: 2.85s;
-                  -moz-animation-delay: 2.85s;
-                  -o-animation-delay: 2.85s;
-                  animation-delay: 2.85s;
-                }
-              }
-              &:nth-child(3) {
-                left: 45%;
-                color: #01a455;
-                -webkit-animation-delay: 0.4s;
-                -moz-animation-delay: 0.4s;
-                -o-animation-delay: 0.4s;
-                animation-delay: 0.4s;
-                bottom: -20%;
-                &:after {
-                  -webkit-animation-delay: 5.7s;
-                  -moz-animation-delay: 5.7s;
-                  -o-animation-delay: 5.7s;
-                  animation-delay: 5.7s;
-                }
-              }
-              &:nth-child(4) {
-                left: 65%;
-                color: #275fcc;
-                -webkit-animation-delay: 0.6s;
-                -moz-animation-delay: 0.6s;
-                -o-animation-delay: 0.6s;
-                animation-delay: 0.6s;
-                bottom: -30%;
-                &:after {
-                  -webkit-animation-delay: 8.55s;
-                  -moz-animation-delay: 8.55s;
-                  -o-animation-delay: 8.55s;
-                  animation-delay: 8.55s;
-                }
-              }
-              &:nth-child(5) {
-                left: 85%;
-                color: #275fcc;
-                -webkit-animation-delay: 0.8s;
-                -moz-animation-delay: 0.8s;
-                -o-animation-delay: 0.8s;
-                animation-delay: 0.8s;
-                bottom: -40%;
-                &:after {
-                  -webkit-animation-delay: 11.4s;
-                  -moz-animation-delay: 11.4s;
-                  -o-animation-delay: 11.4s;
-                  animation-delay: 11.4s;
-                }
-              }
-              &:nth-child(6) {
-                left: 75%;
-                color: #f674a0;
-                -webkit-animation-delay: 1s;
-                -moz-animation-delay: 1s;
-                -o-animation-delay: 1s;
-                animation-delay: 1s;
-                bottom: -50%;
-                &:after {
-                  -webkit-animation-delay: 14.25s;
-                  -moz-animation-delay: 14.25s;
-                  -o-animation-delay: 14.25s;
-                  animation-delay: 14.25s;
-                }
-              }
-              &:nth-child(7) {
-                left: 87.5%;
-                color: #275fcc;
-                -webkit-animation-delay: 1.2s;
-                -moz-animation-delay: 1.2s;
-                -o-animation-delay: 1.2s;
-                animation-delay: 1.2s;
-                bottom: -60%;
-                &:after {
-                  -webkit-animation-delay: 17.1s;
-                  -moz-animation-delay: 17.1s;
-                  -o-animation-delay: 17.1s;
-                  animation-delay: 17.1s;
-                }
-              }
-
-              span {
-                display: block;
-                width: 55px;
-                height: 55px;
-                line-height: 55px;
-                text-align: center;
-                /*padding-bottom: 55px;*/
-                -webkit-box-shadow: inset 0 0 15px currentColor;
-                -moz-box-shadow: inset 0 0 15px currentColor;
-                box-shadow: inset 0 0 15px currentColor;
-                -webkit-border-radius: 100%;
-                -moz-border-radius: 100%;
-                border-radius: 100%;
-              }
-              &:before {
-                content: "";
-                position: absolute;
-                height: 100%;
-                border-left: 1px dashed currentColor;
-                height: 500px;
-                top: 55px;
-                left: 50%;
-                margin-left: -1px;
-              }
-              &:after {
-                content: "NO." attr(title);
-                position: absolute;
-                display: inline-block;
-                top: -20px;
-                width: 100%;
-                font-family: "DIGITALDREAMFAT";
-                text-align: center;
-              }
-            }
+            -webkit-animation-duration: 2.5s;
+            -moz-animation-duration: 2.5s;
+            -o-animation-duration: 2.5s;
+            animation-duration: 2.5s;
+            -webkit-animation-delay: 2s;
+            -moz-animation-delay: 2s;
+            -o-animation-delay: 2s;
+            animation-delay: 2s;
+            bottom: -10px;
+            right: 220px;
           }
-
-          .line-sx {
-            > div {
-              &:nth-child(2) {
-                height: 90%;
-                -webkit-animation-duration: 2s;
-                -moz-animation-duration: 2s;
-                -o-animation-duration: 2s;
-                animation-duration: 2s;
-                -webkit-animation-delay: 1.5s;
-                -moz-animation-delay: 1.5s;
-                -o-animation-delay: 1.5s;
-                animation-delay: 1.5s;
-                bottom: 0;
-                left: 51px;
-              }
-              &:nth-child(3) {
-                height: 100%;
-                -webkit-animation-duration: 3s;
-                -moz-animation-duration: 3s;
-                -o-animation-duration: 3s;
-                animation-duration: 3s;
-                -webkit-animation-delay: 0s;
-                -moz-animation-delay: 0s;
-                -o-animation-delay: 0s;
-                animation-delay: 0s;
-                bottom: 32px;
-                left: 89px;
-              }
-              &:nth-child(4) {
-                height: 100%;
-                -webkit-animation-duration: 2.5s;
-                -moz-animation-duration: 2.5s;
-                -o-animation-duration: 2.5s;
-                animation-duration: 2.5s;
-                -webkit-animation-delay: 1s;
-                -moz-animation-delay: 1s;
-                -o-animation-delay: 1s;
-                animation-delay: 1s;
-                bottom: 3px;
-                left: 179px;
-                -webkit-filter: hue-rotate(180deg);
-                filter: hue-rotate(180deg);
-              }
-              &:nth-child(5) {
-                height: 90%;
-                -webkit-animation-duration: 2s;
-                -moz-animation-duration: 2s;
-                -o-animation-duration: 2s;
-                animation-duration: 2s;
-                -webkit-animation-delay: 2s;
-                -moz-animation-delay: 2s;
-                -o-animation-delay: 2s;
-                animation-delay: 2s;
-                bottom: 42px;
-                left: 229px;
-              }
-              &:nth-child(6) {
-                height: 100%;
-                -webkit-animation-duration: 2.5s;
-                -moz-animation-duration: 2.5s;
-                -o-animation-duration: 2.5s;
-                animation-duration: 2.5s;
-                -webkit-animation-delay: 0.5s;
-                -moz-animation-delay: 0.5s;
-                -o-animation-delay: 0.5s;
-                animation-delay: 0.5s;
-                bottom: 11px;
-                right: 48px;
-              }
-              &:nth-child(7) {
-                height: 90%;
-                -webkit-animation-duration: 3s;
-                -moz-animation-duration: 3s;
-                -o-animation-duration: 3s;
-                animation-duration: 3s;
-                -webkit-animation-delay: 2.5s;
-                -moz-animation-delay: 2.5s;
-                -o-animation-delay: 2.5s;
-                animation-delay: 2.5s;
-                bottom: -22px;
-                right: 174px;
-                -webkit-filter: hue-rotate(180deg);
-                filter: hue-rotate(180deg);
-              }
-              &:nth-child(8) {
-                height: 90%;
-                -webkit-animation-duration: 3s;
-                -moz-animation-duration: 3s;
-                -o-animation-duration: 3s;
-                animation-duration: 3s;
-                -webkit-animation-delay: 1.5s;
-                -moz-animation-delay: 1.5s;
-                -o-animation-delay: 1.5s;
-                animation-delay: 1.5s;
-                bottom: -22px;
-                right: 100px;
-              }
-              &:nth-child(9) {
-                height: 100%;
-                -webkit-animation-duration: 2.5s;
-                -moz-animation-duration: 2.5s;
-                -o-animation-duration: 2.5s;
-                animation-duration: 2.5s;
-                -webkit-animation-delay: 2s;
-                -moz-animation-delay: 2s;
-                -o-animation-delay: 2s;
-                animation-delay: 2s;
-                bottom: -10px;
-                right: 220px;
-              }
-              &:nth-child(10) {
-                height: 95%;
-                -webkit-animation-duration: 2s;
-                -moz-animation-duration: 2s;
-                -o-animation-duration: 2s;
-                animation-duration: 2s;
-                -webkit-animation-delay: 1s;
-                -moz-animation-delay: 1s;
-                -o-animation-delay: 1s;
-                animation-delay: 1s;
-                bottom: -41px;
-                right: 182px;
-              }
-            }
-            .line-fs {
-              width: 14px;
-              height: 100%;
-              background: url(../../assets/img/chart1/line-fs.png) no-repeat;
-              background-position: 50% 150%;
-              position: absolute;
-              z-index: -1;
-              -webkit-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
-              -moz-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
-              -o-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
-              animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
-            }
+          &:nth-child(10) {
+            height: 95%;
+            -webkit-animation-duration: 2s;
+            -moz-animation-duration: 2s;
+            -o-animation-duration: 2s;
+            animation-duration: 2s;
+            -webkit-animation-delay: 1s;
+            -moz-animation-delay: 1s;
+            -o-animation-delay: 1s;
+            animation-delay: 1s;
+            bottom: -41px;
+            right: 182px;
           }
-
         }
-
+        .line-fs {
+          width: 14px;
+          height: 100%;
+          background: url(../../assets/img/chart1/line-fs.png) no-repeat;
+          background-position: 50% 150%;
+          position: absolute;
+          z-index: -1;
+          -webkit-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
+          -moz-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
+          -o-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
+          animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
+        }
       }
+
     }
-    
+
   }
 }
 

src/main.js

@@ -9,6 +9,7 @@ import Toast from './components/toast'
 import $ from 'jquery'
 
 import '@/assets/styles/base.scss'
+import '@/assets/styles/common.scss'
 import '@/assets/iconfont/iconfont.css'
 
 Vue.use(vueParticles)

src/views/Home.vue

@@ -5,7 +5,10 @@
       
       <sinan />
 
-    </div>
+      <rimian />
+
+      <pyramid />
+
     </div>
     
   </div>