<template>
	<view class="content">
		<view class="login-top">
			<view class="top-logo-content">
				<image class="top-logo" fit="contain" src="/static/imgs/top_logo.png" />
				链商星球(中国)
			</view>
			<image class="top-bg" fit="contain" mode="widthFix" src="/static/imgs/top_bg.png" />
		</view>
		<button class="btn" type="default" @click="login">登录/注册</button>
		<view class="bottom">
			<view>企业链</view>
			<view class="bottom-2">从星煌开始</view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		methods: {
			login(){
				this.$Router.push({
					name:'Login'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;
		width: 100vw;
		padding: $padding * 3;
		box-sizing: border-box;
		background: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;

		.login-top {
		  height: 46vh;
		  width: 100%;
		  display: flex;
		  flex-direction: row;
		  align-items: flex-end;
		  justify-content: center;
		  box-sizing: border-box;
		  position: relative;
		  padding-bottom: 160rpx;
		
		  .top-bg {
		    position: absolute;
		    bottom: 30rpx;
		    z-index: 2;
			width: 740rpx;
			margin-left: 40rpx;
		  }
		
		  .top-logo-content {
		    display: flex;
		    flex-direction: column;
		    align-items: center;
		    justify-content: center;
		    box-sizing: border-box;
		    color: #7f56a4;
		    font-size: $title-size +2;
		    .top-logo {
		      margin-bottom: 20rpx;
			  width: 200rpx;
			  height: 200rpx;
		    }
		  }
		}
		
		.btn {
			background-image: linear-gradient(to bottom,#bf52eb,#8f32dd);
			color: white;
			border-radius: 0;
			margin-top: $margin;
			font-size: $title-size + 6;
			line-height: 90rpx;
			height: 90rpx;
			// font-weight: bold;
			width: 500rpx;
			border-radius: 10rpx;
			margin: 50rpx 0;

			&::after {
				border: none;
			}

			&[disabled] {
				background: rgba($color: $mian-color, $alpha: .6);
			}
		}

		.bottom{
			height: 30vh;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			color: #542083;
			font-size: 54rpx;
			.bottom-2{
				font-size: 38rpx;
				margin-top: 20rpx;
			}
		}
	}
</style>
