机构信息浏览页面

src/main/webapp/css/index.css

/*------------------------------------------------------------------------------------*/
/*专家信息页*/
.information-head{ width:1050px; margin:auto;background:#fff; border:1px #c9c9c9 solid; margin-top:30px; overflow:hidden; padding:20px 50px;}
.head-left{ float:left;width:200px; height:200px; border-radius:50%; background:url(../images/default-photo.jpg) no-repeat center center; background-size:100% 100%;-moz-background-size:100% 100%;/* margin-top:40px; margin-left:50px;*/ position:relative;overflow:hidden;}
.head-left{ float:left;width:200px; height:200px; border-radius:50%;position:relative;overflow:hidden;}
.replace-photo{ display:block; width:100%; height:50px; position:absolute; bottom:-50px;background:url(../images/take-photo.png) no-repeat center center; background-color:rgba(0,0,0,0.4); font:16px/44px \5FAE\8F6F\96C5\9ED1,"Microsoft YaHei"; color:#fff; text-align:center;}
/*.take-photo{ display:block; width:20px; height:20px; position:absolute; top:50%; margin-top:-10px; left:50%; margin-left:-10px;background:url(../images/take-photo.png) no-repeat center center; }*/
.head-center{ float:left; width:500px; min-height:150px; margin-top:20px; margin-left:60px;}
.head-center{ float:left; width:500px; min-height:150px; margin-top:20px; margin-left:100px;}
.input-txt{ width:175px; height:26px; border-radius:5px; border:1px #f99550 solid; box-shadow:0 0 1px #f99550 inset; float:left; padding-left:10px;}
.infor{clear:both; width:100%; height:26px; margin-bottom:10px; }
.infor span{ display:block; width:60px; height:26px; float:left;font:14px/26px \5FAE\8F6F\96C5\9ED1,"Microsoft YaHei"; color:#000; margin-left:10px;}
.infor-save{ float:left; clear:both; width:130px; height:26px; background:#ff8400;box-shadow:none; border:none;cursor:pointer; color:#fff; border-radius:5px;font:14px/26px \5FAE\8F6F\96C5\9ED1,"Microsoft YaHei"; margin-top:15px; margin-left:10px;  }
.close{float: left;  width:130px; height:26px; border-radius:5px; background:none; box-shadow:none; border:none;cursor:pointer; padding:0;font:14px/26px \5FAE\8F6F\96C5\9ED1,"Microsoft YaHei"; margin-top:15px; margin-left:5px;opacity: 1;  text-shadow:none; }
.close:hover{ background:#ff8400; color:#fff; opacity: 1; }
.head-right{ float:right; margin-top:30px; /*margin-right:50px;*/position: relative;background:url(../images/default-icon.jpg) no-repeat center center;background-size:100% 100%;-moz-background-size:100% 100%; width:140px; height:140px; overflow:hidden;}
.head-right{ float:right; margin-top:30px; /*margin-right:50px;*/position: relative;width:140px; height:140px; overflow:hidden;}
#headImage,#orgImage{ width:100%; height:100%;border:0;}
/*专家信息内容*/
.information-content{  width:1050px;height:auto; margin:auto;margin-top:20px; position:relative;overflow: hidden;}
.content-right{ width:735px;min-height:100px; float:right; }
.right-box{ width:100%; background:#fff; border:1px #c9c9c9 solid; margin-bottom:20px; }
/*.introduction{min-height:200px;}*/
.right-title{ position:relative; overflow:hidden;}
.right-title{ position:relative; overflow:hidden; padding-right:20px;}
.right-title span{ float:left;font:22px/48px \5FAE\8F6F\96C5\9ED1,"Microsoft YaHei"; /*color:#ff8400; */padding-left:15px;}
.edit-position-left{ background-position:left;}
.editbox{ clear:both; width:665px; max-height:210px; margin:auto;font:14px/20px \5FAE\8F6F\96C5\9ED1,"Microsoft YaHei"; color:#3e3e3e;}
/*合作历史及评价*/
.evaluate{ overflow:hidden; border-bottom:1px dashed #d6d6d6; padding:10px 0;}
.lefteva{ float:left; max-height:200px; width:20%; max-width:200px; text-align:center; margin-top:10px;}
.evaimg{ display:block; width:50px; height:50px; overflow:hidden; border:1px solid #999; border-radius:50%; margin:auto;}
.evaimg{ display:block; width:60px; height:60px; overflow:hidden; border:1px solid #999; border-radius:50%; margin:auto;}
.righteva{ padding:0 10px; float:right; width:80%;}
.evasort{ /*font:16px/30px \5FAE\8F6F\96C5\9ED1,"Microsoft YaHei";*/}
.evasort li{ text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.evastarbox{ overflow:hidden;}
.evastar{ display:block; width:24px; height:24px; cursor:pointer; float:left; background:url(../images/evastar.png) 0 -22px no-repeat;}
.evabrief{ display:block; max-height:80px; overflow:hidden; text-overflow:ellipsis; }
.morebtn{ text-align:right;}
.morelink{ color:#333;font:14px/40px \5FAE\8F6F\96C5\9ED1,"Microsoft YaHei";}
.morebtn{ text-align:right; overflow:hidden;}
.morelink{ color:#333;font:14px/60px \5FAE\8F6F\96C5\9ED1,"Microsoft YaHei"; float:right; margin-right:20px;}
/*个人修改页面科研资源*/
.enterwork{ color:#333;position:absolute; bottom:10px; left:110px;}
.enterwork{ color:#333;position:absolute; bottom:10px; left:110px;}
/*机构信息页面*/
.head-org{ float:left;  position: relative;width:180px; height:180px; overflow:hidden;}
.similarblock{ overflow:hidden; margin:0 10px; padding:10px; border-bottom:1px dashed #d6d6d6;}
.similarblock .evaimg{ float:left; margin-right:20px;}
.rightsim{ max-width:160px; overflow:hidden; float:left;}
.rightsim p{text-overflow:ellipsis;  white-space:nowrap;overflow:hidden;font:12px/16px \5FAE\8F6F\96C5\9ED1,"Microsoft YaHei"; }
.subuser{ overflow:hidden;}
.subuser li{ overflow:hidden; float:left; text-align:center; padding:10px; width:24%; list-style:none;}
.subuser li .evaimg{ width:120px; height:120px;}

src/main/webapp/css/workspace.css

.frmrbtn{ background:none; color:#303030; border:none; }
.updownbtn{text-decoration:underline; color:#333;}
.blackcover{ width:100%; height:100%; position:fixed; background:rgba(0,0,0,.6); z-index:1000;}
/*左侧菜单*/

src/main/webapp/js/popup.js

		$("body").before(CoverHtml);
        $("body").append(PopHtml);
		
		
      //上传资源图像的hover
        $(".resouimg").hover(function(){
        	$(".resouup").animate({
        		"bottom": "0px"
        	});
        }, function() {
        	$(".resouup").animate({
        		"bottom": "-50px"
        	});
        })
		
		var _widht = document.documentElement.clientWidth;  //屏幕宽
		var _height = document.documentElement.clientHeight; //屏幕高
		PopHtml += '</table></form><span class="workclose">关闭</span></div>';
		
		
		//必须先将_html添加到body，再设置Css样式
		//必须先将html添加到body，再设置Css样式
		$("body").before(CoverHtml);
        $("body").append(PopHtml);
		$(".resouapply").css({ top: '(_height - boxHeight)/2 + "px"', left: '(_widht - boxWidth) / 2 + "px"' });
		//关闭按钮
		//关闭按钮，移除HTML节点
		$(".workclose").click(function(){
			$(".blackcover").remove();
			$(".resouapply").remove();

src/main/webapp/js/workspace.js

			$(".portrait-p").attr("src",servPath+"/images/default-photo.jpg");
		});
 	}
//上传资源图像的hover
//$(".resouimg").hover(function(){
//	$(".resouup").animate({
//		"bottom": "0px"
//	});
//}, function() {
//	$(".resouup").animate({
//		"bottom": "-50px"
//	});
//})
////发布资源关闭按钮
//$(".workclose").click(function(){
//	$(".blackcover").hide();
//	$(".resouinfo").hide();
//	$(".resouapply").hide();
//})
//申请资源修改页面
//$(".workitemsrc").click(function(){
//	$(".blackcover").show();
//	$(".resouinfo").show();
//})
//$(".operatebtn").click(function(){
//	$(".blackcover").show();
//	$(".resouapply").show();
//});
////发布资源发布及修改
	var resourceNamePass = true;
	$("#workmysrc").on("click",".resoumag",function()
			{
//				$(".blackcover").show();
//				$(".resouinfo").show();
				var resourceID=$(this).attr("resourceId");
				console.log(resourceID);
				$("#deletedResource").on("click",function(){

src/main/webapp/organization-brow.html

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>科袖－浏览专家信息</title>
<title>科袖－浏览机构信息</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/reset.css" />
<link type="text/css" href="css/index.css" rel="stylesheet">
<link type="text/css" href="css/common.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="/js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.similar.msgbox.js"></script>
</head>
<body>
		<input type="text" placeholder="搜索专家、研究方向或科研机构" class="search-txt" id="hsearchContent">
		<div class="search-btn" id="hsearch"><span class="search-icon"></span></div>
	</div>
	<!--未登录-->
	<a href="login-invite-code.html"><div class="unlogin">特邀专家登录</div></a>
	<!--已登录-->
	<div class="head-portrait">
    	<img class="portrait-p" />
		<div class="personal-infor">
			<div class="triangleB"></div>
			<div class="personal-box">
				<!-- <a href="#"><span class="icon icon1"></span>我的主页</a> -->
				<a href="information.html"><span class="icon icon2"></span>修改资料</a>
				<a href="account-set.html"><span class="icon icon3"></span>账户设置</a>
				<a href="#" onClick="exit()"><span class="icon icon4"></span>退出登录</a>
			</div>
		</div>
	<div class="header-right"> 
        <!--未登录-->
        <a href="login-invite-code.html"><div class="unlogin">特邀专家登录</div></a>
        <!--已登录-->
        <div class="onlogin">
	        <div class="head-portrait">
	        	<img class="portrait-p" />
	            <div class="personal-infor">
	                <div class="triangleB"></div>
	                <div class="personal-box">
	                    <!-- <a href="#"><span class="icon icon1"></span>我的主页</a> -->
	                    <a href="information.html"><span class="icon icon2"></span>修改资料</a>
	                    <a href="account-set.html"><span class="icon icon3"></span>账户设置</a>
	                    <a href="#" onClick="exit()"><span class="icon icon4"></span>退出登录</a>
	                </div>
	                
	            </div>
	        </div>
	        <a class="myWorkspace" href="resources.html">我的工作台</a>
        </div>
	</div>
</div>
<div id="container">
	<div class="content">
		<div class="information-head">
			<div class="head-left"><img id="headImage"></div>	
			<div class="head-org"><img id="orgImage"></div>	
			<div class="head-center">
				<div class="infor-browse">
					<a href="#" class="named" id="nameS"></a><a href="#" class="modify"></a>
					<div class="position" id="titleS"></div>
					<div class="science" id="orgNameS"></div>
					<div class="industry" id="industryS"></div>
					<a href="#" class="named">北京科技大学</a><a href="#" class="modify"></a>
					<div class="position adress">北京</div>
					<div class="science college">高校，211</div>
					<div class="industry weburl">www.xxx.edu.cn</div>
				</div>
			</div>
			<div class="head-right"><img id="orgImage"></div>
			
		</div>
		<div class="information-content">
			<div class="content-left" >
				<div class="left-title" >专家信息</div>
				<a href="#infor1"  class="subsidebar">个人简介</a>
				<a href="#infor2"  class="subsidebar">学术领域</a>
				<a href="#infor3"  class="subsidebar">研究方向</a>
				<a href="#infor4"  class="subsidebar">应用行业</a>
				<a href="#infor5"  class="subsidebar">教育背景</a>
				<a href="#infor6"  class="subsidebar">社会兼职</a>
				<a href="#infor7"  class="subsidebar">项目经历</a>
				
				<a href="#infor8"  class="subsidebar">著作、论文、文章</a>
				<a href="#infor9"  class="subsidebar">专利</a>
				<a href="#infor10"  class="subsidebar">获奖</a>
            	<div class="menublock">
                    <div class="left-title" >机构信息</div>
					<a href="#infor1"  class="subsidebar">机构简介</a>
					<a href="#infor2"  class="subsidebar">学术领域</a>
					<a href="#infor3"  class="subsidebar">应用行业</a>
					<a href="#infor4"  class="subsidebar">下属用户</a>
					<a href="#infor5"  class="subsidebar">合作历史及评价</a>
                </div>
                <div class="menublock">
                    <div class="left-title" >相似机构</div>
                    <div class="similarblock">
                    	<a href="" class="evaimg"><img src="" width="100%" height="100%"></a>
                    	<div class="rightsim">
	                          <p>机构姓名</p>
	                          <p>北京</p>
	                          <p>职称，职位</p>
	                          <p>www.xxx.edu.cn</p>
	                    </div>
                    </div>
                    <div class="similarblock">
                    	<a href="" class="evaimg"><img src="" width="100%" height="100%"></a>
                    	<div class="rightsim">
	                          <p>机构姓名</p>
	                          <p>北京</p>
	                          <p>职称，职位</p>
	                          <p>www.xxx.edu.cn</p>
	                    </div>
                    </div>
                    
                </div>
                
			</div>
			<div class="content-right">
				<div class="right-box introduction">
				<a name="infor1"></a>
					<div class="right-title"><span>个人简介</span></div>
					<div class="right-title"><span>机构简介</span></div>
					<div class="infor-browse">
					<div class="editbox" id="descpS">
					
					<div class="clear"></div>
					</div>
				</div>
				
				<div class="right-box introduction"><a name="infor3"></a>
					<div class="right-title"><span>研究方向</span>    </div>
					<div class="infor-browse" id="researchAreaShow">
				    	
					</div>
					<div class="clear"></div>
				</div>
				
				<div class="right-box introduction">
					<div class="right-title"><span>应用行业</span>    </div>
					<div class="infor-browse">
				</div>
				
				<div class="right-box introduction">
					<div class="right-title"><span>教育背景</span>    </div>
					<div class="infor-browse">
						<ul class="edu-about" style=" list-style-type:circle" id="eduBgShow">
						</ul>
					</div>
				</div>
				
				<div class="right-box introduction">
					<div class="right-title"><span>社会兼职</span>    </div>
					<div class="infor-browse">
						<ul class="edu-about" id="timeJobShow">
							
						</ul>
					</div>
				</div>
				
				<div class="right-box introduction">
					<div class="right-title"><span>项目经历</span>    </div>
					<div class="infor-browse">
						<ul class="edu-about" id="projectShow">
							
						</ul>
					</div>
				</div>
				
				<div class="right-box introduction">
					<div class="right-title"><span>著作、论文、文章</span>    </div>
					<div class="right-title"><span>下属用户</span> <a href="" class="morelink">更多</a>   </div>
					<div class="infor-browse">
						<ul class="edu-about" id="paperShow">
						</ul>
					</div>
				</div>
                
				<div class="right-box introduction">
					<div class="right-title"><span>专利</span>    </div>
					<div class="infor-browse">
						<ul class="edu-about" id="patentShow">
						
						</ul>
						<div class="edu-about">
							<ul class="subuser">
								
                                <li>
									<a href="" class="evaimg"><img src="" width="100%" height="100%"></a>
                                    <p>专家姓名</p>
                                    <p>职称，职位</p>
                                    <p>XXX学校，XXX机构</p>
                                </li>
                                <li>
									<a href="" class="evaimg"><img src="" width="100%" height="100%"></a>
                                    <p>专家姓名</p>
                                    <p>职称，职位</p>
                                    <p>XXX学校，XXX机构</p>
                                </li>
                                <li>
									<a href="" class="evaimg"><img src="" width="100%" height="100%"></a>
                                    <p>专家姓名</p>
                                    <p>职称，职位</p>
                                    <p>XXX学校，XXX机构</p>
                                </li>
                                <li>
									<a href="" class="evaimg"><img src="" width="100%" height="100%"></a>
                                    <p>专家姓名</p>
                                    <p>职称，职位</p>
                                    <p>XXX学校，XXX机构</p>
                                </li>
							</ul>
						</div>
					</div>
				</div>
				
				<div class="right-box introduction">
					<div class="right-title"><span>荣誉及奖项</span>    </div>
					<div class="right-title"><span>合作历史及评价</span>    </div>
					<div class="infor-browse">
						<ul class="edu-about" id="honorShow">
							
						</ul>
						<div class="shareabout">
                        	<div class="evaluate">
                            	<div class="lefteva">
                                    <a href="" class="evaimg"><img src="" width="100%" height="100%"></a>
                                    <p>专家姓名</p>
                                    <p>职称，职位</p>
                                    <p>XXX学校，XXX机构</p>
                                </div>
                                <div class="righteva">
                                	<ul class="evasort">
                                   		<li>咨询时间：<span>2016-09-06</span></li>
                                        <li>咨询主题：<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo co Proin gravida dolor sit amet lacus accumsa</span></li>
                                    </ul>
                                    <div class="evastarbox">
                                        <span class="evastar"></span>
                                        <span class="evastar"></span>
                                        <span class="evastar"></span>
                                        <span class="evastar"></span>
                                        <span class="evastar"></span>
                                    </div>
                                    <p class="evabrief">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo co Proin gravida dolor sit amet lacus accumsan etiverra justo co Proin gravida dolor sit amet lacus accumsan et iverra justo co Proin gravida dolor sit amet lacus accumsan et iverra justo co Proin gravida dolor sit amet lacus accumsan et  </p>
                                </div>
                            </div>
                           	<div class="evaluate">
                            	<div class="lefteva">
                                    <a href="" class="evaimg"><img src="" width="100%" height="100%"></a>
                                    <p>专家姓名</p>
                                    <p>职称，职位</p>
                                    <p>XXXX学校，XXX机构</p>
                                </div>
                                <div class="righteva">
                                	<ul class="evasort">
                                    	<li>合作时间：<span>2016-09-07</span></li>
                                        <li>合作资源：<span>XXXXXX</span></li>
                                    	<li>合作内容：<span>关于立体罗伟中关于立体罗伟中关于立体罗伟中关于立体罗伟中关于立体罗伟中关于立体罗伟中</span></li>
                                    </ul>
                                    <div class="evastarbox">
                                        <span class="evastar"></span>
                                        <span class="evastar"></span>
                                        <span class="evastar"></span>
                                        <span class="evastar"></span>
                                        <span class="evastar"></span>
                                    </div>
                                    <p class="evabrief">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo co Proin gravida dolor sit amet lacus accumsan etiverra justo co Proin gravida dolor sit amet lacus accumsan et iverra justo co Proin gravida dolor sit amet lacus accumsan et iverra justo co Proin gravida dolor sit amet lacus accumsan et  </p>
                                </div>
                            </div>
                            <div class="morebtn"><a href="" class="morelink">更多记录 >></a></div>
                        </div>
					</div>
				</div>