mall-web-ssr/components/default/christmas.vue

<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>