yqyc-system/snowy-admin-web/src/views/auth/portal/index.vue

<template>
	<div class="portal">
		<template v-for="item in portalLinkOptions">
			<div class="portal-item">
				<div class="portal-item-title" v-html="item.label"/>
				<div class="portal-item-icon">
					<img :src="icons[$TOOL.dictTypeData('portal_link_icon', item.label)]"/>
				</div>
				<div class="portal-item-to __hover" @click="toLink(item)">进入系统</div>
			</div>
		</template>
	</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'))
	const toLink = (item) => {
		window.open(item.value)
	}
</script>
<style lang="less" scoped>
.portal {
	width: 100%;
	height: 100%;
	background-image: url("./bg.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 40px;
	.portal-item {
		margin-top: 80px;
		width: 422px;
		height: 618px;
		background-image: url("./item-bg.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		.portal-item-title {
			font-family: YouSheBiaoTiHei;
			font-weight: bold;
			font-size: 44px;
			color: #D1E1FF;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			letter-spacing: 10px;
			line-height: 1.5;
			position: absolute;
			top: 34px;
		}
		.portal-item-to {
			width: 397px;
			height: 66px;
			position: absolute;
			bottom: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: Source Han Sans CN;
			font-weight: bold;
			font-size: 32px;
			background: linear-gradient(180deg, #FFFFFF 0%, #aedffa 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			letter-spacing: 6px;
			&:before {
				content: '';
				background-image: url("./to-bg.png");
				background-size: 100% 100%;
				background-repeat: no-repeat;
				width: 100%;
				height: 100%;
				position: absolute;
			}
		}
	}
}
</style>