<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="account-title">点击切换账号</view>
		<!--账号列表-->
		<view class="account-list">
			<view class="list-num">153****6923</view>
			<view class="list-new">当前使用</view>
		</view>
		<view class="account-list">
			<view class="list-num">152****7987</view>
		</view>
		<!--添加账号-->
		<view class="account-add">
			<view class="add-icon">
				<u-icon name="plus"></u-icon>
			</view>
			<view class="add-text">添加账号</view>
		</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;
		padding-bottom: 464rpx;
	}
	.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{
			margin: auto;
			position: absolute;
			left: 24rpx;
			top: 0;
			bottom: 0;
		}
	}
	.account-title{
		font-weight: 400;
		font-size: 48rpx;
		color: #000000;
		line-height: 66rpx;
		text-align: center;
		margin-top: 178rpx;
		margin-bottom: 152rpx;
	}
	.account-list{
		display: flex;
		justify-content: space-between;
		width: 670rpx;
		height: 154rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 20rpx 0rpx #EDEDED;
		border-radius: 16rpx;
		border: 2rpx solid #F5F5F5;
		padding: 0 40rpx 0 40rpx;
		margin: 0 auto 40rpx auto;
		.list-num{
			font-weight: 600;
			font-size: 32rpx;
			color: #333333;
			line-height: 154rpx;
		}
		.list-new{
			font-weight: 400;
			font-size: 28rpx;
			color: #00B42B;
			line-height: 154rpx;
		}
	}
	.account-add{
		display: flex;
		width: 670rpx;
		height: 154rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 20rpx 0rpx #EDEDED;
		border-radius: 16rpx;
		border: 2rpx solid #F5F5F5;
		padding: 30rpx 40rpx 0 40rpx;
		margin: 0 auto;
		.add-icon{
			width: 92rpx;
			height: 92rpx;
			border-radius: 16rpx;
			border: 2rpx solid #BDC3CE;
			position: relative;
			/deep/ .u-icon__icon{
				font-weight: bold !important;
				font-size: 42rpx !important;
				line-height: 92rpx !important;
				margin: 0 auto;
				color: #BDC3CE !important;
			}
		}
		.add-text{
			font-weight: 600;
			font-size: 32rpx;
			color: #999999;
			line-height: 92rpx;
			margin-left: 40rpx;
		}
	}
</style>
