reservation.vue 3.36 KB

<template>
	<div class="content">
		<div class="top-space"></div>
		<div class="box">
			<div class="gird-g form">

				<div class="pure-u-1 pure-u-md-1-2 form-item">
					<div class="label">
						<img src="@/assets/images/reservation/icon-re-name.png"> 姓名
					</div>
					<div class="ipt-wrap">
						<input placeholder="姓名" class="ipt" type="text">
					</div>
				</div>

				<div class="pure-u-1 pure-u-md-1-2 form-item">
					<div class="label">
						<img src="@/assets/images/reservation/icon-re-contact.png">聯絡方式
					</div>
					<div class="ipt-wrap">
						<img class="down-arrow" src="@/assets/images/reservation/re-down-arrow.png" alt="">
						<select class="ipt">
							<option>電話</option>
						</select>
					</div>
				</div>

				<div class="pure-u-1 pure-u-md-1-2 form-item">
					<div class="label">
						<img src="@/assets/images/reservation/icon-re-name.png">聯絡电话
					</div>
					<div class="ipt-wrap">
						<input placeholder="香港號碼/內地號碼" class="ipt" type="text">
					</div>
				</div>

				<div class="pure-u-1 pure-u-md-1-2 form-item">
					<div class="label">
						<img src="@/assets/images/reservation/icon-re-clock.png">預約類型
					</div>
					<div class="ipt-wrap">
						<img class="down-arrow" src="@/assets/images/reservation/re-down-arrow.png" alt="">
						<select class="ipt">
							<option>投保咨詢</option>
						</select>
					</div>
				</div>

				<div class="pure-u-1 form-item">
					<div class="label">
						<img src="@/assets/images/reservation/icon-re-arrow-reservation.png">預約說明
					</div>
					<div class="ipt-wrap">
						<textarea class="ipt textarea"></textarea>
					</div>
				</div>

				<div class="pure-u-1 form-item form-item2">
					<div class="label">
						<img src="@/assets/images/reservation/icon-re-custom.png">是否平安香港客戶
					</div>
					<div class="cont">
						<div class="boo-btn active"></div>
						<div class="boo-btn">不是</div>
					</div>
				</div>

				<div class="pure-u-1 form-item form-item3">
					<div class="label">
						<img src="@/assets/images/reservation/icon-re-calendar.png">期望联络时间
					</div>
					<div class="cont">
						<div class="calendar">
							<img src="@/assets/images/reservation/re-calendar.png">
						</div>
					</div>
				</div>

			</div>
		</div>

		<div class="box notice">
			<p class="notice-item">
				<img class="notice-item-icon" src="@/assets/images/reservation/icon-re-notice.png"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本表格所收集的个人资料根据「平安人寿香港个人资料收集声明」处理及只会被用作于联络 阁下之用。然而所收集的个人资料未经您明确授权将不会转移至「平安人寿香港个人资料收集声明」列明以外之第三者机构。您可选择不向我们提供所需的个人资料,惟这样可能导致我们不能联络您。您亦可根据「平安人寿香港个人资料收集声明」之权利查阅及更正个人资料。
			</p>
			<p class="notice-item">
				<img class="notice-item-icon" src="@/assets/images/reservation/icon-re-notice.png"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本人现确认明白并同意本人的个人资料根据中银人寿个人资料收集声明作以上述用途。
			</p>
		</div>
	</div>
</template>

<script src="./reservation.js"></script>
<style lang="scss" >
@import "./reservation.scss";
</style>