Merge remote-tracking branch 'origin/master'

components/default/Zhongqiu.vue

@@ -0,0 +1,590 @@
+<template>
+  <div class="banner" v-if="isClose">
+    <div class="banner-modal">
+      <div class="banner-img">
+        <img src="/images/zhongqiu/zq1.png" />
+        <img src="/images/zhongqiu/zq2.png" />
+        <img src="/images/zhongqiu/zq3.png" />
+        <img src="/images/zhongqiu/zq4.png" />
+        <img src="/images/zhongqiu/zq5.png" />
+        <img src="/images/zhongqiu/zq6.png" />
+        <img src="/images/zhongqiu/zq7.png" />
+        <img src="/images/zhongqiu/zq8.png" />
+        <img src="/images/zhongqiu/zq9.png" />
+        <img src="/images/zhongqiu/zq10.png" />
+        <img src="/images/zhongqiu/zq11.png" />
+        <img src="/images/zhongqiu/zq12.png" />
+        <img src="/images/zhongqiu/zq13.png" />
+        <a @click="isOpendZq" href="javascript:void(0)">×</a>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'zhongqiu',
+    data () {
+      return {
+        isClose: false
+      }
+    },
+    beforeMount () {
+      var self = this
+      setTimeout(getTotelNumber, 10000)
+      function getTotelNumber () {
+        self.isOpendZq()
+      }
+      getTotelNumber()
+    },
+    mounted () {
+      const endTime = window.localStorage.getItem('endTime')
+      const overTime = new Date('2017/10/9 00:00:00').getTime()
+      if (overTime - (new Date().getTime()) > 0) {
+        if (endTime) {
+          if (new Date().getTime() - endTime >= 4 * 3600000) {
+            this.isClose = true
+            window.localStorage.setItem('endTime', new Date().getTime())
+          } else {
+            this.isClose = false
+          }
+        } else {
+          this.isClose = true
+          window.localStorage.setItem('endTime', new Date().getTime())
+        }
+      }
+    },
+    methods: {
+      isOpendZq () {
+        this.isClose = false
+      }
+    }
+  }
+</script>
+<style scoped>
+  .banner{
+    width:100%;
+    height:100%;
+    top: 0;
+    left: 0;
+    position:fixed;
+    z-index:3000;
+  }
+  .banner-modal{
+    background: rgba(0,0,0,.6);
+    width:2000px;
+    height:1100px;
+  }
+  .banner-img{
+    position:absolute;
+    top:10%;
+    left:50%;
+    width:900px;
+    margin-left:-450px;
+  }
+  .banner-img img{
+    display:block;
+    width:900px;
+    position:absolute;
+    top:0;
+    left:0;
+  }
+  .banner-img a{
+    display:block;
+    width:30px;
+    height:30px;
+    line-height:30px;
+    font-size:20px;
+    background: #ffffff;
+    border-radius:50%;
+    text-align: center;
+    color:#d8d4d4;
+    position:absolute;
+    top:0;
+    right:0;
+    z-index:5000;
+  }
+  .banner-img a:hover{
+    cursor:pointer;
+  }
+  img:nth-child(1){
+    z-index:120;
+    -webkit-transform-origin: 200px 100px;
+    -moz--transform-origin: 200px 100px;
+    -ms--transform-origin: 200px 100px;
+    -o--transform-origin: 200px 100px;
+    transform-origin:130px 150px;
+    -webkit-animation: animation1 8s linear;
+    -moz-animation: animation1 8s linear;
+    -ms-animation: animation1 8s linear;
+    -o-animation: animation1 8s linear;
+    animation: animation1 8s linear;
+  }
+  img:nth-child(2){
+    z-index:110;
+    -webkit-animation: animation2 8s linear;
+    -moz-animation: animation2 8s linear;
+    -ms-animation: animation2 8s linear;
+    -o-animation: animation2 8s linear;
+    animation: animation2 8s linear;
+  }
+  img:nth-child(3){z-index:20;
+    -webkit-animation: animation3 8s linear;
+    -moz-animation: animation3 8s linear;
+    -ms-animation: animation3 8s linear;
+    -o-animation: animation3 8s linear;
+    animation: animation3 8s linear;
+  }
+  img:nth-child(4){z-index:30;
+    -webkit-animation: animation4 8s linear;
+    -moz-animation: animation4 8s linear;
+    -ms-animation: animation4 8s linear;
+    -o-animation: animation4 8s linear;
+    animation: animation4 8s linear;
+  }
+  img:nth-child(5){
+    z-index:100;
+    -webkit-animation: animation5 8s linear;
+    -moz-animation: animation5 8s linear;
+    -ms-animation: animation5 8s linear;
+    -o-animation: animation5 8s linear;
+    animation: animation5 8s linear;
+  }
+  img:nth-child(6){z-index:90;
+    -webkit-animation: animation6 8s linear;
+    -moz-animation: animation6 8s linear;
+    -ms-animation: animation6 8s linear;
+    -o-animation: animation6 8s linear;
+    animation: animation6 8s linear;
+  }
+  img:nth-child(7){z-index:10;
+    -webkit-transform-origin: 270px 450px;
+    -moz--transform-origin: 270px 450px;
+    -ms--transform-origin: 270px 450px;
+    -o--transform-origin: 270px 450px;
+    transform-origin:270px 500px;
+    -webkit-animation: animation7 8s linear;
+    -moz-animation: animation7 8s linear;
+    -ms-animation: animation7 8s linear;
+    -o-animation: animation7 8s linear;
+    animation: animation7 8s linear;
+  }
+  img:nth-child(8){z-index:130;
+    -webkit-animation: animation8 8s linear;
+    -moz-animation: animation8 8s linear;
+    -ms-animation: animation8 8s linear;
+    -o-animation: animation8 8s linear;
+    animation: animation8 8s linear;
+  }
+  img:nth-child(9){z-index:40;
+    -webkit-transform-origin: 200px 500px;
+    -moz--transform-origin: 200px 500px;
+    -ms--transform-origin: 200px 500px;
+    -o--transform-origin: 200px 500px;
+    transform-origin:200px 500px;
+    -webkit-animation: animation9 8s linear;
+    -moz-animation: animation9 8s linear;''
+  -ms-animation: animation9 8s linear;
+    -o-animation: animation9 8s linear;
+    animation: animation9 8s linear;
+  }
+  img:nth-child(10){z-index:50;
+    -webkit-transform-origin: 240px 500px;
+    -moz--transform-origin: 240px 500px;
+    -ms--transform-origin: 240px 500px;
+    -o--transform-origin: 240px 500px;
+    transform-origin:240px 500px;
+    -webkit-animation: animation10 8s linear;
+    -moz-animation: animation10 8s linear;
+    -ms-animation: animation10 8s linear;
+    -o-animation: animation10 8s linear;
+    animation: animation10 8s linear;
+  }
+  img:nth-child(11){z-index:60;
+    -webkit-transform-origin: 300px 500px;
+    -moz--transform-origin: 300px 500px;
+    -ms--transform-origin: 300px 500px;
+    -o--transform-origin: 300px 500px;
+    transform-origin:300px 500px;
+    -webkit-animation: animation11 8s linear;
+    -moz-animation: animation11 8s linear;
+    -ms-animation: animation11 8s linear;
+    -o-animation: animation11 8s linear;
+    animation: animation11 8s linear;
+  }
+  img:nth-child(12){z-index:70;
+    -webkit-transform-origin: 650px 500px;
+    -moz--transform-origin: 650px 500px;
+    -ms--transform-origin: 650px 500px;
+    -o--transform-origin: 650px 500px;
+    transform-origin:650px 500px;
+    -webkit-animation: animation12 8s linear;
+    -moz-animation: animation12 8s linear;
+    -ms-animation: animation12 8s linear;
+    -o-animation: animation12 8s linear;
+    animation: animation12 8s linear;
+  }
+  img:nth-child(13){z-index:80;
+    -webkit-transform-origin: 700px 500px;
+    -moz--transform-origin: 700px 500px;
+    -ms--transform-origin: 700px 500px;
+    -o--transform-origin: 700px 500px;
+    transform-origin:700px 500px;
+    -webkit-animation: animation13 8s linear;
+    -moz-animation: animation13 8s linear;
+    -ms-animation: animation13 8s linear;
+    -o-animation: animation13 8s linear;
+    animation: animation13 8s linear;
+  }
+  @keyframes animation1{
+    0%{ opacity:0 ;
+      -webkit-transform: rotate(60deg);
+      -moz-transform: rotate(60deg);
+      -ms-transform: rotate(60deg);
+      -o-transform: rotate(60deg);
+      transform: rotate(60deg)
+    }
+    5%{ opacity:1;
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg)
+    }
+    100%{ opacity:1;  }
+  }
+  @keyframes animation2{
+    0%{ opacity:0 ;
+    }
+    5%{ opacity:0 ;
+    }
+    10%{ opacity:1 ;
+    }
+    100%{ opacity:1;
+    }
+  }
+  @keyframes animation3{
+    0%{ opacity:0 ;
+    }
+    5%{ opacity:0 ;
+      -webkit-transform: scale(.5);
+      -moz-transform: scale(.5);
+      -ms-transform: scale(.5);
+      -o-transform: scale(.5);
+      transform: scale(.5)
+    }
+    50%{ opacity:1 ;
+      -webkit-transform: scale(1);
+      -moz-transform: scale(1);
+      -ms-transform: scale(1);
+      -o-transform: scale(1);
+      transform: scale(1);
+      -webkit-transform: rotate(45deg);
+      -moz-transform: rotate(45deg);
+      -ms-transform: rotate(45deg);
+      -o-transform: rotate(45deg);
+      transform: rotate(45deg)
+    }
+    100%{ opacity:1;
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg)
+    }
+  }
+  @keyframes animation4{
+    0%{ opacity:0 ;
+    }
+    5%{ opacity:0 ;
+      -webkit-transform: scale(.5);
+      -moz-transform: scale(.5);
+      -ms-transform: scale(.5);
+      -o-transform: scale(.5);
+      transform: scale(.5)
+    }
+    50%{ opacity:1 ;
+      -webkit-transform: scale(1);
+      -moz-transform: scale(1);
+      -ms-transform: scale(1);
+      -o-transform: scale(1);
+      transform: scale(1);
+      -webkit-transform: rotate(-60deg);
+      -moz-transform: rotate(-60deg);
+      -ms-transform: rotate(-60deg);
+      -o-transform: rotate(-60deg);
+      transform: rotate(-60deg)
+    }
+    100%{ opacity:1;
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg)
+    }
+  }
+  @keyframes animation5{
+    0%{ opacity:0 ;
+    }
+    7%{ opacity:0 ;
+    }
+    13%{ opacity:1 ;
+    }
+    100%{ opacity:1;
+    }
+  }
+  @keyframes animation6{
+    0%{ opacity:0 ;
+    }
+    10%{ opacity:0 ;
+      -webkit-transform: scale(.5);
+      -moz-transform: scale(.5);
+      -ms-transform: scale(.5);
+      -o-transform: scale(.5);
+      transform: scale(.5)
+    }
+    40%{ opacity:1 ;
+      -webkit-transform: scale(1);
+      -moz-transform: scale(1);
+      -ms-transform: scale(1);
+      -o-transform: scale(1);
+      transform: scale(1);
+      -webkit-transform: rotate(60deg);
+      -moz-transform: rotate(60deg);
+      -ms-transform: rotate(60deg);
+      -o-transform: rotate(60deg);
+      transform: rotate(60deg)
+    }
+    100%{ opacity:1;
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg)
+    }
+  }
+  @keyframes animation7{
+    0%{ opacity:0 ;
+    }
+    30%{ opacity:0 ;
+    }
+    45%{ opacity:1 ;
+      -webkit-transform: rotate(-20deg);
+      -moz-transform: rotate(-20deg);
+      -ms-transform: rotate(-20deg);
+      -o-transform: rotate(-20deg);
+      transform: rotate(-20deg)
+    }
+    60%{ opacity:1 ;
+      -webkit-transform: rotate(20deg);
+      -moz-transform: rotate(20deg);
+      -ms-transform: rotate(20deg);
+      -o-transform: rotate(20deg);
+      transform: rotate(20deg)
+    }
+    70%{ opacity:1 ;
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg)
+    }
+    100%{ opacity:1;
+    }
+  }
+  @keyframes animation8{
+    0%{
+      opacity:0;
+    }
+    13%{ opacity:0 ;
+      -webkit-transform:translateY(300px);
+      -moz-transform:translateY(300px);
+      -ms-transform:translateY(300px);
+      -o-transform:translateY(300px);
+      transform:translateY(300px);
+    }
+    35%{ opacity:1 ;
+      -webkit-transform:translateY(0px);
+      -moz-transform:translateY(0px);
+      -ms-transform:translateY(0px);
+      -o-transform:translateY(0px);
+      transform:translateY(0px);
+    }
+    100%{ opacity:1;
+    }
+  }
+  @keyframes animation9{
+    0%{ opacity:0 ;
+
+    }
+    30%{ opacity:0 ;
+      -webkit-transform: scale(0);
+      -moz-transform: scale(0);
+      -ms-transform: scale(0);
+      -o-transform: scale(0);
+      transform: scale(0);
+    }
+    55%{ opacity:1 ;
+      -webkit-transform: scale(.9);
+      -moz-transform: scale(.9);
+      -ms-transform: scale(.9);
+      -o-transform: scale(.9);
+      transform: scale(.9);
+    }
+    60%{ opacity:1 ;
+      -webkit-transform: scale(.7);
+      -moz-transform: scale(.7);
+      -ms-transform: scale(.7);
+      -o-transform: scale(.7);
+      transform: scale(.7);
+    }
+    80%{ opacity:1 ;
+      -webkit-transform: scale(1);
+      -moz-transform: scale(1);
+      -ms-transform: scale(1);
+      -o-transform: scale(1);
+      transform: scale(1);
+    }
+    100%{ opacity:1;
+    }
+  }
+  @keyframes animation10{
+    0%{ opacity:0 ;
+
+    }
+    30%{ opacity:0 ;
+      -webkit-transform: scale(0);
+      -moz-transform: scale(0);
+      -ms-transform: scale(0);
+      -o-transform: scale(0);
+      transform: scale(0);
+    }
+    55%{ opacity:1 ;
+      -webkit-transform: scale(.9);
+      -moz-transform: scale(.9);
+      -ms-transform: scale(.9);
+      -o-transform: scale(.9);
+      transform: scale(.9);
+    }
+    60%{ opacity:1 ;
+      -webkit-transform: scale(.7);
+      -moz-transform: scale(.7);
+      -ms-transform: scale(.7);
+      -o-transform: scale(.7);
+      transform: scale(.7);
+    }
+    80%{ opacity:1 ;
+      -webkit-transform: scale(1);
+      -moz-transform: scale(1);
+      -ms-transform: scale(1);
+      -o-transform: scale(1);
+      transform: scale(1);
+    }
+    100%{ opacity:1;
+    }
+  }
+  @keyframes animation11{
+    0%{ opacity:0 ;
+
+    }
+    30%{ opacity:0 ;
+      -webkit-transform: scale(0);
+      -moz-transform: scale(0);
+      -ms-transform: scale(0);
+      -o-transform: scale(0);
+      transform: scale(0);
+    }
+    55%{ opacity:1 ;
+      -webkit-transform: scale(.9);
+      -moz-transform: scale(.9);
+      -ms-transform: scale(.9);
+      -o-transform: scale(.9);
+      transform: scale(.9);
+    }
+    60%{ opacity:1 ;
+      -webkit-transform: scale(.7);
+      -moz-transform: scale(.7);
+      -ms-transform: scale(.7);
+      -o-transform: scale(.7);
+      transform: scale(.7);
+    }
+    80%{ opacity:1 ;
+      -webkit-transform: scale(1);
+      -moz-transform: scale(1);
+      -ms-transform: scale(1);
+      -o-transform: scale(1);
+      transform: scale(1);
+    }
+    100%{ opacity:1;
+    }
+  }
+  @keyframes animation12{
+    0%{ opacity:0 ;
+
+    }
+    30%{ opacity:0 ;
+      -webkit-transform: scale(0);
+      -moz-transform: scale(0);
+      -ms-transform: scale(0);
+      -o-transform: scale(0);
+      transform: scale(0);
+    }
+    55%{ opacity:1 ;
+      -webkit-transform: scale(.9);
+      -moz-transform: scale(.9);
+      -ms-transform: scale(.9);
+      -o-transform: scale(.9);
+      transform: scale(.9);
+    }
+    60%{ opacity:1 ;
+      -webkit-transform: scale(.7);
+      -moz-transform: scale(.7);
+      -ms-transform: scale(.7);
+      -o-transform: scale(.7);
+      transform: scale(.7);
+    }
+    80%{ opacity:1 ;
+      -webkit-transform: scale(1);
+      -moz-transform: scale(1);
+      -ms-transform: scale(1);
+      -o-transform: scale(1);
+      transform: scale(1);
+    }
+    100%{ opacity:1;
+    }
+  }
+  @keyframes animation13{
+    0%{ opacity:0 ;
+
+    }
+    30%{ opacity:0 ;
+      -webkit-transform: scale(0);
+      -moz-transform: scale(0);
+      -ms-transform: scale(0);
+      -o-transform: scale(0);
+      transform: scale(0);
+    }
+    55%{ opacity:1 ;
+      -webkit-transform: scale(.9);
+      -moz-transform: scale(.9);
+      -ms-transform: scale(.9);
+      -o-transform: scale(.9);
+      transform: scale(.9);
+    }
+    60%{ opacity:1 ;
+      -webkit-transform: scale(.7);
+      -moz-transform: scale(.7);
+      -ms-transform: scale(.7);
+      -o-transform: scale(.7);
+      transform: scale(.7);
+    }
+    80%{ opacity:1 ;
+      -webkit-transform: scale(1);
+      -moz-transform: scale(1);
+      -ms-transform: scale(1);
+      -o-transform: scale(1);
+      transform: scale(1);
+    }
+    100%{ opacity:1;
+    }
+  }
+</style>

components/default/christmas.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="christmas" v-if="hasOpen">
+    <div class="christmas-modal">
+      <div class="christmas-info">
+        <a href="https://www.usoftmall.com/activity/business" target="_blank"></a>
+        <a href="javascript:void(0)" @click="close">×</a>
+        <div class="christmas-img">
+          <img src="/images/christmas/christmas1.png">
+          <img src="/images/christmas/christmas2.png">
+          <img src="/images/christmas/christmas4.png">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+    export default {
+      name: 'christmas',
+      data () {
+        return {
+          hasOpen: true
+        }
+      },
+      methods: {
+        close () {
+          this.hasOpen = false
+          this.$emit('listenopen')
+        }
+      }
+    }
+</script>
+
+<style scoped>
+  .christmas{
+    position:fixed;
+    top:0;
+    left:0;
+    z-index:10000;
+    width:100%;
+    height:100%;
+  }
+  .christmas-modal{
+    background:rgba(0,0,0,.6);
+    width:100%;
+    height:100%;
+  }
+  .christmas-info{
+    position:absolute;
+    top:50%;
+    left:50%;
+    transform: translate(-50%, -50%);
+    width:985px;
+    height:740px;
+  }
+  .christmas-info a{
+    position:absolute;
+    z-index:100000;
+    display:block;
+  }
+  .christmas-info a:first-child{
+    top:72%;
+    left:39%;
+    width:200px;
+    height:50px;
+    background: url('/images/christmas/btn.png')no-repeat center center;
+    animation: christmas1 1s linear infinite;
+    -o-animation: christmas1 1s linear infinite;
+    -webkit-animation: christmas1 1s linear infinite;
+    -moz-animation: christmas1 1s linear infinite;
+  }
+  .christmas-info a:first-child:hover{
+    animation: none;
+    cursor:pointer;
+   }
+  .christmas-info a:nth-child(2){
+    top:8%;
+    left:85%;
+    width: 36px;
+    height: 36px;
+    font-size: 48px;
+    line-height: 28px;
+    text-align: center;
+    color: #8a8a8a;
+    background: #f6f6f6;
+    border-radius: 50%;
+  }
+  .christmas-info .christmas-img img{
+    position:absolute;
+    top:50%;
+    left:50%;
+    transform: translate(-50%, -50%);
+  }
+  .christmas-info .christmas-img img:nth-child(2){
+    animation: christmas2 25s infinite;
+    -moz-animation: christmas2 25s infinite;
+    -o-animation: christmas2 25s infinite;
+    -webkit-animation: christmas2 25s infinite;
+  }
+  .christmas-info .christmas-img img:nth-child(3){
+    animation: christmas3 30s infinite;
+    -o-animation: christmas3 30s infinite;
+    -webkit-animation: christmas3 30s infinite;
+    -moz-animation: christmas3 30s infinite;
+  }
+  @keyframes christmas1 {
+    0%{top:72%}
+    25%{top:71.9%}
+    50%{top:72.9%}
+    75%{top:71.9%}
+    100%{top:72%}
+  }
+  @keyframes christmas2 {
+    0%{top:40%;left:50%;opacity: 0}
+    25%{left:48%;opacity: 1}
+    50%{left:53%}
+    75%{left:48%; opacity: 1}
+    100%{top:45%;left:50%;opacity: 0}
+  }
+  @keyframes christmas3 {
+    0%{top:20%;left:50%;opacity: 0}
+    25%{left:48%;opacity: 1}
+    50%{left:53%}
+    75%{left:48%; opacity: 1}
+    100%{top:30%;left:50%;opacity: 0}
+  }
+  @-moz-keyframes christmas1 {
+    0%{top:72%}
+    25%{top:71.9%}
+    50%{top:72.9%}
+    75%{top:71.9%}
+    100%{top:72%}
+  }
+  @-moz-keyframes christmas2 {
+    0%{top:40%;left:50%;opacity: 0}
+    25%{left:48%;opacity: 1}
+    50%{left:53%}
+    75%{left:48%; opacity: 1}
+    100%{top:45%;left:50%;opacity: 0}
+  }
+  @-moz-keyframes christmas3 {
+    0%{top:20%;left:50%;opacity: 0}
+    25%{left:48%;opacity: 1}
+    50%{left:53%}
+    75%{left:48%; opacity: 1}
+    100%{top:30%;left:50%;opacity: 0}
+  }
+  @-webkit-keyframes christmas1 {
+    0%{top:72%}
+    25%{top:71.9%}
+    50%{top:72.9%}
+    75%{top:71.9%}
+    100%{top:72%}
+  }
+  @-webkit-keyframes christmas2 {
+    0%{top:40%;left:50%;opacity: 0}
+    25%{left:48%;opacity: 1}
+    50%{left:53%}
+    75%{left:48%; opacity: 1}
+    100%{top:45%;left:50%;opacity: 0}
+  }
+  @-webkit-keyframes christmas3 {
+    0%{top:20%;left:50%;opacity: 0}
+    25%{left:48%;opacity: 1}
+    50%{left:53%}
+    75%{left:48%; opacity: 1}
+    100%{top:30%;left:50%;opacity: 0}
+  }
+  @-o-keyframes christmas1 {
+    0%{top:72%}
+    25%{top:71.9%}
+    50%{top:72.9%}
+    75%{top:71.9%}
+    100%{top:72%}
+  }
+  @-o-keyframes christmas2 {
+    0%{top:40%;left:50%;opacity: 0}
+    25%{left:48%;opacity: 1}
+    50%{left:53%}
+    75%{left:48%; opacity: 1}
+    100%{top:45%;left:50%;opacity: 0}
+  }
+  @-o-keyframes christmas3 {
+    0%{top:20%;left:50%;opacity: 0}
+    25%{left:48%;opacity: 1}
+    50%{left:53%}
+    75%{left:48%; opacity: 1}
+    100%{top:30%;left:50%;opacity: 0}
+  }
+</style>

components/default/index.js

@@ -1,5 +1,7 @@
 import Header from './Header.vue'
 import Footer from './Footer.vue'
 import RightBar from './RightBar.vue'
+import Christmas from './christmas.vue'
+import ZhongQiu from './Zhongqiu.vue'
 
-export { Header, Footer, RightBar }
+export { Header, Footer, RightBar, Christmas, ZhongQiu }

layouts/main.vue

@@ -2,6 +2,8 @@
   <div id="main">
     <header-view v-if="!isInFrame"></header-view>
     <main-header></main-header>
+    <zhong-qiu></zhong-qiu>
+    <christmas v-if="isOpen" @listenopen="listenOpen"></christmas>
     <main-nav></main-nav>
     <nuxt/>
     <footer-view></footer-view>
@@ -9,22 +11,24 @@
   </div>
 </template>
 <script>
-  import { Header, Footer, RightBar } from '~components/default'
+  import { Header, Footer, RightBar, Christmas, ZhongQiu } from '~components/default'
   import { MainHeader, MainNav } from '~components/main'
   export default {
     name: 'main',
     components: {
       HeaderView: Header,
       FooterView: Footer,
+      Christmas,
+      ZhongQiu,
       RightBar,
       MainHeader,
       MainNav
     },
-//    data () {
-//      return {
-//        isInFrame: false
-//      }
-//    },
+    data () {
+      return {
+        isOpen: false
+      }
+    },
     head () {
       return {
         title: this.title,
@@ -34,7 +38,50 @@
         ]
       }
     },
