jiapeng
/
portal-front


			
				
					
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/common.css" />
	</head>
	<style>
		html,
		body {
			background: #efeff4;
		}
		/*input输入相关*/
		
		.frmbox {
			width: 100%;
			margin: 2% auto;
			border-radius: 6px;
		}
		
		.frmtype {
			width: 100%;
			margin: auto;
			line-height: 30px;
			padding: 1% 2%;
			font-size: 14px;
			line-height: 20px;
		}
		
		.frmbtn {
			width: 100%;
			margin: 4% auto;
			font-size: 14px;
			line-height: 24px;
			padding: 1% 2%;
			border: 1px solid #FF9900;
			border-radius: 6px;
			color: #FF9900;
		}
		
		.frmbox {
			border: none;
			width: 90%;
			height: 100%;
		}
		
		.frmactive {
			color: #fff;
			background-color: #FF9900;
			border: 1px solid #FF9900;
		}
		.pull-right {
			float: right!important
		}
		
		.pull-left {
			float: left!important
		}
		
		.alignCenter {
			text-align: center;
		}
		
		
		/*圆角*/
		/*头像、资源圆角*/
		.headRadius {
			border-radius: 4px;
		}
		
		.blockGroup {
			background: #fff;
		}
		
		.mainbox {
			width: 96%;
			margin: 2% auto;
		}
		
		.maincon {
			padding: 4% 2%;
			overflow: hidden;
		}
		
		.listtit {
			font-size: 14px;
			color: #333333;
		}
		/*中标题*/
		
		.listtit2 {
			font-size: 13px;
			color: #666666;
		}
		/*较小标题*/
		
		.listtit3 {
			font-size: 12px;
			color: #888888;
		}
		/*小标题*/
		
		.mui-ellipsis {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		/*资源图片*/
		
		.ResImgBox {
			display: inline-block;
			text-align: center;
			max-width: 64px;
			width: 64px;
			height: 60px;
			padding: 1px;
			background: #FAFAFA;
			border: 1px solid #F8F8F8;
			overflow: hidden;
			padding: 2px;
			margin: 6px 0;
			border-radius: 4px;
		}
		
		.ResImgBox2 {
			margin: 6px 0 6px 10px;
		}
		
		.ResImgBox .resImg {
			max-width: 100%;
			max-height: 100%;
			vertical-align: middle;
			position: relative;
		}
		
		.ResImgBox:before {
			content: ' ';
			display: inline-block;
			vertical-align: middle;
			width: 0;
			height: 100%;
			overflow: hidden;
			margin-left: -5px;
		}
		/*专家相关信息*/
		
		.personinfo .listtit3 {
			font-size: 14px;
			line-height: 24px;
			color: #AAAAAA;
			margin: 0;
		}
		
		.personinfo .listtit {
			font-size: 18px;
			line-height: 30px;
			color: #333333;
		}
		
		.personinfo .listtit3 {
			font-size: 14px;
			line-height: 24px;
			color: #AAAAAA;
			margin: 0;
		}
		
		.headbox .headimg {
			width: 100px;
			overflow: hidden;
			margin: auto;
		}
		/*咨询记录及等级*/
		
		.peolevelbox {
			display: block;
			padding: 4% 16px;
			border-top: 1px #F0F0F0 solid;
		}
		
		.peocountbox {
			width: 150px;
		}
		
		.peocount {
			font-size: 13px;
			color: #888888;
			overflow: hidden;
		}
		
		.peocount span em {
			font-size: 14px;
			padding: 0 3px;
			color: #FF9900;
			font-weight: 600;
		}
		
		.peocount .dialogicon {
			display: block;
			width: 20px;
			height: 20px;
			background: url(images/dialogue.png) center center no-repeat;
			background-size: 100% 100%;
			margin-right: 6px;
		}
		
		.peocount:before {
			position: absolute;
			right: 0;
			top: 0;
			left: 15px;
			height: 1px;
			content: '';
			-webkit-transform: scaleY(.5);
			transform: scaleY(.5);
			background-color: #c8c7cc;
		}
		
		.levelbox {
			margin: auto;
			overflow: hidden;
		}
		
		.levelbox .iconfont {
			float: left;
			margin: 2px;
			width: 14px;
			height: 14px;
		}
		
		.levelbox .icon-favor {
			background: url(images/favoricon.png) 0 0 no-repeat;
			background-size: 100% auto;
		}
		
		.levelbox .icon-favorfill {
			background: url(images/favoricon.png) 0 -14px no-repeat;
			background-size: 100% auto;
		}
		
		.infocontit {
			font-size: 14px;
			position: relative;
		}
		
		.infocon {
			padding: 6px 10px;
			/*text-align: justify;*/
			font-size: 13px;
			line-height: 27px;
			color: #888888;
		}
		
		.infocon ul {
			padding: 0;
			margin: 0;
			overflow: hidden;
		}
		
		.infocon .infoapply li {
			padding-left: 6px;
			padding-right: 2px;
			list-style: disc inside;
			width: 46%;
			float: left;
		}
		
		.infocon .infosubject li {
			list-style: none;
			padding: 2px 16px;
			margin: 4px;
			border: 1px solid #BBBBBB;
			border-radius: 6px;
			float: left;
		}
		
		.listitembox {
			position: static;
			width: 100%;
		}
		
		.listitembox .listitem {
			padding: 4px;
			padding-right: 0;
		}
		
		.listitembox .listitem .media-body {
			width: 73%;
			margin-left: 2%;
		}
		
		.listitembox .listitem .media-body .resbrief {
			width: 100%;
		}
		
		.listitembox .listitem .media-object {
			width: 30%;
		}
		
		.listitembox .listitem .media-object .iconposition {
			border-radius: 50%;
			max-width: 60px;
			height: 60px;
			margin: 1% 0;
		}
		
		.listitembox .listitem>a .mutlinebox {
			white-space: normal;
			overflow: auto;
			word-break: break-word;
		}
		
		.listbox {
			margin: 5px 0;
			max-width: 100%;
			overflow: hidden;
		}
		
		.listbrowse {
			border: 1px solid #FF9900;
			border-radius: 0 6px 6px 0;
			text-align: center;
			font-size: 13px;
			line-height: 27px;
			float: left;
			padding-right: 8px;
			max-width: 60%;
			overflow: hidden;
		}
		
		.plusbtn {
			font-size: 20px;
			line-height: 22px;
			color: #999999;
			margin-left: 4px;
			margin-top: 2px;
		}
		
		.plusbtn.icon-appreciatefill {
			color: #FF9900;
		}
		
		.like {
			display: block;
			float: left;
			width: 28px;
			font-size: 12px;
			background: #FF9900;
			color: #fff;
			line-height: 27px;
			margin-right: 5px;
		}
		
		.likenum {
			float: right;
			max-width: 130px;
			overflow: hidden;
		}
		
		.likenum .mui-icon {
			font-size: 24px;
			color: #CCCCCC;
		}
		
		.likepeople {
			width: 26px;
			height: 26px;
			line-height: 20px;
			float: left;
			overflow: hidden;
			margin-right: 5px;
		}
		
		.likepeople img {
			width: 100%;
			height: 100%;
		}
		
		.likemore {
			display: block;
			width: 25px;
			height: 25px;
			border: 1px solid #CCCCCC;
			background: url(images/likemore.png) center center no-repeat;
		}
		
		.personblock{ margin-left: 2%;}    
	</style>
	<body>
		<div class="contentBody2">
			<div class="blockGroup mainbox">
				<div class="maincon">
					<div class="ResImgBox resouimgbox pull-left" style="height:180px;width:180px;max-width:180px;margin:0 6px 0 8px;">
						<img class="resImg headRadius" src="images/default-resource.jpg" id="ziyuanimg" data-preview-src data-preview-group="1" />
					</div>
					<div class="personblock pull-left" id="fess">
						<img class="headRadius" style="width: 60px;" src="images/default-photo.jpg" id="proimg">
						<p class="listtit" id="proname"><em class="authicon authicon-cu" style="font-size:16px;" id="promodify"></em></p>
						<p class="listtit2"><span id="protitle"></span><span id="prooffice"></span></p>
						<p class="listtit3"><span id="proorgName"></span></p>
						<p class="listtit3"><span id="proadress"></span></p>
					</div>
				</div>
			</div>
			<div class="blockGroup mainbox">
				<div class="maincon">
					<ul class="resouinfobox">
						<li>
							<div class="infocontit">基本信息</div>
						</li>
						<li>
							<div class="infocon">
								<p style="color:#666666;">
									<span>资源名称：</span>
									<span class="listtit2" id='resourceName'></span>
								</p>
								<p style="color:#666666;">
									<span>应用用途：</span>
									<span class="listtit2" id="yongtu"></span>
								</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="blockGroup mainbox" id="fielddiv">
				<div class="maincon">
					<div class="infocontit">学术领域</div>
					<div class="infocon">
						<ul class="infosubject" id="field">
						</ul>
					</div>
				</div>
			</div>
			<div class="blockGroup mainbox" id="applydiv">
				<div class="maincon">
					<div class="infocontit">应用行业</div>
					<div class="infocon">
						<ul id="apply">
						</ul>
					</div>
				</div>
			</div>
			<div class="blockGroup mainbox" id="hezuodiv">
				<div class="maincon">
					<ul class="resouinfobox">
						<li>
							<div class="infocontit">合作备注</div>
							<div class="infocon">
								<p class="listtit3" id="hezuo"></p>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="blockGroup mainbox" id="detaildiv">
				<div class="maincon">
					<ul class="resouinfobox">
						<li>
							<div class="infocontit">详细描述</div>
							<div class="infocon">
								<p class="listtit3" id="detail">
									二维码123456789二维码、语音输入、摇一摇摄像头、文件系统、摇一摇摄像头、文件系统、微信分享……不够？Native.JS
								</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="blockGroup mainbox" style="padding-bottom:40px;">
				<div class="maincon alignCenter">
					<p style="margin-top: 30px;"><span style="color:#ff9900; font-size: 16px;line-height: 32px;">[ 科袖 ]</span><br />搭建企业与专家的桥梁</p>
					<div class="frmbox" style="margin:20px auto;">
						<a href="http://www.ekexiu.com/download/com.ekexiu.app_V1.1.1.apk"><button class="frmbtn frmactive">下载安卓客户端</button></a>
					</div>
					<div>
						<img style="width:120px;" src="images/weixin_code.jpg" />
						<p style="color:#CCCCCC;font-size:13px;">关注科袖公众号</p>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
		<script>
			$(document).ready(function() {				
				var resourceId='73FAD17209F7477C8D8537E5F98ADAAA';
				
				var oproname = document.getElementById("proname"); //专家名称
				var oprotitle = document.getElementById("protitle"); //专家职称
				var oprooffice = document.getElementById("prooffice"); //专家职务
				var oproorgName = document.getElementById("proorgName"); //专家所属机构
				var oproadress = document.getElementById("proadress"); //专家所在地
				var opromodify = document.getElementById("promodify"); //专家认证
				var oproimg = document.getElementById("proimg"); //专家头像
				
				var oresourceName = document.getElementById("resourceName"); //资源名称
				var oyongtu = document.getElementById("yongtu"); //应用用途
				var oziyuanimg = document.getElementById("ziyuanimg"); //资源图片
				var ofield = document.getElementById("field"); //学术领域
				var oapply = document.getElementById("apply"); //应用行业
				var odetail = document.getElementById("detail"); //详细描述
				var ohezuo = document.getElementById("hezuo"); //合作备注
				var oEnter = document.getElementById("fess");
				var ofielddiv = document.getElementById("fielddiv"); //学术领域容器
				var oapplydiv = document.getElementById("applydiv"); //应用行业容器
				var odetaildiv = document.getElementById("detaildiv"); //详细描述容器
				var ohezuodiv = document.getElementById("hezuodiv"); //合作备注容器
				
				function GetQueryString(name) {
					var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
					var r = window.location.search.substr(1).match(reg);
					var context = "";
					if(r != null)
						context = r[2];
					reg = null;
					r = null;
					return context == null || context == "" || context == "undefined" ? "" : decodeURI(context);
				}
				function ziyuaninfo(resourceId) {				
						$.ajax({
						    url:'/ajax/resource/resourceInfo', 
							data: {
								'resourceId': resourceId
							},
							dataType: 'json', //服务器返回json格式数据
							type: 'get', //HTTP请求类型
							timeout: 10000, //超时时间设置为10秒；
							success: function(data) {
								if(data.success) {
									console.log(JSON.stringify(data));
				
									var mydata = data.data;
									//资源名称
									professorId = mydata['professor']['id'];
									var userid = GetQueryString('userid');
									if(professorId==userid){
										document.getElementsByClassName("footbox")[0].style.display="none";
									}
									(mydata['resourceName']) ? oresourceName.innerHTML = mydata['resourceName']: oresourceName.innerHTML = '';
				
									//专家信息
									proId = mydata['professor']['id']; //专家id
									//专家名字
									(mydata['professor']["name"]) ? oproname.innerText = mydata['professor']["name"]: oproname.innerText = '';
									//职称
									(mydata['professor']["title"]) ? oprotitle.innerHTML = mydata['professor']["title"]: oprotitle.innerHTML = '';
									//职位
									if(mydata['professor']["office"] == null || mydata['professor']["office"] == undefined) {
										oprooffice.innerHTML = '';
									} else {
										if(mydata['professor']["title"]) {
											oprooffice.innerHTML = '，' + mydata['professor']["office"]; //职位
										}
										oprooffice.innerHTML = mydata['professor']["office"]; //职位
									};
									//所在机构
									(mydata['professor']["orgName"]) ? oproorgName.innerHTML = mydata['professor']["orgName"]: oproorgName.innerHTML = '';
									//所在地
									(mydata['professor']["address"]) ? oproadress.innerHTML = mydata['professor']["address"]: oproadress.innerHTML = '';
									/*是否认证*/
									(mydata['professor']["authentication"] == true) ? opromodify.classList.add('authicon'): opromodify.classList.add('unauthicon');
									/*专家头像*/
									(mydata['professor']["hasHeadImage"] == 0) ? oproimg.setAttribute('src', '/images/default-photo.jpg'): oproimg.setAttribute('src', '/images/head/' + mydata['professor']['id'] + '_m.jpg');
				
									//资源基本信息
									//(mydata['images']['imageSrc']) ? oziyuanimg.setAttribute('src', mydata['images']['imageSrc']): oziyuanimg.setAttribute('src', '../images/default-resource.jpg'); //资源图片
				
									var imgRes = "/images/resource/" + mydata.resourceId + ".jpg";
									if(mydata['images'].length) {
										oziyuanimg.setAttribute('src', imgRes)
									} else {
										oziyuanimg.setAttribute('src', '../images/default-resource.jpg')
									}
									(mydata['supportedServices']) ? oyongtu.innerHTML = mydata['supportedServices']: oyongtu.innerHTML = ''; //应用用途
				
									//学术领域
									if(mydata['subject']) {
										if(mydata['subject'].indexOf(',') != -1) { //字符串是否包含,
											var fieldlist = mydata['subject'].split(",");
											console.log(fieldlist.length);
											for(var i = 0; i < fieldlist; i++) {
												var oli = document.createElement('li');
												oli.innerText = fieldlist[i];
												ofield.appendChild(oli);
											}
										} else {
											var oli = document.createElement('li');
											oli.innerText = mydata['subject'];
											ofield.appendChild(oli);
										}
				
									} else {
										ofielddiv.style.display = 'none';
									}
				
									//应用行业
									if(mydata['industry']) {
										if(mydata['industry'].indexOf(',') != -1) { //字符串是否包含,
											var applylist = mydata['industry'].split(",");
											console.log(applylist.length);
											for(var i = 0; i < applylist; i++) {
												var oli = document.createElement('li');
												oli.innerText = fieldlist[i];
												oapply.appendChild(oli);
											}
										} else {
											var oli = document.createElement('li');
											oli.innerText = mydata['industry'];
											oapply.appendChild(oli);
										}
									} else {
										oapplydiv.style.display = 'none';
									}
				
									//详细描述
									if(mydata['descp']) {
										odetail.innerHTML = mydata['descp']
									} else {
										odetaildiv.style.display = 'none';
									}
				
									//合作备注
									if(mydata['cooperationNotes']) {
										ohezuo.innerHTML = mydata['cooperationNotes'];
									} else {
										ohezuodiv.style.display = 'none';
									}
				
									
								}
							},
							error: function(e) {
								return;
							}
						});
				}
				//资源信息
				ziyuaninfo(resourceId);
			});
				
		</script>
	</body>
</html>