<template>
	<!-- 	<view> -->
	<view class="background">
		<text class="appointment">选择想要预约的时间</text>
		<view class="nowtime">
			<view class="time" @tap='appointment()' hover-class="click-hover">
				9月10号
			</view>
			<view class="time" @tap='appointment()' hover-class="click-hover">
				9月11号
			</view>
			<view class="time" @tap='appointment()' hover-class="click-hover">
				9月12号
			</view>
			<view class="time" @tap='appointment()' hover-class="click-hover">
				9月13号
			</view>
		</view>

	</view>
	<!-- </view> -->
</template>

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

			}
		},
		methods: {
			appointment() {
				uni.navigateTo({
					url: `/pages/appointmenttime/appointmenttime`
				})
			},
		}
	}
</script>

<style>
	.click-hover{
	background-color:red;
	
	}
	.nowtime {
		display: flex;
		/* flex-direction: row; */
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.background {
		width: 702rpx;
		height: 773rpx;
		font-size: ;
		background: #FFFFFF;
		box-shadow: 0px 9px 31px 9px rgba(0, 0, 0, 0.03);
		border-radius: 20px;
		margin: 0 auto;
		margin-top: 5%;
	}

	.appointment {
		text-align: center;
		width: 320rpx;
		height: 34rpx;
		font-size: 36rpx;
		/* font-family: Adobe Heiti Std; */
		font-weight: normal;
		color: #000000;
		line-height: 50px;

		margin-left: 30%;

	}

	.time {
		margin-top: 20rpx;
		width: 290rpx;
		height: 290rpx;
		line-height: 290rpx;
		text-align: center;
		background: #4C7BC9;
		border-radius: 25rpx;
		margin-left: 5%;
		color: white;
		font-size: 50rpx;
	}
</style>
