jp-education-student/pages/parents/course/coursePrediction.vue

<template>
	<view>
		<u-navbar title="课程报名"></u-navbar>
		<view class="infos">
			<view class="item">
				<view class="title">
					<text class="asterisk">*</text>
					<text>报名班级</text>
				</view>

				<view class="value">
					<text>足球体适能班</text>
					<text class="icon">
						<u-icon name="arrow-right" color="#c8c8c8"></u-icon>
					</text>
				</view>

			</view>
			<view class="item">
				<view class="title">
					<text class="asterisk">*</text>
					<text>授课老师</text>
				</view>

				<view class="value">
					<text>瞿明祥</text>
					<text class="icon">
						<u-icon name="arrow-right" color="#c8c8c8"></u-icon>
					</text>
				</view>

			</view>

		</view>

		<view class="infos">
			<view class="item">
				<view class="title">
					<text class="asterisk">*</text>
					<text>学员姓名</text>
				</view>

				<view class="value">
					<text class="add">请先添加子女信息</text>
					<text class="icon">
						<u-icon name="arrow-right" color="#c8c8c8"></u-icon>
					</text>
				</view>

			</view>
			<view class="item">
				<view class="title">
					<text>年龄</text>
				</view>

				<view class="value">
					<text class="placeholder">选择学员后自动显示</text>

				</view>

			</view>
			<view class="item">
				<view class="title">
					<text class="asterisk">*</text>
					<text>联系人手机号</text>
				</view>

				<view class="value">
					<text>15500001111</text>

				</view>

			</view>

		</view>

		<view class="infos">
			<view class="item">
				<view class="title">
					<text>第二联系人手机号</text>
				</view>

				<view class="value">
					<text class="placeholder">
						<input type="text" placeholder="请填写手机号">
					</text>

				</view>

			</view>
			<view class="item">
				<view class="title">

					<text>接送家长姓名</text>
				</view>

				<view class="value">
					<text class="placeholder">
						<input type="text" placeholder="请填写家长姓名">
					</text>

				</view>

			</view>

		</view>

		<view class="btn">
			<button>保存并确认订单
			</button>
		</view>


	</view>
</template>

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

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.infos {
		padding: 0px 30rpx;
		background-color: #fff;
		margin-bottom: 24rpx;

		.item {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid rgba(244, 244, 244, 1);
			padding: 24rpx 0;

			.title {
				color: #333333;
				font-weight: bold;

				.asterisk {
					color: rgba(244, 68, 68, 1);
				}
			}

			.value {
				color: rgba(51, 51, 51, 1);
				font-weight: bold;

				.icon {
					margin-left: 8rpx;
				}

				.add {
					color: #FF3D00;
				}

				.placeholder {
					color: #CCCCCC;
				}
			}
		}
	}

	.btn {
		padding: 20rpx 0;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;

		button {
			width: 91.4%;
			border-radius: 50px;
			background-color: rgba(13, 186, 199, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 16px;
			line-height: 80rpx;

		}
	}

	/deep/uni-input {
		width: 300rpx;
		text-align: right !important;

	}

	/deep/.uni-input-placeholder {
		color: #cccccc !important;
	}
</style>