FE_CRM/pages/login/login.vue

<template>
	<view class="page">
		<view class="wrap">
			<image class="logo" src="../../static/image/logo.png" mode=""></image>
			<view class="hello">Hi，城市合伙人请登录</view>
			<view class="btn wechat">
				<image src="../../static/image/wechat.png" mode="widthFix"></image>
				微信授权登录
			</view>
			<view class="btn phone">
				<image src="../../static/image/phone.png" mode="widthFix"></image>
				手机账号登录
			</view>
			<view class="agree">
				<uni-data-checkbox class="check" multiple v-model="agree" :localdata="agreeData"></uni-data-checkbox>
				同意
				<text>《或然科技城市合伙人服务协议》</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				agree: [],
				agreeData: [{
					text: '',
					value: 0
				}],
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
.page {
	min-height: calc(100vh - 170rpx);
	padding-top: 170rpx;
	background: url(../../static/image/login1.png) 0 0/175rpx auto no-repeat,
		url(../../static/image/login2.png) bottom right/123rpx auto no-repeat;
	overflow: hidden;
}
.wrap {
	position: relative;
	height: 60vh;
	padding: 214rpx 74rpx 28rpx;
	margin: 0 61rpx;
	text-align: center;
	background-color: #fff;
	border-radius: 20rpx;
	.logo {
		width: 393rpx;
		height: 93rpx;
	}
	.hello {
		margin: 36rpx 0;
		font-size: 28rpx;
		color: #333;
	}
	.btn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 88rpx;
		font-size: 32rpx;
		border-radius: 10rpx;
		image {
			width: 50rpx;
			margin-right: 15rpx;
		}
	}
	.wechat {
		margin-bottom: 38rpx;
		color: #fff;
		background-color: #007EFF;
	}
	.phone {
		color: #007EFF;
		border: 1px solid #007EFF;
		image {
			width: 40rpx;
		}
	}
	.agree {
		position: absolute;
		bottom: 28rpx;
		left: 0%;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		text-align: center;
		font-size: 24rpx;
		color: #ccc;
		text {
			color: #007EFF;
		}
	}
	/deep/.check {
		.checklist-box {
			margin: 0;
		}
	}
}
</style>