添加首页入口

common/css/ss-doctor.css

@@ -636,6 +636,7 @@ body {
}
.mod-juming .mod-bd {
	height: 6rem;
	font-size: .65rem;
}
@@ -707,18 +708,6 @@ body {
	box-sizing: border-box;
}
.zxgzrs {
	background: #D1F8ED url("../../images/doc-ico-new5.png") no-repeat 87% 65%;
	background-size: 4.5rem 4.35rem;
	color: #05afcd;
	width: 100%;
	height: 6rem;
	padding: .5rem;
	box-sizing: border-box;
	position: relative;
}
.zxgzrs>p{width: 60%;left: 0;top: 2rem;position: absolute;text-align: center;}
.zxgzrs>p+p{top: 2.8rem;font-size: 1rem;}
.list-fuwu {
	display: -webkit-box;
	display: box;

html/device/.svn/entries

@@ -0,0 +1,40 @@
10
dir
11936
svn://172.19.103.12:88/repos/wlyy/app/%E5%8E%A6%E9%97%A8i%E5%81%A5%E5%BA%B7v1.4.7/html/device
svn://172.19.103.12:88
2018-06-27T15:40:51.068156Z
11935
raolu
62d03301-2242-47d2-9572-f16751ab9961

html
dir

images
dir

css
dir

js
dir


html/device/css/.svn/entries

@@ -0,0 +1,232 @@
10
dir
11936
svn://172.19.103.12:88/repos/wlyy/app/%E5%8E%A6%E9%97%A8i%E5%81%A5%E5%BA%B7v1.4.7/html/device/css
svn://172.19.103.12:88
2018-06-22T07:50:30.959596Z
11829
raolu
62d03301-2242-47d2-9572-f16751ab9961

common.css
file
2018-06-28T06:23:23.123361Z
4774304853ed7d2fc67d0e2ce368b110
2018-06-08T09:19:54.213555Z
11714
linyihang
7228

device-physical-records.css
file
2018-06-28T06:23:23.125861Z
72cdceddc1dee90c588dba34f6d00894
2018-06-12T03:34:37.623926Z
11721
raolu
1500

device-management.css
file
2018-06-28T06:23:23.128361Z
eb6eaac16ae7dac61ef68aadddf54ba9
2018-06-22T07:50:30.959596Z
11829
raolu
3907

manager.css
file
2018-06-28T06:23:23.130861Z
67c24ce4e300488fa4f11a0b97126ab3
2018-05-17T02:09:30.102559Z
11663
raolu
16752

animate.css
file
2018-06-28T06:23:23.133362Z
07f146141537e04ee282a965d8053198
2018-05-17T02:09:30.102559Z
11663
raolu
72259

filter.css
file
2018-06-28T06:23:23.135862Z
df86d9d5f62b3fe7a81ce7d982dac03b
2018-06-12T03:34:37.623926Z
11721
raolu
969


html/device/css/.svn/text-base/animate.css.svn-base

@@ -0,0 +1,3340 @@
@charset "UTF-8";
/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2016 Daniel Eden
 */
.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.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}
@-webkit-keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.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 {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.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 {
  from, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@keyframes flash {
  from, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
  from {
    -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);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse {
  from {
    -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);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}
@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.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: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.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: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}
@-webkit-keyframes shake {
  from, to {
    -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 {
  from, to {
    -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 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: 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);
  }
  to {
    -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);
  }
  to {
    -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 {
  from {
    -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);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes tada {
  from {
    -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);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
  from {
    -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);
  }
  to {
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes wobble {
  from {
    -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);
  }
  to {
    -webkit-transform: none;
    transform: none;
  }
}
.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}
@-webkit-keyframes jello {
  from, 11.1%, to {
    -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(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
@keyframes jello {
  from, 11.1%, to {
    -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(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
.jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}
@-webkit-keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  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: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  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: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}
@-webkit-keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  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: none;
    transform: none;
  }
}
@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  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: none;
    transform: none;
  }
}
.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  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: none;
    transform: none;
  }
}
@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  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: none;
    transform: none;
  }
}
.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  from {
    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: none;
    transform: none;
  }
}
@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  from {
    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: none;
    transform: none;
  }
}
.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}
@-webkit-keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  from {
    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: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  from {
    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: 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);
  }
  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-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 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}
