cx-wed/static/css/one.less

// @mainBody : #439dc1;//主体色
// @background:#fff;//背景色
// @cheek: #dedede;//边框
//流程详情布局
.Demolition{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-between;
		.Demolition-left{
			width: 70%;
			height: 100%;
			.Demolition-left-top{
				width: 100%;
				height: 65px;
				display: flex;
				justify-content: space-between;
				.Demolition-left-top-rigth{
					.el-button{
						width: 82px;
						height: 40px;
						border-radius: 12px;
						margin-top: 10px;
						padding: 0;
						font-size: 18px;
						color: #fff;
						background-color: #439dc1;
						border-color: #7aa2e200;
					}
				}
			}
			.Demolition-left-button{
				width: 100%;
				height: calc(100% - 65px);
				background-color: #fff;
				border-radius: 20px;
				overflow: hidden;
				.Demolition-left-button-top{
					height: 42px;
					box-sizing: border-box;
					padding: 9px;
					font-size: 16px;
					font-weight: 700;
					color: #167AA1;
					background-color: #fff;
					border-bottom: 2px solid #dedede;
				}
				.Demolition-left-button-buttom{
					width: 100%;
					height: calc(100% - 42px);
					overflow: hidden;
				}
				.Demolition-left-button-file{
					width: 100%;
					height: calc(100% - 42px);
				}
			}
		}
		.Demolition-rigth{
			width: 29%;
			height: 100%;
			background-color: #fff;
			border-radius: 20px;
			overflow: hidden;
		}
	}
//带背景色的按钮
.button-background .el-button{
	  width: 106px;
	  height: 38px;
	  background: #439dc1;
	  color: #fff;
	  border-radius: 12px;
	  border: 0;
	  &:focus{
	  		  width: 106px;
	  		  height: 38px;
	  		  background: #439dc1;
	  		  color: #fff;
	  		  border-radius: 12px;
	  		  border: 0;
	  }
	  &:hover{
		  width: 106px;
		  height: 38px;
		  background: #439dc1;
		  color: #fff;
		  border-radius: 12px;
		  border: 0;
	  }
  }
