portal html css js resource

shareResinfor.html 15KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534
  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. .pull-right {
  50. float: right!important
  51. }
  52. .pull-left {
  53. float: left!important
  54. }
  55. .alignCenter {
  56. text-align: center;
  57. }
  58. /*圆角*/
  59. /*头像、资源圆角*/
  60. .headRadius {
  61. border-radius: 4px;
  62. }
  63. .blockGroup {
  64. background: #fff;
  65. }
  66. .mainbox {
  67. width: 96%;
  68. margin: 2% auto;
  69. }
  70. .maincon {
  71. padding: 4% 2%;
  72. overflow: hidden;
  73. }
  74. .listtit {
  75. font-size: 14px;
  76. line-height: 26px;
  77. color: #333333;
  78. }
  79. /*中标题*/
  80. .listtit2 {
  81. font-size: 13px;
  82. line-height: 20px;
  83. color: #666666;
  84. }
  85. /*较小标题*/
  86. .listtit3 {
  87. font-size: 12px;
  88. line-height: 18px;
  89. color: #888888;
  90. }
  91. /*小标题*/
  92. .mui-ellipsis {
  93. overflow: hidden;
  94. white-space: nowrap;
  95. text-overflow: ellipsis;
  96. }
  97. /*资源图片*/
  98. .ResImgBox {
  99. display: inline-block;
  100. text-align: center;
  101. max-width: 64px;
  102. width: 64px;
  103. height: 60px;
  104. padding: 1px;
  105. background: #FAFAFA;
  106. border: 1px solid #F8F8F8;
  107. overflow: hidden;
  108. padding: 2px;
  109. margin: 6px 0;
  110. border-radius: 4px;
  111. }
  112. .ResImgBox2 {
  113. margin: 6px 0 6px 10px;
  114. }
  115. .ResImgBox .resImg {
  116. max-width: 100%;
  117. max-height: 100%;
  118. vertical-align: middle;
  119. position: relative;
  120. }
  121. .ResImgBox:before {
  122. content: ' ';
  123. display: inline-block;
  124. vertical-align: middle;
  125. width: 0;
  126. height: 100%;
  127. overflow: hidden;
  128. margin-left: -6px;
  129. }
  130. /*专家相关信息*/
  131. .personinfo .listtit3 {
  132. font-size: 14px;
  133. line-height: 24px;
  134. color: #AAAAAA;
  135. margin: 0;
  136. }
  137. .personinfo .listtit {
  138. font-size: 18px;
  139. line-height: 30px;
  140. color: #333333;
  141. }
  142. .personinfo .listtit3 {
  143. font-size: 14px;
  144. line-height: 24px;
  145. color: #AAAAAA;
  146. margin: 0;
  147. }
  148. .headbox .headimg {
  149. width: 100px;
  150. overflow: hidden;
  151. margin: auto;
  152. }
  153. .infocontit {
  154. font-size: 14px;
  155. position: relative;
  156. }
  157. .infocon {
  158. padding: 6px 10px;
  159. /*text-align: justify;*/
  160. font-size: 13px;
  161. line-height: 27px;
  162. color: #888888;
  163. }
  164. .infocon ul {
  165. padding: 0;
  166. margin: 0;
  167. overflow: hidden;
  168. }
  169. .infocon .infoapply li {
  170. padding:0;
  171. margin:0;
  172. padding-left: 6px;
  173. padding-right: 2px;
  174. list-style: disc inside;
  175. width: 46%;
  176. float: left;
  177. }
  178. .infocon .infosubject li {
  179. list-style: none;
  180. padding: 2px 16px;
  181. margin: 4px;
  182. border: 1px solid #BBBBBB;
  183. border-radius: 6px;
  184. float: left;
  185. }
  186. .personblock {
  187. position: absolute;
  188. left: 198px;
  189. padding: 0 3%;
  190. text-align: center;
  191. }
  192. .personbox{
  193. margin:auto;
  194. width:80%;
  195. position:relative;
  196. }
  197. .authicon {
  198. width: 16px;
  199. height: 16px;
  200. }
  201. .authicon2{
  202. width: 48px;
  203. height: 16px;
  204. }
  205. .authicon-mana{background-position: 0 -4px;background-size:100% auto;color:#ff9900;}/*认证科研*/
  206. .authicon-staff{background-position:0 -19px;background-size:100% auto;color:#19AFFF;}/*认证企业*/
  207. .authicon-stu{background-position: 0 -34px;background-size:100% auto;color:#03CE30}/*认证在读学生*/
  208. @media only screen and (min-width: 100px) and (max-width: 360px) {
  209. div[class="personbox"]{width:100%;}
  210. }
  211. </style>
  212. <body>
  213. <div class="contentBody2">
  214. <div class="blockGroup mainbox">
  215. <div class="maincon" style="position: relative;">
  216. <div class="ResImgBox resouimgbox pull-left" style="height:180px;width:180px;max-width:180px;margin:0 6px 0 8px;">
  217. <img class="resImg headRadius" src="../images/default-resource.jpg" id="ziyuanimg" data-preview-src data-preview-group="1" />
  218. </div>
  219. <div class="personblock pull-left" id="fess">
  220. <div class="personbox">
  221. <img class="headRadius" style="width: 64px;height:64px;" src="../images/default-photo.jpg" id="proimg">
  222. <p class="listtit clearfix" style="display: inline-block;margin:0 0 0 10px;"><span class="floatL" id="proname"></span><em class="authicon authicon-cu" style="margin:5px 0 0 -2px;" id="promodify"></em></p>
  223. </div>
  224. <p class="listtit2"><span id="protitle"></span> <span id="prooffice"></span></p>
  225. <p class="listtit3"><span id="proorgName"></span></p>
  226. <p class="listtit3"><span id="proadress"></span></p>
  227. </div>
  228. </div>
  229. </div>
  230. <div class="blockGroup mainbox">
  231. <div class="maincon">
  232. <ul class="resouinfobox">
  233. <li>
  234. <div class="infocontit">基本信息</div>
  235. </li>
  236. <li>
  237. <div class="infocon">
  238. <p style="color:#666666;">
  239. <span>资源名称:</span>
  240. <span class="listtit2" id='resourceName'></span>
  241. </p>
  242. <p style="color:#666666;">
  243. <span>应用用途:</span>
  244. <span class="listtit2" id="yongtu"></span>
  245. </p>
  246. </div>
  247. </li>
  248. </ul>
  249. </div>
  250. </div>
  251. <div class="blockGroup mainbox" id="fielddiv">
  252. <div class="maincon">
  253. <div class="infocontit">学术领域</div>
  254. <div class="infocon">
  255. <ul class="infosubject" id="field">
  256. </ul>
  257. </div>
  258. </div>
  259. </div>
  260. <div class="blockGroup mainbox" id="applydiv">
  261. <div class="maincon">
  262. <div class="infocontit">应用行业</div>
  263. <div class="infocon">
  264. <ul id="apply" class="infoapply">
  265. </ul>
  266. </div>
  267. </div>
  268. </div>
  269. <div class="blockGroup mainbox" id="hezuodiv">
  270. <div class="maincon">
  271. <ul class="resouinfobox">
  272. <li>
  273. <div class="infocontit">合作备注</div>
  274. <div class="infocon">
  275. <p class="listtit3" id="hezuo"></p>
  276. </div>
  277. </li>
  278. </ul>
  279. </div>
  280. </div>
  281. <div class="blockGroup mainbox" id="detaildiv">
  282. <div class="maincon">
  283. <ul class="resouinfobox">
  284. <li>
  285. <div class="infocontit">详细描述</div>
  286. <div class="infocon">
  287. <p class="listtit3" id="detail">
  288. </p>
  289. </div>
  290. </li>
  291. </ul>
  292. </div>
  293. </div>
  294. <div class="blockGroup mainbox" style="padding-bottom:40px;">
  295. <div class="maincon alignCenter">
  296. <p style="margin-top: 30px;"><span style="color:#ff9900; font-size: 16px;line-height: 32px;">[ 科袖 ]</span><br />搭建企业与专家的桥梁</p>
  297. <div class="frmbox" style="margin:20px auto;">
  298. <a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.ekexiu.app"><button class="frmbtn frmactive">下载移动客户端</button></a>
  299. </div>
  300. <div>
  301. <img style="width:120px;" src="../images/weixin_code.jpg" />
  302. <p style="color:#CCCCCC;font-size:13px;">关注科袖公众号</p>
  303. </div>
  304. </div>
  305. </div>
  306. </div>
  307. <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
  308. <script>
  309. $(document).ready(function() {
  310. var resourceId = GetQueryString("resourceId");
  311. function GetQueryString(name) {
  312. var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  313. var r = window.location.search.substr(1).match(reg);
  314. var context = "";
  315. if(r != null)
  316. context = r[2];
  317. reg = null;
  318. r = null;
  319. return context == null || context == "" || context == "undefined" ? "" : decodeURI(context);
  320. }
  321. var oproname = document.getElementById("proname"); //专家名称
  322. var oprotitle = document.getElementById("protitle"); //专家职称
  323. var oprooffice = document.getElementById("prooffice"); //专家职务
  324. var oproorgName = document.getElementById("proorgName"); //专家所属机构
  325. var oproadress = document.getElementById("proadress"); //专家所在地
  326. var opromodify = document.getElementById("promodify"); //专家认证
  327. var oproimg = document.getElementById("proimg"); //专家头像
  328. var oresourceName = document.getElementById("resourceName"); //资源名称
  329. var oyongtu = document.getElementById("yongtu"); //应用用途
  330. var oziyuanimg = document.getElementById("ziyuanimg"); //资源图片
  331. var ofield = document.getElementById("field"); //学术领域
  332. var oapply = document.getElementById("apply"); //应用行业
  333. var odetail = document.getElementById("detail"); //详细描述
  334. var ohezuo = document.getElementById("hezuo"); //合作备注
  335. var oEnter = document.getElementById("fess");
  336. var ofielddiv = document.getElementById("fielddiv"); //学术领域容器
  337. var oapplydiv = document.getElementById("applydiv"); //应用行业容器
  338. var odetaildiv = document.getElementById("detaildiv"); //详细描述容器
  339. var ohezuodiv = document.getElementById("hezuodiv"); //合作备注容器
  340. function ziyuaninfo(resourceId) {
  341. $.ajax({
  342. url: '../ajax/resource/resourceInfo',
  343. data: {
  344. 'resourceId': resourceId
  345. },
  346. dataType: 'json', //服务器返回json格式数据
  347. type: 'get', //HTTP请求类型
  348. timeout: 10000, //超时时间设置为10秒;
  349. success: function(data) {
  350. if(data.success) {
  351. console.log(JSON.stringify(data));
  352. var mydata = data.data;
  353. //资源名称
  354. professorId = mydata['editProfessor']['id'];
  355. var userid = GetQueryString('userid');
  356. if(professorId == userid) {
  357. document.getElementsByClassName("footbox")[0].style.display = "none";
  358. }
  359. (mydata['resourceName']) ? oresourceName.innerHTML = mydata['resourceName']: oresourceName.innerHTML = '';
  360. //专家信息
  361. proId = mydata['editProfessor']['id']; //专家id
  362. //专家名字
  363. (mydata['editProfessor']["name"]) ? oproname.innerText = mydata['editProfessor']["name"]: oproname.innerText = '';
  364. //职称
  365. (mydata['editProfessor']["title"]) ? oprotitle.innerHTML = mydata['editProfessor']["title"]: oprotitle.innerHTML = '';
  366. //职位
  367. if(mydata['editProfessor']["office"] == null || mydata['editProfessor']["office"] == undefined) {
  368. oprooffice.innerHTML = '';
  369. } else {
  370. if(mydata['editProfessor']["title"]) {
  371. oprooffice.innerHTML = ',' + mydata['editProfessor']["office"]; //职位
  372. }
  373. oprooffice.innerHTML = mydata['editProfessor']["office"]; //职位
  374. };
  375. //所在机构
  376. (mydata['editProfessor']["orgName"]) ? oproorgName.innerHTML = mydata['editProfessor']["orgName"]: oproorgName.innerHTML = '';
  377. //所在地
  378. (mydata['editProfessor']["address"]) ? oproadress.innerHTML = mydata['editProfessor']["address"]: oproadress.innerHTML = '';
  379. /*是否认证*/
  380. //(mydata['editProfessor']["authentication"] == true) ? opromodify.classList.add('authicon'): opromodify.classList.add('unauthicon');
  381. if(mydata['editProfessor']["authType"]) {
  382. opromodify.classList.add('authicon')
  383. opromodify.classList.add('authicon-cu');
  384. opromodify.style.margin = "5px 0 0 3px";
  385. } else {
  386. if(mydata['editProfessor']["authStatus"]) {
  387. if(mydata['editProfessor']["authentication"] == 1) {
  388. opromodify.classList.add('authicon2');
  389. opromodify.classList.add('authicon-mana');
  390. } else if(mydata['editProfessor']["authentication"] == 2) {
  391. opromodify.classList.add('authicon2');
  392. opromodify.classList.add('authicon-staff');
  393. } else {
  394. opromodify.classList.add('authicon2');
  395. opromodify.classList.add('authicon-stu');
  396. }
  397. }
  398. }
  399. /*专家头像*/
  400. (mydata['editProfessor']["hasHeadImage"] == 0) ? oproimg.setAttribute('src', '../images/default-photo.jpg'): oproimg.setAttribute('src', '../images/head/' + mydata['editProfessor']['id'] + '_m.jpg');
  401. //资源基本信息
  402. //(mydata['images']['imageSrc']) ? oziyuanimg.setAttribute('src', mydata['images']['imageSrc']): oziyuanimg.setAttribute('src', '../images/default-resource.jpg'); //资源图片
  403. var imgRes = "../images/resource/" + mydata.resourceId + ".jpg";
  404. if(mydata['images'].length) {
  405. oziyuanimg.setAttribute('src', imgRes)
  406. } else {
  407. oziyuanimg.setAttribute('src', '../images/default-resource.jpg')
  408. }
  409. (mydata['supportedServices']) ? oyongtu.innerHTML = mydata['supportedServices']: oyongtu.innerHTML = ''; //应用用途
  410. //学术领域
  411. if(mydata['subject']) {
  412. if(mydata['subject'].indexOf(',') != -1) { //字符串是否包含,
  413. var fieldlist = mydata['subject'].split(",");
  414. console.log(fieldlist.length);
  415. for(var i = 0; i < fieldlist.length; i++) {
  416. var oli = document.createElement('li');
  417. oli.innerText = fieldlist[i];
  418. ofield.appendChild(oli);
  419. }
  420. } else {
  421. var oli = document.createElement('li');
  422. oli.innerText = mydata['subject'];
  423. ofield.appendChild(oli);
  424. }
  425. } else {
  426. ofielddiv.style.display = 'none';
  427. }
  428. //应用行业
  429. if(mydata['industry']) {
  430. if(mydata['industry'].indexOf(',') != -1) { //字符串是否包含,
  431. var applylist = mydata['industry'].split(",");
  432. console.log(applylist.length);
  433. for(var i = 0; i < applylist.length; i++) {
  434. var oli = document.createElement('li');
  435. oli.innerText = applylist[i];
  436. oapply.appendChild(oli);
  437. }
  438. } else {
  439. var oli = document.createElement('li');
  440. oli.innerText = mydata['industry'];
  441. oapply.appendChild(oli);
  442. }
  443. } else {
  444. oapplydiv.style.display = 'none';
  445. }
  446. //详细描述
  447. if(mydata['descp']) {
  448. odetail.innerHTML = mydata['descp'];
  449. var pWidth = $("#detail").find("p").width();
  450. var leng = $("#detail").find("img").length;
  451. for(var i = 0; i < leng; i++) {
  452. (function(i) {
  453. $("#detail").find("img").eq(i).load(function() {
  454. var imgWidth = $("#detail").find("img").eq(i).width();
  455. if(imgWidth > pWidth) {
  456. $("#detail").find("img").eq(i).css({
  457. "width": "100%"
  458. })
  459. }
  460. })
  461. })(i);
  462. }
  463. } else {
  464. odetaildiv.style.display = 'none';
  465. }
  466. //合作备注
  467. if(mydata['cooperationNotes']) {
  468. ohezuo.innerHTML = mydata['cooperationNotes'];
  469. } else {
  470. ohezuodiv.style.display = 'none';
  471. }
  472. }
  473. },
  474. error: function(e) {
  475. return;
  476. }
  477. });
  478. }
  479. //资源信息
  480. ziyuaninfo(resourceId);
  481. });
  482. </script>
  483. </body>
  484. </html>