Home Explore Help
Register Sign In
jiapeng
/
portal-front
Watch 3
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Commits 14 Releases 0 Wiki
Browse Source

添加资源分享页面

luyanan 8 years ago
parent
11085676b8
commit
4f6a553632
2 changed files with 652 additions and 5 deletions
Unified View Show Diff Stats
  1. 4 5
      shareProinfor.html
  2. 648 0
      shareResinfor.html

+ 4 - 5
shareProinfor.html
View File

665 
								document.getElementsByClassName("headimg1")[0].src = "../images/default-photo.jpg";
 665 
								document.getElementsByClassName("headimg1")[0].src = "../images/default-photo.jpg";
666 
							}
 666 
							}
667 
							if($data.authType) {
 667 
							if($data.authType) {
668 
								nameli.classList.add('icon-vip');
668 
								nameli.classList.add('authicon');
669 
								nameli.classList.add('authicon-cu');
 669 
								nameli.classList.add('authicon-cu');
670 
							} else {
 670 
							} else {
671 
								if($data.authStatus) {
 671 
								if($data.authStatus) {
672 
									if($data.authentication == 1) {
 672 
									if($data.authentication == 1) {
673 
										nameli.classList.add('icon-renzheng');
673 
										nameli.classList.add('authicon2');
674 
										nameli.classList.add('authicon-mana');
 674 
										nameli.classList.add('authicon-mana');
675 
										//nameli.innerHTML="<span>科研</span>";
 675 
										//nameli.innerHTML="<span>科研</span>";
676 
									} else if($data.authentication == 2) {
 676 
									} else if($data.authentication == 2) {
677 
										nameli.classList.add('icon-renzheng');
677 
										nameli.classList.add('authicon2');
678 
										nameli.classList.add('authicon-staff');
 678 
										nameli.classList.add('authicon-staff');
679 
										//nameli.innerHTML="<span>企业</span>";
 679 
										//nameli.innerHTML="<span>企业</span>";
680 
									} else {
 680 
									} else {
681 
										nameli.classList.add('icon-renzheng');
681 
										nameli.classList.add('authicon2');
682 
										nameli.classList.add('authicon-stu');
 682 
										nameli.classList.add('authicon-stu');
683 
										//nameli.innerHTML="<span>学生</span>";
 683 
										//nameli.innerHTML="<span>学生</span>";
684 
									}
 684 
									}
755 
							}
 755 
							}
756 
						},
 756 
						},
757 
						error: function(e) {
 757 
						error: function(e) {
758 
							alert(JSON.stringify(e))
759 
							return;
 758 
							return;
760 
						}
 759 
						}
761 
					});
 760 
					});

+ 648 - 0
shareResinfor.html
View File

1 
<!DOCTYPE html>
2 
<html>
3
4 
	<head>
5 
		<meta charset="UTF-8">
6 
		<title></title>
7 
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
8 
		<link rel="stylesheet" href="css/reset.css" />
9 
		<link rel="stylesheet" href="css/common.css" />
10 
	</head>
11 
	<style>
12 
		html,
13 
		body {
14 
			background: #efeff4;
15 
		}
16 
		/*input输入相关*/
17
18 
		.frmbox {
19 
			width: 100%;
20 
			margin: 2% auto;
21 
			border-radius: 6px;
22 
		}
23
24 
		.frmtype {
25 
			width: 100%;
26 
			margin: auto;
27 
			line-height: 30px;
28 
			padding: 1% 2%;
29 
			font-size: 14px;
30 
			line-height: 20px;
31 
		}
32
33 
		.frmbtn {
34 
			width: 100%;
35 
			margin: 4% auto;
36 
			font-size: 14px;
37 
			line-height: 24px;
38 
			padding: 1% 2%;
39 
			border: 1px solid #FF9900;
40 
			border-radius: 6px;
41 
			color: #FF9900;
42 
		}
43
44 
		.frmbox {
45 
			border: none;
46 
			width: 90%;
47 
			height: 100%;
48 
		}
49
50 
		.frmactive {
51 
			color: #fff;
52 
			background-color: #FF9900;
53 
			border: 1px solid #FF9900;
54 
		}
55 
		.pull-right {
56 
			float: right!important
57 
		}
58
59 
		.pull-left {
60 
			float: left!important
61 
		}
62
63 
		.alignCenter {
64 
			text-align: center;
65 
		}
66
67
68 
		/*圆角*/
69 
		/*头像、资源圆角*/
70 
		.headRadius {
71 
			border-radius: 4px;
72 
		}
73
74 
		.blockGroup {
75 
			background: #fff;
76 
		}
77
78 
		.mainbox {
79 
			width: 96%;
80 
			margin: 2% auto;
81 
		}
82
83 
		.maincon {
84 
			padding: 4% 2%;
85 
			overflow: hidden;
86 
		}
87
88 
		.listtit {
89 
			font-size: 14px;
90 
			color: #333333;
91 
		}
92 
		/*中标题*/
93
94 
		.listtit2 {
95 
			font-size: 13px;
96 
			color: #666666;
97 
		}
98 
		/*较小标题*/
99
100 
		.listtit3 {
101 
			font-size: 12px;
102 
			color: #888888;
103 
		}
104 
		/*小标题*/
105
106 
		.mui-ellipsis {
107 
			overflow: hidden;
108 
			white-space: nowrap;
109 
			text-overflow: ellipsis;
110 
		}
111 
		/*资源图片*/
112
113 
		.ResImgBox {
114 
			display: inline-block;
115 
			text-align: center;
116 
			max-width: 64px;
117 
			width: 64px;
118 
			height: 60px;
119 
			padding: 1px;
120 
			background: #FAFAFA;
121 
			border: 1px solid #F8F8F8;
122 
			overflow: hidden;
123 
			padding: 2px;
124 
			margin: 6px 0;
125 
			border-radius: 4px;
126 
		}
127
128 
		.ResImgBox2 {
129 
			margin: 6px 0 6px 10px;
130 
		}
131
132 
		.ResImgBox .resImg {
133 
			max-width: 100%;
134 
			max-height: 100%;
135 
			vertical-align: middle;
136 
			position: relative;
137 
		}
138
139 
		.ResImgBox:before {
140 
			content: ' ';
141 
			display: inline-block;
142 
			vertical-align: middle;
143 
			width: 0;
144 
			height: 100%;
145 
			overflow: hidden;
146 
			margin-left: -5px;
147 
		}
148 
		/*专家相关信息*/
149
150 
		.personinfo .listtit3 {
151 
			font-size: 14px;
152 
			line-height: 24px;
153 
			color: #AAAAAA;
154 
			margin: 0;
155 
		}
156
157 
		.personinfo .listtit {
158 
			font-size: 18px;
159 
			line-height: 30px;
160 
			color: #333333;
161 
		}
162
163 
		.personinfo .listtit3 {
164 
			font-size: 14px;
165 
			line-height: 24px;
166 
			color: #AAAAAA;
167 
			margin: 0;
168 
		}
169
170 
		.headbox .headimg {
171 
			width: 100px;
172 
			overflow: hidden;
173 
			margin: auto;
174 
		}
175 
		/*咨询记录及等级*/
176
177 
		.peolevelbox {
178 
			display: block;
179 
			padding: 4% 16px;
180 
			border-top: 1px #F0F0F0 solid;
181 
		}
182
183 
		.peocountbox {
184 
			width: 150px;
185 
		}
186
187 
		.peocount {
188 
			font-size: 13px;
189 
			color: #888888;
190 
			overflow: hidden;
191 
		}
192
193 
		.peocount span em {
194 
			font-size: 14px;
195 
			padding: 0 3px;
196 
			color: #FF9900;
197 
			font-weight: 600;
198 
		}
199
200 
		.peocount .dialogicon {
201 
			display: block;
202 
			width: 20px;
203 
			height: 20px;
204 
			background: url(images/dialogue.png) center center no-repeat;
205 
			background-size: 100% 100%;
206 
			margin-right: 6px;
207 
		}
