模拟海南政务网登录

snowy-admin-web/src/router/whiteList.js

@@ -30,6 +30,14 @@ const constRouters = [
 		meta: {
 			title: '海南自由贸易便利化服务专区'
 		}
+	},
+	{
+		path: '/hainan-login',
+		name: 'hainan-login',
+		component: () => import('@/views/yqyc/hainan-login/index.vue'),
+		meta: {
+			title: '海南政务服务网'
+		}
 	}
 ]
 /**

snowy-admin-web/src/views/yqyc/hainan-login/index.vue

@@ -0,0 +1,397 @@
+<template>
+	<div class="hainan-login">
+		<div class="hl-head">
+			<img src="./hl_logo-1.png"/>
+			<div class="title">海南省统一身份认证平台</div>
+		</div>
+		<div class="hl-body">
+			<div class="hl-body-block">
+				<div class="hl-body-block-left">
+					<img class="logo" src="./hl_logo-2.png"/>
+					<div class="route">统一认证 / 一网通办</div>
+					<div class="tips">
+						<div class="tips-title">温馨提示</div>
+						<div class="tips-item">
+							<span class="tips-value">海易办，海南地区线上服务平台，包括海南省政务服务网、海易办移动端、线下政务综合窗口和自助机终端，线上登录时使用同一个账号密码。</span>
+						</div>
+						<div class="tips-item">
+							<span class="tips-label">政务服务热线：</span>
+							<span class="tips-value">12345</span>
+						</div>
+						<div class="tips-item">
+							<span class="tips-label">小客车业务办理：</span>
+							<span class="tips-value">0898-68835091、0898-68835092、0898-68835099</span>
+						</div>
+						<div class="tips-item">
+							<span class="tips-label">登录注册咨询：</span>
+							<span class="tips-value">0898-60827008、service@digitalhainan.com.cn，办理法人账号、手机号变更、企业信息变更与实名认证业务，请邮件标题标注统一社会信用代码/身份证号码，并提供相关证件材料（法人账号：营业执照+法人代表人身份证件+</span>
+							<span class="tips-value orange"><img src="./download-1.svg"/>单位信息修改授权书</span>
+							<span class="tips-value">盖章扫描件或照片）。</span>
+						</div>
+						<div class="tips-item">
+							<span class="tips-value">个人账号的手机号修改请自行前往海易办app操作或web端登录完成后在用户中心进行修改。</span>
+						</div>
+						<div class="tips-item">
+							<span class="tips-label">海易办平台技术支持：</span>
+							<span class="tips-value">13307640327、0898-66590327</span>
+						</div>
+						<div class="tips-item">
+							<span class="tips-label">海南省环保企业服务中心：</span>
+							<span class="tips-value">0898-65512370</span>
+						</div>
+						<div class="tips-item">
+							<span class="tips-label">海南E登记业务咨询、技术支持：</span>
+							<span class="tips-value">4007965656</span>
+						</div>
+					</div>
+				</div>
+				<div class="hl-body-block-right">
+					<div class="switch">
+						<div class="switch-item active">个人登录</div>
+						<div class="switch-item">法人登录</div>
+					</div>
+					<div class="method">
+						<div class="method-item">账号密码登录</div>
+						<div class="method-item active">扫码登录</div>
+					</div>
+					<img class="code" src="./hl_code-1.png"/>
+					<div class="p1"> 打开 扫码登录 <a data-v-c984e246="" href="https://wssp.hainan.gov.cn/hnwt/applicationPublicity"> 「海易办」</a></div>
+					<div class="p2">「首页」点击扫码打开扫一扫</div>
+					<div class="other">
+						<div>手机验证码登录</div>
+						<div class="split"/>
+						<div>刷脸登录</div>
+						<div class="split"/>
+						<div>电子社保卡</div>
+					</div>
+					<div class="help">
+						<span class="blue">帮助文档</span>
+						<span>还没有账号？<span class="blue">去注册</span></span>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="hl-foot">
+			<div class="hl-foot-one">
+				<a class="icon-1" href="https://bszs.conac.cn/sitename?method=show&id=031702B79501D11BE06310291AAC1AFF" target="_blank">
+					<img src="./hl_foot-icon-1.png"/>
+				</a>
+				<div class="icon-2">
+					<img src="./hl_foot-icon-2.png"/>
+					海易办APP
+				</div>
+				<div class="other">
+					<div class="label">相关站点：</div>
+					<div class="link">
+						<div><a class="__hover" href="https://gjzwfw.www.gov.cn/" target="_blank">国家政务服务平台</a></div>
+						<div><a class="__hover" href="https://www.hainan.gov.cn/" target="_blank">海南省人民政府门户网站</a></div>
+						<div><a class="__hover" href="https://db.hainan.gov.cn/" target="_blank">海南省营商环境建设厅</a></div>
+					</div>
+				</div>
+			</div>
+			<div class="hl-foot-two">
+				<div>主办：海南省营商环境建设厅</div>
+				<div>技术支持：海南省大数据管理局</div>
+				<div><a class="__hover" href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">琼ICP备2023001720号-3</a></div>
+				<div>政府网站标识码：4600000065</div>
+				<div><img src="./hl_foot-icon-3.png"/><a class="__hover" href="https://beian.mps.gov.cn/#/query/webSearch?recordcode=46010802000308" target="_blank">琼公网安备 46010702000400号</a></div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import {getCurrentInstance, reactive} from "vue";
+
+const {proxy} = getCurrentInstance()
+const state: any = reactive({})
+</script>
+
+<style lang="less" scoped>
+.hainan-login {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	.hl-head {
+		height: 56px;
+		width: 100%;
+		background-color: #ffffff;
+		padding: 0 2%;
+		display: flex;
+		align-items: center;
+		>img {
+			height: 32px;
+			margin-right: 16px;
+		}
+		.title {
+			color: #111;
+			font-size: 20px;
+			display: flex;
+			align-items: center;
+			&:before {
+				content: '';
+				background-color: #e0e0e0;
+				width: 1px;
+				height: 19px;
+				margin-right: 16px;
+			}
+		}
+	}
+	.hl-body {
+		flex: 1;
+		background-image: url("./hl_bg.png");
+		background-repeat: no-repeat;
+		background-size: 100% 100%;
+		padding-top: 48px;
+		.hl-body-block {
+			width: 1200px;
+			margin: 0 auto;
+			display: flex;
+			.hl-body-block-left {
+				flex: 1;
+				margin-top: 16px;
+				.logo {
+					width: 464px;
+					max-height: 94px;
+					margin-bottom: 21px;
+				}
+				.route {
+					margin-bottom: 24px;
+					color: #badaff;
+					font-weight: 400;
+					font-size: 20px;
+					line-height: 28px;
+				}
+				.tips {
+					margin-right: 128px;
+					padding: 20px;
+					color: #fff;
+					background-color: rgba(0, 0, 0, .3);
+					background-size: 100% 100%;
+					border-radius: 8px;
+					-webkit-backdrop-filter: blur(8px);
+					backdrop-filter: blur(8px);
+					.tips-title {
+						margin-bottom: 12px;
+						color: #fff;
+						font-weight: 600;
+						font-size: 20px;
+						line-height: 28px;
+					}
+					.tips-item {
+						white-space: pre-wrap;
+						font-weight: 500;
+						font-size: 14px;
+						line-height: 24px;
+						&:not(:last-child) {
+							margin-bottom: 6px;
+						}
+						.tips-label {
+							color: hsla(0,0%,100%,.6);
+						}
+						.tips-value {
+							&.orange {
+								>img {
+									width: 14px;
+									height: 14px;
+									margin-bottom: 2px;
+									margin-right: 8px;
+								}
+								padding: 0 5px;
+								color: #ff7500;
+							}
+						}
+					}
+				}
+			}
+			.hl-body-block-right {
+				width: 440px;
+				height: fit-content;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				background-color: #ffffff;
+				box-shadow: 0 0 20px 0 rgba(0,0,0,.04);
+				border-radius: 8px;
+				padding-bottom: 28px;
+				.switch {
+					display: flex;
+					margin-bottom: 28px;
+					width: 100%;
+					.switch-item {
+						flex: 1;
+						height: 56px;
+						background-color: #f0f0f0;
+						color: #111;
+						font-size: 24px;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						&.active {
+							background-color: #ffffff;
+							color: #2c8bff;
+							font-weight: 600;
+						}
+						&:first-child {
+							border-top-left-radius: 8px;
+						}
+						&:last-child {
+							border-top-right-radius: 8px;
+						}
+					}
+				}
+				.method {
+					display: flex;
+					justify-content: center;
+					gap: 40px;
+					margin-bottom: 32px;
+					.method-item {
+						font-size: 18px;
+						color: #666666;
+						padding-bottom: 2px;
+						&.active {
+							color: #111;
+							font-weight: 600;
+							border-bottom: 3px solid #2c8bff;
+							position: relative;
+							&:before {
+								position: absolute;
+								bottom: -12px;
+								left: 50%;
+								display: block;
+								width: 0;
+								height: 0;
+								border-color: #2c8bff transparent transparent transparent;
+								border-style: solid;
+								border-width: 10px 10px 0 10px;
+								-webkit-transform: translateX(-50%);
+								transform: translateX(-50%);
+								content: "";
+							}
+						}
+					}
+				}
+				.code {
+					width: 200px;
+					height: 200px;
+				}
+				.p1 {
+					margin-top: 16px;
+					color: #666;
+					font-size: 16px;
+					line-height: 24px;
+					>a {
+						color: #2c8bff;
+						text-decoration: unset;
+					}
+				}
+				.p2 {
+					color: #666;
+					font-size: 16px;
+					line-height: 24px;
+				}
+				.other {
+					margin-top: 28px;
+					display: flex;
+					align-items: center;
+					gap: 10px;
+					>div {
+						color: #111111;
+						font-size: 16px;
+					}
+					.split {
+						width: 2px;
+						height: 16px;
+						background-color: #e0e0e0;
+					}
+				}
+				.help {
+					width: 100%;
+					padding: 0 40px;
+					margin-top: 38px;
+					font-size: 15px;
+					color: #999;
+					display: flex;
+					justify-content: space-between;
+					.blue {
+						color: #2c8bff;
+					}
+				}
+			}
+		}
+	}
+	.hl-foot {
+		height: 200px;
+		background-color: #19222c;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		color: #fff;
+		font-weight: 400;
+		font-size: 14px;
+		line-height: 22px;
+		.hl-foot-one {
+			margin-top: 27px;
+			margin-bottom: 18px;
+			display: flex;
+			.icon-1 {
+				width: 56px;
+				height: 68px;
+				margin-top: 6px;
+				margin-right: 32px;
+				>img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+			.icon-2 {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				padding: 0 10px;
+				margin-right: 22px;
+				>img {
+					margin-bottom: 4px;
+					width: 80px;
+					height: 80px;
+				}
+			}
+			.other {
+				.link {
+					display: flex;
+					gap: 4px;
+					margin-top: 10px;
+					>div {
+						display: contents;
+						>a {
+							padding: 13px;
+							background-color: hsla(0, 0%, 100%, .08);
+							color: #ffffff;
+							text-decoration: unset;
+						}
+					}
+				}
+			}
+		}
+		.hl-foot-two {
+			display: flex;
+			gap: 20px;
+			>div {
+				display: flex;
+				align-items: center;
+				>img {
+					margin-right: 4px;
+				}
+				>a {
+					color: #ffffff;
+					text-decoration: unset;
+					&:hover {
+						color: #2c8bff;
+					}
+				}
+			}
+		}
+	}
+}
+</style>