zhywpt-sp/invoice/verification-apply.vue

<template>
	<view class="formBox">
		<view class="from_item">
			<text class="label">账号验证</text>
			<input type="text" placeholder="输入验证码" v-model="model1.uname" placeholder-style="color:#000">
		</view>
		<view class="from_item">
			<text class="label">手机号码</text>
			<input type="text" placeholder="" v-model="model1.phone" placeholder-style="color:#000" disabled="true">
		</view>
		<view class="from_item">
			<text class="label">验证码</text>
			<input type="text" placeholder="请输入验证码" placeholder-style="color:#000">
			<text class="btn" @click="getCode">获取验证码</text>
		</view>
		<button class="submit" >验证</button>
	</view>

</template>

<script setup lang="ts">
	import {
		reactive
	} from "vue";
	let model1 = reactive({
		uname: '输入验证码',
		phone: '135****9090',
		code: ''
	})

	const getCode = () => {
		console.log(123);
	}
</script>


<style>
	page {
		width: 100%;
		height: 100%;
	}
</style>

<style lang="scss" scoped>
	.formBox {
		height: 90%;
		width: 100%;
		border-top: 1rpx solid #EEF7F7;
		// background-color: red;
		.from_item {
			padding: 30rpx;
			padding-top: 60rpx;
			position: relative;
			.label {
				font-size: 28rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #777777;
			}
			input {
				font-size: 32rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #333333;
				line-height: 58rpx;
				border-bottom: 1rpx solid #DCDCDC;
				margin-top: 50rpx;
				padding-bottom: 10rpx;

			}
			.btn {
				position: absolute;
				right: 45rpx;
				bottom: 48rpx;
				background: transparent;
				font-size: 30rpx;
				color: #15E5C1;
				z-index: 999;

			}

		}
		.submit{
			background: linear-gradient(to left, #43A1E0 0%, #13E7C1 100%);
			width: 670rpx;
			height: 80rpx;
			line-height: 80rpx;
			color: #fff;
			border-radius: 100rpx;
			position: fixed;
			bottom: 100rpx;
			left:50%;
			transform: translate(-50%);
			font-size: 32rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 80rpx;
		}
	}
</style>