NurseStationApp/pages/InformationFilling/InformationFilling.vue

<template>
	<view>
		<view class="app">
			<view class="info">
				<view class="user">
					<view class="item">
						<u-form-item label="姓名:" label-width="100rpx" style="font-size: 36rpx;margin-left: 35rpx;">
							<u-input />
						</u-form-item>
						<!-- <span class="texts">姓名：<u-input></u-input></span> -->
						<!-- <text>某某某</text> -->
						<!-- <input type="text" placeholder="qingshuru"> -->

					</view>
					<view class="item">
						<u-form-item label="电话:" label-width="100rpx" style="font-size: 36rpx;margin-left: 35rpx;">
							<u-input />
						</u-form-item>
					</view>
					<view class="item">
						<u-form-item label="时间:" label-width="100rpx" style="font-size: 36rpx;margin-left: 35rpx;">
							<u-input />
						</u-form-item>
					</view>
					<view class="item1">
						<u-form-item label="身份证号:" label-width="170rpx" style="font-size: 36rpx;margin-left: 35rpx;">
							<u-input />
						</u-form-item>
					</view>
				</view>
			</view>
			<view class="symptom">
				<u-form-item label="症状描述:" :border-bottom="false" label-width="170rpx" style="font-size: 36rpx;margin-left: 35rpx;">
					<u-input/>
				</u-form-item>
			</view>
			<view class="case">
				<span class="text">病例上传</span>
				<image src="../../static/jiantou.png" mode=""></image>
				<!-- <img src="/static/jiantou.png" alt=""> -->
			</view>
			<view class="case">
				<span class="text">化验单上传</span>
				<image src="../../static/jiantou.png" mode=""></image>
				<!-- <img src="/static/jiantou.png" alt=""> -->
			</view>
			<view class="btn" @tap='show=true'>确认</view>
		</view>
		<!-- 弹框 -->
		<view class="frame">
			<u-popup v-model="show" mode="bottom" length="50%"  border-radius="14">
				<view class="payment">
					<span>请选择支付方式</span>
					<view class="cencel" @tap="show = false">
						<image src="../../static/gb.png" mode=""></image>
					</view>

				</view>
				<view class="chat">
					<image src="/static/chat.png" mode=""></image>
					<span>微信支付</span>
				</view>
				<view class="submit">
					<span>确认支付</span><span>￥28元</span>
				</view>
			</u-popup>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.texts {
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #000000;
		margin-left: 5%;
	}

	.text {
		color: #000000;
		margin-left: 5%;
		line-height: 100rpx;
		// margin-top: 5%;
		// padding-top: 50rpx;
	}

	text {
		color: #969394;

	}
	.app {
		background-color: #F4F5F7;
		width: 100%;
		height: 100vh;
		position: relative;
		padding: 3%;

		// 信息填写
		.info {
			width: 99%;
			height: 373rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 9rpx 3r1px 9rpx rgba(0, 0, 0, 0.03);
			border-radius: 20px;
			margin: 0 auto;
			display: block;
			font-size: 36rpx;

			// margin-top: 33rpx;
		}

		.item {
			width: 97%;
			height: 93rpx;
			line-height: 93rpx;
			// border-bottom: 1rpx solid #D8D4D4;
			margin-left: 10rpx;
			// background-color: red;
		}

		.item1 {
			width: 97%;
			height: 93rpx;
			line-height: 93rpx;
			// border-bottom: 1rpx solid #D8D4D4;
			// background-color: red;
		}




		// 症状描述
		.symptom {
			width: 99%;
			height: 331rpx;
			background: #FFFFFF;
			font-size: 36rpx;
			box-shadow: 0px 9px 31px 9px rgba(0, 0, 0, 0.03);
			border-radius: 20px;
			margin-top: 15rpx;
			font-size: 36rpx;


		}

		// 病例上传  化验单上传
		.case {
			width: 99%;
			height: 105rpx;
			background: #FFFFFF;
			box-shadow: 0px 9px 31px 9px rgba(0, 0, 0, 0.03);
			border-radius: 20px;
			margin-top: 15rpx;
			font-size: 36rpx;

			image {
				width: 18rpx;
				height: 27rpx;
				float: right;
				margin-top: 6%;
				margin-right: 6%;
			}
		}

		// 确定按钮
		.btn {
			width: 217rpx;
			height: 68rpx;
			line-height: 68rpx;
			background: #4C7BC9;
			border-radius: 26rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			text-align: center;
			margin: 70rpx 10rpx 20rpx 440rpx;
		}

	}

	// 弹框支付
	.payment {
		width: 390px;
		height: 130rpx;
		font-size: 42rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #000000;
		line-height: 130rpx;
		text-align: center;
		margin: 0 auto;
		// margin-top: 49rpx;
		border-bottom: 1rpx solid #D8D4D4;

		image {
			width: 31rpx;
			height: 31rpx;
			float: right;
			margin-top: -10%;
			// margin-right: 5%;
			// padding-left: 50%;
		}

	}

	.chat {
		// height: 200rpx;

		span {
			display: block;
			height: 68rpx;
			font-size: 42rpx;
			color: #000000;
			line-height: 68rpx;
			margin-left: 25%;
			// background-color: red;
			// float: left;
			margin-top: -10%;
		}

		image {
			width: 79rpx;
			height: 69rpx;

			margin-top: 7%;
			// margin-right: 5%;
			padding-left: 10%;
		}
	}

	.submit {
		width: 501rpx;
		height: 71rpx;
		line-height: 71rpx;
		background: #4C7BC9;
		border-radius: 26rpx;
		font-size: 34rpx;
		color: #FFFFFF;
		text-align: center;
		margin: 0 auto;
		margin-top: 40%;
	}
</style>