epmet-resi-rizhao/assets/scss/notice-create.scss

//引入全局配置
@import 'c/conf';
@import 'c/mx';
@import 'c/f';
@import 'a/c';

page {
	background-color: $bgc1;
}

.g-bd{
	height:100%
}

.m-fm {
	.row {
		margin-top:10rpx;
		padding: 20rpx 20rpx;
		background-color: #ffffff;
		line-height: 40rpx;
		border-bottom: 1rpx solid #e7eeee;
		
		.field {
		  font-size: 30rpx;
		  color: #333333;
		  .z-stress {
			color: #e60000;
		  }
		}

		.value {
		  font-size: 28rpx;
		  color: #333333;
		  max-width: 480rpx;
	
		  .z-ph {
			color: #999999;
		  }
	
		  &.z-folded {
			@include toeM(3);
		  }
	
		  input {
			display: block;
			width: 450rpx;
			height: 40rpx;
			min-height: 40rpx;
			line-height: 40rpx;
			font-size: 28rpx;
			text-align: right;
			color: $fc1;
	
			.input-placeholder {
			  color: $fc3;
			}
		  }
	
		}

	  }

	.fm {
		box-sizing: border-box;
		margin: 10rpx 0;
		width: 100%;
		border-radius: 10rpx;
		padding: 20rpx;
		background-color: #ffffff;
	}



	.topic-operate {
		margin-top: 20rpx;
		padding: 26rpx 22rpx 6rpx 22rpx;
		border-top: 1rpx solid #e7eeee;

		image {
			width: 46rpx;
			height: 46rpx;
			margin-right: 40rpx;
			vertical-align: middle;
		}
	}

	textarea {
		box-sizing: border-box;
		display: block;
		margin: 0 auto auto;
		padding: 5rpx 0;
		width: 100%;
		height: 320rpx;
		line-height: 45rpx;
		border-radius: 20rpx;
		background-color: #fff;
		font-size: 14px;
		font-family: Source Han Serif SC;
		color: $fc1;
		.z-placeholder {
			@include wwb;
		}
	}
	.input-hint {
		box-sizing: border-box;
		line-height: 80rpx;
		text-align: right;
		font-family: Source Han Serif SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		font-size: 13px;
	}
	.input-hints {
		line-height: 40rpx;
	}

	.img-list {
		@include cs;
		position: relative;
		box-sizing: border-box;
		display: block;
		// margin: 25rpx auto auto;
		width: 660rpx;

		.img-item {
			position: relative;
			box-sizing: border-box;
			float: left;
			margin-right: 40rpx;
			margin-bottom: 5rpx;
			width: 150rpx;
			height: 150rpx;
			border-radius: 10rpx;
			background-color: #f3f4f5;

			&.z-unvalid {
				.img-primary {
					border: 3px solid #f44;
				}
			}

			&:nth-child(3n) {
				margin-right: 0;
			}

			.i-del {
				position: absolute;
				display: block;
				width: 40rpx;
				height: 40rpx;
				top: -15rpx;
				right: -15rpx;
			}

			.img-primary {
				box-sizing: border-box;
				display: block;
				width: 150rpx;
				height: 150rpx;
				border-radius: 10rpx;
			}

			&.img-item-add {
				// border: 2px dashed rgba(#000, 0.04);
				.i-add {
					position: absolute;
					display: block;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					width: 55rpx;
					height: 55rpx;
					margin: auto;

					&:after,
					&:before {
						content: '';
						position: absolute;
						display: block;
						top: 0;
						bottom: 0;
						left: 0;
						right: 0;
						margin: auto;
						background-color: #ccc;
					}

					&:before {
						width: 55rpx;
						height: 5rpx;
					}

					&:after {
						width: 5rpx;
						height: 55rpx;
					}
				}
			}
		}
	}
	.fm-flex {
		display: flex;
		flex-direction: column;
		transition: height 0.2s;
		-webkit-transition: height 0.2s;
		-moz-transition: height 0.2s;
		-ms-transition: height 0.2s;
		-o-transition: height 0.2s;
		.topic-text {
			flex: 1;
			min-height: 320rpx;
		}
	}
	.btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: block;
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		border: none;
		outline: none;
		border-radius: 0;
		background-color: rgba(230, 0, 0, 1);
		color: #fff;
		text-align: center;
		font-size: 14px;
		transition: background-color 0.13s;
		font-family: Source Han Serif SC;
		font-weight: 500;

		&.z-disabled {
			background-color: lighten($c1, 20);

			&:active {
				background-color: lighten($c1, 15);
			}
		}

		&:active {
			background-color: darken($c1, 10);
		}
	}

	.topic-record {
		position: absolute;
		bottom: -580rpx;
		width: 100%;
		transition: bottom 0.2s;
		-webkit-transition: bottom 0.2s;
		-moz-transition: bottom 0.2s;
		-ms-transition: bottom 0.2s;
		-o-transition: bottom 0.2s;
	}
	.topic-record-on {
		bottom: 0;
	}
}

.topic-dialog {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;

	.dialog-mask {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.dialog-wrapper {
		position: absolute;
		top: 400rpx;
		left: 50%;
		z-index: 3;
		width: 540rpx;
		height: 340rpx;
		box-sizing: border-box;
		margin-left: -270rpx;
		padding: 80rpx 32rpx 0;
		background: #ffffff;
		border-radius: 10rpx;
		-webkit-border-radius: 10rpx;
		-moz-border-radius: 10rpx;
		-ms-border-radius: 10rpx;
		-o-border-radius: 10rpx;

		.dialog-content {
			font-size: 32rpx;
			font-family: Source Han Serif SC;
			font-weight: 500;
			color: #333333;
			line-height: 48rpx;
		}

		.dialog-btn {
			width: 230rpx;
			height: 80rpx;
			margin: 50rpx auto 0;
			font-size: 34rpx;
			font-family: Source Han Serif SC;
			font-weight: 500;
			color: #ffffff;
			text-align: center;
			line-height: 80rpx;
			background: #e60000;
			border-radius: 40rpx;
			-webkit-border-radius: 40rpx;
			-moz-border-radius: 40rpx;
			-ms-border-radius: 40rpx;
			-o-border-radius: 40rpx;
}
	}
}

.z-placeholder {
    color: rgb(138, 138, 138);
  }