<template>
	<view class="app">
		<view class="record">
			<view class="time">
				<text>2022-10-11 15:44</text>
				<text class="service">服务中</text>
			</view>
			<view class="recordinfo">
				<view class="img">
				</view>
				<view class="texts">
					<text class="name">某某某</text>
					<view class="doctor">
						<text>内科门诊-主任医师</text>
					</view>
					
				</view>
			</view>
			<view class="Apayment">
				<view class="pay">
					<text class="money">实付款:</text>
					<text class="price">￥28.0</text>
				</view>
				
				<view class="result">
					查看结果
				</view>
			</view>
		</view>
		<view class="record">
			<view class="time">
				<text>2022-10-11 15:44</text>
				<text class="service">服务中</text>
			</view>
			<view class="recordinfo">
				<view class="img">
				</view>
				<view class="texts">
					<text class="name">某某某</text>
					<view class="doctor">
						<text>内科门诊-主任医师</text>
					</view>
					
				</view>
			</view>
			<view class="Apayment">
				<view class="pay">
					<text class="money">实付款:</text>
					<text class="price">￥28.0</text>
				</view>
				
				<view class="result">
					查看结果
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.app {
		background-color: #F4F5F7;
		width: 100%;
		height: 100vh;
		position: relative;
		padding: 4%;

		.record {
			width: 99%;
			height: 427rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
			border-radius: 20rpx;
			margin-bottom: 10rpx;

			.time {
				width: 90%;
				height: 80rpx;
				font-size: 30rpx;
				margin: 0 auto;
				color: #969394;
				line-height: 80rpx;
				border-bottom: 1rpx solid #D8D4D4;

				.service {
					height: 67rpx;
					color: #4C7BC9;
					line-height: 67rpx;
					margin-left: 45%;
					// float: left;
				}

			}
		}

		.recordinfo {
			width: 90%;
			height: 230rpx;
			// background-color: red;
			margin: 0 auto;
			display:flex;

			.img {
				width: 169rpx;
				height: 171rpx;
				background: #BFBFBF;
				margin-top: 3%;
				border-radius: 25rpx;
			}

			.texts {
				
					margin-top: 7%;
				// width: 169rpx;
				height: 171rpx;
				margin-left: 6%;
				// background: #BFBFBF;
				.name{
					height: 70rpx;
					font-size: 38rpx;
					

					color: #000000;
					line-height: 70rpx;
				}
				.doctor{
					height: 60rpx;
					font-size: 35rpx;
					color: #969394;
					line-height: 60rpx;
				}
			}
		}
		.Apayment{
			width: 90%;
			margin: 0 auto;
			// background-color: red;
			display: flex;
			.money{

				height: 29rpx;
				font-size: 30rpx;
				color: #969394;
				line-height: 29rpx;
				// margin-top: -40px;
			}
			.price{
				font-family: Adobe Heiti Std;
				font-weight: normal;
				line-height: 29rpx;
				height: 29rpx;
				font-size: 41rpx;
				color: #000000;
				line-height: 77rpx;
			}
			.result{
				width: 217rpx;
				height: 68rpx;
				line-height: 68rpx;
				background: #4C7BC9;
				font-size: 32rpx;
				border-radius: 26rpx;
				color: #FFFFFF;
				text-align: center;
				margin-left: 30%;
			}
		}

	}
</style>
