潘钊 / bsth_control · Commits

Commit 6a04b9462bcb405a2c911361f319637a96316b05

Authored by 潘钊
1 parent 817a2892
build: skipped

实时预览页面布局

Inline Side-by-side
Showing 9 changed files with 894 additions and 22 deletions
src/main/resources/static/assets/css/TrafficControl.css 0 → 100644
  View file @6a04b94
  1 +.maplibTc {
  2 + font-size: 12px;
  3 + width: 253px;
  4 + padding: 8px 5px 8px 8px;
  5 + background: #3B3F51;
  6 + position: absolute;
  7 + color: white;
  8 + box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  9 + top: 63px;
  10 +}
  11 +
  12 +.maplibTc a {
  13 + text-decoration: none;
  14 +}
  15 +
  16 +.maplibTcColor {
  17 + background: url("../img/tools_menu.png") no-repeat scroll 128px -86px transparent;
  18 + font-weight: bold;
  19 + margin-bottom: 9px;
  20 + height: 18px;
  21 +}
  22 +
  23 +.maplibTcUpdate {
  24 + float: left;
  25 + width: 13px;
  26 + height: 14px;
  27 + background: url(../img/tools_menu.png) no-repeat -12px -19px;
  28 + margin-left: 5px;
  29 + cursor: pointer;
  30 + margin-top: 2px;
  31 +}
  32 +
  33 +.maplibTcView {
  34 + float: right;
  35 + color: #26c281;
  36 + text-decoration: none;
  37 + line-height: 15px;
  38 + *line-height: 18px
  39 +}
  40 +a.maplibTcView:hover{
  41 + color: #C6DDD3;
  42 +}
  43 +a.maplibTcView:focus{
  44 + color: #26c281;
  45 +}
  46 +
  47 +.maplibTcCurTime {
  48 + float: left;
  49 + color: #ddd;
  50 +}
  51 +
  52 +.maplibTcTime {
  53 + height: 20px;
  54 + padding: 5px 3px 0 0;
  55 +}
  56 +
  57 +.maplibTcWeekDay {
  58 + height: 22px;
  59 + color: #6688CA;
  60 + padding: 3px 0;
  61 +}
  62 +
  63 +.maplibTcWeekDay a {
  64 + color: #6688CA;
  65 + padding: 3px 2px;
  66 +}
  67 +
  68 +.maplibTcWeekDay ul {
  69 + float: left;
  70 + margin: 0;
  71 + padding: 0;
  72 +}
  73 +
  74 +.maplibTcWeekDay span {
  75 + float: left;
  76 + line-height: 23px;
  77 +}
  78 +
  79 +.maplibTcWeekDay li {
  80 + float: left;
  81 + padding: 0 6px;
  82 + list-style: none;
  83 + line-height: 23px;
  84 +}
  85 +
  86 +.maplibTcRule {
  87 + background: url("../img/bar.png") no-repeat
  88 + scroll 0 10px transparent;
  89 + width: 195px;
  90 + float: left;
  91 + margin-left: 20px;
  92 + *margin-left: 10px;
  93 +}
  94 +
  95 +.maplibTcRuleTxt {
  96 + float: left;
  97 + line-height: 44px;
  98 +}
  99 +
  100 +.maplibTcClear {
  101 + clear: both;
  102 +}
  103 +
  104 +.maplibTcTimeBox {
  105 + color: #6688CA;
  106 + margin-left: 137.5px;
  107 + font-size: 11px;
  108 + overflow: hidden;
  109 +}
  110 +
  111 +.maplibTcTimeline {
  112 + height: 34px;
  113 +}
  114 +
  115 +.maplibTcTimelinePrev {
  116 + overflow: hidden;
  117 + width: 9px;
  118 + height: 9px;
  119 + cursor: pointer;
  120 + float: left;
  121 + margin-top: 3px
  122 +}
  123 +
  124 +.maplibTcTimelineNext {
  125 + overflow: hidden;
  126 + width: 11px;
  127 + *width: 10px;
  128 + height: 9px;
  129 + cursor: pointer;
  130 + float: right;
  131 + margin-top: 3px
  132 +}
  133 +
  134 +.maplibTcTimeMove {
  135 + width: 9px;
  136 + height: 18px;
  137 + background: url("../img/tools_menu.png")
  138 + no-repeat scroll 0pt -32px transparent;
  139 + float: left;
  140 + cursor: pointer;
  141 + margin-left: 137.5px;
  142 + margin-top: 0px;
  143 +}
  144 +
  145 +.maplibTcHide {
  146 + display: none;
  147 +}
  148 +
  149 +.maplibTcBtn_deskTop {
  150 + background: url(http://api.map.baidu.com/images/bgs.gif) no-repeat
  151 + scroll 0px -271px transparent;
  152 + cursor: pointer;
  153 + height: 22px;
  154 + width: 73px;
  155 + z-index: 10;
  156 + position: absolute;
  157 +}
  158 +
  159 +.maplibTcBtn_mobile {
  160 + background: url(http://api.map.baidu.com/images/traffic_bgs.png)
  161 + rgba(255, 255, 255, 0.8) no-repeat scroll -30px 0px;
  162 + border: 1px solid #AFAFAF;
  163 + background-size: 60px 30px;
  164 + cursor: pointer;
  165 + height: 30px;
  166 + width: 30px;
  167 + z-index: 10;
  168 + position: absolute;
  169 +}
  170 +
  171 +.maplibTcBtn_deskTop {
  172 + background-position: 0px -249px
  173 +}
  174 +
  175 +.maplibTcBtnOff_mobile {
  176 + background-position: 0px 0px;
  177 +}
  178 +
  179 +.maplibTcColon {
  180 + float: left;
  181 +}
  182 +
  183 +.maplibTcOn {
  184 + background: #E6EFF8;
  185 +}
  186 +
  187 +.maplibTcClose {
  188 + background: url("../img/tools_menu.png")
  189 + no-repeat scroll 2px -19px transparent;
  190 + border: 0 none;
  191 + cursor: pointer;
  192 + height: 12px;
  193 + position: absolute;
  194 + right: 7px;
  195 + top: 9px;
  196 + width: 15px;
  197 +}
  198 +
  199 +/*s--------------交通流量-----------------*/
  200 +.maplibTfctr {
  201 + min-width: 9em;
  202 + height: 2.2em;
  203 + display: -webkit-box;
  204 + -webkit-box-align: center;
  205 + -webkit-border-radius: 0.3em;
  206 + border: .1em solid #989898;
  207 + -webkit-box-sizing: border-box;
  208 + background-color: #fff;
  209 + font-size: 14px;
  210 +}
  211 +
  212 +.maplibTfctrHide {
  213 + display: none;
  214 +}
  215 +
  216 +.maplibTfctr_c {
  217 + -webkit-box-flex: 1;
  218 +}
  219 +
  220 +.maplibTfctr_status {
  221 + width: 4em;
  222 + margin-right: .45em;
  223 +}
  224 +
  225 +.maplibTfctr_status span {
  226 + display: inline-block;
  227 + margin-left: .3em;
  228 + font-size: 14px;
  229 +}
  230 +
  231 +.maplibTfctr div, .maplibTfctr span {
  232 + -webkit-box-sizing: border-box;
  233 +}
  234 +
  235 +.maplibTfctr_l {
  236 + margin: 0 .15em;
  237 +}
  238 +
  239 +.maplibY {
  240 + background: #ffae00;
  241 +}
  242 +
  243 +.maplibR {
  244 + background: #ff0000;
  245 +}
  246 +
  247 +.maplibG {
  248 + background: #1fba00;
  249 +}
  250 +/*e--------------交通流量-----------------*/
0 \ No newline at end of file 251 \ No newline at end of file
src/main/resources/static/assets/img/bar.png 0 → 100644
View file @6a04b94

3.34 KB
src/main/resources/static/assets/img/tools_menu.png 0 → 100644
View file @6a04b94

5.93 KB
src/main/resources/static/index.html
  View file @6a04b94
@@ -30,7 +30,6 @@ @@ -30,7 +30,6 @@
30 <!-- 日期控件 --> 30 <!-- 日期控件 -->
31 <link href="metronic_v4.5.4/plugins/bootstrap-datetimepicker-2/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css" /> 31 <link href="metronic_v4.5.4/plugins/bootstrap-datetimepicker-2/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css" />
32 32
33 -<link href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css" />  
34 <style type="text/css"> 33 <style type="text/css">
35 .searchForm{ 34 .searchForm{
36 } 35 }
@@ -269,10 +268,14 @@ tr.row-active td { @@ -269,10 +268,14 @@ tr.row-active td {
269 <script src="assets/plugins/pinyin.js"></script> 268 <script src="assets/plugins/pinyin.js"></script>
270 <!-- 日期控件 --> 269 <!-- 日期控件 -->
271 <script src="metronic_v4.5.4/plugins/bootstrap-datetimepicker-2/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script> 270 <script src="metronic_v4.5.4/plugins/bootstrap-datetimepicker-2/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
272 -<!-- 百度地图 -->  
273 -<script src="http://api.map.baidu.com/api?v=2.0&ak=IGGrr4UjwIYzatoCRFKEL8sT"></script>  
274 -<!-- 路况 -->  
275 -<script src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script> 271 +
  272 +<!-- 地图相关（地图JS现在在子页面引入有问题，先全部放在index） -->
  273 +<!-- 百度 -->
  274 +<script src="http://api.map.baidu.com/api?v=2.0&ak=IGGrr4UjwIYzatoCRFKEL8sT" ></script>
  275 +<script src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js" ></script>
  276 +<!-- 高德 -->
  277 +<script src="http://webapi.amap.com/maps?v=1.3&key=16cb1c5043847e09ef9edafdd77befda"></script>
  278 +
276 279
277 <script src="assets/js/common.js"></script> 280 <script src="assets/js/common.js"></script>
278 <script type="text/javascript"> 281 <script type="text/javascript">
src/main/resources/static/metronic_v4.5.4/css/animate.min.css 0 → 100644
  View file @6a04b94
  1 +@charset "UTF-8";/*!
  2 +Animate.css - http://daneden.me/animate
  3 +Licensed under the MIT license - http://opensource.org/licenses/MIT
  4 +
  5 +Copyright (c) 2015 Daniel Eden
  6 +*/.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.hinge{-webkit-animation-duration:2s;animation-duration:2s}.animated.bounceIn,.animated.bounceOut,.animated.flipOutX,.animated.flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounce{0%,100%,20%,53%,80%{-webkit-animation-timing-function:cubic-bezier(0.215,.61,.355,1);animation-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,.050,.855,.060);animation-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(0.755,.050,.855,.060);animation-timing-function:cubic-bezier(0.755,.050,.855,.060);-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%,100%,20%,53%,80%{-webkit-animation-timing-function:cubic-bezier(0.215,.61,.355,1);animation-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,.050,.855,.060);animation-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(0.755,.050,.855,.060);animation-timing-function:cubic-bezier(0.755,.050,.855,.060);-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%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.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)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.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)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,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%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,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 swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}@keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}.swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes tada{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;transform:none}}@keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;transform:none}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes jello{0%,100%,11.1%{-webkit-transform:none;transform:none}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(0.390625deg) skewY(0.390625deg);transform:skewX(0.390625deg) skewY(0.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}@keyframes jello{0%,100%,11.1%{-webkit-transform:none;transform:none}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(0.390625deg) skewY(0.390625deg);transform:skewX(0.390625deg) skewY(0.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 bounceIn{0%,100%,20%,40%,60%,80%{-webkit-animation-timing-function:cubic-bezier(0.215,.61,.355,1);animation-timing-function:cubic-bezier(0.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)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-animation-timing-function:cubic-bezier(0.215,.61,.355,1);animation-timing-function:cubic-bezier(0.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)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-animation-timing-function:cubic-bezier(0.215,.61,.355,1);animation-timing-function:cubic-bezier(0.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)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-animation-timing-function:cubic-bezier(0.215,.61,.355,1);animation-timing-function:cubic-bezier(0.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)}100%{-webkit-transform:none;transform:none}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-animation-timing-function:cubic-bezier(0.215,.61,.355,1);animation-timing-function:cubic-bezier(0.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)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-animation-timing-function:cubic-bezier(0.215,.61,.355,1);animation-timing-function:cubic-bezier(0.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)}100%{-webkit-transform:none;transform:none}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-animation-timing-function:cubic-bezier(0.215,.61,.355,1);animation-timing-function:cubic-bezier(0.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)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-animation-timing-function:cubic-bezier(0.215,.61,.355,1);animation-timing-function:cubic-bezier(0.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)}100%{-webkit-transform:none;transform:none}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-animation-timing-function:cubic-bezier(0.215,.61,.355,1);animation-timing-function:cubic-bezier(0.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)}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-animation-timing-function:cubic-bezier(0.215,.61,.355,1);animation-timing-function:cubic-bezier(0.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)}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,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)}100%{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)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.bounceOut{-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)}100%{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)}100%{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)}100%{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)}100%{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)}100%{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)}100%{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)}100%{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)}100%{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}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{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)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.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)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.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)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.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)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.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)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.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)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.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)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.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)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}100%{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}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}100%{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}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}100%{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}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}100%{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}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}100%{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}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}100%{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}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}100%{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}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}100%{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) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);transform:perspective(400px);-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) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-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) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-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) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}.flipOutX{-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) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}.flipOutY{-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);opacity:1}100%{-webkit-transform:none;transform:none;opacity:1}}@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);opacity:1}100%{-webkit-transform:none;transform:none;opacity:1}}.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}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOut{0%{opacity:1}100%{-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:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;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:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;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:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;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:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;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:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}@keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,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}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,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}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-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}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-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}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}@keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,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:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,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:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,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}100%{-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:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,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:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,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}100%{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;transform:none}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}@keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,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(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.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(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.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(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.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(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.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(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.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(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.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(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.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(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.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(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.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(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.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(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.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(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.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(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.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(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.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(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.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(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.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)}100%{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{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(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{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(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.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(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{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(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.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)}100%{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)}100%{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)}100%{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)}100%{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(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{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(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.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(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{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(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.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}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,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}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,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}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,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}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{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:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes slideOutLeft{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{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:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{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:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes slideOutUp{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}
0 \ No newline at end of file 7 \ No newline at end of file
src/main/resources/static/pages/mapmonitor/real/css/real.css 0 → 100644
  View file @6a04b94
  1 +.leftUtils,
  2 +.mapContainer,
  3 +.mapTools,
  4 +.mapRightWrap{
  5 + -moz-user-select:none;/*火狐*/
  6 + -webkit-user-select:none;/*webkit浏览器*/
  7 + -ms-user-select:none;/*IE10*/
  8 + -khtml-user-select:none;/*早期浏览器*/
  9 + user-select:none;
  10 +}
  11 +
  12 +.z-depth-2 {
  13 + box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  14 +}
  15 +
  16 +.z-depth-3 {
  17 + box-shadow: 0 12px 15px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
  18 +}
  19 +
  20 +#mapContainer{
  21 + min-width: 100%;
  22 + width: calc(100% + 26px);
  23 + margin-top: -28px;
  24 + border: 2px solid #fdfdfd;
  25 +}
  26 +/* ^_^ 隐藏logo */
  27 +.anchorBL,
  28 +.anchorBL,
  29 +.amap-logo,
  30 +.amap-copyright{
  31 + display: none;
  32 +}
  33 +
  34 +
  35 +.mapRightWrap{
  36 + position: absolute;
  37 + width: 320px;
  38 + height: 150px;
  39 + right: 10px;
  40 + background-color: #3B3F51;
  41 + top: 98px;
  42 +
  43 + transition: all .5s ease;
  44 +
  45 +}
  46 +
  47 +.mapRightWrap.to_searchPanel{
  48 + transform:rotateY(180deg);
  49 + height: 200px;
  50 +}
  51 +
  52 +.mapRightWrap.to_vehicle{
  53 + transform:rotateY(180deg);
  54 + height: calc(100% - 110px);
  55 +}
  56 +
  57 +.mapRightWrap.vehicle{
  58 + height: calc(100% - 110px);
  59 +}
  60 +
  61 +.rotate0{
  62 + transform:rotateY(0deg) !important;
  63 +}
  64 +
  65 +.leftUtilsWrap{
  66 + padding-left: 28px;
  67 +}
  68 +
  69 +.leftUtils{
  70 + position: absolute;
  71 + width: 188px;
  72 + height: 40px;
  73 + background-color: #3B3F51;
  74 + z-index: 9999;
  75 + color: #ddd;
  76 + padding-top: 7px;
  77 + top: 20px;
  78 +
  79 + transition: all .5s ease;
  80 +}
  81 +
  82 +.leftUtils span.item{
  83 + line-height: 28px;
  84 + border-right: 1px solid #999;
  85 + padding-right: 10px;
  86 + padding-left: 15px;
  87 + cursor: pointer;
  88 + font-family: 微软雅黑;
  89 +}
  90 +
  91 +.leftUtils span.item:hover{
  92 + color: #fff;
  93 +}
  94 +
  95 +.leftUtils span.item:last-child{
  96 + border-right:none;
  97 +}
  98 +
  99 +.mapTools{
  100 + position: absolute;
  101 + width: 320px;
  102 + height: 60px;
  103 + right: 10px;
  104 + background-color: #3B3F51;
  105 + top: 20px;
  106 + transition: all .5s ease;
  107 +}
  108 +
  109 +.mapTools .item{
  110 + color: #999;
  111 + display: inline-block;
  112 + margin: 24px 0 0 18px;
  113 + font-weight: bold;
  114 + cursor: pointer;
  115 +}
  116 +
  117 +.mapTools.disable .item{
  118 + /* color: #625C5C; */
  119 +}
  120 +
  121 +.mapTools .item.active{
  122 + color: #e5e5e5;
  123 +}
  124 +
  125 +.mapTools .item:hover{
  126 + color: #e5e5e5;
  127 +}
  128 +
  129 +.mapTools .item i{
  130 + font-size: 20px;
  131 +}
  132 +
  133 +html{
  134 + overflow: hidden;
  135 +}
  136 +
  137 +.ctrlMenu {
  138 + position: absolute;
  139 + width: 52px;
  140 + height: 52px;
  141 + background: #3B3F51;
  142 + top: 3px;
  143 + color: white;
  144 + font-size: 12px;
  145 + padding-top: 7px;
  146 + border-radius: 0 2px 52px 0 !important;
  147 + padding-left: 8px;
  148 + font-family: 微软雅黑;
  149 + cursor: pointer;
  150 +}
  151 +
  152 +/* spinner load start ------------------------------- */
  153 +.spinner {
  154 + margin: 50px auto;
  155 + width: 50px;
  156 + height: 40px;
  157 + text-align: center;
  158 + font-size: 10px;
  159 +}
  160 +
  161 +.spinner > div {
  162 + background-color: #69D7E1;
  163 + height: 100%;
  164 + width: 6px;
  165 + display: inline-block;
  166 +
  167 + -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  168 + animation: sk-stretchdelay 1.2s infinite ease-in-out;
  169 +}
  170 +
  171 +.spinner .rect2 {
  172 + -webkit-animation-delay: -1.1s;
  173 + animation-delay: -1.1s;
  174 +}
  175 +
  176 +.spinner .rect3 {
  177 + -webkit-animation-delay: -1.0s;
  178 + animation-delay: -1.0s;
  179 +}
  180 +
  181 +.spinner .rect4 {
  182 + -webkit-animation-delay: -0.9s;
  183 + animation-delay: -0.9s;
  184 +}
  185 +
  186 +.spinner .rect5 {
  187 + -webkit-animation-delay: -0.8s;
  188 + animation-delay: -0.8s;
  189 +}
  190 +
  191 +@-webkit-keyframes sk-stretchdelay {
  192 + 0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
  193 + 20% { -webkit-transform: scaleY(1.0) }
  194 +}
  195 +
  196 +@keyframes sk-stretchdelay {
  197 + 0%, 40%, 100% {
  198 + transform: scaleY(0.4);
  199 + -webkit-transform: scaleY(0.4);
  200 + } 20% {
  201 + transform: scaleY(1.0);
  202 + -webkit-transform: scaleY(1.0);
  203 + }
  204 +}
  205 +
  206 +.sk-cube-grid {
  207 + width: 40px;
  208 + height: 40px;
  209 + margin: 100px auto;
  210 +}
  211 +
  212 +.sk-cube-grid .sk-cube {
  213 + width: 33%;
  214 + height: 33%;
  215 + background-color: #69D7E1;
  216 + float: left;
  217 + -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
  218 + animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
  219 +}
  220 +.sk-cube-grid .sk-cube1 {
  221 + -webkit-animation-delay: 0.2s;
  222 + animation-delay: 0.2s; }
  223 +.sk-cube-grid .sk-cube2 {
  224 + -webkit-animation-delay: 0.3s;
  225 + animation-delay: 0.3s; }
  226 +.sk-cube-grid .sk-cube3 {
  227 + -webkit-animation-delay: 0.4s;
  228 + animation-delay: 0.4s; }
  229 +.sk-cube-grid .sk-cube4 {
  230 + -webkit-animation-delay: 0.1s;
  231 + animation-delay: 0.1s; }
  232 +.sk-cube-grid .sk-cube5 {
  233 + -webkit-animation-delay: 0.2s;
  234 + animation-delay: 0.2s; }
  235 +.sk-cube-grid .sk-cube6 {
  236 + -webkit-animation-delay: 0.3s;
  237 + animation-delay: 0.3s; }
  238 +.sk-cube-grid .sk-cube7 {
  239 + -webkit-animation-delay: 0s;
  240 + animation-delay: 0s; }
  241 +.sk-cube-grid .sk-cube8 {
  242 + -webkit-animation-delay: 0.1s;
  243 + animation-delay: 0.1s; }
  244 +.sk-cube-grid .sk-cube9 {
  245 + -webkit-animation-delay: 0.2s;
  246 + animation-delay: 0.2s; }
  247 +
  248 +@-webkit-keyframes sk-cubeGridScaleDelay {
  249 + 0%, 70%, 100% {
  250 + -webkit-transform: scale3D(1, 1, 1);
  251 + transform: scale3D(1, 1, 1);
  252 + } 35% {
  253 + -webkit-transform: scale3D(0, 0, 1);
  254 + transform: scale3D(0, 0, 1);
  255 + }
  256 +}
  257 +
  258 +@keyframes sk-cubeGridScaleDelay {
  259 + 0%, 70%, 100% {
  260 + -webkit-transform: scale3D(1, 1, 1);
  261 + transform: scale3D(1, 1, 1);
  262 + } 35% {
  263 + -webkit-transform: scale3D(0, 0, 1);
  264 + transform: scale3D(0, 0, 1);
  265 + }
  266 +}
  267 +/* spinner load end ------------------------------- */
  268 +
  269 +.sk-cube-grid._center{
  270 + position: absolute;
  271 + top: 30%;
  272 + left: 50%;
  273 + transform: translate(-50%, -50%);
  274 + -webkit-transform: translate(-50%, -50%);
  275 +}
  276 +
  277 +/* gaode style */
  278 +.mapRightWrap.gaode{
  279 + background: #fff;
  280 + border-radius: 5px !important;
  281 +}
  282 +
  283 +.mapTools.gaode{
  284 + background: #0D9BF2;
  285 + border-radius: 5px !important;
  286 +}
  287 +
  288 +.mapTools.gaode .item{
  289 + color: #fff;
  290 +}
  291 +
  292 +.mapTools.gaode .item.active {
  293 + color: #ddd;
  294 +}
  295 +
  296 +.leftUtils.gaode{
  297 + background: #fff;
  298 + border-radius: 5px !important;
  299 + color: #5A5858;
  300 +}
  301 +
  302 +.leftUtils.gaode span.item:hover{
  303 + color: #1C1B1B;
  304 +}
  305 +
  306 +.leftUtils.gaode span.item.active{
  307 + padding-left: 5px;
  308 + color: #0D9BF2;
  309 +}
  310 +
  311 +.leftUtils.gaode span.item.active:before{
  312 + content: "\f00c";
  313 + font: normal normal normal 14px/1 FontAwesome;
  314 +}
src/main/resources/static/pages/mapmonitor/real/js/map_platform.js 0 → 100644
  View file @6a04b94
  1 +var realMap = (function() {
  2 + var REAL_BAIDU_TEXT = '百度地图', REAL_GAODE_TEXT = '高德地图';
  3 +
  4 + // 中心点 （上海市浦东新区政府）
  5 + var CENTER_POINT = {
  6 + lng : 121.544336,
  7 + lat : 31.221315
  8 + };
  9 +
  10 + // 图层容器
  11 + var mapContainer = $('#mapContainer');
  12 + // 路况按钮
  13 + var trafficBtn = $('#trafficItem');
  14 +
  15 + var storage = window.localStorage;
  16 +
  17 + var real_map = {
  18 + currentMap : {},
  19 + mapName : '',
  20 + init: function(){
  21 + var m = storage.getItem('real_map');
  22 + if(m && m == REAL_GAODE_TEXT)
  23 + real_map.gaode.init();
  24 + else
  25 + real_map.baidu.init();
  26 + },
  27 + baidu : {
  28 + init : function() {
  29 + var r = real_map;
  30 +
  31 + r.setText(REAL_BAIDU_TEXT);
  32 +
  33 + var map = new BMap.Map(mapContainer[0]);
  34 + //中心点和缩放级别
  35 + map.centerAndZoom(new BMap.Point(CENTER_POINT.lng,CENTER_POINT.lat), 15);
  36 + map.enableScrollWheelZoom();
  37 + //加载完成
  38 + map.addEventListener("tilesloaded", function() {
  39 + layer.closeAll();
  40 + storage.setItem('real_map', REAL_BAIDU_TEXT);
  41 + });
  42 +
  43 + // 路况控件
  44 + var ctrl = new BMapLib.TrafficControl();
  45 + map.addControl(ctrl);
  46 +
  47 + var isVisible;
  48 + trafficBtn.on('click', function() {
  49 + if (isVisible) {
  50 + ctrl.hide();
  51 + isVisible = false;
  52 + } else {
  53 + ctrl.show();
  54 + isVisible = true;
  55 + }
  56 + });
  57 +
  58 + $('#tcWrap.maplibTc').addClass('animated bounceInLeft');
  59 +
  60 + r.currentMap = map;
  61 + r.mapName = REAL_BAIDU_TEXT;
  62 + },
  63 + change : function() {
  64 + showMsg(REAL_BAIDU_TEXT);
  65 +
  66 + real_map.destroy();
  67 + real_map.baidu.init();
  68 + }
  69 + },
  70 + gaode : {
  71 + init : function() {
  72 + var mapLoadAnim = '<div class="sk-cube-grid _center">'+
  73 + '<div class="sk-cube sk-cube1"></div>'+
  74 + '<div class="sk-cube sk-cube2"></div>'+
  75 + '<div class="sk-cube sk-cube3"></div>'+
  76 + '<div class="sk-cube sk-cube4"></div>'+
  77 + '<div class="sk-cube sk-cube5"></div>'+
  78 + '<div class="sk-cube sk-cube6"></div>'+
  79 + '<div class="sk-cube sk-cube7"></div>'+
  80 + '<div class="sk-cube sk-cube8"></div>'+
  81 + '<div class="sk-cube sk-cube9"></div>'+
  82 + '</div>';
  83 +
  84 + mapContainer.html(mapLoadAnim);
  85 +
  86 + var r = real_map;
  87 + r.gaode.setStyle();
  88 + r.setText(REAL_GAODE_TEXT);
  89 +
  90 + var map = new AMap.Map(mapContainer[0]);
  91 + // 地图中心和缩放级别
  92 + map.setZoomAndCenter(14, [ CENTER_POINT.lng,CENTER_POINT.lat ]);
  93 + //加载完成
  94 + AMap.event.addListener(map, 'complete', function() {
  95 + layer.closeAll();
  96 + storage.setItem('real_map', REAL_GAODE_TEXT);
  97 + $('.sk-cube-grid._center').remove();
  98 + });
  99 +
  100 + // 实时路况图层
  101 + var trafficLayer = new AMap.TileLayer.Traffic();
  102 + trafficLayer.setMap(map);
  103 + trafficLayer.hide();
  104 +
  105 + var isVisible;
  106 + trafficBtn.on('click', function() {
  107 + if (isVisible) {
  108 + trafficLayer.hide();
  109 + isVisible = false;
  110 + $(this).removeClass('active');
  111 + } else {
  112 + trafficLayer.show();
  113 + isVisible = true;
  114 + $(this).addClass('active');
  115 + }
  116 + });
  117 +
  118 + r.currentMap = map;
  119 + r.mapName = REAL_GAODE_TEXT;
  120 + },
  121 + change : function() {
  122 + showMsg(REAL_GAODE_TEXT);
  123 +
  124 + real_map.destroy();
  125 + real_map.gaode.init();
  126 + },
  127 + setStyle : function() {
  128 + $('.mapRightWrap').addClass('gaode');
  129 + $('.mapTools').addClass('gaode');
  130 + $('.leftUtils').addClass('gaode');
  131 + },
  132 + clearStyle : function() {
  133 + $('.mapRightWrap').removeClass('gaode');
  134 + $('.mapTools').removeClass('gaode');
  135 + $('.leftUtils').removeClass('gaode');
  136 + }
  137 + },
  138 + setText : function(text) {
  139 + $('.leftUtils span.dropdown-toggle').html(
  140 + text + ' <i class="fa fa-angle-down"></i>');
  141 + },
  142 + destroy : function() {
  143 + trafficBtn.unbind('click');
  144 + var map = real_map.currentMap;
  145 + map.destroy && map.destroy();
  146 +
  147 + if (real_map.mapName == REAL_GAODE_TEXT) {
  148 + // 如果前一个地图是高德，清除相关样式
  149 + real_map.gaode.clearStyle();
  150 + }
  151 + }
  152 + }
  153 +
  154 + function showMsg(text){
  155 + layer.msg('正在切换到' + text + '...', {icon : 16,shade : [ 0.6, '#393D49' ],time : 0});
  156 + }
  157 +
  158 + return real_map;
  159 +})();
0 \ No newline at end of file 160 \ No newline at end of file
src/main/resources/static/pages/mapmonitor/real/js/real.js 0 → 100644
  View file @6a04b94
  1 +!function() {
  2 + var animationend = 'webkitAnimationEnd animationend';
  3 +
  4 + var playAnimation;
  5 +
  6 + var mrw = $('.mapRightWrap');
  7 +
  8 + var spinnerLoad = '<div class="spinner">'
  9 + + ' <div class="rect1"></div>'
  10 + + ' <div class="rect2"></div>'
  11 + + ' <div class="rect3"></div>'
  12 + + ' <div class="rect4"></div>'
  13 + + ' <div class="rect5"></div>'
  14 + + '</div>';
  15 +
  16 +
  17 + //加载车辆信息
  18 + function jsQueryVehicle(){
  19 + mrw.html(spinnerLoad);
  20 + setTimeout(function() {
  21 + mrw.html('').addClass('vehicle');
  22 + }, 2000);
  23 + }
  24 +
  25 + // mapRightWrap 还原
  26 + function resetRotate(cb) {
  27 + mrw.one('transitionend', function() {
  28 + // 先取消transition ，将角度还原后再设置
  29 + $(this).css('transition', 'none').addClass('rotate0');
  30 +
  31 + setTimeout(function() {
  32 + mrw.css('transition', 'all .5s ease-in-out')
  33 + .removeClass('disable');
  34 + playAnimation = false;
  35 +
  36 + cb && cb();
  37 + }, 500);
  38 +
  39 + });
  40 + }
  41 +
  42 + // tools点击
  43 + $('.mapTools div.item').on('click', function() {
  44 + if ($(this).hasClass('active')) {
  45 + // 刷新
  46 + return;
  47 + }
  48 +
  49 + if (playAnimation)
  50 + return;
  51 + playAnimation = true;
  52 +
  53 + $('.mapTools').addClass('disable');
  54 + $('.mapTools div.item.active').removeClass('active');
  55 + $(this).addClass('active');
  56 + toolsEvent[$(this).data('click')]();
  57 + });
  58 +
  59 + var classzz = 'mapRightWrap z-depth-3 ';
  60 + var toolsEvent = {
  61 + // 车辆
  62 + vehicle : function() {
  63 + toolsEvent.clearStyle();
  64 + mrw.addClass('to_vehicle');
  65 + resetRotate(jsQueryVehicle);
  66 + },
  67 + search : function() {
  68 + toolsEvent.clearStyle();
  69 + mrw.addClass('to_searchPanel');
  70 +
  71 + resetRotate();
  72 + },
  73 + notice : function() {
  74 + },
  75 + playBack : function() {
  76 + },
  77 + clearStyle : function() {
  78 + mrw.removeClass(
  79 + 'vehicle to_vehicle to_searchPanel rotate0');
  80 + }
  81 + };
  82 +
  83 + // 地图切换
  84 + $('#mapTypeDrop li').on('click', function() {
  85 + realMap[this.id].change();
  86 + });
  87 +
  88 + // 关闭左侧栏
  89 + if (!$('body').hasClass('page-sidebar-closed'))
  90 + $('.menu-toggler.sidebar-toggler').click();
  91 +
  92 + // 地图容器高度
  93 + $('#mapContainer').height($(pjaxContainer).height() + 49);
  94 +
  95 + jsQueryVehicle();
  96 + init();
  97 +
  98 + function init(){
  99 + try {
  100 + realMap.init();
  101 + } catch (e) {
  102 + console.log('leay');
  103 + setTimeout(function(){
  104 + realMap.init();
  105 + }, 100);
  106 + }
  107 + }
  108 +
  109 +/* setTimeout(function(){
  110 + //清楚地图容器的加载动画（此时已被隐藏）
  111 + $('.sk-cube-grid._center').remove();
  112 + }, 3000);*/
  113 +}();
0 \ No newline at end of file 114 \ No newline at end of file
src/main/resources/static/pages/mapmonitor/real/real.html
  View file @6a04b94
1 -<div id="mapContainer" style="width: 100%; margin-top: -15px;"></div>  
2 -  
3 -<script>  
4 - $(function() {  
5 - //实例化地图  
6 - var map = new BMap.Map("mapContainer");  
7 -  
8 - $('#mapContainer').height($(pjaxContainer).height() + 30);  
9 -  
10 - map.centerAndZoom("上海", 13);  
11 - map.enableScrollWheelZoom();  
12 -  
13 - var ctrl = new BMapLib.TrafficControl();  
14 - map.addControl(ctrl);  
15 - ctrl.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT);  
16 - });  
17 -</script>  
18 \ No newline at end of file 1 \ No newline at end of file
  2 +<link href="css/real.css" rel="stylesheet" type="text/css" />
  3 +<!-- 百度路况控件 style -->
  4 +<link href="/assets/css/TrafficControl.css" rel="stylesheet" type="text/css" />
  5 +<!-- css3 动画库 -->
  6 +<link href="/metronic_v4.5.4/css/animate.min.css" rel="stylesheet" type="text/css" />
  7 +
  8 +<div class="leftUtilsWrap">
  9 +<div class="leftUtils z-depth-3 ">
  10 + <span class="dropdown-toggle item" data-toggle="dropdown"
  11 + aria-expanded="true">
  12 + <i class="fa fa-angle-down"></i>
  13 + </span>
  14 + <ul class="dropdown-menu" role="menu"
  15 + aria-labelledby="btnGroupVerticalDrop1" id="mapTypeDrop">
  16 + <li id="baidu"><a href="javascript:;"> 百度地图 </a></li>
  17 + <li id="gaode"><a href="javascript:;"> 高德地图 </a></li>
  18 + </ul>
  19 + <span class="item" id="trafficItem">
  20 + 实时路况
  21 + </span>
  22 +</div>
  23 +</div>
  24 +
  25 +<div id="mapContainer">
  26 +</div>
  27 +
  28 +<div class="mapTools z-depth-3 ">
  29 + <div class="item active" data-click="vehicle">
  30 + <i class="fa fa-bus"></i> &nbsp;车辆
  31 + </div>
  32 + <div class="item" data-click="search">
  33 + <i class="fa fa-search"></i> &nbsp;搜索
  34 + </div>
  35 + <div class="item" data-clikc="notice">
  36 + <i class="fa fa-bell-o"></i> &nbsp;通知
  37 + </div>
  38 + <div class="item" data-click="playBack">
  39 + <i class="fa fa-history"></i> &nbsp;回放
  40 + </div>
  41 +</div>
  42 +<div class="mapRightWrap z-depth-3"></div>
  43 +
  44 +<script src="js/map_platform.js"></script>
  45 +<script src="js/real.js"></script>