增加圣诞节弹窗效果

components/default/christmas.vue

@@ -0,0 +1,210 @@
+<template>
+  <div class="christmas" v-if="isOpen">
+    <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 {
+          isOpen: false
+        }
+      },
+      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) {
+              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: {
+        close () {
+          this.isOpen = false
+        }
+      }
+    }
+</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,6 @@
 import Header from './Header.vue'
 import Footer from './Footer.vue'
 import RightBar from './RightBar.vue'
+import Christmas from './christmas.vue'
 
-export { Header, Footer, RightBar }
+export { Header, Footer, RightBar, Christmas }

layouts/main.vue

@@ -3,19 +3,21 @@
     <header-view v-if="!isInFrame"></header-view>
     <main-header></main-header>
     <main-nav></main-nav>
+    <christmas></christmas>
     <nuxt/>
     <footer-view></footer-view>
     <right-bar></right-bar>
   </div>
 </template>
 <script>
-  import { Header, Footer, RightBar } from '~components/default'
+  import { Header, Footer, RightBar, Christmas } from '~components/default'
   import { MainHeader, MainNav } from '~components/main'
   export default {
     name: 'main',
     components: {
       HeaderView: Header,
       FooterView: Footer,
+      Christmas,
       RightBar,
       MainHeader,
       MainNav