<template>
	<view class="flex-col page">
		<view class="flex-col group_5">
			<view class="justify-center group_6">
				<view class="flex-row">
					<image src="http://images.wanjunshijie.com/product/cook/assets/79cb071c6f7b292b807fb0eb4820adf8.png"
						class="image_6" />
					<image src="http://images.wanjunshijie.com/product/cook/assets/42596c685ca04c384dae1fccae75293c.png"
						class="image_8" />
				</view>
				<image src="http://images.wanjunshijie.com/product/cook/assets/9086dbc457542c7e987a30bc03226717.png"
					class="image_6 image_9" />
			</view>
			<view class="flex-col group_8">
				<button class="flex-col items-center button">
					<text>微信授权登录</text>
				</button>
				<view class="flex-row group_9">
					<view class="group_10">
						<u-checkbox-group size="10" shape="circle" activeColor="#4293F5">
							<u-checkbox size="14" shape="circle" activeColor="#FEC846" v-model="checked"
								labelColor="#171717" labelSize="12" label="点击授权登录即表示同意" @change="getchecked">
							</u-checkbox>
						</u-checkbox-group>
						<text class="text_8">《厨师到家用户协议》</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: false
			};
		},
		methods: {
			getchecked(e) {
				this.checked = e
			},
		}
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: rgb(255, 255, 255);
		width: 100%;
		height: 100%;
		overflow-y: auto;

		.group_5 {
			padding: 124rpx 24rpx 689rpx 26rpx;
			flex: 1 1 auto;
			overflow-y: auto;

			.group_6 {
				padding: 0 155rpx;

				.image_6 {
					width: 128rpx;
					height: 128rpx;
				}

				.image_9 {
					margin-left: 43rpx;
				}

				.image_8 {
					margin-left: 40rpx;
					align-self: center;
					width: 49rpx;
					height: 41rpx;
				}
			}

			.group_8 {
				margin-top: 88rpx;

				.button {
					padding: 25rpx 0;
					color: rgb(255, 255, 255);
					font-size: 36rpx;
					width: 690rpx;
					line-height: 34rpx;
					white-space: nowrap;
					background-color: rgb(53, 173, 26);
					border-radius: 10rpx;
				}

				.group_9 {
					margin-top: 55rpx;

					.image_10 {
						margin: 3rpx 0;
						width: 18rpx;
						height: 18rpx;
					}

					.group_10 {
						margin-left: 13rpx;
						line-height: 24rpx;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						flex-wrap: nowrap;
						flex-direction: row;
						white-space: nowrap;
						height: 24rpx;

						.text_7 {
							color: rgb(0, 0, 0);
							font-size: 24rpx;
							line-height: 24rpx;
						}

						.text_8 {
							color: rgb(51, 131, 223);
							font-size: 24rpx;
							line-height: 24rpx;
						}
					}
				}
			}
		}
	}
</style>