MoeNovaClient/uni_modules/cl-uni/static/css/form.scss

.cl-form {
	.cl-form-item {
		min-height: 70rpx;
		padding: 20rpx 0;
		position: relative;

		&--required {
			.cl-form-item__label::before {
				content: "*";
				color: $cl-color-error;
				margin-right: 10rpx;
			}
		}

		&--suffix {
			.cl-form-item__content {
				margin-right: 20rpx;
			}
		}

		&__container {
			display: flex;

			&:first-child {
				padding-left: 180rpx;
			}
		}

		&__label {
			padding: 0 20rpx 0 0;
			font-size: 28rpx;
			text-align: right;
			vertical-align: middle;
			float: left;
			line-height: 70rpx;
		}

		&__content {
			/* #ifndef MP-TOUTIAO */
			display: flex;
			/* #endif */

			flex: 1;
			font-size: 26rpx;
			line-height: 70rpx;

			&.is-justify-center {
				justify-content: center;

				/* #ifdef MP-TOUTIAO */
				text-align: left;
				/* #endif */

				picker {
					text-align: center;
				}
			}

			&.is-justify-end {
				justify-content: flex-end;

				/* #ifdef MP-TOUTIAO */
				text-align: right;
				/* #endif */

				picker {
					text-align: right;
				}
			}

			&.is-justify-space-between {
				justify-content: space-between;
			}

			&.is-justify-space-around {
				justify-content: space-around;
			}

			picker {
				font-size: 26rpx;
			}

			label {
				font-size: 26rpx;

				switch,
				radio,
				checkbox {
					margin-right: 14rpx;
				}

				radio,
				checkbox {
					top: -2rpx;
				}

				switch {
					top: -4rpx;
				}
			}

			checkbox-group,
			radio-group {
				label {
					padding-right: 30rpx;
				}
			}

			cl-textarea,
			cl-select-region,
			cl-select,
			cl-input {
				width: 100%;
			}
		}

		&__message {
			display: block;
			color: $cl-color-error;
			font-size: 24rpx;
			text-align: right;
			margin-top: 6rpx;
		}

		&__suffix {
			display: flex;
			align-items: center;
			font-size: 26rpx;

			i {
				display: inline-block;
			}
		}
	}

	.cl-form-item {
		&--top {
			padding: 0 0 20rpx 0;

			.cl-form-item__label {
				padding: 0 0 10rpx 0;
				float: none;
				text-align: left;
			}
		}

		&--left {
			.cl-form-item__label {
				text-align: left;
			}
		}

		&--right {
			.cl-form-item__label {
				text-align: right;
			}
		}
	}

	&--border {
		.cl-form-item {
			border-bottom: 1rpx solid #eee;
		}
	}
}