realty/virgo.wzfrontend/console/src/layout/loginRegister.vue

<template>
	<div class="login-register">
		<div class="login-register-box">
			<div class="title">
				<div class="title-logo">
					<img src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/3156449b8a1a4874981b2a76d5947721"
						alt="logo.png">
					<div>
						<div class="title-name">有极物业管理平台</div>
						<div class="title-sub-name">SMART BUILDING ASSET OPERATION PLATFORM</div>
					</div>
				</div>
			</div>
			<div class="content">
				<div class="content-left">
					<div class="content-title">
						<div class="sub-title">有极物业管理平台</div>
						<div class="small-title">
							<span>运营维护</span>
							<span class="line"></span>
							<span>招商引资</span>
						</div>
					</div>
					<div class="content-image"></div>
				</div>
				<div class="content-right">
					<transition name="slide-fade" mode="out-in">
						<router-view :key="key" />
					</transition>
				</div>
			</div>
		</div>
	</div>
</template>


<script>
	export default {
		name: 'login',
		data() {
			return {};
		},
		created() {},
		methods: {},
		computed: {
			key() {
				return this.$route.path;
			}
		}
	};
</script>

<style lang="scss">
	.login-register {
		width: 100%;
		height: 100%;
		background: url(https://file-node.oss-cn-shanghai.aliyuncs.com/youji/8ead21d2c7464ae99745e93f5a17e4d3) no-repeat;
		background-size: 100% 100%;
		overflow: auto;

		.login-register-box {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			min-width: 1300px;
			min-height: 800px;
		}

		.title {
			height: 64px;
			background: rgba(255, 255, 255, 0.36);
			box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
			padding-left: 46px;
			display: flex;
			align-items: center;

			.title-logo {
				width: 245px;
				height: 34px;
				margin-right: 74px;
				display: flex;
				align-items: center;
				color: #484B50;
			}

			.title-sub-name {
				font-size: 12px;
				transform: scale(0.68) translateX(-66px);
				width: 282px;
				opacity: 0.75;
			}

			.title-name {
				font-family: hanyiyaku;
				font-size: 16px;
				line-height: 22px;
			}

			.title-logo img {
				width: 34px;
				height: 34px;
				margin-right: 10px;
				border-radius: 5px;
			}
		}

		.content {
			flex: 1;
			height: 0;
			width: 100%;
			overflow: auto;
			display: flex;
			align-items: center;
			justify-content: center;

			.content-image {
				width: 640px;
				height: 440px;
				background: url(https://file-node.oss-cn-shanghai.aliyuncs.com/youji/2fdedc8660e146b7bb003ce85dedea5f) no-repeat;
				background-size: 100% 100%;
			}

			.content-left {
				width: 910px;
				display: flex;
				flex-direction: column;
				padding-left: 90px;
			}

			.content-right {
				width: 400px;
				display: flex;
				align-items: center;
			}

			.content-title {
				margin-bottom: 64px;
			}

			.sub-title {
				font-weight: 600;
				font-size: 31px;
				color: #484B50;
				line-height: 44px;
				text-align: left;
				font-style: normal;
				margin-bottom: 10px;
			}

			.small-title {
				font-weight: 400;
				font-size: 16px;
				color: #333E4D;
				line-height: 22px;
				text-align: left;
				font-style: normal;
				display: flex;
				align-items: center;

				.line {
					margin: 0 20px;
					width: 1px;
					height: 16px;
					background: #CBE0FF;
				}
			}
		}
	}

	.login-box {
		width: 440px;
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(164, 178, 203, 0.15);
		border-radius: 8px;
		border: 0px solid #FFFFFF;

		.get-code-btn {
			position: absolute;
			font-size: 16px;
			color: #3371FF;
			height: 52px;
			line-height: 52px;
			top: 0;
			right: 16px;
			padding: 0 16px;
			cursor: pointer;
		}

		.get-code-btn-disabled {
			color: #BEBEBE;
		}

		.login-title {
			padding: 62px 52px 48px 52px;
		}

		.register {
			text-align: center;
			color: #333E4D;
			line-height: 20px;
			padding: 20px;

			span {
				cursor: pointer;
				color: $--color-primary;
			}
		}

		.login-title-value {
			font-weight: 600;
			font-size: 28px;
			color: #333E4D;
			line-height: 40px;
			text-align: left;
			font-style: normal;
			margin-bottom: 16px;
		}

		.login-title-line {
			width: 80px;
			height: 5px;
			background: #E3E7EE;
		}

		.login-form {
			padding: 0 52px;
			border-bottom: 1px solid #EDEFF2;

			input:-webkit-autofill {
				box-shadow: 0 0 0 30px #fff inset !important;
				-webkit-text-fill-color: #333E4D !important;
				background-color: #fff !important;
				transition: background-color 5000s ease-in-out 0s;
			}

			.el-form {
				display: block;

				.el-form-item {
					width: 100%;
					padding: 0;
					margin-bottom: 28px;
					position: relative;
				}

				.el-input__inner {
					border-radius: 4px;
					border: 1px solid #EDEFF2;
					background: transparent;
					color: #333E4D;
					padding: 15px 15px 15px 63px;
					height: 52px;
					line-height: 52px;
					font-size: 16px;
				}

				.el-form-item.is-error .el-input__inner,
				.el-form-item.is-error .el-input__inner:focus,
				.el-form-item.is-error .el-textarea__inner,
				.el-form-item.is-error .el-textarea__inner:focus {
					border-color: $--color-red;
				}

				.el-form-item__error {
					color: $--color-red;
				}

				.el-input__inner::placeholder,
				.el-range-input::placeholder,
				.el-textarea__inner::placeholder {
					color: $--color-common;
				}

				.el-input__icon,
				.el-range-separator {
					line-height: 52px;
					font-size: 16px;
				}

				.el-input__prefix {
					left: 16px;
				}

				.el-input__prefix::before {
					content: '';
					top: 16px;
					right: -16px;
					height: 21px;
					width: 1px;
					background-color: #EDEFF2;
					position: absolute;
				}

				.el-input__icon.iconfont {
					font-size: 20px;
					color: #4d5e79;
				}

				.el-input__icon.huifont-mima {
					opacity: 0.95;
					margin-left: 2px;
				}
			}

			.forget-box {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 50px;

				.forget {
					color: #5D6C82;
					cursor: pointer;
				}

				.forget:hover {
					color: $--color-primary;
				}

				.el-checkbox__inner {
					border-color: #EDEFF2;
				}

				.el-checkbox__label {
					color: #333E4D;
					padding-left: 8px;
				}

				.el-checkbox.is-checked .el-checkbox__inner {
					border-color: $--color-primary;
				}

				.el-checkbox:hover {
					.el-checkbox__label {
						color: $--color-primary;
					}

					.el-checkbox__inner {
						border-color: $--color-primary;
					}
				}


			}

			.el-button {
				width: 100%;
				margin-bottom: 60px;
				font-weight: 600;
				font-size: 20px;
				color: #FFFFFF;
				line-height: 28px;
			}
		}

		.image-item {
			.el-form-item__content {
				display: flex;
			}

			.el-input {
				width: 190px;
				margin-right: 12px;
			}

			.code-image {
				width: 131px;
				height: 50px;
				cursor: pointer;
			}
		}
	}

	.login-register::-webkit-scrollbar-thumb {
		background: #d4d4d4;
	}
</style>