NurseStationApp/pages/appointmenttime/appointmenttime.vue

<template>
	<view class="content">
		<view class="message">请填写下面的信息</view>
		<view class="xinxi">
			<view class="user">
				<view class="item" @tap='maskshow=true'>姓名：
					<text class="name">李某某</text>
				</view>
				<view class="item" @tap='maskshow=true'>电话：
					<text class="name">18565988855</text>
				</view>
				<view class="item" @tap='maskshow=true'>地址：
					<text class="name">111</text>
				</view>
				<view class="item" @tap='timeshow2=true'>时间：
					<text class="name">9月1日</text>
				</view>
			</view>
		</view>
		<view class="taocan">套餐信息：
			<text class="price">￥60</text>
			<view>
				<text class="qiguan">
					·气管切开
				</text>
			</view>
		</view>
		<view class="haocaibao">耗材包详情：
			<text class="price2">￥60</text>
			<view class="">
				<text class="qiguan">
					·一次性换药包X1，一次性注射器X1
				</text>
			</view>
		</view>
		<view class="beizhu">备注：</view>
		<view class="xiugai">修改信息</view>
		<view class="queren">确认预约</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				maskshow: false,
				timeshow2: false,
			}
		},
		methods: {

		}
	}
</script>

<style>
	.user {
		/* background-color: #fff; */
		/* margin-bottom: 16rpx; */

		.item {
			height: 100rpx;
			width: 90%;
			margin: 0 auto;
			line-height: 100rpx;
			border-bottom: 1rpx solid #f0f1f6;
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;
			letter-spacing: 1rpx;

			text:nth-child(1) {
				color: #000000;
			}

			text:nth-child(2) {
				color: #333333;
			}
		}
	}

	.content {
		/* width: 100%; */
		min-height: 100vh;
		background-color: #F4F5F7;
		padding: 3%;
	}

	.message {
		width: 701rpx;
		height: 96rpx;
		background: white;
		/* box-shadow: 0px 9px 31px 9px rgba(0,0,0,0.03); */
		border-radius: 20rpx;
		margin: 0 auto;
		text-align: center;
		line-height: 96rpx;
		/* margin-top: 5rpx; */
		font-size: 36rpx;
	}

	.xinxi {
		width: 701rpx;
		height: 421rpx;
		background: #FFFFFF;
		/* box-shadow: 0px 9px 31px 9px rgba(0,0,0,0.03); */
		border-radius: 20rpx;
		margin-top: 3%;
	}

	.item {
		width: 100%;
		height: 100rpx;
		font-size: 36rpx;
		display: flex;
		justify-content: space-around;
		line-height: 70rpx;
		border-bottom: 1rpx solid #D8D4D4;
	}

	.name {
		width: 70%;
		/* height: 33rpx; */
		font-size: 36rpx;

		color: #666666;


	}

	.title {
		width: 90%;
		margin: 0 auto;
		font-size: 28rpx;
		padding-top: 20rpx;
		line-height: 34rpx;
		color: #000000;
		position: relative;
	}

	.taocan {
		font-size: 35rpx;
		line-height: 70rpx;
		width: 702rpx;
		height: 243rpx;
		background: #FFFFFF;
		box-shadow: 0px 9px 31px 9px rgba(0, 0, 0, 0.03);
		border-radius: 20rpx;
		margin-top: 3%;
	}

	.haocaibao {
		font-size: 33rpx;
		line-height: 65rpx;
		width: 702rpx;
		height: 188rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 3%;
	}

	.beizhu {
		font-size: 35rpx;
		line-height: 65rpx;
		width: 701rpx;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 3%;
	}

	.xiugai {
		width: 205rpx;
		height: 71rpx;
		background: #E1AE3C;
		border-radius: 26rpx;
		margin-left: 35%;
		margin-top: 10%;
		line-height: 71rpx;
		text-align: center;
		color: #ffffff;
	}

	.queren {
		width: 227rpx;
		height: 71rpx;
		background: #4C7BC9;
		border-radius: 26rpx;
		float: right;
		margin-top: -10%;
		line-height: 71rpx;
		text-align: center;
		color: #ffffff;
		/* margin-top: 3%; */
		/* margin-left: 60%; */
		/* margin-top: 10%; */
	}

	.price {
		/* float: right; */

		font-size: 32rpx;
		color: #D43953;
		margin-left: 60%;
		/* line-height: 77px; */
	}

	.price2 {
	
		font-size: 32rpx;
		color: #D43953;
		margin-left: 56%;
		
	}


	.qiguan {
		width: 301rpx;
		height: 31rpx;
		line-height: 31rpx;
		font-size: 33rpx;
		/* font-family: Adobe Heiti Std; */
		/* font-weight: normal; */
		color: #666666;
		/* text-align: center; */
		line-height: 31rpx;
		margin-left: 20%;
	}
</style>