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

专家信息修改页面，改善教育背景模块样式

luyanan 8 years ago
parent
e2c2323132
commit
0aa1b3e510
5 changed files with 176 additions and 81 deletions
Split View Show Diff Stats
  1. 55 19
      src/main/webapp/css/index.css
  2. BIN
      src/main/webapp/images/requiredicon.png
  3. 115 57
      src/main/webapp/information.html
  4. 1 0
      src/main/webapp/js/common.js
  5. 5 5
      src/main/webapp/js/information.js

+ 55 - 19
src/main/webapp/css/index.css
View File 

@ -208,13 +208,13 @@ input[type='radio'].radio:checked + .radio {background:url(../images/redio.png)
208 208 
.coulstblock .coulstbox .coulstbtn{padding:24px 10px; margin-right: 20px;}
209 209 
.coulstblock .coulstbox .coulstbtn span,#conbtn span{padding:5px 40px; display:block; border-radius:4px; text-align:center; color:#fff; background:#ff9900;cursor:pointer}
210 210 
/*专家信息头部*/
211 
.information-head{ width:1050px; margin:auto;background:#fff; border:1px  solid #eaeaea; margin-top:30px; overflow:hidden; padding:20px 50px; position: relative;}
211 
.information-head{ width:1050px; margin:auto;background:#fff; border:1px  solid #eaeaea; margin-top:30px; overflow:hidden; padding:20px 30px; position: relative;}
212 212 
.head-left{ float:left;width:200px; height:200px; position:relative;overflow:hidden;}
213 213 
.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-size:16px;line-height:44px; color:#fff; text-align:center;}
214 214 
/*.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; }*/
215 
.head-center{ float:left; width:500px; min-height:150px; margin-top:20px; margin-left:64px;}
216 
.input-txt{ width:175px; height:26px; color:#666; border-radius:5px; border:1px #f99550 solid; box-shadow:0 0 1px #f99550 inset; float:left; padding-left:10px;}
217 
.infor{clear:both; width:100%; height:26px; margin-bottom:10px; }
215 
.head-center{ float:left; min-height:150px;margin: 0px 30px;}
216 
.input-txt{ width:180px; height:26px; color:#666; border-radius:5px; border:1px #f99550 solid; box-shadow:0 0 1px #f99550 inset; float:left; padding-left:10px;}
217 
.infor{clear:both; width:100%;overflow:hidden; margin:10px; }
218 218 
.infor span{ display:block; width:60px; height:26px; float:left;font-size:14px;line-height:26px; color:#333; margin-left:10px;}
219 219 
.select{  width:173px; height:24px; border-radius:5px; border:1px #f99550 solid; box-shadow:0 0 1px #f99550 inset; background:url(../images/downselect.png) no-repeat 150px center; float:left; overflow:hidden;}
220 220 
.selectbtn{ width:200px; height:24px; border:none; background:url(../images/downselect.png) no-repeat 150px center; font-size:14px;line-height:26px; color:#999;}

@ -226,15 +226,15 @@ input[type='radio'].radio:checked + .radio {background:url(../images/redio.png)
226 226 
#orgImage{display:none;}
227 227 
/*专家信息内容*/
228 228 
.information-content{  width:1050px;height:auto; margin:auto;margin-top:20px; position:relative;overflow: hidden;}
229 
.content-left{min-height:394px; float:left;overflow:hidden; }
230 
.menublock{ margin-bottom:10px;width:298px; background:#fff; border:1px #eaeaea solid; padding-bottom:10px;}
229 
.content-left{min-height:394px;max-width: 252px;width:24%; float:left;overflow:hidden; }
230 
.menublock{ margin-bottom:10px;width:100%; background:#fff; border:1px #eaeaea solid; padding-bottom:10px;}
231 231 
.left-title{ width:165px; height:44px;font-size:20px;line-height:44px; border-bottom:1px #ffad55 solid; padding-left:10px; }
232 232 
.subsidebar{ display:block; width:100%; height:26px; padding-left:18px;font-size:14px;line-height:26px;color:#313131; margin-top:5px;}
233 233 
.subcolor{ background:#ff9900; color:#fff;}
234 234 
.subsidebar:hover{ background:#ff9900; color:#fff;}
235 235
236 
.content-right{ width:735px;min-height:100px; float:right; }
237 
.right-box{ width:100%; background:#fff; border:1px #eaeaea solid; margin-bottom:20px; }
236 
.content-right{ width:75%;min-height:100px; float:right; }
237 
.right-box{ width:100%; background:#fff; border:1px #eaeaea solid; margin-bottom:10px; }
238 238 
/*.introduction{min-height:200px;}*/
239 239 
.right-title{ position:relative; overflow:hidden; padding-right:20px;}
240 240 
.right-title span{ float:left;font-size:20px;line-height:48px; /*color:#ff9900; */padding-left:15px;}

@ -242,11 +242,17 @@ input[type='radio'].radio:checked + .radio {background:url(../images/redio.png)
242 242 
.editbox{ clear:both; width:665px; margin:auto;font-size:14px;line-height:20px;color:#666;}
243 243 
.reedit{ clear:both; width:665px; min-height:210px; padding:10px;margin-left:35px; border:1px #f99550 solid; box-shadow:0 0 1px #f99550 inset; font-size:14px;line-height:20px; color:#3e3e3e;resize:none;
244 244 
}
245 
.edit{ display:block; float:left; width:22px; height:22px; background:url(../images/edit.png) no-repeat right center;margin: 15px 6px;cursor:pointer;}
246 
.edit:hover{background:url(../images/edit.png) no-repeat left center;}
247 
.modifybox{ display:none;}
248 
.infor-browse{ clear:both; margin-bottom:20px;}
249 
.btn-marL{ margin-left:35px;cursor:pointer; }
245 
.edit{ display:block; float:left; width:22px; height:22px; background:url(../images/edit.png) no-repeat left center;margin: 15px 6px;cursor:pointer;}
246 
.addclick{position:absolute; right:20px; background: url(../images/addclick.png) 0 14px no-repeat; padding-left: 22px;line-height: 48px;color: #ff9900;cursor: pointer;}
247 
.exitlist{position:absolute;top:2px;margin-left:6px; width:22px; height:22px; background:url(../images/edit.png) no-repeat left center;cursor:pointer;}
248 
.btnbox{ overflow:hidden;padding:16px 20px;}
249 
.btnbox .btn{margin:0 6px;}
250 
.btnbox .deletebtn{color:#F00;box-shadow: none;border: none;background:none; float:right;	}
251
252 
.modifybox{ display:none;padding:10px 36px; margin: 6px 0;background: #FFF9EF;}
253 
.infor-browse{ clear:both;padding-bottom:16px;}
254 
.infor-browse2{padding-bottom:0;}
255 
.btn-marL{cursor:pointer; }
250 256 
.btn-marB{ margin-bottom:30px;cursor:pointer;}
251 257 
.btn{ width:105px; padding:0;cursor:pointer;}
252 258 
.btn:hover, .btn:focus { text-decoration: none; color:#fff;}

@ -275,15 +281,18 @@ input[type='radio'].radio:checked + .radio {background:url(../images/redio.png)
275 281 
.bus-title{ clear:both;font-size:14px;line-height:26px; color:#3e3e3e; }
276 282 
.check{ width:257px; height:26px; float:left;margin-left:35px;font-size:14px;line-height:26px;color:#3e3e3e;}
277 283 
.txt-width{ width:358px;}
278 
.star{ color:#ff9900; display:inline; font-size:16px;}
279 
.edu{ font-size:16px;line-height:26px; color:#868686;}
284
285 
.txtType{ position:relative;}
286 
.txtExp{ position:relative;width: 60%;}
287 
.required_star{ color:#ff9900;float:left;background:url(../images/requiredicon.png) center center no-repeat;background-size:100% 100%; display:block;width:8px;height:8px;position:absolute; top: 6px;left: -12px; }
288 
.edu{ font-size:16px;line-height:30px; color:#868686;padding: 0 16px; margin: 10px;width: 100%;}
280 289 
.edu-h{ height:52px;}
281 
.edu-txt{ float:none; width:402px;}
290 
.edu-txt{ width:100%;margin-left: 8px;height: 30px;font-size: 14px;line-height: 18px;}
282 291 
.date-box{ }
283 292 
.datebox{ width:540px; overflow:hidden; height:26px;}
284 293 
hr{ width:18px; float:left; background:#ffc688; height:2px; border:none; margin:10px;}
285 294 
.checkbox{ float:left; width:60px;margin-left:15px;margin-top: -1px;}
286 
.date-btn{ float:left; width:175px; background:url(../images/select.png) no-repeat right; z-index:999;}
295 
.date-btn{ float:left; width:180px; background:url(../images/select.png) no-repeat right #fff;background-size:13% 100%; z-index:999;}
287 296 
.opacity{ width:150px;}
288 297 
label.edu-radio{ float:none;font-size:16px;line-height:26px; color:#868686; }
289 298 
.edu-select{ margin-left:10px; width:240px; }

@ -291,8 +300,8 @@ label.edu-radio{ float:none;font-size:16px;line-height:26px; color:#868686; }
291 300 
.radiobox{ width:115px; float:left;}
292 301 
.date-title{float:left;    margin-right: 4px;}
293 302 
.edu-sel{ float:right;}
294 
.edu-about li{ list-style:inside;}
295 
.edu-about{ list-style:inside;font-size:14px;line-height:26px;color:#868686; margin:0 35px; margin-bottom:35px; cursor:pointer;}
303 
.edu-about li{ list-style:inside; overflow:hidden;position:relative;margin: 0 35px;}
304 
.edu-about{ list-style:inside;font-size:14px;line-height:26px;color:#868686;padding:10px 0 26px 0;cursor:pointer;}
296 305 
.edu-about span{ display:none;}
297 306 
.infor-browse .edu-about{ color:#666;}
298 307 
.add-icon{ cursor:pointer;}

@ -300,6 +309,33 @@ label.edu-radio{ float:none;font-size:16px;line-height:26px; color:#868686; }
300 309 
.modi{ cursor:pointer;padding-left:10px;}
301 310 
/* .floatL{ float:right;} */
302 311 
.addbox{ display:none;}
312
313 
/*下拉*/
314 
.mr_sj {position: absolute;right: 18px;top: 12px;border: 6px solid #fff;border-color: #ff9900 transparent transparent;display: block;font-size: 0;height: 0;width: 0;}
315 
.mr_timed_div .mr_btn {border: 0;text-align: left;width: 160px;height: 28px;background-color: #fff;}
316 
.mr_timed_div {position: relative;width: 180px;height: 30px;cursor: pointer; background-color: #fff;}
317 
.mr_timed_div .xl_list {position: absolute;top: 30px;left: -1px;z-index: 2;background-color: #fff;box-shadow: 2px 2px 4px #efefe4; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;width:180px;}
318 
.ul_edubg { max-height: 182px;overflow: auto;display:none;border: 1px solid #e7e7e7;}
319 
.mr_timed_div .xl_list li {line-height: 36px;padding-left: 10px;list-style:none;margin: 0 10px;}
320
321 
/*日期组件*/
322 
.mr_calendar_ym {position: absolute;top: 34px;left:6px;height: 160px;width: 244px;background-color: #fff;z-index: 5000;border: 1px solid #e7e7e7;border-radius: 4px;box-shadow: 2px 2px 4px #e7e7e7;cursor:pointer;display:none;}
323 
.mr_calendar_ym ul {float: left;}
324 
.mr_calendar_ym span{display:block;}
325
326 
.mr_calendar_ym .mr_year {width: 34%;height: 160px;border-right: 1px solid #efefef;overflow: auto;}
327 
.mr_calendar_ym .mr_year li {list-style:none;margin:0;cursor: pointer;line-height: 32px;background-color: #fff;color: #333;text-align: center;}
328 
.mr_calendar_ym .mr_month { word-wrap: normal;padding: 10px 10px 10px 16px;background-color: #fff; width:66%;height:158px;}
329 
.mr_calendar_ym .mr_month li {list-style:none;margin:0;float: left;cursor: pointer;width: 33%;height: 22px;line-height: 22px;color: #333;background-color: #fff;margin: 0 0 10px;}
330 
.mr_calendar_ym .full_year{width: 100%;height: 160px;border-right: 1px solid #efefef;overflow: auto;}
331 
.mr_calendar_ym .full_year li{list-style:none;margin:0;cursor: pointer;line-height: 32px;background-color: #fff;color: #333;text-align: left;padding-left:16px;}
332
333 
.mr_calendar_ym li.active { background-color: #ff9900!important;color: #fff!important;}
334
335
336
337
338
303 339 
/*------------------------------------------------------------------------------------*/
304 340
305 341 
.radio+.radio, .checkbox+.checkbox {

BIN
src/main/webapp/images/requiredicon.png
View File


+ 115 - 57
src/main/webapp/information.html
View File 

@ -52,13 +52,13 @@
52 52 
		<div class="information-head">
53 53 
			<div class="head-left headRadius"><a><img id="headImage"><a href="photo-set.html" class="replace-photo"></a></a></div>
54 54 
			<div class="head-center">
55 
				<div class="infor-browse">
55 
				<div class="infor-browse" style="padding:10px;">
56 56 
					<a class="named" id="nameS" style="font-size:20px;"></a><a href="#" class="modify"></a><a class="edit" style=" margin:4px 6px;"></a>
57 57 
					<div class="position" ><span id="office"></span ><span id="titleS"></span ></div>
58 58 
					<div class="science"><span id="industryS"></span ><span id="orgNameS"></span ></div>
59 59 
					<div class="address" id="address"></div>
60 60 
				</div>
61 
				<div class="modifybox">
61 
				<div class="modifybox" style="padding:10px;">
62 62 
				<div class="infor">
63 63 
					<span><em class="emspace">姓</em>名</span>
64 64 
					<input type="text" class="input-txt name" id="name">

@ -214,62 +214,88 @@
214 214
215 215 
 				<!-- 教育背景 -->
216 216 
				<div class="right-box introduction">
217 
					<div class="right-title"><span>教育背景</span><a class="edit"></a></div>
218 
					<div class="infor-browse">
219 
						<ul class="edu-about" style=" list-style-type:circle" id="eduBgShow">
220
221 
						</ul>
222 
					</div>
223 
					<div class="modifybox">
224 
					<div class="infor edu btn-marL">
225 
						<b class="star">*</b><em class="emspace">学</em>校
226 
						<input type="hidden" id="eduId" />
227
228 
						<input type="text" class="input-txt edu-txt" id="school">
229 
					</div>
230 
					<div class="infor edu btn-marL date-box">
231 
						<div class="date-title"><b class="star">&nbsp;</b> 毕业年份</div>
232 
                        <!--<input type="number" class="date-btn input-txt" id="year" value="2016" />-->
233 
                        <input type="text"  maxLength="4" class="date-btn input-txt" id="year"  onKeypress="if (event.keyCode < 48 || event.keyCode > 57) event.returnValue = false;" value="2016">
217 
					<div class="right-title"><span>教育背景</span>
218 
						<a class="addclick">点击添加</a>
219 
					</div>
220 
					<div class="infor-browse infor-browse2">
221 
						<ul class="edu-about" style=" list-style-type:circle">
222 
							<!-- id="eduBgShow"-->
223 
							<li>北科大－计科系－信管－硕士－2016<em class="exitlist"></em></li>
224 
							<li>航空航天大学－计科系－信管－硕士－2016<em class="exitlist"></em></li>
234 225
235 
						<!--<input type="text" class="date-btn input-txt" id="year" />-->
236 
					</div>
237 
					<div class="infor edu btn-marL">
238 
						<b class="star">&nbsp;&nbsp;</b><em class="emspace">院</em>系
239 
						<input type="text" class="input-txt edu-txt" id="college">
240 
					</div>
241 
					<div class="infor edu btn-marL">
242 
						<b class="star">&nbsp;&nbsp;</b><em class="emspace">专</em>业
243 
						<input type="text" class="input-txt edu-txt" id="major">
244 
					</div>
245 
					<div class="infor edu btn-marL edu-h">
246 
					<!--	<div class="sf"><b class="star">*</b><em class="emspace">身</em>份</div>
247 
						<div class="radiobox">
248 
							<input type="radio" name="student" id="a" value="0" class="radio edu-radio"><label for="a" class="radio edu-radio"><em class="emspace">学</em>生</label>
249 
							<input type="radio" name="student" id="b" value="1" class="radio edu-radio"><label for="b" class="radio edu-radio" >访问学者</label>
250 
						</div>-->
251 
						<div class="edu-select" style=" float:none;">
252 
							获得学位
253 
							<div class="select edu-sel" >
254 
								<select class="selectbtn" id="degree">
255 
									<option value="">请选择您的学位</option>
256 
									<option value="学士">学士</option>
257 
									<option value="硕士">硕士</option>
258 
									<option value="博士">博士</option>
259 
								</select>
260 
							</div>
261
262 
						</div>
263
264 
					</div>
265 
                    <div class="clear"></div>
266 
					<input type="button" value="保存" class="infor-save btn btn-marL" id="saveEduBg">
267 
					<input type="button" value="取消" class="close btn btn-marB" >
268 
                    <div class="clearfix"></div>
269 
					<ul class="edu-about" id="eduBgList">
270
271 
					</ul>
272 
					</div>
226 
                         <!--添加修改表单-->
227 
                         <div class="modifybox" style="display:block">
228 
                            <form class="txtExpForm">
229 
                                <div class="infor edu">
230 
                                    <div class="txtType floatL"><b class="required_star"></b><em class="emspace">学</em>校</div>
231 
                                    <input type="hidden" id="eduId" />
232 
                                    <div class="txtExp floatL"><input type="text" class="input-txt edu-txt" id="school"></div>
233 
                                </div>
234 
                                <div class="edu date-box clearfix">
235 
                                    <div class="txtType floatL">毕业年份</div>
236 
                                    <div class="txtExp floatL">
237 
                                    	<input type="text" class="date-btn input-txt edu-txt" id="year" name="YYYY" value="">
238 
                                        <!--年选择器-->
239 
                                        <div class="mr_calendar_ym clearfix" style="width:180px;">
240 
                                            <ul class="full_year">
241
242 
                                            </ul>
243 
                                        </div>
244 
                                        <!--年月选择器-->
245 
                                        <!--<div class="mr_calendar_ym clearfix" style="display: block;">
246 
                                            <ul class="mr_year">
247
248 
                                            </ul>
249 
                                            <ul class="mr_month">
250
251 
                                            </ul>
252 
                                        </div> -->
253
254
255 
                                    </div>
256
257
258
259 
                                </div>
260 
                                <div class="infor edu">
261 
                                     <div class="txtType floatL"><em class="emspace">院</em>系</div>
262 
                                     <div class="txtExp floatL"><input type="text" class="input-txt edu-txt floatL" id="college"></div>
263 
                                </div>
264 
                                <div class="infor edu">
265 
                                    <div class="txtType floatL"><em class="emspace">专</em>业</div>
266 
                                    <div class="txtExp floatL"><input type="text" class="input-txt edu-txt" id="major"></div>
267 
                                </div>
268 
                                <div class="edu ulbox clearfix">
269 
                                    <div class="txtType floatL">获得学位</div>
270 
                                    <div class="mr_timed_div input-txt edu-txt floatL">
271 
                                        <i class="mr_sj"></i>
272 
                                        <input type="hidden" name="degree_text">
273 
                                        <input type="button" class="mr_btn" name="degree_val" onClick="showmenu()" id="div_select2" value="本科">
274 
                                        <div class="xl_list">
275 
                                            <ul class="ul_edubg" id="li_show">
276 
                                                <li onclick="selectThis('学士')">学士</li>
277 
                                                <li onclick="selectThis('硕士')">硕士</li>
278 
                                                <li onclick="selectThis('博士')">博士</li>
279 
                                                <li onclick="selectThis('其他')">其他</li>
280 
                                            </ul>
281 
                                        </div>
282 
                                    </div>
283 
                                </div>
284 
                                <div class="btnbox">
285 
                                    <input type="button" value="保存" class="infor-save btn" id="saveEduBg">
286 
                                    <input type="button" value="取消" class="close btn">
287 
                                    <input type="button" value="删除本条" class="deletebtn">
288 
                                </div>
289 
                            </form>
290 
                         </div>
291 
                         <!--添加修改表单//-->
292
293 
                     <!--<ul class="edu-about" id="eduBgList">-->
294 
                    			<!-- id="eduBgShow"-->
295 
                            <li>北科大－计科系－信管－硕士－2016<em class="exitlist"></em></li>
296 
                            <li>航空航天大学－计科系－信管－硕士－2016<em class="exitlist"></em></li>
297 
                        </ul>
298 
                     </div>
273 299 
				</div>
274 300
275 301 
				<div class="right-box introduction">

@ -500,7 +526,39 @@
500 526 
<script type="text/javascript" src="js/common.js"></script>
501 527 
<script type="text/javascript" src="js/jquery.similar.msgbox.js"></script>
502 528 
<script type="text/javascript" src="js/information.js"></script>
529 
<script>
530
531 
$(".date-btn").click(function(){
532 
	$(this).siblings(".mr_calendar_ym").show();
533 
	})
534
503 535
536 
	if(document.attachEvent) {
537 
	window.attachEvent("onload", yearAdd);  }
538 
else {
539 
	window.addEventListener('load', yearAdd, false);}
540 
	function yearAdd(){
541 
		//先给年下拉框赋内容
542 
		var y  = new Date().getFullYear();
543 
		for (var i = (y-60); i < (y+10); i++){ //以今年为准，前60年，后10年
544 
			  $(".mr_year").append('<li>'+i+'年</li>');
545 
			  $(".full_year").append('<li>'+i+'年</li>');
546 
			  if(i==y){
547 
				$(".mr_year>li:contains("+ i +")").addClass("active");
548 
				$(".full_year>li:contains("+ i +")").addClass("active");
549 
			}
550 
		}
551 
		//赋月份的下拉框
552 
	for (var i = 1; i < 13; i++)  {
553 
		  $(".mr_month").append('<li>'+i+'月</li>'); }
554
555 
	document.reg_testdate.YYYY.value = y;
556 
	document.reg_testdate.MM.value = new Date().getMonth() + 1;
557 
	var n = MonHead[new Date().getMonth()];
558 
	if (new Date().getMonth() ==1 && IsPinYear(YYYYvalue)) n++;
559 
		writeDay(n); //赋日期下拉框Author:meiz
560 
	}
561 
</script>
504 562 
</body>
505 563 
</html>
506 564

+ 1 - 0
src/main/webapp/js/common.js
View File 

@ -207,6 +207,7 @@ function titleLimitFontCountFn(){
207 207 
//模拟下拉菜单
208 208 
function selectThis(value){
209 209 
	$("#div_select").text(value);
210 
	$("#div_select2").val(value);
210 211 
	$("#li_show").css("display","none");
211 212 
}
212 213

+ 5 - 5
src/main/webapp/js/information.js
View File 

@ -376,11 +376,11 @@ $(".subsidebar").click(function(){
376 376
377 377 
		 });
378 378 
//放在编辑上面添加一个class和减少一个class
379 
$("#container .edit").hover(function(){
380 
	$(this).addClass("edit-position-left")
381 
	},function(){
382 
	$(this).removeClass("edit-position-left")
383 
		});
379 
//$("#container .edit").hover(function(){
380 
//	$(this).addClass("edit-position-left")
381 
//	},function(){
382 
//	$(this).removeClass("edit-position-left")
383 
//		});
384 384 
//获取点击那个编辑，及
385 385 
$("#container .edit").click(function(){
386 386 
	var edit =$(".edit").index(this);