christmas.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. <template>
  2. <div class="christmas" v-if="hasOpen">
  3. <div class="christmas-modal">
  4. <div class="christmas-info">
  5. <a href="https://www.usoftmall.com/activity/business" target="_blank"></a>
  6. <a href="javascript:void(0)" @click="close">×</a>
  7. <div class="christmas-img">
  8. <img src="/images/christmas/christmas1.png">
  9. <img src="/images/christmas/christmas2.png">
  10. <img src="/images/christmas/christmas4.png">
  11. </div>
  12. </div>
  13. </div>
  14. </div>
  15. </template>
  16. <script>
  17. export default {
  18. name: 'christmas',
  19. data () {
  20. return {
  21. hasOpen: true
  22. }
  23. },
  24. methods: {
  25. close () {
  26. this.hasOpen = false
  27. this.$emit('listenopen')
  28. }
  29. }
  30. }
  31. </script>
  32. <style scoped>
  33. .christmas{
  34. position:fixed;
  35. top:0;
  36. left:0;
  37. z-index:10000;
  38. width:100%;
  39. height:100%;
  40. }
  41. .christmas-modal{
  42. background:rgba(0,0,0,.6);
  43. width:100%;
  44. height:100%;
  45. }
  46. .christmas-info{
  47. position:absolute;
  48. top:50%;
  49. left:50%;
  50. transform: translate(-50%, -50%);
  51. width:985px;
  52. height:740px;
  53. }
  54. .christmas-info a{
  55. position:absolute;
  56. z-index:100000;
  57. display:block;
  58. }
  59. .christmas-info a:first-child{
  60. top:72%;
  61. left:39%;
  62. width:200px;
  63. height:50px;
  64. background: url('/images/christmas/btn.png')no-repeat center center;
  65. animation: christmas1 1s linear infinite;
  66. -o-animation: christmas1 1s linear infinite;
  67. -webkit-animation: christmas1 1s linear infinite;
  68. -moz-animation: christmas1 1s linear infinite;
  69. }
  70. .christmas-info a:first-child:hover{
  71. animation: none;
  72. cursor:pointer;
  73. }
  74. .christmas-info a:nth-child(2){
  75. top:8%;
  76. left:85%;
  77. width: 36px;
  78. height: 36px;
  79. font-size: 48px;
  80. line-height: 28px;
  81. text-align: center;
  82. color: #8a8a8a;
  83. background: #f6f6f6;
  84. border-radius: 50%;
  85. }
  86. .christmas-info .christmas-img img{
  87. position:absolute;
  88. top:50%;
  89. left:50%;
  90. transform: translate(-50%, -50%);
  91. }
  92. .christmas-info .christmas-img img:nth-child(2){
  93. animation: christmas2 25s infinite;
  94. -moz-animation: christmas2 25s infinite;
  95. -o-animation: christmas2 25s infinite;
  96. -webkit-animation: christmas2 25s infinite;
  97. }
  98. .christmas-info .christmas-img img:nth-child(3){
  99. animation: christmas3 30s infinite;
  100. -o-animation: christmas3 30s infinite;
  101. -webkit-animation: christmas3 30s infinite;
  102. -moz-animation: christmas3 30s infinite;
  103. }
  104. @keyframes christmas1 {
  105. 0%{top:72%}
  106. 25%{top:71.9%}
  107. 50%{top:72.9%}
  108. 75%{top:71.9%}
  109. 100%{top:72%}
  110. }
  111. @keyframes christmas2 {
  112. 0%{top:40%;left:50%;opacity: 0}
  113. 25%{left:48%;opacity: 1}
  114. 50%{left:53%}
  115. 75%{left:48%; opacity: 1}
  116. 100%{top:45%;left:50%;opacity: 0}
  117. }
  118. @keyframes christmas3 {
  119. 0%{top:20%;left:50%;opacity: 0}
  120. 25%{left:48%;opacity: 1}
  121. 50%{left:53%}
  122. 75%{left:48%; opacity: 1}
  123. 100%{top:30%;left:50%;opacity: 0}
  124. }
  125. @-moz-keyframes christmas1 {
  126. 0%{top:72%}
  127. 25%{top:71.9%}
  128. 50%{top:72.9%}
  129. 75%{top:71.9%}
  130. 100%{top:72%}
  131. }
  132. @-moz-keyframes christmas2 {
  133. 0%{top:40%;left:50%;opacity: 0}
  134. 25%{left:48%;opacity: 1}
  135. 50%{left:53%}
  136. 75%{left:48%; opacity: 1}
  137. 100%{top:45%;left:50%;opacity: 0}
  138. }
  139. @-moz-keyframes christmas3 {
  140. 0%{top:20%;left:50%;opacity: 0}
  141. 25%{left:48%;opacity: 1}
  142. 50%{left:53%}
  143. 75%{left:48%; opacity: 1}
  144. 100%{top:30%;left:50%;opacity: 0}
  145. }
  146. @-webkit-keyframes christmas1 {
  147. 0%{top:72%}
  148. 25%{top:71.9%}
  149. 50%{top:72.9%}
  150. 75%{top:71.9%}
  151. 100%{top:72%}
  152. }
  153. @-webkit-keyframes christmas2 {
  154. 0%{top:40%;left:50%;opacity: 0}
  155. 25%{left:48%;opacity: 1}
  156. 50%{left:53%}
  157. 75%{left:48%; opacity: 1}
  158. 100%{top:45%;left:50%;opacity: 0}
  159. }
  160. @-webkit-keyframes christmas3 {
  161. 0%{top:20%;left:50%;opacity: 0}
  162. 25%{left:48%;opacity: 1}
  163. 50%{left:53%}
  164. 75%{left:48%; opacity: 1}
  165. 100%{top:30%;left:50%;opacity: 0}
  166. }
  167. @-o-keyframes christmas1 {
  168. 0%{top:72%}
  169. 25%{top:71.9%}
  170. 50%{top:72.9%}
  171. 75%{top:71.9%}
  172. 100%{top:72%}
  173. }
  174. @-o-keyframes christmas2 {
  175. 0%{top:40%;left:50%;opacity: 0}
  176. 25%{left:48%;opacity: 1}
  177. 50%{left:53%}
  178. 75%{left:48%; opacity: 1}
  179. 100%{top:45%;left:50%;opacity: 0}
  180. }
  181. @-o-keyframes christmas3 {
  182. 0%{top:20%;left:50%;opacity: 0}
  183. 25%{left:48%;opacity: 1}
  184. 50%{left:53%}
  185. 75%{left:48%; opacity: 1}
  186. 100%{top:30%;left:50%;opacity: 0}
  187. }
  188. </style>