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>
</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;
	}
}
</style>