xinelu-applet-ui/pagesB/createnewconsultation/createnewconsultation.vue

<template>
	<view class="app">
		<view class="title">
			<view class="left">
			</view>
			<view class="right">
				第一步：填写个人信息
			</view>
		</view>
		<view class="item">
			<view class="text">
				现住址所在区
			</view>
			<view class="input">
				<input class="uinput" placeholder="请选择所属地区" type="text" placeholder-class="phsy" />
				<image src="../../static/huijiantou.png" mode=""></image>
			</view>
			<view class="text">
				患者姓名
			</view>
			<view class="input">
				<input class="uinput noimageuinput" placeholder="请输入患者姓名" type="text" placeholder-class="phsy" />
			</view>
			<view class="text">
				患者身份证号
			</view>
			<view class="input">
				<input class="uinput noimageuinput" placeholder="请输入患者身份证号" type="text" placeholder-class="phsy" />
			</view>
			<view class="text">
				患者联系电话
			</view>
			<view class="input">
				<input class="uinput noimageuinput" placeholder="请输入患者联系电话" type="text" placeholder-class="phsy" />
			</view>
		</view>
		<view class="title">
			<view class="left">
			</view>
			<view class="right">
				第二步：填写问诊信息
			</view>
		</view>
		<view class="item">
			<view class="text">
				问题简述
			</view>
			<view class="input">
				<input class="uinput noimageuinput" placeholder="不多于五个字" type="text" placeholder-class="phsy" />
			</view>
			<view class="text">
				患者个体情况说明
			</view>
			<view class="input" style="height: 200rpx;overflow-Y: scroll;">
				<u-input class="uinput noimageuinput" placeholder=" " type="textarea" :maxlength="100" />
			</view>
			<view class="text">
				问题描述
			</view>
			<view class="input" style="height: 200rpx;overflow-Y: scroll;">
				<u-input class="uinput noimageuinput" placeholder=" " type="textarea" :maxlength="500" />
			</view>
			<view class="text">
				既往疾病史
			</view>
			<view class="input" style="height: 200rpx;overflow-Y: scroll;">
				<u-input class="uinput noimageuinput" placeholder=" " type="textarea" :maxlength="100" />
			</view>
		</view>
		<view class="title">
			<view class="left">
			</view>
			<view class="right">
				第三步：上传附件文件
			</view>
		</view>
		<view class="item">
			<view class="text">
				附件材料上传
			</view>
		</view>
		<view class="btns">
			<view class="btnleft">
				返回
			</view>
			<view class="btnright">
				保存
			</view>
		</view>
	</view>
</template>

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

			};
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4F5F7;
	}

	.app {
		padding-top: 10rpx;
		width: 100%;

		.btns {
			width: 100%;
			display: flex;
			font-size: 31rpx;
			justify-content: space-around;
			text-align: center;
			font-weight: 500;
			margin-top: 80rpx;
			padding-bottom: 50rpx;

			.btnleft {
				width: 290rpx;
				height: 62rpx;
				background: #FFFFFF;
				border: 1px solid #26A888;
				border-radius: 5rpx;
				color: #26A888;
				line-height: 62rpx
			}

			.btnright {
				width: 289rpx;
				height: 62rpx;
				background: #26A888;
				border-radius: 5rpx;
				color: #FFFFFF;
				line-height: 62rpx;
			}
		}

		.item {
			width: 96%;
			margin: 20rpx auto;
			background-color: #fff;
			box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
			border-radius: 5rpx;
			padding-bottom: 50rpx;

			.text {
				font-size: 30rpx;
				font-weight: 400;
				color: #333333;
				padding: 30rpx 0 0 40rpx;
			}

			.input {
				width: 90%;
				height: 80rpx;
				border-radius: 5rpx;
				background: #f6f6f6;
				margin: 20rpx 0 0 40rpx;
				position: relative;
				padding-left: 10rpx;

				image {
					width: 10rpx;
					height: 20rpx;
					position: absolute;
					top: 50%;
					right: 5%;
					transform: translateY(-50%);
				}

				.uni-textarea-placeholder {
					padding-left: 12rpx;
					font-size: 22rpx;
					font-weight: 400;
					color: #8E8E8E !important;
				}

				.phsy {
					padding-left: 12rpx;
					font-size: 22rpx;
					font-weight: 400;
					color: #8E8E8E !important;
				}

				.uinput {
					color: black;
					font-size: 26rpx;
					width: 90%;
					height: 80rpx;
					line-height: 80rpx;
				}

				.noimageuinput {
					width: 98% !important;
				}
			}
		}

		.title {
			width: 100%;
			padding: 10rpx 0 10rpx 35rpx;

			.left {
				vertical-align: middle;
				display: inline-block;
				width: 10rpx;
				height: 30rpx;
				background: #26A888;
				border-radius: 1rpx;
			}

			.right {
				vertical-align: middle;
				display: inline-block;
				font-size: 30rpx;
				font-weight: 500;
				color: #26A888;
				line-height: 30rpx;
				margin-left: 20rpx;
			}
		}
	}
</style>