<template>
	<view class="login">
		<view class="title">
			<image src="/static/images/Lucky-Buy.png" mode="aspectFit"></image>
		</view>
		<u-tabs :activeStyle="{
						fontSize: '45rpx',
						color: '#303133',
						fontWeight: 'bold'
					}" :inactiveStyle="{
						fontSize: '45rpx',
						fontWeight: 'bold',
						color: '#797c81'
					}" :list="item" @click="click" lineWidth="0" itemStyle="padding: 0rpx 80rpx"></u-tabs>
		<transition :show="current == 0">
			<view class="input">
				<view class="username">
					<u--input placeholder="Email" border="bottom" clearable></u--input>
				</view>
				<view class="password">
					<u--input placeholder="Password" :password="true" border="bottom" clearable></u--input>
				</view>
				<view class="submit">
					<u-button text="Sign in" color="#1b3ed6" size="normal"></u-button>
				</view>
			</view>
		</transition>
		<transition :show="current == 1">
			<view class="input">
				<view class="username">
					<u--input placeholder="Email" border="bottom" clearable></u--input>
				</view>
				<view class="password">
					<u--input placeholder="Password" :password="true" border="bottom" clearable></u--input>
				</view>
				<view class="submit">
					<u-button text="Register" color="#1b3ed6" size="normal"></u-button>
				</view>
			</view>
		</transition>
	</view>
</template>

<script>
	import transition from "@/components/transition/trnasition"
	export default {
		data() {
			return {
				item: [{
					name: 'Sign in',
				}, {
					name: 'Register'
				}],
				current: 0
			}
		},
		components: {
			transition
		},
		methods: {
			click(e) {
				this.current = e.index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		width: 100%;
		@include flex;
		flex-direction: column;
		align-items: center;

		.title {
			height: 200rpx;
			@include flex;
			align-items: center;
			justify-content: center;

			image {
				height: 80rpx;
			}
		}

		.input {
			width: 100%;
			margin: 20rpx 0;

			.username,
			.password,
			.submit {

				padding: 20rpx 40rpx;
			}

			.submit {
				margin-top: 100rpx;
			}
		}
	}
</style>
