Skip to content

L
lewanguanwang
Commit e3147789 authored by 苏尧华's avatar 苏尧华
Browse files
Options

待测试版

Signed-off-by: 's avatar苏尧华 <suyaohua@llewan.com>
parent 125f900e
Hide whitespace changes
Inline Side-by-side
Showing with 2331 additions and 16 deletions
package-lock.json
View file @ e3147789
......@@ -1698,6 +1698,11 @@
"integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
"dev": true
},
"animate.css": {
"version": "3.7.2",
"resolved": "https://registry.npmjs.org/animate.css/-/animate.css-3.7.2.tgz",
"integrity": "sha512-0bE8zYo7C0KvgOYrSVfrzkbYk6IOTVPNqkiHg2cbyF4Pq/PXzilz4BRWA3hwEUBoMp5VBgrC29lQIZyhRWdBTw=="
},
"ansi-colors": {
"version": "3.2.4",
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
......
package.json
View file @ e3147789
......@@ -8,6 +8,7 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"animate.css": "^3.7.2",
"core-js": "^2.6.5",
"vue": "^2.6.10",
"vue-router": "^3.0.3"
......
public/animate.min.css 0 → 100644
View file @ e3147789
@charset "UTF-8";
/*!
* animate.css -https://daneden.github.io/animate.css/
* Version - 3.7.2
* Licensed under the MIT license - http://opensource.org/licenses/MIT
*
* Copyright (c) 2019 Daniel Eden
*/
@-webkit-keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}.headShake{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-name:headShake;animation-name:headShake}@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}.swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}@keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.jello{-webkit-animation-name:jello;animation-name:jello;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}.heartBeat{-webkit-animation-name:heartBeat;animation-name:heartBeat;-webkit-animation-duration:1.3s;animation-duration:1.3s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}.bounceIn{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}.flipOutX{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}.flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}@keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes jackInTheBox{0%{opacity:0;-webkit-transform:scale(.1) rotate(30deg);transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes jackInTheBox{0%{opacity:0;-webkit-transform:scale(.1) rotate(30deg);transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.jackInTheBox{-webkit-animation-name:jackInTheBox;animation-name:jackInTheBox}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}@keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}@-webkit-keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.delay-1s{-webkit-animation-delay:1s;animation-delay:1s}.animated.delay-2s{-webkit-animation-delay:2s;animation-delay:2s}.animated.delay-3s{-webkit-animation-delay:3s;animation-delay:3s}.animated.delay-4s{-webkit-animation-delay:4s;animation-delay:4s}.animated.delay-5s{-webkit-animation-delay:5s;animation-delay:5s}.animated.fast{-webkit-animation-duration:.8s;animation-duration:.8s}.animated.faster{-webkit-animation-duration:.5s;animation-duration:.5s}.animated.slow{-webkit-animation-duration:2s;animation-duration:2s}.animated.slower{-webkit-animation-duration:3s;animation-duration:3s}@media (prefers-reduced-motion:reduce),(print){.animated{-webkit-animation-duration:1ms!important;animation-duration:1ms!important;-webkit-transition-duration:1ms!important;transition-duration:1ms!important;-webkit-animation-iteration-count:1!important;animation-iteration-count:1!important}}
\ No newline at end of file
public/common.css 0 → 100644
View file @ e3147789
/*!
* by zhangxinxu(.com) 2010-?
* https://github.com/zhangxinxu/zxx.lib.css
* under MIT license
*/
/*
* 2010-07-12 v1.0
* 2010-07-21 v1.1 添加block元素居中之auto属性，增加鼠标手形样式
* 2010-09-17 v1.2 添加z-index层级属性
* 2010-09-29 v1.3 添加break-word属性
* 2010-11-12 v1.4 添加white-space:nowrap;值，去掉Georgia字体
* 2011-01-17 v1.5 去除red颜色，添加cell双栏自适应属性，z样式影响扩至IE7，样式位置以及顺序调整，dib样式忽略Firefox 2，去除Lucida Console字体，添加Verdana字体，添加letter-spacing样式
* 2011-07-28 v1.6 增加vertical-align:bottom属性，增加点点点效果多样
* 2012-01-18 v1.7 点点点效果样式去除-moz-前缀，多余；增加修复cell下连续单词字符换行问题；去除.ovs{overflow:scroll;}
去除.vimg{margin-bottom:-3px;}
* 2013-05-24 v2.0 为开源到github上做大改
1. 增加margin负值范围
2. margin/padding增加15px/30px组
3. 中文字体改成英文字符表示，例如“微软雅黑” → "microsoft yahei"
4. 新增border系列, background-color系列, width(fixed value/percent value)系列以及.ell以下所有样式
* 2013-07-31 v2.1 inline_any等12px字体大小限制去除，inline_box的-3px间距缩进改成-.25em, 以便适应各种字体大小环境
* 2013-09-13 v2.2 12px字体大小限制修改为1px笔误了，应该为1em, 删除-ms-transition
* 2013-10-11 v2.3 float_seven一直没删除，清掉。增加两个绝对定位隐藏：abs_out和abs_clip
* 2013-11-23 v2.4 add p0, ova, f18. 去除trans中-moz-和-o-私有前缀
* 2014-02-26 v2.5 fix two name mistake
* 2014-02-27 v2.6 add fl
* 2015-02-08 v2.7 具体改动有：
1. 添加h0
2. 修改 .vn -2px → -4px
3. zoom增加webkit重绘修复
4. 去除.trans非webkit私有前缀
5. loading背景图使用about:blank代替
* 2015-02-09 v2.8 具体改动有：
1. 添加.lh0
2. 移除.f10, .f13, 添加f28，因为现代web站点字号越来越大
3. .n添加white-space: normal声明
4. 移除.vn使用具体负值代替，因为图标+不同字号，vertical-align的负值也不同，新增.v-1 ~ .v-5 按钮与文字的垂直对齐也可使用，兼容IE6+
5. 移除.z中-webkit-transform: translateZ(0)此声明虽然能修复一些重绘问题，但同时也会带来垂直位置，position:fixed限制，影响overflow对absolute元素限制等一系列问题，移除之~
6. 移除cell_bk, 若遭遇不换行问题，使用.cell_ovh代替~
7. .trans中时间0.3s → .3s
8. .disabled禁用大改造，使适用性更广泛
9. 增加.opa0 透明度0
10. float percent more accurate for IE8+
* 2016-03-25 v2.9 本次改动有：
1. fix w300宽度值为280px的错误
2. dib增加div,p等标签的IE7特别处理，之前建议使用inline_any
3. add h30, lh30，因为随着大屏普及，页面元素尺寸更大了
4. transition时间从.3s → .15s
5. pointer-events增加-ms-私有前缀for IE10+
* 2017-02-15 v2.10 本次改动
1. 修正.h16应该是.h14的问题
*/
/* ---------------------single CSS----------------------- */
/* display */
.dn{display:none;}
.di{display:inline;}
.db{display:block;}
.dib{display:inline-block;}
div.dib{*display:inline; *zoom:1;}/* other block level tag(eg. p, li, h1~h6), using 'inline_any' instead */
/* height */
.h0{height:0;}
.h14{height:14px;}
.h16{height:16px;}
.h18{height:18px;}
.h20{height:20px;}
.h22{height:22px;}
.h24{height:24px;}
.h30{height:30px;}
/* width */
/* fixed width value */
.w20{width:20px;}
.w50{width:50px;}
.w70{width:70px;}
.w100{width:100px;}
.w120{width:120px;}
.w140{width:140px;}
.w160{width:160px;}
.w180{width:180px;}
.w200{width:200px;}
.w220{width:220px;}
.w250{width:250px;}
.w280{width:280px;}
.w300{width:300px;}
.w320{width:320px;}
.w360{width:360px;}
.w400{width:400px;}
.w460{width:460px;}
.w500{width:500px;}
.w600{width:600px;}
.w640{width:640px;}
.w700{width:700px;}
/* percent width value */
.pct10{width:10%;}
.pct15{width:15%;}
.pct20{width:20%;}
.pct25{width:25%;}
.pct30{width:30%;}
.pct33{width:33.3%;}
.pct40{width:40%;}
.pct50{width:50%;}
.pct60{width:60%;}
.pct66{width:66.6%;}
.pct70{width:70%;}
.pct75{width:75%;}
.pct80{width:80%;}
.pct90{width:90%;}
.pct100{width:100%;}
/* line-height */
.lh0{line-height:0;}
.lh14{line-height:14px;}
.lh16{line-height:16px;}
.lh18{line-height:18px;}
.lh20{line-height:20px;}
.lh22{line-height:22px;}
.lh24{line-height:24px;}
.lh30{line-height:30px;}
/* margin */
.m0{margin:0;}
.ml1{margin-left:1px;}
.ml2{margin-left:2px;}
.ml5{margin-left:5px;}
.ml10{margin-left:10px;}
.ml15{margin-left:15px;}
.ml20{margin-left:20px;}
.ml30{margin-left:30px;}
.mr1{margin-right:1px;}
.mr2{margin-right:2px;}
.mr5{margin-right:5px;}
.mr10{margin-right:10px;}
.mr15{margin-right:15px;}
.mr20{margin-right:20px;}
.mr30{margin-right:30px;}
.mt1{margin-top:1px;}
.mt2{margin-top:2px;}
.mt5{margin-top:5px;}
.mt10{margin-top:10px;}
.mt15{margin-top:15px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mb1{margin-bottom:1px;}
.mb2{margin-bottom:2px;}
.mb5{margin-bottom:5px;}
.mb10{margin-bottom:10px;}
.mb15{margin-bottom:15px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
/* margin negative */
.ml-1{margin-left:-1px;}
.mr-1{margin-right:-1px;}
.mt-1{margin-top:-1px;}
.mb-1{margin-bottom:-1px;}
.ml-3{margin-left:-3px;}
.mr-3{margin-right:-3px;}
.mt-3{margin-top:-3px;}
.mb-3{margin-bottom:-3px;}
.ml-20{margin-left:-20px;}
.mr-20{margin-right:-20px;}
.mt-20{margin-top:-20px;}
.mb-20{margin-bottom:-20px;}
/* padding */
.p0{padding:0;}
.p1{padding:1px;}
.pl1{padding-left:1px;}
.pt1{padding-top:1px;}
.pr1{padding-right:1px;}
.pb1{padding-bottom:1px;}
.p2{padding:2px;}
.pl2{padding-left:2px;}
.pt2{padding-top:2px;}
.pr2{padding-right:2px;}
.pb2{padding-bottom:2px;}
.pl5{padding-left:5px;}
.p5{padding:5px;}
.pt5{padding-top:5px;}
.pr5{padding-right:5px;}
.pb5{padding-bottom:5px;}
.p10{padding:10px;}
.pl10{padding-left:10px;}
.pt10{padding-top:10px;}
.pr10{padding-right:10px;}
.pb10{padding-bottom:10px;}
.p15{padding:15px;}
.pl15{padding-left:15px;}
.pt15{padding-top:15px;}
.pr15{padding-right:15px;}
.pb15{padding-bottom:15px;}
.p20{padding:20px;}
.pl20{padding-left:20px;}
.pt20{padding-top:20px;}
.pr20{padding-right:20px;}
.pb20{padding-bottom:20px;}
.p30{padding:30px;}
.pl30{padding-left:30px;}
.pt30{padding-top:30px;}
.pr30{padding-right:30px;}
.pb30{padding-bottom:30px;}
/* border-color name rule: border(b)-position(l/r/t/b/d)-width(null/2)-style(null/sh)-color(first one letter/first two letter) |-> All colors are safe color*/
.bdc{border:1px solid #ccc;}
.blc{border-left:1px solid #ccc;}
.brc{border-right:1px solid #ccc;}
.btc{border-top:1px solid #ccc;}
.bbc{border-bottom:1px solid #ccc;}
.bdd{border:1px solid #ddd;}
.bld{border-left:1px solid #ddd;}
.brd{border-right:1px solid #ddd;}
.btd{border-top:1px solid #ddd;}
.bbd{border-bottom:1px solid #ddd;}
.bde{border:1px solid #eee;}
.ble{border-left:1px solid #eee;}
.bre{border-right:1px solid #eee;}
.bte{border-top:1px solid #eee;}
.bbe{border-bottom:1px solid #eee;}
/* background-color name rule: bg - (key word/Hex color) |-> All colors are safe color */
.bgwh{background-color:#fff;}
.bgfb{background-color:#fbfbfb;}
.bgf5{background-color:#f5f5f5;}
.bgf0{background-color:#f0f0f0;}
.bgeb{background-color:#ebebeb;}
.bge0{background-color:#e0e0e0;}
/* safe color */
.g0{color:#000;}
.g3{color:#333;}
.g6{color:#666;}
.g9{color:#999;}
.gc{color:#ccc;}
.wh{color:white;}
/* font-size */
.f0{font-size:0;}
.f12{font-size:12px;}
.f13{font-size:13px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.f18{font-size:18px;}
.f20{font-size:20px;}
.f22{font-size:22px;}
.f24{font-size:24px;}
.f28{font-size:28px;}
/* font-family */
.fa{font-family:Arial;}
.ft{font-family:Tahoma;}
.fv{font-family:Verdana;}
.fs{font-family:Simsun;}
.fl{font-family:'Lucida Console';}
.fw{font-family:'Microsoft Yahei';}
/* font-style */
.n{font-weight:normal; font-style:normal; white-space: normal;}
.b{font-weight:bold;}
.i{font-style:italic;}
/* text-align */
.tc{text-align:center;}
.tr{text-align:right;}
.tl{text-align:left;}
.tj{text-align:justify;}
/* text-decoration */
.tdl{text-decoration:underline;}
.tdn,.tdn:hover,.tdn a:hover,a.tdl:hover{text-decoration:none;}
/* letter-spacing */
.lt-1{letter-spacing:-1px;}
.lt0{letter-spacing:0;}
.lt1{letter-spacing:1px;}
/* white-space */
.nowrap{white-space:nowrap;}
/* word-wrap */
.bk{word-wrap:break-word;}
/* vertical-align */
.vm{vertical-align:middle;}
.vtb{vertical-align:text-bottom;}
.vb{vertical-align:bottom;}
.vt{vertical-align:top;}
.v-1{vertical-align:-1px;}
.v-2{vertical-align:-2px;}
.v-3{vertical-align:-3px;}
.v-4{vertical-align:-4px;}
.v-5{vertical-align:-5px;}
/* float */
.l{float:left;}
.r{float:right;}
/* clear */
.cl{clear:both;}
/* position */
.rel{position:relative;}
.abs{position:absolute;}
/*z-index*/
.zx1{z-index:1;}
.zx2{z-index:2;}
/* cursor */
.poi{cursor:pointer;}
.def{cursor:default;}
/* overflow */
.ovh{overflow:hidden;}
.ova{overflow:auto;}
/* visibility */
.vh{visibility:hidden;}
.vv{visibility:visible;}
/* opacity */
.opa0{opacity:0; filer:alpha(opacity=0);}
/* zoom */
.z{*zoom:1;}
/* ------------------- multiply CSS ------------------ */
/* 块状元素水平居中 */
.auto{margin-left:auto; margin-right:auto;}
/* 清除浮动*/
.fix{*zoom:1;}
.fix:after{display:table; content:''; clear:both;}
/* 基于display:table-cell的自适应布局 */
.cell{display:table-cell; *display:inline-block; width:2000px; *width:auto;}
/* 双栏自适应cell部分连续英文字符换行 */
.cell2{overflow:hidden; _display:inline-block;}
/* 单行文字溢出虚点显 示*/
.ell{text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
/* css3过渡动画效果 */
.trans{
-webkit-transition:all .15s;
transition:all .15s;
}
/* 大小不定元素垂直居中 */
.dib_vm{display:inline-block; width:0; height:100%; vertical-align:middle;}
/* 加载中背景图片 - 如果您使用该CSS小库，务必修改此图片地址 */
.loading{background:url(about:blank) no-repeat center;}
/* 无框文本框文本域 */
.bd_none{border:0; outline:none;}
/* 绝对定位隐藏 */
.abs_out{position:absolute; left:-999em; top:-999em;}
.abs_clip{position:absolute; clip:rect(0 0 0 0);}
/* 按钮禁用 */
.disabled{outline:0 none; cursor:default!important; opacity:.4; filer:alpha(opacity=40); -ms-pointer-events:none; pointer-events:none;}
/*inline-block与float等宽列表*/
.inline_box{font-size:1em; letter-spacing:-.25em; font-family:Arial;}
.inline_two, .inline_three, .inline_four, .inline_five, .inline_six, .inline_any{display:inline-block; *display:inline; letter-spacing:0; vertical-align:top; *zoom:1;}
.float_two, .float_three, .float_four, .float_five, .float_six{float:left;}
.inline_two, .float_two{width:50%; *width:49.9%;}
.inline_three, .float_three{width:33.33333%; *width:33.3%;}
.inline_four, .float_four{width:25%; *width:24.9%;}
.inline_five, .float_five{width:20%; *width:19.9%;}
.inline_six, .float_six{width:16.66666%; *width:16.6%;}
.inline_fix{display:inline-block; width:100%; height:0; overflow:hidden;}
\ No newline at end of file
public/favicon.ico
View replaced file @ 125f900e View file @ e3147789
public/favicon.ico

4.19 KB | W: | H:

public/favicon.ico

6.03 KB | W: | H:

public/favicon.ico
public/favicon.ico
public/favicon.ico
public/favicon.ico
  • 2-up
  • Swipe
  • Onion skin
public/index.html
View file @ e3147789
......@@ -3,9 +3,20 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="viewport" content="width=750,initial-scale=0.5,minimum-scale=0.1,maximum-scale=2,user-scalable=yes">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>lewan</title>
<link rel="stylesheet" href="<%= BASE_URL %>common.css">
<link rel="stylesheet" href="<%= BASE_URL %>animate.min.css">
<title>乐网科技官网</title>
<meta name="keywords" content="乐玩,乐玩游戏,广州乐玩游戏,广州乐玩信息科技有限公司">
<meta name="description" content="乐玩游戏自创建以来，一直致力于小游戏的研发和运营，成员包括阿里、网易、4399、百田等游戏厂商的优秀人才.">
<script>
// var clientWidth = document.documentElement.clientWidth,
// viewport = document.querySelector('meta[name="viewport"]');
// viewportScale = clientWidth / 1920;
// viewportWidth = 1920;
// viewport.setAttribute('content', 'width=' + viewportWidth + ', initial-scale=' + viewportScale + ', maximum-scale=2' + ', user-scalable=0');
</script>
</head>
<body>
<noscript>
......
src/App.vue
View file @ e3147789
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
<div id="nav" class="abs" :class="activeClass">
<img class="logo l mt10" v-if="activeClass=='home'" src="./assets/logo.png" alt="logo" />
<img class="logo l mt10" v-else src="./assets/logo2.png" alt="logo" />
<ul class="list r">
<li class="l" @click="changePage('home')"><router-link class="trans" to="/">首页</router-link></li>
<li class="l" @click="changePage('about')"><router-link class="trans" to="/business">商务合作</router-link></li>
<li class="l" @click="changePage('about')"><router-link class="trans" to="/about">关于我们</router-link></li>
</ul>
</div>
<router-view/>
</div>
</template>
<script>
export default {
data () {
return {
activeClass: 'home'
}
},
methods: {
changePage: function (page) {
// console.log(page)
this.activeClass = page
}
},
created () {
console.log(222, window.location.hash)
let hashValue = window.location.hash.replace('#/', '')
if (hashValue === '') {
this.activeClass = 'home'
} else {
this.activeClass = 'about'
}
}
}
</script>
<style lang="scss">
html{
font-size: 14px;
body {
margin: 0;
padding: 0;
}
}
a {
text-decoration: none;
}
ul {
padding: 0;
}
li {
list-style-type: none;
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
min-width: 1380px;
}
#nav {
padding: 30px;
width: 100%;
min-width: 1380px;
height: 100px;
z-index: 10;
a {
font-weight: bold;
color: #2c3e50;
font-size: 18px;
&.router-link-exact-active {
color: #42b983;
font-size: 20px;
font-weight: bold;
}
}
&.home {
a {
color: rgb(238,238,238);
&.router-link-exact-active {
color: rgb(255,255,255);
}
}
}
&.about {
background: rgb(255,255,255);
a {
color: rgb(153,153,153);
&.router-link-exact-active {
color: rgb(51,51,51);
}
}
}
.logo {
display: block;
margin-top: 20px;
height: 60px;
margin-left: 54px;
}
.list {
margin-right: 54px;
margin-top: 38px;
li {
margin-left: 50px;
}
}
}
......
src/assets/logo.png
View replaced file @ 125f900e View file @ e3147789
src/assets/logo.png

6.69 KB | W: | H:

src/assets/logo.png

4.33 KB | W: | H:

src/assets/logo.png
src/assets/logo.png
src/assets/logo.png
src/assets/logo.png
  • 2-up
  • Swipe
  • Onion skin
src/components/PageFooter.vue 0 → 100644
View file @ e3147789
<template>
<div class="footer cl">
<div class="contact auto ovh">
<img class="l logo" src="../assets/logo2.png" alt="logo">
<div class="l contact-item">
<div class="f22 g3 tl mt20">广州乐玩信息科技有限公司</div>
<ul class="g6 f16 contact-detail ovh mt5">
<li class="l">公司地址：广州市海珠区南丰汇15楼</li>
<li class="l split">|</li>
<li class="l">联系电话：<a class="g6" href="tel:020-88888888">020-89636359</a></li>
<li class="l split">|</li>
<li class="l">联系邮箱：<a class="g6" href="mailto:kefu@llewan.com">kefu@llewan.com</a></li>
</ul>
</div>
</div>
<div class="split-line"></div>
<div class="copyright f18 g3 mt30">Copyright © {{year}} 广州乐玩信息科技有限公司&nbsp;&nbsp;&nbsp;版权所有 All Rights Reserve.</div>
<div class="f18 g3 mt1 icp auto"><a class="f18 g3" href="http://www.miitbeian.gov.cn/" target="_blank">粤ICP备17088117号-2</a></div>
</div>
</template>
<script>
export default {
name: 'PageFooter',
props: {
msg: String
},
data () {
return {
year: new Date().getFullYear()
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.footer {
padding: 68px 0;
background: rgb(245,246,249);
.logo {
width: 208px;
height: 80px;
}
.contact {
width: 1080px;
.split {
margin: 0 42px;
}
}
.contact-item {
margin-left: 30px;
}
.contact-detail {
padding: 0;
}
.split-line {
width: 1000px;
margin: 70px auto 0 auto;
border-bottom: 1px solid rgba($color: #333333, $alpha: 0.2);
}
.icp {
background: url('../assets/icon-police.png') no-repeat left center / 14px 16px;
width: 215px;
}
}
</style>
src/data/BusinessData.js 0 → 100644
View file @ e3147789
export default {
hotGame: [
{
id: 1,
gameImage: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/02/anli01.jpg',
qrCode: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/qrcode01.jpg',
gameName: '欢乐农场主',
gameType: '(电商扶贫合作)',
gameDesc: '合作品牌：腾讯公益',
hotGameActive: ''
},
{
id: 2,
gameImage: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/02/anli02.jpg',
qrCode: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/qrcode03.jpg',
gameName: '直通天际',
gameType: '(迪拜塔旅游商业合作)',
gameDesc: '合作品牌：Emaar集团',
hotGameActive: ''
},
{
id: 3,
gameImage: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/02/anli03.jpg',
qrCode: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/qrcode02.jpg',
gameName: '萌鸡小队画画',
gameType: '(IP精品战略合作)',
gameDesc: '合作品牌：萌鸡小队动画',
hotGameActive: ''
},
{
id: 4,
gameImage: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/02/anli04.jpg',
qrCode: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/qrcode04.jpg',
gameName: '超级飞侠冲冲冲',
gameType: '(IP精品战略合作)',
gameDesc: '合作品牌：超级飞侠动画',
hotGameActive: ''
}
],
cooperationGame: [
{
id: 1,
gameImage: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/pinpai01.jpg',
qrCode: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/qrcode01.jpg',
gameName: '《欢乐农场主》 电商扶贫合作',
gameDesc: '《欢乐农场主》是国家财政部、腾讯微信、乐玩游戏联手致力于帮助国家贫困县宣传和农产品销售的公益项目，通过游戏的形式展现也是希望用更加愉快温暖的方式，让更多的',
active: '',
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/icon01.jpg'
},
{
id: 2,
gameImage: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/pinpai03.jpg',
qrCode: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/qrcode03.jpg',
gameName: '《直通天际》 迪拜塔旅游商业合作',
gameDesc: '人们对于高空、未知的探索总是欲望无穷，因此成就了迪拜塔（又名哈利法塔）和它相关的小游戏项目，游戏采用了迪拜塔的现代建筑风格用叠高楼的形式展现迪拜塔的高大雄伟。',
active: '',
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/icon03.jpg'
},
{
id: 3,
gameImage: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/pinpai02.jpg',
qrCode: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/qrcode02.jpg',
gameName: '《萌鸡小队画画》 IP精品战略合作',
gameDesc: '《萌鸡小队》动画有着70亿庞大的网络视频点击量，收罗了一群忠实的小粉丝；为做到寓教于乐的效果，特选IP+画画的游戏模式，自主创新角色舞蹈+音乐的玩法，大大增加了产品代入感，建立产品壁垒，让小朋友的天分更加自由的发挥',
active: '',
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/icon02.jpg'
},
{
id: 4,
gameImage: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/pinpai04.jpg',
qrCode: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/qrcode04.jpg',
gameName: '《超级飞侠冲冲冲》 IP精品战略合作',
gameDesc: '《超级飞侠》是一部全网点击百亿，多角色市场反响火爆的儿童动画，宣传以帮助别人为主基调非常正能量，我们希望小朋友能够通过游戏加深对每个飞侠的角色认知，从而提高IP认知度，并帮助品牌进行一定的周边销售',
active: '',
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/icon04.jpg'
}
],
allGames: [
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon01.png',
gameName: '豆腐消消消'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon02.jpg',
gameName: '非常六合一'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon03.jpg',
gameName: '宇宙大冒险'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon04.jpg',
gameName: '最强切水果'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon05.png',
gameName: '爆锤损友'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon06.png',
gameName: '最强消数字'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon07.png',
gameName: '答题大乱斗'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon08.png',
gameName: '最强弹力球'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon09.jpg',
gameName: '划线球球'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon10.png',
gameName: '最强预测'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon11.png',
gameName: '最强球爱'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon12.jpg',
gameName: '最强吃鸡王'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon13.jpg',
gameName: '豆腐消消消'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon14.jpg',
gameName: '最强嘴炮王'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon15.jpg',
gameName: '脑力大火拼'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon16.png',
gameName: '最强菊王'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon17.png',
gameName: '去吧皮卡叔'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon18.png',
gameName: '盗猫笔记'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon19.png',
gameName: '一起切水果'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon20.png',
gameName: '猫咪大乱斗'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon21.png',
gameName: '养猫达人'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon22.png',
gameName: '全民飞车3D'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon23.png',
gameName: '我要养条狗'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon24.png',
gameName: '怪兽连连线'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon25.png',
gameName: '进击吧足球'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon26.png',
gameName: '一起来切菜'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon27.jpg',
gameName: '水果大师'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon28.jpg',
gameName: '劲爆足球'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon29.jpg',
gameName: '王者俄罗斯方块'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon30.jpg',
gameName: '宝宝开餐厅'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon31.jpg',
gameName: '飞机大战3D'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon32.png',
gameName: '疯狂怪兽车'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon33.png',
gameName: '数字连连消'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon34.png',
gameName: '超级飞侠'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon35.jpg',
gameName: '萌鸡小队画画'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon36.png',
gameName: '一起切糖果'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon37.jpg',
gameName: '欢乐农场主'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon38.jpg',
gameName: '直通天际'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon39.png',
gameName: '本宫能活100集'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon40.png',
gameName: '步战三国'
}
]
}
src/data/HomeData.js 0 → 100644
View file @ e3147789
export default {
hotGame: [
{
id: 1,
gameImage: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/game01.jpg',
qrCode: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/qrgame01.jpg',
gameName: '一起切水果',
gameDesc: '现象级传播4000万用户，广告曝光超5亿次',
hotGameActive: ''
},
{
id: 2,
gameImage: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/game02.jpg',
qrCode: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/qrgame02.jpg',
gameName: '我要养条狗',
gameDesc: '购买合成收集类游戏，高峰期近40wDAU',
hotGameActive: ''
},
{
id: 3,
gameImage: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/game03.jpg',
qrCode: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/qrgame03.jpg',
gameName: '最强消数字',
gameDesc: '德州风格数字消除游戏，一旦入迷不可自拔',
hotGameActive: ''
},
{
id: 4,
gameImage: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/game04.jpg',
qrCode: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/qrgame04.jpg',
gameName: '进击吧足球',
gameDesc: '3D，模拟踢球游戏',
hotGameActive: ''
},
{
id: 5,
gameImage: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/game05.jpg',
qrCode: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/qrgame05.jpg',
gameName: '疯狂怪兽车',
gameDesc: '操控各种外形的赛车在跑道疾驰',
hotGameActive: ''
},
{
id: 6,
gameImage: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/game06.jpg',
qrCode: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/qrgame06.jpg',
gameName: '盗猫笔记',
gameDesc: '猫咪养成，互动游戏',
hotGameActive: ''
},
{
id: 7,
gameImage: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/game07.jpg',
qrCode: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/qrgame07.jpg',
gameName: '怪兽连连线',
gameDesc: '一笔画完益智游戏',
hotGameActive: ''
},
{
id: 8,
gameImage: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/game08.jpg',
qrCode: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/qrgame08.jpg',
gameName: '猫咪大乱斗',
gameDesc: '惊险刺激碰撞IO游戏',
hotGameActive: ''
}
],
cooperationGame: [
{
id: 1,
gameImage: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/pinpai01.jpg',
qrCode: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/qrcode01.jpg',
gameName: '《欢乐农场主》 电商扶贫合作',
gameDesc: '《欢乐农场主》是国家财政部、腾讯微信、乐玩游戏联手致力于帮助国家贫困县宣传和农产品销售的公益项目，通过游戏的形式展现也是希望用更加愉快温暖的方式，让更多的',
active: '',
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/icon01.jpg'
},
{
id: 2,
gameImage: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/pinpai03.jpg',
qrCode: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/qrcode03.jpg',
gameName: '《直通天际》 迪拜塔旅游商业合作',
gameDesc: '人们对于高空、未知的探索总是欲望无穷，因此成就了迪拜塔（又名哈利法塔）和它相关的小游戏项目，游戏采用了迪拜塔的现代建筑风格用叠高楼的形式展现迪拜塔的高大雄伟。',
active: '',
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/icon03.jpg'
},
{
id: 3,
gameImage: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/pinpai02.jpg',
qrCode: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/qrcode02.jpg',
gameName: '《萌鸡小队画画》 IP精品战略合作',
gameDesc: '《萌鸡小队》动画有着70亿庞大的网络视频点击量，收罗了一群忠实的小粉丝；为做到寓教于乐的效果，特选IP+画画的游戏模式，自主创新角色舞蹈+音乐的玩法，大大增加了产品代入感，建立产品壁垒，让小朋友的天分更加自由的发挥',
active: '',
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/icon02.jpg'
},
{
id: 4,
gameImage: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/pinpai04.jpg',
qrCode: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/qrcode04.jpg',
gameName: '《超级飞侠冲冲冲》 IP精品战略合作',
gameDesc: '《超级飞侠》是一部全网点击百亿，多角色市场反响火爆的儿童动画，宣传以帮助别人为主基调非常正能量，我们希望小朋友能够通过游戏加深对每个飞侠的角色认知，从而提高IP认知度，并帮助品牌进行一定的周边销售',
active: '',
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/icon04.jpg'
}
],
allGames: [
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon01.png',
gameName: '豆腐消消消'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon02.jpg',
gameName: '非常六合一'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon03.jpg',
gameName: '宇宙大冒险'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon04.jpg',
gameName: '最强切水果'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon05.png',
gameName: '爆锤损友'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon06.png',
gameName: '最强消数字'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon07.png',
gameName: '答题大乱斗'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon08.png',
gameName: '最强弹力球'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon09.jpg',
gameName: '划线球球'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon10.png',
gameName: '最强预测'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon11.png',
gameName: '最强球爱'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon12.jpg',
gameName: '最强吃鸡王'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon13.jpg',
gameName: '豆腐消消消'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon14.jpg',
gameName: '最强嘴炮王'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon15.jpg',
gameName: '脑力大火拼'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon16.png',
gameName: '最强菊王'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon17.png',
gameName: '去吧皮卡叔'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon18.png',
gameName: '盗猫笔记'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon19.png',
gameName: '一起切水果'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon20.png',
gameName: '猫咪大乱斗'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon21.png',
gameName: '养猫达人'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon22.png',
gameName: '全民飞车3D'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon23.png',
gameName: '我要养条狗'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon24.png',
gameName: '怪兽连连线'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon25.png',
gameName: '进击吧足球'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon26.png',
gameName: '一起来切菜'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon27.jpg',
gameName: '水果大师'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon28.jpg',
gameName: '劲爆足球'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon29.jpg',
gameName: '王者俄罗斯方块'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon30.jpg',
gameName: '宝宝开餐厅'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon31.jpg',
gameName: '飞机大战3D'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon32.png',
gameName: '疯狂怪兽车'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon33.png',
gameName: '数字连连消'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon34.png',
gameName: '超级飞侠'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon35.jpg',
gameName: '萌鸡小队画画'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon36.png',
gameName: '一起切糖果'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon37.jpg',
gameName: '欢乐农场主'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon38.jpg',
gameName: '直通天际'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon39.png',
gameName: '本宫能活100集'
},
{
icon: 'https://res.g.llewan.com/ftp/lewan/lewanguanwang/image/01/gameicon40.png',
gameName: '步战三国'
}
]
}
src/router.js
View file @ e3147789
......@@ -11,6 +11,14 @@ export default new Router({
name: 'home',
component: Home
},
{
path: '/business',
name: 'business',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/Business.vue')
},
{
path: '/about',
name: 'about',
......
src/views/About.vue
View file @ e3147789
<template>
<div class="about">
<h1>This is an about page</h1>
<div class="top-placeholder"></div>
<div class="banner rel">
<div class="abs imamge"></div>
</div>
<div class="">
<div class="g3 title1">公司介绍</div>
<div class="g6 f20 mt10">乐玩游戏自创建以来，一直致力于小游戏的研发和运营，成员包括阿里、网易、4399、百田等游戏厂商的优秀人才</div>
<div class="g6 f20 mt5">我们崇尚扁平化管理，本着对产品专注、专业、高效、创新的态度，立志做出有趣、有品质、有理念的三有产品</div>
</div>
<div class="introduce cl">
<img class="game-imamge" src="../assets/03/gongsi.jpg" alt="">
</div>
<div class="">
<div class="g3 title1">团队介绍</div>
<div class="g6 f20 mt10">成员包括阿里、网易、4399、百田等游戏厂商的优秀人才</div>
<div class="g6 f20 mt5">小游戏&手游策划、美术、技术（2D+3D）运营、市场、产品经理目前共30多个小伙伴，配置一应俱全</div>
</div>
<div class="introduce cl">
<img class="game-imamge" src="../assets/03/renyuan.jpg" alt="">
</div>
<div class="bgf5 ovh ceo">
<div class="g3 title1">CEO</div>
<div class="g3 f20 mt10 tl ceo-introduce auto">
<div class="f20 mt5">• 10年团队管理经验，8年产品策划经验，擅长移动互联网/游戏策划运营。</div>
<div class="f20 mt5">• 主持过众多产品项目，包括大型手游平台App?4399游戏盒，从0到1，总用户量1.5亿，DAU350w，MAU2000w，游戏分发600w/天。</div>
<div class="f20 mt5">• 对多种产品设计和用户运营有丰富经验，组建H5/微信小游戏研发团队，并参与平台搭建制作，擅长管理、沟通、市场分析。</div>
</div>
</div>
<!-- 公司成长 -->
<div class="team rel cl">
<!-- <div class="abs imamge"></div> -->
<div class="cl">
<div class="g3 title3">公司成长</div>
<div class="g6 f20 mt20">
<!-- <div>合作渠道覆盖面广，IP定制方式灵活，研发推广一体无忧</div> -->
</div>
</div>
<ul class="team-item-box auto cl ovh">
<li class="item rel tc l">
<div class="normal1">
<img class="img1" src="../assets/03/chengzhang01.png" alt="">
</div>
</li>
<li class="item rel tl l">
<div class="normal">
<h4 class="desc1 g3 f28">2018.05</h4>
<img class="number" src="../assets/03/chengzhang02.jpg" alt="">
<div class="desc2 g6 f14 tl mt15">
<div>公司成立</div>
</div>
</div>
</li>
<li class="item rel tc l">
<div class="normal1">
<img class="img1" src="../assets/03/chengzhang01.png" alt="">
</div>
</li>
<li class="item rel tl l">
<div class="normal">
<h4 class="desc1 g3 f28">2018.10</h4>
<img class="number" src="../assets/03/chengzhang02.jpg" alt="">
<div class="desc2 g6 f14 tl mt15">
<div>单日产品活跃200w</div>
</div>
</div>
</li>
<li class="item rel tc l">
<div class="normal1">
<img class="img1" src="../assets/03/chengzhang01.png" alt="">
</div>
</li>
<li class="item rel tl l">
<div class="normal">
<h4 class="desc1 g3 f28">2018.11</h4>
<img class="number" src="../assets/03/chengzhang02.jpg" alt="">
<div class="desc2 g6 f14 tl mt15">
<div>公司乔迁新址</div>
</div>
</div>
</li>
<li class="item rel tc l">
<div class="normal1">
<img class="img1" src="../assets/03/chengzhang01.png" alt="">
</div>
</li>
<li class="item rel tl l">
<div class="normal">
<h4 class="desc1 g3 f28">2019.02</h4>
<img class="number" src="../assets/03/chengzhang02.jpg" alt="">
<div class="desc2 g6 f14 tl mt15">
<div>单日产品累计注册4000w</div>
</div>
</div>
</li>
<li class="item rel tc l">
<div class="normal1">
<img class="img1" src="../assets/03/chengzhang01.png" alt="">
</div>
</li>
<li class="item rel tl l">
<div class="normal">
<h4 class="desc1 g3 f28">2019.05</h4>
<img class="number" src="../assets/03/chengzhang02.jpg" alt="">
<div class="desc2 g6 f14 tl mt15">
<div>财政部合作产品《欢乐农场主》上线</div>
</div>
</div>
</li>
<li class="item rel tc l">
<div class="normal1">
<img class="img1" src="../assets/03/chengzhang01.png" alt="">
</div>
</li>
</ul>
</div>
<PageFooter msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import PageFooter from '@/components/PageFooter.vue'
export default {
name: 'home',
components: {
PageFooter
}
}
</script>
<style lang="scss" scoped>
.top-placeholder {
width: 100%;
height: 100px;
}
.banner {
width: 100%;
height: 500px;
.imamge {
width: 100%;
height: 500px;
background: url('../assets/03/banner.jpg') no-repeat center center / 1920px;
}
}
.title1 {
margin-top: 100px;
font-size: 40px;
}
.introduce {
margin-top: 45px;
}
.ceo {
padding-bottom: 100px;
}
.ceo-introduce {
width: 700px;
}
/* 团队 */
.team {
width: 100%;
height: 380px;
.title3 {
padding-top: 60px;
font-size: 40px;
}
.subtitle {
color: #eeeeee;
}
.team-item-box {
margin-top: 40px;
width: 1380px;
}
.item {
height: 100px;
margin:30px 25px 10px 25px;
.game-imamge {
width: 200px;
height: 250px;
display: block;
}
.desc1 {
margin: 12px 0 0 0;
}
.game-desc {
margin-left: 28px;
}
.normal{
height: 100px;
}
.normal1{
height: 100px;
line-height: 100px
}
}
}
</style>
src/views/Business.vue 0 → 100644
View file @ e3147789
<template>
<div class="about">
<div class="top-placeholder"></div>
<div class="banner rel">
<div class="abs imamge"></div>
</div>
<div class="">
<div class="g3 title1">合作案例</div>
<!-- <div class="g6 f20 mt20">源于对市场的理解和不同类型游戏的锤炼</div> -->
</div>
<div class="hot-game cl">
<ul class="hot-game-box cl ovh auto">
<li class="item rel tl l" v-for="(item , index) in hotGame" v-bind:key="item.id" @mouseover="hotGameItemHover(index)" @mouseleave="hotGameItemLeave(index)">
<div class="shadow1 normal">
<img class="game-imamge" :src="item.gameImage" alt="">
<h4 class="game-name g3 f20"><span class="f20">{{item.gameName}}</span><span class="f16">{{item.gameType}}</span></h4>
<div class="game-desc auto f14 g6">{{item.gameDesc}}</div>
</div>
<div class="qrcode-box abs bgwh shadow2 animated faster" :class="item.hotGameActive">
<div class="qrcode auto tc">
<img class="" width="190" height="190" :src="item.qrCode" alt="">
<div class="f20 g3 mt20">微信扫码体验</div>
</div>
</div>
</li>
</ul>
</div>
<!-- 合作模式 -->
<div class="team rel cl">
<!-- <div class="abs imamge"></div> -->
<div class="cl">
<div class="g3 title3">合作模式</div>
<div class="g6 f20 mt20">
<!-- <div>合作渠道覆盖面广，IP定制方式灵活，研发推广一体无忧</div> -->
</div>
</div>
<ul class="team-item-box auto cl ovh">
<li class="item rel tc l">
<div class="normal">
<img class="number" src="../assets/02/hezuo01.jpg" alt="">
<h4 class="desc1 g3 f28">原生游戏</h4>
<div class="desc2 g6 f14 tl">
<div>以游戏用户为核心，从玩家诉求出发，结合市场爆款模型，做品牌的“娱乐翻译官”</div>
</div>
</div>
</li>
<li class="item rel tc l">
<div class="normal">
<img class="number" src="../assets/02/hezuo02.jpg" alt="">
<h4 class="desc1 g3 f28">IP游戏</h4>
<div class="desc2 g6 f14 tl">
<div>以IP受众用户出发，量身定制游戏模型，创新实现游戏IP孵化</div>
</div>
</div>
</li>
<li class="item rel tc l">
<div class="normal">
<img class="number" src="../assets/02/hezuo03.jpg" alt="">
<h4 class="desc1 g3 f28">品牌游戏</h4>
<div class="desc2 g6 f14 tl">
<div>以品牌诉求出发，量身定制游戏模型，实现品牌传播+电商转化的内容商业逻辑</div>
</div>
</div>
</li>
</ul>
</div>
<div class="miniprogram rel cl bgf5">
<div class="cl">
<div class="g3 title3">联合开发模式</div>
</div>
<div class="rel auto content">
<img class="abs imamge" src="../assets/02/lianhe.png">
<div class="item1 abs tr">
<div class="f20 g3 b item-title">品牌联合出品</div>
<div class="f14 g6">许多品牌经过多年沉淀已有一定用户基础</div>
<div class="f14 g6">希望打造小游戏进行用户粘性互动</div>
<div class="f14 g6">提高品牌追随</div>
</div>
<div class="item2 abs tr">
<div class="f20 g3 b item-title">原生游戏结合</div>
<div class="f14 g6">一些小游戏天然具备传播及趣味性</div>
<div class="f14 g6">植入品牌可以增加大量曝光</div>
<div class="f14 g6">契合度高的还可以带来部分用户转化</div>
</div>
<div class="item3 abs tl">
<div class="f20 g3 b item-title">IP定制运营</div>
<div class="f14 g6">有不少知名IP积累了核心用户</div>
<div class="f14 g6">并和特定品类的游戏有属性交集</div>
<div class="f14 g6">定制游戏可以增加用户粘性和商业化</div>
</div>
<div class="item4 abs tl">
<div class="f20 g3 b item-title">渠道联合出品</div>
<div class="f14 g6">游戏、媒体平台已有用户沉淀</div>
<div class="f14 g6">需要小游戏进行用户粘性互动及商业变现</div>
</div>
</div>
</div>
<div class="yanyunyiti rel cl bgwh">
<div class="cl">
<div class="g3 title3">研运一体形成闭环</div>
</div>
<div class="rel auto content">
<img class="abs imamge" src="../assets/02/kaifa00.png">
<div class="item1 abs tc shadow1">
<img class="item-image" src="../assets/02/kaifa01.jpg">
<div class="f20 g3 b item-title">原生内容</div>
<div class="f14 g6">以大众市场需求为出发点</div>
<div class="f14 g6">设计高传播性游戏</div>
<div class="f14 g6">实现趣味性与品牌传播双赢</div>
</div>
<div class="item2 abs tc shadow1">
<img class="item-image" src="../assets/02/kaifa02.jpg">
<div class="f20 g3 b item-title">社群渠道</div>
<div class="f14 g6">打通自媒体公众号</div>
<div class="f14 g6">结合抖音、微薄等主流渠道</div>
<div class="f14 g6">实现品牌全平台渠道</div>
</div>
<div class="item3 abs tc shadow1">
<img class="item-image" src="../assets/02/kaifa03.jpg">
<div class="f20 g3 b item-title">整合营销</div>
<div class="f14 g6">在目标人群聚集渠道着手</div>
<div class="f14 g6">制定社会化整合营销全案</div>
<div class="f14 g6">引流至销售渠道</div>
</div>
</div>
</div>
<!-- 核心优势 -->
<div class="advantage rel cl bgf5">
<!-- <div class="abs imamge"></div> -->
<div class="cl">
<div class="g3 title3">核心优势</div>
<div class="g6 f20 mt20">
<div>创意+实践</div>
</div>
</div>
<ul class="advantage-item-box auto cl ovh">
<li class="item rel tc l shadow1">
<div class="normal">
<h4 class="desc1 wh f20 bg1">
专注小游戏的内容化营销
</h4>
<div class="desc2 g6 f16 tc">
<div class="mb5">专注于小游戏创意</div>
<div class="mb5">为核心的内容化整合营销传播</div>
<div class="mb5">让游戏与品牌用户精准对接</div>
</div>
</div>
</li>
<li class="item rel tc l shadow1">
<div class="normal">
<h4 class="desc1 wh f20 bg2">
专注小游戏的内容化营销
</h4>
<div class="desc2 g6 f16 tc">
<div class="mb5">专注于小游戏创意</div>
<div class="mb5">为核心的内容化整合营销传播</div>
<div class="mb5">让游戏与品牌用户精准对接</div>
</div>
</div>
</li>
<li class="item rel tc l shadow1">
<div class="normal">
<h4 class="desc1 wh f20 bg3">
专注小游戏的内容化营销
</h4>
<div class="desc2 g6 f16 tc">
<div class="mb5">专注于小游戏创意</div>
<div class="mb5">为核心的内容化整合营销传播</div>
<div class="mb5">让游戏与品牌用户精准对接</div>
</div>
</div>
</li>
<li class="item rel tc l shadow1">
<div class="normal">
<h4 class="desc1 wh f20 bg4">
专注小游戏的内容化营销
</h4>
<div class="desc2 g6 f16 tc">
<div class="mb5">专注于小游戏创意</div>
<div class="mb5">为核心的内容化整合营销传播</div>
<div class="mb5">让游戏与品牌用户精准对接</div>
</div>
</div>
</li>
</ul>
</div>
<!-- 媒体宣发 -->
<div class="media rel cl">
<div class="cl">
<div class="g3 title3">媒体宣发</div>
<div class="g6 f20 mt20">
<div>主流媒体均有覆盖，创意视频、文案助力推广</div>
</div>
</div>
<ul class="media-item-box auto cl ovh">
<li class="item rel tc l">
<div class="normal">
<img class="game-imamge" src="../assets/02/xuanfa01.png" alt="">
</div>
</li>
<li class="item rel tc l">
<div class="normal">
<img class="game-imamge" src="../assets/02/xuanfa02.png" alt="">
</div>
</li>
<li class="item rel tc l">
<div class="normal">
<img class="game-imamge" src="../assets/02/xuanfa03.png" alt="">
</div>
</li>
<li class="item rel tc l">
<div class="normal">
<img class="game-imamge" src="../assets/02/xuanfa04.png" alt="">
</div>
</li>
<li class="item rel tc l">
<div class="normal">
<img class="game-imamge" src="../assets/02/xuanfa05.png" alt="">
</div>
</li>
<li class="item rel tc l">
<div class="normal">
<img class="game-imamge" src="../assets/02/xuanfa06.png" alt="">
</div>
</li>
<li class="item rel tc l">
<div class="normal">
<img class="game-imamge" src="../assets/02/xuanfa07.png" alt="">
</div>
</li>
<li class="item rel tc l">
<div class="normal">
<img class="game-imamge" src="../assets/02/xuanfa08.png" alt="">
</div>
</li>
</ul>
</div>
<!-- 合作流程 -->
<div class="process rel cl">
<div class="cl">
<div class="g3 title3">合作流程</div>
<div class="g6 f20 mt20">
<div>2000万用户的流量矩阵战略合作方，百万级以上的小游戏导流合作，</div>
<div>为品牌游戏寻找海量匹配的推广用户群</div>
</div>
</div>
<img with="1361" height="160" src="../assets/02/liucheng.png" alt="">
<ul class="process-item-box auto cl ovh">
<li class="item rel tc l">
<div class="normal">
<h4 class="desc1 g3 f20">沟通意向</h4>
<div class="g6 f14">定制草案</div>
</div>
</li>
<li class="item rel tc l">
<div class="normal">
<h4 class="desc1 g3 f20">确认方案</h4>
<div class="g6 f14">研发对接</div>
</div>
</li>
<li class="item rel tc l">
<div class="normal">
<h4 class="desc1 g3 f20">研发DEMO</h4>
<div class="g6 f14">沟通优化</div>
</div>
</li>
<li class="item rel tc l">
<div class="normal">
<h4 class="desc1 g3 f20">上线测试</h4>
<div class="g6 f14">产品分析</div>
</div>
</li>
<li class="item rel tc l">
<div class="normal">
<h4 class="desc1 g3 f20">推广运营</h4>
<div class="g6 f14">持续优化</div>
</div>
</li>
</ul>
</div>
<PageFooter msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import PageFooter from '@/components/PageFooter.vue'
import BusinessData from '@/data/BusinessData.js'
export default {
name: 'home',
components: {
PageFooter
},
data () {
return {
hotGame: BusinessData.hotGame,
cooperationGame: BusinessData.cooperationGame,
allGames: BusinessData.allGames
}
},
methods: {
hotGameItemHover (index) {
this.hotGame[index].hotGameActive = 'fadeIn'
},
hotGameItemLeave (index) {
this.hotGame[index].hotGameActive = 'fadeOut'
}
}
}
</script>
<style lang="scss" scoped>
.top-placeholder {
width: 100%;
height: 100px;
}
.banner {
width: 100%;
height: 500px;
.imamge {
width: 100%;
height: 500px;
background: url('../assets/02/banner.jpg') no-repeat center center / 1920px;
}
}
.shadow1 {
box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
}
.title1 {
margin-top: 100px;
font-size: 40px;
}
.hot-game {
margin-top: 20px;
}
.hot-game-box {
width: 1380px;
.item {
width: 310px;
height: 632px;
margin:30px 15px 10px 15px;
.game-imamge {
width: 310px;
height: 552px;
display: block;
}
.game-name {
margin: 18px 12px 10px 12px;
}
.game-desc {
width: 286px;
}
.normal{
height: 632px;
}
.shadow2 {
box-shadow: 0 0 12px 6px rgba(0, 0, 0, 0.2);
}
.qrcode-box {
opacity: 0;
width: 310px;
height: 632px;
left: 0;
bottom: 0;
.qrcode {
margin-top: 200px;
}
}
.active {
display: block;
}
}
}
/* 团队 */
.team {
width: 100%;
height: 620px;
.title3 {
padding-top: 60px;
font-size: 40px;
}
.subtitle {
color: #eeeeee;
}
.team-item-box {
margin-top: 40px;
width: 1380px;
}
.item {
width: 200px;
height: 350px;
margin:30px 118px 10px 118px;
.game-imamge {
width: 200px;
height: 250px;
display: block;
}
.desc1 {
margin: 20px 0 10px 0;
font-weight: 400;
}
.game-desc {
margin-left: 28px;
}
.normal{
height: 350px;
.number {
width: 200px;
height: 200px;
}
}
}
}
/* 小程序风口 */
.miniprogram {
width: 100%;
height: 832px;
.title3 {
padding-top: 60px;
font-size: 40px;
}
.subtitle {
color: #eeeeee;
}
.content {
width: 1334px;
height: 544px;
margin-top: 50px;
.imamge {
width: 1334px;
height: 544px;
left: 0;
top: 0;
}
.item-title {
margin: 14px 0;
}
.item1 {
width: 260px;
height: 132px;
left: 26px;
top: 168px;
}
.item2 {
width: 232px;
height: 132px;
left: 145px;
bottom: 10px;
}
.item3 {
width: 232px;
height: 132px;
right: 48px;
top: 165px;
}
.item4 {
width: 258px;
height: 105px;
right: 115px;
bottom: 30px;
}
}
}
/* 研运一体 */
.yanyunyiti {
width: 100%;
height: 932px;
.title3 {
padding-top: 60px;
font-size: 40px;
}
.subtitle {
color: #eeeeee;
}
.content {
width: 970px;
height: 714px;
margin-top: 50px;
.imamge {
width: 477px;
height: 341px;
left: 50%;
top: 60px;
margin-left: -238px;
}
.item-title {
margin: 22px 0 12px 0;
}
.item-image {
margin-top: 40px;
}
.item1 {
width: 220px;
height: 300px;
left: 10px;
top: 10px;
}
.item2 {
width: 220px;
height: 300px;
left: 50%;
margin-left: -110px;
bottom: 10px;
}
.item3 {
width: 220px;
height: 300px;
right: 10px;
top: 10px;
}
}
}
/* 团队 */
.advantage {
width: 100%;
height: 620px;
.title3 {
padding-top: 60px;
font-size: 40px;
}
.subtitle {
color: #eeeeee;
}
.advantage-item-box {
margin-top: 40px;
width: 1380px;
}
.item {
width: 320px;
height: 300px;
margin:30px 9px 10px 9px;
.game-imamge {
width: 200px;
height: 250px;
display: block;
}
.desc1 {
margin: 0 0 55px 0;
font-weight: 400;
width: 320px;
height: 120px;
line-height: 120px;
display: block;
}
.normal{
height: 320px;
.bg1 {
background:url('../assets/02/youshi01.jpg') no-repeat center center;
}
.bg2 {
background:url('../assets/02/youshi02.jpg') no-repeat center center;
}
.bg3 {
background:url('../assets/02/youshi03.jpg') no-repeat center center;
}
.bg4{
background:url('../assets/02/youshi04.jpg') no-repeat center center;
}
}
}
}
/* 媒体宣发 */
.media {
width: 100%;
margin-bottom: 100px;
.title3 {
padding-top: 60px;
font-size: 40px;
}
.subtitle {
color: #eeeeee;
}
.media-item-box {
margin-top: 40px;
width: 1380px;
}
.item {
width: 140px;
height: 140px;
margin:20px 15px 0 15px;
.game-imamge {
width: 140px;
height: 140px;
display: block;
}
}
}
/* 合作流程 */
.process {
width: 100%;
margin-bottom: 100px;
.title3 {
padding-top: 60px;
font-size: 40px;
}
.subtitle {
color: #eeeeee;
}
.process-item-box {
margin-top: 8px;
width: 1320px;
}
img {
margin-top: 50px;
}
.item {
width: 158px;
height: 80px;
margin:0 53px;
.desc1 {
margin: 6px 0 2px 0;
}
}
}
</style>
src/views/Home.vue
View file @ e3147789
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<div class="cl auto">
<div class="banner rel">
<div class="abs imamge"></div>
</div>
<div class="">
<div class="g3 title1">创意游戏-打造爆款</div>
<div class="g6 f20 mt20">源于对市场的理解和不同类型游戏的锤炼</div>
</div>
<div class="hot-game cl">
<ul class="hot-game-box cl ovh auto">
<li class="item rel tl l" v-for="(item , index) in hotGame" v-bind:key="item.id" @mouseover="hotGameItemHover(index)" @mouseleave="hotGameItemLeave(index)">
<div class="shadow1 normal">
<img class="game-imamge" :src="item.gameImage" alt="">
<h4 class="game-name g3 f20">{{item.gameName}}</h4>
<div class="game-desc auto f14 g6">{{item.gameDesc}}</div>
</div>
<div class="qrcode-box abs bgwh shadow2 animated faster" :class="item.hotGameActive">
<div class="qrcode auto tc">
<img class="" width="190" height="190" :src="item.qrCode" alt="">
<div class="f20 g3 mt20">微信扫码体验</div>
</div>
</div>
</li>
</ul>
</div>
<div class="cooperation bgf5 cl">
<div class="">
<div class="g3 title1">品牌合作，互利双赢</div>
<div class="g6 f20 mt20">
<div>用小游戏来实现品牌传播、IP打造、新品发布、CRM管理、</div>
<div>积分打通、发券、辅助线下门店、节日营销......</div>
</div>
</div>
<ul class="cooperation-item-box auto cl ovh">
<li class="item rel tl l" v-for="(item , index) in cooperationGame" v-bind:key="item.id" @mouseover="cooperationGameItemHover(index)" @mouseleave="cooperationGameItemLeave(index)">
<div class="shadow1 normal">
<img class="game-imamge" :src="item.gameImage" alt="">
<h4 class="game-name abs g3 f20">{{item.gameName}}</h4>
<img class="game-icon abs" :src="item.icon">
</div>
<div class="qrcode-box abs bgwh shadow2 animated faster" :class="item.active">
<div class="">
<h4 class="game-name2 g3 f20">{{item.gameName}}</h4>
<div class="game-desc f14 g6">{{item.gameDesc}}</div>
</div>
<div class="qrcode auto tc abs">
<img class="" width="130" height="130" :src="item.qrCode" alt="">
<div class="f20 g3">微信扫码体验</div>
</div>
</div>
</li>
</ul>
</div>
<div class="miniprogram rel cl">
<div class="abs imamge"></div>
<div class="cl">
<div class="wh title3">小游戏风口，掀起流量风暴</div>
<div class="subtitle f20 mt20">
<div>微信10亿用户生态，借力分享功能助推小游戏爆炸性增长</div>
</div>
</div>
<ul class="miniprogram-item-box auto cl ovh">
<li class="item rel tc l">
<div class="normal">
<div class="number bgwh">
<div class="rel ovh tl" style="width:128px;margin-left:-64px;left:50%;">
<span class="b dib">10.98</span><span class="point dib abs f28">亿</span>
</div>
</div>
<h4 class="desc1 wh f28">月活跃</h4>
<div class="desc2 wh f16">微信&WeChat月合并活跃用户数</div>
</div>
</li>
<li class="item rel tc l">
<div class="normal">
<div class="number bgwh">
<div class="rel ovh tl" style="width:100px;margin-left:-50px;left:50%;">
<span class="b dib">90</span><span class="point dib abs f28">分钟</span>
</div>
</div>
<h4 class="desc1 wh f28">使用时长</h4>
<div class="desc2 wh f16">50%用户每天使用微信时长</div>
</div>
</li>
<li class="item rel tc l">
<div class="normal">
<div class="number bgwh">
<div class="rel ovh tl" style="width:70px;margin-left:-35px;left:50%;">
<span class="b dib">60</span><span class="point dib abs f28">%</span>
</div>
</div>
<h4 class="desc1 wh f28">主流人群</h4>
<div class="desc2 wh f16">主流用户群体集中在15~29岁</div>
</div>
</li>
<li class="item rel tc l">
<div class="normal">
<div class="number bgwh">
<div class="rel ovh tl" style="width:70px;margin-left:-35px;left:50%;">
<span class="b dib">93</span><span class="point dib abs f28">%</span>
</div>
</div>
<h4 class="desc1 wh f28">渗透率</h4>
<div class="desc2 wh f16">一线城市渗透率93% 二线城市渗透率69%</div>
</div>
</li>
<li class="item rel tc l">
<div class="normal">
<div class="number bgwh">
<div class="rel ovh tl" style="width:96px;margin-left:-48px;left:50%;">
<span class="b dib">2</span><span class="point dib abs f28">千万+</span>
</div>
</div>
<h4 class="desc1 wh f28">公众号</h4>
<div class="desc2 wh f16">微信公众账号数量超过2千万个</div>
</div>
</li>
<li class="item rel tc l">
<div class="normal">
<div class="number bgwh">
<div class="rel ovh tl" style="width:112px;margin-left:-51px;left:50%;">
<span class="b dib">150</span><span class="point dib abs f28">万+</span>
</div>
</div>
<h4 class="desc1 wh f28">小程序</h4>
<div class="desc2 wh f16">微信小程序总数超过150万个</div>
</div>
</li>
</ul>
</div>
<!-- 团队 -->
<div class="team rel cl">
<!-- <div class="abs imamge"></div> -->
<div class="cl">
<div class="g3 title3">靠谱团队-研运一体</div>
<div class="g6 f20 mt20">
<div>合作渠道覆盖面广，IP定制方式灵活，研发推广一体无忧</div>
</div>
</div>
<ul class="team-item-box auto cl ovh">
<li class="item rel tc l">
<div class="normal">
<img class="number" src="../assets/01/kaopu01.jpg" alt="">
<h4 class="desc1 g3 f28">务实创新</h4>
<div class="desc2 g6 f14">
<div>紧跟市场、快速应变</div>
<div>明确目标、简洁有效</div>
<div>因为热爱、创新不断</div>
</div>
</div>
</li>
<li class="item rel tc l">
<div class="normal">
<img class="number" src="../assets/01/kaopu02.jpg" alt="">
<h4 class="desc1 g3 f28">研发高效</h4>
<div class="desc2 g6 f14">
<div>八个月研发40款</div>
<div>开发、反馈、优化等迅速</div>
<div>每天工作12小时一周六天</div>
</div>
</div>
</li>
<li class="item rel tc l">
<div class="normal">
<img class="number" src="../assets/01/kaopu03.jpg" alt="">
<h4 class="desc1 g3 f28">能力全面</h4>
<div class="desc2 g6 f14">
<div>产品类型、全面覆盖</div>
<div>2D、3D类游戏均可研发</div>
<div>自有运营、助力优化</div>
</div>
</div>
</li>
<li class="item rel tc l">
<div class="normal">
<img class="number" src="../assets/01/kaopu04.jpg" alt="">
<h4 class="desc1 g3 f28">团队协作</h4>
<div class="desc2 g6 f14">
<div>分项目制、追踪到人</div>
<div>自告奋勇、更有激情</div>
<div>全员活跃、战斗力强</div>
</div>
</div>
</li>
</ul>
</div>
<!-- 所有开发产品 -->
<div class="production rel cl">
<div class="cl">
<div class="g3 title3">共研发40余款小游戏+小程序</div>
<div class="g6 f20 mt20">
<div>千锤百炼得见真功夫</div>
</div>
</div>
<ul class="production-item-box auto cl ovh">
<li class="item rel tc l" v-for="(item, index) in allGames" :key="index">
<div class="normal">
<img class="game-imamge" :src="item.icon" alt="">
<h4 class="desc1 g3 f14">{{item.gameName}}</h4>
</div>
</li>
</ul>
</div>
<PageFooter msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import PageFooter from '@/components/PageFooter.vue'
// import { hotGame, cooperationGame } from '@/data/HomeData.js'
import HomeData from '@/data/HomeData.js'
export default {
name: 'home',
components: {
HelloWorld
PageFooter
},
data () {
return {
hotGame: HomeData.hotGame,
cooperationGame: HomeData.cooperationGame,
allGames: HomeData.allGames
}
},
methods: {
hotGameItemHover (index) {
this.hotGame[index].hotGameActive = 'fadeIn'
},
hotGameItemLeave (index) {
this.hotGame[index].hotGameActive = 'fadeOut'
},
cooperationGameItemHover (index) {
this.cooperationGame[index].active = 'fadeIn'
},
cooperationGameItemLeave (index) {
this.cooperationGame[index].active = 'fadeOut'
}
}
}
</script>
<style lang="scss" scoped>
.banner {
width: 100%;
height: 760px;
.imamge {
width: 100%;
height: 760px;
background: url('../assets/01/banner.jpg') no-repeat center center / 1920px;
}
}
.title1 {
margin-top: 100px;
font-size: 40px;
}
.hot-game {
margin-top: 20px;
}
.hot-game-box {
width: 1380px;
.item {
width: 310px;
height: 460px;
margin:30px 15px 10px 15px;
.game-imamge {
width: 310px;
height: 380px;
display: block;
}
.game-name {
margin: 18px 12px 10px 12px;
}
.game-desc {
width: 286px;
}
.shadow1 {
box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
}
.normal{
height: 460px;
}
.shadow2 {
box-shadow: 0 0 12px 6px rgba(0, 0, 0, 0.2);
}
.qrcode-box {
opacity: 0;
width: 330px;
height: 480px;
left: -10px;
bottom: 0;
.qrcode {
margin-top: 100px;
}
}
.active {
display: block;
}
}
}
.cooperation {
padding: 1px 0 100px 0;
margin-top: 120px;
}
.cooperation-item-box {
width: 1380px;
.item {
width: 650px;
height: 350px;
margin:30px 15px 10px 15px;
.game-imamge {
width: 650px;
height: 250px;
display: block;
}
.game-name {
left: 108px;
bottom: 0;
height: 100px;
line-height: 100px;
margin: 0;
}
.game-icon {
width: 64px;
height: 64px;
left: 24px;
bottom: 20px;
border-radius: 10px;
}
.game-desc {
margin-left: 28px;
}
.shadow1 {
box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
}
.normal{
height: 350px;
}
.shadow2 {
box-shadow: 0 0 12px 6px rgba(0, 0, 0, 0.2);
}
.qrcode-box {
opacity: 0;
width: 650px;
height: 350px;
left: 0;
bottom: 0;
.game-name2 {
margin: 30px 24px 22px 22px;
}
.qrcode {
right: 24px;
bottom: 14px;
}
}
.active {
display: block;
}
}
}
/* 小程序风口 */
.miniprogram {
width: 100%;
height: 620px;
.imamge {
width: 100%;
height: 620px;
background: url('../assets/01/xiaochengxu.jpg') no-repeat center center / 1920px;
z-index: -1;
}
.title3 {
padding-top: 60px;
font-size: 40px;
}
.subtitle {
color: #eeeeee;
}
.miniprogram-item-box {
margin-top: 40px;
width: 1380px;
}
.item {
width: 180px;
height: 350px;
margin:30px 23px 10px 23px;
.game-imamge {
width: 180px;
height: 250px;
display: block;
}
.desc1 {
margin: 30px 0 15px 0;
font-weight: 400;
}
.game-desc {
margin-left: 28px;
}
.normal{
height: 350px;
.number {
width: 180px;
height: 180px;
line-height: 180px;
border-radius: 50%;
color: rgb(36, 27, 111);
font-size: 40px;
.point {
right: 0;
bottom: -7px;
}
}
}
}
}
/* 团队 */
.team {
width: 100%;
height: 620px;
.title3 {
padding-top: 60px;
font-size: 40px;
}
.subtitle {
color: #eeeeee;
}
.team-item-box {
margin-top: 40px;
width: 1380px;
}
.item {
width: 200px;
height: 350px;
margin:30px 71px 10px 71px;
.game-imamge {
width: 200px;
height: 250px;
display: block;
}
.desc1 {
margin: 20px 0 10px 0;
font-weight: 400;
}
.game-desc {
margin-left: 28px;
}
.normal{
height: 350px;
.number {
width: 200px;
height: 200px;
}
}
}
}
/* 产品 */
.production {
width: 100%;
margin-bottom: 100px;
.title3 {
padding-top: 60px;
font-size: 40px;
}
.subtitle {
color: #eeeeee;
}
.production-item-box {
margin-top: 40px;
width: 1380px;
}
.item {
width: 116px;
height: 150px;
margin:20px 9px 0 9px;
.game-imamge {
width: 116px;
height: 116px;
display: block;
border-radius: 20px;
}
.desc1 {
margin: 6px 0 2px 0;
font-weight: 400;
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment