工作台

snowy-admin-web/src/views/auth/login/single-window-login.vue

@@ -2,7 +2,7 @@
 	<div class="single-window-login">
 		<div class="swl-head">
 			<div class="swl-head-center">
-				<a href="https://www.singlewindow.cn"><img src="./img/swLogo.png"></a>
+				<a href="https://www.singlewindow.cn" target="_blank"><img src="./img/swLogo.png"></a>
 				<div class="swl-head-lang">
 					<div class="__hover" :class="{ active: config.lang === 'zh-cn' }" @click="configLang('zh-cn')">简体中文</div>
 					<div>/</div>

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

@@ -1,14 +1,27 @@
 <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 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>
-		</template>
+		</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>
@@ -40,62 +53,113 @@
 .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: 4%;
-	.portal-item {
-		margin-top: 80px;
-		width: 422px;
-		height: 618px;
-		background-image: url("./item-bg.png");
+	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: 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;
+		justify-content: space-around;
+		>div {
+			width: 1649px;
 		}
-		.portal-item-to {
-			width: 397px;
-			height: 66px;
-			position: absolute;
-			bottom: 40px;
+		.portal-content-process {
+			overflow: hidden;
+			>img {
+			}
+		}
+		.portal-content-link {
 			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;
+			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;
+					}
+				}
 			}
 		}
 	}