//不带背景色的按钮
.button-nobackgroubd .el-button {
	width: 106px;
	height: 38px;
	border-radius: 12px;
	border: 0;
    background-color: rgba(0,0,0,0);
    color: #439dc1;
    border: 1px solid #439dc1;
}
//搜索框
.search{
	width: 100%;
	background-color: #fff;
	margin: 20px 0;
	border-radius: 24px;
	box-sizing: border-box;
	.search-top{
		display: flex;
		justify-content: space-between;
		padding: 20px;
		.search-top-input{
			display: flex;
			border-radius: 12px;
			min-width: 676px;
			overflow: hidden;
			border: 1px solid #439dc1;
			box-shadow: 0 5px 13px rgba(0, 0, 0, .25);
			.el-input-group {
			  line-height: normal;
			  display: inline-table;
			  width: 100%;
			  border-collapse: separate;
			  border-spacing: 0;
			   .el-input-group__prepend {
			    border-radius: 0;
			    background-color: #fff;
			    border: none;
			    font-size: 14px;
			    font-weight: 400;
			    line-height: 24px;
			    color: #439dc1;
			  }
			  .el-input__inner {
			    border-radius: 0;
			    height: 41px;
			    border: 1px solid #439dc1 !important;
			    border-top: 0 !important;
			    border-bottom: 0 !important;
			    background-color: #fff;
			    color: #439dc1;
			  }
			}
			.el-button {
			   border-radius: 0;
			   background-color: #439dc1;
			   border: 1px solid #439dc1;
			   width: 77px;
			   color: #fff;
			 }
			 .selector{
				 line-height: normal;
				 display: flex;
				 width: 100%;
				 border-collapse: separate;
				 border-spacing: 0;
				 // display: flex;
				 .selector-title{
					 border-radius: 0;
					 background-color: #fff;
					 border: none;
					 font-size: 14px;
					 font-weight: 400;
					 line-height: 41px;
					 color: #439dc1;
					 vertical-align: middle;
					 display: table-cell;
					 position: relative;
					 padding: 0 20px;
					 white-space: nowrap;
				 }
				 .el-input__inner{
					 border-radius: 0;
					 height: 41px;
					 border: 1px solid #439dc1 !important;
					 border-top: 0 !important;
					 border-bottom: 0 !important;
					 background-color: #fff;
					 color: #439dc1;
				 }
			 }
		}
		.search-top-buttom{
			width: 20%;
			display: flex;
			justify-content: right; 
			.button-background{margin-left: 20px;}
			.button-nobackgroubd{margin-left: 20px;}
		}
	}
}
//可展开搜索框
.queryCriteria{
		display: flex;
		height: 32px;
		padding: 20px;
		padding-top: 0;
		span{
			font-size: 14px;
			color: #439dc1;
			font-weight: bold;
			line-height: 32px;
			margin-right: 20px;
		}
		.el-input{
			width: 160px;
			height: 32px;
			.el-input__inner{
			width: 100%;
			height: 32px;
			border: 1px solid #439dc1;
			border-radius: 8px;
			color: #439dc1;
			}
		}
		.el-input__prefix{color: #439dc1;width: 20px;}
		.interval{
			width: 40px;
			height: 2px;
			background-color: #B3B3B3;
			margin: 16px 13px;
			border-radius: 20px;
		}
		button{
			width: 80px;
			height: 32px;
			color: #439dc1;
			margin-left: 13px;
			background-color: #0000;
			border: 1px solid #439dc1;
			border-radius: 8px;
		}
	ul{
		display: flex;
		li{
			font-size: 14px;
			cursor: pointer;
			line-height: 32px;
			color: #5b5b5b;
			padding: 0;
			margin-right: 20px;
			i{
				line-height: 34px;
			}
		}
	}
}
//选择字体颜色
.zt{
	color: #2384aa !important;
}
//不带间隔的表格
.WithoutInterval{
	.el-tag--dark {
	  border: 1px solid rgba(0, 0, 0, 0);
	  margin: 0 5px;
	  cursor: pointer;
	  min-width: 75px;
	  min-height: 35px;
	}
	.el-button.is-disabled{
		color: #C0C4CC;
		&:hover {
			color: #C0C4CC;
		}
	}
	.el-button--text{
		color: #439dc1;
		&:hover {
			color: #4ab1d6;
		}
	}
	.el-table th.el-table__cell.is-leaf{
		background-color: #ffffff;
		border-bottom: 1px solid #dedede ;
	}
	.el-table .cell {
	  color: #707070 ;
	  text-align: center;
	}
	.el-table td.el-table__cell {
	  background-color: #fff;
	  border-bottom: 1px solid #dedede ;
	}
	.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
	  background-color: #f1f4f5;
	}
	.el-table__empty-block{
		background-color: #fff;
		border-bottom: 1px solid #dedede ;
	}
	.el-table::before{
		background-color: #dedede;
	}
}
//表格 可展开 he不可展开隐藏
.expand{
	.el-table__expand-column{
		background: #439dc1 !important;
		.cell {
			display: none;
		}
	}
	.indexbackground{
		background-color: #439dc1 !important; 
		}
}
//带间隔的表格
.interval{
	.el-button--primary{
		background-color: #439dc1;
		border-color: #439dc1;
		&:hover{
			background-color: #4ab1d6;
			border-color: #4ab1d6;
		}
	}
	.el-button--danger{
		background-color: #f56c6c;
		border-color: #f56c6c;
		&:hover{
			background-color: #ff8181;
			border-color: #ff8181;
		}
	}
	.el-table, .el-table__expanded-cell {
	  background-color: rgba(0, 0, 0, 0) !important;
	}
	.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
	  background-color: #f1f4f5;
	}
	.el-table__fixed-right::before,.el-table--border::after, .el-table--group::after, .el-table::before {
	  background: 0 !important;
	}
	 .el-table__body, .el-table__footer, .el-table__header {
	  border-collapse: separate;
	  border-spacing: 0px 8px;
	}
	.is-leaf:first-child {
	  border-top-left-radius: 8px;
	  border-bottom-left-radius: 8px;
	}
	.is-leaf:last-child {
	  border-top-right-radius: 8px;
	  border-bottom-right-radius: 8px;
	}
	.el-table td.el-table__cell:first-child {
	  border-top-left-radius: 8px;
	  border-bottom-left-radius: 8px;
	}
	.el-table td.el-table__cell:last-child {
	  border-top-right-radius: 8px;
	  border-bottom-right-radius: 8px;
	}
	.el-table tr {
	  border-radius: 8px;
	  overflow: clip;
	  background-color: #00000000;
	}
	.el-table td.el-table__cell{
		border-bottom: none;
		background-color: #fff;
	}
	.indexbackground{
		width: 20px;
		height: 20px;
		background: #439dc1;
		text-align: center;
		line-height: 20px;
		color: #fff;
		border-radius: 50%;
		margin: 0 auto;
	}
	.el-table .cell {
	  color: #707070 ;
	  text-align: center;
	}
	.el-table__empty-block{
		background: #fff;
		border-radius: 8px;
	}
	.el-table th.el-table__cell.is-leaf {
	  border-bottom: none;
	  background: #fff !important;
	  }
}
.block{
	margin: 20px auto;
	width: 30%;
}
//表单
.form{
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	.el-form {
	  width: 100%;
	  display: flex;
	  box-sizing: border-box;
	  flex-wrap: wrap;
	  border: 1px solid #e4e7ed !important;
	  .el-form-item {
	    width: 50%;
	    box-sizing: border-box;
	    margin-bottom: 0px;
	    .el-form-item__label {
	      border: 1px solid #e4e7ed;
		  box-sizing: border-box;
	      line-height: 38px !important;
		  background-color: #e4e7ed63;
		  height: 100%;
	    }
		 .el-input-group__append{
			 border-radius: 0;
		 }
		.is-disabled{
			.el-input__inner{
				color: #0006  !important;
				background-color: #0000000f !important;
			}
			 .el-textarea__inner{
				 color: #0006  !important;
				 background-color: #0000000f !important;
			 }
		}
		.el-textarea__inner{
			color: #666161 !important;
			border-radius: 0;
			background-color: #FFFFFF !important;
		}
		.el-input__inner {
		  color: #666161 !important;
		  border-radius: 0;
		  background-color: #FFFFFF !important;
		}
	  }
	}
}
//侧边栏按钮
.dialog-footer {
  width: 45%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
   .el-button {
    width: 45%;
  }
  .el-button--primary {
    background-color: #47A1C4;
	border: 1px solid #47A1C4;
  }
}
//侧边栏
.al{
	.el-drawer__header {
	  -webkit-box-shadow: none;
	  box-shadow: none;
	  margin: 0;
	  &:first-child {
	    font-size: 18px !important;
	    color: #439dc1 !important;
		padding: 10px 20px;
		border-bottom: 2px solid #ccc;
	  }
	}
	.tc-top{
		border-bottom: 2px solid #ccc;
		padding: 10px 0;
		h2 {
		  padding:0 20px;
		  font-size: 19px;
		  color: #439dc1;
		}
	}
	.tc-middle{
		padding: 20px;
		padding-top: 0;
		box-sizing: border-box;
		h3 {
		  font-size: 18px;
		  color: #439dc1;
		  margin: 15px 0;
		}
		.el-table__empty-block{
			border-radius: 8px;
		}
		.el-table tr {
		  border-radius: 8px;
		  overflow: clip;
		}
	}
}
//弹窗
.tk{
	.el-dialog{
		border-radius: 10px;
	}
	.el-dialog__header {
	  box-shadow: 0 2px 2px #9d9d9d63;
	  .el-dialog__title {
	    color: #439dc1 !important;
	  }
	}
	.el-dialog__body {
	  padding: 14px 20px;
	  box-sizing: border-box;
	}
}
//选择器
#header {
	box-sizing: border-box;
	padding: 20px 40px 0;
	display: flex;
		}
