lineage-app/pages/main/personal/phone/replace.vue

<template>
	<view class="container">
		<view style="margin: 20rpx 0">
			<view>更换手机号后，下次登录可用新手机号登录</view>
			<view>当前手机号:1888888888</view>
		</view>
		<tui-list-view style="margin: 20rpx 0"> 
			<tui-list-cell >
				<view class="tui-item-box">
					<view class="tui-list-cell_name">新手机号</view>
					<view class="tui-left"><input class="s-input" type="phone" placeholder="请输入手机号" /></view>
					<view class="tui-right"><tui-button width="120rpx" height="50rpx" :size="20">获取验证码</tui-button></view>
				</view>
			</tui-list-cell>
			<tui-list-cell >
				<view class="tui-item-box">
					<view class="tui-list-cell_name">验证码</view>
					<view class="tui-left"><input class="s-input" type="text" placeholder="请输入验证码" /></view>
				</view>
			</tui-list-cell>
		</tui-list-view>
		<view class="tui-content-box">
			<tui-button>保存并修改手机号</tui-button>
		</view>
		<view style="text-align: center;font-size:24rpx;margin: 20rpx 0;color: #C74547;">收不到验证码？</view>
	</view>
</template>

<script>
	import tuiImageGroup from "@/components/thorui/tui-image-group/tui-image-group"
	import tuiListCell from "@/components/thorui/tui-list-cell/tui-list-cell"
	import tuiListView from "@/components/thorui/tui-list-view/tui-list-view"
	import tuiButton from "@/components/thorui/tui-button/tui-button"
	
export default {
	components: {
		tuiImageGroup,
		tuiListView,
		tuiListCell,
		tuiButton
	},
	data() {
		return {

		};
	},
	onLoad() {
	},
	methods: {}
};
</script>

<style>
	page {
		background-color: #fff;
	}
.container {
	padding: 20rpx;
	box-sizing: border-box;
	width: 100%;
}

.s-input {
		text-align: left;
		font-size: 24rpx;
		width: 100%;
	}

.tui-item-box {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.tui-list-cell_name {
		width: 120rpx;
		text-align: right;
		padding-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-ml-auto {
		margin-left: auto;
	}

	.tui-left {
		margin-left: 34rpx;
		font-size: 26rpx;
		color: #999;
	}
	
	.tui-right {
		margin-left: 34rpx;
		margin-right: 34rpx;
		font-size: 26rpx;
		color: #999;
	}
	
	.tui-content-box {
		padding: 0 40rpx;
		width: 100%;
		margin-top: 10px;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 10rpx;
	}

.header {
	padding: 80rpx 90rpx 60rpx 90rpx;
	box-sizing: border-box;
}

.title {
	font-size: 34rpx;
	color: #333;
	font-weight: 500;
}

.sub-title {
	font-size: 24rpx;
	color: #7a7a7a;
	padding-top: 18rpx;
}
.tui-title {
	width: 100%;
	padding: 40rpx 30rpx 30rpx;
	box-sizing: border-box;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.tui-image-box{
	width: 100%;
	padding: 30rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}
.tui-group-box{
	padding-right: 30rpx;
}
</style>