Merge branch 'featuer-wangcz-christmas20171215'

# Conflicts:
#	layouts/main.vue

components/default/christmas.vue

@@ -1,15 +1,29 @@
 <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-info" v-if="!hasNewYear">
+        <a href="/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 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/festival_yanhuaright.gif">
+          <img src="/images/christmas/festival_yanhualeft.gif">
+        </div>
+        <a href="/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,49 @@
     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;
+  }
+  .festival-info a:nth-child(4){
+    top:447px;
+    left:630px;
+    width: 45px;
+    height: 45px;
+    background: url('/images/christmas/close.png')no-repeat center center;
   }
   .christmas-info a:first-child{
     top:72%;
@@ -76,14 +130,9 @@
   .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%;
+    width: 45px;
+    height: 45px;
+    background: url('/images/christmas/close.png')no-repeat center center;
   }
   .christmas-info .christmas-img img{
     position:absolute;
@@ -91,6 +140,76 @@
     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 7s linear 3.5s infinite;
+    -o-animation:newYearImg 7s linear 3.5s infinite;
+    -webkit-animation:newYearImg 7s linear 3.5s infinite;
+    -moz-animation:newYearImg 7s linear 3.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;
+    -o-animation:newYearImg 5s linear 2.5s infinite;
+    -webkit-animation:newYearImg 5s linear 2.5s infinite;
+    -moz-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 7s linear infinite;
+    -o-animation:newYearImg 7s linear infinite;
+    -moz-animation:newYearImg 7s linear infinite;
+    -webkit-animation:newYearImg 7s 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;
+    opacity:.75;
+    /*animation: newYearYanHua 5s infinite;*/
+  }
+  .festival-info .festival-img img:nth-child(7){
+    top:420px;
+    left:-105px;
+    opacity:.75;
+    /*animation: newYearYanHua 5s 1s infinite;*/
+  }
   .christmas-info .christmas-img img:nth-child(2){
     animation: christmas2 25s infinite;
     -moz-animation: christmas2 25s infinite;
@@ -187,4 +306,57 @@
     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(-15deg);}
+    50%{transform: rotate(0deg);}
+    75%{transform: rotate(15deg);}
+    100%{transform: rotate(0deg);}
+  }
+  @-o-keyframes newYearImg {
+    0%{transform: rotate(0deg);}
+    25%{transform: rotate(-15deg);}
+    50%{transform: rotate(0deg);}
+    75%{transform: rotate(15deg);}
+    100%{transform: rotate(0deg);}
+  }
+  @-webkit-keyframes newYearImg {
+    0%{transform: rotate(0deg);}
+    25%{transform: rotate(-15deg);}
+    50%{transform: rotate(0deg);}
+    75%{transform: rotate(15deg);}
+    100%{transform: rotate(0deg);}
+  }
+  @-moz-keyframes newYearImg {
+    0%{transform: rotate(0deg);}
+    25%{transform: rotate(-15deg);}
+    50%{transform: rotate(0deg);}
+    75%{transform: rotate(15deg);}
+    100%{transform: rotate(0deg);}
+  }
+  @keyframes newYearYanHua {
+    0%{opacity:1;transform:scale(0);}
+    26%{opacity:1;transform:scale(.7);}
+    100%{transform:scale(1);opacity:0;}
+  }
 </style>

layouts/main.vue

@@ -2,7 +2,6 @@
   <div id="main">
     <header-view v-if="!isInFrame"></header-view>
     <main-header></main-header>
-    <christmas v-if="isOpen" @listenopen="listenOpen"></christmas>
     <main-nav></main-nav>
     <nuxt/>
     <footer-view></footer-view>
@@ -10,23 +9,22 @@
   </div>
 </template>
 <script>
-  import { Header, Footer, RightBar, Christmas } from '~components/default'
+  import { Header, Footer, RightBar } from '~components/default'
   import { MainHeader, MainNav } from '~components/main'
   export default {
     name: 'main',
     components: {
       HeaderView: Header,
       FooterView: Footer,
-      Christmas,
       RightBar,
       MainHeader,
       MainNav
     },
-    data () {
-      return {
-        isOpen: false
-      }
-    },
+//    data () {
+//      return {
+//        isInFrame: false
+//      }
+//    },
     head () {
       return {
         title: this.title,
@@ -36,47 +34,7 @@
         ]
       }
     },
-    mounted () {
-      let user = this.user.logged
-      let count = 1
-      let self = this
-      const nowDate = new Date()
-      const activeStartDate = new Date('2017/12/20 00:00:00')
-      const activeEndDate = new Date('2017/12/26 00:00:00')
-      if (nowDate > activeStartDate && nowDate < activeEndDate) {
-        const endTime = window.localStorage.getItem('endTime')
-        if (endTime) {
-          if (!user) {
-            setInterval(function () {
-              count++
-              if (count >= 60 * 60 * 2) {
-                count = 1
-                self.isOpen = true
-              }
-            }, 1000)
-          } else if (nowDate.getTime() - endTime >= 1000 * 60 * 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(';')

pages/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="index">
+    <christmas v-if="isOpen" @listenopen="listenOpen" :hasNewYear="hasNewYear"></christmas>
     <carousel>
       <kind-category @loadchild="loadProductKinds"></kind-category>
     </carousel>
@@ -11,10 +12,17 @@
 </template>
 <script>
   import { KindCategory, Carousel, Advert, FloorList, Partner, News } from '~components/home'
+  import { Christmas } from '~components/default'
 
   export default {
     name: 'index',
     layout: 'main',
+    data () {
+      return {
+        isOpen: false,
+        hasNewYear: false
+      }
+    },
     fetch ({ store }) {
       return Promise.all([
         store.dispatch('loadFloors'),
@@ -29,9 +37,53 @@
       Advert,
       FloorList,
       Partner,
-      News
+      News,
+      Christmas
+    },
+    mounted () {
+      let user = this.user.logged
+      let count = 1
+      let self = this
+      const nowDate = new Date()
+      const activeStartDate = new Date('2017/12/20 00:00:00')
+      const activeEndDate = new Date('2018/1/2 00:00:00')
+      const EndDate = new Date('2017/12/26 00:00:00')
+      this.hasNewYear = nowDate > EndDate
+      if (nowDate > activeStartDate && nowDate < activeEndDate) {
+        const endTime = window.localStorage.getItem('endTime')
+        if (!user) {
+          setInterval(function () {
+            count++
+            if (count >= 30) {
+              count = 1
+              self.isOpen = true
+            }
+          }, 1000)
+        }
+        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
+      }
+    },
+    computed: {
+      user () {
+        return this.$store.state.option.user
+      }
     },
     methods: {
+      listenOpen () {
+        this.isOpen = false
+      },
       loadProductKinds (id) {
         this.$store.dispatch('loadAllProductKinds', {id})
       }