FE-lab-xcx/pages/views/login/login.vue

<template>
	<view id="login">
		<img class="logo-img" :src="imagesUrl('commonality/logo%401x.png')">
		<view class="title-1">欢迎使用</view>
		<view class="title-2">实验室安全智慧化管控系统</view>
		<view class="null-p"></view>
		<img class="login-img" :src="imagesUrl('commonality/img_tyrzdl_ch%402x.png')">
		<view class="ssoButton" @click="goPage('ssoLogin')">统一身份认证登录</view>
		<view class="accountButton" @click="goPage('accountLogin')">账号密码登录</view>
		<view class="position-top-right-box"></view>
		<view class="position-bottom-left-box"></view>
	</view>
</template>

<script>
	export default {
		name: "ssoLogin",
		data() {
			return {
				
			}
		},
		onLoad(option) {
			
		},
		mounted() {

		},

		methods: {
			goPage(type){
				if(type == 'ssoLogin'){
					uni.navigateTo({
						url: '/pages/views/login/ssoLogin'
					});
				}else if(type == 'accountLogin'){
					uni.navigateTo({
						url: '/pages/views/login/accountLogin'
					});
				}
			},
		},
	}
</script>

<style lang="stylus" scoped>
	#login{
		height: 100%;
		width: 100%;
		background #fff;
		position relative;
		display: flex;
		flex-direction: column;
		position: relative;
		.logo-img{
			width:370rpx;
			height:68rpx;
			margin:320rpx 190rpx 0;
		}
		.position-top-right-box{
			position: absolute;
			top:0;
			right:0;
			width:230rpx;
			height:230rpx;
			border-bottom-left-radius: 100%;
			background-color: #E5F2FE;
			filter: blur(4px);
		}
		.position-bottom-left-box{
			position: absolute;
			bottom:0;
			left:0;
			width:230rpx;
			height:230rpx;
			border-top-right-radius: 100%;
			background-color: #E5F2FE;
			filter: blur(4px);
		}
		.title-1{
			font-size:38rpx;
			line-height:55rpx;
			height:55rpx;
			text-align: center;
			color:#333;
			margin:90rpx 0 31rpx;
		}
		.title-2{
			font-size:38rpx;
			line-height:55rpx;
			height:55rpx;
			text-align: center;
			color:#0183fa;
		}
		.null-p{
			flex:1;
		}
		.login-img{
			width:600rpx;
			height:408rpx;
			margin:0 auto 125rpx;
		}
		.ssoButton{
			width:650rpx;
			height:80rpx;
			line-height:80rpx;
			text-align: center;
			background-color:#0183fa;
			color:#fff;
			font-size:32rpx;
			margin:0 auto 175rpx;
			border-radius:50rpx;
		}
		.accountButton{
			width:200;
			height:80rpx;
			line-height:80rpx;
			text-align: center;
			color:#0183fa;
			font-size:28rpx;
			margin:0 auto 40rpx;
		}
	}
</style>