portal html css js resource

shareProinfor.html 19KB

    <!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; } .clearfix:before, .clearfix:after { display: table; content: " " } .clearfix:after { clear: both } .pull-right { float: right!important } .pull-left { float: left!important } .alignCenter { text-align: center; } .displayNone { display: none; } .displayBlock { display: block; } /*圆角*/ /*头像、资源圆角*/ .headRadius { border-radius: 4px; } /*底板背景圆角*/ .bgRadius { border-radius: 6px; } .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: -4px; } /*专家相关信息*/ .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; } </style> <body> <div class="contentBody2"> <div class="blockGroup mainbox"> <div class="maincon personinfo"> <div class="headbox alignCenter"> <div class="headimg headRadius"><img src="../images/default-photo.jpg" width="100%" class="headimg1" /></div> <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> <p class="listtit3"><span class="personalMaterial"></span><span class="personalMaterial"></span></p> <p class="listtit3"><span class="personalMaterial"></span><span class="personalMaterial"> </span> <span class="personalMaterial"></span></p> </div> </div> <ul> <li> <a class="mui-navigate-right clearfix peolevelbox " id="accessHistory"> <div class="pull-left peocountbox"> <div class="peocount clearfix"> <em class="dialogicon pull-left "></em> <span class="pull-left">已完成咨询<em class="consultCount"></em>次</span> </div> </div> <div class="rightword levelbox pull-right "> <span class="iconfont start"></span> <!--无色星星icon-favor 黄色星icon-favorfill--> <span class="iconfont start"></span> <span class="iconfont icon-favor start"></span> <span class="iconfont icon-favor start"></span> <span class="iconfont icon-favor start"></span> </div> </a> </li> </ul> </div> <div class="blockGroup mainbox" id="professorresourceList"> <div class="maincon"> <div class="infocontit">合作资源</div> <div class="infocon" style="padding:10px 0;"> <ul class="listitembox resinfo" id="resourceList"> </ul> </div> </div> </div> <div class="blockGroup mainbox" id="professorBreifinfo"> <div class="maincon"> <div class="infocontit">个人简介</div> <div class="infocon"> <span class="breifinfo"> </span> </div> </div> </div> <div class="blockGroup mainbox" id="professorInfosubject"> <div class="maincon"> <div class="infocontit">学术领域</div> <div class="infocon"> <ul class="infosubject"> </ul> </div> </div> </div> <div class="blockGroup mainbox" id="professorReserachMess"> <div class="maincon"> <div class="infocontit">研究方向</div> <div class="infocon reserachMess"> </div> </div> </div> <div class="blockGroup mainbox" id="professorinfoapply"> <div class="maincon"> <div class="infocontit">应用行业</div> <div class="infocon"> <ul class="infoapply"> </ul> </div> </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> //获取URL ID函数 $(document).ready(function() { var personalMaterial = document.getElementsByClassName('personalMaterial'); var nameli = document.getElementById("nameli"); var personSummary = document.getElementsByClassName("breifinfo")[0]; var professorId = GetQueryString("professorId"); 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); } //查询学术领域 var subjectShow = function(data) { if(data != undefined && data.length != 0) { var subs = new Array(); if(data.indexOf(',')) { subs = data.split(','); } else { subs[0] = data; } if(subs.length > 0) { var html = []; for(var i = 0; i < subs.length; i++) { html.push("<li>" + subs[i] + "</li>"); }; document.getElementsByClassName("infosubject")[0].innerHTML = html.join(''); } } } //查询研究方向 var getRecords = function($researchAreaLogs, caption) { var ret = []; var t = 0; for(var i = 0; i < $researchAreaLogs.length; i++) { if(caption == $researchAreaLogs[i].caption) { ret[t] = { id: $researchAreaLogs[i].opreteProfessorId, img: $researchAreaLogs[i].hasHeadImage } t++; } } return ret; } var researchAreaShow = function($datas, $datarecords) { if($datas != undefined && $datas.length != 0) { var html = []; for(var i = 0; i < $datas.length; ++i) { var $data = $datas[i]; var $photos = []; //获取头像 if($datarecords.length > 0) { $photos = getRecords($datarecords, $data.caption); } var showDiv = "<div class='listbox'><div class='listbrowse mui-ellipsis'><span class='like'>" + $data.count + "</span>" + $data.caption + "</div><div class='likenum'>"; if($photos.length < 4) { for(var j = 0; j < $photos.length; ++j) { if($photos[j].img) { showDiv += "<span class='likepeople headRadius'><img class='like-h' src='../images/head/" + $photos[j].id + "_m.jpg'></span>"; } else { showDiv += "<span class='likepeople headRadius'><img class='like-h' src='../images/default-photo.jpg'></span>"; } } } else { for(var j = $photos.length - 2; j < $photos.length; ++j) { if($photos[j].img) { showDiv += "<span class='likepeople headRadius'><img class='like-h' src='../images/head/" + $photos[j].id + "_m.jpg'></span>"; } else { showDiv += "<span class='likepeople headRadius'><img class='like-h' src='../images/default-photo.jpg'></span>"; } } showDiv += "<span class='mui-icon iconfont icon-more likepeople likemore headRadius'></span>"; } showDiv += "</div></div></div>"; html.push(showDiv); } document.getElementsByClassName("reserachMess")[0].innerHTML = html.join('') } } //查询应用行业 var industryShow = function(data) { if(data != undefined && data.length != 0) { var subs = new Array(); if(data.indexOf(',')) { subs = data.split(','); } else { subs[0] = data; } if(subs.length > 0) { var html = []; for(var i = 0; i < subs.length; i++) { html.push("<li>" + subs[i] + "</li>"); }; document.getElementsByClassName("infoapply")[0].innerHTML = html.join(''); } } } var professorResource = function(odata) { var $data = odata; var html = []; for(var i = 0; i < odata.length; i++) { var string = '<li class="listitem">' string += '<div class="proinfor clearfix">' string += '<div class="media-object pull-left ResImgBox">' if($data[i].images.length) { string += '<img class="resImg headRadius" src="../images/resource/' + $data[i].resourceId + '.jpg">' } else { string += '<img class="resImg headRadius" src="../images/default-resource.jpg">' } string += '</div>' string += '<div class="pull-left media-body">' string += '<span class="listtit">' + $data[i].resourceName + '</span>' string += '<p class="listtit2">' + $data[i].supportedServices + '</p>' // string += '<p class="listtit3 resbrief">' // if($data[i].descp) { // string += $data[i].descp; // } // string += '</p>' string += '</div></div></li>' html.push(string); } document.getElementById("resourceList").innerHTML = html.join(''); } /*获取个人信息*/ function personalMessage() { $.ajax({ url: "../ajax/professor/info/" + professorId, dataType: 'json', //数据格式类型 type: 'GET', //http请求类型 timeout: 10000, //超时设置 success: function(data) { var $data = data.data; personalMaterial[0].innerText = $data.name; //基本信息 if($data.consultCount) { document.getElementsByClassName("consultCount")[0].innerText = $data.consultCount; } else { document.getElementById("accessHistory").style.display = "none"; } var startLeval = parseInt($data.starLevel); var start = document.getElementsByClassName("start"); for(var i = 0; i < startLeval; i++) { start[i].classList.add("icon-favorfill"); start[i].classList.remove("icon-favor"); } if($data.hasHeadImage) { document.getElementsByClassName("headimg1")[0].src = "../images/head/" + $data.id + "_l.jpg"; } else { document.getElementsByClassName("headimg1")[0].src = "../images/default-photo.jpg"; } if($data.authType) { nameli.classList.add('authicon'); nameli.classList.add('authicon-cu'); } else { if($data.authStatus) { if($data.authentication == 1) { nameli.classList.add('authicon2'); nameli.classList.add('authicon-mana'); //nameli.innerHTML="<span>科研</span>"; } else if($data.authentication == 2) { nameli.classList.add('authicon2'); nameli.classList.add('authicon-staff'); //nameli.innerHTML="<span>企业</span>"; } else { nameli.classList.add('authicon2'); nameli.classList.add('authicon-stu'); //nameli.innerHTML="<span>学生</span>"; } } } if($data.office) { if($data.title) { personalMaterial[1].innerText = $data.office + ","; } else { personalMaterial[1].innerText = $data.office; } } if($data.title) { personalMaterial[2].innerText = $data.title; } if($data.orgName) { if($data.department) { personalMaterial[3].innerText = $data.orgName + " , "; } else { if($data.address) { personalMaterial[3].innerText = $data.orgName + " | "; } else { personalMaterial[3].innerText = $data.orgName; } } } if($data.department) { if($data.address) { personalMaterial[4].innerText = $data.department + " | "; } else { personalMaterial[4].innerText = $data.department; } } if($data.address) { personalMaterial[5].innerText = $data.address; } //个人简介 if($data.descp) { personSummary.innerHTML = $data.descp; } else { document.getElementById("professorBreifinfo").style.display = "none"; } //学术领域 if($data.subject) { subjectShow($data.subject); } else { document.getElementById("professorInfosubject").style.display = "none"; } //研究方向 if($data.researchAreas.length) { researchAreaShow($data.researchAreas, $data.editResearchAreaLogs); } else { document.getElementById("professorReserachMess").style.display = "none"; } //应用行业 if($data.industry) { industryShow($data.industry); } else { document.getElementById("professorinfoapply").style.display = "none"; } //专家资源 if($data.resources.length) { professorResource($data.resources); } else { document.getElementById("professorresourceList").style.display = "none"; } //如无详细内容数据,隐藏详细点击的按钮 if(!$data.edus.length && !$data.jobs.length && !$data.projects.length && !$data.papers.length && !$data.patents.length && !$data.honors.length) { document.getElementById("detailProfessor").style.display = "none"; } }, error: function(e) { return; } }); } personalMessage() }) </script> </body> </html>