czapp/pages/amap/amap.css

@font-face {font-family: "iconfont";
    src: url('iconfont.eot?t=1552628575780'); /* IE9 */
    src: url('iconfont.eot?t=1552628575780#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=1552628575780') format('woff'),
    url('iconfont.ttf?t=1552628575780') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('iconfont.svg?t=1552628575780#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-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;
    width: 120px;
    height: 40px;
    background-color: #003567;
    border-radius: 10px;   
}

 .LeftBubble:after{
    content:"";
    position:absolute;
    bottom:0;
    left:50%; 
    border:17px solid transparent;
    border-top-color:#003567;
    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: 2em;
}
.big-circle{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 18px;
    height: 18px;
    background: #09f;
    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: #09f;
    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: 120px;
}

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