Html
    Css
    Js

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

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

展示用步骤条样式代码

更新时间:2022-06-20 01:06:12

设计图有类似步骤条样式,但没步骤条的功能,就自己写了这样的样式.

0