NurseStationApp/pages/appointmenttime/appointmenttime.vue

<template>
	<view class="content">
		<view class="message">请填写下面的信息</view>
		<view class="xinxi">
			<view class="user">
				<view class="item">
					<span class="texts">姓名：</span>
					<!-- <text>某某某</text> -->
					<!-- <input type="text"> -->
					<u-input  />
				</view>
				<view class="item">
					<span class="texts">电话：</span>
					<!-- <text>18888888888</text> -->
					<u-input  />
				</view>
				<view class="item">
					<span class="texts">时间：</span>
					<u-input  />
				</view>
				<view class="item1">
					<span class="texts">地址：</span>
				<u-input  />
				</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">
			<span>备注：</span>
				<input placeholder="">
		</view>
		<view class="xiugai">修改信息</view>
		<view class="queren">确认预约</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				maskshow: false,
				timeshow2: false,
			}
		},
		methods: {

		}
	}
</script>

<style>
	.text {
		color: #000000;
		margin-left: 1%;
		line-height: 100rpx;
	
	}
	.texts {
		margin-left: 5%;
	}

	.item {
		width: 97%;
		height: 93rpx;
		/* line-height: 93rpx; */
		border-bottom: 1rpx solid #D8D4D4;
		margin-left: 10rpx;
		display: flex;
		align-items: center;
		font-size: 36rpx;
	}
	.item1 {
		width: 97%;
		height: 93rpx;
		/* line-height: 93rpx; */
		margin-left: 10rpx;
		display: flex;
		align-items: center;
		font-size: 36rpx;
	}
	.content {
		/* width: 100%; */
		min-height: 110vh;
		background-color: #F4F5F7;
		padding: 3%;
	}

	.message {
		width: 99%;
		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: 99%;
		height: 400rpx;
		background: #FFFFFF;
		/* box-shadow: 0px 9px 31px 9px rgba(0,0,0,0.03); */
		border-radius: 20rpx;
		margin-top: 3%;
	}
	.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 {
		padding: 3%;
		line-height: 12rpx;
		font-size: 35rpx;
		line-height: 70rpx;
		width: 702rpx;
		height: 243rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 3%;
	}

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

	.beizhu {
		padding: 3%;
		line-height: 12rpx;
		font-size: 35rpx;
		line-height: 65rpx;
		width: 701rpx;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 3%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.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;

	}

	.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>