Home Explore Help
Register Sign In
bulomakaka
/
ekexiu.com.portal
Watch 7
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Commits 82 Releases 0 Wiki
Browse Source

搜索页面增加资源信息列表

luyanan 8 years ago
parent
86bdddffe2
commit
b09c8949db
8 changed files with 140 additions and 82 deletions
Split View Show Diff Stats
  1. 10 2
      src/main/webapp/css/common.css
  2. 39 31
      src/main/webapp/css/index.css
  3. 1 7
      src/main/webapp/css/workspace.css
  4. BIN
      src/main/webapp/images/default-icon.jpg
  5. 0 21
      src/main/webapp/js/index.js
  6. 2 2
      src/main/webapp/js/popup.js
  7. 40 11
      src/main/webapp/js/search.js
  8. 48 8
      src/main/webapp/search.html

+ 10 - 2
src/main/webapp/css/common.css
View File 

@ -37,9 +37,17 @@ url(../images/index-icon.png) no-repeat; background-position:left; margin:8px;}
37 37 
/*主体部分*/
38 38 
#container{ min-width:1000px; background:#fff;overflow: hidden;}
39 39
40 
/*分页*/
41 
.tcdPageCode{padding: 14px 20px;text-align: left;color: #000;text-align:center;font:14px/24px \5FAE\8F6F\96C5\9ED1,"Microsoft YaHei"; }
42 
.tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 30px;	line-height: 30px;	padding: 0 10px;border: 1px solid #e5e5e5;	margin: 0 8px;border-radius:5px; color:#000;}
43 
.tcdPageCode a:hover{text-decoration: none;}
44 
.tcdPageCode span.current{display: inline-block;height:30px;line-height: 30px;padding: 0 10px;margin: 0 8px;color: #fff;background-color: #ff8400;border-radius:5px;}
45 
.tcdPageCode span.disabled{	display: inline-block;height: 30px;line-height:30px;padding: 0 10px;margin: 0 8px;	color: #000;background: #fff;border: 1px solid #e5e5e5;border-radius:5px;}
46 
.tcdPageCode li { display: inline;}
47
40 48 
/*footer部分*/
41 
#footer{ min-width:1000px;clear:both; height:250px; background:#ff8400;}
42 
.footer-top{ width:1000px; height:214px; margin:auto;}
49 
#footer{ min-width:1170px;clear:both; height:250px; background:#ff8400;}
50 
.footer-top{ width:1170px; height:214px; margin:auto;}
43 51 
.footerL{ float:left; }
44 52 
.footer-logo{ width:80px; height:50px; background:url(../images/logo2.png) no-repeat; background-size:100% 100%; margin:24px 0;}
45 53 
.link{ color:#fff;padding-bottom:15px;  }

+ 39 - 31
src/main/webapp/css/index.css
View File 

@ -13,7 +13,7 @@ h1{font:60px/80px \5FAE\8F6F\96C5\9ED1,"Microsoft YaHei"; color:#fff; text-align
13 13 
h2{font:30px/50px \5FAE\8F6F\96C5\9ED1,"Microsoft YaHei"; color:#fff; text-align:center; text-shadow:0px 0px 10px #2d2524;}
14 14 
.main-search{ width:700px; height:46px; margin:auto; margin-top:20px;}
15 15 
.sear-txt{ width:530px; height:40px; background:#fff; border:none; border-radius:10px 0 0 10px; float:left;font:16px/40px \5FAE\8F6F\96C5\9ED1,"Microsoft YaHei"; padding-left:20px; color:#a3a3a3;}
16 
.sear-btn{ width:140px; height:40px; background:#ff8400; border-radius:0 10px 10px 0; float:left; cursor:pointer;font:20px/40px \5FAE\8F6F\96C5\9ED1,"Microsoft YaHei"; color:#fff; text-align:center; }
16 
.sear-btn{ width:140px; height:40px; background:#ff8400; border-radius:0 10px 10px 0; float:left; cursor:pointer;font:18px/40px \5FAE\8F6F\96C5\9ED1,"Microsoft YaHei"; color:#fff; text-align:center; }
17 17 
/*寻找专家流程*/
18 18 
.process{ width:804px; height:205px; margin:auto;}
19 19 
.process1{ height:144px; float:left; margin-top:40px;}

@ -55,42 +55,50 @@ h5{font:20px/30px \5FAE\8F6F\96C5\9ED1,"Microsoft YaHei"; }
55 55
56 56 
/*搜索页*/
57 57 
.content{ width:100%; height:auto; background:#f8f8f8; padding:60px 0 2px 0; }
58 
.content-in{ width:920px;/*min-height:300px;*/ margin:auto;padding-bottom:20px;}
59 
.sear-search{ width:700px; height:56px;margin-top:20px;}
60 
.content .sear-txt{ box-shadow:1px 1px 5px #ccc inset;}
58 
.content-in{ width:1170px;/*min-height:300px;*/ margin:auto;padding-bottom:20px;}
59 
.sear-search{ width:100%; height:56px;margin-top:20px;}
60 
.content .sear-txt{ box-shadow: 0px 0px 5px #ccc inset;}
61 61 
/*搜索分类*/
62 
.classify{ width:920px; /*min-height:200px;*/ border:2px #e2e2e2 solid; margin-top:10px;border-radius: 10px;background: #fff; padding:10px 0; }
63 
.class1{ width:100%; height:52px; overflow:hidden; position:relative;}
62 
.classify{ width:100%; /*min-height:200px; border:1px #e2e2e2 solid;*/ margin-top:10px;border-radius: 10px;background: #fff; padding:10px 0; }
63 
.class1{ width:100%; height:52px; overflow:hidden; position:relative; border-bottom:1px #efefef solid;}
64 64 
.class1:nth-child(even){background:#f8f8f8}
65 
.title{ padding:0 15px; float:left;font:18px/48px \5FAE\8F6F\96C5\9ED1,"Microsoft YaHei"; color:#000;}
66 
.area-con{ float:left; width:720px;/* border:1px solid red; */overflow:hidden;}
67 
.class1 a{ padding:0px 5px; float:left;font:18px/30px \5FAE\8F6F\96C5\9ED1,"Microsoft YaHei"; color:#000; margin-top:9px; margin-right:15px;}
65 
.class1:last-child{border-bottom:none;}
66 
.title{ padding:0 15px; float:left;font:16px/48px \5FAE\8F6F\96C5\9ED1,"Microsoft YaHei"; color:#000;}
67 
.area-con{ float:left; width:970px;/* border:1px solid red; */overflow:hidden;}
68 
.class1 a{ padding:0px 5px; float:left;font:16px/30px \5FAE\8F6F\96C5\9ED1,"Microsoft YaHei"; color:#000; margin-top:9px; margin-right:15px;}
68 69 
.class1 .colorbg{ color:#fff; background:#ff8400;}
69 70 
.andmore{ display:block; width:52px;font:16px/48px \5FAE\8F6F\96C5\9ED1,"Microsoft YaHei"; color:#000; padding:0 20px; position:absolute;right:0; cursor:pointer;}
70 
.updown{ display:block; width:18px; height:14px; background:url(../images/UpDown.png); background-position:left; float:right; margin-top:18px;}
71 
.updown{ display:block; width:18px; height:14px; background:url(../images/UpDown.png) 0 center no-repeat;  float:right; margin-top:18px;}
71 72 
/*搜索内容*/
72 
.about{ width:100%;min-height:100px; border-top:2px #e2e2e2 solid; padding:5px 0;}
73 
.about-in{ width:920px; max-height:850px; height:auto; margin:auto; margin-top:10px;}
74 
.item{ width:100%;overflow: hidden; border:1px #ffa544 solid;box-shadow:1px 1px 1px #ff8400 inset; border-radius:10px; margin-top:18px; }
75 
/*.photo{ width:132px; height:132px; border-radius:50%; border:2px #fca72d solid; margin:20px; background:url(../images/pic1.jpg) no-repeat center center; float:left;}*/
76 
.photo1{width:132px;height:132px;border-radius:50%;border:1px #fca72d solid;margin:20px;float:left;/*background:url(../images/default-photo.jpg)  no-repeat center center;*/background-size:100% 100%;-moz-background-size:100% 100%; overflow:hidden;}
77
78 
.synopsis{ float:left; padding:20px 0;color:#000; width:720px;}
79 
.named{display:block;font:24px/34px \5FAE\8F6F\96C5\9ED1,"Microsoft YaHei"; color:#000; float:left;}
73 
.about{ width:100%; border-top:1px #e2e2e2 solid; padding:5px 0;}
74 
.aboutcenter{ width:1170px;height:auto; margin:auto; }
75 
.abouttab{ width:100%; margin:10px 0; border-bottom:1px solid #ccc; border-radius:4px; }
76 
.tabbtn{ font-weight:bold; position:relative;z-index:20;font-size:16px; letter-spacing:0.2em; float:left; padding:16px; width:100px; text-align:center; border-radius:6px 6px 0 0; top: 1px;color:#ff8400; cursor:pointer; margin-left:6px; }
77 
.tabcurrent{ border:1px solid #ccc; border-bottom-color:#fff;background:#f8f8f8;}
78 
.abouttablist{ margin-bottom:40px;}
79 
.aboutcon{ display:none;}
80 
.aboutcon:first-child{ display:block;}
81 
.about-in{ overflow:hidden;  width:100%;height:auto; margin:auto; margin-top:10px;}
82 
.item{ width:99%;overflow: hidden; background:#f8f8f8; border:1px #f0f0f0 solid;/*box-shadow:1px 1px 1px #ff8400 inset;*/ border-radius:10px; margin:10px auto; position:relative;min-height:120px; }
83 
.operbox{float: left;position: absolute;padding: 10px 20px;margin: 20px;right: 10px; top:50%; margin-top:-20px;}
84 
.operbtn{ padding:6px 20px; margin:0 2px; border: 1px solid #efefef;border-radius: 6px; background:#ff8400; color:#fff; cursor:pointer;}
85 
.photo1{width:132px;height:132px;border-radius:50%;border:1px #f0f0f0 solid;margin:20px;float:left;/*background:url(../images/default-photo.jpg)  no-repeat center center;*/background-size:100% 100%;-moz-background-size:100% 100%; overflow:hidden;}
86 
/*专家简介*/
87 
.synopsis{ float:left; padding:20px 0;color:#000; width:800px;line-height:30px;}
88 
.named{display:block;font-size:24px; color:#000; float:left;}
80 89 
.named:hover,.named:focus,.named:active{color:#000; text-decoration:none;}
81 
.modify{ display:block; width:46px; height:38px; background:url(../images/rz.png); float:left; margin-left:12px;margin-top: 6px;}
82 
.position{ clear:both;font:18px/34px \5FAE\8F6F\96C5\9ED1,"Microsoft YaHei"; }
83 
.science{font:14px/34px \5FAE\8F6F\96C5\9ED1,"Microsoft YaHei"; }
84 
.industry{font:16px/34px \5FAE\8F6F\96C5\9ED1,"Microsoft YaHei"; }
85 
/*分页*/
86 
.tcdPageCode{padding: 62px 20px;text-align: left;color: #000;text-align:center;font:14px/42px \5FAE\8F6F\96C5\9ED1,"Microsoft YaHei"; }
87 
.tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 42px;	line-height: 44px;	padding: 0 17px;border: 1px solid #a5a5a5;	margin: 0 8px;vertical-align: middle;border-radius:5px; color:#000;}
88 
.tcdPageCode a:hover{text-decoration: none;}
89 
.tcdPageCode span.current{display: inline-block;height:42px;line-height: 44px;padding: 0 17px;margin: 0 8px;color: #fff;background-color: #ff8400;	border: 1px solid #a5a5a5;;vertical-align: middle;border-radius:5px;}
90 
.tcdPageCode span.disabled{	display: inline-block;height: 42px;line-height: 44px;padding: 0 22px;margin: 0 8px;	color: #000;background: #fff;border: 1px solid #a5a5a5;vertical-align: middle; border-radius:5px;}
91 
.tcdPageCode li {
92 
    display: inline;
93 
}
90 
.modify{ display:block; width:46px; height:38px; background:url(../images/rz.png); float:left; margin-left:12px;}
91 
.position{ clear:both;font-size:18px; }
92 
.science{font-size:14px; }
93 
.industry{font-size:16px; }
94 
/*资源简介*/
95 
.resourcephoto{width:132px;height:132px; border-radius:4px;border:1px #f0f0f0 solid;margin:40px 20px;float:left;overflow:hidden; }
96 
.resouname{font-size:24px; color:#000;}
97 
.belongname{ font-size:20px; }
98 
.modicon{ margin:0 10px;}
99 
.positionbox{ font-size:18px; }
100 
.sciencebox,.provideservice{font-size:14px; }
101 
.industrybox{font-size:16px; }
94 102 
/*------------------------------------------------------------------------------------*/
95 103 
/*账号设置*/
96 104 
.account{ width:875px; min-height:100px; margin:auto; padding: 40px 0;}

+ 1 - 7
src/main/webapp/css/workspace.css
View File 

@ -64,13 +64,7 @@
64 64
65 65 
.resoutab .workmsgbox td{padding:0; margin:0;}
66 66 
.workmsg{ clear:both;font:14px/26px \5FAE\8F6F\96C5\9ED1,"Microsoft YaHei"; color:red; padding-left:20px; background:url(../images/info_warn.png) 0 center no-repeat; }
67 
/*分页*/
68 
.tcdPageCode{padding: 14px 20px;text-align: left;color: #000;text-align:center;font:14px/24px \5FAE\8F6F\96C5\9ED1,"Microsoft YaHei"; }
69 
.tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 30px;	line-height: 30px;	padding: 0 6px;border: 1px solid #a5a5a5;	margin: 0 8px;vertical-align: middle;border-radius:5px; color:#000;}
70 
.tcdPageCode a:hover{text-decoration: none;}
71 
.tcdPageCode span.current{display: inline-block;height:30px;line-height: 30px;padding: 0 6px;margin: 0 8px;color: #fff;background-color: #ff8400;	border: 1px solid #a5a5a5;;vertical-align: middle;border-radius:5px;}
72 
.tcdPageCode span.disabled{	display: inline-block;height: 30px;line-height:30px;padding: 0 6px;margin: 0 8px;	color: #000;background: #fff;border: 1px solid #a5a5a5;vertical-align: middle; border-radius:5px;}
73 
.tcdPageCode li { display: inline;}
67
74 68 
/*////////////我的工作台/////////////////*/
75 69 
.workblock{ padding:10px; overflow:hidden;  background:#fff; margin:10px 0; margin-bottom:20px;}
76 70 
.workhs{ width:34%; overflow:hidden;}

BIN
src/main/webapp/images/default-icon.jpg
View File


+ 0 - 21
src/main/webapp/js/index.js
View File 

@ -98,26 +98,5 @@ $('.professor').hover(function() {
98 98 
	})
99 99 
})
100 100
101 
/*搜索分类展开*/
102 
  var i = 0;
103 
 $(".andmore").click(function() {
104 
 	$(this).find(".updown").css("background-position", "left");
105 
 	$(this).parent().css("height", "52px");
106 
 	if (i % 2 == 0) {
107
108 
 	} else {
109 
 		$(this).find(".updown").css("background-position", "right");
110 
 		$(this).parent().css("height", "auto");
111
112 
 	}
113 
 	i++;
114 
 })
115
116 
/*搜索分类背景切换*/
117 
$(".class1").on("click","a",function (){
118 
	$(this).addClass("colorbg").siblings().removeClass("colorbg");
119 
})
120
121
122 101
123 102 
})

+ 2 - 2
src/main/webapp/js/popup.js
View File 

@ -70,7 +70,7 @@ function ResourceInfo() {
70 70 
		$(".workclose").click(function(){
71 71 
			$(".blackcover").remove();
72 72 
			$(".resouinfo").remove();
73 
			location.reload(true);
73
74 74 
		})
75 75 
}
76 76 
//资源信息 //

@ -124,7 +124,7 @@ function ResourceApply(){
124 124 
		$(".workclose").click(function(){
125 125 
			$(".blackcover").remove();
126 126 
			$(".resouapply").remove();
127 
			location.reload(true);
127
128 128 
		})
129 129
130 130 
}

+ 40 - 11
src/main/webapp/js/search.js
View File 

@ -57,7 +57,8 @@ $(function(){
57 57
58 58 
									dataHtml += "</div>";
59 59 
									dataHtml += "</div>";
60
60 
									dataHtml += "<div class='operbox'><span class='operbtn consultbtn'>咨询</span></div>";
61
61 62 
									$("#professorList").append(dataHtml);
62 63
63 64 
									

@ -68,6 +69,7 @@ $(function(){
68 69 
										$(this).attr("src","/images/default-photo.jpg");
69 70 
									});
70 71
72
71 73 
									//点击查看当前信息
72 74 
									(function(i){
73 75 
										$('.photo1').click(function()

@ -151,17 +153,17 @@ $(function(){
151 153 
		$("#search").on("click",function(){
152 154 
			$("#hsearchContent").val($("#searchContent").val());
153 155 
			$("#professorList").remove();
154 
			$(".about").append('<div class="about-in" id="professorList"></div>')
156 
			$(".aboutpro").append('<div class="about-in" id="professorList"></div>')
155 157 
			$(".tcdPageCode").remove();
156 
			$(".about").append('<div class="tcdPageCode"></div>');
158 
			$(".aboutpro").append('<div class="tcdPageCode"></div>');
157 159 
			findProfessor();
158 160 
		})
159 161 
		$("#hsearch").on("click",function(){
160 162 
			$("#searchContent").val($("#hsearchContent").val());
161 163 
			$("#professorList").remove();
162 
			$(".about").append('<div class="about-in" id="professorList"></div>')
164 
			$(".aboutpro").append('<div class="about-in" id="professorList"></div>')
163 165 
			$(".tcdPageCode").remove();
164 
			$(".about").append('<div class="tcdPageCode"></div>');
166 
			$(".aboutpro").append('<div class="tcdPageCode"></div>');
165 167 
			findProfessor();
166 168 
		})
167 169 


@ -172,19 +174,46 @@ $(function(){
172 174 
			$(this).addClass("colorbg").siblings().removeClass("colorbg");
173 175 
			subject = $(this).attr('title');
174 176 
			$("#professorList").remove();
175 
			$(".about").append('<div class="about-in" id="professorList"></div>')
177 
			$(".aboutpro").append('<div class="about-in" id="professorList"></div>')
176 178 
			$(".tcdPageCode").remove();
177 
			$(".about").append('<div class="tcdPageCode"></div>');
179 
			$(".aboutpro").append('<div class="tcdPageCode"></div>');
178 180 
			findProfessor();
179 181 
		});
180 182 
		$(".class1").eq(1).on("click","a",function (){
181 183 
			$(this).addClass("colorbg").siblings().removeClass("colorbg");
182 184 
			industry = $(this).attr('title');
183 185 
			$("#professorList").remove();
184 
			$(".about").append('<div class="about-in" id="professorList"></div>')
186 
			$(".aboutpro").append('<div class="about-in" id="professorList"></div>')
185 187 
			$(".tcdPageCode").remove();
186 
			$(".about").append('<div class="tcdPageCode"></div>');
188 
			$(".aboutpro").append('<div class="tcdPageCode"></div>');
187 189 
			findProfessor();
188 
    });
189 
   });
190 
    });
191
192 
	/*搜索分类展开*/
193 
	  var listi = 0;
194 
	 $(".andmore").click(function() {
195 
		$(this).find(".updown").css("background-position", "left");
196 
		$(this).parent().css("height", "52px");
197 
		if (listi % 2 == 0) {
198
199 
		} else {
200 
			$(this).find(".updown").css("background-position", "right");
201 
			$(this).parent().css("height", "auto");
202
203 
		}
204 
		listi++;
205 
	 })
206
207 
	/*搜索分类背景切换*/
208 
	$(".class1").on("click","a",function (){
209 
		$(this).addClass("colorbg").siblings().removeClass("colorbg");
210 
	})
211
212 
	/*专家、资源菜单切换*/
213 
	$(".tabbtn").click(function(){
214 
		$(this).addClass("tabcurrent").siblings().removeClass("tabcurrent");
215 
		$(".aboutcon").eq($(this).index()).show().siblings().hide();
216 
	})
217
218 
});
190 219

+ 48 - 8
src/main/webapp/search.html
View File 

@ -72,7 +72,7 @@
72 72 
                        <span class="andmore">更多<span class="updown"></span></span>
73 73
74 74 
                    </div>
75 
                    <!--<div class="class1">
75 
                    <div class="class1">
76 76 
                        <div class="title">所在地点：</div>
77 77 
                        <a href="#"  class="colorbg">不限</a>
78 78 
                        <a href="#">北京</a>

@ -96,18 +96,58 @@
96 96 
                        <a href="#">211</a>
97 97 
                        <a href="#">教育部直属</a>
98 98 
                        <a href="#">中央部委</a>
99 
                    </div>-->
99 
                    </div>
100 100 
                </div>
101 101 
        	</div>
102 102 
        </div>
103 103 
	<div class="about">
104 
		<div class="about-in" id="professorList">
105
106 
		</div>
107 
		<div class="tcdPageCode"></div>
108
104 
		<div class="aboutcenter">
105 
            <div class="abouttab">
106 
                <div class="tabbtn tabcurrent">专家</div>
107 
                <div class="tabbtn">资源</div>
108 
                <div class="clearfix"></div>
109 
            </div>
110 
            <div class="abouttablist">
111 
            	 <!--/*专家信息*/-->
112 
                <div class="aboutcon aboutpro">
113 
                    <div class="about-in" id="professorList">
114
115 
                    </div>
116 
                    <div class="tcdPageCode"></div>
117 
                </div>
118 
            	<!--资源信息-->
119 
            	<div class="aboutcon aboutresou">
120 
                	<div class="about-in" id="resourceList" >
121 
                    	<div class="item">
122 
                            <a class="resourcephoto" href=""><img src="images/default-resource.jpg" width="100%" height="100%"></a>
123 
                            <div class="synopsis">
124 
                            	<div><a class="resouname" href="">资源名称</a></div>
125 
                                <div class="belongname">程学群<img class="modicon" src="images/rz.png" width="28"></div>
126 
                                <div class="positionbox">职称，职位，新材料技术研究院，北京科技大学 |  北京</div>
127 
                                <div class="sciencebox">耐蚀钢研发，工业环境腐蚀与防护，金属表面处理技术</div>
128 
                                <div class="industrybox">新能源汽车 • LED相关行业 • 煤炭、钢铁、大宗商品、原油</div>
129 
                                <div class="provideservice">可提供服务：XXXXXX，XXXXXXXXXX</div>
130 
                            </div>
131 
                            <div class='operbox'><span class='operbtn consultbtn'>咨询</span><span class='operbtn applybtn'>申请</span></div>
132 
                        </div>
133 
                        <div class="item">
134 
                            <a class="resourcephoto" href=""><img src="images/default-resource.jpg" width="100%" height="100%"></a>
135 
                            <div class="synopsis">
136 
                            	<div><a class="resouname" href="">资源名称</a></div>
137 
                                <div class="belongname">程学群<img class="modicon" src="images/rz.png" width="28"></div>
138 
                                <div class="positionbox">职称，职位，新材料技术研究院，北京科技大学 |  北京</div>
139 
                                <div class="sciencebox">耐蚀钢研发，工业环境腐蚀与防护，金属表面处理技术</div>
140 
                                <div class="industrybox">新能源汽车 • LED相关行业 • 煤炭、钢铁、大宗商品、原油</div>
141 
                                <div class="provideservice">可提供服务：XXXXXX，XXXXXXXXXX</div>
142 
                            </div>
143 
                            <div class='operbox'><span class='operbtn consultbtn'>咨询</span><span class='operbtn applybtn'>申请</span></div>
144 
                        </div>
145 
                    </div>
146 
            		<div class="tcdPageCode"></div>
147 
                </div>
148 
            </div>
149 
        </div>
109 150 
	</div>
110
111 151 
</div>
112 152 
<div id="footer">
113 153 
	<div class="footer-top">