realty/virgo.wzfrontend/workark_wx/static/scss/common.scss

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

.color-primary{
	color: $uv-primary;
}

.color-success{
	color: $uv-success;
}

.color-warning{
	color: $uv-warning;
}

.color-error {
	color: $uv-error;
}
//通用列表
.status-tag {
	height: 52rpx;
	border-radius: 52rpx;
	line-height: 52rpx;
	padding: 0 30rpx;
	font-size: 24rpx;
	color: #fff;

	&.success {
		background-color: $uv-success;
	}

	&.primary {
		background-color: $uv-primary;
	}

	&.info {
		background-color: $uv-info;
	}

	&.warning {
		background-color: $uv-warning;
	}

	&.error {
		background-color: $uv-error;
	}
}

.common-list {
	padding: 30rpx;
	box-sizing: border-box;

	.common-item {
		background-color: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0px 1px 12px rgba(3, 3, 3, 0.08);
		padding: 30rpx;
		position: relative;
		margin-bottom: 30rpx;

		.icon {
			position: absolute;
			top: 30rpx;
			right: 30rpx;
			width: 60rpx;
			height: 60rpx;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.title {
			font-size: 32rpx;
			font-weight: 600;
		}

		.date {
			font-size: 24rpx;
			color: $uv-content-color;
			margin: 10rpx 0;
		}

		.space {
			font-size: 24rpx;
		}

		.other {
			margin-top: 20rpx;

			.item {
				margin-top: 16rpx;
			}

			.label {
				color: $uv-content-color;
				font-size: 24rpx;
			}

			.value {
				margin-top: 6rpx;
				font-weight: 400;
			}
		}

		.state {
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;

			.create {
				height: 48rpx;
				border-radius: 48rpx;
				border: 1px solid $uv-primary;
				display: flex;
				align-items: center;
				color: $uv-primary;
				padding: 0 10rpx;

				.name {
					font-size: 24rpx;
					flex: 1;
					max-width: 150rpx;
					min-width: 70rpx;
					overflow: hidden;
					margin-left: 10rpx;
					line-height: 36rpx;
					padding-right: 10rpx;
				}
			}
		}
	}
}

//底部按钮
.hui-button-box {
	background-color: #ffffff;
	box-shadow: 0px 2px 10px rgba(3, 3, 3, 0.1);
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-bottom: 0;
	padding-bottom: constant(safe-area-inset-bottom);  
	padding-bottom: env(safe-area-inset-bottom);
	padding-right: 40rpx;
	padding-left: 40rpx;
	
	.hui-button-view{
		height: 100rpx;
		display: flex;
		align-items: center;
	}
	
	.hui-button {
		height: 68rpx;
		border-radius: 68rpx;
		color: #ffffff;
		background: $uv-primary;
		border: 1px solid  $uv-primary;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 30rpx;
		&.hui-button-light{
			color: $uv-primary;
			background: #fff;
		}
	}
	
	.hui-button-icon{
		margin-right: 10rpx;
	}
}

//详情
.hui-detail {
	padding: 30rpx;

	.detail-box {
		background-color: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0px 1px 12px rgba(3, 3, 3, 0.08);
		padding: 30rpx;
		position: relative;
		margin-bottom: 30rpx;

		&.file-box {
			padding-bottom: 20rpx;
		}
	}

	.sub-title {
		display: flex;
		align-items: center;
		margin-left: -8rpx;

		.sub-label {
			font-size: 32rpx;
			font-weight: 600;
			margin-left: 14rpx;
		}
	}

	.title-box {
		padding-left: 90rpx;
		position: relative;
		min-height: 88rpx;

		.title-icon {
			width: 70rpx;
			height: 70rpx;
			text-align: center;
			line-height: 70rpx;
			background: $uv-primary;
			border-radius: 70rpx;
			position: absolute;
			left: 0;
			top: 50%;
			margin-top: -35rpx;
		}

		.title {
			font-size: 32rpx;
			font-weight: 600;
			margin-bottom: 8rpx;
		}

		.date {
			font-size: 24rpx;
			color: $uv-content-color;
		}
	}

	.other {
		margin-top: 20rpx;

		.item {
			margin-top: 16rpx;
		}

		.label {
			color: $uv-content-color;
			font-size: 24rpx;
		}

		.value {
			margin-top: 10rpx;
			font-weight: 400;
		}

		.file-item {
			background-color: #ededed;
			height: 80rpx;
			display: flex;
			align-items: center;
			border-radius: 12rpx;
			padding: 0 14rpx;
		}

		.file-name {
			flex: 1;
			width: 0;
			margin-left: 10rpx;
		}

		.contarct-item {
			background-color: #ededed;
			border-radius: 12rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
		}

		.contarct-content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 16rpx;

			&.last {
				margin-bottom: 0rpx;

				.content-item {
					flex: 1;
					width: 0;
				}
			}

			.content-title {
				font-size: 32rpx;
				font-weight: 500;
			}

			.content-label {
				color: $uv-content-color;
				font-size: 24rpx;
			}

			.content-value {
				font-weight: 400;
				margin-left: 6rpx;
				flex: 1;
				width: 0;
			}

			.content-item {
				overflow: hidden;
				display: flex;
				align-items: center;

				&.content-title {
					flex: 1;
					width: 0;
				}
			}
		}
	}

	.state {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;

		.create {
			height: 48rpx;
			border-radius: 48rpx;
			border: 1px solid $uv-primary;
			display: flex;
			align-items: center;
			color: $uv-primary;
			padding: 0 10rpx;

			.name {
				font-size: 24rpx;
				flex: 1;
				max-width: 150rpx;
				min-width: 70rpx;
				overflow: hidden;
				margin-left: 10rpx;
				line-height: 36rpx;
				padding-right: 10rpx;
			}
		}
	}
}
	