208
209 
		.peocount:before {
210 
			position: absolute;
211 
			right: 0;
212 
			top: 0;
213 
			left: 15px;
214 
			height: 1px;
215 
			content: '';
216 
			-webkit-transform: scaleY(.5);
217 
			transform: scaleY(.5);
218 
			background-color: #c8c7cc;
219 
		}
220
221 
		.levelbox {
222 
			margin: auto;
223 
			overflow: hidden;
224 
		}
225
226 
		.levelbox .iconfont {
227 
			float: left;
228 
			margin: 2px;
229 
			width: 14px;
230 
			height: 14px;
231 
		}
232
233 
		.levelbox .icon-favor {
234 
			background: url(images/favoricon.png) 0 0 no-repeat;
235 
			background-size: 100% auto;
236 
		}
237
238 
		.levelbox .icon-favorfill {
239 
			background: url(images/favoricon.png) 0 -14px no-repeat;
240 
			background-size: 100% auto;
241 
		}
242
243 
		.infocontit {
244 
			font-size: 14px;
245 
			position: relative;
246 
		}
247
248 
		.infocon {
249 
			padding: 6px 10px;
250 
			/*text-align: justify;*/
251 
			font-size: 13px;
252 
			line-height: 27px;
253 
			color: #888888;
254 
		}
255
256 
		.infocon ul {
257 
			padding: 0;
258 
			margin: 0;
259 
			overflow: hidden;
260 
		}
261
262 
		.infocon .infoapply li {
263 
			padding-left: 6px;
264 
			padding-right: 2px;
265 
			list-style: disc inside;
266 
			width: 46%;
267 
			float: left;
268 
		}
269
270 
		.infocon .infosubject li {
271 
			list-style: none;
272 
			padding: 2px 16px;
273 
			margin: 4px;
274 
			border: 1px solid #BBBBBB;
275 
			border-radius: 6px;
276 
			float: left;
277 
		}
278
279 
		.listitembox {
280 
			position: static;
281 
			width: 100%;
282 
		}
283
284 
		.listitembox .listitem {
285 
			padding: 4px;
286 
			padding-right: 0;
287 
		}
288
289 
		.listitembox .listitem .media-body {
290 
			width: 73%;
291 
			margin-left: 2%;
292 
		}
293
294 
		.listitembox .listitem .media-body .resbrief {
295 
			width: 100%;
296 
		}
297
298 
		.listitembox .listitem .media-object {
299 
			width: 30%;
300 
		}
301
302 
		.listitembox .listitem .media-object .iconposition {
303 
			border-radius: 50%;
304 
			max-width: 60px;
305 
			height: 60px;
306 
			margin: 1% 0;
307 
		}
308
309 
		.listitembox .listitem>a .mutlinebox {
310 
			white-space: normal;
311 
			overflow: auto;
312 
			word-break: break-word;
313 
		}
314
315 
		.listbox {
316 
			margin: 5px 0;
317 
			max-width: 100%;
318 
			overflow: hidden;
319 
		}
320
321 
		.listbrowse {
322 
			border: 1px solid #FF9900;
323 
			border-radius: 0 6px 6px 0;
324 
			text-align: center;
325 
			font-size: 13px;
326 
			line-height: 27px;
327 
			float: left;
328 
			padding-right: 8px;
329 
			max-width: 60%;
330 
			overflow: hidden;
331 
		}
332
333 
		.plusbtn {
334 
			font-size: 20px;
335 
			line-height: 22px;
336 
			color: #999999;
337 
			margin-left: 4px;
338 
			margin-top: 2px;
339 
		}
340
341 
		.plusbtn.icon-appreciatefill {
342 
			color: #FF9900;
343 
		}
344
345 
		.like {
346 
			display: block;
347 
			float: left;
348 
			width: 28px;
349 
			font-size: 12px;
350 
			background: #FF9900;
351 
			color: #fff;
352 
			line-height: 27px;
353 
			margin-right: 5px;
354 
		}
355
356 
		.likenum {
357 
			float: right;
358 
			max-width: 130px;
359 
			overflow: hidden;
360 
		}
361
362 
		.likenum .mui-icon {
363 
			font-size: 24px;
364 
			color: #CCCCCC;
365 
		}
