null/pages/mine/feedback.vue

<template>
	<view class="page">
		<view class="p-content flex-col items-start">
			<view class="title">问题与意见</view>
			<view class="area-wrap">
				<textarea placeholder="写几句评价" class="area"></textarea>
				<view class="img-wrap flex-row">
					<view class="img-item" v-for="(item,idx) in 10" :key="idx">
						<image src="/static/temp/pro.png" mode="aspectFill" class="img" ></image>
						<view class="cancel">
							取消
						</view>
					</view>  
					<image
						src="/static/addimg.png"
						class="img"
					/>	
				</view>	
			</view>
		</view>
		<view class="p-contact">
			<view class="title">联系方式</view>
			<input type="number" class="inpt" placeholder="请留下您的联系方式">
		</view>
        <submit-btn @submit="submit" ref="submitRef">
			<template v-slot:btns="{isSubmitted}">
				<view class="p-btn" :class="{'disabled':isSubmitted}">
					立即注册
				</view>
			</template>
		</submit-btn>
		<safe-area bgColor="#f8f8f8" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f8f8f8;
}
.page{
	padding: 30rpx;
}
.p-content{
	width: 690rpx;
	background: #fff;
	border-radius: 10rpx;
	  padding: 40rpx 30rpx 100rpx;
	  margin: 0 auto;
	.title{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.area-wrap{
		margin-top: 30rpx;
		background-color: #F6F6F6;
		border-radius: 10rpx;
	}
	.area {
	  color: #333;
	  font-size: 24rpx;
	  font-family: PingFang;
	  line-height: 36rpx;
	  height: 185rpx;
	  width: 100%;
	  padding: 20rpx;
	}
	.img-wrap{
		flex-wrap: wrap;
		padding: 0 30rpx;
		.img-item{
			position: relative;
			margin-right: 10rpx;
		    margin-bottom: 10rpx;
			border-radius: 20rpx;
			overflow: hidden;
		}
		.cancel{
			position: absolute;
			bottom: 0;
			left: 0;
			background: rgba(0,0,0,.4);
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			width: 100%;
			color:#fff;
			font-size: 24rpx;
		}
		.img {
		  width: 130rpx;
		  height: 130rpx;
		  &:nth-child(5n){
			  margin-right: 0;
		  }
		}
	}
	
}
.p-contact{
	margin: 24rpx auto 0;
	width: 690rpx;
	height: 208rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	padding: 10rpx 30rpx 30rpx;
	margin-bottom: 100rpx;
	.title{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		height: 90rpx;
		line-height: 90rpx;
	}
	.inpt{
		width: 630rpx;
		height: 77rpx;
		background: #F6F6F6;
		border-radius: 10rpx;
		line-height: 77rpx;
		padding: 0 20rpx;
		color:#333;
		font-size: 24rpx;
	}
}
.p-btn{
	width: 691rpx;
	height: 94rpx;
	background: #92B99C;
	border-radius: 10rpx;
	line-height: 94rpx;
	text-align: center;
	font-size: 34rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #FFFFFF;
	margin:0 auto;
}
</style>