.process-box{
	
	.process-set-item {
		padding-left: 80rpx;
		position: relative;
	}
	
	.process-item-title {
		padding: 10rpx 0;
		display: flex;
		align-items: center;
		
		.label {
			font-weight: bold;
		}
	}
	
	.process-item-content {
		padding: 5px 0;
	}
	
	.process-set-state {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		position: absolute;
		left: 7px;
		top: 6px;
		display: flex;
		align-items: center;
		justify-content: center;
	
		.el-icon-success {
			font-size: 20px;
		}
	
		&.info {
			background: rgba(144, 157, 143, 0.4);
	
			.process-set-state-1 {
				background: rgba(144, 157, 143, 1);
			}
	
			.process-set-state-2 {
				background: rgba(144, 157, 143, 0.6);
			}
		}
	
		&.waiting {
			background: rgba(255, 125, 0, 0.4);
	
			.process-set-state-1 {
				background: rgba(255, 125, 0, 1);
			}
	
			.process-set-state-2 {
				background: rgba(255, 125, 0, 0.6);
			}
	
			.el-icon-success {
				color: rgba(255, 125, 0, 1);
			}
		}
	
		&.success {
			background: rgba(0, 180, 42, 0.4);
	
			.process-set-state-1 {
				background: rgba(0, 180, 42, 1);
			}
	
			.process-set-state-2 {
				background: rgba(0, 180, 42, 0.6);
			}
		}
	
		&.error {
			background: rgba(245, 63, 63, 0.4);
	
			.process-set-state-1 {
				background: rgba(245, 63, 63, 1);
			}
	
			.process-set-state-2 {
				background: rgba(245, 63, 63, 0.6);
			}
		}
	
		&.state-last {
			background: #fff;
		}
	}
	
	.process-set-state-1 {
		width: 8px;
		height: 8px;
		border-radius: 50%;
	}
	
	.process-set-state-2 {
		width: 14px;
		height: 14px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.line {
		position: absolute;
		left: 16px;
		width: 2px;
	
		&.info {
			background: rgba(144, 157, 143, 0.4);
		}
	
		&.waiting {
			background: rgba(255, 125, 0, 0.4);
		}
	
		&.success {
			background: rgba(0, 180, 42, 0.4);
		}
	
		&.error {
			background: rgba(245, 63, 63, 0.4);
		}
	}
	
	.line-top {
		top: 0;
		height: 6px;
	}
	
	.line-bottom {
		top: 26px;
		bottom: 0;
	}
}