sishitongtang-worker/pages/login/login.vue

<template>
	<view class="login" style="background-image: url('/static/login/bkg-login.png');background-size: 100% 100%;">
		<view class="title">
			<view class="top-word">HELLO</view>
			<view class="bottom-word">欢迎使用四世同堂管理系统</view>
		</view>

		<view class="username">
			<view class="left-name">账户名</view>
			<u-input :custom-style="inputStyle" :placeholder-style="placeholderStyle"></u-input>
		</view>

		<view class="password">
			<view class="left-name">密码</view>
			<u-input :custom-style="inputStyle" :placeholder-style="placeholderStyle"></u-input>
		</view>

		<view class="save-state">
			<view class="radio" @click="isRemeber =! isRemeber">
				<u-icon name="checkbox-mark" color="#fff" size="28" v-show="isRemeber">
				</u-icon>
			</view>
			<view class="radio-text">记住当前状态</view>
		</view>

		<view class="btn">
			<u-button :custom-style="btnStyle" :ripple="true" :hair-line="false">登陆</u-button>
		</view>

		<view class="bottom">
			2022四世同堂服务有限公司
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				placeholderStyle: "color:'#999';font-size:'28rpx';font-weight:'500';",
				inputStyle: {
					color: "#999",
					minHeight: "40rpx",
					height: "40rpx",
					width: "168rpx",
					lineHeight: "40rpx",
					fontSize: "28rpx",
					fontWeight: "500"
				},
				btnStyle: {
					color: "#fff",
					fontFamily: "PingFang-SC-Medium, PingFang-SC;",
					fontWeight: "500",
					background: "#4CBD8D",
					width: "600rpx",
					height: "90rpx",
					borderRadius: "6rpx",
					border: "none",
					fontSize: "28rpx",
					letterSpacing: "10rpx",
					marginTop: "66rpx"
				},
				isRemeber: false
			}
		},
		methods: {},
		computed: {}
	}
</script>

<style scoped lang="scss">
	.login {
		width: 100vw;
		height: 100vh;
		background: #187BFA;
	}

	.title {
		color: #FFF;

		padding: 414rpx 0 60rpx 76rpx;

		.top-word {
			width: 400rpx;
			height: 168rpx;
			font-size: 120rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			line-height: 168rpx;
		}

		.bottom-word {
			width: 384rpx;
			height: 46rpx;
			font-size: 32rpx;
			font-family: PingFang-SC-Medium, PingFang-SC;
			font-weight: 500;
			line-height: 46rpx;

			padding-top: calc(576 - 414)rpx;
		}
	}

	.input {
		height: 90rpx;
		width: 600rpx;
		border-radius: 6rpx;
		display: flex;
		align-items: center;
		background: #fff;
		border: 2rpx solid #FFFEFE;

		margin: 0 auto;

		.left-name {
			width: 84rpx;
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang-SC-Medium, PingFang-SC;
			font-weight: 500;
			color: #666666;
			line-height: 40rpx;
			text-align-last: justify;

			margin: 0 34rpx 0 32rpx;
		}
	}

	.username {
		@extend .input;

	}

	.password {
		@extend .input;

		margin-top: 40rpx;
	}

	.save-state {
		display: flex;
		align-items: center;

		margin-top: 40rpx;
		margin-left: 76rpx;

		.radio {
			width: 28rpx;
			height: 28rpx;
			border-radius: 6rpx;
			border: 2rpx solid #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.radio-text {
			width: 144rpx;
			height: 34rpx;
			font-size: 24rpx;
			font-family: PingFang-SC-Medium, PingFang-SC;
			font-weight: 500;
			color: #FFF;
			line-height: 34rpx;

			margin-left: 30rpx;
		}
	}

	.bottom {
		width: 298rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 34rpx;

		margin: 418rpx auto 0 auto;
	}
</style>