<template>
	<view>
		<uni-nav-bar  :statusBar="true" left-icon="left"   title="Review" color="#000000"   :fixed="true" @clickLeft="back">
			<block slot="right">
				<view class="nav_right">
					<button>Submit</button>
				</view>
			</block>
		</uni-nav-bar>
		<view class="body">
			<view class="order_popup_commodity">
				<view class="good_info" v-for="(item,index) in 1 " :key="index">
					<view class="good_info_left ">
						<view class="good_info_image" v-for="(item,index) in 1" :key="index"></view>
						<view class="left_info">
							<view class="info_name">Adidas Yeezy Boost 350 V2  DazzlingBlue Black GY7164 Men's</view>
							<view class="left_info_bottom">
								<view class="info_lable">
									<text>Multicolor;41</text>
									<image src="/static/img/bottom.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				
			</view>
			
			<view class="review">
				<view class="review_title">
					<text>Score</text>
					<uni-rate size="22"  disabledColor="red" :value="0"  active-color="red" :is-fill="false" class="rate"/>
				</view>
				<view class="review_content">
					<image src="../../static/img/write.png" mode=""></image>
					<textarea placeholder="Write reviews"></textarea>
				</view>
				<view class="reason_upload">
					<view class="reason_upload_item">
						<image src="/static/img/vedio.png" class="upload_item_camera1" mode=""></image>
						<view>Upload the video</view>
					</view>
					<view class="reason_upload_item">
						<image src="/static/img/camera.png" class="upload_item_camera" mode=""></image>
						<view>Upload pictures</view>
					</view>
					
					<view class="reason_upload_item reason_upload_item1">
						<image src="/static/img/logo.png" class="upload_item_image" mode=""></image>
					</view>
					
				</view>
				<view class="reason_upload_tips">Upload JPG, PNG format, within 3M</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods:{
			back(){
				uni.navigateBack()
			}
		}
	}
</script>


<style lang="scss" scoped>
	.review{
		padding: 0 26rpx;
		padding-top: 35.33rpx;
		
		.review_title{
			display: flex;
			align-items: center;
			font-weight: bold;
			font-size: 32rpx;
			margin-bottom: 44rpx;
			.rate{
				margin-left: 24.67rpx;
			}
		}
		.review_content{
			display: flex;
			image{
				width: 29.33rpx;
				height: 29.33rpx;
			}
			textarea{
				font-size: 28rpx;
				font-weight: 400;
				width: 100%;
				height: 113.33rpx;
				margin-left: 4rpx;
			}
		}
		.reason_upload{
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 34.67rpx;
			.reason_upload_item{
				border: 1px dashed #D2D2D2;
				border-radius: 15rpx;
				width: 156rpx;
				height: 156rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				font-size: 12rpx;
				color: #BFBCBC;
				margin-right: 23.33rpx;
				
				&:nth-child(3n+3){
					margin-right: 0;
				}
				.upload_item_camera{
					width: 72rpx;
					height: 54.67rpx;
					margin-bottom: 14rpx;
				}
				.upload_item_camera1{
					width: 72rpx;
					height: 72rpx;
					// margin-bottom: 14rpx;
					
				}
				.upload_item_image{
					width: 100%;
					height: 100%;
					border-radius: 15rpx;
				}
			}
			.reason_upload_item1{
				position: relative;
				&::after{
					content: "";
					width: 30.67rpx;
					height: 30.67rpx;
					position: absolute;
					right: -12rpx;
					top: -12rpx;
					z-index: 99;
					background-image: url("@/static/img/close3.png");
					background-size: 100% 100%;
				}
			}
		}
		.reason_upload_tips{
			font-size: 20rpx;
			color: #666666;
		}
	}
	.uni-navbar{
		font-size: 32rpx;
		font-weight: bold;
	}
	.nav_right{
		
		
		button{
			width: 116.67rpx;
			height: 48rpx;
			background-color: black;
			margin: 0;
			line-height: 48rpx;
			border-radius: 24rpx;
			font-size: 24rpx;
			font-weight: bold;
			color: white;
			padding-left: 0;
			padding-right: 0;
		}
	}
	.body{
		border-top: 14.67rpx #F6F5FA solid;
	}
	.order_popup_commodity{
		padding: 0 33.33rpx;
		border-bottom: 14.67rpx #F6F5FA solid;
	}
	
</style>