czapp/pages/amap/amap.css

@font-face {font-family: "iconfont";
    src: url('iconfont.eot?t=1562829682889'); /* IE9 */
    src: url('iconfont.eot?t=1562829682889#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
    url('iconfont.woff?t=1562829682889') format('woff'),
    url('iconfont.ttf?t=1562829682889') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('iconfont.svg?t=1562829682889#iconfont') format('svg'); /* iOS 4.1- */
  }
  
  
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .icon-reset:before {
    content: "\e62f";
  }

  .icon-bofang:before {
    content: "\e647";
  }
  
  .icon-suo:before {
    content: "\e609";
  }
  
  .icon-yonghuzuguanli:before {
    content: "\e638";
  }
  
  .icon-lukuang:before {
    content: "\ea3f";
  }
  
  .icon-ziyuan:before {
    content: "\e602";
  }
  
  .icon-lukuang1:before {
    content: "\ea8b";
  }
  
  .icon-zanting:before {
    content: "\e68a";
  }
  
  .icon-qiehuan:before {
    content: "\e604";
  }
  
  .icon-last:before {
    content: "\e627";
  }
  
  .icon-next:before {
    content: "\e628";
  }
  
  .icon-sheding:before {
    content: "\e69f";
  }
  
  .icon-qiehuan1:before {
    content: "\e626";
  }
  
  .icon-jiesuo:before {
    content: "\e65a";
  }
  
  .icon-guijichaxun:before {
    content: "\e618";
  }
  
  .icon-dianziweilan:before {
    content: "\e61f";
  }
  
  .icon-beisu4:before {
    content: "\e657";
  }
  
  .icon-beisu2:before {
    content: "\e658";
  }
  
  .icon-beisu1:before {
    content: "\e65b";
  }
  .icon-daohang:before {
    content: "\e612";
  }
  
  

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }


  
  /* font-rem*/

  html {font-size: 62.5%!important; /* 10÷16=62.5% */}
  @media only screen and (min-width: 481px){
      html {
          font-size: 94%!important; /* 15.04÷16=94% */
      }
  }
  @media only screen and (min-width: 561px){
      html {
          font-size: 109%!important; /* 17.44÷16=109% */
      }
  }
  @media only screen and (min-width: 641px){
      html {
          font-size: 125%!important; /* 20÷16=125% */
      }
  
    }


/* map content style */
.ract{
    padding: 5px;
    position: position;
    min-width: 120px;
    min-height: 40px;
    background-color: #065eaf;
    border-radius: 10px;   
}

 .LeftBubble:after{
    content:"";
    position:absolute;
    bottom:0;
    left:50%; 
    border:17px solid transparent;
    border-top-color:#065eaf;
    border-bottom:0; 
    margin:0 0 -17px -34px;
    border-left:0; 
}

.ract span{
    color: #fff;
    font-size: 12px;
}


  /* page content */
.lr-amap-page {
    position:relative;
    width:100%;
    height:100%;
}
.lr-amap-contarner {
    position: relative;
    width: 100%;
    height: 100%;
}
#device-info-panel{
    bottom: 10px;
    border-radius: 5px;
    padding: 8px;
    background: #FDFDFD;
    width: 95%;
    height: 50px;
    box-shadow: 1px 2px 8px #c3bfbf;
    z-index: 555;
    margin-bottom: 10px;
    margin-left: 2.5%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}
#func-panel{
    z-index: 555;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.func-panel-bg{
    background: #09f;
    z-index: 555;
}
#route-play{
    display: flex;
    align-items: center;
    flex-direction: row;
    /* justify-content: space-between; */
    justify-content: center;
    height: 30px;
    width: 25%;
    margin-left:10px;
    border-radius: 8px;
}
#car-lock{
    display: flex;
    align-items: center;
    flex-direction: row;
    /* justify-content: space-between; */
    justify-content: center;
    height: 60px; 
    width: 30%;
    border-radius: 30px;
}
#electric-fence{
    display: flex;
    align-items: center;
    flex-direction: row;
    /* justify-content: space-between; */
    justify-content: center;
    height: 30px;
    width: 25%;
    margin-right:10px; 
    border-radius: 8px;
}
.map-panel{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.icon-circle-small{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #fdfdfd;
    margin-right: 5px;
}
.icon-circle-large{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background: #fdfdfd;
    margin-right: 5px;
}
.icon-circle-large,.icon-circle-small span{
    color: gray;
}
#route-play p{
    font-size: 0.8em;
    color: #fdfdfd;
}
#electric-fence p{
    font-size: 0.8em;
    color: #fdfdfd;
}
#car-lock p{
    color: #fdfdfd;
    font-size: 1.1em;
}
.top-right-panel{
    /* display: flex; */
    /* align-self: flex-end; */
    /* z-index: 555; */
    display: flex;
    flex-direction: row;
    /* flex: 1; */
    justify-content: flex-end;

}
#map-lelftright-func{
    width: 40px;
    background: #fdfdfd;
    height: 116px;
    padding: 10px;
    margin-top: 50px;
    margin-right: 10px;
    border-radius: 5px;
    box-shadow: 1px 2px 5px #c3bfbf;
    flex-direction: column;
}
#layer-change,#route-situation,#user-change{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}
hr{
    height: 1px;
    background: #e0dcdc;
    border: none;
}
#user-location{
    display: flex;
    /* align-self: flex-end; */
    z-index: 555;
    margin-right: 15px;
    justify-content: flex-end;
    width: 28px;
    height: 28px;
    align-self: flex-end;
    margin-bottom: 1em;
}
.big-circle{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 18px;
    height: 18px;
    background: #a5a5a5;
    border-radius: 50%;
}
.medium-circle{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
}
.small-circle{
    width: 10px;
    height: 10px;
    background: #a5a5a5;
    border-radius: 50%;
}
.base-circle{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 10px #a4a4a5;
}
.delimite-line{
    width: 1px;
    background: #e2e2e2;
    height: 24px;
}
#battery{
    color: red;
    margin-left: 5px;
    width: 50px;
}
.panel-right-content{
    width: 130px;
    font-size: 1em;
}
.insurance-img{
    width: 25%;
    margin-left: 10px;
    z-index: 555;
}
#on-off-online{
    font-size: 1em;
}


/* header */
.lr-workspace-header {
    padding:6px 40px;
}
.lr-workspace-header .my {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #fff;
}
    .lr-workspace-header .my .iconfont {
        font-size: 20px;
        font-weight: 100;
    }
.lr-workspace-header .searchBox {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #0C86D8;
}

    .lr-workspace-header .searchBox i {
        position: absolute;
        top: 8px;
        left: 10px;
        color: #fff;
        z-index: 1;
        font-size: 12px;
    }

    .lr-workspace-header .searchBox .search {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 3px;
        line-height: 30px;
        font-size: 14px;
        background-color: #3d9ee0;
        padding-left: 30px;
        color: #fff;
    }
/* .lr-workspace-header .alarm { */
    /* line-height: 1; */
    /* color: #0c86d8; */
    /* font-size:16px; */
/* } */

 .lr-workspace-header .chart {
    position: absolute;
    top: 10px;
    right: 50px;
    color: #fff;
}
.lr-workspace-header .chart .iconfont {
    font-size: 22px;
    font-weight: 100;
}

.lr-workspace-header .message {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
}
.lr-workspace-header .message .iconfont {
    font-size: 22px;
    font-weight: 100;
}