portal html css js resource

shareResinfor.html 15KB

    <!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; } .pull-right { float: right!important } .pull-left { float: left!important } .alignCenter { text-align: center; } /*圆角*/ /*头像、资源圆角*/ .headRadius { border-radius: 4px; } .blockGroup { background: #fff; } .mainbox { width: 96%; margin: 2% auto; } .maincon { padding: 4% 2%; overflow: hidden; } .listtit { font-size: 14px; line-height: 26px; color: #333333; } /*中标题*/ .listtit2 { font-size: 13px; line-height: 20px; color: #666666; } /*较小标题*/ .listtit3 { font-size: 12px; line-height: 18px; 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: -6px; } /*专家相关信息*/ .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; } .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:0; margin:0; 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; } .personblock { position: absolute; left: 198px; padding: 0 3%; text-align: center; } .personbox{ margin:auto; width:80%; position:relative; } .authicon { width: 16px; height: 16px; } .authicon2{ width: 48px; height: 16px; } .authicon-mana{background-position: 0 -4px;background-size:100% auto;color:#ff9900;}/*认证科研*/ .authicon-staff{background-position:0 -19px;background-size:100% auto;color:#19AFFF;}/*认证企业*/ .authicon-stu{background-position: 0 -34px;background-size:100% auto;color:#03CE30}/*认证在读学生*/ @media only screen and (min-width: 100px) and (max-width: 360px) { div[class="personbox"]{width:100%;} } </style> <body> <div class="contentBody2"> <div class="blockGroup mainbox"> <div class="maincon" style="position: relative;"> <div class="ResImgBox resouimgbox pull-left" style="height:180px;width:180px;max-width:180px;margin:0 6px 0 8px;"> <img class="resImg headRadius" src="../images/default-resource.jpg" id="ziyuanimg" data-preview-src data-preview-group="1" /> </div> <div class="personblock pull-left" id="fess"> <div class="personbox"> <img class="headRadius" style="width: 64px;height:64px;" src="../images/default-photo.jpg" id="proimg"> <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> </div> <p class="listtit2"><span id="protitle"></span> <span id="prooffice"></span></p> <p class="listtit3"><span id="proorgName"></span></p> <p class="listtit3"><span id="proadress"></span></p> </div> </div> </div> <div class="blockGroup mainbox"> <div class="maincon"> <ul class="resouinfobox"> <li> <div class="infocontit">基本信息</div> </li> <li> <div class="infocon"> <p style="color:#666666;"> <span>资源名称:</span> <span class="listtit2" id='resourceName'></span> </p> <p style="color:#666666;"> <span>应用用途:</span> <span class="listtit2" id="yongtu"></span> </p> </div> </li> </ul> </div> </div> <div class="blockGroup mainbox" id="fielddiv"> <div class="maincon"> <div class="infocontit">学术领域</div> <div class="infocon"> <ul class="infosubject" id="field"> </ul> </div> </div> </div> <div class="blockGroup mainbox" id="applydiv"> <div class="maincon"> <div class="infocontit">应用行业</div> <div class="infocon"> <ul id="apply" class="infoapply"> </ul> </div> </div> </div> <div class="blockGroup mainbox" id="hezuodiv"> <div class="maincon"> <ul class="resouinfobox"> <li> <div class="infocontit">合作备注</div> <div class="infocon"> <p class="listtit3" id="hezuo"></p> </div> </li> </ul> </div> </div> <div class="blockGroup mainbox" id="detaildiv"> <div class="maincon"> <ul class="resouinfobox"> <li> <div class="infocontit">详细描述</div> <div class="infocon"> <p class="listtit3" id="detail"> </p> </div> </li> </ul> </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> $(document).ready(function() { var resourceId = GetQueryString("resourceId"); 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 oproname = document.getElementById("proname"); //专家名称 var oprotitle = document.getElementById("protitle"); //专家职称 var oprooffice = document.getElementById("prooffice"); //专家职务 var oproorgName = document.getElementById("proorgName"); //专家所属机构 var oproadress = document.getElementById("proadress"); //专家所在地 var opromodify = document.getElementById("promodify"); //专家认证 var oproimg = document.getElementById("proimg"); //专家头像 var oresourceName = document.getElementById("resourceName"); //资源名称 var oyongtu = document.getElementById("yongtu"); //应用用途 var oziyuanimg = document.getElementById("ziyuanimg"); //资源图片 var ofield = document.getElementById("field"); //学术领域 var oapply = document.getElementById("apply"); //应用行业 var odetail = document.getElementById("detail"); //详细描述 var ohezuo = document.getElementById("hezuo"); //合作备注 var oEnter = document.getElementById("fess"); var ofielddiv = document.getElementById("fielddiv"); //学术领域容器 var oapplydiv = document.getElementById("applydiv"); //应用行业容器 var odetaildiv = document.getElementById("detaildiv"); //详细描述容器 var ohezuodiv = document.getElementById("hezuodiv"); //合作备注容器 function ziyuaninfo(resourceId) { $.ajax({ url: '../ajax/resource/resourceInfo', data: { 'resourceId': resourceId }, dataType: 'json', //服务器返回json格式数据 type: 'get', //HTTP请求类型 timeout: 10000, //超时时间设置为10秒; success: function(data) { if(data.success) { console.log(JSON.stringify(data)); var mydata = data.data; //资源名称 professorId = mydata['editProfessor']['id']; var userid = GetQueryString('userid'); if(professorId == userid) { document.getElementsByClassName("footbox")[0].style.display = "none"; } (mydata['resourceName']) ? oresourceName.innerHTML = mydata['resourceName']: oresourceName.innerHTML = ''; //专家信息 proId = mydata['editProfessor']['id']; //专家id //专家名字 (mydata['editProfessor']["name"]) ? oproname.innerText = mydata['editProfessor']["name"]: oproname.innerText = ''; //职称 (mydata['editProfessor']["title"]) ? oprotitle.innerHTML = mydata['editProfessor']["title"]: oprotitle.innerHTML = ''; //职位 if(mydata['editProfessor']["office"] == null || mydata['editProfessor']["office"] == undefined) { oprooffice.innerHTML = ''; } else { if(mydata['editProfessor']["title"]) { oprooffice.innerHTML = ',' + mydata['editProfessor']["office"]; //职位 } oprooffice.innerHTML = mydata['editProfessor']["office"]; //职位 }; //所在机构 (mydata['editProfessor']["orgName"]) ? oproorgName.innerHTML = mydata['editProfessor']["orgName"]: oproorgName.innerHTML = ''; //所在地 (mydata['editProfessor']["address"]) ? oproadress.innerHTML = mydata['editProfessor']["address"]: oproadress.innerHTML = ''; /*是否认证*/ //(mydata['editProfessor']["authentication"] == true) ? opromodify.classList.add('authicon'): opromodify.classList.add('unauthicon'); if(mydata['editProfessor']["authType"]) { opromodify.classList.add('authicon') opromodify.classList.add('authicon-cu'); opromodify.style.margin = "5px 0 0 3px"; } else { if(mydata['editProfessor']["authStatus"]) { if(mydata['editProfessor']["authentication"] == 1) { opromodify.classList.add('authicon2'); opromodify.classList.add('authicon-mana'); } else if(mydata['editProfessor']["authentication"] == 2) { opromodify.classList.add('authicon2'); opromodify.classList.add('authicon-staff'); } else { opromodify.classList.add('authicon2'); opromodify.classList.add('authicon-stu'); } } } /*专家头像*/ (mydata['editProfessor']["hasHeadImage"] == 0) ? oproimg.setAttribute('src', '../images/default-photo.jpg'): oproimg.setAttribute('src', '../images/head/' + mydata['editProfessor']['id'] + '_m.jpg'); //资源基本信息 //(mydata['images']['imageSrc']) ? oziyuanimg.setAttribute('src', mydata['images']['imageSrc']): oziyuanimg.setAttribute('src', '../images/default-resource.jpg'); //资源图片 var imgRes = "../images/resource/" + mydata.resourceId + ".jpg"; if(mydata['images'].length) { oziyuanimg.setAttribute('src', imgRes) } else { oziyuanimg.setAttribute('src', '../images/default-resource.jpg') } (mydata['supportedServices']) ? oyongtu.innerHTML = mydata['supportedServices']: oyongtu.innerHTML = ''; //应用用途 //学术领域 if(mydata['subject']) { if(mydata['subject'].indexOf(',') != -1) { //字符串是否包含, var fieldlist = mydata['subject'].split(","); console.log(fieldlist.length); for(var i = 0; i < fieldlist.length; i++) { var oli = document.createElement('li'); oli.innerText = fieldlist[i]; ofield.appendChild(oli); } } else { var oli = document.createElement('li'); oli.innerText = mydata['subject']; ofield.appendChild(oli); } } else { ofielddiv.style.display = 'none'; } //应用行业 if(mydata['industry']) { if(mydata['industry'].indexOf(',') != -1) { //字符串是否包含, var applylist = mydata['industry'].split(","); console.log(applylist.length); for(var i = 0; i < applylist.length; i++) { var oli = document.createElement('li'); oli.innerText = applylist[i]; oapply.appendChild(oli); } } else { var oli = document.createElement('li'); oli.innerText = mydata['industry']; oapply.appendChild(oli); } } else { oapplydiv.style.display = 'none'; } //详细描述 if(mydata['descp']) { odetail.innerHTML = mydata['descp']; var pWidth = $("#detail").find("p").width(); var leng = $("#detail").find("img").length; for(var i = 0; i < leng; i++) { (function(i) { $("#detail").find("img").eq(i).load(function() { var imgWidth = $("#detail").find("img").eq(i).width(); if(imgWidth > pWidth) { $("#detail").find("img").eq(i).css({ "width": "100%" }) } }) })(i); } } else { odetaildiv.style.display = 'none'; } //合作备注 if(mydata['cooperationNotes']) { ohezuo.innerHTML = mydata['cooperationNotes']; } else { ohezuodiv.style.display = 'none'; } } }, error: function(e) { return; } }); } //资源信息 ziyuaninfo(resourceId); }); </script> </body> </html>