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

page {
	background-color: $bgc1;
}

.m-fm {
	.fm {
		box-sizing: border-box;
		margin: 20rpx auto;
		width: 710rpx;
		border-radius: 10rpx;
		padding: 20rpx;
		background-color: #ffffff;
	}
	.position-input {
		padding-bottom: 20rpx;
		display: block;
		margin: 0 auto auto;
		width: 100%;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 13px;
		font-family: Source Han Serif SC;
		color: $fc1;
	}
	.position-hint {
		padding-top: 20rpx;
		// border-top: 1rpx solid #eee;
		line-height: 50rpx;
		font-size: 13px;
		font-family: Source Han Serif SC;
		color: rgba(153, 153, 153, 1);

		image {
			position: relative;
			top: -3rpx;
			width: 32rpx;
			height: 39rpx;
			margin-right: 12rpx;
			vertical-align: middle;
		}
	}
	.position-hints {
    display: flex;
    justify-content: space-between;
    align-items: center;
		width: 100%;
		height: 48rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
		padding-top: 24rpx;
		font-size: 26rpx;
		font-family: Source Han Serif SC;
		font-weight: 500;
		color: #0C4A9D;
		border-top: 1rpx solid #e7eeee;
		// border-radius: 24rpx;
		// -webkit-border-radius: 24rpx;
		// -moz-border-radius: 24rpx;
		// -ms-border-radius: 24rpx;
		// -o-border-radius: 24rpx;
    .position-hints-left {
      image {
        position: relative;
        top: -3rpx;
        width: 21rpx;
        height: 26rpx;
        margin-right: 8rpx;
        vertical-align: middle;
      }
      text {
        // line-height: 48rpx;
      }
    }
    .position-hints-arrow {
      width: 20rpx;
      height: 20rpx;
    }
		
	}
	.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: 460rpx;
		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-title{
			margin:54rpx 0 0 39rpx;
			font-size: 34rpx;
			font-family: Source Han Serif SC;
			font-weight: 500;
			color: #333333;

		}

		.dialog-mobile{
			margin:131rpx 151rpx 0 151rpx;
			font-size: 34rpx;
			font-family: Source Han Serif SC;
			font-weight: 500;
			color: #333333;
		}

		.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;
}
	}

	
}