teaching-uniapp/pages/login/login.vue

<template>
	<view class="login">
		<statusBar :item='navBarData'></statusBar>
		<view class="img">
			<image src="../../static/logo.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">一键登录</button>
		<view class="footer" @click="goto">
			<text>手机号登录/账号密码登录</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isOK:false,
				navBarData:{
					title:'首页',
					btn:1  //判断是否显示返回按钮
				},
			};
		},
		methods:{
			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: 150rpx 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;
			}
			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>