guest-security-check-system/snowy-admin-web/src/views/yqyc/hainan-login/index.vue

<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 class="__hover" href="https://wssp.hainan.gov.cn/hnwt/applicationPublicity" target="_blank"> 「海易办」</a></div>
					<div class="p2">「首页」点击扫码打开扫一扫</div>
					<div class="other">
						<div>电子营业执照</div>
						<div class="split"/>
						<div>CA认证登录</div>
						<div class="split"/>
					</div>
					<div class="other">
						<div>事业单位电子证书</div>
						<div class="split"/>
						<div class="__hover" @click="toLogin">海关总署卡介质</div>
						<div class="split"/>
					</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({})
const toLogin = () => {
	window.open(`${location.origin}/login?loginMode=card`)
}
</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;
					margin-bottom: 22px;
				}
				.other {
					display: flex;
					align-items: center;
					gap: 10px;
					line-height: 26px;
					>div {
						color: #111111;
						font-size: 16px;
					}
					.__hover {
						&:hover {
							color: #2c8bff;
						}
					}
					.split {
						width: 2px;
						height: 16px;
						background-color: #e0e0e0;
					}
				}
				.help {
					width: 100%;
					padding: 0 40px;
					margin-top: 30px;
					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>