indexStyle.css

/* 全局 */
* {
    margin: 0px;
    padding: 0px;
}

.settings {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.agentBox {
    /* width: 500px; */
    margin-right: 10px;
    border: red 2px solid;
    padding: 5px;
}

#agentName {
    width: 80px;
    height: 80%;
}

#addCar {
    margin: 0 10px;
}

#delCar {
    margin-right: 10px;
}

.inputBox {
    margin-right: 10px;
    border: green 2px solid;
    padding: 5px;
}

.userInput {
    width: 50px;
    margin-right: 10px;
}

#userModeInput {
    display: inline-block;
}

#testModeInput {
    display: none;
}

#autotest {
    font-size: 18px;
}

#gmap {
    margin-left: 30px;
}

.btnBox {
    margin-right: 30px;
    border: blue 2px solid;
    padding: 5px;
}

.btnBox>input {
    margin-left: 10px;
}

.algBox {
    border: #d35400 2px solid;
    padding: 5px;
}

#alg {
    width: 130px;
    height: 29px;
    background: #F8EFE0;
}

.speedBox {
    border: purple 2px solid;
    padding: 5px;
}

/* 按钮样式 */
.btn1 {
    width: 80px;
    /* height: 50px; */
    background: none;
    border: 4px solid;
    color: #3498db;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    font-size: 16px;
    position: relative;
}

.btn1::before, .btn1::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 4px;
    background: white;
    transform: skewX(-50deg);
    transition: .2s linear;
}

.btn1::before {
    top: -4px;
    left: 10%;
}

.btn1::after {
    bottom: -4px;
    right: 10%;
}

.btn1:hover::before {
    left: 80%;
}

.btn1:hover::after {
    right: 80%;
}

/* 输入框 */
.input {
    width: 60px;
    outline-style: none;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 16px;
    font-family: "Microsoft soft";
}

.input:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

/* Label */
.label {
    font-weight: bold;
    height: 100%;
    line-height: 100%;
    font-size: 18px;
    color: #3B3B98;
}

/* Radio */
.radiobtn {
    width: 20px;
    height: 0px;
    background-color: #777;
    margin-right: 10px;
    border-radius: 50%;
    position: relative;
}

.radiobtn:before, .radiobtn:after {
    content: '';
    display: block;
    position: absolute;
    border-radius: 50%;
    transition: .3s ease;
}

.radiobtn:before {
    top: -14px;
    left: 0px;
    width: 18px;
    height: 18px;
    background-color: #fff;
    border: 1px solid #777;
}

.radiobtn:after {
    top: 6px;
    left: 6px;
    width: 8px;
    height: 8px;
    background-color: #fff;
}

.radiobtn:checked:after {
    top: -10px;
    left: 4px;
    width: 12px;
    height: 12px;
    background-color: #FFBA3C;
}

.radiobtn:checked:before {
    border-color: #FFBA3C;
}

.radiolabel {
    font-family: "Microsoft soft";
    font-weight: 540;
    font-size: 18px;
    /* height: 100%; */
    /* line-height: 100%; */
}

/* Option Select */
.select {
    width: 80px;
    height: 100%;
    outline: none;
    background: #cbe7ff;
    border: 2px solid #2196f3;
    border-radius: 4px;
    position: relative;
    font-size: 16px;
    cursor: pointer;
    /* appearance: none; */
}

.select::after {
    content: '';
    border-width: 5px;
    border-style: solid;
    border-color: transparent;
    border-top-color: #222;
    display: inline-block;
    border-radius: 2px;
    position: absolute;
    right: 10px;
    bottom: 10px;
}

.selectOption {
    list-style: none;
    padding: 5px 0;
    margin: 0;
    background: #fff;
    /* color: #4b7bec; */
    border-radius: 4px;
    z-index: 1;
    width: 96%;
    position: absolute;
    left: 2%;
    top: 35%;
}

.mode {
    display: inline-block;
}

#mapMode {
    width: 100px;
    height: 29px;
    background: #f1f2f6;
}

