<template>
	<view class="page" :data-theme="theme">
		<view class="system-height" :style="{height:statusBarHeight}"></view>
		<!-- #ifdef MP -->
		<view class="title-bar" style="height: 43px;">
			<view class="icon" @click="back" v-if="!isHome">
				<image class="img" src="../static/left.png"></image>
			</view>
			<view class="icon" @click="home" v-else>
				<image class="img" src="../static/home.png"></image>
			</view>
			账户登录
		</view>
		<!-- #endif -->
		<view class="phone_name">绑定手机号</view>
		<view class="phone_tips">登录注册需绑定手机号</view>
		<mobileLogin :isUp="isUp" :isShow="isShow" :isPos="isPos"></mobileLogin>
	</view>
</template>

<script>
	import mobileLogin from '@/components/login_mobile/index.vue';
	const app = getApp();
	let statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	export default {
		name: 'wechat_phone',
		data() {
			return {
				isUp: true,
				isShow: false,
				isPos: false,
				theme: app.globalData.theme
			}
		},
		components: {
			mobileLogin
		},
		methods:{
			// 返回
			back() {
				uni.navigateBack();
			},
			// 跳入首页
			home() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
		}
	}
</script>

<style>
	page {
		background: #fff;
		height: 100%;
	}
</style>
<style scoped lang="scss">
	.title-bar {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
	}
	
	.icon {
		position: absolute;
		left: 30rpx;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 86rpx;
		height: 86rpx;
	
		.img {
			width: 50rpx;
			height: 50rpx;
		}
	}
	.phone{
		&_name{
		   font-size: 48rpx;
		   color: #333;
		}
		&_tips{
			font-size: 28rpx;
			color: #333;
		}
	}
</style>