peidog-app/pages/amap/amap.css

@font-face {font-family: "iconfont";
    src: url('iconfont.eot?t=1559706610269'); /* IE9 */
    src: url('iconfont.eot?t=1559706610269#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=1559706610269') format('woff'),
    url('iconfont.ttf?t=1559706610269') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('iconfont.svg?t=1559706610269#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-yonghuguanli:before {
    content: "\e603";
  }
  
  .icon-maozhao:before {
    content: "\e605";
  }
  
  .icon-yuyin:before {
    content: "\e629";
  }
  
  .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-icon-anchor:before {
    content: "\e60a";
  }
  
  .icon-qiehuan:before {
    content: "\e604";
  }
  
  .icon-shipin_shangyigewenjian:before {
    content: "\e627";
  }
  
  .icon-shipin_xiayigewenjian:before {
    content: "\e628";
  }
  
  .icon-sheding:before {
    content: "\e69f";
  }
  
  .icon-qiehuan1:before {
    content: "\e626";
  }
  
  .icon-jiesuo:before {
    content: "\e65a";
  }
  
  .icon-guijichaxun:before {
    content: "\e618";
  }
  
  .icon-headset:before {
    content: "\e606";
  }
  
  .icon-dianziweilan:before {
    content: "\e61f";
  }
  
  .icon-zhongzhi:before {
    content: "\e62f";
  }
  
  .icon-dingweidian--:before {
    content: "\e607";
  }
  
  .icon-beisu:before {
    content: "\e657";
  }
  
  .icon-beisu1:before {
    content: "\e658";
  }
  
  .icon-beisu2:before {
    content: "\e65b";
  }
  
  .icon-yimiaojiezhong:before {
    content: "\e6ab";
  }
  
  

.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{
    padding: 8px;
    background: rgba(20, 20, 20, 0.5);
    width: 100%;
    height: 32px;
    box-shadow: 1px 2px 8px #c3bfbf;
    z-index: 555;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    overflow: hidden;
}
.strategy-roll{
    height: 18px;
    overflow: hidden;
    width: 60%;
}
.strategy-roll ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
.strategy-roll ul li{
    height: 18px;
    line-height: 18px;
    font-size: 14px;
    color: yellow;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

}

#func-panel{
    z-index: 555;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}
.func-panel-bg{
    background: #ff944d;
    z-index: 555;
    margin: 0 10px;
    width: 30%;
}
#route-play{
    display: flex;
    align-items: center;
    flex-direction: row;
    /* justify-content: space-between; */
    justify-content: center;
    height: 30px;
    /* width: 25%; */
    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;
    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;
    color: gray
}
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;
}
#gps-battery{
    width: 20%;
    font-size: 0.7em;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #fff;
}

.panel-right-content{
    width: 130px;
    font-size: 1em;
}
.insurance-img{
    display: inline-flex;
    white-space: nowrap;
    margin-left: 10px;
    z-index: 555;
    margin-bottom: 10px;
    width: 140px;
    justify-content: center;
    align-items: center;
}
#on-off-online{
    font-size: 1em;
}
.left-logo{
    background: rgba(255, 255, 255);
    /* display: inline-flex; */
    border: 2px solid #ff944d;
    border-radius: 50%;
    width: 2.4em;
    height: 2.4em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.logo-panel{
    width: 70px;
    height: 20px;
    background: #ff944d;
    margin-left: 5px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}


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