<template>
	<view>
		<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>
							<text>x1</text>
						</view>
						<view class="info_price">
							<text>US$314.00</text>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
		<view class="goods">
			<view class="goods_title">Refunded goods</view>
			<view class="goods_content">
				<view class="goods_item">
					<image src="../../static/img/refund.png" mode=""></image>
					<text>Refund only</text>
					<view class="goods_item_text">I didn't receive the goods</view>
				</view>
				<view class="goods_item">
					<image src="../../static/img/refund1.png" mode=""></image>
					<text>Return&refund</text>
					<view class="goods_item_text">I have received the goods</view>
				</view>
			</view>
		</view>
		
		<view class="refund_price">
			<text>Refund amount：</text>
			<text class="refund_price_text">US$6.5</text>
		</view>
		<view class="refund_reason">
			<view class="reason_item">
				<view class="reason_item_left">
					<text>Refund reason </text>
					<text class="reason_item_left_text">Please select 1 refund reason</text>
				</view>
				<image src="/static/img/right1.png" mode=""></image>
				
			</view>
			
			<view class="reason_item1">
				<view class="">Notes on application</view>
				<textarea placeholder="Please supplement the refund information"></textarea>
				<view class="reason_upload">
					<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">Up to last 5 pictures</view>
				
				<navigator url="/pages/order/refundDetails">
					<button class="refund_submit">SUBMIT</button>
				</navigator>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods:{
			
		}
	}
</script>
<style>
	page{
		border-top: 14.67rpx #F6F5FA solid;
	}
</style>

<style lang="scss" scoped>
	@import "@/common/scss/order.scss";
	.order_popup_commodity{
		border-bottom: 14.67rpx solid #F6F5FA;
	}
	.goods{
		padding: 34.67rpx 27.33rpx;
		border-bottom: 14.67rpx solid #F6F5FA;
		.goods_title{
			font-size: 28.67rpx;
			font-weight: bold;
			margin-bottom: 34.67rpx;
		}
		.goods_content{
			display: flex;
			justify-content: space-between;
			
			.goods_item{
				width: 336.67rpx;
				height: 169.33rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				border: 1px solid #D3D3D3;
				border-radius: 16rpx;
				image{
					width: 40rpx;
					height: 40rpx;
					margin-bottom: 16.67rpx;
				}
				
				.goods_item_text{
					margin-top: 8rpx;
					font-size: 20rpx;
					color: #666666;
					font-weight: bold;
				}
			}
		}
	}
	.refund_price{
		padding: 38rpx 28rpx;
		font-size: 28rpx;
		border-bottom: 14.67rpx solid #F6F5FA;
		.refund_price_text{
			font-size: 32rpx;
			
		}
	}
	.refund_reason{
		font-size: 28rpx;
		padding-left: 28rpx;
		padding-right: 21.33rpx;
		.reason_item{
			padding:42.67rpx 0 ;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #E2E2E2;
			.reason_item_left{
				display: flex;
				align-items: center;
				.reason_item_left_text{
					color: #D2D2D2;
					font-weight: 400;
					display: inline-block;
					margin-left: 45.33rpx;
				}
			}
			image{
				width: 24rpx;
				height: 24rpx;
			}
		}
		.reason_item1{
			padding: 42.67rpx 0;
			
			textarea{
				font-size: 28rpx;
				font-weight: 400;
				margin-top: 40rpx;
				width: 100%;
				height: 113.33rpx;
			}
			.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_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;
			}
			.refund_submit{
				margin-top: 118rpx;
				background-color: black;
				color: white;
				font-size: 26.67rpx;
				font-weight: bold;
				width: 100%;
				height: 73.33rpx;
				line-height: 73.33rpx;
			}
		}
	}
</style>