park/public/web/static/css/cldt.css

body {
    height: 100vh;
    overflow: hidden;
    font-family: "Roboto", "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", BlinkMacSystemFont, -apple-system, "Segoe UI", "Microsoft Yahei", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-weight: 400;
    margin: 0px;
}

ul {
    list-style: none;
}

.header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 3.1rem;
    line-height: 3.1rem;
    z-index: 3;
    background: #000;
    background: linear-gradient(180deg, #0e1b52, #12377c);
    color: #fff;
    padding: 2px 0px;
}

.header .left {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header > .left > .logo {
    width: 16.13rem;
    height: 3.1rem;
    background: url('/assets/img/logo_w.png');
    background-size: 100%;
    background-repeat: no-repeat;
    margin-right: 4.5rem;
    cursor: pointer;
    position: relative;
    top: .1rem;
}

.header > .left > .logo > span {
    font-size: 1.48rem;
    font-weight: 700;
    display: inline-block;
    line-height: 3.1rem;
    margin-left: 3rem;
}

.header > .left .title {
    display: flex;
    align-items: center;
}

.header > .left .title > img {
    margin: 0 .1rem;
    cursor: pointer;
}

.header > .right > div {
    display: flex;
    align-items: center;
}

.header > .right > div > .view {
    cursor: pointer;
    color: rgb(255, 255, 255);
}

.header > .right > div > span {
    display: inline-block;
    padding: .2rem;
}

.sidebarcolor {
    color: rgb(250, 205, 137);
}

.row {
    /*height: calc(100vh - 3.6rem);*/
    height: 100vh;
    overflow: hidden;
    color: #fff;
}

.row > .left {
    position: absolute;
    top: 3.1rem;
    left: 0;
    z-index: 2;
    background: linear-gradient(90deg, #0e1b52, rgba(14, 27, 82, .2) 50%, rgba(14, 27, 82, 0));

}

.row > div {
    height: 100vh;
    width: 24%;
}

.row > div > div {
    height: 30%;
    width: 100%;
}

.row > .left > .left_1 {

}

.row > .left > div {
    height: 30%;
    width: 100%;
    border: .1rem solid rgba(126, 206, 244, .1);
    margin: .1rem 0;
    text-align: center;
}




.right > .r_i {

}
.right > .r_i>.title>span:nth-child(2) {
    font-size: .9rem;
    color: hsla(0,0%,100%,.5)
}
.right > .r_i_2,.right > .r_i_1 {
    height: 30%;
    border: 1px solid rgba(126, 206, 244, .1);
    margin: .1rem 0;
}


.right>.r_i>.title{
    width: 100%;
    background: linear-gradient(90deg, #3a6aa5, rgba(58, 106, 165, 0) 100%, hsla(0, 0%, 100%, 0) 0);
    line-height: 1.32rem;
    font-size: 1rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    box-sizing: border-box;
    padding: .2rem;
    border-left: 3px solid #7ecef4;

    margin: 0;


}



.right>.r_i>.title>span:nth-child(2)>span{
    font-size: .7rem;
    color: rgb(250, 205, 137);
    margin-right: 0.4rem;
}

.row > div {
    height: 100vh;
    width: 24%;
}


.row > .right {
    position: absolute;
    top: 3.1rem;
    right: 0;
    z-index: 2;
    background: linear-gradient(-90deg, #0e1b52, rgba(14, 27, 82, .2));
}

.row > .right > .right_1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /*grid-gap: .1rem;*/
    margin-top: .3rem;
}

.row > .right > .right_1 > div {
    display: inline-block;
    /*width: 13rem;*/
    height: 7rem;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM4AAABgCAYAAABVCU1aAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUxMEE3OTg1OUNDNDExRUI4NTY2RUQzNzE1MDEyODQwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUxMEE3OTg2OUNDNDExRUI4NTY2RUQzNzE1MDEyODQwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTEwQTc5ODM5Q0M0MTFFQjg1NjZFRDM3MTUwMTI4NDAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTEwQTc5ODQ5Q0M0MTFFQjg1NjZFRDM3MTUwMTI4NDAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7las80AAANtklEQVR42uyd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
    background-repeat: no-repeat;
    text-align: center;
    background-size: contain;
}

.row > .right > .right_1 > div > p:first-child {
    margin-top: 1rem;
    text-align: center;
}

.row > .right > .right_2 > div > p:nth-child(2) {
    margin-top: 1rem;
    text-align: center;
}

.row > .right > .right_2 {
    height: 30%;
    border: 1px solid rgba(126, 206, 244, .1);
    margin: .1rem 0;
}

.row > .right > .right_3 {
    height: 60%;
    border: 1px solid rgba(126, 206, 244, .1);
    margin: .1rem 0;
}

.row > .right > .rt_item {
    width: 100%;
}

.row > .right > .right_2 > .title, .row > .right > .right_3 > .title {
    width: 100%;
    background: linear-gradient(90deg, #3a6aa5, rgba(58, 106, 165, 0) 100%, hsla(0, 0%, 100%, 0) 0);
    line-height: 1.32rem;
    font-size: 1rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    box-sizing: border-box;
    padding: .2rem;
    border-left: 3px solid #7ecef4;

    margin-top: .5rem;
}




.row > .right > .right_3 > .title > span:nth-child(2) {
    font-size: .8rem;
}

.row > .right > .right_3 > div > ul {
    width: 90%;
    height: 2.19rem;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAAkCAYAAACnk2wbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjI0NUQ5NTA1OUNDOTExRUI4N0E4RjA4RDFBNjk1Q0YzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjI0NUQ5NTA2OUNDOTExRUI4N0E4RjA4RDFBNjk1Q0YzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjQ1RDk1MDM5Q0M5MTFFQjg3QThGMDhEMUE2OTVDRjMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjQ1RDk1MDQ5Q0M5MTFFQjg3QThGMDhEMUE2OTVDRjMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz51X5rBAAAAs0lEQVR42uzZMQqAMAxA0SgeqefzhMHTuOviGJF2qvDeUuiY5ROy7Md5Ra0FAERk9bmJBQAfqkbkai4AjBAQAAQEAAEB4AcBcUAHoFezgQAwvIEAgIAAICAACAgAAgIAAgKAgAAgIAAICAACAgACAoCAACAgAAgIAAICAAICgIAAICAACAgAAgIAAgKAgAAwR0DSGADolDYQAIY3EAAQEAAEBICJbc9bHdKb8QDw0oi4BRgAvlwJixEgBLQAAAAASUVORK5CYII=);
    background-size: 100%;
    margin: .1rem auto;
    padding: 0 .12rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.row > .right > .right_3 > div li:first-child {
    /*width: 18%;*/
}

.row > .right > .right_3 > div > ul > li {
    display: inline-block;
    font-size: .8rem;
    line-height: 2.19rem;
    margin: 0 .3rem;
}


.seamless-scroll-container {
    width: 100%;
    height: 400px;
    overflow: hidden;
    /*border: 1px solid #ddd;*/
    margin: 20px auto;
    position: relative;
}

.scroll-wrapper {
    position: absolute;
    width: 100%;
}

.list-item {

    display: flex;
    align-items: center;
}

.list-item .li_ti {
    width: 90%;
    height: 2.19rem;
    margin: .1rem auto;
    padding: 0 .12rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}






.dv-scroll-board .header{
    width: auto;
    height: auto;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAAkCAYAAACnk2wbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjI0NUQ5NTA1OUNDOTExRUI4N0E4RjA4RDFBNjk1Q0YzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjI0NUQ5NTA2OUNDOTExRUI4N0E4RjA4RDFBNjk1Q0YzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjQ1RDk1MDM5Q0M5MTFFQjg3QThGMDhEMUE2OTVDRjMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjQ1RDk1MDQ5Q0M5MTFFQjg3QThGMDhEMUE2OTVDRjMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz51X5rBAAAAs0lEQVR42uzZMQqAMAxA0SgeqefzhMHTuOviGJF2qvDeUuiY5ROy7Md5Ra0FAERk9bmJBQAfqkbkai4AjBAQAAQEAAEB4AcBcUAHoFezgQAwvIEAgIAAICAACAgAAgIAAgKAgAAgIAAICAACAgACAoCAACAgAAgIAAICAAICgIAAICAACAgAAgIAAgKAgAAwR0DSGADolDYQAIY3EAAQEAAEBICJbc9bHdKb8QDw0oi4BRgAvlwJixEgBLQAAAAASUVORK5CYII=);
    background-size: 100%;
    margin: .5rem auto;
    background-color: rgba(0,186,255,0) !important;
}





.custom-info-window {
    color: black;
}
.zjinfo{
    color: white;
    background: rgba(13,21,61,.7);
    border: 1px solid rgba(126,206,244,.8);
    padding: 10px 20px;
    width: 300px;
}
.carinfo{
    color: white;
    background: rgba(13,21,61,.7);
    border: 1px solid rgba(126,206,244,.8);
    padding: 10px 20px;
    width: 300px;
}
.carinfo .btn_map button{
    margin: 6px auto;
    background: rgba(126, 206, 244, .4);
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    padding: 5px 0px;
}
.carinfo div{
    margin: 10px 0px;
}
/*.custom-info-window .info-content{*/
/*   width: 200px;*/
/*}*/
/*.custom-info-window .info-content video{*/
/*   width: 100%;*/
/*}*/
.amap-info-content {
    background: #ffffff24;
}

.custom-info-window > .info-content > p > b {
    width: 30px;
    display: inline;
}

#myVideo::-webkit-media-controls {
    display: none; /* Chrome, Safari, Opera */
}

#myVideo::-moz-media-controls {
    display: none; /* Firefox */
}

#myVideo::-ms-media-controls {
    display: none; /* IE */
}


