portal html css js resource

shareProinfor.html 19KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. <link rel="stylesheet" href="../css/reset.css" />
  8. <link rel="stylesheet" href="../css/common.css" />
  9. </head>
  10. <style>
  11. html,
  12. body {
  13. background: #efeff4;
  14. }
  15. /*input输入相关*/
  16. .frmbox {
  17. width: 100%;
  18. margin: 2% auto;
  19. border-radius: 6px;
  20. }
  21. .frmtype {
  22. width: 100%;
  23. margin: auto;
  24. line-height: 30px;
  25. padding: 1% 2%;
  26. font-size: 14px;
  27. line-height: 20px;
  28. }
  29. .frmbtn {
  30. width: 100%;
  31. margin: 4% auto;
  32. font-size: 14px;
  33. line-height: 24px;
  34. padding: 1% 2%;
  35. border: 1px solid #FF9900;
  36. border-radius: 6px;
  37. color: #FF9900;
  38. }
  39. .frmbox {
  40. border: none;
  41. width: 90%;
  42. height: 100%;
  43. }
  44. .frmactive {
  45. color: #fff;
  46. background-color: #FF9900;
  47. border: 1px solid #FF9900;
  48. }
  49. .clearfix:before,
  50. .clearfix:after {
  51. display: table;
  52. content: " "
  53. }
  54. .clearfix:after {
  55. clear: both
  56. }
  57. .pull-right {
  58. float: right!important
  59. }
  60. .pull-left {
  61. float: left!important
  62. }
  63. .alignCenter {
  64. text-align: center;
  65. }
  66. .displayNone {
  67. display: none;
  68. }
  69. .displayBlock {
  70. display: block;
  71. }
  72. /*圆角*/
  73. /*头像、资源圆角*/
  74. .headRadius {
  75. border-radius: 4px;
  76. }
  77. /*底板背景圆角*/
  78. .bgRadius {
  79. border-radius: 6px;
  80. }
  81. .blockGroup {
  82. background: #fff;
  83. }
  84. .mainbox {
  85. width: 96%;
  86. margin: 2% auto;
  87. }
  88. .maincon {
  89. padding: 4% 2%;
  90. overflow: hidden;
  91. }
  92. .listtit {
  93. font-size: 14px;
  94. color: #333333;
  95. }
  96. /*中标题*/
  97. .listtit2 {
  98. font-size: 13px;
  99. color: #666666;
  100. }
  101. /*较小标题*/
  102. .listtit3 {
  103. font-size: 12px;
  104. color: #888888;
  105. }
  106. /*小标题*/
  107. .mui-ellipsis {
  108. overflow: hidden;
  109. white-space: nowrap;
  110. text-overflow: ellipsis;
  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. .ResImgBox2 {
  128. margin: 6px 0 6px 10px;
  129. }
  130. .ResImgBox .resImg {
  131. max-width: 100%;
  132. max-height: 100%;
  133. vertical-align: middle;
  134. position: relative;
  135. }
  136. .ResImgBox:before {
  137. content: ' ';
  138. display: inline-block;
  139. vertical-align: middle;
  140. width: 0;
  141. height: 100%;
  142. overflow: hidden;
  143. margin-left: -4px;
  144. }
  145. /*专家相关信息*/
  146. .personinfo .listtit3 {
  147. font-size: 14px;
  148. line-height: 24px;
  149. color: #AAAAAA;
  150. margin: 0;
  151. }
  152. .personinfo .listtit {
  153. font-size: 18px;
  154. line-height: 30px;
  155. color: #333333;
  156. }
  157. .personinfo .listtit3 {
  158. font-size: 14px;
  159. line-height: 24px;
  160. color: #AAAAAA;
  161. margin: 0;
  162. }
  163. .headbox .headimg {
  164. width: 100px;
  165. overflow: hidden;
  166. margin: auto;
  167. }
  168. /*咨询记录及等级*/
  169. .peolevelbox {
  170. display: block;
  171. padding: 4% 16px;
  172. border-top: 1px #F0F0F0 solid;
  173. }
  174. .peocountbox {
  175. width: 150px;
  176. }
  177. .peocount {
  178. font-size: 13px;
  179. color: #888888;
  180. overflow: hidden;
  181. }
  182. .peocount span em {
  183. font-size: 14px;
  184. padding: 0 3px;
  185. color: #FF9900;
  186. font-weight: 600;
  187. }
  188. .peocount .dialogicon {
  189. display: block;
  190. width: 20px;
  191. height: 20px;
  192. background: url(../images/dialogue.png) center center no-repeat;
  193. background-size: 100% 100%;
  194. margin-right: 6px;
  195. }
  196. .peocount:before {
  197. position: absolute;
  198. right: 0;
  199. top: 0;
  200. left: 15px;
  201. height: 1px;
  202. content: '';
  203. -webkit-transform: scaleY(.5);
  204. transform: scaleY(.5);
  205. background-color: #c8c7cc;
  206. }
  207. .levelbox {
  208. margin: auto;
  209. overflow: hidden;
  210. }
  211. .levelbox .iconfont {
  212. float: left;
  213. margin: 2px;
  214. width: 14px;
  215. height: 14px;
  216. }
  217. .levelbox .icon-favor {
  218. background: url(../images/favoricon.png) 0 0 no-repeat;
  219. background-size: 100% auto;
  220. }
  221. .levelbox .icon-favorfill {
  222. background: url(../images/favoricon.png) 0 -14px no-repeat;
  223. background-size: 100% auto;
  224. }
  225. .infocontit {
  226. font-size: 14px;
  227. position: relative;
  228. }
  229. .infocon {
  230. padding: 6px 10px;
  231. /*text-align: justify;*/
  232. font-size: 13px;
  233. line-height: 27px;
  234. color: #888888;
  235. }
  236. .infocon ul {
  237. padding: 0;
  238. margin: 0;
  239. overflow: hidden;
  240. }
  241. .infocon .infoapply li {
  242. padding-left: 6px;
  243. padding-right: 2px;
  244. list-style: disc inside;
  245. width: 46%;
  246. float: left;
  247. }
  248. .infocon .infosubject li {
  249. list-style: none;
  250. padding: 2px 16px;
  251. margin: 4px;
  252. border: 1px solid #BBBBBB;
  253. border-radius: 6px;
  254. float: left;
  255. }
  256. .listitembox {
  257. position: static;
  258. width: 100%;
  259. }
  260. .listitembox .listitem {
  261. padding: 4px;
  262. padding-right: 0;
  263. }
  264. .listitembox .listitem .media-body {
  265. width: 73%;
  266. margin-left: 2%;
  267. }
  268. .listitembox .listitem .media-body .resbrief {
  269. width: 100%;
  270. }
  271. .listitembox .listitem .media-object {
  272. width: 30%;
  273. }
  274. .listitembox .listitem .media-object .iconposition {
  275. border-radius: 50%;
  276. max-width: 60px;
  277. height: 60px;
  278. margin: 1% 0;
  279. }
  280. .listitembox .listitem>a .mutlinebox {
  281. white-space: normal;
  282. overflow: auto;
  283. word-break: break-word;
  284. }
  285. .listbox {
  286. margin: 5px 0;
  287. max-width: 100%;
  288. overflow: hidden;
  289. }
  290. .listbrowse {
  291. border: 1px solid #FF9900;
  292. border-radius: 0 6px 6px 0;
  293. text-align: center;
  294. font-size: 13px;
  295. line-height: 27px;
  296. float: left;
  297. padding-right: 8px;
  298. max-width: 60%;
  299. overflow: hidden;
  300. }
  301. .plusbtn {
  302. font-size: 20px;
  303. line-height: 22px;
  304. color: #999999;
  305. margin-left: 4px;
  306. margin-top: 2px;
  307. }
  308. .plusbtn.icon-appreciatefill {
  309. color: #FF9900;
  310. }
  311. .like {
  312. display: block;
  313. float: left;
  314. width: 28px;
  315. font-size: 12px;
  316. background: #FF9900;
  317. color: #fff;
  318. line-height: 27px;
  319. margin-right: 5px;
  320. }
  321. .likenum {
  322. float: right;
  323. max-width: 130px;
  324. overflow: hidden;
  325. }
  326. .likenum .mui-icon {
  327. font-size: 24px;
  328. color: #CCCCCC;
  329. }
  330. .likepeople {
  331. width: 26px;
  332. height: 26px;
  333. line-height: 20px;
  334. float: left;
  335. overflow: hidden;
  336. margin-right: 5px;
  337. }
  338. .likepeople img {
  339. width: 100%;
  340. height: 100%;
  341. }
  342. .likemore {
  343. display: block;
  344. width: 25px;
  345. height: 25px;
  346. border: 1px solid #CCCCCC;
  347. background: url(../images/likemore.png) center center no-repeat;
  348. }
  349. </style>
  350. <body>
  351. <div class="contentBody2">
  352. <div class="blockGroup mainbox">
  353. <div class="maincon personinfo">
  354. <div class="headbox alignCenter">
  355. <div class="headimg headRadius"><img src="../images/default-photo.jpg" width="100%" class="headimg1" /></div>
  356. <div class="listtit"><span class="personalMaterial" style="position: relative;"></span><em class="authicon authicon-cu" style="position:absolute;margin:5px 0 0 2px ;" id="nameli"></em></div>
  357. <p class="listtit3"><span class="personalMaterial"></span><span class="personalMaterial"></span></p>
  358. <p class="listtit3"><span class="personalMaterial"></span><span class="personalMaterial"> </span> <span class="personalMaterial"></span></p>
  359. </div>
  360. </div>
  361. <ul>
  362. <li>
  363. <a class="mui-navigate-right clearfix peolevelbox " id="accessHistory">
  364. <div class="pull-left peocountbox">
  365. <div class="peocount clearfix">
  366. <em class="dialogicon pull-left "></em>
  367. <span class="pull-left">已完成咨询<em class="consultCount"></em></span>
  368. </div>
  369. </div>
  370. <div class="rightword levelbox pull-right ">
  371. <span class="iconfont start"></span>
  372. <!--无色星星icon-favor 黄色星icon-favorfill-->
  373. <span class="iconfont start"></span>
  374. <span class="iconfont icon-favor start"></span>
  375. <span class="iconfont icon-favor start"></span>
  376. <span class="iconfont icon-favor start"></span>
  377. </div>
  378. </a>
  379. </li>
  380. </ul>
  381. </div>
  382. <div class="blockGroup mainbox" id="professorresourceList">
  383. <div class="maincon">
  384. <div class="infocontit">合作资源</div>
  385. <div class="infocon" style="padding:10px 0;">
  386. <ul class="listitembox resinfo" id="resourceList">
  387. </ul>
  388. </div>
  389. </div>
  390. </div>
  391. <div class="blockGroup mainbox" id="professorBreifinfo">
  392. <div class="maincon">
  393. <div class="infocontit">个人简介</div>
  394. <div class="infocon">
  395. <span class="breifinfo">
  396. </span>
  397. </div>
  398. </div>
  399. </div>
  400. <div class="blockGroup mainbox" id="professorInfosubject">
  401. <div class="maincon">
  402. <div class="infocontit">学术领域</div>
  403. <div class="infocon">
  404. <ul class="infosubject">
  405. </ul>
  406. </div>
  407. </div>
  408. </div>
  409. <div class="blockGroup mainbox" id="professorReserachMess">
  410. <div class="maincon">
  411. <div class="infocontit">研究方向</div>
  412. <div class="infocon reserachMess">
  413. </div>
  414. </div>
  415. </div>
  416. <div class="blockGroup mainbox" id="professorinfoapply">
  417. <div class="maincon">
  418. <div class="infocontit">应用行业</div>
  419. <div class="infocon">
  420. <ul class="infoapply">
  421. </ul>
  422. </div>
  423. </div>
  424. </div>
  425. <div class="blockGroup mainbox" style="padding-bottom:40px;">
  426. <div class="maincon alignCenter">
  427. <p style="margin-top: 30px;"><span style="color:#ff9900; font-size: 16px;line-height: 32px;">[ 科袖 ]</span><br />搭建企业与专家的桥梁</p>
  428. <div class="frmbox" style="margin:20px auto;">
  429. <a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.ekexiu.app"><button class="frmbtn frmactive">下载安卓客户端</button></a>
  430. </div>
  431. <div>
  432. <img style="width:120px;" src="../images/weixin_code.jpg" />
  433. <p style="color:#CCCCCC;font-size:13px;">关注科袖公众号</p>
  434. </div>
  435. </div>
  436. </div>
  437. </div>
  438. <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
  439. <script>
  440. //获取URL ID函数
  441. $(document).ready(function() {
  442. var personalMaterial = document.getElementsByClassName('personalMaterial');
  443. var nameli = document.getElementById("nameli");
  444. var personSummary = document.getElementsByClassName("breifinfo")[0];
  445. var professorId = GetQueryString("professorId");
  446. function GetQueryString(name) {
  447. var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  448. var r = window.location.search.substr(1).match(reg);
  449. var context = "";
  450. if(r != null)
  451. context = r[2];
  452. reg = null;
  453. r = null;
  454. return context == null || context == "" || context == "undefined" ? "" : decodeURI(context);
  455. }
  456. //查询学术领域
  457. var subjectShow = function(data) {
  458. if(data != undefined && data.length != 0) {
  459. var subs = new Array();
  460. if(data.indexOf(',')) {
  461. subs = data.split(',');
  462. } else {
  463. subs[0] = data;
  464. }
  465. if(subs.length > 0) {
  466. var html = [];
  467. for(var i = 0; i < subs.length; i++) {
  468. html.push("<li>" + subs[i] + "</li>");
  469. };
  470. document.getElementsByClassName("infosubject")[0].innerHTML = html.join('');
  471. }
  472. }
  473. }
  474. //查询研究方向
  475. var getRecords = function($researchAreaLogs, caption) {
  476. var ret = [];
  477. var t = 0;
  478. for(var i = 0; i < $researchAreaLogs.length; i++) {
  479. if(caption == $researchAreaLogs[i].caption) {
  480. ret[t] = {
  481. id: $researchAreaLogs[i].opreteProfessorId,
  482. img: $researchAreaLogs[i].hasHeadImage
  483. }
  484. t++;
  485. }
  486. }
  487. return ret;
  488. }
  489. var researchAreaShow = function($datas, $datarecords) {
  490. if($datas != undefined && $datas.length != 0) {
  491. var html = [];
  492. for(var i = 0; i < $datas.length; ++i) {
  493. var $data = $datas[i];
  494. var $photos = [];
  495. //获取头像
  496. if($datarecords.length > 0) {
  497. $photos = getRecords($datarecords, $data.caption);
  498. }
  499. var showDiv = "<div class='listbox'><div class='listbrowse mui-ellipsis'><span class='like'>" + $data.count + "</span>" + $data.caption + "</div><div class='likenum'>";
  500. if($photos.length < 4) {
  501. for(var j = 0; j < $photos.length; ++j) {
  502. if($photos[j].img) {
  503. showDiv += "<span class='likepeople headRadius'><img class='like-h' src='../images/head/" + $photos[j].id + "_m.jpg'></span>";
  504. } else {
  505. showDiv += "<span class='likepeople headRadius'><img class='like-h' src='../images/default-photo.jpg'></span>";
  506. }
  507. }
  508. } else {
  509. for(var j = $photos.length - 2; j < $photos.length; ++j) {
  510. if($photos[j].img) {
  511. showDiv += "<span class='likepeople headRadius'><img class='like-h' src='../images/head/" + $photos[j].id + "_m.jpg'></span>";
  512. } else {
  513. showDiv += "<span class='likepeople headRadius'><img class='like-h' src='../images/default-photo.jpg'></span>";
  514. }
  515. }
  516. showDiv += "<span class='mui-icon iconfont icon-more likepeople likemore headRadius'></span>";
  517. }
  518. showDiv += "</div></div></div>";
  519. html.push(showDiv);
  520. }
  521. document.getElementsByClassName("reserachMess")[0].innerHTML = html.join('')
  522. }
  523. }
  524. //查询应用行业
  525. var industryShow = function(data) {
  526. if(data != undefined && data.length != 0) {
  527. var subs = new Array();
  528. if(data.indexOf(',')) {
  529. subs = data.split(',');
  530. } else {
  531. subs[0] = data;
  532. }
  533. if(subs.length > 0) {
  534. var html = [];
  535. for(var i = 0; i < subs.length; i++) {
  536. html.push("<li>" + subs[i] + "</li>");
  537. };
  538. document.getElementsByClassName("infoapply")[0].innerHTML = html.join('');
  539. }
  540. }
  541. }
  542. var professorResource = function(odata) {
  543. var $data = odata;
  544. var html = [];
  545. for(var i = 0; i < odata.length; i++) {
  546. var string = '<li class="listitem">'
  547. string += '<div class="proinfor clearfix">'
  548. string += '<div class="media-object pull-left ResImgBox">'
  549. if($data[i].images.length) {
  550. string += '<img class="resImg headRadius" src="../images/resource/' + $data[i].resourceId + '.jpg">'
  551. } else {
  552. string += '<img class="resImg headRadius" src="../images/default-resource.jpg">'
  553. }
  554. string += '</div>'
  555. string += '<div class="pull-left media-body">'
  556. string += '<span class="listtit">' + $data[i].resourceName + '</span>'
  557. string += '<p class="listtit2">' + $data[i].supportedServices + '</p>'
  558. // string += '<p class="listtit3 resbrief">'
  559. // if($data[i].descp) {
  560. // string += $data[i].descp;
  561. // }
  562. // string += '</p>'
  563. string += '</div></div></li>'
  564. html.push(string);
  565. }
  566. document.getElementById("resourceList").innerHTML = html.join('');
  567. }
  568. /*获取个人信息*/
  569. function personalMessage() {
  570. $.ajax({
  571. url: "../ajax/professor/info/" + professorId,
  572. dataType: 'json', //数据格式类型
  573. type: 'GET', //http请求类型
  574. timeout: 10000, //超时设置
  575. success: function(data) {
  576. var $data = data.data;
  577. personalMaterial[0].innerText = $data.name;
  578. //基本信息
  579. if($data.consultCount) {
  580. document.getElementsByClassName("consultCount")[0].innerText = $data.consultCount;
  581. } else {
  582. document.getElementById("accessHistory").style.display = "none";
  583. }
  584. var startLeval = parseInt($data.starLevel);
  585. var start = document.getElementsByClassName("start");
  586. for(var i = 0; i < startLeval; i++) {
  587. start[i].classList.add("icon-favorfill");
  588. start[i].classList.remove("icon-favor");
  589. }
  590. if($data.hasHeadImage) {
  591. document.getElementsByClassName("headimg1")[0].src = "../images/head/" + $data.id + "_l.jpg";
  592. } else {
  593. document.getElementsByClassName("headimg1")[0].src = "../images/default-photo.jpg";
  594. }
  595. if($data.authType) {
  596. nameli.classList.add('authicon');
  597. nameli.classList.add('authicon-cu');
  598. } else {
  599. if($data.authStatus) {
  600. if($data.authentication == 1) {
  601. nameli.classList.add('authicon2');
  602. nameli.classList.add('authicon-mana');
  603. //nameli.innerHTML="<span>科研</span>";
  604. } else if($data.authentication == 2) {
  605. nameli.classList.add('authicon2');
  606. nameli.classList.add('authicon-staff');
  607. //nameli.innerHTML="<span>企业</span>";
  608. } else {
  609. nameli.classList.add('authicon2');
  610. nameli.classList.add('authicon-stu');
  611. //nameli.innerHTML="<span>学生</span>";
  612. }
  613. }
  614. }
  615. if($data.office) {
  616. if($data.title) {
  617. personalMaterial[1].innerText = $data.office + ",";
  618. } else {
  619. personalMaterial[1].innerText = $data.office;
  620. }
  621. }
  622. if($data.title) {
  623. personalMaterial[2].innerText = $data.title;
  624. }
  625. if($data.orgName) {
  626. if($data.department) {
  627. personalMaterial[3].innerText = $data.orgName + " , ";
  628. } else {
  629. if($data.address) {
  630. personalMaterial[3].innerText = $data.orgName + " | ";
  631. } else {
  632. personalMaterial[3].innerText = $data.orgName;
  633. }
  634. }
  635. }
  636. if($data.department) {
  637. if($data.address) {
  638. personalMaterial[4].innerText = $data.department + " | ";
  639. } else {
  640. personalMaterial[4].innerText = $data.department;
  641. }
  642. }
  643. if($data.address) {
  644. personalMaterial[5].innerText = $data.address;
  645. }
  646. //个人简介
  647. if($data.descp) {
  648. personSummary.innerHTML = $data.descp;
  649. } else {
  650. document.getElementById("professorBreifinfo").style.display = "none";
  651. }
  652. //学术领域
  653. if($data.subject) {
  654. subjectShow($data.subject);
  655. } else {
  656. document.getElementById("professorInfosubject").style.display = "none";
  657. }
  658. //研究方向
  659. if($data.researchAreas.length) {
  660. researchAreaShow($data.researchAreas, $data.editResearchAreaLogs);
  661. } else {
  662. document.getElementById("professorReserachMess").style.display = "none";
  663. }
  664. //应用行业
  665. if($data.industry) {
  666. industryShow($data.industry);
  667. } else {
  668. document.getElementById("professorinfoapply").style.display = "none";
  669. }
  670. //专家资源
  671. if($data.resources.length) {
  672. professorResource($data.resources);
  673. } else {
  674. document.getElementById("professorresourceList").style.display = "none";
  675. }
  676. //如无详细内容数据,隐藏详细点击的按钮
  677. if(!$data.edus.length && !$data.jobs.length && !$data.projects.length && !$data.papers.length && !$data.patents.length && !$data.honors.length) {
  678. document.getElementById("detailProfessor").style.display = "none";
  679. }
  680. },
  681. error: function(e) {
  682. return;
  683. }
  684. });
  685. }
  686. personalMessage()
  687. })
  688. </script>
  689. </body>
  690. </html>