.item_box{
    width:140px;
    height:44px;
    line-height: 44px;
    border-radius: 8px 8px 0px 0px;
    margin-right: 10px;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
	color: #7ABEFF;
	border: 1px solid #7AA2E2;
	background-color: #E0F0FF;
	border-bottom: none;
	.item_num{
	    display: inline-block;
	    width:20px;
	    height:20px;
	    line-height: 20px;
	    border-radius: 50%;
	    background: #FF0000;
	    border: 1px solid #fff;
	    font-size: 12px;
	    color:#fff;
	    text-align: center;
	    transform: translateY(-1px);
		}
    }
	.active {
	  color: #167AA1;
	  color: #fff;
	  background: #439dc1;
	}
	//流程操作返回退回提交
	.so-top{
		border-top: 1px solid #dedede;
		background-color: #fff;
		padding: 0 1% 0 1%;
		margin: -20px;
		margin-bottom: 0;
		.Left-buttom-content {
			width: 100%;
			height: 98%;
			border-radius: 24px;
			overflow: auto;
			display: flex;
			border-radius: 0;
			justify-content: space-between;
			.Left-buttom-content-top {
				padding: 9px 20px;
				font-size: 16px;
				font-weight: 700;
				color: #167AA1;
				background-color: #fff;
				height: 42px;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				img{
					margin-right:8px;
				}
			}
		}
		.buttome {
			width: 333px;
			display: flex;
			justify-content: flex-end;
			box-sizing: border-box;
		.buttome-a {
			width: 80px;
			height: 30px;
			background-color: #439dc1;
			border-radius: 8px;
			margin: 5px 10px;
			text-align: center;
			line-height: 27px;
			cursor: pointer;
				span {
					font-size: 14px;
					color: #FFFFFF;
				}
			}
		}
	}
	//详情标题头
	.detailstitle{
			padding: 9px 20px;
			font-size: 16px;
			font-weight: 700;
			color: #167AA1;
			background-color: #fff;
			border-bottom: 2px solid #dedede;
			height: 42px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			img{
				margin-right:8px;
			}
	}
	//分页样式
	.block{
		.el-pagination{
			.btn-prev{border-radius: 5px;}
			.btn-next{border-radius: 5px;}
			 .el-pager{
				 .active{
					background-color: #439dc1 !important;
					&:hover{
						color: #fff !important;
					}
				 }
				 .number{
					 border-radius: 5px;
					 &:hover{
						 color: #439dc1 ;
					 }
				 }
			 }
		}
		.el-input__inner{
			border-radius: 5px;
		}
	}
	//输入框间隔
.line{
			height: 40px;
			line-height: 40px;
			margin: 10px 0;
			font-size: 16px;
			color: #666;
			display: flex;
			justify-content: center;
			span{
				display: inline-block;
				width: 200px;
				height: 20px;
				border-bottom: 2px solid #dfdfdf;
				&:first-child{
					margin-right: 10px;
				}
				&:last-child{
					margin-left: 10px;
				}
			}
		}