样式效果

 创建index.vue文件

<template>
	<view class="content">
		<view class="mainTop">
			<view class="mianTaber" v-for="(item,index) in taberList" :key="item.idso" @click="getTar(index)"
				:class="{'borderBottom':contin==index}">{{item.text}}</view>
		</view>
		<view class="mainCenter" v-if="contin==0">
			<view class="mainCenBox">
				<input type="number" maxlength="11" placeholder="请输入手机号码" v-model="phoneNumber">
				<view class="mainInp" v-if="codeif==false">
					<input :type="passworif" placeholder="请输入密码" maxlength="28" ref="password">
					<view class="poerter" style="padding-right: 20rpx;" @click="getshouBox"><text
							v-if="shouBox==false">显示</text><text v-else>隐藏</text></view>
				</view>
				<view class="mainInp" v-else>
					<input type="number" placeholder="请输入验证码" maxlength="15" v-model="codeNumber">
					<view class="poerterii" style="padding-right: 20rpx;">
						<text v-if="shoins==61">获取验证码</text>
						<text v-else>{{shoins}}重新发送</text>
					</view>
				</view>
			</view>
			<view class="mainBtnBox">
				<view class="mainBtn" v-for="(item,index) in btnList" :key="index" @click="getBtnTar(item,index)">
					{{item}}
				</view>
			</view>
		</view>
		<view class="mainCenter" v-if="contin==1">
			<view class="mainCenBox">
				<input type="number" maxlength="11" placeholder="请输入手机号码" v-model="phoneNumber">
				<view class="mainInp">
					<input type="number" placeholder="请输入验证码" maxlength="15" v-model="codeNumber">
					<view class="poerterii" style="padding-right: 20rpx;">
						<text v-if="shoins==61">获取验证码</text>
						<text v-else>{{shoins}}重新发送</text>
					</view>
				</view>
				<view class="mainInp">
					<input :type="passworif" placeholder="请输入密码" maxlength="28" ref="password">
					<view class="poerter" style="padding-right: 20rpx;" @click="getshouBox"><text
							v-if="shouBox==false">显示</text><text v-else>隐藏</text></view>
				</view>
			</view>
			<view class="mainBtnBox zuche">
				<view class="mainBtn" @click="getresist">立即注册</view>
			</view>
		</view>
		<view class="iconifbt" v-if="contin==0">
			<view class="log_luit">
				<checkbox-group @change="checkboxChange">
					<checkbox color="#999" :checked="checkedif"/>
					勾选即表示同意<text @click="tourl('/pages/xieyi/xieyi?type=2')">《用户协议》</text>及<text
						@click="tourl('/pages/xieyi/xieyi?type=1')">《隐私政策》</text>
				</checkbox-group>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				taberList: [{
						text: '登录',
						idso: 1
					},
					{
						text: '注册',
						idso: 2
					}
				],
				contin: 0,
				btnList: ['密码登录', '验证码登录'],
				btnListyi: ['密码登录', '验证码登录'],
				btnListya: ['验证码登录', '密码登录'],
				checkedif: false,
				shouBox: false,
				shoins: 60,
				passworif: 'password',
				codeif: false,
				phoneNumber: '',
				password: '',
				codeNumber: ''
			}
		},
		onLoad(per) {
			console.log(per, 222222222);
		},
		methods: {
			checkboxChange(e) {
				this.checkedif=!this.checkedif
			},
			getTar(e) {
				this.contin = e
			},
			getresist() {
				let data = {
					mobilPhone: this.phoneNumber,
					password: this.$refs.password.valueSync,
					codeNumber: this.codeNumber
				}
				this.$emit('getresist', data)
			},
			getBtnTar(e, i) {
				// console.log(this.$refs.password.valueSync,33333333333);
				if (e == '密码登录') {
					this.btnList = this.btnListyi
					this.codeif = false
				} else if (e == '验证码登录') {
					this.codeif = true
					this.btnList = this.btnListya
				}
				if (e == '密码登录' & i == 0) {

					let data = {
						mobilPhone: this.phoneNumber,
						password: this.$refs.password.valueSync,
						checked: this.checkedif
					}
					this.$emit('passwordLogin', data)
				} else if (e == '验证码登录' & i == 0) {
					let data = {
						mobilPhone: this.phoneNumber,
						codeNumber: this.codeNumber,
						checked: this.checkedif
					}
					this.$emit('capChaLogin', data)
					console.log('验证码登录');
				}
			},
			tourl(e) {
				uni.navigateTo({
					url: e
				})
			},
			getshouBox() {
				this.shouBox = !this.shouBox
				if (this.shouBox == false) {
					this.passworif = "password"
				} else {
					this.passworif = "text"
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes yes {
		0% {
			opacity: 0;
			bottom: -200rpx;
		}

		50% {
			opacity: .5;
		}

		100% {
			opacity: 1;
			bottom: 0;
		}
	}

	.content {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		// height: 55%;
		border-top-right-radius: 50rpx;
		border-top-left-radius: 50rpx;
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #00ffff;
		animation: yes .5s linear;

		.mainTop {
			display: flex;
			align-items: center;
			justify-content: space-around;

			.mianTaber {
				padding: 20rpx;
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #444;
				font-weight: bold;
				font-size: 34rpx;
				padding-bottom: 10rpx;
			}

			.borderBottom {
				color: #ff6600;
				transition: all 1s linear;

				&:before {
					content: '';
					width: 20rpx;
					height: 20rpx;
					margin-right: 15rpx;
					border-bottom: 6rpx solid #ff6600;
					border-right: 6rpx solid #ff6600;
					transform: rotate(-45deg);
				}

				&:after {
					content: '';
					width: 20rpx;
					height: 20rpx;
					margin-left: 15rpx;
					border-bottom: 6rpx solid #ff6600;
					border-left: 6rpx solid #ff6600;
					transform: rotate(45deg);
				}
			}
		}

		.mainCenter {
			padding-top: 20rpx;

			.mainCenBox {
				input {
					width: 75%;
					margin: auto;
					border: solid 1rpx #999;
					margin-top: 40rpx;
					padding: 20rpx 30rpx;
					border-radius: 20rpx;
				}

				.mainInp {
					position: relative;

					.poerterii {
						position: absolute;
						top: 50%;
						right: -20rpx;
						transform: translate(-50%, -50%);
						color: #ff6600;
					}

					.poerter {
						position: absolute;
						top: 50%;
						right: 30rpx;
						transform: translate(-50%, -50%);

						text {
							color: #999;
						}

						.mr {
							padding-right: 30rpx !important;
						}
					}
				}
			}

			.zuche {
				.mainBtn {
					color: #fff !important;
					background-color: #ff6600 !important;
					margin-bottom: 100rpx !important;
				}
			}

			.mainBtnBox {
				padding-top: 60rpx;

				.mainBtn {
					margin: auto;
					width: 75%;
					text-align: center;
					padding: 30rpx;
					border-radius: 30rpx;
					margin-bottom: 20rpx;
					border: #ff6600 solid 3rpx;
					background-color: #ff6600;
					font-size: 34rpx;
					color: #fff;

					&:nth-last-child(1) {
						color: #333;
						background-color: transparent;
					}
				}
			}
		}

		.iconifbt {
			padding: 55rpx 0 30rpx;

			.log_luit {
				font-size: 30rpx;

				text {
					color: #ff6600;
				}
			}
		}
	}
</style>

使用方法

<template>
    <view>
<login-box @passwordLogin="passwordLogin" @capChaLogin="capChaLogin" @getresist="getresist"></login-box>
	</view>
</template>
<script>
	import loginBox from '@/components/loginBox/index.vue'
	export default {
		components:{
			loginBox
		},
        methods: {
			getresist(e){
				console.log(e,'注册数据');
			},
			capChaLogin(e){
				console.log(e,'验证码登录');
			},
			passwordLogin(e){
				console.log(e,'密码登录');
			}
        }
</script>