guest-security-check-system/snowy-admin-web/src/views/auth/portal/index.vue

<template>
	<div class="portal">
		<div class="portal-head">
			<div class="portal-head-center">
				<a href="https://www.singlewindow.cn" target="_blank"><img src="@/views/auth/login/img/swLogo.png"></a>
			</div>
		</div>
		<div class="portal-content">
			<div class="portal-content-process">
				<img src="./process.png"/>
			</div>
			<div class="portal-content-link">
				<template v-for="item in portalLinkOptions">
					<div class="portal-content-link-item">
						<div class="portal-content-link-item-icon">
							<img :src="icons[$TOOL.dictTypeData('portal_link_icon', item.label)]"/>
						</div>
						<div class="portal-content-link-item-title" v-html="item.label"/>
						<div class="portal-content-link-item-to __hover" @click="toLink(item)">进入系统</div>
					</div>
				</template>
			</div>
		</div>

	</div>
</template>
<script setup>
	import tool from "@/utils/tool";

	const { proxy } = getCurrentInstance()
	import icon1 from './icon-1.png'
	import icon2 from './icon-2.png'
	import icon3 from './icon-3.png'
	const icons = {
		1: icon1,
		2: icon2,
		3: icon3,
	}
	const portalLinkOptions = ref(tool.dictList('portal_link'))
	let timer = setInterval(() => {
		if (portalLinkOptions.value.length === 0) {
			portalLinkOptions.value = tool.dictList('portal_link')
		} else {
			clearInterval(timer)
		}
	}, 500)

	const toLink = (item) => {
		window.open(item.value)
	}
</script>
<style lang="less" scoped>
.portal {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	.portal-head {
		background-color: #ffffff;
		height: 90px;
		line-height: 90px;
		display: flex;
		.portal-head-center {
			display: flex;
			align-items: center;
			margin-left: 120px;
		}
	}
	.portal-content {
		flex: 1;
		padding: 14px 0 20px;
		overflow: hidden;
		background-image: url("./bg.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		>div {
			width: 1649px;
		}
		.portal-content-process {
			overflow: hidden;
			>img {
			}
		}
		.portal-content-link {
			display: flex;
			justify-content: space-between;
			.portal-content-link-item {
				width: 512px;
				height: 150px;
				border-radius: 20px;
				position: relative;
				.portal-content-link-item-icon {
					position: absolute;
					left: 24px;
					height: 100%;
					>img {
						height: 100%;
					}
				}
				.portal-content-link-item-title {
					font-family: YouSheBiaoTiHei;
					font-weight: bold;
					font-size: 32px;
					line-height: 45px;
					text-shadow: 0px 1px 2px rgba(0,0,0,0.25);
					transform: skewX(-10deg);
					position: absolute;
					right: 26px;
					top: 22px;
					letter-spacing: 2px;
				}
				.portal-content-link-item-to {
					width: 112px;
					height: 45px;
					background: #1890FF;
					box-shadow: 0px 1px 2px 0px rgba(255,255,255,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15);
					border-radius: 43px 43px 43px 43px;
					border: 1px solid rgba(255,255,255,0.5);
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: PingFang SC, PingFang SC;
					font-size: 18px;
					color: #FFFFFF;
					position: absolute;
					right: 24px;
					bottom: 18px;
				}
				&:nth-child(1) {
					background: #E2F0FF;
					box-shadow: 0px 4px 4px 0px rgba(24,144,255,0.1);
					.portal-content-link-item-title {
						color: #138DFF;
					}
					.portal-content-link-item-to {
						background: #138DFF;
					}
				}
				&:nth-child(2) {
					background: #DFF4FF;
					box-shadow: 0px 4px 4px 0px rgba(141,197,223,0.3);
					.portal-content-link-item-title {
						color: #2CA3DB;
					}
					.portal-content-link-item-to {
						background: #2CA3DB;
					}
				}
				&:nth-child(3) {
					background: #E9EFFF;
					box-shadow: 0px 4px 4px 0px rgba(162,180,237,0.3);
				.portal-content-link-item-title {
					color: #5E79D0;
				}
					.portal-content-link-item-to {
						background: #5E79D0;
					}
				}
			}
		}
	}
}
</style>