czapp/pages/amap/amap.css

@font-face {font-family: "iconfont";
    src: url('iconfont.eot?t=1553842839034'); /* IE9 */
    src: url('iconfont.eot?t=1553842839034#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=1553842839034') format('woff'),
    url('iconfont.ttf?t=1553842839034') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('iconfont.svg?t=1553842839034#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 {
    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: 1.4rem;
    color: #fdfdfd;
}
#electric-fence p{
    font-size: 1.4rem;
    color: #fdfdfd;
}
#car-lock p{
    color: #fdfdfd;
}
.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: 2rem;
}
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;
}
.insurance-img{
    width: 25%;
    margin-left: 10px;
    z-index: 555;
}


/* 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;
}