null/pages/order/refund.vue

<template>
	<view class="page">
		<view class="p-pro flex-col">
			<text class="title">退款盲盒</text>
			<view class="flex-row group_7">
				<image src="/static/temp/pro.png" class="img" mode="aspectFill" />
				<view class="flex-col group_8">
					<view class="flex-row justify-between group_9">
						<text class="name clamp">幸福西饼Rice盲盒</text>
						<text class="price">￥80.40</text>
					</view>
					<view class="flex-col group_10">
						<view class="group_11">
							<text class="text_5">配送方式：</text>
							<text class="text_6">自提</text>
						</view>
						<text class="text_7">共1件</text>
					</view>
					<view class="group_12">
						<text class="text_8">自提地址：</text>
						<text class="text_9">河东区万达广场1F东门入口</text>
					</view>
				</view>
			</view>
		</view>
	    <view class="p-info flex-col">
			  <text class="text_10">退款信息</text>
			  <view class="flex-row justify-between group_13">
			    <text class="text_11">货物状态</text>
			    <view class="flex-row">
			      <text class="text_13">请选择</text>
			      <image
			        src="/static/refund-rarrow.png"
			        class="image_6"
			      />
			    </view>
			  </view>
			  <view class="flex-row justify-between group_13">
			    <text class="text_11">退款原因</text>
			    <view class="flex-row">
			      <text class="text_13">请选择</text>
			      <image
			        src="/static/refund-rarrow.png"
			        class="image_6"
			      />
			    </view>
			  </view>
			  <view class="flex-col group_16">
			    <view class="flex-row justify-between">
			      <text class="text_17">退款金额</text>
			      <text class="text_18">￥149.00</text>
			    </view>
			    <text class="text_19">可修改，请与商家协商一致后填写</text>
			  </view>
		</view>
	    <view class="p-desc flex-col items-start ">
			  <text class="title">描述信息</text>
			  <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/refund-add.png"
			  	  class="img"
			  	/>
			  </view>
		</view>
		<safe-area height="94rpx">
			<template v-slot:btn>
				<view class="btn-wrap">
						提交
				</view>
			</template>
		</safe-area>
	</view>
</template>

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

<style lang="scss">
page {
	background-color: #f8f8f8;
}
.page {
	padding: 30rpx;
}
.p-pro {
	padding: 22rpx 18rpx 25rpx 20rpx;
	background-color: #ffffff;
	box-shadow: 0px 6rpx 10rpx #2a2a2a14;
	border-radius: 20rpx;
	.title {
		align-self: flex-start;
		color: #333333;
		font-size: 32rpx;
		font-family: PingFang;
	}
	.group_7 {
		margin-top: 22rpx;
		padding-left: 3rpx;
	}
	.img {
		flex-shrink: 0;
		width: 154rpx;
		height: 154rpx;
		border-radius: 10rpx;
	}
	.group_8 {
		margin-left: 23rpx;
		flex: 1 1 auto;
	}
	.group_9 {
		padding-left: 2rpx;
	}
	.name {
		color: #333333;
		font-size: 30rpx;
		font-family: PingFang;
		max-width: 359rpx;
	}
	.price {
		margin-bottom: 6rpx;
		color: #ff3e3e;
		font-size: 30rpx;
		font-family: PingFang;
	}
	.group_10 {
		margin-top: 7rpx;
		height: 35rpx;
	}
	.group_11 {
		margin-top: 12rpx;
		align-self: flex-start;
		line-height: 23rpx;
	}
	.text_5 {
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
		line-height: 23rpx;
	}
	.text_6 {
		color: #333333;
		font-size: 24rpx;
		font-family: PingFang;
		line-height: 23rpx;
	}
	.text_7 {
		margin-right: 25rpx;
		margin-top: -35rpx;
		align-self: flex-end;
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
		line-height: 23rpx;
	}
	.group_12 {
		margin-top: 19rpx;
		align-self: flex-start;
		line-height: 23rpx;
	}
	.text_8 {
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
		line-height: 23rpx;
	}
	.text_9 {
		color: #333333;
		font-size: 24rpx;
		font-family: PingFang;
		line-height: 23rpx;
	}
}
.p-info{
	  margin-top: 24rpx;
	  padding: 30rpx 18rpx 40rpx 20rpx;
	  background-color: #ffffff;
	  box-shadow: 0px 6rpx 10rpx #2a2a2a14;
	  border-radius: 20rpx;
	.text_10 {
	  align-self: flex-start;
	  color: #333333;
	  font-size: 32rpx;
	  font-family: PingFang;
	  line-height: 31rpx;
	}
	.group_13 {
	  margin-top: 49rpx;
	  padding: 0 5rpx;
	}
	.text_11 {
	  color: #333333;
	  font-size: 30rpx;
	  font-family: PingFang;
	  letter-spacing: 1.2rpx;
	}
	.text_13 {
	  color: #999999;
	  font-size: 30rpx;
	  font-family: PingFang;
	  letter-spacing: 1.2rpx;
	}
	.image_6 {
	  margin: 4rpx 0 4rpx 14rpx;
	  flex-shrink: 0;
	  width: 12rpx;
	  height: 20rpx;
	}
	.group_16 {
	  margin-top: 49rpx;
	  padding-left: 5rpx;
	}
	.text_17 {
	  color: #333333;
	  font-size: 30rpx;
	  font-family: PingFang;
	  letter-spacing: 1.2rpx;
	}
	.text_18 {
	  margin: 3rpx 0;
	  color: #fc4d37;
	  font-size: 30rpx;
	  font-family: PingFang;
	  letter-spacing: 1.2rpx;
	}
	.text_19 {
	  margin-left: 30rpx;
	  margin-top: 19rpx;
	  align-self: flex-start;
	  color: #999999;
	  font-size: 24rpx;
	  font-family: PingFang;
	}
}
.p-desc{
	  margin-top: 24rpx;
	  padding: 30rpx 19rpx;
	  background-color: #ffffff;
	  box-shadow: 0px 6rpx 10rpx #2a2a2a14;
	  border-radius: 20rpx;
	.title {
	  color: #333333;
	  font-size: 32rpx;
	  font-family: PingFang;
	}
	.area{
		 height: 160rpx;
	     color:#333;
		 font-size: 24rpx;
		 line-height: 36rpx;
		 padding: 30rpx;
	}
	.img-wrap{
		flex-wrap: wrap;
		.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: 118rpx;
		  height: 118rpx;
		  
		  &:nth-child(5n){
			  margin-right: 0;
		  }
		}
	}
}
.btn-wrap{
	width: 690rpx;
	height: 94rpx;
	background: $base-color;
	border-radius: 47rpx;
	margin: 0  auto;


	font-size: 34rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #FFFFFF;
	line-height: 94rpx;
	text-align: center;
	
}

</style>