@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes fadeOutDown {
  from {
    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 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
@keyframes fadeOutDownBig {
  from {
    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 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes fadeOutLeft {
  from {
    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 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes fadeOutLeftBig {
  from {
    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 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes fadeOutRight {
  from {
    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 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes fadeOutRightBig {
  from {
    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 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes fadeOutUp {
  from {
    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 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes fadeOutUpBig {
  from {
    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 {
  from {
    -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;
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
@keyframes flip {
  from {
    -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;
  }
  to {
    -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 {
  from {
    -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);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInX {
  from {
    -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);
  }
  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 {
  from {
    -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);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInY {
  from {
    -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);
  }
  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 {
  from {
    -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;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutX {
  from {
    -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;
  }
  to {
    -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 {
  from {
    -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;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutY {
  from {
    -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;
  }
  to {
    -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 {
  from {
    -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;
  }
  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes lightSpeedIn {
  from {
    -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;
  }
  to {
    -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 {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOut {
  from {
    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 {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  to {
    -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 {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
  to {
    -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 {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -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 {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -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 {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }
  to {
    -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 {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
@keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }
  to {
    -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 {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -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 {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -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 {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -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 {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -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 {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -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 {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -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 {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -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 {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -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;
  }
  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: 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;
  }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }
  to {
    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 {
  from {
    opacity: 1;
  }
  to {
    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 {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  from {
    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 {
  from {
    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.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  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, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
@keyframes zoomInDown {
  from {
    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.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  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, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}
@-webkit-keyframes zoomInLeft {
  from {
    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.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  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, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
@keyframes zoomInLeft {
  from {
    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.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  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, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}
@-webkit-keyframes zoomInRight {
  from {
    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.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  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, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
@keyframes zoomInRight {
  from {
    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.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  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, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}
@-webkit-keyframes zoomInUp {
  from {
    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.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  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, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
@keyframes zoomInUp {
  from {
    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.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  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, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}
@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
  to {
    opacity: 0;
  }
}
@keyframes zoomOut {
  from {
    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(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  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(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 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.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  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(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 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(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  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(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 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.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  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(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
}
@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}
@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}
@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}
@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}
@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 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 {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 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 {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 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 {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

html/device/css/.svn/text-base/common.css.svn-base

@@ -0,0 +1,352 @@
.c-12b7f5{
    color: #12b7f5;
}
.c-17b3ec{
    color: #17b3ec;
}
.c-4ecd70{
    color: #4ecd70;
}
.c-323232{
    color: #323232;
}
.c-19d5c5{
    color: #19d5c5;
}
.c-999999{
	color: #999999;
}
.c-ffc800{
    color: #ffc800;
}
.c-w-33{
    width: 33%;
}
.info-icon{
    vertical-align: middle;
    margin-bottom: 5px;
}
.information{
    background-color: rgba(0,0,0,0.5);
    font-size: 14px;
    color: #fff;
}
.information .ui-col-0{
    width: 40px;
    text-align: center;
}
.location-div{
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
}
.location-div img{
    vertical-align: text-bottom;
}
.choose-label{
    color: #17B3EC;
    display: inline-block;
    max-width: 100%;
    _width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.blue-column{
    display: inline-block;
    width: 4px;
    height: 12px;
    background-color: #12b7f5;
}
.date-tag{
    display: inline-block;
    text-align: center;
    width: 50px;
    padding: 5px 0;
    font-size: 14px;
    color: #17b3ec;
    border: 1px solid #17b3ec;
}
.date-tag:first-child{
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}
.date-tag:nth-child(2){
    border-right: 0;
    border-left: 0;
}
.date-tag:nth-child(3){
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}
.date-tag.active{
    background-color: #17b3ec;
    color: #fff;
}
.area-tab-panel{
    display: -webkit-box;
    height: 45px;
    line-height: 45px;
    margin: 0 10px;
    background-color: #fff;
    border: 1px solid #e1e1e1;
    border-bottom: 0;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    box-shadow: 0px 0px 1px #ccc;
}
.area-tab{
    -webkit-box-flex: 1;
    text-align: center;
    position: relative;
}
.area-tab .border-line-right{
    display: inline-block;
    position: absolute;
    width: 1px;
    height: 20px;
    right: 0;
    top: 50%;
    margin-top: -10px;
    background-color: #e1e1e1;
}
.area-tab span{
    display: inline-block;
    height: 45px;
    border-bottom: 2px solid transparent;
    font-size: 16px;
    color: #323232;
    padding: 0 10px;
}
.area-tab.active span{
    color: #17b3ec;
    border-bottom: 2px solid #17b3ec;
}
.bottom-list-table{
    background-color: #fff;
    width: 100%;
    text-align: center;
    font-size: 14px;
}
.bottom-list-table thead{
    height: 40px;
    background-color: #f2f4f6;
    border-bottom: 1px solid #e1e1e1;
    color: #909090;
}
.bottom-list-table thead tr{
    height: 40px;
}
.bottom-list-table td,
.bottom-list-table th{
    text-align: center;
    vertical-align: middle;
}
.bottom-list-table .c-t-left {
	text-align: left;
}
.bottom-list-table td{
    padding: 10px 0;
}
.bottom-list-table tbody>tr{
    border-bottom: 1px solid #e1e1e1;
}
/*.bottom-list-table tbody>tr:first-child{
    border-top: 0;
}*/
.bottom-list-table tbody tr td.area-name{
    text-align: left;
    padding-left: 10px;
    font-size: 16px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    
}
@media only screen and (max-width: 320px) {
    .bottom-list-table tbody tr td.area-name{
        max-width: 125px;
    }
}
@media only screen and (min-width: 321px) and (max-width: 414px) {
    .bottom-list-table tbody tr td.area-name{
        max-width: 180px;
    }
}
@media only screen and (min-width: 414px) and (max-width: 640px) {
    .bottom-list-table tbody tr td.area-name{
        max-width: 200px;
    }
}
.bottom-list-table .fa{
    font-size: 18px;
    color: #909090;
}
.ranking{
    width: 28px;
    height: 26px;
    font-size: 12px;
    text-align: center;
    margin-right: 5px;
    line-height: 26px;
    -webkit-box-flex: 0;
}
.ranking1{
    background: url(../images/paiming01_icon.png) no-repeat center 0;
    background-size: 24px 22px;
}
.ranking2{
    background: url(../images/paiming02_icon.png) no-repeat center 0;
    background-size: 28px 26px;
}
.ranking3{
    background: url(../images/paiming03_icon.png) no-repeat center 0;
    background-size: 28px 26px;
}
.modal-overlay{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
}
.modal-overlay.modal-overlay-visible{
    visibility: visible;
    opacity: 1;
}
.modal-content {
    height: 400px;
    position: absolute;
    width: 80%;
    z-index: 9999;
    top: 50%;
    left: 50%;
    margin-left: -40%;
    margin-top: -200px;
    display: none;
}
.div-header-title {
    height: 80px;
    background: #17B3EC;
    width: 100%;
    position: relative;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.div-close {
    width: 26px;
    height: 26px;
    background: url(../images/tankuang_guanbi_icon.png) no-repeat center top;
    background-size: 26px;
    position: absolute;
    top: 10px;
    right: 10px;
}
.div-overlay-img {
    width: 170px;
    height: 53px;
    background: url(../images/tankuang_bg_img.png) no-repeat center top;
    background-size: 170px 53px;
    position: absolute;
    top: 15px;
    left: 50%;
    margin-left: -85px;
}
.div-overlay-title {
    position: absolute;
    top: 38px;
    left: 40%;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
}
.div-overlay-content {
    height: 320px;
    background: #fff;
    width: 100%;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.div-jf-title2{
    position: absolute;
    font-size: 14px;
    top: 50%;
    width: 100%;
    margin-top: -21px;
}
/*总体分析页面样式*/
.l-banner{
    display: -webkit-box;
    height: auto;
    margin-bottom: 10px;
    padding: 0 10px;
}
.l-banner li{
    -webkit-box-flex: 0;
    text-align: center;
    margin-left: 10px;
    background: #fff;
    border-radius: 5px;
    width: calc((100% - 20px) / 3);
    padding: 10px 0;
    border: 1px solid #E1E1E1;
    /*border-bottom: 5px solid transparent;*/
    position: relative;
}
.l-banner li:first-child{
    margin-left: 0;
}
.l-banner li .l-name{
    color: #909090;
}
.l-banner li.active,
.l-banner li.active .l-name
{
    color: #17b3ec;
}
.l-banner li.active:after{
    content: "";
    width: 100%;
    height: 5px;
    background-color: #17b3ec;
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.blur-cycle-box{
    position: absolute;
    width: 70px;
    height: 70px;
    top: 50%;
    margin-top: -35px;
    left: 50%;
    margin-left: -35px;
    /*z-index: 2;*/
    background-color: #17b3ec;
    border-radius: 50%;
    text-align: center;
}
.position-center-text{
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    text-align: center;
    margin-top: -10px;
}
.w-45 {
	width: 45%;
}

html/device/css/.svn/text-base/device-management.css.svn-base

@@ -0,0 +1,162 @@
/*@font-face {
    font-family: Muiicons;
    font-weight: 400;
    font-style: normal;
    src: url('../../../fonts/font-awesome/fonts/fontawesome-webfont.eot?v=4.6.3');
    src: url('../../../fonts/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'),url('../../../fonts/font-awesome/fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'),url('../../../fonts/font-awesome/fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'),url('../../../fonts/font-awesome/fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'),url('../../../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
}*/
@font-face {
    font-family: Muiicons;
    font-weight: normal;
    font-style: normal;
    src: url('../../../fonts/mui.ttf') format('truetype');
}
.c-999{color: #999;}
.c-17b3ec{color: #17b3ec;}
.c-btn-17b3ec{
    background-color: #17b3ec;
    font-size: 14px;
    border-radius: 5px;
    padding: 10px 15px;
}
.filter-label{
    color: #999;
    display: inline-block;
    position: relative;
    padding: 0 10px;
}
.filter-label:after{
    content: '';
    position: absolute;
    width: 1px;
    height: 15px;
    top: 50%;
    margin-top: -7px;
    right: 0;
    background-color: #e1e1e1;
}
.filter-label:last-child:after{
    width: 0;
}
.fa-angle-right{
    font-size: 20px;
    color: #909090;
}
.list-item{
    background-color: #fff;
    padding: 10px 15px;
    border-bottom: 1px solid #e1e1e1;
}
.c-checkbox, .c-radio{
    position: relative;
    width: 26px;
    height: 26px;
    display: inline-block;
}
.c-checkbox input[type=checkbox], 
.c-radio input[type=radio]{
    position: absolute;
    width: 26px;
    height: 26px;
    right: 0;
    top: 0;
    display: inline-block;
    border: 0;
    outline: 0!important;
    background-color: transparent;
    -webkit-appearance: none;
}
.c-checkbox input[type=checkbox]:before, 
.c-radio input[type=radio]:before{
    font-family: Muiicons;
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    color: #ccc;
    border-radius: 0;
    background: 0 0;
    -webkit-font-smoothing: antialiased;
}
.c-checkbox input[type=checkbox]:before{
    content: '\e411';
}
.c-checkbox input[type=checkbox]:checked:before, 
.c-radio input[type=radio]:checked:before{
    color: #17b3ec;
}
.c-checkbox input[type=checkbox]:checked:before{
    content: '\e442';
}
.check-all{
    display: inline-block;
    position: relative;
    width: 21px;
    height: 21px;
    background: url(../images/weixuanzhe_icon.png) no-repeat;
    background-size: 21px 21px;
    top: 7px;
    margin-right: 10px;
}
.check-all.checked{
    background: url(../images/queren_icon.png) no-repeat;
    background-size: 21px 21px;
}
.mui-popover.mui-popover-action .mui-table-view{
    color: #666;
    font-size: 14px;
}
.mui-popover.mui-popover-action .mui-table-view a:hover{
    color: #17b3ec;
}
.mui-table-view-cell>a.active{
    color: #17b3ec;
}
.header-link.disabled{
    opacity: 0.6;
}
.device-card{
    position: relative;
    display: -webkit-box;
    display: box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    box-pack: center;
    box-align: center;
    
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    background-color: #fff;
    margin-top: 10px;
    padding: 15px 10px 15px 15px;
}
.img-box{
    width: 80px;
    height: 80px;
    border: 1px solid #e1e1e1;
    border-radius: 2px;
    padding: 2px;
}
.img-box>img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.flag-box{
    position: absolute;
    top: 0;
    left: 0;
}
.flag-box>img{
    width: 30px;
}
/*选择提醒居民*/
.item-li{
    margin-top: 10px;
}
.item-li:first-child{
    margin-top: 0;
}

html/device/css/.svn/text-base/device-physical-records.css.svn-base

@@ -0,0 +1,79 @@
.c-17b3ec{
    color: #17b3ec;
}
.c-ccc{
    color: #ccc;
}
.c-red{
    color: #ff5e6c;
}
.c-green{
    color: #06bf04;
}
.arrow{
    width: 20px;
    height: 10px;
    background: url(../images/xiazhan_icon.png) 100% 100% no-repeat;
    background-size: 20px 10px;
}
.month-panel{
    background-color: #fff;
    margin-top: 10px;
    border-top: 1px solid #E1E1E1;
    border-bottom: 1px solid #E1E1E1;
}
.month-panel:first-child{
    margin-top: 0;
}
.month,
.date{
    display: -webkit-box;
    display: box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    box-pack: center;
    box-align: center;
    padding: 10px 15px;
    /*border-bottom: 1px solid #e1e1e1;*/
}
.date-panel{
    border-bottom: 1px solid #e1e1e1;
}
.date-panel:last-child{
    border-bottom: 0;
}
.date-list{
    display: none;
    border-top: 1px solid #e1e1e1;
}
.fa-angle-down,.fa-angle-up{
    color: #ccc;
    font-size: 20px;
}
.record-list{
    display: none;
    border-top: 1px solid #e1e1e1;
}
.record{
    display: -webkit-box;
    display: box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    box-pack: center;
    box-align: center;
    padding: 10px 0px;
    border-bottom: 1px solid #e1e1e1;
    
    font-size: 14px;
    color: #323232;
}
.record:last-child{
    border-bottom: 0;
}
.no-record{
    text-align: center;
    padding: 10px;
    font-size: 14px;
    color: #666;
    display: none;
}

html/device/css/.svn/text-base/filter.css.svn-base

@@ -0,0 +1,52 @@
.bgc-17b3ec{
    background-color: #17b3ec;
}
.c-999{color: #999;}
.footer{
    position:fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}
.footer div{
    width: 50%;
    float: left;
    font-size: 17px;
    text-align: center;
    padding: 10px 0;
}
.cancel-btn{
    border-top: 1px solid #e1e1e1;
    background-color: #fff;
    color: #666;
}
.confirm-btn{
    border-top: 1px solid #17b3ec;
    background-color: #17b3ec;
    color: #fff;
}
.tag{
    display: inline-block;
    min-width: 84px;
    text-align: center;
    padding: 5px 10px;
    border: 1px solid #e1e1e1;
    border-radius: 15px;
    margin-top: 10px;
    margin-right: 10px;
    font-size: 14px;
    color: #333;
}
.tag.active{
    background-color: #17b3ec;
    color: #fff;
    border-color: #17b3ec;
}
.reset-btn{
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 17px;
    color: #17b3ec;
    font-weight: 600;
}

html/device/css/.svn/text-base/manager.css.svn-base

@@ -0,0 +1,672 @@
.l-liri{
	position: relative;
	top: -5px;
	height: 30px;
	width: 30px;
	float: left;
	margin-right: 16px;
	/*background: url(../images/rili.png) no-repeat;
	background-size: 30px 30px;*/
}
.time-sel-input{
	height: 48px; background-color: #FFFFFF; padding: 14px 20px;
	padding-right: 10px;
	/*font-size: .8rem;*/
}
.l-arrow-right {
	display: block;
	width: 14px;
	height: 14px;
	border: solid #cdcdcd;
	border-width: 3px 3px 0 0;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	margin-top: 2px;
}
.l-arrow-left {
	display: block;
	width: 14px;
	height: 14px;
	border: solid #cdcdcd;
	border-width: 0 0 3px 3px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	margin-top: 2px;
}
.l-qytj-barner{
	display: -webkit-box;
	/*height: 60px;*/
	height: auto;
	margin-bottom: 10px;
	/*background-color: #fff;*/
}
.l-qytj-barner li{
	-webkit-box-flex: 1;
	text-align: center;
	margin-left: 10px;
	background: #fff;
	border-radius: 10px;
}
.l-qytj-barner li.l-over{
	border-bottom: 8px solid #17B3EC;
	color: #17b3ec;
}
.l-qytj-barner li.l-last{
	margin-right: 10px;
}
.l-qytj-val {
	padding-top: 10px;
	/*font-size: 1.1rem;*/
}
.l-qytj-name{
	/*font-size: 0.8rem;*/
	/*padding-top: 2px;*/
	padding-top: 10px;
    padding-bottom: 10px;
}
.l-qytj-img{
	height: 78px;
	padding-top: 18px;
}
.l-qytj-barner div.back-img{
	width: 50px;
	height: 50px;
	background-size: 50px 50px;
	margin-left: auto;
	margin-right: auto;
}
.l-qytj-barner div.qianyue{
	background: url(../images/qianyue.png);
}
.l-qytj-barner li.over div.qianyue{
	background: url(../images/qianyue_over.png);
}
.l-qytj-barner div.jieyue{
	background: url(../images/jieyue.png);
}
.l-qytj-barner li.over div.jieyue{
	background: url(../images/jieyue_over.png);
}
.l-qytj-barner div.jiandang{
	background: url(../images/jiandang.png);
}
.l-qytj-barner li.over div.jiandang{
	background: url(../images/jiandang_over.png);
}
.l-qytj-barner div.zixun{
	background: url(../images/zixun.png);
}
.l-qytj-barner li.over div.zixun{
	background: url(../images/zixun_over.png);
}
.l-qytj-barner div.suifang{
	background: url(../images/suifang.png);
}
.l-qytj-barner li.over div.suifang{
	background: url(../images/suifang_over.png);
}
.l-qytj-barner div.zhidao{
	background: url(../images/zhidao.png);
}
.l-qytj-barner li.over div.zhidao{
	background: url(../images/zhidao_over.png);
}
.l-qytj-name2{
	color: #888;
	font-size: 14px;
}
.l-qytj-barner li.over div.l-qytj-name2{
	color: #17b3ec;
}
.l-zxt{
	padding: 10px;
	height: 250px;
	background-color: #fff;
	margin-top: 2px;
	margin-bottom: 10px;
	border-top: 1px solid #dcdcdc;
	border-bottom: 1px solid #dcdcdc;
}
.l-zxt-con{
	width: 100%;
	height: 100%;
	/* background-color: #f1f4fb; */
	overflow: hidden;
}
/*.l-zxt-inner{
	width: 122%;
	height: 116%;
	position: relative;
	top: -4%;
	left: -76px;
}*/
/*.l-zxt-inner div:first-child{
	left: -7%;
}*/
.l-bar-title{
	height: 2.3rem;
	padding: 0.3rem 0.7rem;
	font-size: 1rem;
	color: #666;
	background-color: #fff;
	
}
.l-bar-title div{
	background: url(../images/quyu.png) no-repeat;
	background-size: 1.6rem 1.6rem;
	height: 100%;
	padding: 0.2rem 2rem;
}
.mui-backdrop {
	height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 998;
    background-color: rgba(0,0,0,.3);
}
.l-gq-list{
	background-color: #fff;
}
.l-gq-list li{
    height: 70px;
    /* padding: 0.6rem 0; */
    border-top: 1px solid #e1e1e1;
    margin: 0 0.6rem;
    position: relative;
}
.l-gq-list li:first-child{
    border-top: none;
}
.l-gq-bg{
    position: relative;
    height: 60px;
    width: 40%;
    border-radius: 8px;
    background-color: #17b3ec;
    opacity: 0.4;
    z-index: 1;
    top: 5px;
}
.l-gq-name{
    position: relative;
    top: -70%;
    left: 5px;
    color: #333333;
}
.l-gq-arrow{
    position: relative;
    top: -42%;
    float: right;
    right: 10px;
    border: solid #17b3ec;
    border-width: 3px 3px 0 0;
}
.l-gq-sj{
    position: relative;
    top: -60%;
    left: 5px;
    color: #005f99;
    /*font-size: .8rem;*/
}
.l-time-sel-box{
    background-color: #fff;
    font-size: 1rem;
    width: 100%;
    color: #555;
}
.l-time-sel-box ul{
	padding: 0rem 1.25rem;
}
.l-time-sel-box ul li{
	height: 3rem;
	border-top: 1px solid #ccc;
	line-height: 3rem;
}
.l-time-sel-box ul li.l-over{
	background: url(../images/checked.png) no-repeat;
	background-position: right;
	background-size: 1.8rem 1.8rem;
}
.l-time-sel-custom{
	margin: 0rem 1.25rem;
	border-top: 1px solid #ccc;
	line-height: 3rem;
}
.l-btn-arr{
    border-top: 1px solid #ccc;
    height: 3rem;
    font-size: 1.3rem;
}
.l-btn-arr div{
	float: left;
    width: 50%;
    text-align: center;
    line-height: 3rem;
}
.l-btn-cancel{
    
}
.l-btn-ok{
    color: #fff;
    background-color: #17b3ec;
}
.l-date-form{
	height: 66px;
	padding: 0 1.25rem;
	display: none;
}
.l-date-form input{
	color: #17b3ec;
}
.l-date-start{
    font-size: 1rem;
    color: #888;
    width: 50%;
    float: left;
}
.l-date-start input{
    border: none;
    margin-bottom: 0px;
    padding-left: 0px;
}
.l-date-end{
    text-align: right;
    width: 50%;
    float: right;
    font-size: 1rem;
    color: #888;
}
.l-date-end input{
    border: none;
    margin-bottom: 0px;
    text-align: right;
    padding-right: 0;
}
.l-jmfx{
    position: relative;
    z-index: 999;
    color: #17b3ec;
    top: 0rem;
    height: 0;
    right: 2rem;
    display: none;
    font-size: 0.8rem;
}
.l-jmfx img{
    width: .8rem;
    height: .7rem;
    margin-left: 6px;
    margin-top: 0.35rem;
}
.l-refresh{
    float: right;
    position: relative;
    top: -37px;
    height: 30px;
    right: -26px;
}
.l-refresh img{
	width: 26px;
	height: 26px;
}
.l-legend{
    position: relative;
    top: 1rem;
    left: 12%;
    height: 0;
    z-index: 999;
    width: 200px;
}
.l-legend ul{
    display: -webkit-box;
    /*height: 0;*/
    font-size: 0.8rem;
    color: #ccc;
}
.l-legend li{
    -webkit-flex: 1;
    margin-left: 10px;
}
.l-legend label{
    float: left;
    width: 16px;
    height: 12px;
    border-radius: 5px;
    background: #ccc;
    margin-top: 4px;
    margin-right: 3px;
}
.l-legend li.l-over{
    color: #17b3ec;
}
.l-legend li.l-over label{
    background: #17b3ec;
}
.l-times{
    position: relative;
    top: 1.6rem;
    font-size: 0.6rem;
    height: 0px;
    background: red;
    left: 8%;
    width: 0px;
}
.f-dn{display: none;}
.div-lv{display: box; display: -webkit-box; display: -moz-box;/*background: #ffffff; padding-top: 8px;*/height: 162px;background: #ffffff;border-top: 1px solid #dcdcdc;border-bottom: 1px solid #dcdcdc;margin-bottom: 10px;padding-bottom: 10px;}
.div-lv .wrap{width: 50%;text-align: center;margin-top: 6px;}
.div-lv .wrap p{line-height: 1.5;}
.height-12{height: 12px;}
.wrap canvas{width: 76px;height: 76px;}
.f-fs16{font-size: 16px;}
.f-fr{float:right}
.mui-switch.mui-active:before {
	right: auto;
	left: 10px;
	content: '日';
	color: #fff
}
.mui-switch:before {
	font-size: 13px;
	position: absolute;
	top: 3px;
	right: 11px;
	content: '周';
	text-transform: uppercase;
	color: #fff
}
.mui-switch.mui-active {
	border-color: #0068a9;
	background-color: #0068a9
}
.mui-switch{
	border: 2px solid #0068a9;
	background-color: #0068a9;
	z-index: 100;
	width:60px;
}
.mui-switch .mui-switch-handle{left: -1px;}
.div-ranking{position: absolute;top: 42%;right: 32px;z-index: 10;padding: 2px 4px;border-radius: 10px;color: #fff;/*font-size: 14px;*/}
.c-EA5B3A{color: #EA5B3A;}
.cb-EA5B3A{background: #EA5B3A;}
.cb-FF8746{background: #FF8746;}
.cb-69CA2E{background: #69CA2E;}
.cb-3DA9CE{background: #3DA9CE;}
.canvas-wc{width:100%; height:190px; margin: 37px 7px;position: absolute;top:0;left:0;display: none;background: #17B3EC;z-index: 10;}
.div-switch{position: absolute;top: 37px;left: 10px;display: none;}
.div-danwei{position: absolute;right: 10px;top: 40px;z-index: 100;color: #ffffff;}
.div-mbl{ position: absolute;  right: 13px;  top: 54px;  z-index: 100;  color: #ffffff; }
.div-layer{width: 100%;  height: 200px;  margin: 33px 5px;  position: absolute;  top: 0;  left: 0; background: #17B3EC; z-index: 5;border-radius: 10px;}
.div-btn-group{ position: absolute;  top: 37px;  left: 10px;z-index: 100;}
.div-btn-group .div-btn{width: 40px;height: 20px; line-height: 20px; background: #0068A9;text-align: center;border-radius: 10px;color: #fff;float: left;margin-right: 5px;}
.div-btn-group .div-btn.active{background: #90D5FF; color: #0068a9;}
.div-header{height: 73px;}
.div-header-item{width: 25%;float: left;text-align: center;padding-top: 10px;}
.c-ec5317{color: #ec5317;}
.f-fs13{font-size: 13px;}
.f-fs14{font-size: 14px;}
.icon-remark{width: 25px;height: 25px;background: url(../images/wenhao_icon.png) no-repeat center top;background-size: 25px;position: absolute;  top: 10px;  right: 10px;}
.modal-overlay{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.4);z-index: 9999;visibility: hidden;opacity: 0;-webkit-transition-duration: 400ms;transition-duration: 400ms;}
.modal-overlay.modal-overlay-visible{ visibility: visible;opacity: 1;}
.c-ti2 {text-indent: 2em;}
.c-fwb { font-weight: bold;}
.pl14{padding-left: 14px;}
.pr14{padding-right: 14px;}
.c-333333{color:#333333}
.f-f14{font-size: 14px;}
.modal-content{height: 400px;position: absolute;width: 80%;border-radius: 20px;z-index: 9999;top: 50%;left: 50%;margin-left: -40%;margin-top: -199px;display: none;}
.div-header-title{height: 80px;background: #17B3EC;width: 100%;position: relative;border-top-left-radius: 10px;border-top-right-radius: 10px;}
.div-close{width: 26px;height: 26px;background: url(../images/tankuang_guanbi_icon.png) no-repeat center top;background-size: 26px;position: absolute;  top: 10px;  right: 10px;}
.div-overlay-img{width: 170px;height: 53px;background: url(../images/tankuang_bg_img.png) no-repeat center top;background-size: 170px 53px;position: absolute;  top: 15px;  left:50%;margin-left: -85px;}
.div-overlay-title{position: absolute;top: 38px;left:40%;color: #fff;font-weight: bold;font-size: 18px;}	
.div-overlay-content{height: 320px;background: #fff;width: 100%;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;}
.div-list,.div-list0,.div-list1,.div-list2{width: 100%;height: auto;position: relative;background: #fff;}
.div-left-content{width: 100%;position: absolute;left: 0;top:60px;z-index: 10;}
.div-right-data-content{width: 50%;position: absolute;right: -10px;top:60px;z-index: 20;}
.div-ranking-top{padding: 4px 10px; border-radius: 10px;  color: #fff;   font-size: 10px; width: auto; float: left; margin-left: 5px; margin-top: 15px;}
.div-left-title{line-height: 55px;display: -moz-box;display: -webkit-box;font-size: 12px;overflow: hidden; -webkit-line-clamp: 2;    -webkit-box-orient: vertical; color:#323232;word-break: break-all; width: 50px;float: left; margin-left: 5px;text-align: center;}
.div-left-title1{line-height: 25px;display: -moz-box;display: -webkit-box;font-size: 12px;overflow: hidden; -webkit-line-clamp: 2;    -webkit-box-orient: vertical; color:#323232;word-break: break-all; width: 50px;float: left; margin-left: 5px;text-align: center;}
.div-left-title2{line-height: 19px;display: -moz-box;display: -webkit-box;font-size: 12px;overflow: hidden; -webkit-line-clamp: 3;    -webkit-box-orient: vertical; color:#323232;word-break: break-all; width: 50px;float: left; margin-left: 5px;text-align: center;}
.div-right-danwei{position: absolute;right: 0;top: 48px;color: #cccccc;}
.div-right-content,.div-right-team-content{width:100%;height: 30px;line-height: 30px;/*position: absolute;right: 0;top:35px;*/}
.div-right-team-content{padding-left: 80px;}
.f-fs10{font-size:10px}
.qyl{width: 15px;height: 15px;background: #a0dc28;margin-left: 10px;}
.rks{width: 15px;height: 15px;background: #ffc149;margin-left: 10px;margin-top: 10px;}
.mbl{width: 15px;height: 15px;background: #17b3ec;margin-left: 10px;margin-top: 10px;}
.qylv{width:15px;height: 2px;background: red;margin-top: 10px;margin-left: 10px;}
.mblv{width:15px;height: 2px;background: #925cfe;margin-top: 10px;margin-left: 10px;}
.qyl-td{width: 15px;height: 15px;background: #17B3EC;margin-left: 10px;}
.icon-refresh{width: 25px;height: 25px;background: url(../images/qiehuan_icon.png) no-repeat center top;background-size: 25px;position: absolute;  top: 10px;  right: 10px;}
.h62{height: 62px;}
.h58{height: 58px;}
.h66{height: 66px;}
.h68{height: 68px;}
.h54{height: 54px;}
.mt20{margin-top:20px}
.mt10{margin-top:10px}
.div-top{width:1rem;color:#fff;margin-top: 17px;text-align: center;border-radius: 5px;float:left;margin-left: 5px;}
.div-name,.div-amount{text-align: center;width:50px;float: left;margin-left: 5px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;word-break: break-word;}
.c-a0dc28{color:#a0dc28;}
.c-17b8ec{color:#17b8ec}
.list-ul li{height: 63px;}
.div-shujujz{height: 38px;line-height: 38px;text-align: left;color: #909090;margin-left: 10px;}
.div-shujujz .text-box span{display: inline-block;vertical-align: middle;}
.div-shujujz .text-box .title{max-width: 50%;height: 38px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.scroll-wrapper{top: 45px;}
.pullDown, .pullUp{background: #f2f4f6;}
.pullDown.scrolledUp {margin-top: -51px;}
.pullUp,.pullUpLabel{display: none;}
.lin-sel-group{
	position: absolute;
	top: 45px;
	background: #fff;
	width: 100%;
	z-index: 11;
	display: none;
}
.lin-sel-group li{
	text-align: center;
	color: #17b3ec;
	height: 40px;
	line-height: 40px;
	font-size: 16px;
	border-bottom: 1px solid #f2f4f6;
}
.lin-sel-group img{
	width: 20px;
	margin: 10px;
	display: none;
}
.lin-sel-group li.checked img{
	display: inline;
}
.lin-mask{
	position: absolute;
	top: 45px;
	height: 100%;
	width: 100%;
	/*background: #000;*/
	height: 100%;
	z-index: 10;
	display: none;
	background-color: rgba(0,0,0,0.5);
}
.lin-down-arrow{
    position: relative;
    top: -2px;
    left: 5px;
    height: 10px;
    width: 10px;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
    display: inline-block;
    transform:rotate(45deg);
	-ms-transform:rotate(45deg); 	/* IE 9 */
	-moz-transform:rotate(45deg); 	/* Firefox */
	-webkit-transform:rotate(45deg); /* Safari 和 Chrome */
	-o-transform:rotate(45deg); 		/* Opera */
	zoom: 1;
	box-sizing: border-box;
}
.color-block{
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    margin-bottom: -2px;
}
.bgc-a0dc28{background-color: #a0dc28;}
.bgc-ffc149{background-color: #ffc149;}
.bgc-17b3ec{background-color: #17b3ec;}
.bgc-925cfe{background-color: #925cfe;}
.bgc-17B3EC{background-color: #17B3EC;}
.bgc-EA5B3A{background-color: #EA5B3A;}
.color-line{
    display: inline-block;
    width: 0.625rem;
    height: 2px;
    margin-bottom: 4px;
}
.c-17b3ec{color: #17b3ec;}
.c-4ECD70{color: #4ECD70;}
.bor-bom{border-bottom: 1px solid #dcdcdc;}
.bor-top{border-top: 1px solid #dcdcdc;}
.zongzixun-ul.l-qytj-barner li:not(.zongzixun-li){background-color: #efeff4;}
.c-efeff4{color: #efeff4;}
.c-top25{top:25%}
.c-top55{top:-55%}
.div-data-list{background: #fff;}
.choose-label{
    font-size: 14px;
    color: #17b3ec;
    margin: 0;
    padding-right: 10px;
    float: right;
    width: 33%;
    height: 38px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.div-shujujz img{
    width: 0.6rem;
    height: .6rem;
    background-size: .6rem;
    vertical-align: middle;
    margin-right: 5px;
}
.text-box{
    width: 67%;
    height: 38px;
    line-height: 38px;
    float: left;
    margin:0;
}
.info-icon{
    vertical-align: middle;
    margin-bottom: 5px;
}
.information{
    background-color: rgba(0,0,0,0.5);
    font-size: 14px;
    color: #fff;
}
.information .ui-col-0{
    width: 40px;
    text-align: center;
}

html/device/css/animate.css

@@ -0,0 +1,3340 @@
@charset "UTF-8";
/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2016 Daniel Eden
 */
.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.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}
@-webkit-keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.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 {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.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 {
  from, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@keyframes flash {
  from, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
  from {
    -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);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse {
  from {
    -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);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}
@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.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: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.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: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}
@-webkit-keyframes shake {
  from, to {
    -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 {
  from, to {
    -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 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: 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);
  }
  to {
    -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);
  }
  to {
    -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 {
  from {
    -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);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes tada {
  from {
    -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);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
  from {
    -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);
  }
  to {
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes wobble {
  from {
    -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);
  }
  to {
    -webkit-transform: none;
    transform: none;
  }
}
.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}
@-webkit-keyframes jello {
  from, 11.1%, to {
    -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(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
@keyframes jello {
  from, 11.1%, to {
    -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(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
.jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}
@-webkit-keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  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: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  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: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}
@-webkit-keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  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: none;
    transform: none;
  }
}
@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  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: none;
    transform: none;
  }
}
.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  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: none;
    transform: none;
  }
}
@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  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: none;
    transform: none;
  }
}
.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  from {
    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: none;
    transform: none;
  }
}
@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  from {
    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: none;
    transform: none;
  }
}
.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}
@-webkit-keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  from {
    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: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  from {
    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: 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);
  }
  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-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 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}
@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes fadeOutDown {
  from {
    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 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
@keyframes fadeOutDownBig {
  from {
    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 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes fadeOutLeft {
  from {
    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 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes fadeOutLeftBig {
  from {
    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 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes fadeOutRight {
  from {
    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 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes fadeOutRightBig {
  from {
    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 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes fadeOutUp {
  from {
    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 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes fadeOutUpBig {
  from {
    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 {
  from {
    -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;
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
@keyframes flip {
  from {
    -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;
  }
  to {
    -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 {
  from {
    -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);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInX {
  from {
    -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);
  }
  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 {
  from {
    -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);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInY {
  from {
    -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);
  }
  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 {
  from {
    -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;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutX {
  from {
    -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;
  }
  to {
    -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 {
  from {
    -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;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutY {
  from {
    -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;
  }
  to {
    -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 {
  from {
    -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;
  }
  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes lightSpeedIn {
  from {
    -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;
  }
  to {
    -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 {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOut {
  from {
    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 {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  to {
    -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 {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
  to {
    -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 {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -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 {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -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 {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }
  to {
    -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 {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
@keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }
  to {
    -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 {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -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 {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -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 {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -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 {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -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 {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -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 {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -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 {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -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 {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -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;
  }
  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: 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;
  }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }
  to {
    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 {
  from {
    opacity: 1;
  }
  to {
    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 {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  from {
    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 {
  from {
    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.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  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, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
@keyframes zoomInDown {
  from {
    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.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  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, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}
@-webkit-keyframes zoomInLeft {
  from {
    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.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  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, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
@keyframes zoomInLeft {
  from {
    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.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  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, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}
@-webkit-keyframes zoomInRight {
  from {
    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.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  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, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
@keyframes zoomInRight {
  from {
    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.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  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, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}
@-webkit-keyframes zoomInUp {
  from {
    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.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  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, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
@keyframes zoomInUp {
  from {
    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.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  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, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}
@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
  to {
    opacity: 0;
  }
}
@keyframes zoomOut {
  from {
    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(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  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(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 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.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  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(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 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(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  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(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 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.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  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(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
}
@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}
@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}
@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}
@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}
@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 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 {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 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 {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 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 {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

html/device/css/common.css

@@ -0,0 +1,352 @@
.c-12b7f5{
    color: #12b7f5;
}
.c-17b3ec{
    color: #17b3ec;
}
.c-4ecd70{
    color: #4ecd70;
}
.c-323232{
    color: #323232;
}
.c-19d5c5{
    color: #19d5c5;
}
.c-999999{
	color: #999999;
}
.c-ffc800{
    color: #ffc800;
}
.c-w-33{
    width: 33%;
}
.info-icon{
    vertical-align: middle;
    margin-bottom: 5px;
}
.information{
    background-color: rgba(0,0,0,0.5);
    font-size: 14px;
    color: #fff;
}
.information .ui-col-0{
    width: 40px;
    text-align: center;
}
.location-div{
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
}
.location-div img{
    vertical-align: text-bottom;
}
.choose-label{
    color: #17B3EC;
    display: inline-block;
    max-width: 100%;
    _width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.blue-column{
    display: inline-block;
    width: 4px;
    height: 12px;
    background-color: #12b7f5;
}
.date-tag{
    display: inline-block;
    text-align: center;
    width: 50px;
    padding: 5px 0;
    font-size: 14px;
    color: #17b3ec;
    border: 1px solid #17b3ec;
}
.date-tag:first-child{
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}
.date-tag:nth-child(2){
    border-right: 0;
    border-left: 0;
}
.date-tag:nth-child(3){
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}
.date-tag.active{
    background-color: #17b3ec;
    color: #fff;
}
.area-tab-panel{
    display: -webkit-box;
    height: 45px;
    line-height: 45px;
    margin: 0 10px;
    background-color: #fff;
    border: 1px solid #e1e1e1;
    border-bottom: 0;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    box-shadow: 0px 0px 1px #ccc;
}
.area-tab{
    -webkit-box-flex: 1;
    text-align: center;
    position: relative;
}
.area-tab .border-line-right{
    display: inline-block;
    position: absolute;
    width: 1px;
    height: 20px;
    right: 0;
    top: 50%;
    margin-top: -10px;
    background-color: #e1e1e1;
}
.area-tab span{
    display: inline-block;
    height: 45px;
    border-bottom: 2px solid transparent;
    font-size: 16px;
    color: #323232;
    padding: 0 10px;
}
.area-tab.active span{
    color: #17b3ec;
    border-bottom: 2px solid #17b3ec;
}
.bottom-list-table{
    background-color: #fff;
    width: 100%;
    text-align: center;
    font-size: 14px;
}
.bottom-list-table thead{
    height: 40px;
    background-color: #f2f4f6;
    border-bottom: 1px solid #e1e1e1;
    color: #909090;
}
.bottom-list-table thead tr{
    height: 40px;
}
.bottom-list-table td,
.bottom-list-table th{
    text-align: center;
    vertical-align: middle;
}
.bottom-list-table .c-t-left {
	text-align: left;
}
.bottom-list-table td{
    padding: 10px 0;
}
.bottom-list-table tbody>tr{
    border-bottom: 1px solid #e1e1e1;
}
/*.bottom-list-table tbody>tr:first-child{
    border-top: 0;
}*/
.bottom-list-table tbody tr td.area-name{
    text-align: left;
    padding-left: 10px;
    font-size: 16px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    
}
@media only screen and (max-width: 320px) {
    .bottom-list-table tbody tr td.area-name{
        max-width: 125px;
    }
}
@media only screen and (min-width: 321px) and (max-width: 414px) {
    .bottom-list-table tbody tr td.area-name{
        max-width: 180px;
    }
}
@media only screen and (min-width: 414px) and (max-width: 640px) {
    .bottom-list-table tbody tr td.area-name{
        max-width: 200px;
    }
}
.bottom-list-table .fa{
    font-size: 18px;
    color: #909090;
}
.ranking{
    width: 28px;
    height: 26px;
    font-size: 12px;
    text-align: center;
    margin-right: 5px;
    line-height: 26px;
    -webkit-box-flex: 0;
}
.ranking1{
    background: url(../images/paiming01_icon.png) no-repeat center 0;
    background-size: 24px 22px;
}
.ranking2{
    background: url(../images/paiming02_icon.png) no-repeat center 0;
    background-size: 28px 26px;
}
.ranking3{
    background: url(../images/paiming03_icon.png) no-repeat center 0;
    background-size: 28px 26px;
}
.modal-overlay{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
}
.modal-overlay.modal-overlay-visible{
    visibility: visible;
    opacity: 1;
}
.modal-content {
    height: 400px;
    position: absolute;
    width: 80%;
    z-index: 9999;
    top: 50%;
    left: 50%;
    margin-left: -40%;
    margin-top: -200px;
    display: none;
}
.div-header-title {
    height: 80px;
    background: #17B3EC;
    width: 100%;
    position: relative;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.div-close {
    width: 26px;
    height: 26px;
    background: url(../images/tankuang_guanbi_icon.png) no-repeat center top;
    background-size: 26px;
    position: absolute;
    top: 10px;
    right: 10px;
}
.div-overlay-img {
    width: 170px;
    height: 53px;
    background: url(../images/tankuang_bg_img.png) no-repeat center top;
    background-size: 170px 53px;
    position: absolute;
    top: 15px;
    left: 50%;
    margin-left: -85px;
}
.div-overlay-title {
    position: absolute;
    top: 38px;
    left: 40%;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
}
.div-overlay-content {
    height: 320px;
    background: #fff;
    width: 100%;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.div-jf-title2{
    position: absolute;
    font-size: 14px;
    top: 50%;
    width: 100%;
    margin-top: -21px;
}
/*总体分析页面样式*/
.l-banner{
    display: -webkit-box;
    height: auto;
    margin-bottom: 10px;
    padding: 0 10px;
}
.l-banner li{
    -webkit-box-flex: 0;
    text-align: center;
    margin-left: 10px;
    background: #fff;
    border-radius: 5px;
    width: calc((100% - 20px) / 3);
    padding: 10px 0;
    border: 1px solid #E1E1E1;
    /*border-bottom: 5px solid transparent;*/
    position: relative;
}
.l-banner li:first-child{
    margin-left: 0;
}
.l-banner li .l-name{
    color: #909090;
}
.l-banner li.active,
.l-banner li.active .l-name
{
    color: #17b3ec;
}
.l-banner li.active:after{
    content: "";
    width: 100%;
    height: 5px;
    background-color: #17b3ec;
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.blur-cycle-box{
    position: absolute;
    width: 70px;
    height: 70px;
    top: 50%;
    margin-top: -35px;
    left: 50%;
    margin-left: -35px;
    /*z-index: 2;*/
    background-color: #17b3ec;
    border-radius: 50%;
    text-align: center;
}
.position-center-text{
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    text-align: center;
    margin-top: -10px;
}
.w-45 {
	width: 45%;
}

html/device/css/device-management.css

@@ -0,0 +1,162 @@
/*@font-face {
    font-family: Muiicons;
    font-weight: 400;
    font-style: normal;
    src: url('../../../fonts/font-awesome/fonts/fontawesome-webfont.eot?v=4.6.3');
    src: url('../../../fonts/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'),url('../../../fonts/font-awesome/fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'),url('../../../fonts/font-awesome/fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'),url('../../../fonts/font-awesome/fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'),url('../../../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
}*/
@font-face {
    font-family: Muiicons;
    font-weight: normal;
    font-style: normal;
    src: url('../../../fonts/mui.ttf') format('truetype');
}
.c-999{color: #999;}
.c-17b3ec{color: #17b3ec;}
.c-btn-17b3ec{
    background-color: #17b3ec;
    font-size: 14px;
    border-radius: 5px;
    padding: 10px 15px;
}
.filter-label{
    color: #999;
    display: inline-block;
    position: relative;
    padding: 0 10px;
}
.filter-label:after{
    content: '';
    position: absolute;
    width: 1px;
    height: 15px;
    top: 50%;
    margin-top: -7px;
    right: 0;
    background-color: #e1e1e1;
}
.filter-label:last-child:after{
    width: 0;
}
.fa-angle-right{
    font-size: 20px;
    color: #909090;
}
.list-item{
    background-color: #fff;
    padding: 10px 15px;
    border-bottom: 1px solid #e1e1e1;
}
.c-checkbox, .c-radio{
    position: relative;
    width: 26px;
    height: 26px;
    display: inline-block;
}
.c-checkbox input[type=checkbox], 
.c-radio input[type=radio]{
    position: absolute;
    width: 26px;
    height: 26px;
    right: 0;
    top: 0;
    display: inline-block;
    border: 0;
    outline: 0!important;
    background-color: transparent;
    -webkit-appearance: none;
}
.c-checkbox input[type=checkbox]:before, 
.c-radio input[type=radio]:before{
    font-family: Muiicons;
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    color: #ccc;
    border-radius: 0;
    background: 0 0;
    -webkit-font-smoothing: antialiased;
}
.c-checkbox input[type=checkbox]:before{
    content: '\e411';
}
.c-checkbox input[type=checkbox]:checked:before, 
.c-radio input[type=radio]:checked:before{
    color: #17b3ec;
}
.c-checkbox input[type=checkbox]:checked:before{
    content: '\e442';
}
.check-all{
    display: inline-block;
    position: relative;
    width: 21px;
    height: 21px;
    background: url(../images/weixuanzhe_icon.png) no-repeat;
    background-size: 21px 21px;
    top: 7px;
    margin-right: 10px;
}
.check-all.checked{
    background: url(../images/queren_icon.png) no-repeat;
    background-size: 21px 21px;
}
.mui-popover.mui-popover-action .mui-table-view{
    color: #666;
    font-size: 14px;
}
.mui-popover.mui-popover-action .mui-table-view a:hover{
    color: #17b3ec;
}
.mui-table-view-cell>a.active{
    color: #17b3ec;
}
.header-link.disabled{
    opacity: 0.6;
}
.device-card{
    position: relative;
    display: -webkit-box;
    display: box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    box-pack: center;
    box-align: center;
    
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    background-color: #fff;
    margin-top: 10px;
    padding: 15px 10px 15px 15px;
}
.img-box{
    width: 80px;
    height: 80px;
    border: 1px solid #e1e1e1;
    border-radius: 2px;
    padding: 2px;
}
.img-box>img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.flag-box{
    position: absolute;
    top: 0;
    left: 0;
}
.flag-box>img{
    width: 30px;
}
/*选择提醒居民*/
.item-li{
    margin-top: 10px;
}
.item-li:first-child{
    margin-top: 0;
}

html/device/css/device-physical-records.css

@@ -0,0 +1,79 @@
.c-17b3ec{
    color: #17b3ec;
}
.c-ccc{
    color: #ccc;
}
.c-red{
    color: #ff5e6c;
}
.c-green{
    color: #06bf04;
}
.arrow{
    width: 20px;
    height: 10px;
    background: url(../images/xiazhan_icon.png) 100% 100% no-repeat;
    background-size: 20px 10px;
}
.month-panel{
    background-color: #fff;
    margin-top: 10px;
    border-top: 1px solid #E1E1E1;
    border-bottom: 1px solid #E1E1E1;
}
.month-panel:first-child{
    margin-top: 0;
}
.month,
.date{
    display: -webkit-box;
    display: box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    box-pack: center;
    box-align: center;
    padding: 10px 15px;
    /*border-bottom: 1px solid #e1e1e1;*/
}
.date-panel{
    border-bottom: 1px solid #e1e1e1;
}
.date-panel:last-child{
    border-bottom: 0;
}
.date-list{
    display: none;
    border-top: 1px solid #e1e1e1;
}
.fa-angle-down,.fa-angle-up{
    color: #ccc;
    font-size: 20px;
}
.record-list{
    display: none;
    border-top: 1px solid #e1e1e1;
}
.record{
    display: -webkit-box;
    display: box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    box-pack: center;
    box-align: center;
    padding: 10px 0px;
    border-bottom: 1px solid #e1e1e1;
    
    font-size: 14px;
    color: #323232;
}
.record:last-child{
    border-bottom: 0;
}
.no-record{
    text-align: center;
    padding: 10px;
    font-size: 14px;
    color: #666;
    display: none;
}

html/device/css/filter.css

@@ -0,0 +1,52 @@
.bgc-17b3ec{
    background-color: #17b3ec;
}
.c-999{color: #999;}
.footer{
    position:fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}
.footer div{
    width: 50%;
    float: left;
    font-size: 17px;
    text-align: center;
    padding: 10px 0;
}
.cancel-btn{
    border-top: 1px solid #e1e1e1;
    background-color: #fff;
    color: #666;
}
.confirm-btn{
    border-top: 1px solid #17b3ec;
    background-color: #17b3ec;
    color: #fff;
}
.tag{
    display: inline-block;
    min-width: 84px;
    text-align: center;
    padding: 5px 10px;
    border: 1px solid #e1e1e1;
    border-radius: 15px;
    margin-top: 10px;
    margin-right: 10px;
    font-size: 14px;
    color: #333;
}
.tag.active{
    background-color: #17b3ec;
    color: #fff;
    border-color: #17b3ec;
}
.reset-btn{
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 17px;
    color: #17b3ec;
    font-weight: 600;
}

html/device/css/manager.css

@@ -0,0 +1,672 @@
.l-liri{
	position: relative;
	top: -5px;
	height: 30px;
	width: 30px;
	float: left;
	margin-right: 16px;
	/*background: url(../images/rili.png) no-repeat;
	background-size: 30px 30px;*/
}
.time-sel-input{
	height: 48px; background-color: #FFFFFF; padding: 14px 20px;
	padding-right: 10px;
	/*font-size: .8rem;*/
}
.l-arrow-right {
	display: block;
	width: 14px;
	height: 14px;
	border: solid #cdcdcd;
	border-width: 3px 3px 0 0;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	margin-top: 2px;
}
.l-arrow-left {
	display: block;
	width: 14px;
	height: 14px;
	border: solid #cdcdcd;
	border-width: 0 0 3px 3px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	margin-top: 2px;
}
.l-qytj-barner{
	display: -webkit-box;
	/*height: 60px;*/
	height: auto;
	margin-bottom: 10px;
	/*background-color: #fff;*/
}
.l-qytj-barner li{
	-webkit-box-flex: 1;
	text-align: center;
	margin-left: 10px;
	background: #fff;
	border-radius: 10px;
}
.l-qytj-barner li.l-over{
	border-bottom: 8px solid #17B3EC;
	color: #17b3ec;
}
.l-qytj-barner li.l-last{
	margin-right: 10px;
}
.l-qytj-val {
	padding-top: 10px;
	/*font-size: 1.1rem;*/
}
.l-qytj-name{
	/*font-size: 0.8rem;*/
	/*padding-top: 2px;*/
	padding-top: 10px;
    padding-bottom: 10px;
}
.l-qytj-img{
	height: 78px;
	padding-top: 18px;
}
.l-qytj-barner div.back-img{
	width: 50px;
	height: 50px;
	background-size: 50px 50px;
	margin-left: auto;
	margin-right: auto;
}
.l-qytj-barner div.qianyue{
	background: url(../images/qianyue.png);
}
.l-qytj-barner li.over div.qianyue{
	background: url(../images/qianyue_over.png);
}
.l-qytj-barner div.jieyue{
	background: url(../images/jieyue.png);
}
.l-qytj-barner li.over div.jieyue{
	background: url(../images/jieyue_over.png);
}
.l-qytj-barner div.jiandang{
	background: url(../images/jiandang.png);
}
.l-qytj-barner li.over div.jiandang{
	background: url(../images/jiandang_over.png);
}
.l-qytj-barner div.zixun{
	background: url(../images/zixun.png);
}
.l-qytj-barner li.over div.zixun{
	background: url(../images/zixun_over.png);
}
.l-qytj-barner div.suifang{
	background: url(../images/suifang.png);
}
.l-qytj-barner li.over div.suifang{
	background: url(../images/suifang_over.png);
}
.l-qytj-barner div.zhidao{
	background: url(../images/zhidao.png);
}
.l-qytj-barner li.over div.zhidao{
	background: url(../images/zhidao_over.png);
}
.l-qytj-name2{
	color: #888;
	font-size: 14px;
}
.l-qytj-barner li.over div.l-qytj-name2{
	color: #17b3ec;
}
.l-zxt{
	padding: 10px;
	height: 250px;
	background-color: #fff;
	margin-top: 2px;
	margin-bottom: 10px;
	border-top: 1px solid #dcdcdc;
	border-bottom: 1px solid #dcdcdc;
}
.l-zxt-con{
	width: 100%;
	height: 100%;
	/* background-color: #f1f4fb; */
	overflow: hidden;
}
/*.l-zxt-inner{
	width: 122%;
	height: 116%;
	position: relative;
	top: -4%;
	left: -76px;
}*/
/*.l-zxt-inner div:first-child{
	left: -7%;
}*/
.l-bar-title{
	height: 2.3rem;
	padding: 0.3rem 0.7rem;
	font-size: 1rem;
	color: #666;
	background-color: #fff;
	
}
.l-bar-title div{
	background: url(../images/quyu.png) no-repeat;
	background-size: 1.6rem 1.6rem;
	height: 100%;
	padding: 0.2rem 2rem;
}
.mui-backdrop {
	height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 998;
    background-color: rgba(0,0,0,.3);
}
.l-gq-list{
	background-color: #fff;
}
.l-gq-list li{
    height: 70px;
    /* padding: 0.6rem 0; */
    border-top: 1px solid #e1e1e1;
    margin: 0 0.6rem;
    position: relative;
}
.l-gq-list li:first-child{
    border-top: none;
}
.l-gq-bg{
    position: relative;
    height: 60px;
    width: 40%;
    border-radius: 8px;
    background-color: #17b3ec;
    opacity: 0.4;
    z-index: 1;
    top: 5px;
}
.l-gq-name{
    position: relative;
    top: -70%;
    left: 5px;
    color: #333333;
}
.l-gq-arrow{
    position: relative;
    top: -42%;
    float: right;
    right: 10px;
    border: solid #17b3ec;
    border-width: 3px 3px 0 0;
}
.l-gq-sj{
    position: relative;
    top: -60%;
    left: 5px;
    color: #005f99;
    /*font-size: .8rem;*/
}
.l-time-sel-box{
    background-color: #fff;
    font-size: 1rem;
    width: 100%;
    color: #555;
}
.l-time-sel-box ul{
	padding: 0rem 1.25rem;
}
.l-time-sel-box ul li{
	height: 3rem;
	border-top: 1px solid #ccc;
	line-height: 3rem;
}
.l-time-sel-box ul li.l-over{
	background: url(../images/checked.png) no-repeat;
	background-position: right;
	background-size: 1.8rem 1.8rem;
}
.l-time-sel-custom{
	margin: 0rem 1.25rem;
	border-top: 1px solid #ccc;
	line-height: 3rem;
}
.l-btn-arr{
    border-top: 1px solid #ccc;
    height: 3rem;
    font-size: 1.3rem;
}
.l-btn-arr div{
	float: left;
    width: 50%;
    text-align: center;
    line-height: 3rem;
}
.l-btn-cancel{
    
}
.l-btn-ok{
    color: #fff;
    background-color: #17b3ec;
}
.l-date-form{
	height: 66px;
	padding: 0 1.25rem;
	display: none;
}
.l-date-form input{
	color: #17b3ec;
}
.l-date-start{
    font-size: 1rem;
    color: #888;
    width: 50%;
    float: left;
}
.l-date-start input{
    border: none;
    margin-bottom: 0px;
    padding-left: 0px;
}
.l-date-end{
    text-align: right;
    width: 50%;
    float: right;
    font-size: 1rem;
    color: #888;
}
.l-date-end input{
    border: none;
    margin-bottom: 0px;
    text-align: right;
    padding-right: 0;
}
.l-jmfx{
    position: relative;
    z-index: 999;
    color: #17b3ec;
    top: 0rem;
    height: 0;
    right: 2rem;
    display: none;
    font-size: 0.8rem;
}
.l-jmfx img{
    width: .8rem;
    height: .7rem;
    margin-left: 6px;
    margin-top: 0.35rem;
}
.l-refresh{
    float: right;
    position: relative;
    top: -37px;
    height: 30px;
    right: -26px;
}
.l-refresh img{
	width: 26px;
	height: 26px;
}
.l-legend{
    position: relative;
    top: 1rem;
    left: 12%;
    height: 0;
    z-index: 999;
    width: 200px;
}
.l-legend ul{
    display: -webkit-box;
    /*height: 0;*/
    font-size: 0.8rem;
    color: #ccc;
}
.l-legend li{
    -webkit-flex: 1;
    margin-left: 10px;
}
.l-legend label{
    float: left;
    width: 16px;
    height: 12px;
    border-radius: 5px;
    background: #ccc;
    margin-top: 4px;
    margin-right: 3px;
}
.l-legend li.l-over{
    color: #17b3ec;
}
.l-legend li.l-over label{
    background: #17b3ec;
}
.l-times{
    position: relative;
    top: 1.6rem;
    font-size: 0.6rem;
    height: 0px;
    background: red;
    left: 8%;
    width: 0px;
}
.f-dn{display: none;}
.div-lv{display: box; display: -webkit-box; display: -moz-box;/*background: #ffffff; padding-top: 8px;*/height: 162px;background: #ffffff;border-top: 1px solid #dcdcdc;border-bottom: 1px solid #dcdcdc;margin-bottom: 10px;padding-bottom: 10px;}
.div-lv .wrap{width: 50%;text-align: center;margin-top: 6px;}
.div-lv .wrap p{line-height: 1.5;}
.height-12{height: 12px;}
.wrap canvas{width: 76px;height: 76px;}
.f-fs16{font-size: 16px;}
.f-fr{float:right}
.mui-switch.mui-active:before {
	right: auto;
	left: 10px;
	content: '日';
	color: #fff
}
.mui-switch:before {
	font-size: 13px;
	position: absolute;
	top: 3px;
	right: 11px;
	content: '周';
	text-transform: uppercase;
	color: #fff
}
.mui-switch.mui-active {
	border-color: #0068a9;
	background-color: #0068a9
}
.mui-switch{
	border: 2px solid #0068a9;
	background-color: #0068a9;
	z-index: 100;
	width:60px;
}
.mui-switch .mui-switch-handle{left: -1px;}
.div-ranking{position: absolute;top: 42%;right: 32px;z-index: 10;padding: 2px 4px;border-radius: 10px;color: #fff;/*font-size: 14px;*/}
.c-EA5B3A{color: #EA5B3A;}
.cb-EA5B3A{background: #EA5B3A;}
.cb-FF8746{background: #FF8746;}
.cb-69CA2E{background: #69CA2E;}
.cb-3DA9CE{background: #3DA9CE;}
.canvas-wc{width:100%; height:190px; margin: 37px 7px;position: absolute;top:0;left:0;display: none;background: #17B3EC;z-index: 10;}
.div-switch{position: absolute;top: 37px;left: 10px;display: none;}
.div-danwei{position: absolute;right: 10px;top: 40px;z-index: 100;color: #ffffff;}
.div-mbl{ position: absolute;  right: 13px;  top: 54px;  z-index: 100;  color: #ffffff; }
.div-layer{width: 100%;  height: 200px;  margin: 33px 5px;  position: absolute;  top: 0;  left: 0; background: #17B3EC; z-index: 5;border-radius: 10px;}
.div-btn-group{ position: absolute;  top: 37px;  left: 10px;z-index: 100;}
.div-btn-group .div-btn{width: 40px;height: 20px; line-height: 20px; background: #0068A9;text-align: center;border-radius: 10px;color: #fff;float: left;margin-right: 5px;}
.div-btn-group .div-btn.active{background: #90D5FF; color: #0068a9;}
.div-header{height: 73px;}
.div-header-item{width: 25%;float: left;text-align: center;padding-top: 10px;}
.c-ec5317{color: #ec5317;}
.f-fs13{font-size: 13px;}
.f-fs14{font-size: 14px;}
.icon-remark{width: 25px;height: 25px;background: url(../images/wenhao_icon.png) no-repeat center top;background-size: 25px;position: absolute;  top: 10px;  right: 10px;}
.modal-overlay{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.4);z-index: 9999;visibility: hidden;opacity: 0;-webkit-transition-duration: 400ms;transition-duration: 400ms;}
.modal-overlay.modal-overlay-visible{ visibility: visible;opacity: 1;}
.c-ti2 {text-indent: 2em;}
.c-fwb { font-weight: bold;}
.pl14{padding-left: 14px;}
.pr14{padding-right: 14px;}
.c-333333{color:#333333}
.f-f14{font-size: 14px;}
.modal-content{height: 400px;position: absolute;width: 80%;border-radius: 20px;z-index: 9999;top: 50%;left: 50%;margin-left: -40%;margin-top: -199px;display: none;}
.div-header-title{height: 80px;background: #17B3EC;width: 100%;position: relative;border-top-left-radius: 10px;border-top-right-radius: 10px;}
.div-close{width: 26px;height: 26px;background: url(../images/tankuang_guanbi_icon.png) no-repeat center top;background-size: 26px;position: absolute;  top: 10px;  right: 10px;}
.div-overlay-img{width: 170px;height: 53px;background: url(../images/tankuang_bg_img.png) no-repeat center top;background-size: 170px 53px;position: absolute;  top: 15px;  left:50%;margin-left: -85px;}
.div-overlay-title{position: absolute;top: 38px;left:40%;color: #fff;font-weight: bold;font-size: 18px;}	
.div-overlay-content{height: 320px;background: #fff;width: 100%;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;}
.div-list,.div-list0,.div-list1,.div-list2{width: 100%;height: auto;position: relative;background: #fff;}
.div-left-content{width: 100%;position: absolute;left: 0;top:60px;z-index: 10;}
.div-right-data-content{width: 50%;position: absolute;right: -10px;top:60px;z-index: 20;}
.div-ranking-top{padding: 4px 10px; border-radius: 10px;  color: #fff;   font-size: 10px; width: auto; float: left; margin-left: 5px; margin-top: 15px;}
.div-left-title{line-height: 55px;display: -moz-box;display: -webkit-box;font-size: 12px;overflow: hidden; -webkit-line-clamp: 2;    -webkit-box-orient: vertical; color:#323232;word-break: break-all; width: 50px;float: left; margin-left: 5px;text-align: center;}
.div-left-title1{line-height: 25px;display: -moz-box;display: -webkit-box;font-size: 12px;overflow: hidden; -webkit-line-clamp: 2;    -webkit-box-orient: vertical; color:#323232;word-break: break-all; width: 50px;float: left; margin-left: 5px;text-align: center;}
.div-left-title2{line-height: 19px;display: -moz-box;display: -webkit-box;font-size: 12px;overflow: hidden; -webkit-line-clamp: 3;    -webkit-box-orient: vertical; color:#323232;word-break: break-all; width: 50px;float: left; margin-left: 5px;text-align: center;}
.div-right-danwei{position: absolute;right: 0;top: 48px;color: #cccccc;}
.div-right-content,.div-right-team-content{width:100%;height: 30px;line-height: 30px;/*position: absolute;right: 0;top:35px;*/}
.div-right-team-content{padding-left: 80px;}
.f-fs10{font-size:10px}
.qyl{width: 15px;height: 15px;background: #a0dc28;margin-left: 10px;}
.rks{width: 15px;height: 15px;background: #ffc149;margin-left: 10px;margin-top: 10px;}
.mbl{width: 15px;height: 15px;background: #17b3ec;margin-left: 10px;margin-top: 10px;}
.qylv{width:15px;height: 2px;background: red;margin-top: 10px;margin-left: 10px;}
.mblv{width:15px;height: 2px;background: #925cfe;margin-top: 10px;margin-left: 10px;}
.qyl-td{width: 15px;height: 15px;background: #17B3EC;margin-left: 10px;}
.icon-refresh{width: 25px;height: 25px;background: url(../images/qiehuan_icon.png) no-repeat center top;background-size: 25px;position: absolute;  top: 10px;  right: 10px;}
.h62{height: 62px;}
.h58{height: 58px;}
.h66{height: 66px;}
.h68{height: 68px;}
.h54{height: 54px;}
.mt20{margin-top:20px}
.mt10{margin-top:10px}
.div-top{width:1rem;color:#fff;margin-top: 17px;text-align: center;border-radius: 5px;float:left;margin-left: 5px;}
.div-name,.div-amount{text-align: center;width:50px;float: left;margin-left: 5px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;word-break: break-word;}
.c-a0dc28{color:#a0dc28;}
.c-17b8ec{color:#17b8ec}
.list-ul li{height: 63px;}
.div-shujujz{height: 38px;line-height: 38px;text-align: left;color: #909090;margin-left: 10px;}
.div-shujujz .text-box span{display: inline-block;vertical-align: middle;}
.div-shujujz .text-box .title{max-width: 50%;height: 38px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.scroll-wrapper{top: 45px;}
.pullDown, .pullUp{background: #f2f4f6;}
.pullDown.scrolledUp {margin-top: -51px;}
.pullUp,.pullUpLabel{display: none;}
.lin-sel-group{
	position: absolute;
	top: 45px;
	background: #fff;
	width: 100%;
	z-index: 11;
	display: none;
}
.lin-sel-group li{
	text-align: center;
	color: #17b3ec;
	height: 40px;
	line-height: 40px;
	font-size: 16px;
	border-bottom: 1px solid #f2f4f6;
}
.lin-sel-group img{
	width: 20px;
	margin: 10px;
	display: none;
}
.lin-sel-group li.checked img{
	display: inline;
}
.lin-mask{
	position: absolute;
	top: 45px;
	height: 100%;
	width: 100%;
	/*background: #000;*/
	height: 100%;
	z-index: 10;
	display: none;
	background-color: rgba(0,0,0,0.5);
}
.lin-down-arrow{
    position: relative;
    top: -2px;
    left: 5px;
    height: 10px;
    width: 10px;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
    display: inline-block;
    transform:rotate(45deg);
	-ms-transform:rotate(45deg); 	/* IE 9 */
	-moz-transform:rotate(45deg); 	/* Firefox */
	-webkit-transform:rotate(45deg); /* Safari 和 Chrome */
	-o-transform:rotate(45deg); 		/* Opera */
	zoom: 1;
	box-sizing: border-box;
}
.color-block{
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    margin-bottom: -2px;
}
.bgc-a0dc28{background-color: #a0dc28;}
.bgc-ffc149{background-color: #ffc149;}
.bgc-17b3ec{background-color: #17b3ec;}
.bgc-925cfe{background-color: #925cfe;}
.bgc-17B3EC{background-color: #17B3EC;}
.bgc-EA5B3A{background-color: #EA5B3A;}
.color-line{
    display: inline-block;
    width: 0.625rem;
    height: 2px;
    margin-bottom: 4px;
}
.c-17b3ec{color: #17b3ec;}
.c-4ECD70{color: #4ECD70;}
.bor-bom{border-bottom: 1px solid #dcdcdc;}
.bor-top{border-top: 1px solid #dcdcdc;}
.zongzixun-ul.l-qytj-barner li:not(.zongzixun-li){background-color: #efeff4;}
.c-efeff4{color: #efeff4;}
.c-top25{top:25%}
.c-top55{top:-55%}
.div-data-list{background: #fff;}
.choose-label{
    font-size: 14px;
    color: #17b3ec;
    margin: 0;
    padding-right: 10px;
    float: right;
    width: 33%;
    height: 38px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.div-shujujz img{
    width: 0.6rem;
    height: .6rem;
    background-size: .6rem;
    vertical-align: middle;
    margin-right: 5px;
}
.text-box{
    width: 67%;
    height: 38px;
    line-height: 38px;
    float: left;
    margin:0;
}
.info-icon{
    vertical-align: middle;
    margin-bottom: 5px;
}
.information{
    background-color: rgba(0,0,0,0.5);
    font-size: 14px;
    color: #fff;
}
.information .ui-col-0{
    width: 40px;
    text-align: center;
}

html/device/html/.svn/entries

@@ -0,0 +1,266 @@
10
dir
11936
svn://172.19.103.12:88/repos/wlyy/app/%E5%8E%A6%E9%97%A8i%E5%81%A5%E5%BA%B7v1.4.7/html/device/html
svn://172.19.103.12:88
2018-06-27T12:06:14.973676Z
11928
raolu
62d03301-2242-47d2-9572-f16751ab9961

shaixuan.html
file
2018-06-28T06:23:22.830823Z
ae03ec978de1d3f7718572984a00992d
2018-06-08T09:19:54.213555Z
11714
linyihang
5892

choose-patient.html
file
2018-06-28T06:23:22.833324Z
ef9dec2c1f690d3a43fc71d40991a139
2018-06-25T02:57:32.637294Z
11839
raolu
8424

filter.html
file
2018-06-28T06:23:22.835824Z
bf7ae8add03533400f98dfe4935aa942
2018-06-20T00:38:16.525065Z
11774
raolu
3271

device-data.html
file
2018-06-28T06:23:22.838824Z
0a4f47aa48575ccd1df9c494677864bf
2018-06-27T09:15:46.126665Z
11924
linyihang
13389

device-physical-records.html
file
2018-06-28T06:23:22.841825Z
f10c86683d2cdd5512fd0e1b8d49a011
2018-06-27T12:06:14.973676Z
11928
raolu
4837

device-management.html
file
2018-06-28T06:23:22.844325Z
a041591ce35548e433d6cd0feee8dd17
2018-06-27T09:15:46.126665Z
11924
linyihang
4908

patient-device-list.html
file
2018-06-28T06:23:22.847826Z
594f56b84721836c364182f60b186418
2018-06-12T03:34:37.623926Z
11721
raolu
3798


html/device/html/.svn/text-base/choose-patient.html.svn-base

@@ -0,0 +1,164 @@
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>选择居民</title>
        <meta name="author" content="yihu.com" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <link rel="stylesheet" type="text/css" href="../../../fonts/font-awesome/css/font-awesome.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../../css/mui.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../../common/cross/css/cross.css">
        <link rel="stylesheet" type="text/css" href="../../../common/cross/css/cross.ui.css"/>
        <link rel="stylesheet" type="text/css" href="../css/device-management.css"/>
    </head>
    <body>
        <div class="h45">
            <div class="demo-comtop">
                <a class="mui-action-back"></a>
                <h1>选择提醒居民</h1>
                <div class="header-link disabled c-fff c-f16">发送消息</div>
            </div>
        </div>
        <div class="ui-grid ui-grid-middle list-item">
            <div class="ui-col-0 c-f17 c-333 mr10">未测量时间</div>
            <div class="ui-col-1 mr10 c-t-right c-f14 c-999" id="dateName">全部</div>
            <div class="ui-col-0"><i class="fa fa-angle-right"></i></div>
        </div>
        <div class="ui-grid ui-grid-middle list-item">
            <div class="ui-col-0 c-f17 c-333 mr10">绑定状态</div>
            <div class="ui-col-1 mr10 c-t-right c-f14 c-999" id="statusName">全部</div>
            <div class="ui-col-0"><i class="fa fa-angle-right"></i></div>
        </div>
        <div class="ui-grid ui-grid-middle list-item">
            <div class="ui-col-0 c-f17 c-333 mr10">设备类型</div>
            <div class="ui-col-1 mr10 c-t-right c-f14 c-999" id="typeName">全部</div>
            <div class="ui-col-0"><i class="fa fa-angle-right"></i></div>
        </div>
        <div class="plr15" style="height: 40px; line-height: 40px;">
            <div class="c-checkbox mr5" style="top: 7px;">
                <input type="checkbox" name="checkAll" id="chooseAll">
            </div>
            <label for="chooseAll" class="c-f14 c-999">批量选择</label>
            <span class="c-f14 c-17b3ec ml5">提示：提醒将发送给设备登记居民</span>
        </div>
        <div class="mui-scroll-wrapper" style="top: 224px;">
            <div class="mui-scroll">
                <ul class="plr15" id="result_wrapper">
                    
                </ul>
                <div id="no_result_wrap" class="c-hide" style="margin-top: 50px;">
                    <img class="no-result-img" src="../../../images/shujuweikong_img.png" />
                    <div class="c-f14 c-333 c-t-center">抱歉，暂未找到符合条件的结果。</div>
                </div>
            </div>
        </div>
        
        <div id="dateSheet" class="mui-popover mui-popover-bottom mui-popover-action">
            <!-- 可选择菜单 -->
            <ul id="" class="mui-table-view">
                <li class="mui-table-view-cell date-item" data-val="1">
                    <a href="javascript:;">今日未测量</a>
                </li>
                <li class="mui-table-view-cell date-item" data-val="2">
                    <a href="javascript:;">七日未测量</a>
                </li>
                <li class="mui-table-view-cell date-item" data-val="3">
                    <a href="javascript:;">本月未测量</a>
                </li>
                <li class="mui-table-view-cell date-item" data-val="4">
                    <a href="javascript:;">超过一个月未测量</a>
                </li>
            </ul>
            <!-- 取消菜单 -->
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a class="zy-alert" href="#dateSheet">取消</a>
                </li>
            </ul>
        </div>
        
        <div id="statusSheet" class="mui-popover mui-popover-bottom mui-popover-action">
            <!-- 可选择菜单 -->
            <ul id="" class="mui-table-view">
                <li class="mui-table-view-cell status-item" data-val="">
                    <a href="javascript:;">全部</a>
                </li>
                <li class="mui-table-view-cell status-item" data-val="1">
                    <a href="javascript:;">已绑定</a>
                </li>
                <li class="mui-table-view-cell status-item" data-val="2">
                    <a href="javascript:;">居民解绑</a>
                </li>
            </ul>
            <!-- 取消菜单 -->
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a class="zy-alert" href="#statusSheet">取消</a>
                </li>
            </ul>
        </div>
        
        <div id="typeSheet" class="mui-popover mui-popover-bottom mui-popover-action">
            <!-- 可选择菜单 -->
            <ul id="" class="mui-table-view">
                <li class="mui-table-view-cell type-item" data-val="">
                    <a href="javascript:;">全部</a>
                </li>
                <li class="mui-table-view-cell type-item" data-val="1">
                    <a href="javascript:;">血糖仪</a>
                </li>
                <li class="mui-table-view-cell type-item" data-val="2">
                    <a href="javascript:;">血压计</a>
                </li>
            </ul>
            <!-- 取消菜单 -->
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a class="zy-alert" href="#typeSheet">取消</a>
                </li>
            </ul>
        </div>
        
        <!--居民列表模板-->
        <script type="text/html" id="li-tmp">
            {{each list as it index}}
            <li class="ui-grid ui-grid-middle item-li">
                <div class="ui-col-0 mr10">
                    <div class="c-checkbox">
                        <input type="checkbox" name="patient" data-json="{{it | getJsonStr}}">
                    </div>
                </div>
                <div class="ui-col-1 device-card" style="margin-top: 0;">
                    <div class="ui-col-0 mr15">
                        <div class="img-box">
                            <img src="{{it.photo | getPhoto}}">
                        </div>
                    </div>
                    <div class="ui-col-1">
                        <div class="c-f17">{{it.name}}</div>
                        <div class="mt5 c-f14 c-999">{{it.category_code | getCategoryName}} - {{it.device_name}}</div>
                        <div class="mt5 c-f14 c-999">&bull; 登记时间：{{it.create_time | formatDate}}</div>
                    </div>
                    {{if it.operate_code == 1}}
                    <div class="flag-box"><img src="../images/bangdi_icon.png"></div>
                    {{else}}
                    <div class="flag-box"><img src="../images/jiebang_icon.png"></div>
                    {{/if}}
                </div>
            </li>
            {{/each}}
        </script>
        <script src="../../../js/jquery/2.1.3/jquery.js"></script>
        <script src="../../../js/mui.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/common_http.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/app.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/template.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/templateHepler.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/choose-patient.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

html/device/html/.svn/text-base/device-data.html.svn-base

@@ -0,0 +1,252 @@
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>智能设备分析</title>
        <meta name="author" content="yihu.com" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <link rel="stylesheet" type="text/css" href="../../../fonts/font-awesome/css/font-awesome.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../../css/mui.min.css" />
        <link rel="stylesheet" type="text/css" href="../../../common/cross/css/cross.css"/>
        <link rel="stylesheet" type="text/css" href="../../../common/cross/css/cross.ui.css"/>
        <link rel="stylesheet" type="text/css" href="../css/common.css"/>
    </head>
    <body>
        <div class="h45">
            <div class="demo-comtop">
                <a class="mui-action-back"></a>
                <h1>智能设备分析</h1>
                <a class="header-link">
                    <img src="../images/shoumiao_icon.png" width="25" class="mt10">
                </a>
            </div>
        </div>
        <div class="mui-scroll-wrapper" style="top: 46px">
            <div class="mui-scroll">           
                <!-- 位置信息 start -->
                <div class="ui-grid ui-grid-middle location-div">
                    <div class="ui-col-0 text-box c-f13 c-nowrap"  style="max-width:50%;">
                        <img src="../images/weizhi_icon.png" width="12">
                        <span id="areaTitle" class="title c-666 c-f13 ml5"></span>
                    </div>
                    <div class="ui-col-0">
                        <span class="jiezhi-time c-f13"></span>
                    </div>
                    <div class="ui-col-1 c-t-right">
                    	<span class="select-label c-666 c-f13">所有设备</span>
                    	<span class="select-label-btn c-12b7f5">筛选</span>
                    </div>
                </div>
                <!-- 位置信息 end -->
                
                <div class="bgc-fff c-border-tb">
                	<div class="pl10">
                        <h3 class="ptb10 c-323232 c-bold c-f16 c-border-b">设备情况</h3>
                    </div>
                    <div class="ui-grid ui-grid-middle c-position-r c-f14">
	                    <div class="ui-col-1">
	                        <div class="round-chart" id="roundChart" style="height: 150px;"></div>
	                    	<div class="clearfix">
	                    		<div class="fl clearfix pl20">
		                    		<em class="fl" style="width: 6px; height: 42px; border-radius: 3px; background: #DDDDDD;"></em>
		                    		<div class="fl mlr10">
		                    			<p class="c-323232"><span class="device-buy">0</span>台</p>
		                    			<p class="c-999999">采购量</p>
		                    		</div>
		                    	</div>
		                    	<div class="fl clearfix">
		                    		<em class="fl" style="width: 6px; height: 42px; border-radius: 3px; background: #39f;"></em>
		                    		<div class="fl mlr10">
		                    			<p class="c-323232"><span class="device-push">0</span>台</p>
		                    			<p class="c-999999">发放量</p>
		                    		</div>
		                    	</div>
	                    	</div>
	                    </div>
	                    <div class="ui-col-1">
	                        <div class="round-chart" id="roundChart1" style="height: 150px;"></div>
	                    	<div class="clearfix">
	                    		<div class="fl clearfix pl20">
		                    		<em class="fl" style="width: 6px; height: 42px; border-radius: 3px; background: #DDDDDD;"></em>
		                    		<div class="fl mlr10">
		                    			<p class="c-323232"><span class="device-push">0</span>台</p>
		                    			<p class="c-999999">发放量</p>
		                    		</div>
		                    	</div>
		                    	<div class="fl clearfix">
		                    		<em class="fl" style="width: 6px; height: 42px; border-radius: 3px; background: #39f;"></em>
		                    		<div class="fl mlr10">
		                    			<p class="c-323232"><span class="device-bind">0</span>台</p>
		                    			<p class="c-999999">绑定量</p>
		                    		</div>
		                    	</div>
	                    	</div>
	                    </div>
	                </div>
	                <div class="ptb10 mt20 c-border-t">
	                	<div class="ui-grid ui-grid-middle c-position-r c-f14">
	                		<div class="ui-col-0 w-45 pl20">
	                			<p class="clearfix">
	                				<em class="fl mr5" style="width: 6px; height: 20px; border-radius: 3px; background: #DDDDDD;"></em>设备发放量
	                			</p>
	                			<p class="c-323232 mt5 c-t-center"><span class="device-push">0</span>台</p>
	                			<p class="clearfix mt10">
	                				<em class="fl mr5" style="width: 6px; height: 20px; border-radius: 3px; background: #39f;"></em>本周设备使用台数
	                			</p>
	                			<p class="c-323232 mt5 c-t-center"><span class="device-use">0</span>台</p>
	                		</div>
	                		<div class="ui-col-1">
	                			<div class="round-chart" id="roundChart2" style="height: 160px;"></div>
	                		</div>
	                	</div>
	                	<div class="ui-grid ui-grid-middle c-position-r c-f14">
	                		<div class="ui-col-0 w-45 pl20">
	                			<p class="clearfix">
	                				<em class="fl mr5" style="width: 6px; height: 20px; border-radius: 3px; background: #DDDDDD;"></em>体征异常监测量
	                			</p>
	                			<p class="c-323232 mt5 c-t-center"><span class="device-dif">0</span>次</p>
	                			<p class="clearfix mt10">
	                				<em class="fl mr5" style="width: 6px; height: 20px; border-radius: 3px; background: #39f;"></em>体征干预指导数
	                			</p>
	                			<p class="c-323232 mt5 c-t-center"><span class="device-del">0</span>次</p>
	                		</div>
	                		<div class="ui-col-1">
	                			<div class="round-chart" id="roundChart3" style="height: 160px;"></div>
	                		</div>
	                	</div>
	                </div>
                </div>
                <div class="mt10 bgc-fff c-border-tb pb10">
                	<div class=" plr10">
                        <h3 class="ptb10 c-323232 c-bold c-f16 c-border-b">设备登记趋势</h3>
                    </div>
                    <div class="ui-grid ui-grid-middle">
                        <div class="ui-col-1 c-t-center pt10 pb5">
                            <span class="date-tag active" data-type="1">日</span><!--
                            --><span class="date-tag" data-type="2">周</span><!--
                            --><span class="date-tag" data-type="3">月</span>
                        </div>
                    </div>
                    <div class="clearfix mt5 plr10">
                        <div class="fl c-f12 c-909090"><span id="startValue"></span> ~ <span id="endValue"></span>数据</div>
                        <div class="fr c-f12 c-909090">单位：台</div>
                    </div>
                    <div class="line-chart plr10" id="lineChart" style="height: 250px"></div>
                </div>
                <!--<div class="mt10 bgc-fff">
                    <div class="plr10">
                        <h3 class="ptb10 c-323232 c-bold c-f16 c-border-b">社区排名</h3>
                    </div>
                    <table class="bottom-list-table mb20" id="listTable">
                    </table>
                </div>-->
                <div class="mt10">
                    <div class="area-tab-panel">
                        <div class="area-tab active" data-val="4"><span>各区</span><i class="border-line-right"></i></div>
                        <div class="area-tab" data-val="3"><span>社区</span><i class="border-line-right"></i></div>
                        <div class="area-tab" data-val="2"><span>团队</span></div>
                    </div>
                    <table class="bottom-list-table mb20" id="listTable">
                    </table>
                </div>
            </div>
        </div>
        
        <!-- 团队信息模块 -->
        <div class="modal-overlay"></div>
        <div class="modal-content">
            <div class="div-header-title">
                <div class="div-close"></div>
                <div class="div-overlay-img"></div>
                <div class="div-overlay-title">团队详情</div>
            </div>
            <div class="div-overlay-content">
                <div class="pt15" id="teamInfoBox">
                    
                </div>
            </div>
        </div>
        
        <script type="text/html" id="data-list">
            <thead>
                <tr>
                    <th class="c-t-left pl10">排名</th>
                    <th>发放量</th>
                    <th>绑定量</th>
                    <th>绑定率</th>
                    {{if level>2 && lowLevel != 1}}
                    <th width="20"></th>
                    {{/if}}
                </tr>
            </thead>
            <tbody>
                {{each list as v i}}
                <tr class="data-row" data-name="{{v.name}}" data-code="{{v.code}}" data-type="">
                    <td class="area-name">
                        {{if v.top == 1}}
                        <div class="ranking ranking1">{{v.top}}</div>
                        {{else if v.top == 2}}
                        <div class="ranking ranking2">{{v.top}}</div>
                        {{else if v.top == 3}}
                        <div class="ranking ranking3">{{v.top}}</div>
                        {{else}}
                        <div class="ranking">{{v.top}}</div>
                        {{/if}}
                        <div class="ui-col-1 c-nowrap-multi">{{v.name}}</div>
                    </td>
                    <td>{{v.allNum}}</td>
                    <td>{{v.bindingNum}}</td>
                    <td>{{v.rate}}%</td>
                    {{if level>2 && lowLevel != 1}}
                    <td><i class="fa fa-angle-right"></i></td>
                    {{/if}}
                </tr>
                {{/each}}
            </tbody>
        </script>
        
        <!-- 团队信息模板 -->
        <script type="text/html" id="teamInfo">
            <div class="plr15 pb20">
                <span class="c-f14 c-bold c-333">团队名称：</span>
                <span class="c-f14 c-333">{{team.name}}</span>
            </div>
            <div class="plr15 pb20">
                <span class="c-f14 c-bold c-333">所在社区：</span>
                <span class="c-f14 c-333">{{team.hospitalName}}</span>
            </div>
            <div class="plr15 pb20">
                <span class="c-f14 c-bold c-333">团队长：</span>
                <span class="c-f14 c-333">{{team.leaderName}}</span>
            </div>
            <div class="plr15 pb20">
                <span class="c-f14 c-bold c-333">团队成员(<span class="span-team-count">{{memberLength}}</span>人)：</span>
                <p class="c-f14 c-333 mt10">
                    {{each members as member index}}
                    {{if index == 0}}
                        {{member.name}}
                    {{else if index < 20}}
                        、{{member.name}}
                    {{else if index == 20}}
                    、{{member.name}}等
                    {{/if}}
                    {{/each}}
                </p>
            </div>
        </script>
        <script src="../../../js/jquery/2.1.3/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/common_http.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/app.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/template.js" type="text/javascript" charset="utf-8"></script>
        <!--<script src="../../../widget/echarts/3.0/js/echarts.min.js" type="text/javascript" charset="utf-8"></script>-->
        <script src="../js/echarts.common.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/device-data.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

html/device/html/.svn/text-base/device-management.html.svn-base

@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>设备管理</title>
        <meta name="author" content="yihu.com" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <link rel="stylesheet" type="text/css" href="../../../fonts/font-awesome/css/font-awesome.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../../css/mui.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../../common/cross/css/cross.css">
        <link rel="stylesheet" type="text/css" href="../../../common/cross/css/cross.ui.css"/>
        <link rel="stylesheet" type="text/css" href="../css/device-management.css"/>
    </head>
    <body>
        <div class="h45">
            <div class="demo-comtop">
                <a class="mui-action-back"></a>
                <h1>设备管理</h1>
                <!--<div class="header-link">
                    <img src="../images/shoumiao_icon.png" width="23" class="mt10">
                </div>-->
            </div>
        </div>
        <div class="plr15 ptb10 c-border-b bgc-fff ui-grid ui-grid-middle">
            <div class="ui-col-1 c-f17">居民设备使用情况<span class="c-f14 c-909090 ml10" id="count">(0)</span></div>
            <div class="ui-col-0"><a class="c-btn c-btn-17b3ec" id="remindBtn">提醒测量</a></div>
        </div>
        <div class="plr15 ptb10 bgc-fff c-border-b ui-grid ui-grid-middle">
            <div class="ui-col-1 c-f14">过滤条件：
                <span class="filter-label">全部</span><!--
                --><span class="filter-label">全部</span><!--
                --><span class="filter-label">全部</span>
            </div>
            <div class="ui-col-0" id="filterBtn">
                <img src="../images/saixuan_icon.gif" width="22">
            </div>
        </div>
        <div class="mui-scroll-wrapper" style="top: 148px;">
            <div class="mui-scroll">
                <ul class="plr15" id="result_wrapper">
                </ul>
                <div id="no_result_wrap" class="c-hide">
                    <img class="no-result-img" src="../../../images/shujuweikong_img.png" />
                    <div class="c-f14 c-333 c-t-center">抱歉，暂未找到符合条件的结果。</div>
                </div>
            </div>
        </div>
        
        <script type="text/html" id="li-tmp">
            {{each list as it}}
            <li class="ptb10 device-card" data-json="{{it | getJsonStr}}">
                <div class="ui-col-0 mr15">
                    <div class="img-box">
                        <img src="{{it.photo | getPhoto}}">
                    </div>
                </div>
                <div class="ui-col-1">
                    <div class="c-f17">{{it.name}}</div>
                    <div class="mt5 c-f14 c-999">{{it.category_code | getCategoryName}} - {{it.device_name}}</div>
                    {{if it.operate_code == 1}}
                    <div class="mt5 c-f14 c-999">&bull; 登记时间：{{it.create_time | formatDate}}</div>
                    {{/if}}
                    {{if it.operate_code == 2}}
                    <div class="mt5 c-f14 c-999">&bull; 解绑时间：{{it.create_time | formatDate}}</div>
                    {{/if}}
                </div>
                <div class="ui-col-0"><i class="fa fa-angle-right"></i></div>
                {{if it.operate_code == 1}}
                <div class="flag-box"><img src="../images/bangdi_icon.png"></div>
                {{else}}
                <div class="flag-box"><img src="../images/jiebang_icon.png"></div>
                {{/if}}
            </li>
            {{/each}}
        </script>
        <script src="../../../js/jquery/2.1.3/jquery.js"></script>
        <script src="../../../js/mui.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/common_http.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/app.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/template.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/templateHepler.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/device-management.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

html/device/html/.svn/text-base/device-physical-records.html.svn-base

@@ -0,0 +1,99 @@
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>设备测量记录</title>
        <meta name="author" content="yihu.com" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <link rel="stylesheet" type="text/css" href="../../../fonts/font-awesome/css/font-awesome.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../../css/mui.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../../common/cross/css/cross.css">
        <link rel="stylesheet" type="text/css" href="../../../common/cross/css/cross.ui.css"/>
        <link rel="stylesheet" type="text/css" href="../css/device-physical-records.css"/>
    </head>
    <body>
        <div class="h45">
            <div class="demo-comtop">
                <a class="mui-action-back"></a>
                <h1 id="title"></h1>
                <div class="header-link">
                    <img src="../images/jumingxinxi_icon.png" width="23" class="mt10">
                </div>
            </div>
        </div>
        <div id="content">
            
        </div>
        <!--获取月份模本-->
        <script type="text/html" id="month-tmp">
            {{each list as it}}
            <div class="month-panel">
                <div class="month" data-val="{{it}}">
                    <div class="ui-col-1">
                        <img src="../images/yuefen_icon.png" width="20" class="mr10"><!--
                        --><span class="c-f17 c-17b3ec">{{it}}</span>
                    </div>
                    <div class="ui-col-0"><i class="fa fa-angle-down"></i></div>
                </div>
                <div class="date-list" id="{{it}}">
                    <div class="no-record">当月无测量数据</div>
                </div>
            </div>
            {{/each}}
        </script>
        <!--日期的模板-->
        <script type="text/html" id="date-tmp">
            {{each list as it}}
            <div class="date-panel">
                <div class="date" data-val="{{it}}">
                    <div class="ui-col-1">
                        <img src="../images/icon_shijian.png" width="14" class="mr10"><!--
                        --><span class="c-f14 c-909090">{{it}}</span>
                    </div>
                    <div class="ui-col-0"><i class="fa fa-angle-down"></i></div>
                </div>
                <ul class="record-list plr15" data-date="{{it}}">
                </ul>
            </div>
            {{/each}}
        </script>
        <!--记录模板-->
        <script type="text/html" id="record-tmp">
            {{each list as it}}
            <li class="record">
                <div class="ui-col-0 mr30">{{it.time | getTime}}</div>
                <div class="ui-col-1">{{it.gi_type | getTypeName}}</div>
                <div class="ui-col-0">{{#it.gi,it.gi_type | getXTValue}}</div>
            </li>
            {{/each}}
        </script>
        <script type="text/html" id="record2-tmp">
            {{each list as it}}
            <li class="record">
                <div class="ui-col-0 mr30">{{it.time | getTime}}</div>
                <div class="ui-col-1">
                    <div class="ui-grid c-border-b pb5">
                        <div class="ui-col-1">收缩压</div>
                        <div class="ui-col-0">{{#it.sys,1 | getXYValue}}</div>
                    </div>
                    <div class="ui-grid pt5">
                        <div class="ui-col-1">舒张压</div>
                        <div class="ui-col-0">{{#it.dia,2 | getXYValue}}</div>
                    </div>
                </div>
            </li>
            {{/each}}
        </script>
        <script src="../../../js/jquery/2.1.3/jquery.js"></script>
        <script src="../../../js/mui.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/common_http.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/app.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/template.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/device-physical-records.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

html/device/html/.svn/text-base/filter.html.svn-base

@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>设备筛选</title>
        <meta name="author" content="yihu.com" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <link rel="stylesheet" type="text/css" href="../../../fonts/font-awesome/css/font-awesome.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../../css/mui.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../../common/cross/css/cross.css">
        <link rel="stylesheet" type="text/css" href="../../../common/cross/css/cross.ui.css"/>
        <link rel="stylesheet" type="text/css" href="../css/filter.css"/>
    </head>
    <body class="bgc-fff">
        <div class="reset-btn">重置数据</div>
        <div class="plr15 ptb15">
            <div class="c-999 c-f14 mb5">未测量时间</div>
            <div>
                <span class="tag date-tag" data-type="date" data-val="">全部</span>
                <span class="tag date-tag" data-type="date" data-val="1">今日未测量</span>
                <span class="tag date-tag" data-type="date" data-val="2">七日未测量</span>
                <span class="tag date-tag" data-type="date" data-val="3">本月未测量</span>
                <span class="tag date-tag" data-type="date" data-val="4">超过1个月未测量</span>
            </div>
            <div class="c-999 c-f14 mt15 mb5">设备绑定状态</div>
            <div>
                <span class="tag status-tag" data-type="status" data-val="">全部</span>
                <span class="tag status-tag" data-type="status" data-val="1">已绑定</span>
                <span class="tag status-tag" data-type="status" data-val="2">居民解绑</span>
            </div>
            <div class="c-999 c-f14 mt15 mb5">设备类型</div>
            <div>
                <span class="tag type-tag" data-type="type" data-val="">全部</span>
                <span class="tag type-tag" data-type="type" data-val="1">血糖仪</span>
                <span class="tag type-tag" data-type="type" data-val="2">血压计</span>
            </div>
        </div>
        <div class="footer">
            <div class="cancel-btn">取消</div>
            <div class="confirm-btn">过滤</div>
        </div>
        
        <script src="../../../js/jquery/2.1.3/jquery.js"></script>
        <script src="../../../js/mui.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/common_http.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/app.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/filter.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

html/device/html/.svn/text-base/patient-device-list.html.svn-base

@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>居民设备列表</title>
        <meta name="author" content="yihu.com" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <link rel="stylesheet" type="text/css" href="../../../fonts/font-awesome/css/font-awesome.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../../css/mui.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../../common/cross/css/cross.css">
        <link rel="stylesheet" type="text/css" href="../../../common/cross/css/cross.ui.css"/>
        <style>
            .img-div{
                width: 80px;
                height: 80px;
                object-fit: contain;
            }
            .img-div>img{
                width: 100%;
                height: 100%;
            }
            .device-box{
                background-color: #fff;
                padding: 10px;
                border-radius: 8px;
                margin-top: 10px;
            }
            .device-box:first-child{
                margin-top: 0px;
            }
        </style>
    </head>
    <body>
        <div class="h45">
            <div class="demo-comtop">
                <a class="mui-action-back"></a>
                <h1>设备管理</h1>
                <div class="header-link">
                    <img src="../images/shoumiao_icon.png" width="23" class="mt10">
                </div>
            </div>
        </div>
        <div class="mui-scroll-wrapper" style="top: 45px;">
            <div class="mui-scroll">
                <div class="plr10 ptb10" id="deviceList">
                </div>
                <div id="no_result_wrap" class="c-hide">
                    <img class="no-result-img" src="../../../images/shujuweikong_img.png" />
                    <div class="c-f14 c-333 c-t-center">抱歉，暂未找到符合条件的结果。</div>
                </div>
            </div>
        </div>
        
        <script type="text/html" id="device-tmp">
            {{each list as it}}
            <div class="ui-grid ui-grid-middle device-box" data-json="{{it | getJsonStr}}">
                <div class="ui-col-0 mr10 img-div">
                    <img src="{{it.devicePhoto | getPhoto}}">
                </div>
                <div class="ui-col-1">
                    <div class="c-f16 c-bold c-333">{{it.deviceName}}</div>
                    <div class="c-909090 c-f14 mt5">&bull; 绑定时间：{{it.czrq}}</div>
                    <div class="c-909090 c-f14 mt5">&bull; 绑定人： {{it | getBindUser}}</div>
                </div>
            </div>
            {{/each}}
        </script>
        <script src="../../../js/jquery/2.1.3/jquery.js"></script>
        <script src="../../../js/mui.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/common_http.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/app.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/template.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/patient-device-list.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

html/device/html/.svn/text-base/shaixuan.html.svn-base

@@ -0,0 +1,130 @@
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>设备筛选</title>
        <meta name="author" content="yihu.com" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <link rel="stylesheet" href="../../../common/iconfont/iconfont.css">
        <link rel="stylesheet" href="../../../common/cross/css/cross.css" />
        <link rel="stylesheet" href="../../../common/cross/css/ui.all.min.css" />
        <link rel="stylesheet" href="../../../common/css/pull-up-down.css" type="text/css"/>
        <style>
            .c-323232{color: #323232;}
            #footer {  position: absolute; bottom: 0;width: 100%;}
            .cb-17B3EC {background:#17B3EC;}
            .cb-ffffff {background:#ffffff;}
            .c-border-top{border-top:1px solid #DCDCDC;}
            .height-50 { height: 50px; }
            .lheight-50 { line-height: 50px; }
            .c-50{width: 50% !important;margin-left: 0 !important;float: left;}
            .c-000{color:#000}
            .c-tac { text-align: center; }
            .line{
                height:1px;
                background-color: #e1e1e1;
            }
            .tag{
                float: left;
                border: 1px solid #e1e1e1;
                padding: 0 10px;
                border-radius: 5px;
                height: 34px;
                line-height: 34px;
                margin: 3px 10px 3px 0;
                color: #909090;
                font-size: 14px;
            }
            .tag.active{
                color:#fff;
                border:1px solid #17B3EC;
                background: #17B3EC;
            }
        </style>    
    </head>
    <body>
        <div id="wrapper1">
            <div class="scroll-wrapper" id="total_wrapper" style="bottom: 52px;">
                <div class="iScroller">
                    <div class="mlr10 mt20">
                        <div class="div-content">
                            <div class="c-f16 c-333">设备类型</div>
                            <div class="c-row mt10 mb20" id="signYear">
                                <div class="tag c-t-center active" data-tag="year" data-val=""><span>所有设备</span></div>
                                <div class="tag c-t-center" data-tag="year" data-val="1"><span>血压计</span></div>
                                <div class="tag c-t-center" data-tag="year" data-val="2"><span>血糖仪</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div id="footer">
            <div class="c-row btn-wrap c-border-top">
                 <div class="c-tac height-50 lheight-50 cb-17B3EC div-confirm-btn">
                     <a href="#" class="c-fff f-fs16">确定</a>
                 </div>
            </div>
        </div>
        <script src="../../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/common_http.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/jquery/2.1.3/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/iscroll-probe.js"></script>
        <script src="../../../js/iscroll-pull-up-down.js"></script>
        <script src="../../../js/pull-up-down.js"></script>
        <script type="text/javascript">
            var showType, noYear, deviceCode;
            mui.init();
            mui.plusReady(function(){
                var self = plus.webview.currentWebview();
                showType = self.showType;
                noYear = self.noYear;
                deviceCode = self.deviceCode;
                
                if(showType == 1){
                    $(".type-panel").show();
                    if(deviceCode){
                        $(".type-panel .tag").removeClass("active");
                        $(".type-panel .tag[data-val="+deviceCode+"]").addClass("active");
                    }
                }
                
                bindEvents();
            });
            
            function bindEvents(){
                $(".tag").on("tap", function(){
                    var $this = $(this);
                    if($this.hasClass("active")){
                        return;
                    }else{
                        var tag = $this.attr("data-tag");
                        $(".tag[data-tag="+tag+"]").removeClass("active");
                        $this.addClass("active");
                    }
                });
                
                $(".div-confirm-btn").on('tap', function(){
                    var opener = plus.webview.currentWebview().opener();
                    //获取选中的年份和维度信息
                    var deviceCode = $(".tag.active[data-tag=year]").attr("data-val");
                    mui.fire(opener, "refresh", {deviceCode: deviceCode});
                    mui.fire(opener, "hideShaiXuan");
                });
            }
            
            mui.back = function(){
                var self = plus.webview.currentWebview(),
                    opener = self.opener();
                mui.fire(opener, "hideShaiXuan");
            }
        </script>
    </body>
</html>

html/device/html/choose-patient.html

@@ -0,0 +1,164 @@
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>选择居民</title>
        <meta name="author" content="yihu.com" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <link rel="stylesheet" type="text/css" href="../../../fonts/font-awesome/css/font-awesome.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../../css/mui.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../../common/cross/css/cross.css">
        <link rel="stylesheet" type="text/css" href="../../../common/cross/css/cross.ui.css"/>
        <link rel="stylesheet" type="text/css" href="../css/device-management.css"/>
    </head>
    <body>
        <div class="h45">
            <div class="demo-comtop">
                <a class="mui-action-back"></a>
                <h1>选择提醒居民</h1>
                <div class="header-link disabled c-fff c-f16">发送消息</div>
            </div>
        </div>
        <div class="ui-grid ui-grid-middle list-item">
            <div class="ui-col-0 c-f17 c-333 mr10">未测量时间</div>
            <div class="ui-col-1 mr10 c-t-right c-f14 c-999" id="dateName">全部</div>
            <div class="ui-col-0"><i class="fa fa-angle-right"></i></div>
        </div>
        <div class="ui-grid ui-grid-middle list-item">
            <div class="ui-col-0 c-f17 c-333 mr10">绑定状态</div>
            <div class="ui-col-1 mr10 c-t-right c-f14 c-999" id="statusName">全部</div>
            <div class="ui-col-0"><i class="fa fa-angle-right"></i></div>
        </div>
        <div class="ui-grid ui-grid-middle list-item">
            <div class="ui-col-0 c-f17 c-333 mr10">设备类型</div>
            <div class="ui-col-1 mr10 c-t-right c-f14 c-999" id="typeName">全部</div>
            <div class="ui-col-0"><i class="fa fa-angle-right"></i></div>
        </div>
        <div class="plr15" style="height: 40px; line-height: 40px;">
            <div class="c-checkbox mr5" style="top: 7px;">
                <input type="checkbox" name="checkAll" id="chooseAll">
            </div>
            <label for="chooseAll" class="c-f14 c-999">批量选择</label>
            <span class="c-f14 c-17b3ec ml5">提示：提醒将发送给设备登记居民</span>
        </div>
        <div class="mui-scroll-wrapper" style="top: 224px;">
            <div class="mui-scroll">
                <ul class="plr15" id="result_wrapper">
                    
                </ul>
                <div id="no_result_wrap" class="c-hide" style="margin-top: 50px;">
                    <img class="no-result-img" src="../../../images/shujuweikong_img.png" />
                    <div class="c-f14 c-333 c-t-center">抱歉，暂未找到符合条件的结果。</div>
                </div>
            </div>
        </div>
        
        <div id="dateSheet" class="mui-popover mui-popover-bottom mui-popover-action">
            <!-- 可选择菜单 -->
            <ul id="" class="mui-table-view">
                <li class="mui-table-view-cell date-item" data-val="1">
                    <a href="javascript:;">今日未测量</a>
                </li>
                <li class="mui-table-view-cell date-item" data-val="2">
                    <a href="javascript:;">七日未测量</a>
                </li>
                <li class="mui-table-view-cell date-item" data-val="3">
                    <a href="javascript:;">本月未测量</a>
                </li>
                <li class="mui-table-view-cell date-item" data-val="4">
                    <a href="javascript:;">超过一个月未测量</a>
                </li>
            </ul>
            <!-- 取消菜单 -->
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a class="zy-alert" href="#dateSheet">取消</a>
                </li>
            </ul>
        </div>
        
        <div id="statusSheet" class="mui-popover mui-popover-bottom mui-popover-action">
            <!-- 可选择菜单 -->
            <ul id="" class="mui-table-view">
                <li class="mui-table-view-cell status-item" data-val="">
                    <a href="javascript:;">全部</a>
                </li>
                <li class="mui-table-view-cell status-item" data-val="1">
                    <a href="javascript:;">已绑定</a>
                </li>
                <li class="mui-table-view-cell status-item" data-val="2">
                    <a href="javascript:;">居民解绑</a>
                </li>
            </ul>
            <!-- 取消菜单 -->
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a class="zy-alert" href="#statusSheet">取消</a>
                </li>
            </ul>
        </div>
        
        <div id="typeSheet" class="mui-popover mui-popover-bottom mui-popover-action">
            <!-- 可选择菜单 -->
            <ul id="" class="mui-table-view">
                <li class="mui-table-view-cell type-item" data-val="">
                    <a href="javascript:;">全部</a>
                </li>
                <li class="mui-table-view-cell type-item" data-val="1">
                    <a href="javascript:;">血糖仪</a>
                </li>
                <li class="mui-table-view-cell type-item" data-val="2">
                    <a href="javascript:;">血压计</a>
                </li>
            </ul>
            <!-- 取消菜单 -->
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a class="zy-alert" href="#typeSheet">取消</a>
                </li>
            </ul>
        </div>
        
        <!--居民列表模板-->
        <script type="text/html" id="li-tmp">
            {{each list as it index}}
            <li class="ui-grid ui-grid-middle item-li">
                <div class="ui-col-0 mr10">
                    <div class="c-checkbox">
                        <input type="checkbox" name="patient" data-json="{{it | getJsonStr}}">
                    </div>
                </div>
                <div class="ui-col-1 device-card" style="margin-top: 0;">
                    <div class="ui-col-0 mr15">
                        <div class="img-box">
                            <img src="{{it.photo | getPhoto}}">
                        </div>
                    </div>
                    <div class="ui-col-1">
                        <div class="c-f17">{{it.name}}</div>
                        <div class="mt5 c-f14 c-999">{{it.category_code | getCategoryName}} - {{it.device_name}}</div>
                        <div class="mt5 c-f14 c-999">&bull; 登记时间：{{it.create_time | formatDate}}</div>
                    </div>
                    {{if it.operate_code == 1}}
                    <div class="flag-box"><img src="../images/bangdi_icon.png"></div>
                    {{else}}
                    <div class="flag-box"><img src="../images/jiebang_icon.png"></div>
                    {{/if}}
                </div>
            </li>
            {{/each}}
        </script>
        <script src="../../../js/jquery/2.1.3/jquery.js"></script>
        <script src="../../../js/mui.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/common_http.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/app.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/template.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/templateHepler.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/choose-patient.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

html/device/html/device-data.html

@@ -0,0 +1,252 @@
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>智能设备分析</title>
        <meta name="author" content="yihu.com" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <link rel="stylesheet" type="text/css" href="../../../fonts/font-awesome/css/font-awesome.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../../css/mui.min.css" />
        <link rel="stylesheet" type="text/css" href="../../../common/cross/css/cross.css"/>
        <link rel="stylesheet" type="text/css" href="../../../common/cross/css/cross.ui.css"/>
        <link rel="stylesheet" type="text/css" href="../css/common.css"/>
    </head>
    <body>
        <div class="h45">
            <div class="demo-comtop">
                <a class="mui-action-back"></a>
                <h1>智能设备分析</h1>
                <a class="header-link">
                    <img src="../images/shoumiao_icon.png" width="25" class="mt10">
                </a>
            </div>
        </div>
        <div class="mui-scroll-wrapper" style="top: 46px">
            <div class="mui-scroll">           
                <!-- 位置信息 start -->
                <div class="ui-grid ui-grid-middle location-div">
                    <div class="ui-col-0 text-box c-f13 c-nowrap"  style="max-width:50%;">
                        <img src="../images/weizhi_icon.png" width="12">
                        <span id="areaTitle" class="title c-666 c-f13 ml5"></span>
                    </div>
                    <div class="ui-col-0">
                        <span class="jiezhi-time c-f13"></span>
                    </div>
                    <div class="ui-col-1 c-t-right">
                    	<span class="select-label c-666 c-f13">所有设备</span>
                    	<span class="select-label-btn c-12b7f5">筛选</span>
                    </div>
                </div>
                <!-- 位置信息 end -->
                
                <div class="bgc-fff c-border-tb">
                	<div class="pl10">
                        <h3 class="ptb10 c-323232 c-bold c-f16 c-border-b">设备情况</h3>
                    </div>
                    <div class="ui-grid ui-grid-middle c-position-r c-f14">
	                    <div class="ui-col-1">
	                        <div class="round-chart" id="roundChart" style="height: 150px;"></div>
	                    	<div class="clearfix">
	                    		<div class="fl clearfix pl20">
		                    		<em class="fl" style="width: 6px; height: 42px; border-radius: 3px; background: #DDDDDD;"></em>
		                    		<div class="fl mlr10">
		                    			<p class="c-323232"><span class="device-buy">0</span>台</p>
		                    			<p class="c-999999">采购量</p>
		                    		</div>
		                    	</div>
		                    	<div class="fl clearfix">
		                    		<em class="fl" style="width: 6px; height: 42px; border-radius: 3px; background: #39f;"></em>
		                    		<div class="fl mlr10">
		                    			<p class="c-323232"><span class="device-push">0</span>台</p>
		                    			<p class="c-999999">发放量</p>
		                    		</div>
		                    	</div>
	                    	</div>
	                    </div>
	                    <div class="ui-col-1">
	                        <div class="round-chart" id="roundChart1" style="height: 150px;"></div>
	                    	<div class="clearfix">
	                    		<div class="fl clearfix pl20">
		                    		<em class="fl" style="width: 6px; height: 42px; border-radius: 3px; background: #DDDDDD;"></em>
		                    		<div class="fl mlr10">
		                    			<p class="c-323232"><span class="device-push">0</span>台</p>
		                    			<p class="c-999999">发放量</p>
		                    		</div>
		                    	</div>
		                    	<div class="fl clearfix">
		                    		<em class="fl" style="width: 6px; height: 42px; border-radius: 3px; background: #39f;"></em>
		                    		<div class="fl mlr10">
		                    			<p class="c-323232"><span class="device-bind">0</span>台</p>
		                    			<p class="c-999999">绑定量</p>
		                    		</div>
		                    	</div>
	                    	</div>
	                    </div>
	                </div>
	                <div class="ptb10 mt20 c-border-t">
	                	<div class="ui-grid ui-grid-middle c-position-r c-f14">
	                		<div class="ui-col-0 w-45 pl20">
	                			<p class="clearfix">
	                				<em class="fl mr5" style="width: 6px; height: 20px; border-radius: 3px; background: #DDDDDD;"></em>设备发放量
	                			</p>
	                			<p class="c-323232 mt5 c-t-center"><span class="device-push">0</span>台</p>
	                			<p class="clearfix mt10">
	                				<em class="fl mr5" style="width: 6px; height: 20px; border-radius: 3px; background: #39f;"></em>本周设备使用台数
	                			</p>
	                			<p class="c-323232 mt5 c-t-center"><span class="device-use">0</span>台</p>
	                		</div>
	                		<div class="ui-col-1">
	                			<div class="round-chart" id="roundChart2" style="height: 160px;"></div>
	                		</div>
	                	</div>
	                	<div class="ui-grid ui-grid-middle c-position-r c-f14">
	                		<div class="ui-col-0 w-45 pl20">
	                			<p class="clearfix">
	                				<em class="fl mr5" style="width: 6px; height: 20px; border-radius: 3px; background: #DDDDDD;"></em>体征异常监测量
	                			</p>
	                			<p class="c-323232 mt5 c-t-center"><span class="device-dif">0</span>次</p>
	                			<p class="clearfix mt10">
	                				<em class="fl mr5" style="width: 6px; height: 20px; border-radius: 3px; background: #39f;"></em>体征干预指导数
	                			</p>
	                			<p class="c-323232 mt5 c-t-center"><span class="device-del">0</span>次</p>
	                		</div>
	                		<div class="ui-col-1">
	                			<div class="round-chart" id="roundChart3" style="height: 160px;"></div>
	                		</div>
	                	</div>
	                </div>
                </div>
                <div class="mt10 bgc-fff c-border-tb pb10">
                	<div class=" plr10">
                        <h3 class="ptb10 c-323232 c-bold c-f16 c-border-b">设备登记趋势</h3>
                    </div>
                    <div class="ui-grid ui-grid-middle">
                        <div class="ui-col-1 c-t-center pt10 pb5">
                            <span class="date-tag active" data-type="1">日</span><!--
                            --><span class="date-tag" data-type="2">周</span><!--
                            --><span class="date-tag" data-type="3">月</span>
                        </div>
                    </div>
                    <div class="clearfix mt5 plr10">
                        <div class="fl c-f12 c-909090"><span id="startValue"></span> ~ <span id="endValue"></span>数据</div>
                        <div class="fr c-f12 c-909090">单位：台</div>
                    </div>
                    <div class="line-chart plr10" id="lineChart" style="height: 250px"></div>
                </div>
                <!--<div class="mt10 bgc-fff">
                    <div class="plr10">
                        <h3 class="ptb10 c-323232 c-bold c-f16 c-border-b">社区排名</h3>
                    </div>
                    <table class="bottom-list-table mb20" id="listTable">
                    </table>
                </div>-->
                <div class="mt10">
                    <div class="area-tab-panel">
                        <div class="area-tab active" data-val="4"><span>各区</span><i class="border-line-right"></i></div>
                        <div class="area-tab" data-val="3"><span>社区</span><i class="border-line-right"></i></div>
                        <div class="area-tab" data-val="2"><span>团队</span></div>
                    </div>
                    <table class="bottom-list-table mb20" id="listTable">
                    </table>
                </div>
            </div>
        </div>
        
        <!-- 团队信息模块 -->
        <div class="modal-overlay"></div>
        <div class="modal-content">
            <div class="div-header-title">
                <div class="div-close"></div>
                <div class="div-overlay-img"></div>
                <div class="div-overlay-title">团队详情</div>
            </div>
            <div class="div-overlay-content">
                <div class="pt15" id="teamInfoBox">
                    
                </div>
            </div>
        </div>
        
        <script type="text/html" id="data-list">
            <thead>
                <tr>
                    <th class="c-t-left pl10">排名</th>
                    <th>发放量</th>
                    <th>绑定量</th>
                    <th>绑定率</th>
                    {{if level>2 && lowLevel != 1}}
                    <th width="20"></th>
                    {{/if}}
                </tr>
            </thead>
            <tbody>
                {{each list as v i}}
                <tr class="data-row" data-name="{{v.name}}" data-code="{{v.code}}" data-type="">
                    <td class="area-name">
                        {{if v.top == 1}}
                        <div class="ranking ranking1">{{v.top}}</div>
                        {{else if v.top == 2}}
                        <div class="ranking ranking2">{{v.top}}</div>
                        {{else if v.top == 3}}
                        <div class="ranking ranking3">{{v.top}}</div>
                        {{else}}
                        <div class="ranking">{{v.top}}</div>
                        {{/if}}
                        <div class="ui-col-1 c-nowrap-multi">{{v.name}}</div>
                    </td>
                    <td>{{v.allNum}}</td>
                    <td>{{v.bindingNum}}</td>
                    <td>{{v.rate}}%</td>
                    {{if level>2 && lowLevel != 1}}
                    <td><i class="fa fa-angle-right"></i></td>
                    {{/if}}
                </tr>
                {{/each}}
            </tbody>
        </script>
        
        <!-- 团队信息模板 -->
        <script type="text/html" id="teamInfo">
            <div class="plr15 pb20">
                <span class="c-f14 c-bold c-333">团队名称：</span>
                <span class="c-f14 c-333">{{team.name}}</span>
            </div>
            <div class="plr15 pb20">
                <span class="c-f14 c-bold c-333">所在社区：</span>
                <span class="c-f14 c-333">{{team.hospitalName}}</span>
            </div>
            <div class="plr15 pb20">
                <span class="c-f14 c-bold c-333">团队长：</span>
                <span class="c-f14 c-333">{{team.leaderName}}</span>
            </div>
            <div class="plr15 pb20">
                <span class="c-f14 c-bold c-333">团队成员(<span class="span-team-count">{{memberLength}}</span>人)：</span>
                <p class="c-f14 c-333 mt10">
                    {{each members as member index}}
                    {{if index == 0}}
                        {{member.name}}
                    {{else if index < 20}}
                        、{{member.name}}
                    {{else if index == 20}}
                    、{{member.name}}等
                    {{/if}}
                    {{/each}}
                </p>
            </div>
        </script>
        <script src="../../../js/jquery/2.1.3/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/common_http.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/app.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/template.js" type="text/javascript" charset="utf-8"></script>
        <!--<script src="../../../widget/echarts/3.0/js/echarts.min.js" type="text/javascript" charset="utf-8"></script>-->
        <script src="../js/echarts.common.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/device-data.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

html/device/html/device-management.html

@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>设备管理</title>
        <meta name="author" content="yihu.com" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <link rel="stylesheet" type="text/css" href="../../../fonts/font-awesome/css/font-awesome.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../../css/mui.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../../common/cross/css/cross.css">
        <link rel="stylesheet" type="text/css" href="../../../common/cross/css/cross.ui.css"/>
        <link rel="stylesheet" type="text/css" href="../css/device-management.css"/>
    </head>
    <body>
        <div class="h45">
            <div class="demo-comtop">
                <a class="mui-action-back"></a>
                <h1>设备管理</h1>
                <!--<div class="header-link">
                    <img src="../images/shoumiao_icon.png" width="23" class="mt10">
                </div>-->
            </div>
        </div>
        <div class="plr15 ptb10 c-border-b bgc-fff ui-grid ui-grid-middle">
            <div class="ui-col-1 c-f17">居民设备使用情况<span class="c-f14 c-909090 ml10" id="count">(0)</span></div>
            <div class="ui-col-0"><a class="c-btn c-btn-17b3ec" id="remindBtn">提醒测量</a></div>
        </div>
        <div class="plr15 ptb10 bgc-fff c-border-b ui-grid ui-grid-middle">
            <div class="ui-col-1 c-f14">过滤条件：
                <span class="filter-label">全部</span><!--
                --><span class="filter-label">全部</span><!--
                --><span class="filter-label">全部</span>
            </div>
            <div class="ui-col-0" id="filterBtn">
                <img src="../images/saixuan_icon.gif" width="22">
            </div>
        </div>
        <div class="mui-scroll-wrapper" style="top: 148px;">
            <div class="mui-scroll">
                <ul class="plr15" id="result_wrapper">
                </ul>
                <div id="no_result_wrap" class="c-hide">
                    <img class="no-result-img" src="../../../images/shujuweikong_img.png" />
                    <div class="c-f14 c-333 c-t-center">抱歉，暂未找到符合条件的结果。</div>
                </div>
            </div>
        </div>
        
        <script type="text/html" id="li-tmp">
            {{each list as it}}
            <li class="ptb10 device-card" data-json="{{it | getJsonStr}}">
                <div class="ui-col-0 mr15">
                    <div class="img-box">
                        <img src="{{it.photo | getPhoto}}">
                    </div>
                </div>
                <div class="ui-col-1">
                    <div class="c-f17">{{it.name}}</div>
                    <div class="mt5 c-f14 c-999">{{it.category_code | getCategoryName}} - {{it.device_name}}</div>
                    {{if it.operate_code == 1}}
                    <div class="mt5 c-f14 c-999">&bull; 登记时间：{{it.create_time | formatDate}}</div>
                    {{/if}}
                    {{if it.operate_code == 2}}
                    <div class="mt5 c-f14 c-999">&bull; 解绑时间：{{it.create_time | formatDate}}</div>
                    {{/if}}
                </div>
                <div class="ui-col-0"><i class="fa fa-angle-right"></i></div>
                {{if it.operate_code == 1}}
                <div class="flag-box"><img src="../images/bangdi_icon.png"></div>
                {{else}}
                <div class="flag-box"><img src="../images/jiebang_icon.png"></div>
                {{/if}}
            </li>
            {{/each}}
        </script>
        <script src="../../../js/jquery/2.1.3/jquery.js"></script>
        <script src="../../../js/mui.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/common_http.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/app.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/template.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/templateHepler.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/device-management.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

html/device/html/device-physical-records.html

@@ -0,0 +1,99 @@
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>设备测量记录</title>
        <meta name="author" content="yihu.com" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <link rel="stylesheet" type="text/css" href="../../../fonts/font-awesome/css/font-awesome.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../../css/mui.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../../common/cross/css/cross.css">
        <link rel="stylesheet" type="text/css" href="../../../common/cross/css/cross.ui.css"/>
        <link rel="stylesheet" type="text/css" href="../css/device-physical-records.css"/>
    </head>
    <body>
        <div class="h45">
            <div class="demo-comtop">
                <a class="mui-action-back"></a>
                <h1 id="title"></h1>
                <div class="header-link">
                    <img src="../images/jumingxinxi_icon.png" width="23" class="mt10">
                </div>
            </div>
        </div>
        <div id="content">
            
        </div>
        <!--获取月份模本-->
        <script type="text/html" id="month-tmp">
            {{each list as it}}
            <div class="month-panel">
                <div class="month" data-val="{{it}}">
                    <div class="ui-col-1">
                        <img src="../images/yuefen_icon.png" width="20" class="mr10"><!--
                        --><span class="c-f17 c-17b3ec">{{it}}</span>
                    </div>
                    <div class="ui-col-0"><i class="fa fa-angle-down"></i></div>
                </div>
                <div class="date-list" id="{{it}}">
                    <div class="no-record">当月无测量数据</div>
                </div>
            </div>
            {{/each}}
        </script>
        <!--日期的模板-->
        <script type="text/html" id="date-tmp">
            {{each list as it}}
            <div class="date-panel">
                <div class="date" data-val="{{it}}">
                    <div class="ui-col-1">
                        <img src="../images/icon_shijian.png" width="14" class="mr10"><!--
                        --><span class="c-f14 c-909090">{{it}}</span>
                    </div>
                    <div class="ui-col-0"><i class="fa fa-angle-down"></i></div>
                </div>
                <ul class="record-list plr15" data-date="{{it}}">
                </ul>
            </div>
            {{/each}}
        </script>
        <!--记录模板-->
        <script type="text/html" id="record-tmp">
            {{each list as it}}
            <li class="record">
                <div class="ui-col-0 mr30">{{it.time | getTime}}</div>
                <div class="ui-col-1">{{it.gi_type | getTypeName}}</div>
                <div class="ui-col-0">{{#it.gi,it.gi_type | getXTValue}}</div>
            </li>
            {{/each}}
        </script>
        <script type="text/html" id="record2-tmp">
            {{each list as it}}
            <li class="record">
                <div class="ui-col-0 mr30">{{it.time | getTime}}</div>
                <div class="ui-col-1">
                    <div class="ui-grid c-border-b pb5">
                        <div class="ui-col-1">收缩压</div>
                        <div class="ui-col-0">{{#it.sys,1 | getXYValue}}</div>
                    </div>
                    <div class="ui-grid pt5">
                        <div class="ui-col-1">舒张压</div>
                        <div class="ui-col-0">{{#it.dia,2 | getXYValue}}</div>
                    </div>
                </div>
            </li>
            {{/each}}
        </script>
        <script src="../../../js/jquery/2.1.3/jquery.js"></script>
        <script src="../../../js/mui.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/common_http.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/app.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/template.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/device-physical-records.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

html/device/html/filter.html

@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>设备筛选</title>
        <meta name="author" content="yihu.com" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <link rel="stylesheet" type="text/css" href="../../../fonts/font-awesome/css/font-awesome.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../../css/mui.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../../common/cross/css/cross.css">
        <link rel="stylesheet" type="text/css" href="../../../common/cross/css/cross.ui.css"/>
        <link rel="stylesheet" type="text/css" href="../css/filter.css"/>
    </head>
    <body class="bgc-fff">
        <div class="reset-btn">重置数据</div>
        <div class="plr15 ptb15">
            <div class="c-999 c-f14 mb5">未测量时间</div>
            <div>
                <span class="tag date-tag" data-type="date" data-val="">全部</span>
                <span class="tag date-tag" data-type="date" data-val="1">今日未测量</span>
                <span class="tag date-tag" data-type="date" data-val="2">七日未测量</span>
                <span class="tag date-tag" data-type="date" data-val="3">本月未测量</span>
                <span class="tag date-tag" data-type="date" data-val="4">超过1个月未测量</span>
            </div>
            <div class="c-999 c-f14 mt15 mb5">设备绑定状态</div>
            <div>
                <span class="tag status-tag" data-type="status" data-val="">全部</span>
                <span class="tag status-tag" data-type="status" data-val="1">已绑定</span>
                <span class="tag status-tag" data-type="status" data-val="2">居民解绑</span>
            </div>
            <div class="c-999 c-f14 mt15 mb5">设备类型</div>
            <div>
                <span class="tag type-tag" data-type="type" data-val="">全部</span>
                <span class="tag type-tag" data-type="type" data-val="1">血糖仪</span>
                <span class="tag type-tag" data-type="type" data-val="2">血压计</span>
            </div>
        </div>
        <div class="footer">
            <div class="cancel-btn">取消</div>
            <div class="confirm-btn">过滤</div>
        </div>
        
        <script src="../../../js/jquery/2.1.3/jquery.js"></script>
        <script src="../../../js/mui.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/common_http.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/app.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/filter.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

html/device/html/patient-device-list.html

@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>居民设备列表</title>
        <meta name="author" content="yihu.com" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <link rel="stylesheet" type="text/css" href="../../../fonts/font-awesome/css/font-awesome.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../../css/mui.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../../common/cross/css/cross.css">
        <link rel="stylesheet" type="text/css" href="../../../common/cross/css/cross.ui.css"/>
        <style>
            .img-div{
                width: 80px;
                height: 80px;
                object-fit: contain;
            }
            .img-div>img{
                width: 100%;
                height: 100%;
            }
            .device-box{
                background-color: #fff;
                padding: 10px;
                border-radius: 8px;
                margin-top: 10px;
            }
            .device-box:first-child{
                margin-top: 0px;
            }
        </style>
    </head>
    <body>
        <div class="h45">
            <div class="demo-comtop">
                <a class="mui-action-back"></a>
                <h1>设备管理</h1>
                <div class="header-link">
                    <img src="../images/shoumiao_icon.png" width="23" class="mt10">
                </div>
            </div>
        </div>
        <div class="mui-scroll-wrapper" style="top: 45px;">
            <div class="mui-scroll">
                <div class="plr10 ptb10" id="deviceList">
                </div>
                <div id="no_result_wrap" class="c-hide">
                    <img class="no-result-img" src="../../../images/shujuweikong_img.png" />
                    <div class="c-f14 c-333 c-t-center">抱歉，暂未找到符合条件的结果。</div>
                </div>
            </div>
        </div>
        
        <script type="text/html" id="device-tmp">
            {{each list as it}}
            <div class="ui-grid ui-grid-middle device-box" data-json="{{it | getJsonStr}}">
                <div class="ui-col-0 mr10 img-div">
                    <img src="{{it.devicePhoto | getPhoto}}">
                </div>
                <div class="ui-col-1">
                    <div class="c-f16 c-bold c-333">{{it.deviceName}}</div>
                    <div class="c-909090 c-f14 mt5">&bull; 绑定时间：{{it.czrq}}</div>
                    <div class="c-909090 c-f14 mt5">&bull; 绑定人： {{it | getBindUser}}</div>
                </div>
            </div>
            {{/each}}
        </script>
        <script src="../../../js/jquery/2.1.3/jquery.js"></script>
        <script src="../../../js/mui.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/common_http.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/app.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/template.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/patient-device-list.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

html/device/html/shaixuan.html

@@ -0,0 +1,130 @@
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>设备筛选</title>
        <meta name="author" content="yihu.com" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <link rel="stylesheet" href="../../../common/iconfont/iconfont.css">
        <link rel="stylesheet" href="../../../common/cross/css/cross.css" />
        <link rel="stylesheet" href="../../../common/cross/css/ui.all.min.css" />
        <link rel="stylesheet" href="../../../common/css/pull-up-down.css" type="text/css"/>
        <style>
            .c-323232{color: #323232;}
            #footer {  position: absolute; bottom: 0;width: 100%;}
            .cb-17B3EC {background:#17B3EC;}
            .cb-ffffff {background:#ffffff;}
            .c-border-top{border-top:1px solid #DCDCDC;}
            .height-50 { height: 50px; }
            .lheight-50 { line-height: 50px; }
            .c-50{width: 50% !important;margin-left: 0 !important;float: left;}
            .c-000{color:#000}
            .c-tac { text-align: center; }
            .line{
                height:1px;
                background-color: #e1e1e1;
            }
            .tag{
                float: left;
                border: 1px solid #e1e1e1;
                padding: 0 10px;
                border-radius: 5px;
                height: 34px;
                line-height: 34px;
                margin: 3px 10px 3px 0;
                color: #909090;
                font-size: 14px;
            }
            .tag.active{
                color:#fff;
                border:1px solid #17B3EC;
                background: #17B3EC;
            }
        </style>    
    </head>
    <body>
        <div id="wrapper1">
            <div class="scroll-wrapper" id="total_wrapper" style="bottom: 52px;">
                <div class="iScroller">
                    <div class="mlr10 mt20">
                        <div class="div-content">
                            <div class="c-f16 c-333">设备类型</div>
                            <div class="c-row mt10 mb20" id="signYear">
                                <div class="tag c-t-center active" data-tag="year" data-val=""><span>所有设备</span></div>
                                <div class="tag c-t-center" data-tag="year" data-val="1"><span>血压计</span></div>
                                <div class="tag c-t-center" data-tag="year" data-val="2"><span>血糖仪</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div id="footer">
            <div class="c-row btn-wrap c-border-top">
                 <div class="c-tac height-50 lheight-50 cb-17B3EC div-confirm-btn">
                     <a href="#" class="c-fff f-fs16">确定</a>
                 </div>
            </div>
        </div>
        <script src="../../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/common_http.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/jquery/2.1.3/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/iscroll-probe.js"></script>
        <script src="../../../js/iscroll-pull-up-down.js"></script>
        <script src="../../../js/pull-up-down.js"></script>
        <script type="text/javascript">
            var showType, noYear, deviceCode;
            mui.init();
            mui.plusReady(function(){
                var self = plus.webview.currentWebview();
                showType = self.showType;
                noYear = self.noYear;
                deviceCode = self.deviceCode;
                
                if(showType == 1){
                    $(".type-panel").show();
                    if(deviceCode){
                        $(".type-panel .tag").removeClass("active");
                        $(".type-panel .tag[data-val="+deviceCode+"]").addClass("active");
                    }
                }
                
                bindEvents();
            });
            
            function bindEvents(){
                $(".tag").on("tap", function(){
                    var $this = $(this);
                    if($this.hasClass("active")){
                        return;
                    }else{
                        var tag = $this.attr("data-tag");
                        $(".tag[data-tag="+tag+"]").removeClass("active");
                        $this.addClass("active");
                    }
                });
                
                $(".div-confirm-btn").on('tap', function(){
                    var opener = plus.webview.currentWebview().opener();
                    //获取选中的年份和维度信息
                    var deviceCode = $(".tag.active[data-tag=year]").attr("data-val");
                    mui.fire(opener, "refresh", {deviceCode: deviceCode});
                    mui.fire(opener, "hideShaiXuan");
                });
            }
            
            mui.back = function(){
                var self = plus.webview.currentWebview(),
                    opener = self.opener();
                mui.fire(opener, "hideShaiXuan");
            }
        </script>
    </body>
</html>

html/device/images/.svn/entries

@@ -0,0 +1,912 @@
10
dir
11936
svn://172.19.103.12:88/repos/wlyy/app/%E5%8E%A6%E9%97%A8i%E5%81%A5%E5%BA%B7v1.4.7/html/device/images
svn://172.19.103.12:88
2018-06-12T03:34:37.623926Z
11721
raolu
62d03301-2242-47d2-9572-f16751ab9961

shoumiao_icon.png
file
2018-06-28T06:23:22.987843Z
21d616efbcc932c11c5c838df26582a8
2018-05-17T02:09:30.102559Z
11663
raolu
has-props
1591

bangdi_icon.png
file
2018-06-28T06:23:22.984343Z
2391cac93d57e30e6895198c47e0e679
2018-06-12T03:34:37.623926Z
11721
raolu
has-props
2399

paiming01_icon.png
file
2018-06-28T06:23:22.995344Z
48df542ffac0aa072bdbd90f96d8e221
2018-05-17T02:09:30.102559Z
11663
raolu
has-props
1719

icon_shijian.png
file
2018-06-28T06:23:22.991844Z
d6c1f3c68abba1b874241100c741726a
2018-06-12T03:34:37.623926Z
11721
raolu
has-props
1586

paiming02_icon.png
file
2018-06-28T06:23:22.998845Z
3b5e4c5603bdc02f273fd3345097d092
2018-05-17T02:09:30.102559Z
11663
raolu
has-props
1730

paiming03_icon.png
file
2018-06-28T06:23:23.006846Z
b060a7b27dc9b86c7ad7b0993f150397
2018-05-17T02:09:30.102559Z
11663
raolu
has-props
1716

weixuanzhe_icon.png
file
2018-06-28T06:23:23.002845Z
a74f9b6684ba7950ac498c34e52b60fb
2018-06-12T03:34:37.623926Z
11721
raolu
has-props
1838

saixuan_icon.gif
file
2018-06-28T06:23:23.014347Z
24f3d5f2a91b9c3efc8ea8139daedc7a
2018-06-12T03:34:37.623926Z
11721
raolu
has-props
1890

tang_icon.png
file
2018-06-28T06:23:23.010346Z
55f81df73bb12dcbddcc6db7596a0943
2018-06-12T03:34:37.623926Z
11721
raolu
has-props
2284

yuefen_icon.png
file
2018-06-28T06:23:23.018347Z
f7d97a9f6567c3938b3a51f1f7f157cd
2018-06-12T03:34:37.623926Z
11721
raolu
has-props
1555

icon_xuetangyi_zhihui.png
file
2018-06-28T06:23:23.025848Z
6614fbd1a44dce528a39d4387b34f0af
2018-06-12T03:34:37.623926Z
11721
raolu
has-props
1528

tankuang_guanbi_icon.png
file
2018-06-28T06:23:23.022348Z
eea8f49fbb9e92184789430d7ffdf84a
2018-05-17T02:09:30.102559Z
11663
raolu
has-props
1296

icon_xueyaji_zhihui.png
file
2018-06-28T06:23:23.029349Z
4d97d544e450a26d4b86e30eaad5c1f8
2018-06-12T03:34:37.623926Z
11721
raolu
has-props
1703

jiebang_icon.png
file
2018-06-28T06:23:23.036850Z
1ff70bebc624519dfff63378cfd90676
2018-06-12T03:34:37.623926Z
11721
raolu
has-props
2520

weizhi_icon.png
file
2018-06-28T06:23:23.033349Z
77e8f84db0ada838a094c6524be92662
2018-05-17T02:09:30.102559Z
11663
raolu
has-props
1750

queren_icon.png
file
2018-06-28T06:23:23.040350Z
a14e48fb8996b1364d35bf7e9e53cc65
2018-06-12T03:34:37.623926Z
11721
raolu
has-props
16211

xiazhan_icon.png
file
2018-06-28T06:23:23.044350Z
6383a0758455196df0c331d5d1a42c0e
2018-06-12T03:34:37.623926Z
11721
raolu
has-props
1274

tankuang_bg_img.png
file
2018-06-28T06:23:23.049351Z
06ec7a16398092ad2dc90470e9227d58
2018-05-17T02:09:30.102559Z
11663
raolu
has-props
2091

gao_icon.png
file
2018-06-28T06:23:23.053352Z
8db629d02c5b8c22b7b2dcf62c67ef74
2018-06-12T03:34:37.623926Z
11721
raolu
has-props
2024

shouqi_icon.png
file
2018-06-28T06:23:23.057352Z
a3a68c5ee31240009f17d30c1d03ada2
2018-06-12T03:34:37.623926Z
11721
raolu
has-props
1220

jumingxinxi_icon.png
file
2018-06-28T06:23:23.060853Z
97b572b9214424a987637cf5e9a68e02
2018-06-12T03:34:37.623926Z
11721
raolu
has-props
1669

weixing_icon.png
file
2018-06-28T06:23:23.064353Z
79e9b909a5e62a3e55206198d8744c68
2018-06-12T03:34:37.623926Z
11721
raolu
has-props
1834

icon_xuetangyi.png
file
2018-06-28T06:23:23.068854Z
e1b484973800fb8d7dd286f38aa5f986
2018-06-12T03:34:37.623926Z
11721
raolu
has-props
1530

icon_xueyaji.png
file
2018-06-28T06:23:23.072354Z
3532cfb1d324663d6a1be1ed29a11aef
2018-06-12T03:34:37.623926Z
11721
raolu
has-props
1711

gaotang_icon.png
file
2018-06-28T06:23:23.076355Z
2f9e028a81d66526b663cc9a8e0587bc
2018-06-12T03:34:37.623926Z
11721
raolu
has-props
2739

weixing_zihui_icon.png
file
2018-06-28T06:23:23.080355Z
a6c086f70d5a388a7e61464bd228637c
2018-06-12T03:34:37.623926Z
11721
raolu
has-props
1857


html/device/images/.svn/prop-base/bangdi_icon.png.svn-base

@@ -0,0 +1,5 @@
K 13
svn:mime-type
V 24
application/octet-stream
END

html/device/images/.svn/prop-base/gao_icon.png.svn-base

@@ -0,0 +1,5 @@
K 13
svn:mime-type
V 24
application/octet-stream
END

html/device/images/.svn/prop-base/gaotang_icon.png.svn-base

@@ -0,0 +1,5 @@
K 13
svn:mime-type
V 24
application/octet-stream
END

html/device/images/.svn/prop-base/icon_shijian.png.svn-base

@@ -0,0 +1,5 @@
K 13
svn:mime-type
V 24
application/octet-stream
END

html/device/images/.svn/prop-base/icon_xuetangyi.png.svn-base

@@ -0,0 +1,5 @@
K 13
svn:mime-type
V 24
application/octet-stream
END

html/device/images/.svn/prop-base/icon_xuetangyi_zhihui.png.svn-base

@@ -0,0 +1,5 @@
K 13
svn:mime-type
V 24
application/octet-stream
END

html/device/images/.svn/prop-base/icon_xueyaji.png.svn-base

@@ -0,0 +1,5 @@
K 13
svn:mime-type
V 24
application/octet-stream
END

html/device/images/.svn/prop-base/icon_xueyaji_zhihui.png.svn-base

@@ -0,0 +1,5 @@
K 13
svn:mime-type
V 24
application/octet-stream
END

html/device/images/.svn/prop-base/jiebang_icon.png.svn-base

@@ -0,0 +1,5 @@
K 13
svn:mime-type
V 24
application/octet-stream
END

html/device/images/.svn/prop-base/jumingxinxi_icon.png.svn-base

@@ -0,0 +1,5 @@
K 13
svn:mime-type
V 24
application/octet-stream
END

html/device/images/.svn/prop-base/paiming01_icon.png.svn-base

@@ -0,0 +1,5 @@
K 13
svn:mime-type
V 24
application/octet-stream
END

html/device/images/.svn/prop-base/paiming02_icon.png.svn-base

@@ -0,0 +1,5 @@
K 13
svn:mime-type
V 24
application/octet-stream
END

html/device/images/.svn/prop-base/paiming03_icon.png.svn-base

@@ -0,0 +1,5 @@
K 13
svn:mime-type
V 24
application/octet-stream
END

html/device/images/.svn/prop-base/queren_icon.png.svn-base

@@ -0,0 +1,5 @@
K 13
svn:mime-type
V 24
application/octet-stream
END

html/device/images/.svn/prop-base/saixuan_icon.gif.svn-base

@@ -0,0 +1,5 @@
K 13
svn:mime-type
V 24
application/octet-stream
END

html/device/images/.svn/prop-base/shoumiao_icon.png.svn-base

@@ -0,0 +1,5 @@
K 13
svn:mime-type
V 24
application/octet-stream
END

html/device/images/.svn/prop-base/shouqi_icon.png.svn-base

@@ -0,0 +1,5 @@
K 13
svn:mime-type
V 24
application/octet-stream
END

html/device/images/.svn/prop-base/tang_icon.png.svn-base

@@ -0,0 +1,5 @@
K 13
svn:mime-type
V 24
application/octet-stream
END

html/device/images/.svn/prop-base/tankuang_bg_img.png.svn-base

@@ -0,0 +1,5 @@
K 13
svn:mime-type
V 24
application/octet-stream
END

html/device/images/.svn/prop-base/tankuang_guanbi_icon.png.svn-base

@@ -0,0 +1,5 @@
K 13
svn:mime-type
V 24
application/octet-stream
END

html/device/images/.svn/prop-base/weixing_icon.png.svn-base

@@ -0,0 +1,5 @@
K 13
svn:mime-type
V 24
application/octet-stream
END

html/device/images/.svn/prop-base/weixing_zihui_icon.png.svn-base

@@ -0,0 +1,5 @@
K 13
svn:mime-type
V 24
application/octet-stream
END

html/device/images/.svn/prop-base/weixuanzhe_icon.png.svn-base

@@ -0,0 +1,5 @@
K 13
svn:mime-type
V 24
application/octet-stream
END

html/device/images/.svn/prop-base/weizhi_icon.png.svn-base

@@ -0,0 +1,5 @@
K 13
svn:mime-type
V 24
application/octet-stream
END

html/device/images/.svn/prop-base/xiazhan_icon.png.svn-base

@@ -0,0 +1,5 @@
K 13
svn:mime-type
V 24
application/octet-stream
END

html/device/images/.svn/prop-base/yuefen_icon.png.svn-base

@@ -0,0 +1,5 @@
K 13
svn:mime-type
V 24
application/octet-stream
END