增加元旦弹窗功能

components/default/christmas.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="christmas" v-if="hasOpen">
     <div class="christmas-modal">
-      <div class="christmas-info">
+      <div class="christmas-info" v-if="!hasNewYear">
         <a href="https://www.usoftmall.com/activity/business" target="_blank"></a>
         <a href="javascript:void(0)" @click="close">×</a>
         <div class="christmas-img">
@@ -10,6 +10,20 @@
           <img src="/images/christmas/christmas4.png">
         </div>
       </div>
+      <div class="festival-info" v-if="hasNewYear">
+        <div class="festival-img">
+          <img src="/images/christmas/festival_bg.png">
+          <img src="/images/christmas/festival_deng1.png">
+          <img src="/images/christmas/festival_deng2.png">
+          <img src="/images/christmas/festival_deng1.png">
+          <img src="/images/christmas/festival_deng2.png">
+          <img src="/images/christmas/festival2.gif">
+          <img src="/images/christmas/festival1.gif">
+        </div>
+        <a href="https://www.usoftmall.com/activity/business" target="_blank">马上开店</a>
+        <a @click="close">立刻购买</a>
+        <!--<a href="javascript:void(0)" @click="close">×</a>-->
+      </div>
     </div>
   </div>
 </template>
@@ -17,6 +31,7 @@
 <script>
     export default {
       name: 'christmas',
+      props: ['hasNewYear'],
       data () {
         return {
           hasOpen: true
@@ -53,10 +68,42 @@
     width:985px;
     height:740px;
   }
-  .christmas-info a{
+  .festival-info{
     position:absolute;
+    top:50%;
+    left:50%;
+    transform: translate(-50%, -50%);
+    width:683px;
+    height:613px;
+  }
+  .christmas-info a, .festival-info a{
+    position:relative;
     z-index:100000;
     display:block;
+    width:190px;
+    height:52px;
+    line-height: 52px;
+    text-align: center;
+  }
+  .festival-info a:nth-child(2){
+    top:566px;
+    left:123px;
+    font-size: 28px;
+    font-weight: bold;
+    animation: newYearBtn .2s infinite;
+    -moz-animation: newYearBtn .2s infinite;
+    -o-animation: newYearBtn .2s infinite;
+    -webkit-animation: newYearBtn .2s infinite;
+  }
+  .festival-info a:nth-child(3){
+    top:514px;
+    left:369px;
+    font-size: 28px;
+    font-weight: bold;
+    animation: newYearBtn .2s .1s infinite;
+    -moz-animation: newYearBtn .2s .1s infinite;
+    -o-animation: newYearBtn .2s .1s infinite;
+    -webkit-animation: newYearBtn .2s .1s infinite;
   }
   .christmas-info a:first-child{
     top:72%;
@@ -91,6 +138,66 @@
     left:50%;
     transform: translate(-50%, -50%);
   }
+  .festival-info .festival-img{
+    position:relative;
+  }
+  .festival-info .festival-img img{
+    position:absolute;
+  }
+  .festival-info .festival-img img:nth-child(2){
+    top:219px;
+    left:-35px;
+    -webkit-transform-origin: top center;
+    -moz-transform-origin: top center;
+    -ms-transform-origin: top center;
+    -o-transform-origin: top center;
+    transform-origin: top center;
+    animation:newYearImg 5s linear 2.5s infinite
+  }
+  .festival-info .festival-img img:nth-child(3){
+    top:80px;
+    left:17px;
+    -webkit-transform-origin: top center;
+    -moz-transform-origin: top center;
+    -ms-transform-origin: top center;
+    -o-transform-origin: top center;
+    transform-origin: top center;
+    animation:newYearImg 5s linear 2.5s infinite
+  }
+  .festival-info .festival-img img:nth-child(4){
+    top:219px;
+    left:641px;
+    -webkit-transform-origin: top center;
+    -moz-transform-origin: top center;
+    -ms-transform-origin: top center;
+    -o-transform-origin: top center;
+    transform-origin: top center;
+    animation:newYearImg 5s linear infinite;
+    -o-animation:newYearImg 5s linear infinite;
+    -moz-animation:newYearImg 5s linear infinite;
+    -webkit-animation:newYearImg 5s linear infinite;
+  }
+  .festival-info .festival-img img:nth-child(5){
+    top:80px;
+    left:613px;
+    -webkit-transform-origin: top center;
+    -moz-transform-origin: top center;
+    -ms-transform-origin: top center;
+    -o-transform-origin: top center;
+    transform-origin: top center;
+    animation:newYearImg 5s linear infinite;
+    -o-animation:newYearImg 5s linear infinite;
+    -moz-animation:newYearImg 5s linear infinite;
+    -webkit-animation:newYearImg 5s linear infinite;
+  }
+  .festival-info .festival-img img:nth-child(6){
+    top:-165px;
+    left:615px;
+  }
+  .festival-info .festival-img img:nth-child(7){
+    top:495px;
+    left:-105px;
+  }
   .christmas-info .christmas-img img:nth-child(2){
     animation: christmas2 25s infinite;
     -moz-animation: christmas2 25s infinite;
@@ -187,4 +294,31 @@
     75%{left:48%; opacity: 1}
     100%{top:30%;left:50%;opacity: 0}
   }
+  @keyframes newYearBtn {
+    0%{color:#000}
+    50%{color:#fe0000;}
+    100%{color:#000}
+  }
+  @-o-keyframes newYearBtn {
+    0%{color:#000}
+    50%{color:#fe0000;}
+    100%{color:#000}
+  }
+  @-moz-keyframes newYearBtn {
+    0%{color:#000}
+    50%{color:#fe0000;}
+    100%{color:#000}
+  }
+  @-webkit-keyframes newYearBtn {
+    0%{color:#000;}
+    50%{color:#fe0000;}
+    100%{color:#000;}
+  }
+  @keyframes newYearImg {
+    0%{transform: rotate(0deg);}
+    25%{transform: rotate(-30deg);}
+    50%{transform: rotate(0deg);}
+    75%{transform: rotate(30deg);}
+    100%{transform: rotate(0deg);}
+  }
 </style>

layouts/main.vue

@@ -2,7 +2,7 @@
   <div id="main">
     <header-view v-if="!isInFrame"></header-view>
     <main-header></main-header>
-    <christmas v-if="isOpen" @listenopen="listenOpen"></christmas>
+    <christmas v-if="isOpen" @listenopen="listenOpen" :hasNewYear="hasNewYear"></christmas>
     <main-nav></main-nav>
     <nuxt/>
     <footer-view></footer-view>
@@ -24,7 +24,8 @@
     },
     data () {
       return {
-        isOpen: false
+        isOpen: false,
+        hasNewYear: false
       }
     },
     head () {
@@ -42,7 +43,13 @@
       let self = this
       const nowDate = new Date()
       const activeStartDate = new Date('2017/12/20 00:00:00')
-      const activeEndDate = new Date('2017/12/25 00:00:00')
+      const activeEndDate = new Date('2018/1/2 00:00:00')
+      const EndDate = new Date('2017/12/26 00:00:00')
+      if (nowDate > EndDate) {
+        this.hasNewYear = true
+      } else {
+        this.hasNewYear = false
+      }
       if (nowDate > activeStartDate && nowDate < activeEndDate) {
         const endTime = window.localStorage.getItem('endTime')
         if (endTime) {
@@ -54,7 +61,7 @@
                 self.isOpen = true
               }
             }, 1000)
-          } else if (nowDate.getTime() - endTime >= 1000 * 60 * 2) {
+          } else if (nowDate.getTime() - endTime >= 1000 * 60) {
             this.isOpen = true
             window.localStorage.setItem('endTime', nowDate.getTime())
           } else {