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="39.200vw" height="12.533vw" mode="scaleToFill">
				<template v-slot:loading>
					<u-loading-icon color="red"></u-loading-icon>
				</template>
				<view slot="error" style="font-size: 12px;">加载失败</view>
			</u--image>
		</view>
		<account v-show="loginMethod == 'account'" />
		<phone v-show="loginMethod == 'phone'" />
		<view style="height: 25px;" />
		<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";
import { getCity } from "../../utils/tool";
export default {
	components: {
		account,
		phone,
		otherLogin
	},
	data() {
		return {
			loginMethod: "",
			height: this.usePort == 'h5' ? "100px" : "150px"
		};
	},
	onLoad() {
		this.loginMethod = uni.getStorageSync('loginMethod') || 'account';//登录方式
		getCity.bind(this)().then(res => res && uni.setStorageSync("city", res))
	},
	methods: {
		/* 修改登录方式 */
		changeLoginMethod(Method) {
			this.loginMethod = Method;
		}
	}
}
</script>

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

	.logo {
		width: 147px;
		height: 42px;
		margin: 0 auto 50px;
	}
}
</style>