crm-uni/pages/login/index.vue

<template>
	<view class="page">
		<view class="title">
			<view>Hello！<br>欢迎来到XXX</view>
		</view>

		<view class="form">
			<view class="tab">
				<view :class="loginType==1? 'select type1' : 'type1'" @click="loginType=1">快捷登录</view>
				<view :class="loginType==2? 'select type2' : 'type2'" @click="loginType=2">账号登陆</view>
			</view>
			<view class="inputs_button">
				<view class="inputs">
					<view class="account">
						<input type="number" v-model="account" :adjust-position="false" placeholder="手机号" />
					</view>
					<view class="password" v-if="loginType==2">
						<u--input
							type="password"
						    placeholder="请输入内容"
						    border="none"
						  ></u--input>
						<!-- <input :type="pwdShow? 'text' : 'password'" v-model="password" :adjust-position="false"
							placeholder="密码" /> -->
						<uni-icons :type="pwdShow? 'eye-filled' : 'eye-slash-filled'" size="24" color="#cccccc"
							@click="pwdShow=!pwdShow"></uni-icons>
					</view>
					<view class="vcode" v-if="loginType==1">
						<input type="number" v-model="vcode" :adjust-position="false" placeholder="验证码" />
						<text v-if="vcodeTime==0" style="color:#3264ed" @click="getVcode">获取验证码</text>
						<text v-else style="color:#ccc">重新获取({{vcodeTime}}s)</text>
					</view>
				</view>
				<view class="button">
					<view @click="login">
						登录
					</view>
				</view>
			</view>
		</view>
		<view class="pact">
			<radio :checked="pactChecked" activeBackgroundColor="#3264ed" activeBorderColor="#3264ed"
				borderColor="#3264ed" color="#fff" @click="pactChange" />
			<view>我已阅读并同意<text @click="toPact">《用户协议》</text>和<text @click="toPact">《隐私协议》</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				account: "",
				password: "",
				vcode: "",

				loginType: 1,

				pwdShow: false,
				pactChecked: false,

				vcodeTime: 0,
				vcodeTimer: null
			}
		},
		onLoad() {

		},
		methods: {
			login() {
				uni.showToast({
					title: "登录方式" + this.loginType,
					icon: 'none'
				})
			},
			getVcode() {
				this.vcodeTime = 60
				this.vcodeTimer = setInterval(() => {
					if (this.vcodeTime > 0) {
						this.vcodeTime--
					} else {
						clearInterval(this.vcodeTimer)
						this.vcodeTimer = null
					}
				}, 1000)
				uni.showToast({
					title: "获取验证码",
					icon: 'none'
				})
			},
			pactChange() {
				this.pactChecked = !this.pactChecked
			},
			toPact() {
				uni.showToast({
					title: "协议",
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background-image: url("../../static/image/loginBg.png");
		// background: url("../../static/image/loginBg.png") no-repeat top center;
		background-size: 100%;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.title {
			padding-top: 220rpx;
			padding-bottom: 70rpx;

			view {
				padding-left: 64rpx;
				font-size: 48rpx;
				font-weight: 700;
				color: #383838;
			}
		}

		.form {
			flex: 1;
			margin: 0 32rpx;
			border-radius: 40rpx;
			background-color: #fff;
			overflow: hidden;

			.tab {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #ecf1fb;
				height: 100rpx;
				background: linear-gradient(180deg, #e3ebf9 0%, #ffffff 100%);

				view {
					width: 340rpx;
					line-height: 100rpx;
					text-align: center;
					color: #9e9e9e;
					position: relative;
				}

				view::after {
					content: '';
					width: 50rpx;
					height: 8rpx;
					display: block;
					background-color: #3264ed;
					border-radius: 4rpx;
					position: absolute;
					left: 50%;
					bottom: 14rpx;
					transform: translateX(-50%);
					opacity: 0;
				}

				view.select {
					background-color: #fff;
					color: #3264ed;
				}

				view.type1.select {
					border-radius: 0 40rpx 0 0;
				}

				view.type2.select {
					border-radius: 40rpx 0 0;
				}

				view.select::after {
					opacity: 1;
				}
			}

			.inputs_button {
				background-color: #fff;

				.inputs {
					padding: 150rpx 32rpx 0;
					margin-bottom: 80rpx;

					.account,
					.password,
					.vcode {
						height: 96rpx;
						border-radius: 20rpx;
						padding: 0 48rpx;
						display: flex;
						align-items: center;
						background-color: #f7fafc;

						input {
							flex: 1;
						}
					}

					.account {
						margin-bottom: 48rpx;
					}

					.vcode {
						text {
							text-wrap: nowrap;
							font-size: 26rpx;
							background-color: #fff;
							padding: 14rpx 30rpx;
							border-radius: 12rpx;
						}
					}
				}

				.button {
					padding: 0 32rpx;

					view {
						line-height: 96rpx;
						border-radius: 20rpx;
						text-align: center;
						font-size: 32rpx;
						background-color: #3264ed;
						color: #fff;
					}
				}
			}

		}

		.pact {
			display: flex;
			align-items: center;
			justify-content: center;
			padding-bottom: 120rpx;
			font-size: 24rpx;

			text {
				color: #3264ed;
			}

			radio {
				:deep(.uni-radio-input) {
					border: 1rpx solid #3264ed;
				}

				transform:scale(0.6)
			}
		}
	}
</style>