portal html css js resource

shareResinfor.html 17KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669
  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: -5px;
  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. /*咨询记录及等级*/
  154. .peolevelbox {
  155. display: block;
  156. padding: 4% 16px;
  157. border-top: 1px #F0F0F0 solid;
  158. }
  159. .peocountbox {
  160. width: 150px;
  161. }
  162. .peocount {
  163. font-size: 13px;
  164. color: #888888;
  165. overflow: hidden;
  166. }
  167. .peocount span em {
  168. font-size: 14px;
  169. padding: 0 3px;
  170. color: #FF9900;
  171. font-weight: 600;
  172. }
  173. .peocount .dialogicon {
  174. display: block;
  175. width: 20px;
  176. height: 20px;
  177. background: url(images/dialogue.png) center center no-repeat;
  178. background-size: 100% 100%;
  179. margin-right: 6px;
  180. }
  181. .peocount:before {
  182. position: absolute;
  183. right: 0;
  184. top: 0;
  185. left: 15px;
  186. height: 1px;
  187. content: '';
  188. -webkit-transform: scaleY(.5);
  189. transform: scaleY(.5);
  190. background-color: #c8c7cc;
  191. }
  192. .levelbox {
  193. margin: auto;
  194. overflow: hidden;
  195. }
  196. .levelbox .iconfont {
  197. float: left;
  198. margin: 2px;
  199. width: 14px;
  200. height: 14px;
  201. }
  202. .levelbox .icon-favor {
  203. background: url(images/favoricon.png) 0 0 no-repeat;
  204. background-size: 100% auto;
  205. }
  206. .levelbox .icon-favorfill {
  207. background: url(images/favoricon.png) 0 -14px no-repeat;
  208. background-size: 100% auto;
  209. }
  210. .infocontit {
  211. font-size: 14px;
  212. position: relative;
  213. }
  214. .infocon {
  215. padding: 6px 10px;
  216. /*text-align: justify;*/
  217. font-size: 13px;
  218. line-height: 27px;
  219. color: #888888;
  220. }
  221. .infocon ul {
  222. padding: 0;
  223. margin: 0;
  224. overflow: hidden;
  225. }
  226. .infocon .infoapply li {
  227. padding-left: 6px;
  228. padding-right: 2px;
  229. list-style: disc inside;
  230. width: 46%;
  231. float: left;
  232. }
  233. .infocon .infosubject li {
  234. list-style: none;
  235. padding: 2px 16px;
  236. margin: 4px;
  237. border: 1px solid #BBBBBB;
  238. border-radius: 6px;
  239. float: left;
  240. }
  241. .listitembox {
  242. position: static;
  243. width: 100%;
  244. }
  245. .listitembox .listitem {
  246. padding: 4px;
  247. padding-right: 0;
  248. }
  249. .listitembox .listitem .media-body {
  250. width: 73%;
  251. margin-left: 2%;
  252. }
  253. .listitembox .listitem .media-body .resbrief {
  254. width: 100%;
  255. }
  256. .listitembox .listitem .media-object {
  257. width: 30%;
  258. }
  259. .listitembox .listitem .media-object .iconposition {
  260. border-radius: 50%;
  261. max-width: 60px;
  262. height: 60px;
  263. margin: 1% 0;
  264. }
  265. .listitembox .listitem>a .mutlinebox {
  266. white-space: normal;
  267. overflow: auto;
  268. word-break: break-word;
  269. }
  270. .listbox {
  271. margin: 5px 0;
  272. max-width: 100%;
  273. overflow: hidden;
  274. }
  275. .listbrowse {
  276. border: 1px solid #FF9900;
  277. border-radius: 0 6px 6px 0;
  278. text-align: center;
  279. font-size: 13px;
  280. line-height: 27px;
  281. float: left;
  282. padding-right: 8px;
  283. max-width: 60%;
  284. overflow: hidden;
  285. }
  286. .plusbtn {
  287. font-size: 20px;
  288. line-height: 22px;
  289. color: #999999;
  290. margin-left: 4px;
  291. margin-top: 2px;
  292. }
  293. .plusbtn.icon-appreciatefill {
  294. color: #FF9900;
  295. }
  296. .like {
  297. display: block;
  298. float: left;
  299. width: 28px;
  300. font-size: 12px;
  301. background: #FF9900;
  302. color: #fff;
  303. line-height: 27px;
  304. margin-right: 5px;
  305. }
  306. .likenum {
  307. float: right;
  308. max-width: 130px;
  309. overflow: hidden;
  310. }
  311. .likenum .mui-icon {
  312. font-size: 24px;
  313. color: #CCCCCC;
  314. }
  315. .likepeople {
  316. width: 26px;
  317. height: 26px;
  318. line-height: 20px;
  319. float: left;
  320. overflow: hidden;
  321. margin-right: 5px;
  322. }
  323. .likepeople img {
  324. width: 100%;
  325. height: 100%;
  326. }
  327. .likemore {
  328. display: block;
  329. width: 25px;
  330. height: 25px;
  331. border: 1px solid #CCCCCC;
  332. background: url(images/likemore.png) center center no-repeat;
  333. }
  334. .personblock{ margin-left: 2%;}
  335. </style>
  336. <body>
  337. <div class="contentBody2">
  338. <div class="blockGroup mainbox">
  339. <div class="maincon">
  340. <div class="ResImgBox resouimgbox pull-left" style="height:180px;width:180px;max-width:180px;margin:0 6px 0 8px;">
  341. <img class="resImg headRadius" src="images/default-resource.jpg" id="ziyuanimg" data-preview-src data-preview-group="1" />
  342. </div>
  343. <div class="personblock pull-left" id="fess">
  344. <img class="headRadius" style="width: 60px;" src="images/default-photo.jpg" id="proimg">
  345. <p class="listtit clearfix"><span class="floatL" id="proname"></span><em class="authicon authicon-cu" style="height: 16px; width:16px;margin:5px 0 0 2px;" id="promodify"></em></p>
  346. <p class="listtit2"><span id="protitle"></span><span id="prooffice"></span></p>
  347. <p class="listtit3"><span id="proorgName"></span></p>
  348. <p class="listtit3"><span id="proadress"></span></p>
  349. </div>
  350. </div>
  351. </div>
  352. <div class="blockGroup mainbox">
  353. <div class="maincon">
  354. <ul class="resouinfobox">
  355. <li>
  356. <div class="infocontit">基本信息</div>
  357. </li>
  358. <li>
  359. <div class="infocon">
  360. <p style="color:#666666;">
  361. <span>资源名称:</span>
  362. <span class="listtit2" id='resourceName'></span>
  363. </p>
  364. <p style="color:#666666;">
  365. <span>应用用途:</span>
  366. <span class="listtit2" id="yongtu"></span>
  367. </p>
  368. </div>
  369. </li>
  370. </ul>
  371. </div>
  372. </div>
  373. <div class="blockGroup mainbox" id="fielddiv">
  374. <div class="maincon">
  375. <div class="infocontit">学术领域</div>
  376. <div class="infocon">
  377. <ul class="infosubject" id="field">
  378. </ul>
  379. </div>
  380. </div>
  381. </div>
  382. <div class="blockGroup mainbox" id="applydiv">
  383. <div class="maincon">
  384. <div class="infocontit">应用行业</div>
  385. <div class="infocon">
  386. <ul id="apply">
  387. </ul>
  388. </div>
  389. </div>
  390. </div>
  391. <div class="blockGroup mainbox" id="hezuodiv">
  392. <div class="maincon">
  393. <ul class="resouinfobox">
  394. <li>
  395. <div class="infocontit">合作备注</div>
  396. <div class="infocon">
  397. <p class="listtit3" id="hezuo"></p>
  398. </div>
  399. </li>
  400. </ul>
  401. </div>
  402. </div>
  403. <div class="blockGroup mainbox" id="detaildiv">
  404. <div class="maincon">
  405. <ul class="resouinfobox">
  406. <li>
  407. <div class="infocontit">详细描述</div>
  408. <div class="infocon">
  409. <p class="listtit3" id="detail">
  410. 二维码123456789二维码、语音输入、摇一摇摄像头、文件系统、摇一摇摄像头、文件系统、微信分享……不够?Native.JS
  411. </p>
  412. </div>
  413. </li>
  414. </ul>
  415. </div>
  416. </div>
  417. <div class="blockGroup mainbox" style="padding-bottom:40px;">
  418. <div class="maincon alignCenter">
  419. <p style="margin-top: 30px;"><span style="color:#ff9900; font-size: 16px;line-height: 32px;">[ 科袖 ]</span><br />搭建企业与专家的桥梁</p>
  420. <div class="frmbox" style="margin:20px auto;">
  421. <a href="http://www.ekexiu.com/download/com.ekexiu.app_V1.1.1.apk"><button class="frmbtn frmactive">下载安卓客户端</button></a>
  422. </div>
  423. <div>
  424. <img style="width:120px;" src="images/weixin_code.jpg" />
  425. <p style="color:#CCCCCC;font-size:13px;">关注科袖公众号</p>
  426. </div>
  427. </div>
  428. </div>
  429. </div>
  430. <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
  431. <script>
  432. $(document).ready(function() {
  433. var resourceId= GetQueryString("resourceId");
  434. function GetQueryString(name) {
  435. var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  436. var r = window.location.search.substr(1).match(reg);
  437. var context = "";
  438. if(r != null)
  439. context = r[2];
  440. reg = null;
  441. r = null;
  442. return context == null || context == "" || context == "undefined" ? "" : decodeURI(context);
  443. }
  444. var oproname = document.getElementById("proname"); //专家名称
  445. var oprotitle = document.getElementById("protitle"); //专家职称
  446. var oprooffice = document.getElementById("prooffice"); //专家职务
  447. var oproorgName = document.getElementById("proorgName"); //专家所属机构
  448. var oproadress = document.getElementById("proadress"); //专家所在地
  449. var opromodify = document.getElementById("promodify"); //专家认证
  450. var oproimg = document.getElementById("proimg"); //专家头像
  451. var oresourceName = document.getElementById("resourceName"); //资源名称
  452. var oyongtu = document.getElementById("yongtu"); //应用用途
  453. var oziyuanimg = document.getElementById("ziyuanimg"); //资源图片
  454. var ofield = document.getElementById("field"); //学术领域
  455. var oapply = document.getElementById("apply"); //应用行业
  456. var odetail = document.getElementById("detail"); //详细描述
  457. var ohezuo = document.getElementById("hezuo"); //合作备注
  458. var oEnter = document.getElementById("fess");
  459. var ofielddiv = document.getElementById("fielddiv"); //学术领域容器
  460. var oapplydiv = document.getElementById("applydiv"); //应用行业容器
  461. var odetaildiv = document.getElementById("detaildiv"); //详细描述容器
  462. var ohezuodiv = document.getElementById("hezuodiv"); //合作备注容器
  463. function ziyuaninfo(resourceId) {
  464. $.ajax({
  465. url:'/ajax/resource/resourceInfo',
  466. data: {
  467. 'resourceId': resourceId
  468. },
  469. dataType: 'json', //服务器返回json格式数据
  470. type: 'get', //HTTP请求类型
  471. timeout: 10000, //超时时间设置为10秒;
  472. success: function(data) {
  473. if(data.success) {
  474. console.log(JSON.stringify(data));
  475. var mydata = data.data;
  476. //资源名称
  477. professorId = mydata['professor']['id'];
  478. var userid = GetQueryString('userid');
  479. if(professorId==userid){
  480. document.getElementsByClassName("footbox")[0].style.display="none";
  481. }
  482. (mydata['resourceName']) ? oresourceName.innerHTML = mydata['resourceName']: oresourceName.innerHTML = '';
  483. //专家信息
  484. proId = mydata['professor']['id']; //专家id
  485. //专家名字
  486. (mydata['professor']["name"]) ? oproname.innerText = mydata['professor']["name"]: oproname.innerText = '';
  487. //职称
  488. (mydata['professor']["title"]) ? oprotitle.innerHTML = mydata['professor']["title"]: oprotitle.innerHTML = '';
  489. //职位
  490. if(mydata['professor']["office"] == null || mydata['professor']["office"] == undefined) {
  491. oprooffice.innerHTML = '';
  492. } else {
  493. if(mydata['professor']["title"]) {
  494. oprooffice.innerHTML = ',' + mydata['professor']["office"]; //职位
  495. }
  496. oprooffice.innerHTML = mydata['professor']["office"]; //职位
  497. };
  498. //所在机构
  499. (mydata['professor']["orgName"]) ? oproorgName.innerHTML = mydata['professor']["orgName"]: oproorgName.innerHTML = '';
  500. //所在地
  501. (mydata['professor']["address"]) ? oproadress.innerHTML = mydata['professor']["address"]: oproadress.innerHTML = '';
  502. /*是否认证*/
  503. //(mydata['professor']["authentication"] == true) ? opromodify.classList.add('authicon'): opromodify.classList.add('unauthicon');
  504. if(mydata['professor']["authType"]) {
  505. opromodify.classList.add('authicon')
  506. opromodify.classList.add('authicon-cu');
  507. } else {
  508. if(mydata['professor']["authStatus"]) {
  509. if(mydata['professor']["authentication"] == 1) {
  510. opromodify.classList.add('authicon2');
  511. opromodify.classList.add('authicon-mana');
  512. } else if(mydata['professor']["authentication"] == 2) {
  513. opromodify.classList.add('authicon2');
  514. opromodify.classList.add('authicon-staff');
  515. } else {
  516. opromodify.classList.add('authicon2');
  517. opromodify.classList.add('authicon-stu');
  518. }
  519. }
  520. }
  521. /*专家头像*/
  522. (mydata['professor']["hasHeadImage"] == 0) ? oproimg.setAttribute('src', '/images/default-photo.jpg'): oproimg.setAttribute('src', '/images/head/' + mydata['professor']['id'] + '_m.jpg');
  523. //资源基本信息
  524. //(mydata['images']['imageSrc']) ? oziyuanimg.setAttribute('src', mydata['images']['imageSrc']): oziyuanimg.setAttribute('src', '../images/default-resource.jpg'); //资源图片
  525. var imgRes = "/images/resource/" + mydata.resourceId + ".jpg";
  526. if(mydata['images'].length) {
  527. oziyuanimg.setAttribute('src', imgRes)
  528. } else {
  529. oziyuanimg.setAttribute('src', '../images/default-resource.jpg')
  530. }
  531. (mydata['supportedServices']) ? oyongtu.innerHTML = mydata['supportedServices']: oyongtu.innerHTML = ''; //应用用途
  532. //学术领域
  533. if(mydata['subject']) {
  534. if(mydata['subject'].indexOf(',') != -1) { //字符串是否包含,
  535. var fieldlist = mydata['subject'].split(",");
  536. console.log(fieldlist.length);
  537. for(var i = 0; i < fieldlist; i++) {
  538. var oli = document.createElement('li');
  539. oli.innerText = fieldlist[i];
  540. ofield.appendChild(oli);
  541. }
  542. } else {
  543. var oli = document.createElement('li');
  544. oli.innerText = mydata['subject'];
  545. ofield.appendChild(oli);
  546. }
  547. } else {
  548. ofielddiv.style.display = 'none';
  549. }
  550. //应用行业
  551. if(mydata['industry']) {
  552. if(mydata['industry'].indexOf(',') != -1) { //字符串是否包含,
  553. var applylist = mydata['industry'].split(",");
  554. console.log(applylist.length);
  555. for(var i = 0; i < applylist; i++) {
  556. var oli = document.createElement('li');
  557. oli.innerText = fieldlist[i];
  558. oapply.appendChild(oli);
  559. }
  560. } else {
  561. var oli = document.createElement('li');
  562. oli.innerText = mydata['industry'];
  563. oapply.appendChild(oli);
  564. }
  565. } else {
  566. oapplydiv.style.display = 'none';
  567. }
  568. //详细描述
  569. if(mydata['descp']) {
  570. odetail.innerHTML = mydata['descp']
  571. } else {
  572. odetaildiv.style.display = 'none';
  573. }
  574. //合作备注
  575. if(mydata['cooperationNotes']) {
  576. ohezuo.innerHTML = mydata['cooperationNotes'];
  577. } else {
  578. ohezuodiv.style.display = 'none';
  579. }
  580. }
  581. },
  582. error: function(e) {
  583. return;
  584. }
  585. });
  586. }
  587. //资源信息
  588. ziyuaninfo(resourceId);
  589. });
  590. </script>
  591. </body>
  592. </html>