xinelu-doctor-app/pages/Completedwork/Completedwork.vue

<template>
	<view class="app">
		<view class="top">
			<view class="text">
				肚子不舒服
			</view>
			<view class="price">
				￥200

			</view>
		</view>
		<view class="bodys">
			<view class="time">
				时间
			</view>
			<view class="datatime">
				<span>2023-09-21 13:30-14:00</span>

			</view>
		</view>
		<view class="bottom">
			<view class="time">
				患者信息
			</view>
			<view class="info">
				姓名：万鹏
			</view>
			<view class="info">
				性别：男
			</view>
			<view class="info">
				身份证号：372401199705254567
			</view>
			<view class="info">
				手机号码：13454678907
			</view>
			<view class="info">
				家庭住址：北京市昌平区振兴街幸福里
			</view>

		</view>
	</view>
</template>

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

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.app {
		background: #F1F1F1;
		height: 100vh;

		.top {
			display: flex;
			width: 96%;
			height: 102rpx;
			background: #FFFFFF;
			border-radius: 14rpx;
			position: relative;
			left: 50%;
			margin: 30rpx 0 30rpx 0;
			line-height: 102rpx;
			transform: translateX(-50%);

			.text {
				font-size: 32rpx;
				font-family: SourceHanSansSC-Medium, SourceHanSansSC;
				font-weight: 500;
				color: #333333;
				padding-left: 30rpx;
			}

			.price {
				position: absolute;
				right: 20rpx;
				top: 50%;
				transform: translateY(-50%);
				font-size: 38rpx;
				font-family: Adobe Heiti Std;
				color: #EE2B2B;


			}

		}

		.bodys {
			width: 96%;
			height: 200rpx;
			background: #FFFFFF;
			border-radius: 14rpx;
			margin: 30rpx 0 30rpx 0;
			left: 50%;
			position: relative;
			transform: translateX(-50%);

			.time {
				width: 96%;
				padding-left: 30rpx;
				border-bottom: 1rpx solid #E6E6E6;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 28rpx;
				font-family: SourceHanSansSC-Medium, SourceHanSansSC;
				font-weight: 500;
				color: #333333;
				left: 50%;
				position: relative;
				transform: translateX(-50%);

			}

			.datatime {
				width: 690rpx;
				height: 72rpx;
				line-height: 72rpx;
				background: #F7F9F8;
				border-radius: 14rpx;
				padding-left: 30rpx;
				left: 50%;
				top:18rpx;
				position: relative;
				transform: translateX(-50%);

			}
		}

		.bottom {
			width: 96%;
			height: 470rpx;
			background: #FFFFFF;
			border-radius: 14rpx;
			margin: 30rpx 0 30rpx 0;
			left: 50%;
			position: relative;
			transform: translateX(-50%);

			.time {
				width: 96%;
				padding-left: 30rpx;
				border-bottom: 1rpx solid #E6E6E6;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 28rpx;
				font-family: SourceHanSansSC-Medium, SourceHanSansSC;
				font-weight: 500;
				color: #333333;
				left: 50%;
				position: relative;
				transform: translateX(-50%);

			}

			.datatime {
				width: 690rpx;
				height: 72rpx;
				line-height: 72rpx;
				background: #F7F9F8;
				border-radius: 14rpx;
				padding-left: 30rpx;
				left: 50%;
				position: relative;
				transform: translateX(-50%);

			}

			.info {
				width: 96%;
				height: 72rpx;
				line-height: 72rpx;
				padding-left: 30rpx;
				// background: red;
				left: 50%;
				position: relative;
				transform: translateX(-50%);

				font-size: 24rpx;
				font-family: SourceHanSansSC-Medium, SourceHanSansSC;
				font-weight: 500;
				color: #333333;

			}

		}

	}
</style>