pages/sub_medical/confirm.vue

<template>
	<view class="confirm">
		<view class="confirm-header">
			<u-image src="./images/hospital.png" width="100" mode="widthFix"></u-image>
			<view class="confirm-header-partmsg">
				<text class="confirm-header-partmsg-title">心内科</text>
				<text class="confirm-header-partmsg-subtitle">大理市第一人民医院（总院）</text>
			</view>
		</view>
		<view class="confirm-part">
			<view class="confirm-part-item">
				<text class="confirm-part-item-title">就诊时间：</text>
				<text class="confirm-part-item-subtitle">2020-10-20/周一/上午</text>
			</view>
			<view class="confirm-part-item">
				<text class="confirm-part-item-title">就诊地点：</text>
				<text class="confirm-part-item-subtitle">云南省大理市大苏打大撒</text>
			</view>
		</view>
		<view class="confirm-member">
			<u-cell-group>
				<u-cell-item title="选择就诊人" value="就诊人管理" :value-style="style" @click="toPath('/pages/sub_medical/patient')"></u-cell-item>
			</u-cell-group>
			<view class="confirm-member-msg">
				<u-field label="就诊人员" placeholder="李小明/男/24岁" disabled required :placeholder-style="mstyle" input-align="right" :border-bottom="false"></u-field>
				<u-field label="证件号码" placeholder="32323423423****3123" disabled required :placeholder-style="mstyle" input-align="right" :border-bottom="false"></u-field>
				<u-field label="就诊卡号" placeholder="321321441" disabled required :placeholder-style="mstyle" input-align="right" :border-bottom="false"></u-field>
				<u-field label="联系电话" placeholder="130****3322" disabled :placeholder-style="mstyle" input-align="right" :border-bottom="false"></u-field>
			</view>
		</view>
		<u-button :custom-style="btn">提交预约</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				style: {
					color: '#2FA8E1'
				},
				mstyle:'color:#333333',
				btn: {
					backgroundColor: ' #2FA8E1',
					padding: '50rpx 0',
					color: '#FFFFFF',
					width: ' 650rpx',
					fontSize: '30rpx',
					border: '1px solid #2FA8E1',
					marginTop:'50rpx'
				},
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.u-field{
		color: #a1a1a1;
	}
	.u-cell {
		padding: 30rpx 10rpx;
	}
	.u-cell__right-icon-wrap {
		height: 54rpx;
	}
	.confirm {
		font-family: "PingFang-SC-Medium";

		&-header {
			padding: 10rpx;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			margin-bottom: 3rpx;

			&-partmsg {
				margin-left: 30rpx;
				display: flex;
				flex-direction: column;

				&-title {
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 6rpx;
				}

				&-subtitle {
					color: #6A6A6A;
				}
			}
		}

		&-part {
			background-color: #FFFFFF;
			padding: 30rpx 20rpx;

			&-item {
				margin-bottom: 10rpx;

				&-title {
					color: #A1A1A1;
				}

				&-subtitle {
					color: #333333;
				}
			}
		}

		&-member {
			background-color: #FFFFFF;
			margin: 30rpx 0;
		}
	}
</style>