<template>
	<view class="index-wrap">
		<web-view :src="src" style="width: 100%;height: 100vh;"></web-view>
	</view>
</template>

<script>
	import api from "@/packageCa/apiCa/user.js"
	export default {
		data() {
			return {
				user: null,//用户信息
				userId: 0,
				name: "",
				src: "",
			}
		},
		onLoad(e) {
			this.userId = e.userId;
			this.name = e.name;
			this.queryAIUrl();
		},
		methods: {
			// 登录获取用户信息
			async queryAIUrl() {
				uni.showLoading({
					title: "加载中"
				})
				const res = await api.queryAIUrl(this.userId,this.name)
				uni.hideLoading();
				if(res.Result == 1){
					this.src = res.Data;
				}else {
					uni.showToast({
						title: res.Message,
						icon: "none"
					})
				}
			},
		}
	}
</script>
<style  lang="scss">
	$image-oss-url: "https://51xuanxiao.oss-cn-hangzhou.aliyuncs.com/Resource/xcx_sygh";
	page {
		background: #EEF1F8 url("#{$image-oss-url}/17.png") no-repeat;
		background-size: contain;
	}
</style>
<style lang="scss" scoped>
	$image-oss-url: "https://51xuanxiao.oss-cn-hangzhou.aliyuncs.com/Resource/xcx_sygh";
	$image-oss-url2: "https://51xuanxiao.oss-cn-hangzhou.aliyuncs.com/Resource/xcx_sygh";
	.head-bar {
		position: relative;
		text-align: center;
		font-size: 36rpx;
		font-weight: 600;
		height: 60rpx;
		line-height: 60rpx;
		margin-bottom: 30rpx;
		
		.go-back {
		    position: absolute;
		    left: 10rpx;
		    top: 0;
		    width: 60rpx;
		    height: 60rpx;
		    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABUklEQVRoQ+3ZOwrCQBCA4UlyCVsrQauQdPYewcNYWXoHK1s9gYeYdIKlracYWYggkgiTnccuaB3D/+1sYEMKyPxXZN4Pf0DMBOu6XpZluQOANRGduq7bc+/nNoE+/gwAq3c0IrJ72H/grtDQ9UPxAPBAxDn3/uaAkfjQvUXES9IA6fiANZuARrwZQCveBKAZrw7QjlcFWMSrAaziVQCW8eIA63hRgEe8GMArXgTgGR8N8I6PAqQQPxmQSvxkQNM0VwDYfJ3dJ53nuef/7+vZx+l+9W8pxE+aQNu2CyK6ZwsI4VlvoQDI/iFOCcF+iD/3fgqTiAKkMIlogDdCBOCJEAN4IUQBHghxgDVCBWCJUANYIVQBFgh1gDbCBKCJMANoIUwBGghzwA/EExFn3HdkF8AYIpvPrO9VDu8TVVUdiKghomNWH7q5W2Xserct9Af0K/AChQ/cMY9OGScAAAAASUVORK5CYII=") center no-repeat;
		    background-size: 38rpx 38rpx;
		}
	}
	.index-wrap {
		padding-bottom: 122rpx;
		.izd-link {
			position: fixed;
			right: 23rpx;
			bottom: 280rpx;
			width: 80rpx;
			height: 80rpx;
			line-height: 80rpx;
			border: none;
			background: #1677ff;
			color: #fff;
			font-size: 24rpx;
			text-align: center;
			border-radius: 50%;
		}
		.person-info {
			position: relative;
			display: flex;
			align-items: center;
			width: 664rpx;
			height: 174rpx;
			padding: 0 20rpx;
			margin: 65rpx auto 20rpx;
			border: 3px solid #FFFFFF;
			background: #EDF5FE;
			border-radius: 12px;
			.img-wrap {
				overflow: hidden;
				width: 112rpx;
				height: 112rpx;
				border-radius: 50%;
				margin-right: 20rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.txt-wrap {
				.top {
					display: flex;
					align-items: flex-end;
					margin-bottom: 10rpx;
					color: #000000;
					margin-right: 20rpx;
					font-size: 36rpx;
				}
				.bottom {
					color: #666;
					font-size: 26rpx;
				}
			}
			.person-btn {
				position: absolute;
				display: flex;
				align-items: center;
				justify-content: center;
				right: 20rpx;
				top: 50%;
				transform: translateY(-50%);
				font-size: 24rpx;
				color: #fff;
				width: 100rpx;
				height: 48rpx;
				background: #1677ff;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				// .icon {
				// 	width: 72rpx;
				// 	height: 72rpx;
				// 	margin-bottom: 10rpx;
				// 	background: url("#{$image-oss-url}/index/change_user.png") no-repeat;
				// 	background-size: 100%;
				// }
			}
		}
		.notice-wrap {
			width: 710rpx;
			height: 60rpx;
			background-color: #ffffff;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			// padding: 0 20rpx;
			margin-top: 20rpx;
			.icon {
				display: block;
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
				background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAArCAMAAADWg4HyAAAA5FBMVEUAAAD/lin/lin/lin/lij/lij/lin/lin/lin/lin/lyn/lyn/lyn/lSf/lCr/ji7/lin/lin/lir/lij/lij/lSj/mCn/lCj/lSr/nin/lin/lin/lij/lyn/lSj/lyn/lif/lir/lyj/lSj/nSv/lSj/lin/lin/lij/lyn/lyn/lyn/lyn/lCj/lin/////4rL/rUr/8tb/x3b/1pP/vWT/uF3/+/P/7Mj/wWn/slH/7c7/2pz/slP/qET/oDr/nDL/893/6MP/6L7/79H/5rf/4Kv/36f/zYH/xHH/tVj/pDwNjetyAAAALnRSTlMAzWH065z68Ne3s0QkEw4H2q+slWdHMjApFuPRoHp1b1xMPjghx8W6qJaPf1FK94unHgAAAbJJREFUOMudlelWwjAQRqcUlX3fBBUF92USWjbZBXff/30cEiA0tHG5P8icw+1p0syXgMZhKGdlwvt2NXKRj4OJUBS3CR8Vg8wimTp7FT8ztYd+HNztqpVLDOAqran3GIxd9qgnaOQcFCE0Yyc3anwfdcbuDLeIbeZs6WZnzpgzRqLb7spvB5K6Zj722ZIR4mREIwoaQk1mvOaQSTi6PRocFFwL99jzdoet4S1GDAcoeQCiJusW0X1iCj7jrOeiRM44ISp6nQ6n5ye4IUPuqaj6zMf1kgCQLSP+nbfaBjcEYCl3iugEu7cAB8qlkQe7WUihwXU5MVot0IKyyZWfsL3qerMrlzpYu0mDKzdoipIagP3btcUAIsod4Fcv2L0ByCqXuX3DXtQBCqJ4+3mPSwAlUQw+OOF43W67o9QwEFVv+yp3Sj+LT1yRAyLvjdqz6l+1E6J1iEQYfUPEcfzKNnmLggrRbjjflzFerJdYlG7aQp3Oi+OuoqUSpM4SI7H0H86of519IqEGmuClETjnSAJ0Spa/mk2BDwUfO3YGART0O0s39bswYgvPUneh8YFmxW+S3+b9+8sbaXzQAAAAAElFTkSuQmCC") no-repeat;
				background-size: 100%;
			}
			.info-wrap {
				font-size: 30rpx;
				color: #ff8a00;
			}
		}
		.section-content {
			padding: 0 20rpx 60rpx;
			background: #EEF1F8;
			min-height: calc(100vh - 350rpx);
		}
		.section{
			background-color: #ffffff;
			border-radius: 10rpx;
			padding: 25rpx 20rpx 10rpx;
			margin-top: 20rpx;
			.head-title {
				font-size: 34rpx;
				color: #000000;
				font-weight: 600;
				margin-bottom: 10rpx;
			}
			.nav-block {
				display: flex;
				flex-wrap: wrap;
				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-right: 85rpx;
					margin-bottom:0rpx;
					&:nth-child(4){
						margin-right: 0;
					}
					.icon {
						width: 104rpx;
						height: 104rpx;
						background: #f2f2f2;
						&.icon-1 {
							background: url("#{$image-oss-url}/search/item_1.png") no-repeat;
							background-size: 100%;
						}
						&.icon-2 {
							background: url("#{$image-oss-url}/search/item_2.png") no-repeat;
							background-size: 100%;
						}
						&.icon-4 {
							background: url("#{$image-oss-url}/career/icon_4.png") no-repeat;
							background-size: 100%;
						}
						&.icon-5 {
							background: url("#{$image-oss-url}/career/icon_5.png") no-repeat;
							background-size: 100%;
						}
						&.icon-6 {
							background: url("#{$image-oss-url}/career/icon_6.png") no-repeat;
							background-size: 100%;
						}
						&.icon-7 {
							background: url("#{$image-oss-url}/career/icon_7.png") no-repeat;
							background-size: 100%;
						}
						&.icon-8 {
							background: url("#{$image-oss-url}/career/icon_8.png") no-repeat;
							background-size: 100%;
						}
						&.icon-9 {
							background: url("#{$image-oss-url}/career/icon_9.png") no-repeat;
							background-size: 100%;
						}
						&.icon-10 {
							background: url("#{$image-oss-url}/career/icon_10.png") no-repeat;
							background-size: 100%;
						}
						&.icon-11 {
							background: url("#{$image-oss-url}/career/icon_11.png") no-repeat;
							background-size: 100%;
						}
						&.icon-12 {
							background: url("#{$image-oss-url}/career/icon_12.png") no-repeat;
							background-size: 100%;
						}
						&.icon-13 {
							background: url("#{$image-oss-url}/career/icon_13.png") no-repeat;
							background-size: 100%;
						}
						&.icon-14 {
							background: url("#{$image-oss-url}/career/icon_14.png") no-repeat;
							background-size: 100%;
						}
						&.icon-15 {
							background: url("#{$image-oss-url}/career/icon_15.png") no-repeat;
							background-size: 100%;
						}
						&.icon-16 {
							background: url("#{$image-oss-url}/career/icon_16.png") no-repeat;
							background-size: 100%;
						}
						&.icon-17 {
							background: url("#{$image-oss-url}/career/icon_17.png") no-repeat;
							background-size: 100%;
						}
						&.icon-18 {
							background: url("#{$image-oss-url}/career/icon_18.png") no-repeat;
							background-size: 100%;
						}
						&.icon-19 {
							background: url("#{$image-oss-url}/career/icon_19.png") no-repeat;
							background-size: 100%;
						}
						&.icon-20 {
							background: url("#{$image-oss-url}/career/icon_20.png") no-repeat;
							background-size: 100%;
						}
						&.icon-22 {
							background: url("#{$image-oss-url}/career/icon_22.png") no-repeat;
							background-size: 100%;
						}
					}
			
					.title {
						margin-top: 0rpx;
						font-size: 24rpx;
						color: #333333;
					}
				}
			}
		}
		.layer-inner {
			.head {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 170rpx;
				width: 100%;
				font-size: 34rpx;
				color: #000000;
				.close-btn {
					position: absolute;
					top: 19rpx;
					right: 27rpx;
					width: 52rpx;
					height: 52rpx;
					background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAQAAAADQ4RFAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAHdElNRQfmChMLCDGRh9c8AAAAmklEQVQ4y7WUMQ7DMAhFnzpmRO3979ABqVN8m/YWdLGcqEkM+lI92Qb+R3wAPgRPjMoxnOANQRCsLGnIwtq98X5pCZvRuucLHuMxY9tYGvffD0tYdsA2ZbsEvWabAp4b09SPDlYp0t4JSAt0YPOhYEH4ja0m+jg+QvzMfKuh/CE9oRBCyQVxhTYSGlYYDWEIpXGXFou0woRl+QUj09L9Yg66GgAAAABJRU5ErkJggg==") center no-repeat;
					background-size: 50%;
				}
			}
			.content {
				max-height: 600rpx;
				overflow: auto;
				padding: 0 40rpx;
				.li {
					position: relative;
					height: 114rpx;
					line-height: 114rpx;
					border-bottom: 2rpx solid #f5f5f5;
					text {
						font-size: 30rpx;
						color: #000000;
						margin-right: 20rpx;
					}
					&.on {
						text {
							color: #1b88ff;
						}
						&::after {
							position: absolute;
							right: 10rpx;
							top: 50%;
							transform: translateY(-50%);
							content: "";
							background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAZCAMAAACM5megAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAATlBMVEUbiP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8AAAAx8hE2AAAAGHRSTlMAH0f2c0SVAfc7bv6JI/hS+UhR+1D0jxRK42VSAAAAAWJLR0QZ7G61iAAAAAd0SU1FB+YKFBEcF+FCm4sAAABsSURBVCjPzdHHDoAwDANQs1cLlJn//1KGEIKqrY+QY/QOiQ2QiRgA4iTlRCTjJC9+QsqPSMVJ3ShGdCuiwgToegu5zrWQ+6MX8j39QMaby41MILoLmWC6JzKkgGFHI+voQKxGTLMshACrdu83CdwKBKKZxqUAAAAASUVORK5CYII=") no-repeat;
							background-size: 100%;
							display: block;
							width: 35rpx;
							height: 25rpx;
						}
					}
				}
			}
			.op-block {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 30rpx 40rpx 0;
				width: 670rpx;
				height: 115rpx;
				.commit-btn {
					width: 361rpx;
					height: 77rpx;
					line-height: 77rpx;
					text-align: center;
					background-color: #1b88ff;
					border-radius: 38rpx;
					font-size: 30rpx;
					color: #ffffff;
				}
			}
		}
		.title-layer {
			position: fixed;
			z-index: 99;
			padding: 30rpx 20rpx;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.8);
			.inner {
				width: 710rpx;
				background: #fff;
			}
		}
	}
	.yanshi-wrap {
		padding: 0 20rpx 10rpx;
		.section{
			background: rgba(255,255,255,0.5);
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			border: 4rpx solid #FFFFFF;
			padding-top: 40rpx;
			.head-title {
				font-size: 32rpx;
				color: #000000;
				font-weight: 600;
				margin-bottom: 20rpx;
			}
			.nav-block {
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 40rpx;
				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-right: 55rpx;
					&:nth-child(4){
						margin-right: 0;
					}
					.icon {
						width: 112rpx;
						height: 112rpx;
						background: #f2f2f2;
						&.icon-1 {
							background: url("#{$image-oss-url}/search/item_1.png") no-repeat;
							background-size: 100%;
						}
						&.icon-2 {
							background: url("#{$image-oss-url}/search/item_2.png") no-repeat;
							background-size: 100%;
						}
						&.icon-3 {
							background: url("#{$image-oss-url}/search/item_3.png") no-repeat;
							background-size: 100%;
						}
						&.icon-4 {
							background: url("#{$image-oss-url}/search/item_4.png") no-repeat;
							background-size: 100%;
						}
						&.icon-5 {
							background: url("#{$image-oss-url}/search/item_5.png") no-repeat;
							background-size: 100%;
						}
						&.icon-6 {
							background: url("#{$image-oss-url}/search/item_6.png") no-repeat;
							background-size: 100%;
						}
						&.icon-7 {
							background: url("#{$image-oss-url}/search/item_7.png") no-repeat;
							background-size: 100%;
						}
						&.icon-8 {
							background: url("#{$image-oss-url}/search/item_8.png") no-repeat;
							background-size: 100%;
						}
						&.icon-9 {
							background: url("#{$image-oss-url}/search/item_9.png") no-repeat;
							background-size: 100%;
						}
						&.icon-10 {
							background: url("#{$image-oss-url}/search/item_10.png") no-repeat;
							background-size: 100%;
						}
						&.icon-11 {
							background: url("#{$image-oss-url}/search/item_11.png") no-repeat;
							background-size: 100%;
						}
						&.icon-12 {
							background: url("#{$image-oss-url}/search/item_12.png") no-repeat;
							background-size: 100%;
						}
						&.icon-13 {
							background: url("#{$image-oss-url}/search/item_13.png") no-repeat;
							background-size: 100%;
						}
						&.icon-14 {
							background: url("#{$image-oss-url}/search/item_14.png") no-repeat;
							background-size: 100%;
						}
						&.icon-15 {
							background: url("#{$image-oss-url}/search/item_20.png") no-repeat;
							background-size: 100%;
						}
						&.icon-101 {
							background: url("#{$image-oss-url2}/kashi/index_icon_1.png") no-repeat;
							background-size: 100%;
						}
						&.icon-102 {
							background: url("#{$image-oss-url2}/kashi/index_icon_2.png") no-repeat;
							background-size: 100%;
						}
						&.icon-103 {
							background: url("#{$image-oss-url2}/kashi/index_icon_3.png") no-repeat;
							background-size: 100%;
						}
						&.icon-104 {
							background: url("#{$image-oss-url2}/kashi/index_icon_4.png") no-repeat;
							background-size: 100%;
						}
						&.icon-105 {
							background: url("#{$image-oss-url2}/kashi/index_icon_5.png") no-repeat;
							background-size: 100%;
						}
						&.icon-106 {
							background: url("#{$image-oss-url2}/kashi/index_icon_6.png") no-repeat;
							background-size: 100%;
						}
						&.icon-107 {
							background: url("#{$image-oss-url2}/kashi/index_icon_7.png") no-repeat;
							background-size: 100%;
						}
						&.icon-108 {
							background: url("#{$image-oss-url2}/kashi/index_icon_8.png") no-repeat;
							background-size: 100%;
						}												
					}
			
					.title {
						font-size: 24rpx;
						color: #333;
					}
				}
			}
		}
	}
</style>
