water_affairs/pages/login/login.vue

<template>
	<view class="container" style="background-image: url('../../static/login.gif');height:100vh;">
		<view :style="{ height: height }" />
		<view class="logo">
			<u--image src="/static/img/logo.png" width="294rpx" height="94rpx" mode="scaleToFill">
				<template v-slot:loading>
					<u-loading-icon color="red"></u-loading-icon>
				</template>
				<view slot="error" style="font-size: 24rpx;">加载失败</view>
			</u--image>
		</view>
		<account v-show="loginMethod == 'account'" />
		<phone v-show="loginMethod == 'phone'" />
		<view style="height: 50rpx;" />
		<other-login :loginMethod="loginMethod" @onChange="changeLoginMethod" />
	</view>
</template>
<script>
import account from "./modules/account.vue";
import phone from "./modules/phone.vue";
import otherLogin from "./modules/otherLogin.vue";

export default {
	components: {
		account,
		phone,
		otherLogin
	},
	data() {
		return {
			loginMethod: "",
			height: ""
		};
	},
	onLoad() {
		this.loginMethod = uni.getStorageSync('loginMethod') || 'account';//登录方式
		// #ifdef H5
		this.height = "200rpx";
		// #endif
		// #ifndef H5
		this.height = "300rpx";
		// #endif 
	},
	methods: {
		/* 修改登录方式 */
		changeLoginMethod(Method) {
			this.loginMethod = Method;
		}
	}
}
</script>

<style lang="scss">
.container {
	width: 100vw;
	box-sizing: border-box;
	background-color: #282C35;

	.logo {
		width: 294rpx;
		height: 84rpx;
		margin: 0 auto 100rpx;
	}
}
</style>