<template>
	<view class="app">
		<view class="content">
			<view class="appointtime">预约时间
			</view>
			<u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
			<view class="time" @tap="show=true">
				<image src="/static/pageC/time.png" mode=""></image>
			</view>
			<view class="submit">
				提交
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				mode: 'date'
			};
		},

	}
</script>

<style lang="scss">
	.app {
		height: 100vh;
		background-color: #F7F5F5;
		padding: 30rpx 0 0 0;

		.content {
			width: 95%;
			height: 100%;
			background: #FFFFFF;
			box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
			border-radius: 5rpx;
			margin: 0 auto;

			.submit {
				width: 496rpx;
				height: 61rpx;
				background: #26A888;
				border-radius: 5rpx;
				line-height: 61rpx;
				color: #FFFFFF;
				text-align: center;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				position: fixed;
				bottom: 5%;

			}

			.appointtime {
				font-size: 30rpx;
				padding: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				line-height: 38rpx;
			}

			.time {
				margin: 0 auto;
				width: 80%;
				height: 63rpx;
				background: #F6F6F6;
				border-radius: 5rpx;
				position: relative;

				image {
					width: 36rpx;
					height: 34rpx;
					position: absolute;
					right: 3%;
					top: 50%;
					transform: translateY(-50%);
				}
			}

		}
	}
</style>