zh_order_food_xcx/pages-my/set-user-phone.vue

<template>
	<view class="flex-common-css bgc-f">
		<Nav title=" " titleColor="#333" bgckgroundBox='#fff'></Nav>
		<scroll-view :scroll-y="true" class="scroll-view-css">
			<view class="content-box box-border-box">
				<view class="fw-600 fs-48 fc-3 mb-16">
					更换手机号
				</view>
				<view class="fs-28 fc-6 mb-32">
					一个手机号只能绑定一个账号，绑定的手机账号禁止修改。
				</view>
				<view class="phone-box mb-22">
					<image class="icons" src="@/static/img/my/yzm-icons.png" mode=""></image>
					<input class="uni-input b-rad-200" focus placeholder="请输入手机号" />
				</view>
				<view class="flex-justify-space mb-80">
					<view class="phone-box mr-24 common-view-css">
						<image class="icons" src="@/static/img/my/yzm-icons.png" mode=""></image>
						<input class="uni-input b-rad-200" focus placeholder="请输入验证码" />
					</view>
					<view class="get-code-box">
						<view class="get-but fc-57CAFF fs-32 text-align-center b-rad-200">
							获取验证码
						</view>
					</view>
				</view>
				<view class="but fs-32 fc-f fw-600 b-rad-200 text-align-center" :class="butType?'bgc-41ABF5':'bgc-BCEAFF'">
					确认
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				formData: {
					phone: '',
					code: ''
				},
				butType: false
			};
		},
		watch: {
		},
		onLoad(data) {},
		mounted() {},
		methods: {

		},
	}
</script>

<style lang="scss" scoped>
	.content-box {
		padding: 32rpx 40rpx 0;
	}

	.phone-box {
		position: relative;
	}

	.uni-input {
		// width: 100%;
		background: #F6F6F6;
		height: 92rpx;
		line-height: 92rpx;
		padding: 0 0 0 68rpx;
	}

	.icons {
		position: absolute;
		top: 30rpx;
		left: 24rpx;
		width: 32rpx;
		height: 32rpx;
	}
	.get-code-box{
		width: 208rpx;
	}
	.get-but{
		width: 100%;
		height: 92rpx;
		line-height: 92rpx;
		border: 2rpx solid #57CAFF;
	}
	.but{
		width: 100%;
		height: 92rpx;
		line-height: 92rpx;
	}
</style>