NurseStationApp/pages/refundType/refundType.vue

<template>
	<view class="app">
		<view class="content">
			<view class="name">
				退款商品
			</view>
			<view class="details">
				<view class="detailslist">
					<image src="../../static/shangpingdingdan.png" mode=""></image>
					<view class="model">
						<view class="top">
							<span>酒精棉片 200片</span>
							<span>￥36.0</span>
						</view>
						<view class="bottom">
							<span>型号：酒精棉片 8盒</span>
							<span>×1</span>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		<view class="refundinfo">
			<view class="refund">
				选择退款类型
			</view>
			<view class="myrefund">
				<image class="images" src="../../static/myrefund.png" mode=""></image>
				<view class="refundfo">
					<view>我要退款(无需退货)</view>
					<view class="text">没收到货</view>
				</view>
				<image class="picture pictures" src="../../static/rowsright.png" mode=""></image>
			
			</view>
			<view class="myrefund">
				<image class="images" src="../../static/refundgoods.png" mode=""></image>
				<view class="refundfo">
					<view>我要退款退货退款</view>
					<view class="text">已收到货，需要退还收到的获取</view>
				</view>
					<image class="picture" src="../../static/rowsright.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

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

<style lang="scss">
	.app{
		height: 100vh;
		.content {
				width: 95%;
				hheight: 302rpx;;
				background: #FFFFFF;
				box-shadow: 0px 9px 31px 9px rgba(0, 0, 0, 0.03);
				border-radius: 20px;
				margin: 0 auto;
				.name {
					width: 95%;
					height: 90rpx;
					font-size: 30rpx;
					color: #030303 ;
					line-height: 90rpx;
					border-bottom: 1rpx solid #D8D4D4;
					margin: 0 auto;
		
					image {
						width: 15rpx;
						height: 23rpx;
						padding-left: 25rpx;
					}
				}		
				.details {
					height: 250rpx;
					.detailslist {
						display: flex;		
						image {
							width: 182rpx;
							height: 182rpx;
							margin: 20rpx 0 0 20rpx;
						}
						.model {
							width: 70%;
							margin: 30rpx 0 0 20rpx;
							span {
								font-size: 38rpx;
								color: #000000;
							}	
							span:nth-child(2) {
								color: #969394;
								float: right;
								margin-right: 30rpx;
							}	
							.bottom {
								margin-top: 20rpx;
								span{
									font-size: 35rpx;
									color: #969394;
								}
							}
						}
					}
		
				}
			}
			.refundinfo{
				width: 95%;
				height: 302rpx;
				background: #FFFFFF;
				box-shadow: 0px 9rpx 31rpx 9rpx rgba(0,0,0,0.03);
				border-radius: 20rpx;
				margin: 0 auto;
				margin-top: 20rpx;
				font-size: 30rpx;
				color: #030303;
				.refund{
					height: 70rpx;
					line-height: 70rpx;
						width: 95%;
						margin: 0 auto;
					border-bottom: 1px solid #D8D4D4;
				}
				.myrefund{
					display: flex;
					width: 95%;
					margin: 20rpx auto;
					height: 80rpx;
					// background-color: red;
					.images{
					width: 46rpx;
					height: 42rpx;
					margin-top: 20rpx;
					}
					.picture{
						width: 18rpx;
						height: 27rpx;
						margin-top: 20rpx;
						position:absolute;
						right:60rpx;
					}	
					.refundfo{
						font-size: 28rpx;
						color: #030303;
						margin-left: 20rpx;
					}
					.text{
						font-size: 20rpx;
						color: #BAB7B8;
					}
				}
			}

		}

</style>