1
任务名称
2
对象类型
3
时空范围
4
选择库
5
预警等级
body { overflow:hidden; margin:0; padding:0; color:#fff; background-color:#12172a; } ul { padding:0; margin:0; list-style:none; } .main { width:100vw; height:95vh; padding:1vh 1vw; display:flex; overflow-y:auto; } .main::-webkit-scrollbar { display:none; } .left { width:160px; height:100%; position:relative; margin-top:25px; } .title-box { display:flex; } .index { width:36px; height:36px; line-height:36px; text-align:center; color:#fff; background:#A5CCF8; border-radius:50%; position:relative; z-index:111; } .main-title { line-height:36px; color:#A5CCF8; margin-left:10px; } .line { height:510px; border-left:2px dashed #293144; position:absolute; left:17px; top:12px; } .right { width:calc(100% - 160px); height:100%; margin-top:25px; } .form-data { width:96%; height:60px; border:1px solid #323c55; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; margin:0 0 25px; } .form-item { height:6vh; display:flex; align-items:center; } .form-label { width:10vw; text-align:right; padding-right:2vw; color:#7695b7; } .input-block { width:65vw; } .form-text { width:20vw; height:4vh; border:1px solid #323c55; border-radius:3px; padding:0 0.5vw; color:#fff; display:flex; align-items:center; justify-content:space-between; } .form-icon { width:14px; height:19px; background:url(../../img/exitAndEntry/warningChart/P15.png) no-repeat; background-size:100% 100%; } .input,.select { width:100%; height:4vh; color:#7695b7; background-color:#13182C; border:1px solid #323c55; text-indent:12px; border-radius:3px; } radio { margin-right:1vw; } .textarea { width:100%; height:7vh; color:#7695b7; background-color:#13182C; border:1px solid #323c55; text-indent:12px; } input[type=radio] { margin-right:5px; cursor:pointer; font-size:14px; width:15px; height:12px; position:relative; } input[type=radio]:after { position:absolute; width:10px; height:15px; top:-1px; content:" "; background-color:#13182C; border:1px solid #323c55; color:#fff; display:inline-block; visibility:visible; padding:0px 3px; border-radius:50%; } input[type=radio]:checked:before { content:""; display:block; position:relative; width:10px; height:10px; border-radius:50%; background-color:#3E97D6; top:2px; left:4px; z-index:1; } .unit-time { display:flex; justify-content:space-between; align-items:center; width:20vw; height:4vh; background-color:transparent; border:1px solid #323c55; border-radius:3px; padding:0 0.5vw; } .time-input { width:18vw; background-color:#13182c; border:0; color:#7fbdff; text-align:center; } .time-icons { width:16px; height:16px; background:url(../../img/zhengBao/select-time.png) no-repeat; background-size:100% 100%; } /* 按钮切换 -s */ .button-item { width:7vw; height:calc( 4vh - 2px ); line-height:4vh; color:#7695b7; text-align:center; cursor:pointer; font-size:1.6vh; border-radius:3px; border:1px solid #323c55; margin-left:2vw; } .form-item .active { color:#ffffff; background-color:#0d8ddb; } /* 按钮切换 -e */
更新时间:2022-06-20 01:06:12
设计图有类似步骤条样式,但没步骤条的功能,就自己写了这样的样式.