+    beforeMount () {
+      let user = this.user.logged
+      let count = 1
+      let self = this
+      if (!user) {
+        setInterval(function () {
+          count++
+          if (count >= 30) {
+            count = 0
+            self.isOpen = true
+          }
+        }, 1000)
+      }
+    },
+    mounted () {
+      const nowDate = new Date()
+      const activeStartDate = new Date('2017/12/20 00:00:00')
+      const activeEndDate = new Date('2017/12/25 00:00:00')
+      if (nowDate > activeStartDate && nowDate < activeEndDate) {
+        const endTime = window.localStorage.getItem('endTime')
+        if (endTime) {
+          if (nowDate.getTime() - endTime >= 1000 * 60 * 2) {
+            this.isOpen = true
+            window.localStorage.setItem('endTime', nowDate.getTime())
+          } else {
+            this.isOpen = false
+          }
+        } else {
+          this.isOpen = true
+          window.localStorage.setItem('endTime', nowDate.getTime())
+        }
+      } else {
+        this.isOpen = false
+      }
+    },
+    methods: {
+      listenOpen () {
+        this.isOpen = false
+      }
+    },
     computed: {
+      user () {
+        return this.$store.state.option.user
+      },
       isInFrame () {
         let cookies = this.$store.state.option.cookies
         let cookieArr = cookies.split(';')