366
367 
		.likepeople {
368 
			width: 26px;
369 
			height: 26px;
370 
			line-height: 20px;
371 
			float: left;
372 
			overflow: hidden;
373 
			margin-right: 5px;
374 
		}
375
376 
		.likepeople img {
377 
			width: 100%;
378 
			height: 100%;
379 
		}
380
381 
		.likemore {
382 
			display: block;
383 
			width: 25px;
384 
			height: 25px;
385 
			border: 1px solid #CCCCCC;
386 
			background: url(images/likemore.png) center center no-repeat;
387 
		}
388
389 
		.personblock{ margin-left: 2%;}
390 
	</style>
391
392 
	<body>
393 
		<div class="contentBody2">
394 
			<div class="blockGroup mainbox">
395 
				<div class="maincon">
396 
					<div class="ResImgBox resouimgbox pull-left" style="height:180px;width:180px;max-width:180px;margin:0 6px 0 8px;">
397 
						<img class="resImg headRadius" src="images/default-resource.jpg" id="ziyuanimg" data-preview-src data-preview-group="1" />
398 
					</div>
399 
					<div class="personblock pull-left" id="fess">
400 
						<img class="headRadius" style="width: 60px;" src="images/default-photo.jpg" id="proimg">
401 
						<p class="listtit" id="proname"><em class="authicon authicon-cu" style="font-size:16px;" id="promodify"></em></p>
402 
						<p class="listtit2"><span id="protitle"></span><span id="prooffice"></span></p>
403 
						<p class="listtit3"><span id="proorgName"></span></p>
404 
						<p class="listtit3"><span id="proadress"></span></p>
405 
					</div>
406 
				</div>
407 
			</div>
408 
			<div class="blockGroup mainbox">
409 
				<div class="maincon">
410 
					<ul class="resouinfobox">
411 
						<li>
412 
							<div class="infocontit">基本信息</div>
413 
						</li>
414 
						<li>
415 
							<div class="infocon">
416 
								<p style="color:#666666;">
417 
									<span>资源名称：</span>
418 
									<span class="listtit2" id='resourceName'></span>
419 
								</p>
420 
								<p style="color:#666666;">
421 
									<span>应用用途：</span>
422 
									<span class="listtit2" id="yongtu"></span>
423 
								</p>
424 
							</div>
425 
						</li>
426 
					</ul>
427 
				</div>
428 
			</div>
429 
			<div class="blockGroup mainbox" id="fielddiv">
430 
				<div class="maincon">
431 
					<div class="infocontit">学术领域</div>
432 
					<div class="infocon">
433 
						<ul class="infosubject" id="field">
434 
						</ul>
435 
					</div>
436 
				</div>
437 
			</div>
438 
			<div class="blockGroup mainbox" id="applydiv">
439 
				<div class="maincon">
440 
					<div class="infocontit">应用行业</div>
441 
					<div class="infocon">
442 
						<ul id="apply">
443 
						</ul>
444 
					</div>
445 
				</div>
446 
			</div>
447 
			<div class="blockGroup mainbox" id="hezuodiv">
448 
				<div class="maincon">
449 
					<ul class="resouinfobox">
450 
						<li>
451 
							<div class="infocontit">合作备注</div>
452 
							<div class="infocon">
453 
								<p class="listtit3" id="hezuo"></p>
454 
							</div>
455 
						</li>
456 
					</ul>
457 
				</div>
458 
			</div>
459 
			<div class="blockGroup mainbox" id="detaildiv">
460 
				<div class="maincon">
461 
					<ul class="resouinfobox">
462 
						<li>
463 
							<div class="infocontit">详细描述</div>
464 
							<div class="infocon">
465 
								<p class="listtit3" id="detail">
466 
									二维码123456789二维码、语音输入、摇一摇摄像头、文件系统、摇一摇摄像头、文件系统、微信分享……不够？Native.JS
467 
								</p>
468 
							</div>
469 
						</li>
470 
					</ul>
471 
				</div>
472 
			</div>
473 
			<div class="blockGroup mainbox" style="padding-bottom:40px;">
