jp-floorlock-Inspection/pages/myTab/feedbackSubmit.vue

<template>
	<view>
		<u-navbar title="意见反馈" title-color="#101010"></u-navbar>
		<view class="main">
			<view class="title">
				<text>*</text>请选择反馈问题类型：
			</view>
			<!-- 类型 -->
			<view class="classify">
				<view class="classify-item item-checked">
					功能异常
				</view>
				<view class="classify-item">
					产品建议
				</view>
				<view class="classify-item">
					安全问题
				</view>
				<view class="classify-item">
					其他问题
				</view>
			</view>
		</view>
		<!-- 问题描述 -->
		  <view class="main">
		  	<view class="title">
		  		问题描述（必填）
		  	</view>
			<view class="textarea">
				<textarea placeholder="请填写15字以上描述，以便我们更好地为您提供帮助~" ></textarea>
			</view>
		  </view>
		  <!-- 上传照片 -->
		  <view class="main">
		  	<view class="title">
		  		上传图片（最多3张）
		  	</view>
			<view class="upload">
					<u-upload  width="144" height="144" :action="action" :file-list="fileList" max-count="3" ></u-upload>
			</view>
		  </view>
		  <!-- 底部 -->
		  <view class="bottom">
		  	<button class="submit">提交反馈</button>
		  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		background-color: #fff;
		padding: 32rpx;
		margin-bottom: 24rpx;
		.title{
			color: rgb(16,16,16);
			font-size: 32rpx;
			font-weight: bold;
			text{
				color: rgba(255,0,9,1);
			}
		}
		// 类型
		.classify{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 24rpx;
			.classify-item{
				padding:0 16rpx;
				line-height: 66rpx;
				margin-right: 16rpx;
				margin-bottom: 16rpx;
				border-radius: 4px;
				background-color: rgba(255,255,255,1);
				color: rgba(16, 16, 16, 1);
				text-align: center;
				border: 1px solid rgba(216,223,232,1);
			}
			.item-checked{
				background-color: rgba(22,119,255,1);
				color: rgba(255,255,255,1);
			}
		}
		.textarea{
			margin-top: 24rpx;
			uni-textarea{
				width: 100%;
				height: 200rpx;
			}
			::v-deep.uni-textarea-placeholder{
				color: #b2b2b2;
				font-size: 32rpx;
			}
		}
		.upload{
			margin-top: 24rpx;
		}
	}
	// 底部
	.bottom{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		padding: 20rpx 32rpx;
		.submit{
			
			line-height: 80rpx;
			border-radius: 4px;
			background-color: rgba(22,119,255,1);
			color: rgba(255,255,255,1);
			font-size: 32rpx;
		}
	}

</style>