#mapName {
    width: 220px;
}

/* 监控表格样式 */
.table {
    border: 1px solid #cad9ea;
    display: block;
    border-collapse: collapse;
    /* 边框合并 */
    text-align: center;
}

.table td, .table th {
    border: 1px solid #cad9ea;
    color: #666;
    height: 30px;
}

.table thead th {
    background: #CCE8EB;
    width: 100px;
}

.table tr:nth-child(odd) {
    background: #fff;
}

.table tr:nth-child(even) {
    background: #F5FAFA;
}

.table tr:hover {
    cursor: pointer;
}

/* 复选框 */
input[type="checkbox"] {
    display: none;
}

input[type="checkbox"]+label {
    display: inline-block;
    width: 40px;
    height: 20px;
    position: relative;
    transition: 0.3s;
    margin: -5px 2px;
    box-sizing: border-box;
}

input[type="checkbox"]+label:after,
input[type="checkbox"]+label:before {
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 20px;
    height: 20px;
    transition: 0.3s;
    cursor: pointer;
}

#autotest:checked+label.green {
    background: #AEDCAE;
}

#autotest:checked+label.green:after {
    background: #5CB85C;
}

#autotest:checked+label:after {
    left: calc(100% - 18px);
}

#autotest+label {
    background: #ddd;
    border-radius: 20px;
}

#autotest+label:after {
    background: #fff;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    top: 2px;
    left: 2px;
}

/* 弹出框设置 */
.popup .overlay {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1;
    display: none;
}

.popup .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: #f1f2f6;
    width: 700px;
    height: 270px;
    z-index: 2;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    font-family: "Microsoft YaHei", sans-serif;
}

.popup .close-btn {
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 15px;
    width: 30px;
    height: 30px;
    background: #222;
    color: #fff;
    font-size: 25px;
    font-weight: 600;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
}

.popup .popup-title {
    font-size: 24px;
    font-weight: bold;
    color: #1B9CFC;
    margin: -5px;
    margin-bottom: 10px;
}

.popup.active .overlay {
    display: block;
}

.popup.active .content {
    transition: all 300ms ease-in-out;
    transform: translate(-50%, -50%) scale(1);
}

.popup #document-content {
    margin: 10px 15px;
    padding: 5px;
    text-align: left;
}

.popup #document-content li {
    font-size: 20px;
    color: #2C3A47;
    height: 25px;
    line-height: 25px;
    margin-bottom: 5px;
}

.popup #document-link {
    font-size: 18px;
    color: #34495e;
    font-family: "Microsoft YaHei";
    height: 20px;
    line-height: 20px;
}

/* 操作手册按钮 */
#manual-btn {
    float: left;
}

.btn2 {
    position: absolute;
    top: 5%;
    left: 5%;
    transform: translate(-50, -50);
}

.btn2 {
    background: none;
    color: #0a3d62;
    width: 120px;
    height: 40px;
    border: 1px solid #338033;
    font-size: 18px;
    border-radius: 4px;
    transition: .6s;
    overflow: hidden;
}

.btn2:focus {
    outline: none;
}

.btn2:before {
    content: '';
    display: block;
    position: absolute;
    background: rgba(255, 255, 255, .5);
    width: 60px;
    height: 100%;
    left: 0;
    top: 0;
    opacity: .5;
    filter: blur(30px);
    transform: translateX(-130px) skewX(-15deg);
}

.btn2:after {
    content: '';
    display: block;
    position: absolute;
    background: rgba(255, 255, 255, .2);
    width: 30px;
    height: 100%;
    left: 30px;
    top: 0;
    opacity: 0;
    filter: blur(30px);
    transform: translateX(-100px) scaleX(-15deg);
}

.btn2:hover {
    background: #F8EFBF;
    cursor: pointer;
}

.btn2:hover:before {
    transform: translateX(300px) skewX(-15deg);
    opacity: .6;
    transition: .7s;
}

.btn2:hover:after {
    transform: translateX(300px) skewX(-15deg);
    opacity: 1;
    transition: .7s;
}