teaching-uniapp/pages/login/login.vue

<template>
	<view class="login">
		<statusBar :item='navBarData'></statusBar>
		<view class="img">
			<image src="http://43.139.158.220:5007/img/static/yym/image7.png" mode="aspectFill"></image>
		</view>

		<view class="mid">
			<view class="quan"></view>
			<!-- <radio value="r1" @click="radioCheck" size="10" :checked="isOK" /> -->
			<view class="">
				我已阅读并同意<text>《教育小程序服务条款》</text>和 <text>《 隐私协议》</text>新用户自动注册
			</view>
		</view>

		<button class="btn" @click="gotoIndex">一键登录</button>
		<view class="footer" @click="goto">
			<text>手机号登录/账号密码登录</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isOK: false,
				navBarData: {
					title: '首页',
					btn: 1 //判断是否显示返回按钮
				},
			};
		},
		methods: {
			gotoIndex() {
				const value = uni.setStorageSync('login', '1');

				uni.switchTab({
					url: '/pages/index/index'
				})

			},
			goto() {
				uni.navigateTo({
					url: "/pages/login_two/login_two"
				})
			},
			radioCheck() {
				this.isOK = !this.isOK
			}
		}
	}
</script>

<style lang="scss">
	.login {
		background-color: #ffffff;
		height: 100vh;

		.img {
			// margin-top: 150rpx;
			// background-color: #ccc;
			padding: 10vh 0;
			width: 750rpx;
			display: flex;
			justify-content: center;

			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;

			}
		}

		.mid {
			display: flex;
			justify-content: flex-start;
			width: 750rpx;
			padding: 0rpx 20rpx;
			font-size: 13px;

			::v-deep uni-radio .uni-radio-input {
				width: 10rpx;
				height: 10rpx;
			}

			.quan {
				flex-shrink: 0;
				width: 15px;
				height: 15px;
				border-radius: 50%;
				margin-top: 5rpx;
				// background-color: #4a97f2;
				margin-right: 10rpx;
				border: 1px #bdbdbd solid;
			}

			text {
				color: #4a97f2;
			}
		}

		.btn {
			background-color: #0056a8;
			color: #ffffff;
			border-radius: 30px;
			margin: 30rpx 55rpx;
			// padding: 0rpx 10rpx;
			font-size: 16px;
		}

		.footer {
			display: flex;
			justify-content: center;
			font-size: 14px;
			margin: auto;
			color: #666666;
		}
	}
</style>