474 
				<div class="maincon alignCenter">
475 
					<p style="margin-top: 30px;"><span style="color:#ff9900; font-size: 16px;line-height: 32px;">[ 科袖 ]</span><br />搭建企业与专家的桥梁</p>
476 
					<div class="frmbox" style="margin:20px auto;">
477 
						<a href="http://www.ekexiu.com/download/com.ekexiu.app_V1.1.1.apk"><button class="frmbtn frmactive">下载安卓客户端</button></a>
478 
					</div>
479 
					<div>
480 
						<img style="width:120px;" src="images/weixin_code.jpg" />
481 
						<p style="color:#CCCCCC;font-size:13px;">关注科袖公众号</p>
482 
					</div>
483 
				</div>
484 
			</div>
485 
		</div>
486 
		<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
487 
		<script>
488 
			$(document).ready(function() {
489 
				var resourceId='73FAD17209F7477C8D8537E5F98ADAAA';
490
491 
				var oproname = document.getElementById("proname"); //专家名称
492 
				var oprotitle = document.getElementById("protitle"); //专家职称
493 
				var oprooffice = document.getElementById("prooffice"); //专家职务
494 
				var oproorgName = document.getElementById("proorgName"); //专家所属机构
495 
				var oproadress = document.getElementById("proadress"); //专家所在地
496 
				var opromodify = document.getElementById("promodify"); //专家认证
497 
				var oproimg = document.getElementById("proimg"); //专家头像
498
499 
				var oresourceName = document.getElementById("resourceName"); //资源名称
500 
				var oyongtu = document.getElementById("yongtu"); //应用用途
501 
				var oziyuanimg = document.getElementById("ziyuanimg"); //资源图片
502 
				var ofield = document.getElementById("field"); //学术领域
503 
				var oapply = document.getElementById("apply"); //应用行业
504 
				var odetail = document.getElementById("detail"); //详细描述
505 
				var ohezuo = document.getElementById("hezuo"); //合作备注
506 
				var oEnter = document.getElementById("fess");
507 
				var ofielddiv = document.getElementById("fielddiv"); //学术领域容器
508 
				var oapplydiv = document.getElementById("applydiv"); //应用行业容器
509 
				var odetaildiv = document.getElementById("detaildiv"); //详细描述容器
510 
				var ohezuodiv = document.getElementById("hezuodiv"); //合作备注容器
511
512 
				function GetQueryString(name) {
513 
					var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
514 
					var r = window.location.search.substr(1).match(reg);
515 
					var context = "";
516 
					if(r != null)
517 
						context = r[2];
518 
					reg = null;
519 
					r = null;
520 
					return context == null || context == "" || context == "undefined" ? "" : decodeURI(context);
521 
				}
522 
				function ziyuaninfo(resourceId) {
523 
						$.ajax({
524 
						    url:'/ajax/resource/resourceInfo',
525 
							data: {
526 
								'resourceId': resourceId
527 
							},
528 
							dataType: 'json', //服务器返回json格式数据
529 
							type: 'get', //HTTP请求类型
530 
							timeout: 10000, //超时时间设置为10秒；
531 
							success: function(data) {
532 
								if(data.success) {
533 
									console.log(JSON.stringify(data));
534
535 
									var mydata = data.data;
536 
									//资源名称
537 
									professorId = mydata['professor']['id'];
538 
									var userid = GetQueryString('userid');
539 
									if(professorId==userid){
540 
										document.getElementsByClassName("footbox")[0].style.display="none";
541 
									}
542 
									(mydata['resourceName']) ? oresourceName.innerHTML = mydata['resourceName']: oresourceName.innerHTML = '';
543
544 
									//专家信息
545 
									proId = mydata['professor']['id']; //专家id
546 
									//专家名字
547 
									(mydata['professor']["name"]) ? oproname.innerText = mydata['professor']["name"]: oproname.innerText = '';
548 
									//职称
549 
									(mydata['professor']["title"]) ? oprotitle.innerHTML = mydata['professor']["title"]: oprotitle.innerHTML = '';
550 
									//职位
551 
									if(mydata['professor']["office"] == null || mydata['professor']["office"] == undefined) {
552 
										oprooffice.innerHTML = '';
553 
									} else {
554 
										if(mydata['professor']["title"]) {
555 
											oprooffice.innerHTML = '，' + mydata['professor']["office"]; //职位
556 
										}
557 
										oprooffice.innerHTML = mydata['professor']["office"]; //职位
558 
									};
559 
									//所在机构
560 
									(mydata['professor']["orgName"]) ? oproorgName.innerHTML = mydata['professor']["orgName"]: oproorgName.innerHTML = '';
561 
									//所在地
562 
									(mydata['professor']["address"]) ? oproadress.innerHTML = mydata['professor']["address"]: oproadress.innerHTML = '';
563 
									/*是否认证*/
564 
									(mydata['professor']["authentication"] == true) ? opromodify.classList.add('authicon'): opromodify.classList.add('unauthicon');
565 
									/*专家头像*/
566 
									(mydata['professor']["hasHeadImage"] == 0) ? oproimg.setAttribute('src', '/images/default-photo.jpg'): oproimg.setAttribute('src', '/images/head/' + mydata['professor']['id'] + '_m.jpg');
567
568 
									//资源基本信息
569 
									//(mydata['images']['imageSrc']) ? oziyuanimg.setAttribute('src', mydata['images']['imageSrc']): oziyuanimg.setAttribute('src', '../images/default-resource.jpg'); //资源图片
570
571 
									var imgRes = "/images/resource/" + mydata.resourceId + ".jpg";
572 
									if(mydata['images'].length) {
573 
										oziyuanimg.setAttribute('src', imgRes)
574 
									} else {
575 
										oziyuanimg.setAttribute('src', '../images/default-resource.jpg')
576 
									}
577 
									(mydata['supportedServices']) ? oyongtu.innerHTML = mydata['supportedServices']: oyongtu.innerHTML = ''; //应用用途
578
579 
									//学术领域
580 
									if(mydata['subject']) {
581 
										if(mydata['subject'].indexOf(',') != -1) { //字符串是否包含,
582 
											var fieldlist = mydata['subject'].split(",");
583 
											console.log(fieldlist.length);
584 
											for(var i = 0; i < fieldlist; i++) {
585 
												var oli = document.createElement('li');
586 
												oli.innerText = fieldlist[i];
587 
												ofield.appendChild(oli);
588 
											}
589 
										} else {
590 
											var oli = document.createElement('li');
591 
											oli.innerText = mydata['subject'];
592 
											ofield.appendChild(oli);
593 
										}
594
595 
									} else {
596 
										ofielddiv.style.display = 'none';
597 
									}
598
599 
									//应用行业
600 
									if(mydata['industry']) {
601 
										if(mydata['industry'].indexOf(',') != -1) { //字符串是否包含,
602 
											var applylist = mydata['industry'].split(",");
603 
											console.log(applylist.length);
604 
											for(var i = 0; i < applylist; i++) {
605 
												var oli = document.createElement('li');
606 
												oli.innerText = fieldlist[i];
607 
												oapply.appendChild(oli);
608 
											}
609 
										} else {
610 
											var oli = document.createElement('li');
611 
											oli.innerText = mydata['industry'];
612 
											oapply.appendChild(oli);
613 
										}
614 
									} else {
615 
										oapplydiv.style.display = 'none';
616 
									}
617
618 
									//详细描述
619 
									if(mydata['descp']) {
620 
										odetail.innerHTML = mydata['descp']
621 
									} else {
622 
										odetaildiv.style.display = 'none';
623 
									}
624
625 
									//合作备注
626 
									if(mydata['cooperationNotes']) {
627 
										ohezuo.innerHTML = mydata['cooperationNotes'];
628 
									} else {
629 
										ohezuodiv.style.display = 'none';
630 
									}
631
632
633 
								}
634 
							},
635 
							error: function(e) {
636 
								return;
637 
							}
638 
						});
639 
				}
640 
				//资源信息
641 
				ziyuaninfo(resourceId);
642 
			});
643
644 
		</script>
645
646 
	</body>
647
648 
</html>