<template>
	<view class="index-wrap">
		<view class="content">
			<view class="section">
				<view class="title-h1">
					推荐职业
				</view>
				<view class="table" v-if="jobList.length > 0">
					<view class="tr">
						<view class="th">
						</view>
						<view class="th">
							职业名称
						</view>
						<view class="th">
							测评推荐
						</view>
						<view class="th">
							我的意向
						</view>
					</view>
					<view class="tr" v-for="(item,index) in jobList" @click="checkedJob(item)" :key="index">
						<view class="td">
							<view class="checked-btn" :class="checkedCode==item.EncodeId?'on':''"></view>
						</view>
						<view class="td">
							{{item.Name}}
						</view>
						<view class="td">
							<view class="is-has" v-if="item.IsRecommend"></view>
						</view>
						<view class="td">
							<view class="is-has" v-if="item.IsIntention"></view>
						</view>
					<!-- 	<view class="td">
							<view class="is-has" v-if="item.IsSpecialtyMatch"></view>
						</view> -->
					</view>
				</view>
				<view class="empty" v-else>
					<view class="icon"></view>
					<view class="txt">暂无推荐职业，请先进行兴趣测评</view>
					<view class="nav-btn" @click="navTest">
						去测评
					</view>
				</view>
				<view class="title-h1" v-if="jobList.length > 0">
					职业介绍
				</view>
				<view class="desc">
					<view class="strong">
						{{jobName}}
					</view>
					{{jobIntroduce}}
				</view>
				<view class="title-h1" v-if="jobList.length > 0">
					发展路径
				</view>
				<view class="desc">
					<view class="strong">
						{{jobPath}}
					</view>
				</view>
				<view class="path-map" v-if="jobList.length > 0">
					<view class="origin-item">
						我
					</view>
					<view class="path-list" :class="isLoadingEnd?'show':'ing'">
						<view class="line-1">
							<view class="drop" :class="'drop-' + (index+1)"  v-for="(item,index) in academicRequire" :key="index" @click="showName(item)">
								<view class="txt">
									{{item}}
								</view>
								<view class="icon"></view>
							</view>
						</view>
						<view class="line-2">
							<view class="drop" :class="'drop-' + (index+1)"  v-for="(item,index) in generalSkillRequire" :key="index" @click="showName(item)">
								<view class="txt">
									{{item}}
								</view>
								<view class="icon"></view>
							</view>
						</view>
						<view class="line-3">
							<view class="drop" :class="'drop-' + (index+1)"  v-for="(item,index) in certificateRequire" :key="index" @click="showName(item)">
								<view class="txt">
									{{item}}
								</view>
								<view class="icon"></view>
							</view>
						</view>
						<view class="line-4">
							<view class="drop" :class="'drop-' + (index+1)"  v-for="(item,index) in jobSkill" :key="index" @click="showName(item)">
								<view class="txt">
									{{item}}
								</view>
								<view class="icon"></view>
							</view>
						</view>
						<view class="line-5">
							<view class="drop" :class="'drop-' + (index+1)"  v-for="(item,index) in professionalRequire" :key="index" @click="showName(item)">
								<view class="txt">
									{{item}}
								</view>
								<view class="icon"></view>
							</view>
						</view>
						<view class="line-6">
							<view class="drop" :class="'drop-' + (index+1)"  v-for="(item,index) in jobRequire" :key="index" @click="showName(item)">
								<view class="txt">
									{{item}}
								</view>
								<view class="icon"></view>
							</view>
						</view>
					</view>
					<view class="terminal-point">
						{{jobName}}
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import api from "@/packageCa/apiCa/studentProfile.js"
	import apiuser from "@/packageCa/apiCa/user.js"
	export default {
		data() {
			return {
				jobList: [],//
				checkedCode: null,
				jobIntroduce: "",
				jobName: "",
				jobPath: "",
				academicRequire: [], //
				generalSkillRequire: [],
				certificateRequire: [],
				jobRequire: [],
				jobSkill: [],
				professionalRequire: [],
				isLoadingEnd: false,
			}
		},
		created() {
			this.init();
		},
		methods: {
			// 获取推荐职业
			async init(){
				uni.showLoading({
					title: "加载中..."
				}) 
				await this.queryCareerPath();
				await this.queryPathInfo();
				uni.hideLoading();
			},
			async queryCareerPath() {
				const res = await api.queryCareerPath();
				if (res.Result == 1) {
					const list = res.Data.JobList
					this.jobList = list;
					if(list.length>0){
						this.checkedCode = list[0].EncodeId;
					}
				} else {
					uni.showToast({
						title: res.Message,
						icon: "none"
					})
				}
			},
			// 获取职业
			async queryPathInfo(){
				this.isLoadingEnd = false;
				if(this.jobList.length == 0){
					return;
				}
				const res = await api.queryPathInfo(this.checkedCode);
				if (res.Result == 1) {
					let data = res.Data;
					this.jobName = data.Name;
					this.jobIntroduce = data.JobIntroduce;
					this.jobPath = data.JobPath;
					this.academicRequire = JSON.parse(data.AcademicRequire).slice(0,5); 
					this.generalSkillRequire = JSON.parse(data.GeneralSkillRequire).slice(0,5); 
					this.certificateRequire = JSON.parse(data.CertificateRequire).slice(0,5);
					 
					this.jobRequire = JSON.parse(data.JobRequire).slice(0,5);
					this.jobSkill = JSON.parse(data.JobSkill).slice(0,5);
					this.professionalRequire = JSON.parse(data.ProfessionalRequire).slice(0,5);
					this.isLoadingEnd = true;
					this.postLog(303,`【新增】查看了${data.Name}的职业发展路径`,"",JSON.stringify(res.Data))
				} else {
					uni.showToast({
						title: res.Message,
						icon: "none"
					})
				}
			},
			// 添加日志
			postLog(operationType, remarks, beforeData = "", afterData = ""){
				try {
				  const data = {
				    OperationType: operationType,
				    Remarks: remarks,
				    BeforeOperationJson: beforeData,
				    AfterOperationJson: afterData
				  };
					console.log(data);
				  // return;
				  // 异步记录日志，不阻塞主流程
				  apiuser.saveUserOperationLog(data).then((res) => {
				    console.log('[Operation Log] 记录成功', res);
				  }).catch((err) => {
				    console.error('[Operation Log] 记录失败', err);
				  });
				} catch (e) {
				  console.error('[Operation Log] 记录异常', e);
				}
			},
			// 去测评
			navTest(){
				uni.navigateTo({
					url: `/packageCa/pagesTest/interestTestTitle`
				})
			},
			//选中职业
			checkedJob(ITEM){
				this.checkedCode = ITEM.EncodeId;
				this.queryPathInfo();
			},
			showName(ITEM){
				uni.showToast({
					title: ITEM,
					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;
		overflow-y: scroll;
	}
</style>
<style lang="scss" scoped>
	$image-oss-url: "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;
		.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;
		}
	}
	.empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 60rpx;
		padding-bottom: 100rpx;
		.icon {
			width: 240rpx;
			height: 240rpx;
			background: url("#{$image-oss-url}/empty.png") no-repeat;
			background-size: 100%;
			margin-bottom: 20rpx;
		}
		.txt {
			font-size: 28rpx;
			color: #A4B3E5;
		}
		.nav-btn {
			width: 335rpx;
			height: 80rpx;
			margin: 40rpx auto 0;
			background-color: #1989fa;
			border-radius: 40rpx;
			font-size: 28rpx;
			color: #fff;
			text-align: center;
			line-height: 80rpx;
		}
	}
	.index-wrap {
		 .content {
			 padding: 0 20rpx;
			 margin-top: 60rpx;
			 .title-h1 {
				font-size: 32rpx; 
				color: #333;
				margin-bottom: 30rpx;
				font-weight: 600;
			 }
			 .section {
				width: 650rpx;
				padding: 30rpx 30rpx 50rpx;
				background-color: #ffffff;
				border-radius: 14rpx;
				margin-bottom: 50rpx; 
				.table {
					border-left: 2rpx solid #eef2fd;
					border-top: 2rpx solid #eef2fd;
					border-right: 2rpx solid #eef2fd;
					border-radius: 6rpx;
					overflow-x: auto;
					overflow-y: auto;
					margin-bottom: 30rpx;
					max-height: 400rpx;
					.tr {
						display: -webkit-box;
						.th {
							width: 170rpx;
							height: 72rpx;
							line-height: 72rpx;
							text-align: center;
							background: #F6F9FE;
							font-size: 24rpx;
							color: #333333;
							border-bottom: 2rpx solid #eef2fd;
							&:nth-child(1){
								width: 60rpx;
							}
							&:nth-child(2){
								width: 250rpx;
							}
						}
						.td {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 170rpx;
							min-height: 72rpx;
							font-size: 24rpx;
							color: #333333;
							text-align: center;
							border-bottom: 2rpx solid #eef2fd;
							&:nth-child(1){
								width: 60rpx;
							}
							&:nth-child(2){
								width: 250rpx;
								word-break: break-all;
							}
							.checked-btn {
								width: 28rpx;
								height: 28rpx;
								background: #FFFFFF;
								border-radius: 50%;
								border: 2rpx solid #999999;
								&.on {
									position: relative;
									border-color: #1989fa;
									background: #1989fa;
									&:before {
										position: absolute;
										left: 50%;
										top: 50%;
										transform: translate(-50%,-50%);
										content: "";
										display: block;
										width: 12rpx;
										height: 12rpx;
										border-radius: 50%;
										background: #fff;
									}
								}
							}
							.is-has {
								width: 48rpx;
								height: 48rpx;
								background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAPXSURBVGiB7VlBbttIEKweLrXH5QKW4JuZH/gHa79g5RfEeoFpwBJ8o3Tz2gGkvCD6gZMXWE/QD8TcDDvA8hopntpDxlnZniFHJGMggOomcWbY1Wx2VzeBLbbY4peGNH3gzhkPRBCLYI9ABCISQUbiswjy5RKzfCJ5U/erTWD3nPHDAw5E8DeArs8eEjMSn759w7QumVoEds6YKIUTAHGV/SRyEUyWS7yvSqQSgXafxyJIqxr+HCRyEqMv72Sy6d6NCXQGTAEMN93nAxLT1QqnmzwNbwJRwihsIRUgqWyhH+ZK4ej2QjKfxcr31DDE+BWMB4B9rXETJYx8FnsR6AyYiuC4tmn+iFu/Y+yzsDSEOgN2AVw3YpbbiikAgC+cNLy7lFHRVp8n4OWJipgrhTd3/0gPhC1khrvnLMx0vxVdNBmnkVT5HAQm95dy+uM3cSCWeNBECqDnOscZQlHCKAyxELF6pha0xul6zo8Sxq0WFq71SuGNKys5QygM0X0N433woHHiulb0Dvy1kWV+GDqMLyxcUqCxrARMDvYSZr4gMHFlFFN5iwpX3O5z33bBSiAMETccPvPVEoXpEIJZ0WUSB7b/XSFkZVsFJHKlcFSmb5QUE1QKf1j/d9zUx/sfSUzJYs+JYOKja24vJCPgfLlJezq31gFR2HMckpMYPW9ETModW+TGvKySwjRFmkgtlXgd/gQcxs+CAD2bNw2ZXrvPWOT/WNUapy8OshiudXWdZQ8hjc+Wv/e1xtsilRgEaxVTMP3yTpzh1Rkw1RqLEq+vw7+QKfVysclKwzDEYueMVll9eyEZBFMS+fKr3fu754w7Ay6waVMk9lphJaC1u7CIIFIK43afH2xPQwlGIpjYsk67z32tcVNFXzmiwq6FooRRq4V/Pc717p7afR4DGFetL1rj0BaSTjHXGfDasxpnSuGwiIQZAnzYxOB1kMjvr+RP2zWnFiLxyfP8WGt3z2AkQL2e4rHhscBJIAgwK9En6+ia3uEJTDNyU1eWULud6SRgQsLJ3IKhiXPAvEda47q28cSsKB0XtpSmivo+BYggfWwBwxbSJjTVk9piQWlPTJaoyKeItca43edxEyMYolxHeQ22fuY0zgUSs/srOSxb5zUXuruUUZnqbBjZaoUjn4Xek7kgQO+VSGRK4dB3PrrxcLc94E8bMRYpXhcqjdd3zpiIIG247SydwtlQ+QOH0UsnJJJaRARTJRht4vWn22ti95yx1nhrJmvWxtuCjMDHQOF9VcMf0ehHPtNadkWwR36fbJj+Onv80Adgfn8l8ybvu8UWW/zC+A/xK5HWhynIGQAAAABJRU5ErkJggg==") center no-repeat;
								background-size: 90%;
							}
						}
					}
				}
				.desc {
					font-size: 28rpx;
					color: #666666;
					margin-bottom: 50rpx;
					.strong {
						font-weight: 600;
						color: #333;
					}
				}
				.path-map {
					display: flex;
					flex-direction: column;
					align-items: center;      
					.terminal-point,
					.origin-item {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 144rpx;
						height: 144rpx;
						color: #ffffff;
						font-size: 28rpx;
						text-align: center;
						border-radius: 50%;
						margin-bottom: 20rpx;
						background-color: #1989fa;
						animation: change 2s linear infinite 0s;
					}
					@keyframes change {
						0% {
							box-shadow: 0 0 1px 6rpx  #e8f3fe;
						 }
						 25% {
							box-shadow: 0 0 1px 12rpx #e8f3fe;
						 }
						 50% {
							box-shadow: 0 0 1px 16rpx #e8f3fe;
						 }
						 75% {
						 	box-shadow: 0 0 1px 12rpx #e8f3fe;
						 }
						  100% {
							box-shadow: 0 0 1px 6rpx #e8f3fe;;
						  }
					}
					.path-list {
						position: relative;
						padding: 0 30rpx;
						height: 1160rpx;
						width: 690rpx;
						margin-bottom: 30rpx;
						.drop {
							position: absolute;
							left: 0;
							top: 0;
							.txt {
								width: 150rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								text-align: center;
								height: 52rpx;
								padding: 0 10rpx;
								line-height: 52rpx;
								margin-bottom: 10rpx;
								background-color: #ffffff;
								border-radius: 26rpx;
								color: #1989fa;
								font-size: 28rpx;
								border: solid 2rpx #1989fa;
							}
							.icon {
								width: 32rpx;
								height: 44rpx;
								margin: 0 auto;
								background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAsCAMAAAAzZkq9AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAByFBMVEUZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoAAAAhPv4wAAAAlnRSTlMAMGSDm56PbUsPIoDY77RPGv7IUYz6uSGZ9w267UOvJU7FG2OfAgHwvVZzqPFxPBPW0IUM4Oid9doyq/Pi4/LRvm7OePgYl1x65NweDpWx2y9FkHQfBRX5zcbnXuZhR6zlsinqVesZV+42OHBmBolpMwQIqaMrmIKiHTpCaqotUHw9EaUj9MOBaCAkb4jUyaeO4fvdrUZV3EhjAAAAAWJLR0SX5m4brwAAAAd0SU1FB+kKHg8QKp3MRF0AAAH3SURBVDjLfZT5P5tBEMaHCEop6qyUV9QV4oqjrgqNO62rlCC0SJBWaV093UfrPjp/r/fNm92dJO/r+SUz830+u5uZdxeAKCLSEGWMjol9BFqKi3+MASUkPgnDSVHJSJXyNJinpmGo0jMIz0QNZcUx/CwbNWV6HjDkoJ5y/VzS5ZincHOyvgHzZcOLBzimFUBhEcmLU0skS2kZqVihnGSR6qErKkWpCqpFIrH/bavhtVoo5nGdaJy5nhXr4SU3NJDWNrJiEzSzsIXOxsCqr6CVhXZqaBOGPBa2U8NrcQYjCx0dxNDJBwZd/JDdxNDDir3Qxw0tTs7f8OJbgH7hGAhwvi3iIMAQ6fXwO4ARyS4KTbJ99D0d39i4i6YTyoJW/Wn3qltO6hqmVINbj0+HtSVYM6IvHzQNH0nnZjX4HB1OxnwYjwm+nB09IdwSer09lUHcq/FAlAq8sBgKbUu+T2Bh3A6fl7+srHL61fvNgcpFdKsf8xqsKz+mjUGVb9bKWfOW1fodPPLHOv4D4Oev7t8mudqqHKVO9lb/Yatt77BodVe5tV2wh7gMOnLmoAsqlAuqp30s8r8vVflaL+OB4RDRB1AwrAziqPP4xL3y17PnHDX/W5JOz4zncvVCnYfNd6Q5zcttspz3Krv9ev7GDxyu25S74//qtveUBePSekmnEAAAAABJRU5ErkJggg==") no-repeat;
								background-size: 100%;
							}
						}
						&.ing {
							.drop {
								transform: scale(0.1);
							}
						}
						&.show {
							.line-1{
								.drop-1 {
									animation: showDot 0.2s linear  0s;
								}
								.drop-2 {
										animation: showDot 0.2s linear  0.2s;
								}
								.drop-3 {
										animation: showDot 0.25s linear  1.1s;
								}
								.drop-4 {
										animation: showDot 0.2s linear  1.8s;
								}
								.drop-5 {
										animation: showDot 0.2s linear  2s;
								}
							}
							.line-2{
								.drop-1 {
									animation: showDot 0.2s linear  0.3s;
								}
								.drop-2 {
										animation: showDot 0.2s linear  0.5s;
								}
								.drop-3 {
										animation: showDot 0.2s linear  1.4s;
								}
								.drop-4 {
										animation: showDot 0.2s linear  1.9s;
								}
								.drop-5 {
										animation: showDot 0.2s linear  2.1s;
								}
							}
							.line-3{
								.drop-1 {
									animation: showDot 0.2s linear  0.1s;
								}
								.drop-2 {
										animation: showDot 0.2s linear  0.8s;
								}
								.drop-3 {
										animation: showDot 0.25s linear  1.3s;
								}
								.drop-4 {
										animation: showDot 0.2s linear  1.5s;
								}
								.drop-5 {
										animation: showDot 0.2s linear  1.7s;
								}
							}
							.line-4{
								.drop-1 {
									animation: showDot 0.2s linear  0.6s;
								}
								.drop-2 {
										animation: showDot 0.2s linear  0.9s;
								}
								.drop-3 {
										animation: showDot 0.25s linear  1.4s;
								}
								.drop-4 {
										animation: showDot 0.2s linear  1.6s;
								}
								.drop-5 {
										animation: showDot 0.2s linear  1.8s;
								}
							}
							.line-5{
								.drop-1 {
									animation: showDot 0.2s linear  0.2s;
								}
								.drop-2 {
										animation: showDot 0.2s linear  0.9s;
								}
								.drop-3 {
										animation: showDot 0.2s linear  1.4s;
								}
								.drop-4 {
										animation: showDot 0.2s linear  1.7s;
								}
								.drop-5 {
										animation: showDot 0.2s linear  1.9s;
								}
							}
							.line-6{
								.drop-1 {
									animation: showDot 0.2s linear  0.4s;
								}
								.drop-2 {
										animation: showDot 0.2s linear  0.8s;
								}
								.drop-3 {
										animation: showDot 0.25s linear  1s;
								}
								.drop-4 {
										animation: showDot 0.2s linear  1.9s;
								}
								.drop-5 {
										animation: showDot 0.2s linear  2.2s;
								}
							}
						}
						
						.line-1 {
							position: absolute;
							left: 65rpx;
							top: 20rpx;
							width: 190rpx;
							height: 1168rpx;
							background: url("#{$image-oss-url}/gaoxiao/jobCareer/path-1.png") center no-repeat;
							background-size: 100%;
							.drop-1 {
								left: 40rpx;
								top: -13rpx;
							}
							.drop-2 {
								left: -37rpx;
								top: 202rpx;
							}
							.drop-3 {
								left: -77rpx;
								top: 381rpx;
							}
							.drop-4 {
								left: -48rpx;
								top: 750rpx;
							}
							.drop-5 {
								left: 10rpx;
								top: 910rpx;
							}
						}
						.line-2 {
							position: absolute;
							left: 180rpx;
							top: 20rpx;
							width: 95rpx;
							height: 1169rpx;
							background: url("#{$image-oss-url}/gaoxiao/jobCareer/path-2.png") center no-repeat;
							background-size: 100%;
							.drop-1 {
								left: -58rpx;
								top: 146rpx;
							}
							.drop-2 {
								left: -76rpx;
								top: 316rpx;
							}
							.drop-3 {
								left: -82rpx;
								top: 480rpx;
							}
							.drop-4 {
								left: -85rpx;
								top: 633rpx;
							}
							.drop-5 {
								left: -57rpx;
								top: 822rpx;
							}
						}
						.line-3 {
							position: absolute;
							left: 310rpx;
							top: 0;
							width: 16rpx;
							height: 1169rpx;
							background: url("#{$image-oss-url}/gaoxiao/jobCareer/path-3.png") center no-repeat;
							background-size: 100%;
							.drop-1 {
								left: -78rpx;
								top: 90rpx;
							}
							.drop-2 {
								left: -78rpx;
								top: 264rpx;
							}
							.drop-3 {
								left: -78rpx;
								top: 433rpx;
							}
							.drop-4 {
								left: -78rpx;
								top: 589rpx;
							}
							.drop-5 {
								left: -78rpx;
								top: 773rpx;
							}
						}
						.line-4 {
							position: absolute;
							left: 410rpx;
							top: 0;
							width: 16rpx;
							height: 1169rpx;
							background: url("#{$image-oss-url}/gaoxiao/jobCareer/path-4.png") center no-repeat;
							background-size: 100%;
							.drop-1 {
								left: -78rpx;
								top: 153rpx;
							}
							.drop-2 {
								left: -78rpx;
								top: 336rpx;
							}
							.drop-3 {
								left: -78rpx;
								top: 504rpx;
							}
							.drop-4 {
								left: -78rpx;
								top: 656rpx;
							}
							.drop-5 {
								left: -78rpx;
								top: 839rpx;
							}
						}
						.line-5 {
							position: absolute;
							left: 465rpx;
							top: 16rpx;
							width: 60rpx;
							height: 1168rpx;
							background: url("#{$image-oss-url}/gaoxiao/jobCareer/path-5.png") center no-repeat;
							background-size: 100%;
							.drop-1 {
								left: -72rpx;
								top: -41rpx;
							}
							.drop-2 {
								left: -39rpx;
								top: 219rpx;
							}
							.drop-3 {
								left: -31rpx;
								top: 446rpx;
							}
							.drop-4 {
								left: -36rpx;
								top: 695rpx;
							}
							.drop-5 {
								left: -61rpx;
								top: 933rpx;
							}
						}
						.line-6 {
							position: absolute;
							left: 480rpx;
							top: 20rpx;
							width: 186rpx;
							height: 1168rpx;
							background: url("#{$image-oss-url}/gaoxiao/jobCareer/path-6.png") center no-repeat;
							background-size: 100%;
							.drop-1 {
								left: -5rpx;
								top: 57rpx;
							}
							.drop-2 {
								left: 66rpx;
								top: 273rpx;
							}
							.drop-3 {
								left: 90rpx;
								top: 518rpx;
							}
							.drop-4 {
								left: 54rpx;
								top: 753rpx;
							}
							.drop-5 {
								left: -58rpx;
								top: 1028rpx;
							}
						}
					
						@keyframes showDot {
						  0% {
						    opacity: 0;
							transform: scale(0.1);
						 }
						  100% {
						    opacity: 1;
							transform: scale(1);
						  }
						}
					}
				}
			 }
		}
	}
</style>