<template>
	<view class="albumBox" :style="{'padding-top': albumBoxTop + 'px' }">
		<!--头部 获取相片-->
		<view class="nav-bar"	:style="{'display': 'flex','top': statusBarHeight + 'px', 'height': navHeight + 'px','line-height': navHeight + 'px'}">
			<u-icon name="arrow-left" color="#333" @click="returnClick"></u-icon>
			&nbsp;
		</view>
		<view class="login-title">
			<view class="title-cn">获取相片</view>
			<view class="title-en">Get Photos</view>
		</view>
		<view class="login-list">
			<image class="list-img" src="../static/album/longin02.png"></image>
			<input class="uni-input list-input" placeholder="请输入摄影时预留手机号" />
		</view>
		<view class="login-list login-listAct">
			<image class="list-img" src="../static/album/longin01.png"></image>
			<input class="uni-input list-input" placeholder="请输入验证码" />
			<view class="list-verification">获取验证码</view>
		</view>
		<view class="login-btn">
			登陆
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,//状态栏高度
      capsule: 0,// 胶囊大小、位置数据
      navHeight: 0,// 导航栏高度
      albumBoxTop:0,//顶部高度
    }
  },
  onLoad(option) {
	  this.recordDeviceInfo()
  },
  methods: {
    recordDeviceInfo() { //---记录设备信息
		  this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight // 状态栏高度
		  this.capsule = uni.getMenuButtonBoundingClientRect() // 胶囊大小、位置数据
		  this.navHeight = (this.capsule.top - this.statusBarHeight) * 2 + this.capsule.height // 导航栏高度
		  this.albumBoxTop = this.statusBarHeight+this.navHeight
    },
    returnClick() {//头部 点击返回
		  uni.navigateBack({
		    delta: 1
		  })
    },
  }
}
</script>

<style scoped lang="scss">
	.albumBox{
		display: flex;
		flex-direction:column;
		height: 100vh;
		background-color: #fff;
	}
	.nav-bar {
		width: 100%;
		justify-content:center;
		font-size: 36rpx;
		font-weight: 700;
		padding: 0 24rpx 0 24rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		/deep/ .u-icon{
			color: #333333;
			margin: auto;
			position: absolute;
			left: 24rpx;
			top: 0;
			bottom: 0;
		}
	}
	.login-title{
		margin-top: 80rpx;
		padding: 0 56rpx 0 56rpx;
		margin-bottom: 104rpx;
		.title-cn{
			font-weight: 600;
			font-size: 40rpx;
			color: #333333;
			line-height: 56rpx;
			margin-bottom: 16rpx;
		}
		.title-en{
			font-size: 28rpx;
			color: #999999;
			line-height: 32rpx;
		}
	}
	.login-list{
		display: flex;
		width: 636rpx;
		height: 98rpx;
		background: #F9F9F9;
		border-radius: 50rpx;
		margin: 0 auto 40rpx auto;
		padding: 0 40rpx 0 52rpx;
		.list-img{
			display: block;
			width: 44rpx;
			height: 44rpx;
			margin-top: 28rpx;
			margin-right: 24rpx;
		}
		.list-input{
			flex: 1;
			height: 98rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #BDC3CE;
		}
		.list-verification{
			font-weight: 400;
			font-size: 28rpx;
			color: #FE6600;
			line-height: 98rpx;
		}
	}
	.login-listAct{
		margin-bottom: 0;
	}
	.login-btn{
		width: 638rpx;
		height: 98rpx;
		background: linear-gradient( 90deg, #FFA000 0%, #FE6600 100%);
		margin: 0 auto;
		border-radius: 50rpx;
		font-weight: 600;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 98rpx;
		text-align: center;
		margin-top: 80rpx;
	}
</style>
