realty/virgo.wzfrontend/workark/src/layout/loginLayout.vue

<template>
	<div class="login-register">
		<div class="title">
			<div class="title-logo">
				<img src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/2f7b4bfaf9e64817bc2cb46f3a632b01"
					alt="logo.png">
				<div class="title-name">WORKARK</div>
			</div>
		</div>
		<div class="content">
			<div class="content-left">
				<div class="content-title">
					<div class="sub-title">WORKARK</div>
					<div class="small-title">
						<span>项目申报</span>
						<span class="line"></span>
						<span>知识产权</span>
						<span class="line"></span>
						<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>
</template>


<script>
	export default {
		name: 'loginLayout',
		data() {
			return {};
		},
		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;
		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;
				}
			}
		}
	}
</style>