body{ position: absolute; left: 0; top:0; width:100%; height: 100%; overflow: hidden; line-height: 1; color: #323233;font-family:PingFang SC,Helvetica Neue,Arial,sans-serif; -webkit-font-smoothing: antialiased;}
/* @font-face { 
    font-family: PingFangSC;
    src: url(../fonts/PingFangRegular.ttf) format('truetype');
} */
.clearfix:after, .clearfix:before { visibility:hidden; display:block; font-size:0; content:""; clear:both; height:0;}
p{ margin: 0; padding: 0;}

.text-blue{ color: #1989fa;}
.text-green{ color: #24c688;}
.text-orange{ color: #ff943f;}
.text-red{ color: #fe3539;}
.text-gray{ color: #a3a5a8}
.text-info{ color: #1989fa;}
.text-black{ color: #333;}
.text-yellow{ color: #e6b327;}

.text-right{ text-align: right;}
.m-t-sm{ margin-top: 8px;}

input,textarea{-webkit-appearance: none;}
.text-ellipsis{display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.text-overflow{ text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}

.van-page{ width: 100%; height: 100%; position: absolute;left: 0; top: 0; overflow: hidden;}
/* nav-bar */
.van-nav-bar{transition: all .2s; flex-grow: 0; flex-shrink: 0; background: #fff; height: 50px; line-height: 50px; position: fixed; left: 0;top:0; width: 100%; z-index: 9; overflow: hidden;}
.van-nav-bar__title{ color: #394042; font-size: 18px; max-width: 70%; font-weight: 600;}
.van-nav-bar__title .icon-fa-drop { color: #aaa; margin-left: 3px; display: inline-block; transition: all .4s;}
.van-nav-bar__title .icon-fa-drop.active{transform: rotate(180deg);}
.van-nav-bar__text,.van-nav-bar .van-icon{ color: #6b7072; font-size: 20px;}
.van-nav-bar .van-icon.text-blue{ color: #1989fa;}
.van-nav-bar__title .iconfont { font-size: 16px; margin-left: 6px;}
.van-nav-bar__right .van-nav-bar__text{ font-size: 16px; position: relative;}
.van-nav-bar__text:active{ background: transparent;}
.van-nav-bar__right .van-info{ top:12px;}
.van-nav-bar__right .vanBtn{ font-size:16px; color: #394042;}
.van-navbar-search { position: absolute; left: 0; right:0; top: 0; bottom: 0; z-index: 9;}
.van-navbar-search .van-search{ background: #1989fa; padding: 8px 0 8px 16px;}
.van-navbar-search .van-search__content { background: #fff; border-radius: 999rem; padding-left: 15px;}
.van-navbar-search .van-search__content .van-icon{ font-size: 16px;}
.van-navbar-search .van-search__action { color: #fff;}
.van-navbar-search .van-cell__value .van-field__control{ font-size: 14px;}
.van-nav-bar.van-hairline--bottom::after{content: ' '; position: absolute; pointer-events: none; box-sizing: border-box;top: auto; left: 0; right: 0; bottom: 0; -webkit-transform: scaleY(.5); transform: scaleY(.5); border-bottom: 1px solid #e6e6e6; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; z-index: 2;}
.van-nav-bar__left, .van-nav-bar__right{ top: 0; display: flex; align-items: center; z-index: 9;}
.van-nav-bar__right .action{ margin-left: 15px;}
.van-nav-bar__right i{ font-size: 18px;}
.link-btn{ font-size: 20px; margin-left: 20px; position: relative; padding: 0 5px;}
.link-btn.sm{ margin-left: 10px;}
.link-btn .new-spot{ margin-top: 22px; margin-left: -4px;}
.link-btn:first-child{ margin-left: 0;}
.van-nav-bar__right .van-button{ min-width: 50px; border-radius: 4px; background: #4559F6; border-color: #4559F6;}
.link-btn .icon-sc.active:before{ content: "\e984"; color: #e7325b;}
.van-nav-bar__right .iconfont+.iconfont { margin-left: 20px;}

.van-nav-bar.yellow{ background: #e5b226;}
.van-nav-bar.yellow .van-icon,.van-nav-bar.yellow .iconfont{ color: #fff;}
.van-nav-bar.yellow .van-nav-bar__title{ color: #fff;}

/* van-doc-section */
.van-doc-section{ position: absolute;left: 0; top:50px; bottom: 50px; right: 0; overflow:auto; -webkit-overflow-scrolling: touch;}
.van-doc-content{ width: 100%; height: 100%; overflow: auto;}
.van-doc-section.no-tabbar{ bottom: 0;}
.van-content-inner{ position: absolute;left: 0;top: 0;right: 0;bottom: 0;background: #fff;overflow-y: auto;}
/*  */
.van-cell-filter{ background: #fff; height: 40px; line-height: 40px; position: relative;}
.van-cell-filter:after{content: ''; position: absolute; left: 0; bottom: 0; right: auto; top: auto; height: 1px; right: 0; background-color: #e5e5e5; display: block; z-index: 15; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%;}
.van-filter_items { text-align: center; font-size: 14px; color: #5c5f64; display: flex;justify-content: center;align-items: center;}
.van-filter_items .fa-tir{ display: inline-block;width:0; height:0; border-left:3px solid transparent; border-right:3px solid transparent; border-top:3px solid #666; margin-left: 3px;}
.van-filter_items .icon-fa-filter{ font-size: 10px; margin-left: 3px;}
.van-filter_items.active { color: #1989fa;}
.van-filter_items.active .fa-tir{ transform: rotate(180deg); transition: all .4s;border-top:3px solid #1989fa;}
.van-filter_items span{display: inline-block; max-width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.van-filter_items.text-left {padding: 0 15px; justify-content: flex-start;}
.van-filter_items.text-right {padding: 0 15px; justify-content: flex-end;}

/*  */
.van-hairline-bottom::after{ content: ' '; position: absolute; pointer-events: none; box-sizing: border-box; left: 0; right: 0; bottom: 0; border-bottom: 1px solid #e6e6e6; -webkit-transform: scaleY(.5); transform: scaleY(.5); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%;}
.van-tabs__line{ background: #1989fa;}
.van-tab span em { font-size: 12px; color: #f25644; font-style: normal;}
.van-cell:not(:last-child)::after{-webkit-transform-origin: 50% 100%;transform-origin: 50% 100%;}

/* radio */
.van-radio__icon--checked .van-icon { color: #fff; border-color: #1989fa; background-color: #1989fa;}
/* .van-checkbox__icon--round .van-icon{ border-radius:4px;} */
/* .van-checkbox__icon--checked .van-icon {color: #fff;  border-color: #24c688; background-color: #24c688;} */

/* search */
.van-search{ background: #fff;}
.van-field__left-icon .van-icon{ color: #999;}
.van-search__content{ background: #f2f3f4; border-radius:999rem;}

/* button */
.van-button--primary{     color: white;background: linear-gradient(to right, rgb(90, 135, 249), rgb(69, 89, 246));border: 0px;}
/*.van-button--info{ background: #0099FF; border-color:#0099FF;}*/
.van-button--danger{ background: #FF5A5A; border-color:#FF5A5A;}
.van-button--warning{ background: #FFA733; border-color:#FFA733;}
.van-button--plain {background-color: #fff;}
.van-button--large{ border-radius:4px;}

.van-radio__icon .van-icon{ border-color: #1989fa;}
.van-checkbox__icon--checked .van-icon{ background: #e5b226; border-color: #e5b226;}


/*about*/
.van-about-wrap{ width: 100%; height: 100%; background: #fff;  position: relative;}
.about-logo{ padding: 30px 0 10px 0; text-align: center;}
.about-logo img{ width: 100px; }
.about-edition{ text-align: center; font-size: 16px; color: #666;}
.about-list{ padding: 50px 30px;}
.about-list ul li { display: flex; align-items: center; font-size: 14px; position: relative; line-height: 24px; padding: 16px 0;}
.about-list ul li:after{content: ' '; position: absolute; pointer-events: none; box-sizing: border-box; left: 0; right: 0; bottom: 0; border-bottom: 1px solid #e2e3e5; -webkit-transform: scaleY(.5); transform: scaleY(.5); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%;}
.about-list ul li label{ color: #333;}
.about-list ul li .value{ flex: 1; text-align: right; color: #999;}
.about-list ul li .value span { font-size:14px;}
.van-form-group .van-cell__title{ font-size: 15px;}
.van-form-group .van-field__control { font-size: 15px; color: #666;}
/* 消息 */
.news-cell{ position: relative; background: #fff; padding: 14px 20px;}
.news-header{ display: flex; align-items: center; line-height: 24px;}
.news-header .news-title{ font-size: 16px; color: #333; flex: 1;text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.news-header .news-time{ font-size: 12px; color: #ababab; margin-left: 10px;}
.news-value{ display: flex; align-items: center; }
.news-value .txt{ font-size: 14px; color: #999; line-height: 24px; flex: 1;text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.news-value .unread{ width: 8px; height: 8px; border-radius: 999rem; background: #fe3539; margin-left: 10px;}
.news-cell:after{ left:20px; right:0;}
.news-cell:last-child:after{ display: none;}
/* 基地管理 */
/* .base-list{ padding-bottom: 20px;} */
.base-cell{ background: #fff; position: relative; padding: 15px 20px; display: flex; align-items: center;}
.base-cell:after{ left: 20px; right: 20px; z-index: 2;}
.base-pic{width: 42px; height: 42px; border-radius: 999rem; margin-right: 12px;}
.base-pic img{ width: 100%; height: 100%; display: block; }
.base-pic.c1{ background: #FFA733;}
.base-pic.c2{ background: #29CC9B;}
.base-pic.c3{ background: #0099FF;}
.base-pic.c4{ background: #EB6AD3;}
.base-pic.c5{ background: #FF5A5A;}
.base-pic.c6{ background: #F5BA21;}
.base-pic.c7{ background: #76CA49;}
.base-pic.c8{ background: #A378FF;}
.base-content{ flex: 1;}
.base-name{ font-size: 16px; color: #333; line-height: 24px; padding-bottom: 2px; font-weight: 600; display: flex; align-items: center;}
.base-name .base-tit{ flex:1;}
.base-name .label{font-size: 12px;color: #e6b327;line-height: 18px;padding: 0 6px;position: relative; font-weight:normal;}
.base-name .label:after{ content: ' '; position: absolute; pointer-events: none; box-sizing: border-box; top: -50%; left: -50%; right: -50%; bottom: -50%; -webkit-transform: scale(.5); transform: scale(.5); border: 1px solid #e6b327; border-radius: 2px;}
.base-tag { font-size: 12px; color: #999999; line-height: 20px;}
.base-tag span { padding: 0 5px;}
.base-tag span:first-child{ padding-left: 0;}
.base-link .van-cell__right-icon{ font-size: 14px; color: #b5b5b5;}
.van-form-title{ padding: 14px 20px 8px 20px; font-size: 12px; color: #676767; line-height: 20px;}
.van-field__body .icon-fa-navig{ margin-right: 10px; color: #24c688;}
.base-delBtn{ text-align: center; color: #fe3539; width: 100%;}
.add-Btn{ text-align: center; color: #e6b327;}
.add-Btn i{ margin-right: 8px;}
.van-form-group.mt{ margin-top: 15px;}
.van-form-group.smt{ margin-top: 8px;}
.van-form-group.lg .van-field__label{ max-width: 120px;}
.task-list .van-field__control{ color: #222; font-weight: 600; font-size: 14px;}
.van-cell-header{ position: relative; padding: 10px 20px; display: flex; align-items: center; line-height: 30px; font-size:14px; color: #333; font-weight: bold;}
.van-cell-header:after{content: ' ';position: absolute;pointer-events: none;box-sizing: border-box;left: 20px;right: 20px;bottom: 0;border-bottom: 1px solid #e2e3e5;-webkit-transform: scaleY(.5);transform: scaleY(.5);-webkit-transform-origin: 50% 100%;transform-origin: 50% 100%;}
.van-cell-header span{ width: 20px; height: 20px; border-radius: 999rem; display: flex; align-items: center; justify-content: center; margin-right: 10px;}
.van-cell-header span img{ width: 100%; height: 100%;}
.van-cell-header span.c1{ background: #0099FF;}
.van-cell-header span.c2{ background: #FFA733;}
.van-cell-header span.c3{ background: #EB6AD3;}
.van-cell-header span.c4{ background: #29CC9B;}
.tall-text{ display: flex; align-items: center; justify-content: flex-end; flex:1;}

/*  */
.reminder{ position: absolute; left: 0; right:0; bottom: 0; padding: 20px;}
.reminder .reminder-header{ position: relative; text-align: center; margin-bottom: 15px; display: flex; align-items: center;}
.reminder .reminder-header span { padding: 0 15px; font-size: 12px; color: #999; position: relative; z-index: 2; background: #f4f4f4;}
.reminder .reminder-header:before,.reminder .reminder-header:after{content: ' '; flex: 1; pointer-events: none; box-sizing: border-box;border-bottom: 1px solid #ddd; -webkit-transform: scaleY(.5); transform: scaleY(.5); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%;}
.reminder .reminder-text{ font-size:12px; color: #999;}
.reminder .reminder-text p{ line-height: 24px; position: relative; padding-left: 12px; margin: 0;}
.reminder .reminder-text p:before{ content: ''; display: block; width:4px; height: 4px; border-radius: 50%; background: #999; position: absolute; left:0; top:10px;}
.device-cell{ position: relative; padding: 12px 20px; background: #fff; display: flex; align-items: center;}
.device-cell:after{ left: 20px;}
.device-user{ margin-right: 10px;}
.device-user img{ width: 42px; height: 42px; border-radius: 999rem;}
.device-content{ flex: 1;}
.device-content .device-name{ font-size: 16px; color: #333; line-height: 24px; font-weight: 600;}
.device-content .device-tag{ font-size: 14px; color: #999; line-height: 24px;}
.device-content .device-tag .role{ display: inline-block; border-radius: 999rem; padding: 0 6px; font-size: 12px; margin-left: 5px; position: relative; line-height: 18px;}
.device-content .device-tag .role:after{ content: ' '; position: absolute;  pointer-events: none; box-sizing: border-box; top: -50%; left: -50%; right: -50%; bottom: -50%;  -webkit-transform: scale(.5); transform: scale(.5); border: 1px solid #333; border-width: 1px; border-radius: 999rem;}
.device-content .device-tag .role.blue{ color: #0099FF;}
.device-content .device-tag .role.green{ color: #29CC9B;}
.device-content .device-tag .role.orange{ color: #FFA733;}
.device-content .device-tag .role.blue:after{ border-color: #0099FF;}
.device-content .device-tag .role.green:after{ border-color: #29CC9B;}
.device-content .device-tag .role.orange:after{ border-color: #FFA733;}
.van-form-actions{ padding:20px 20px;}
/* */
.select-list .van-cell{ padding:15px 20px; align-items: center;}
.select-list .van-cell:after{ left:20px;}
.relation-all .base-cell:last-child:after{ display: block;}
/* 可视化 */
.visualization-view{ position: absolute; left:0; top:0; right:0; bottom:0;}
.visualization-tips{ position: absolute; left:20px; top:10px; right:20px;font-size:12px;line-height:18px; padding:5px 15px;color: #333;background: #fff; border-radius:999rem; box-shadow: 0 3px 10px rgba(0,0,0,.15);}
.visualization-tips i{ margin-right: 5px; color: #e6b327;}

/* 流量统计 */
.traffic-header{ background: #fff; padding:10px 20px; display: flex; align-items: center; line-height: 24px; position: relative;}
.traffic-header:after{content: ' '; position: absolute; pointer-events: none; box-sizing: border-box; left: 20px; right: 20px; bottom: 0; border-bottom: 1px solid #efefef; -webkit-transform: scaleY(.5); transform: scaleY(.5); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%;}
.traffic-header .tit{ flex: 1; font-size:14px; color:#333; font-weight:bold;}
.traffic-header .unit{ font-size:12px; color:#999;}
.traffic-view{ background: #fff; position: absolute; left:0; top:44px; right:0; bottom:0; padding:10px 0; overflow-y:auto;-webkit-overflow-scrolling: touch;}
.traffic-view ul li{ padding:10px 15px; display: flex; align-items: center; position: relative;}
.traffic-view ul li .time{ font-size:14px; color:#333; width:40px; margin-right:10px; text-align: right;}
.traffic-view ul li .flow-box{ flex: 1; height: 8px; border-radius:999rem; display: flex; align-items: center;}
.traffic-view ul li .flow-proess{ border-radius:999rem; height:8px; background: #0099FF;}
.traffic-view ul li .number{ font-size:12px; color:#666; margin-left: 10px;}
/* 运动统计 */
.motion-time{background: #f1a048; padding: 0 15px; line-height: 40px; display: flex; align-items: center;}
.motion-time .motion-select{ font-size:13px; color: #fff; flex: 1;}
.motion-link{ font-size: 14px; color: #fff; position: relative; font-weight:bold;  display:flex; align-items: center;}
.motion-link img{ width:16px; height:16px; margin-right:5px;}
.motion-view .van-cell{ padding: 14px 15px; align-items: center;}
.motion-view .van-cell .van-cell__title>span{ font-size: 16px; color: #333; font-weight:600;}
.motion-tag{ font-size: 12px; color: #999;}
.motion-tag span{ padding: 0 6px;}
.motion-tag span:first-child{ padding-left: 0;}
.motion-view .van-collapse-item__content { padding:0 15px 15px 15px;}
.motion-record{ background: #fdfaf2; border-radius: 4px;}
.motion-record ul li{ position: relative; padding: 10px 20px; padding-left: 35px;}
.motion-record ul li:before{ content: ' ';position: absolute;pointer-events: none;box-sizing: border-box;left: 17px;top: 15px;bottom: -15px;
    border-left: 1px solid #e5b326;-webkit-transform: scaleX(.5);transform: scaleX(.5);-webkit-transform-origin: 100% 50%;transform-origin: 100% 50%;}
.motion-record ul li:last-child:before{ display: none;}
.motion-record ul li .dot{ display: block; width: 7px; height: 7px; border-radius: 50%; background: #e5b326; position: absolute; left: 14px; top: 15px; z-index: 2;}
.motion-record ul li .title{ font-size:14px; color: #333; line-height: 20px;}
.motion-record ul li .value{ font-size:12px; color: #aaa; line-height: 20px;}
.motion-record ul li .value span { padding: 0 6px;}
.motion-record ul li .value span:first-child{ padding-left: 0;}
.motion-record ul li:after{ content: ' ';position: absolute;pointer-events: none;box-sizing: border-box;left: 35px;right: 15px;bottom: 0;
border-bottom: 1px solid #e5e5e5;-webkit-transform: scaleY(.5);transform: scaleY(.5);-webkit-transform-origin: 50% 100%;transform-origin: 50% 100%;} 
.motion-record ul li:last-child:after{ display: none; }
.motion-view .van-collapse-item__title--expanded:after{ display: none;}

/*设备详情*/
.van-content-block.white{ background: #fff;}
.in-cell-header.jr{ display: flex; align-items: center;}
.in-cell-header.jr img{ width: 20px; height: 20px; margin-right: 10px;}
.in-cell-header{ position: relative; line-height: 45px; padding: 0 15px; font-size: 14px; color: #333; font-weight: bold;}
.in-replace{ line-height: 30px; position: relative; padding: 0 15px; display: flex; align-items: center; background: #fcf0e7;}
.in-replace.lg{ line-height: 35px;}
.in-replace .in-replace-time{ font-size:12px; color: #ee8439;flex: 1;}
.history-btn{ font-size: 11px; color: #ee8439; position: relative; line-height: 19px; padding: 0 8px;}
.history-btn:after{content: ' '; position: absolute; pointer-events: none; box-sizing: border-box; top: -50%; left: -50%; right: -50%; bottom: -50%; -webkit-transform: scale(.5); transform: scale(.5); border: 1px solid #ee8439; border-radius: 999rem;}
.in-item-grid{ position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; position: relative; padding-bottom: 10px;}
.in-grid-item{position: relative; box-sizing: border-box; height: 0;flex-basis: 25%; padding-top: 25%;}
.in-grid-item-content{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; box-sizing: border-box; height: 100%; padding: 16px 8px;}
.in-grid-item-content{position: absolute; top: 0; right: 0; left: 0;-webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;}
/* .in-grid-item-content:after{position: absolute; box-sizing: border-box; content: ' '; pointer-events: none; top: -50%; right: -50%; bottom: -50%; left: -50%; border: 0 solid #e5e5e5; -webkit-transform: scale(0.5); transform: scale(0.5);border-width: 0 1px 1px 0; z-index: 1;} */
.in-item-grid.orge{ padding:10px 0;}
.in-item-grid.orge .in-grid-item{ padding-top: 30%;}
.in-item-grid.orge:after{ content: ' ';position: absolute;pointer-events: none;box-sizing: border-box;left: 15px;right: 15px;bottom: 0;border-bottom: 1px solid #e2e3e5;-webkit-transform: scaleY(.5);transform: scaleY(.5);-webkit-transform-origin: 50% 100%;transform-origin: 50% 100%;}
.in-item-grid.orge:last-child:after{ display: none;}
.in-pic{ width: 40px; height: 40px; display: block; margin: 0 auto; border-radius: 999rem; position: relative;}
.in-pic.c1,.real-pic.c1{ background: #FFA733;}
.in-pic.c2,.real-pic.c2{ background: #29CC9B;}
.in-pic.c3,.real-pic.c3{ background: #0099FF;}
.in-pic.c4,.real-pic.c4{ background: #EB6AD3;}
.in-pic.c5,.real-pic.c5{ background: #FF5A5A;}
.in-pic.c6,.real-pic.c6{ background: #e5b226;}
.in-pic.c7,.real-pic.c7{ background: #76CA49;}
.in-pic.c8,.real-pic.c8{ background: #A378FF;}
.in-pic.c9,.real-pic.c9{ background: #dadada;}
.in-pic img{ width: 40px; height: 40px;}
.in-grid-item-content p{ font-size: 12px; color: #666; margin: 0; padding: 9px 0 9px 0;}
.in-grid-item-content .in-num{ font-size: 18px; color: #222; font-weight: bold;}
.in-grid-item-content .in-num span{ font-size: 12px; font-weight: normal;}
.in-grid-item-content .in-item-title{ font-size: 13px; color: #666; padding: 10px 0 0 0;}
.in-grid-item-content .tip-number{ position: absolute; right: 0; top: 0; border: 1px solid #fff; border-radius: 999rem; font-size:12px; color:#fff; text-align: center; box-sizing: border-box; width: 12px; height: 12px; background: #FF5A5A;}
.quickbox{ margin-bottom: 0;}
.quickbox .in-item-grid:after{content: ' ';position: absolute;pointer-events: none;box-sizing: border-box;left: 15px;right: 15px;bottom: 0;border-bottom: 1px solid #e2e3e5;-webkit-transform: scaleY(.5);transform: scaleY(.5);-webkit-transform-origin: 50% 100%;transform-origin: 50% 100%;}
.quickbox .in-cell-header{ padding: 10px 15px 0 15px; margin-bottom: -10px;}

/* 远程控制 */
.remote-wrap{ position: absolute; left:0; top:0; right:0; bottom: 0; padding-bottom: 80px; overflow-y: auto; -webkit-overflow-scrolling: touch;}
.remote-card{ background: #fff; position: relative; margin: 10px; border-radius: 5px; box-shadow: 0 0 5px rgba(214,214,214,.4);}
.remote-content{ padding:15px 20px; position: relative;}
.remote-name{ line-height: 24px; align-items: center; display: flex;}
.remote-name .tit{ font-size: 16px; color: #333; flex: 1; font-weight: 600;}
.remote-name .groupName{ font-size:12px; color:#e6b327;line-height: 18px; padding:0 6px; position: relative;}
.remote-name .groupName:after{content: ' ';position: absolute;pointer-events: none;box-sizing: border-box;top: -50%;left: -50%;right: -50%;bottom: -50%;-webkit-transform: scale(.5);transform: scale(.5);border: 1px solid #e6b327;border-radius: 2px;}
.remote-tag{ font-size: 12px; color: #999; line-height: 24px;}
.remote-tag span { padding: 0 6px;}
.remote-tag span:first-child{ padding-left: 0;}
.remote-footer{ position: relative; padding: 8px 12px; text-align: right;}
.remote-footer:after{ content: ' '; position: absolute; pointer-events: none; box-sizing: border-box; left: 0; right: 0; top: 0; border-top: 1px solid #e2e3e5; -webkit-transform: scaleY(.5); transform: scaleY(.5); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%;}
.remote-footer .van-button{ height: 26px; line-height: 24px; margin-left: 5px; padding: 0; width: 65px; text-align: center; font-size:12px;}
.remote-footer .van-button--danger{ background: #FF5A5A;}
.van-footer{ position: absolute; left:0; right:0; bottom: 0; z-index: 9; background: #fff; height: 50px; text-align: center; display: flex; align-items: center; justify-content: center;}
.van-footer:before{content: ' ';position: absolute;pointer-events: none;z-index: 2;box-sizing: border-box;left: 0;right: 0;top: 0;border-top: 1px solid #e5e5e5;
-webkit-transform: scaleY(.5);transform: scaleY(.5);-webkit-transform-origin: 50% 100%;transform-origin: 50% 100%;}
.van-footer .van-button--default{ border-color: transparent;}
.remote-card.vul .remote-content{ padding-right: 60px;}
.remote-card.vul .remote-content .van-checkbox{ position: absolute; right: 15px; top:50%; margin-top: -10px; z-index: 9;}
.van-item-box{ display: flex; align-items: center; width: 100%; padding: 0 15px;}
.van-item-box .van-item-actions{ flex: 1; text-align: right;}
.van-item-box .van-item-actions .van-button{ height: 30px; line-height: 28px; padding: 0 10px;}
.van-footer .van-checkbox__label { margin-left: 5px;}
.van-auto-fixed{ position: absolute; left: 0; right: 0; text-align: center; bottom: 20px; z-index: 9;}
.van-auto-fixed .van-button--default{ padding: 0 20px; border-color: transparent;  font-size: 16px; font-weight: bold; box-shadow: 0 3px 10px rgba(0,0,0,.15);}
/* 历史统计 */
.statistics-wrap{ position: absolute; left:0; right:0; top:0; bottom:0; background: #fff;}
.legend-box{ padding:10px 50px; display: flex; align-items: center;flex-wrap: wrap;}
.legend-item { font-size:14px; color:#333; line-height: 24px; width: 50%;}
.legend-item i{ display: inline-block; border-radius: 999rem; width:10px; height:10px; margin-right:6px;}
.legend-item.blue i{ background: #0099FF;}
.legend-item.org i{ background: #FFA733;}
.legend-item.green i{ background: #29CC9B;}
.legend-item.red i{ background: #FF5A5A;}

/* van-menu */
.van-menu-view{ position: absolute; right: 6px; top: 50px; z-index: 99;}
.van-menu-content{ background: rgba(0,0,0,.8); border-radius: 5px; padding: 5px 0; position: relative;}
.van-menu-content:after{ content: ''; position: absolute; right: 10px; top: -8px; width:0;  height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:8px solid  rgba(0,0,0,.8);}
.van-menu-content ul li{ line-height: 40px; padding: 0 20px; font-size: 16px; color: #fff;}
.van-menu-content ul li i{ margin-right: 10px;}

/* 选择地址 */
.van-address-search{ position: absolute; left:0; right: 0; top: 0; z-index: 9;}
.van-address-search .van-search{ background: transparent;}
.van-address-search .van-search .van-search__content{ background: #fff; border-radius: 999rem; box-shadow: 0 0 5px rgba(0,0,0,.1);}
.van-address-map{ position: absolute; left: 0;top: 0; right: 0; bottom: 0;}
.van-bottom-content{ background: #fff; position: absolute; left: 0; right: 0; bottom: 0; z-index: 9;}
.van-bottom-content .van-bottom-header{ height: 40px; line-height: 40px; padding: 0 20px;font-size: 14px; color: #666; position: relative;}
.van-bottom-content .van-bottom-header:after{content: ' '; position: absolute; pointer-events: none; box-sizing: border-box; left: 0; right: 0; bottom: 0; border-bottom: 1px solid #e2e3e5; -webkit-transform: scaleY(.5); transform: scaleY(.5); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%;}
.bottom-address-list {max-height: 240px; overflow-y: auto;}
.bottom-address-list ul li{ position: relative; padding: 12px 20px; display: flex; align-items: center;}
.bottom-address-list ul li .iconfont{ margin-right: 12px; font-size: 14px; color: #333; line-height: 20px;}
.info-value h4{ font-size: 16px; color: #333; margin: 0; line-height: 20px; font-weight: 500;}
.info-value p{ font-size: 12px; color: #999; padding-top: 5px; margin: 0;}
.bottom-address-list ul li:after{content: ' '; position: absolute; pointer-events: none; box-sizing: border-box; left: 20px; right: 0; bottom: 0; border-bottom: 1px solid #e2e3e5; -webkit-transform: scaleY(.5); transform: scaleY(.5); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%;}
.van-address-position{ width: 36px; height: 36px; position: absolute; right: 15px; top: -45px; border-radius: 999rem;box-shadow: 0 0 6px rgba(0,0,0,.1); background: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #999;}

/* 气象数据 */
.weather-wrap{ background: #fff; position: absolute; left:0; right: 0; top: 0; bottom: 0; overflow-y: auto;}
.weather-top{ border-radius: 15px; position: relative; color: #fff; margin:10px; margin-top:0; padding: 15px 18px; box-shadow:0 5px 12px 0 rgba(52, 130, 186, 0.5); height: 150px;background: linear-gradient(75deg,#2f55d2 0,#32aacd 100%);}
.weather-current-info{ display: flex; align-items: center;font-size: 14px;}
.weather-current-info .weather-base-name{ font-size: 14px; flex: 1; line-height: 20px; display: flex; align-items: center;}
.weather-current-info .weather-base-name img{ width: 16px; height: 16px; margin-right: 5px; display: block; line-height: 20px;}
.weather-temperature{ display: flex; align-items: flex-end; padding-top:20px;}
.weather-temperature .Celsius{ font-size: 68px; line-height: 68px; font-family: Arial;}
.weather-temperature .info{ font-size: 18px; line-height: 30px;}
.weather-temperature .info span{ display: block;}
.weather-gather{ font-size:14px; border-radius: 0 0 15px 15px; position: absolute; left:0; right: 0; bottom:0; padding: 10px 18px; display: flex; align-items: center; background: rgba(0,0,0,.1);}
.weather-gather span img{ width: 20px; height: 20px;}
.weather-gather span+span{ padding-left:15px;}


.weather-main{ padding-top:10px;}
.weather-title{ display: flex; align-items: center; line-height: 44px; position: relative; padding: 0 15px;}
.weather-title:after{content: ' '; position: absolute; pointer-events: none; box-sizing: border-box; left: 0; right: 0; bottom: 0; border-bottom: 1px solid #e5e5e5; -webkit-transform: scaleY(.5); transform: scaleY(.5); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%;}
.weather-title .title{ color: #0c0c0c; flex: 1;}
.weather-title .tab{ margin-right: -10px;}
.weather-title .tab span{ font-size:14px; color: #666; padding: 0 10px; position: relative; line-height: 44px;}
.weather-title .tab span.active{ color: #0c0c0c; font-weight: bold;} 
.weather-trend-box{ position: relative;}
.weather-trend{ padding: 15px 0; display: flex; position: relative;} 
.weather-trend .trend-item{ flex:1;position: relative; text-align: center;}
.weather-trend .trend-item:after{content: ' '; position: absolute; pointer-events: none; box-sizing: border-box; top: 0; right: 0; bottom: 0; border-right: 1px solid #e5e5e5; -webkit-transform: scaleX(.5); transform: scaleX(.5); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%;}
.weather-trend .trend-item:last-child:after{ display: none;}
.weather-trend .trend-week { font-size:14px; line-height: 20px; color: #0c0c0c;}
.weather-trend .trend-date{font-size:14px; line-height: 20px; color: #0c0c0c; padding-top:3px;}
.weather-trend .trend-weather{ padding: 15px 0;}
.weather-trend .trend-weather span{ font-size:12px; color: #999; display: block; padding-bottom: 8px;}
.weather-trend .trend-weather img{ width: 28px; height: 28px;}
.weather-trend .trend-wind{ font-size: 14px; color: #0c0c0c; line-height: 24px; margin-top:100px;}
.weather-trend .trend-wind .wind-direction{ font-size: 12px; display: block; color: #555;}
.weather-charts{ position: absolute; left: 0; right: 0; top: 130px;}

.weather-list .trend-item{ position: relative; padding: 10px 15px; display: flex; align-items: center;justify-content: space-between;}
.weather-list .trend-item:after{content: ' '; position: absolute; pointer-events: none; box-sizing: border-box; left: 10px; right: 10px; bottom: 0; border-bottom: 1px solid #e5e5e5; -webkit-transform: scaleY(.5); transform: scaleY(.5); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%;}
.weather-list .trend-week{ font-size:14px; line-height: 20px; color: #0c0c0c;}
.weather-list .trend-date{ font-size:14px; line-height: 20px; color: #555; padding:0 10px 0 5px; width: 40px;}
.weather-list .trend-weather{ display: flex; align-items: center;width: 25%;}
.weather-list .trend-weather span{font-size:12px; color: #999; }
.weather-list .trend-weather img{ width: 26px; height: 26px; margin-right: 8px;}
.weather-list .trend-wind{font-size: 14px; color: #0c0c0c; text-align: right; padding-left: 5px; display: flex; align-items: center;}
.weather-list .trend-wind .wind-direction{ color: #666; width: 45px;}
.weather-list .trend-wind .wind-power{ width: 45px;}
.weather-list .trend-interval{ font-size: 14px; color: #0c0c0c; width: 55px; text-align: right;}


.connect-fit{ padding:15px 15px; position: relative; display: flex; align-items: center; font-size: 14px; color: #222;}
.connect-fit .connect-ico {width: 20px; height: 20px; margin-right: 10px; background:linear-gradient(135deg,#54D154 0,#1AAD19 100%); border-radius: 50%; display: flex; align-items: center;justify-content: center; }
.connect-fit .connect-ico img{ width: 100%; height: 100%;}
.connect-fit a.active{ background:linear-gradient(135deg,#54D154 0,#1AAD19 100%);}
.connect-fit a{position: absolute; right: 20px; width: 72px; box-sizing: border-box; text-align: center; border-radius: 999rem; line-height: 26px; display: block;color: #fff; padding: 0 12px; font-size: 12px;  background: #b2b2b2;}
.re-item-tabs{ padding: 10px 20px 0 20px;}
.re-item-tabs ul{ display: flex;justify-content: space-between;}
.re-item-tabs ul li{ position: relative; text-align: center; font-size: 14px; }
.re-item-tabs ul li a{ line-height: 32px; position: relative; height:32px; color: #666; display: block;border-radius: 3px; }
.re-item-tabs ul li.active a{ color: #29CC9B; font-weight: bold; }
.re-item-tabs ul li.active a:after{ content: ''; position: absolute; width: 30px; height: 3px; border-radius: 999rem; background: #29CC9B; display: block; left: 50%; margin-left: -15px; bottom: -3px;}
.re-item-grid{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; position: relative; padding: 10px 10px 15px 10px;}
.re-grid-item{ position: relative; box-sizing: border-box;flex-basis: 50%; padding:5px;}
.re-grid-item-content{ border-radius: 5px; /*box-shadow: 0 0 10px 0 #e5e8f3;*/ padding: 18px; position: relative;background: #F8FAFB;}
.re-grid-item-content p{ font-size: 14px; color: #333; line-height: 20px;}
.re-grid-item-content .re-state{border-radius: 0 5px 0 5px; position: absolute; right: 0; top: 0; font-size: 10px; line-height: 15px; padding: 0 4px;}
.re-grid-item-content .re-state.online{ background-color: #1AAD19; color: #fff;}
.re-grid-item-content .re-state.offline{ background-color: #ccc; color: #fff;}
.re-grid-item-content .re-num{font-size: 18px;color: #222; font-weight: bold; display: flex; align-items: center; line-height: 20px; margin: 8px 0 0 0;}
.re-grid-item-content .re-num span{ font-size: 12px; font-weight: normal;}
.re-grid-item-content .re-num .fire{ font-size: 14px;}
.re-grid-item-content .re-num .divline{ padding: 0 6px; font-size: 16px; color: #999;}
.re-grid-item-content .ico{ width: 16px; height: 16px; position: absolute; right: 10px; bottom: 20px;}
.re-grid-item-content .ico img{ width: 100%; height: 100%;}

/* 设备概览 */
.ui-item-grid{ position: relative; display: flex; flex-wrap: wrap;}
.ui-grid-item{ width: 33.33%; position: relative; text-align: center; padding: 18px 0;}
.ui-grid-item:before{ content: ' '; position: absolute; left:0; bottom:0; right:0; pointer-events: none; box-sizing: border-box; border-bottom: 1px solid #e6e6e6; -webkit-transform: scaleY(.5); transform: scaleY(.5); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%;}
.ui-grid-item:after{ content: ' '; position: absolute; right:0; top:0; bottom:0; pointer-events: none; box-sizing: border-box; border-right: 1px solid #e6e6e6; -webkit-transform: scaleX(.5); transform: scaleX(.5); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%;}
.ui-grid-item:nth-child(3n):after{ display: none;}
.ui-grid-item .ui-pic{ width: 44px; height: 44px; border-radius: 999rem; margin: 0 auto; display: flex; align-items: center; justify-content: center;}
.ui-grid-item .ui-pic img{ width: 100%; height: 100%;}
.ui-grid-item .ui-item-title { color: #666; font-size: 12px; margin-top: 9px;}
.ui-grid-item .ui-item-num{ font-size:12px; color: #222; margin-top: 12px;}
.ui-grid-item .ui-item-num span{ font-size: 18px; font-weight: bold;}
.weather-info{ position: relative; padding: 20px 15px; }
.weather-data{display: flex; align-items: flex-end;} 
.weather-data .weather-temper{ font-size: 64px; color: #222; line-height: 62px;}
.weather-data .weather-cell{ margin-left: 10px;}
.weather-data .weather-cell .pull{ font-size: 14px; color: #333; line-height: 24px;}
.weather-data .weather-cell .pull span { margin-right: 8px;}
.weather-mind{ position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}
.weather-mind img{ height: 80px;}
.expire-info{ display: flex;}
.expire-info .expire-item{ position: relative; padding: 20px 15px; display: flex; align-items: center; flex: 1;}
.expire-info .expire-item .expire-icon{ width: 40px; height: 40px; margin-right: 20px; border-radius: 999rem;}
.expire-info .expire-item .expire-icon img{ width: 40px; height: 40px;}
.expire-info .expire-item .expire-cell{ flex: 1;}
.expire-info .expire-item:after{ content: ' '; position: absolute; pointer-events: none; box-sizing: border-box; left: 15px; right: 15px; bottom: 0; border-bottom: 1px solid #e6e6e6; -webkit-transform: scaleY(.5); transform: scaleY(.5); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%;}
.expire-info .expire-item:last-child:after{ display: none;}
.expire-item .title{ font-size: 16px; font-weight: bold; color: #222; display: flex; align-items: flex-end; justify-content: space-between;}
.expire-item .title span{ font-size: 11px; color: #666; font-weight: normal;}
.expire-item .sir{ font-size: 12px; color: #999; line-height: 20px; }
.expire-item .ranking-pro{ display: flex; align-items: center;}
.expire-item .ranking-pro .percentage{ font-size: 11px; color: #222; width:70px; text-align: right;}
.expire-item .ranking-progress{ flex: 1; height: 8px; border-radius: 999rem; background:#f2f2f2; margin: 15px 0 10px 0;}
.expire-item .ranking-progress .progress-line{ height: 8px; border-radius: 999rem; background:#0099FF;}
.device-box{ position: relative; padding: 20px;}
.device-title{ font-size:12px; color:#666;position: relative; z-index: 2; text-align: center;}
.device-chart{ position: relative; text-align: center;}
.device-chart img{ width: 95%;}
.electric-census{ padding: 20px 15px;}
.electric-all p{ font-size: 14px; color: #333; }
.electric-all .num{ font-size: 32px; color: #1AAD19; line-height: 40px; margin: 10px 0 15px 0;}
.electric-tag{ display: flex; align-items: center;}
.electric-tag .label{ position: relative; font-size: 14px; color: #333; padding: 0 20px; line-height: 20px;}
.electric-tag .label:first-child{ padding-left: 0;}
.electric-tag .label span{ color: #1AAD19;}
.electric-tag .label:after{ content: ''; position: absolute; right: 0; top: 0; bottom: 0; border-right: 1px solid #e6e6e6; -webkit-transform: scaleX(.5); transform: scaleX(.5); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%;}
.electric-tag .label:last-child:after{ display: none;}
.in-cell-tabs{ position: absolute; right: 0; top: 0; display: flex; align-items: center; z-index: 2;}
.in-cell-tabs .tab{ position: relative; font-weight: normal; font-size: 13px; color: #666; padding: 0 20px;}
.in-cell-tabs .tab.active{ font-weight: bold; color: #1AAD19;}
.in-cell-tabs .tab.active:after{ content: ''; position: absolute; height: 5px; background: rgba(26,173,25,.1); width: 20px; left: 50%; bottom: 13px; transform: translateX(-50%);}
.botany-box{ display: flex; align-items: center; padding: 20px 15px;}
.botany-pic{ width: 60px; height: 60px; border-radius: 999rem; background: #f2f2f2; margin-right: 15px;}
.botany-pic img{ width: 100%; height: 100%; border-radius: 999rem;}
.botany-cell{ flex: 1;}
.botany-cell .title{ font-size: 16px; color: #222; line-height: 28px;}
.botany-cell p{ font-size: 12px; color: #999; margin-top:5px}

/* 设备详情 */
.card{ position: relative; padding: 0 15px; margin-bottom: 24px;}
.card .card-header{ display: flex; align-items: center; margin-bottom: 12px; padding: 0 5px;}
.card .card-header .title{ font-size: 18px;font-weight: 600; color: #222222; line-height: 25px;}
.card .card-header .right{ margin-left: auto;font-size: 12px; color: #727D8F; }
.card .card-header .right .refreshBtn{ display: flex; align-items: center; font-size: 12px; color: #727D8F; line-height: 18px;}
.card .card-header .right .refreshBtn img{ width: 11px; margin-left: 3px;}
.card .card-content{ position: relative;background: #FFFFFF;box-shadow: 0px 8px 12px 0px rgba(33, 67, 124, 0.05); border-radius: 16px;}
.device-flex{ position: relative; display: flex; flex-wrap: wrap; padding: 16px 14px;}
.device-flex .item{ width: 33.33%; text-align: center; padding: 4px 4px; box-sizing: border-box;}
.device-flex .item .item-card{ position: relative;height: 90px;background: #F0F6FF;border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.device-flex .item .icon{ width: 18px; height: 18px; margin: 0 auto;}
.device-flex .item .icon img{ width: 100%; height: 100%; display: block;}
.device-flex .item .title{font-size: 12px;color: #727D8F;line-height: 16px; margin-top: 8px;}
.device-flex .item .number{font-size: 18px;font-weight: 600; color: #333333;line-height: 20px; margin-top: 5px;}
.monitor-box{ position: relative; padding: 20px 15px;}
.monitor-box video{ width: 100%; background: #000; height: 177px;}
.monitor-action{ position: relative; display: flex; align-items: center; padding-top: 18px;}
.monitor-action .monitor-left{width: 107px; height: 107px; border-radius: 999rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #D6F4E0 0%, #FFFFFF 100%); box-shadow: 0px 2px 12px 0px rgba(33, 67, 124, 0.16); margin: 0 15px 0 25px;}
.monitor-action .monitor-left .monitor-left-box{ position: relative; width: 100px; height: 100px; background: #22BA54; border-radius: 999rem; display: flex; align-items: center; justify-content: center;}
.monitor-action .monitor-left .btn-center{ width: 46px; height: 46px; border-radius: 999rem; font-size: 12px; color: #333; font-weight: 600; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #FFFFFF 0%, #D0F3DC 100%); box-shadow: 0px 2px 7px 0px rgba(15, 157, 62, 0.2);}
.monitor-action .monitor-left .btn-sm{ width: 27px; height: 27px; position: absolute;}

.monitor-action .monitor-right{ display: flex; align-items: center;}
.monitor-action .monitor-right .btn-blue{width: 50px; height: 50px; margin-left: 15px; background: #3179F5; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 8px; border: 3px solid rgba(255, 255, 255, 0.85);}
.monitor-action .monitor-right .btn-blue img{ width: 13px; height: 13px;}
.monitor-action .monitor-right .btn-blue label{ font-size: 14px; color: #fff; line-height: 20px; margin-top: 2px;}
.card-flex{ position: relative; display: flex; flex-wrap: wrap; padding: 10px 5px;}
.card-flex .item{ width: 25%; text-align: center; padding: 10px 0;}
.card-flex .item img{ width: 44px; display: block; margin: 0 auto;}
.card-flex .item .text{font-weight: 400; color: #333333; line-height: 17px;font-size: 12px; margin-top: 7px;}
.equ-list .equ-box{ position: relative; padding: 18px 15px;}
.equ-list .equ-box:after{ content: ''; position: absolute; left: 15px; right: 15px; bottom: 0; border-bottom: 1px solid rgba(114, 125, 143, 0.15); transform: scaleY(0.5);}
.equ-list .equ-box:last-child:after{ display: none;}
.equ-list .equ-box .equ-header{ display: flex; align-items: center;}
.equ-list .equ-box .equ-header .title{font-size: 16px;font-weight: 600; color: #222222;line-height: 22px; margin-right: 6px;}
.equ-list .equ-box .equ-header .label{font-weight: 600; color: #1DC455; line-height: 15px;font-size: 11px; padding: 0 5px;border-radius: 4px;height: 16px; line-height: 16px;}
.equ-list .equ-box .equ-header .label.open{ color: #1DC455; background: rgba(29, 196, 85, 0.15);}
.equ-list .equ-box .equ-header .label.close{ color: #8F8F8F; background: rgba(143, 143, 143, 0.15);}
.equ-list .equ-box .equ-header .label.off{ color: #FF6026; background: rgba(255, 96, 38, 0.15);}
.equ-list .equ-box .equ-header .shrink-btn{ margin-left: auto; display: flex; align-items: center; font-size: 12px; color: #999999;}
.equ-list .equ-box .equ-header .shrink-btn label{ margin-right: 4px;}

.equ-list .equ-box .equ-header .shrink-btn.active{ color: #3179F5;}

.equ-list .equ-box .desc{ margin-top: 10px; display: flex; font-size: 13px;}
.equ-list .equ-box .desc .text{position: relative;  padding: 0 10px; line-height: 19px;}
.equ-list .equ-box .desc .text.green{color: #3179F5; font-weight: bold; white-space: nowrap;}
.equ-list .equ-box .desc .text:first-child{ padding-left: 0;}
.equ-list .equ-box .desc .text:after{content: ''; position: absolute; right: 0; border-right: 0px solid #dedede; top:0; height: 16px; transform: scaleX(0.5);}
.equ-list .equ-box .equ-footer{ margin-top: 14px; display: flex; align-items: center; justify-content: flex-end;}
.equ-list .equ-box .equ-footer button { position: relative; margin-left: 10px; height: 30px; border-radius: 15px; border-radius: 999rem;}
/*.equ-list .equ-box .equ-footer button[type=default]{background: transparent; border: none; color: #727D8F;}*/
/*.equ-list .equ-box .equ-footer button[type=default]:after{position: absolute; box-sizing: border-box; border-radius: 999rem; content: " "; pointer-events: none; top: -50%; right: -50%; bottom: -50%; left: -50%;border: 1px solid rgba(114, 125, 143, 0.5); transform: scale(.5);}*/
/*.equ-list .equ-box .equ-footer button[type=primary]{ background: #3179F5; color: #fff; border: none;}*/
.equ-more{ height: 40px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #727D8F; background: rgba(114, 125, 143, 0.06); border-radius: 0 0 16px 16px;}
.equ-more .text{ margin-right: 3px;}
.equ-more img{ width: 11px; height: 11px;}
.equ-more.active img{ transform: rotate(180deg);}
.real-card{position: relative; background: #FFFFFF; margin: 0 15px 24px; padding: 12px 15px; display: flex; align-items: center; box-shadow: 0px 8px 12px 0px rgb(33 67 124 / 5%); border-radius: 16px;}
.real-card img{ width: 16px; height: 16px; margin-right: 8px;}
.real-card .real-text{ font-size: 13px; color: #333; font-weight: 600;}
.real-card .real-text label{ color: #FF6026;}
.real-card .device-action{ margin-left: auto;}
.real-card .device-action button[type=primary] {width: 50px; height: 24px; font-weight: 500; font-size: 13px; background: #3179F5; border-radius: 6px; border: none; color: #fff;}
/*.device-info{ position: relative; background: #3179F5 url(../images/line-bg.png) center top no-repeat; background-size: cover; overflow: hidden; height: 85px; margin-bottom: -10px; box-shadow: 0px 8px 12px 0px rgba(33, 67, 124, 0.15); border-radius: 16px;}*/

.device-info .device-status{ font-size: 13px; text-align: center; color: #fff; opacity: .8; padding-top: 20px;}
.device-info .device-show{ display: flex; align-items: flex-start; justify-content: center; font-size: 17px; line-height: 17px; font-weight: 600; color: #fff; margin-top: 11px;}
.device-info .device-show i{width: 8px; height: 8px; background: #FF875C; border-radius: 999rem; margin-top: -3px; margin-left: 3px;}
.weather-box{ position: relative;background: #FFFFFF; margin: 0 15px; margin-top: 5px; margin-bottom: 24px; padding: 19px 15px; box-shadow: 0px 8px 12px 0px rgba(33, 67, 124, 0.05); border-radius: 16px;}
.weather-place .address{ display: flex; align-items: center;}
.weather-place .address img{ width: 16px; height: 16px; margin-right: 5px;}
.weather-place .address .name{ font-size: 16px; color: #333333; font-weight: 600;}
.weather-place .address .date{ font-size: 12px; color: #727D8F; margin-left: auto;}
.weather-center{ position: relative; display: flex; align-items: center; margin-top: 17px; color: #333;}
.weather-current{ display: flex; align-items: center;}
.weather-current .number { font-size: 32px; color: #333333; font-weight: 500; line-height: 32px;}
.weather-current .label{ font-size: 15px;color: #333333; }
.weather-other{ position: relative; display: flex; align-items: center; font-size: 13px; margin-left: 15px;}
.weather-other span{ padding: 0 6px;}


/*新设备详情*/
.device-base-chart{ position: relative; height: 220px; padding: 20px 0; display: flex; align-items: center; justify-content: center;}
.device-setBtn { position: absolute; right: 18px; top: 18px; width: 18px; height: 18px; z-index: 2;}
.device-setBtn img{ width: 100%; height: 100%;}
.device-base-chart-center { position: relative; width:100%; height: 100%;margin: 0 auto; display: flex; align-items: center; justify-content: center;}
.chart-xz-bg{ position:absolute;left: 50%; margin-left: -110px; top: 0;width: 220px; height: 220px; background: url("../images/zheng.png") center center no-repeat; background-size: contain;animation: turn 10s linear infinite;}

.chart-circle{ width: 155px; height: 155px; position: relative; z-index: 2;}
.device-base-flex{ display: flex; padding: 0 10px 20px 10px;}
.device-base-flex .base-item{ flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.device-base-flex .base-item .img{ width: 57px; height: 57px; border-radius: 999rem; background: #F2F4F5; display: flex; align-items: center; justify-content: center;}
.device-base-flex .base-item .img img{ width: 50%; height: 50%;}
.device-base-flex .base-item .name{ font-size: 14px; color: #333; font-weight: 600; margin-top: 10px;}
.auxiliary-list { display: flex; flex-wrap: wrap;}
.auxiliary-list .item{ width: 33.33%; box-sizing: border-box; padding: 5px;}
.auxiliary-list .item-card{ background: #fff; padding: 15px; box-shadow: 0px 8px 12px 0px rgba(33, 67, 124, 0.05); border-radius: 16px;}
.auxiliary-list .item-card .img{ width: 44px; height: 44px;margin: 0 auto; display: flex; align-items: center; justify-content: center; background: #3179F5; border-radius: 8px;border: 3px solid rgba(255, 255, 255, 0.85);}
.auxiliary-list .item-card .img img{ width: 60%; height: 60%;}
.auxiliary-list .item-card .name{ font-size: 14px; font-weight: 600; color: #333; margin-top: 12px; text-align: center;}
.auxiliary-list .item-card .other{ display: flex; align-items: center; justify-content: space-between; margin-top: 20px;}
.auxiliary-list .item-card .other .state{ font-size: 12px; color: #999;}

/*自己加的*/
.chart-xz-bg.stop{ position:absolute;left: 50%; margin-left: -110px; top: 0;width: 220px; height: 220px; background: url("../images/stopquan.png") center center no-repeat; background-size: contain;animation:none}

.spinner {width: 24px;height: 24px;background-color: #26B325; border-radius: 4px;-webkit-animation: rotateplane 1.2s infinite ease-in-out;animation: rotateplane 1.2s infinite ease-in-out;}
.rotate{ width: 24px; height: 24px;  background-size: contain;}
/*.rotate.one{animation:fadenum1 1.2s infinite;}*/
/*.rotate.two{animation:fadenum2 1.2s infinite;}*/
@keyframes fadenum1{
    100%{transform:rotate(360deg);}
}
@keyframes fadenum2{
    100%{transform:rotate(-360deg);}
}
@-webkit-keyframes rotateplane {
    0% { -webkit-transform: perspective(120px) }
    50% { -webkit-transform: perspective(120px) rotateY(180deg) }
    100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes rotateplane {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    } 50% {
          transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
          -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
      } 100% {
            transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
            -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        }
}

@keyframes turn {
    0% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(72deg);
    }

    40% {
        transform: rotate(144deg);
    }

    60% {
        transform: rotate(216deg);
    }

    80% {
        transform: rotate(288deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
@keyframes turn2 {
    0% {
        transform: rotate(360deg);
    }

    20% {
        transform: rotate(288deg);
    }

    40% {
        transform: rotate(216deg);
    }

    60% {
        transform: rotate(144deg);
    }

    80% {
        transform: rotate(72deg);
    }

    100% {
        transform: rotate(0deg);
    }
}