.row > .main {
    position: absolute;
    width: 100vw;
    top: 3.1rem;
    left: 0;
    z-index: 1;
    height: 100%;
    overflow: hidden;

}

#container {
    height: 100%;

}



.border-box-content {
    color: rgb(66,185,131);
    font-size: 15px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}




.lengend{
    width: 280px;
    height: auto;
    background-color: rgba(0,0,0,.4);
    padding: 10px;
    border-radius: 5px;
    padding-bottom: 5px;
    position: fixed;
    bottom: 52px;
    /*right: 30%;*/
    z-index: 99;
    transition: right .3s;
}
.l-show{
    right: 26%;
}
.l-item{
    width: 100%;
    height: auto;
}
.l-head{
    width: 100%;
    height: auto;
}
.f-item{
    width: auto;
    height: 25px;
    margin-bottom: 5px;
}
input[type=checkbox]{
    display: none;
}
.f-item label{
    width: auto;
    display: inline-block;
    height: 25px;
    line-height: 25px;
    color: #fff;
    position: relative;
    padding-left: 20px;
    cursor: pointer;
}
.l-cont{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.l-cont .f-item{
    width: 50%;
}
.f-item label:before{
    position: absolute;
    left: 0;
    display: inline-block;
    content: "";
    width: 14px;
    height: 14px;
    top: 5px;
    border: 1px solid #BFBFBF;
    border-radius: 50%;
}
.f-item input:checked+label:before{
    background-image: url('/web/static/icon/check.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    border-color: #4679ff;
}

.f-item label span{
    font-size: 14px;
    display: inline-block;
    height: 25px;
    line-height: 25px;
}
.f-item label i{
    display: inline-block;
    width: 22px;
    height: 14px;
    margin:  0 3px;
}
.f-item label img{
    width: 22px;
    height: 22px;
    vertical-align: sub;
}
.app-vis {
    width: 32px;
    height: 32px;
    margin: 10px 0;
    float: right;
    cursor: pointer;
    position: fixed;
    bottom: 40px;
    right: 24%;
    z-index: 1;
}
.app-vis >#vis{
    display: none;
}
.app-vis label {
    display: inline-block;
    width: 100%;
    height: 100%;
    background-image: url('/caicai/icon/icon_tili_p@2x.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.app-vis input:checked+label {
    background-image: url('/caicai/icon/icon_tili_n@2x.png');
}
.car-search{
    width: 300px;
    height: 40px;
    position: fixed;
    left: 30%;
    top: 4.36rem;
    z-index: 99;
    background: rgba(13, 21, 61, .3);
    border-radius: 5px;
    display: flex;
    border: 1px solid rgba(126, 206, 244, .4);
}
.car-search input{
    flex-grow: 1;
    border:none;
    background-color: transparent;
    padding-left: 10px;
    outline: none;
    color: #ffffff;
}
.car-search i{
    color: #fff;
    position: absolute;
    right: 70px;
    display: inline-block;
    height: 20px;
    width: 20px;
    background-color: #999;
    border-radius: 50%;
    top: 10px;
    background-image: url('/web/static/icon/icon_close@2x.png');
    text-align: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
    cursor: pointer;

}
.car-search span{
    display: inline-block;
    width: 60px;
    height: 100%;
    color: #ccc;
    line-height: 40px;
    text-align: center;
    border-left: 1px solid rgba(126, 206, 244, .4);
    cursor: pointer;
}