<template>
	<view class="p-person-account g_w_all g_bg_f_5 g_kuaishou">
		<view class="panel">
			<view class="tip">手机号</view>
			<view class="box g_bg_f g_flex_row_between" hover-class="g_bg_e">
				<view class="g_flex_1 g_flex_row_start">
					<view class="g_flex_column_center">
						<view class="t-icon t-icon-shoujihaobangding g_w_36 g_h_36" style="width: 36px;height: 36px;"></view>
					</view>
					<view class="g_ml_8">
						<view class="g_fs_14 g_c_3">手机号</view>
						<view class="g_fs_12 g_c_9">+86 134****8878</view>
					</view>
				</view>
				<view class="g_flex_none g_flex_row_end">
					<view class="g_flex_column_center g_fs_14 g_c_9">
						已绑定
					</view>
					<view class="g_ml_8 g_flex_column_center">
						<i class="iconfont icon-gengduo11 g_c_c"></i>
					</view>
				</view>
			</view>
		</view>
		<view class="panel">
			<view class="tip">邮箱</view>
			<view class="box g_bg_f g_flex_row_between" hover-class="g_bg_e">
				<view class="g_flex_1 g_flex_row_start">
					<view class="g_flex_column_center">
						<view class="t-icon t-icon-youxiangbangding g_w_36 g_h_36" style="width: 36px;height: 36px;"></view>
					</view>
					<view class="g_ml_8">
						<view class="g_fs_14 g_c_3">邮箱账号</view>
						<view class="g_fs_12 g_c_9">1479885527@qq.com</view>
					</view>
				</view>
				<view class="g_flex_none g_flex_row_end">
					<view class="g_flex_column_center g_fs_14 g_c_9">
						已绑定
					</view>
					<view class="g_ml_8 g_flex_column_center">
						<i class="iconfont icon-gengduo11 g_c_c"></i>
					</view>
				</view>
			</view>
		</view>
		<view class="panel">
			<view class="tip">第三方账号</view>
			<view class="boc">
				<view class="item g_flex_row_between g_pb_10 g_bg_f" hover-class="g_bg_e" style="border-bottom:  0.5px solid #eeeeee;">
					<view class="g_flex_1 g_flex_row_start">
						<view class="g_flex_column_center">
							<view class="t-icon t-icon-weixinbangding g_w_36 g_h_36" style="width: 36px;height: 36px;"></view>
						</view>
						<view class="g_ml_8">
							<view class="g_fs_14 g_c_3">微信</view>
							<view class="g_fs_12 g_c_9">b****0025</view>
						</view>
					</view>
					<view class="g_flex_none g_flex_rowRight_columnCenter">
						<g-button btnText='解绑' type='infro' size='mini' />
					</view>
				</view>
				<view class="item g_flex_row_between g_pb_10 g_pt_10 g_bg_f" hover-class="g_bg_e" style="border-bottom:  0.5px solid #eeeeee;">
					<view class="g_flex_1 g_flex_row_start">
						<view class="g_flex_column_center">
							<view class="t-icon t-icon-douyinbangding g_w_36 g_h_36" style="width: 36px;height: 36px;"></view>
						</view>
						<view class="g_ml_8">
							<view class="g_fs_14 g_c_3">抖音</view>
							<view class="g_fs_12 g_c_9">b****0025</view>
						</view>
					</view>
					<view class="g_flex_none g_flex_rowRight_columnCenter">
						<g-button btnText='解绑' type='infro' size='mini' />
					</view>
				</view>
				<view class="item g_flex_row_between g_pt_10 g_bg_f" hover-class="g_bg_e">
					<view class="g_flex_1 g_flex_row_start">
						<view class="g_flex_column_center">
							<view class="t-icon t-icon-kuaishoubangding g_w_36 g_h_36" style="width: 36px;height: 36px;"></view>
						</view>
						<view class="g_ml_8">
							<view class="g_fs_14 g_c_3">快手</view>
							<view class="g_fs_12 g_c_9">b****0025</view>
						</view>
					</view>
					<view class="g_flex_none g_flex_rowRight_columnCenter">
						<g-button btnText='去绑定' type='none' size='mini' />
					</view>
				</view>
			</view>
		</view>
		<view class="panel">
			<view class="tip">绑定第三方账号同步账号数据</view>
		</view>
	</view>
</template>

<script>
	export default{
		onReady() {
			this.G.setNavStyle();
		},
		onShareAppMessage() {
			return this.G.shareFun();
		},
	}
</script>

<style lang="scss">
	.p-person-account{
		min-height: 100%;
		.panel{
			.tip{
				padding: 16px 20px 8px;
				font-size: 12px;
				color: #999;
			}
			.box{
				width: calc(100% - 20px);
				margin: 0 auto;
				border-radius: 8px;
				padding: 10px;
			}
			.boc{
				width: calc(100% - 20px);
				margin: 0 auto;
				.item{
					padding: 10px;
					&:first-child{
						border-top-left-radius: 8px;
						border-top-right-radius: 8px;
					}
				  &:last-child{
				  	border-bottom-left-radius: 8px;
				  	border-bottom-right-radius: 8px;
				  }
				}
			}
		}
	}
</style>