ws2z3gr2017 7 years ago
parent
commit
0d96573915

BIN
img/check_lo.png


BIN
img/check_lono.png


BIN
img/hot .png


BIN
img/hot.png


BIN
img/login_close.png


BIN
img/login_del.png


BIN
img/login_ewm.png


BIN
img/login_hua.png


BIN
img/login_password.png


BIN
img/login_use.png


BIN
img/登陆_09.png


+ 29 - 1
src/css/public.css

@@ -22,7 +22,7 @@ ul,ol{padding: 0;margin: 0;list-style: none;}
 /*顶部区域*/
 header{width: 100%;background: #ffffff;line-height: 74px;height: 74px;}
 header .logo{float: left;padding-left: 20px;}
-.h_fix{position: fixed;top: 0;left: 0;z-index: 99999;box-shadow: 2px 4px 10px #CCCCCC;}
+.h_fix{position: fixed;top: 0;left: 0;z-index: 99;box-shadow: 2px 4px 10px #CCCCCC;}
 
 header .nav{float: left;padding-left: 90px;}
 header .nav ul li{float: left;width: 120px;text-align: center;line-height: 76px;}
@@ -92,3 +92,31 @@ header .nav_right a:hover{color: #2a6597;}
 .pub_fix ul li:hover{cursor: pointer;}
 .pub_fix ul li p {color: #074d88;font-size: 14px;}
 .pub_fix ul li a{text-decoration: none;}
+
+/*登陆页面*/
+.login{width: 100%;background: rgba(6,6,6,.4);position: fixed;top: 0;left: 0;z-index: 999;}
+.login_mian{width: 600px;background: #ffffff;position: absolute;top: 50%;margin-top: -200px;left: 50%;margin-left: -300px;padding-left: 60px;padding-top: 60px;padding-bottom: 96px;}
+.login_left{float: left;padding-bottom: 10px;;}
+.login_left .login_ewm{width: 166px;padding-top: 34px;border-right: 1px solid #cccccc;padding-right: 30px;margin-bottom: 10px;}
+
+.login_left p{line-height: 26px;font-size: 14px;width: 138px;text-align: center;}
+.login_right{float: left;padding-left: 32px;}
+.login_right h5{font-size: 18px;color: #373739;font-weight: normal;}
+.login_right h5 a{font-size: 14px;color: #f81009;margin-left: 62px;}
+.login_right form .login_uesr,.login_pass{width: 256px;height: 40px;position: relative;border: 1px solid #cccccc;}
+.login_uesr label img,.login_pass label img{width: 20px;height: 22px;position: absolute;top: 8px;left:10px;border: none;}
+#Lo_user,#Lo_pass{width: 170px;height: 24px;line-height: 24px;border: none;border-left: 1px solid #CCCCCC;padding-left: 12px;left:40px;top: 8px;font-size: 16px;position: absolute;color:#cdcdcd;}
+.login_uesr .log_del{width: 16px ;height: 16px;position: absolute; top: 10px;right: 10px;}
+.log_del:hover{cursor: pointer;}
+.login_uesr{margin-bottom: 20px;}
+
+.login_check u{float: right;line-height: 38px;}
+.login_check u a{color: #f18101;}
+.login_check label{height: 38px;line-height: 38px ;color: #f18101;font-weight: normal;background: url(../../img/check_lono.png) no-repeat center left;background-size:25% 40%;}
+.login_check label input{margin-right: 4px; visibility: hidden;}
+.login_check label:hover{cursor: pointer;}
+.login_submit{width: 100%;height: 38px;font-size: 20px;background: #f18101;color: #FFFFFF;text-align: center;border: none;} 
+.login_hua {position: absolute;top: 0;right: 0;}
+.login_close{position: absolute;top: 0;right: 0;width: 50px;height: 50px;z-index: 2000;}
+.login_close:hover{cursor: pointer;}
+

+ 66 - 8
src/js/public.js

@@ -68,12 +68,70 @@ $(function(){
 			e.preventDefault();
 			$("body,html").animate({scrollTop:0},1000)
 		});
-//		$(window).scroll(function(){
-//		var scrolltop=$(document).scrollTop()
-//			if(scrolltop>700){
-//				$('.pendent_box').fadeIn(200);								
-//			}else{
-//				$('.pendent_box').fadeOut(200);				
-//			}
-//		});
+	//登陆页面
+	
+	var hht=$(window).height();	
+	$('.login').height(hht);
+	$('#Lo_user').focus(function(){
+		var use=$(this).val()
+		if(use=='用户名/邮箱/手机'){
+			$(this).val('').css({color:'#333333'})			
+		}
+		
+	})
+	$('#Lo_user').blur(function(){
+		var use=$(this).val();
+		if(use==''){
+			$(this).val('用户名/邮箱/手机').css({color:'#cccccc'})			
+		}		
+	})
+	$('#Lo_pass').focus(function(){
+		var use=$(this).val()
+		if(use=='请输入密码'){	
+			$(this).attr('type',"password");
+			$(this).val('').css({color:'#333333'});			
+		}		
+	});
+	$('#Lo_pass').blur(function(){
+		var use=$(this).val();
+		if(use==''){
+			$(this).attr('type',"text");
+			$(this).val('请输入密码').css({color:'#cccccc'})			
+		}		
+	});
+	$('#checks').attr('checked',false)
+	$('.login_check label input').click(function(){		
+		var Cheack=$(this).prop('checked')
+		if(Cheack){
+			$(this).parent().css({"background":"url(../img/check_lo.png) no-repeat center left","background-size":"25% 40%"})
+		}else{
+			$(this).parent().css({"background":"url(../img/check_lono.png) no-repeat center left","background-size":"25% 40%"})
+		}
+	})
+	//点击x
+	$('.log_del').click(function(){		
+		$('#Lo_user').val('');
+		$('#Lo_user').focus();
+		$('#Lo_user').css({color:'#333333'});
+	})	
+//	登陆事件
+	$('.login').hide()
+	$('.head_login').click(function(e){
+		e.preventDefault();
+		$('.login').fadeIn(800)
+	})
+	$('.login_close').click(function(){
+		$('.login').fadeOut(800)
+	})
+	$('form').submit(function(){
+		var Suser=$('#Lo_user').val();
+		var Spass=$('#Lo_pass').val();			
+		if(Suser==''||Spass==''||Suser=='用户名/邮箱/手机'||Spass=='请输入密码'){			
+			return false;
+		}else{			
+			return true;																						
+		}			
+	})
+		
+		
 })

+ 38 - 2
template/index.html

@@ -19,7 +19,7 @@
   			<div class="logo"><a href="../template/index.html"><img src="../img/Logo111.png" alt="" title="技淘"/></a></div>
   			<div  class="nav">
   				<ul>
-  					<li class="active"><a href="#">科技服务</a><img src="../img/hot .png"/></li>
+  					<li class="active"><a href="#">科技服务</a><img src="../img/hot.png"/></li>
   					<li><a href="#">技术交易</a></li>
   					<li><a href="#">智库咨询</a></li>
   					<li><a href="#">科技金融</a></li>
@@ -29,7 +29,7 @@
   			</div>
   			<div class="nav_right">
   				<a href="">注册</a>
-  				<a href="">登陆</a>
+  				<a href="javascript:;" class="head_login">登陆</a>
   				<a href="">关于我们</a>
   			</div>
   		</div>
@@ -407,6 +407,42 @@
 			</ul>
 			<span class="index_orange"></span>		
 	</div>
+	<!--登陆页面-->
+	
+	<div class="login">
+		<div class="login_mian">
+			<div class="login_left">
+				<div class="login_ewm">
+					<img src="../img/login_ewm.png" alt="二维码" />
+				</div>
+				<p>扫描二维码下载官方</p>
+				<p>技淘APP</p>
+			</div>
+			<div class="login_right">
+				<h5>用户登陆<a href="">免费注册有好礼呦!!</a></h5>
+				<form action="" method="post">
+					<div class="login_uesr">
+						<label for="uesname"><img src="../img/login_use.png"/></label>
+						<input type="text" name="uesname" id="Lo_user" value="用户名/邮箱/手机" />
+						<img src="../img/login_del.png" class="log_del"/>
+					</div>
+					<div class="login_pass">
+						<label for="pass"><img src="../img/login_password.png"/></label>
+						<input type="text" name="pass" id="Lo_pass" value="请输入密码" />
+					</div>
+					<div class="login_check">
+						<label for="checks">
+							<input type="checkbox" name="chek" id="checks" />记住我
+						</label>
+						<u><a href="">忘记密码?</a></u>
+					</div>
+					<input type="submit" value="登 陆" class="login_submit"/>
+				</form>
+				<img src="../img/login_hua.png" alt="" class="login_hua"/>
+			</div>			
+		</div>
+		<img src="../img/login_close.png" alt="" class="login_close"/>
+	</div>
 	<!--<script type="text/javascript" src="../src/js/jquery-2.1.0.js"></script>
 	<script type="text/javascript" src="../src/js/index.js"></script>
 	<script type="text/javascript" src="../src/js/public.js"></script>-->

+ 1 - 1
template/news.html

@@ -19,7 +19,7 @@
   			<div class="logo"><a href="../template/index.html"><img src="../img/Logo111.png" alt="" title="技淘"/></a></div>
   			<div  class="nav">
   				<ul>
-  					<li class="active"><a href="#">科技服务</a><img src="../img/hot .png"/></li>
+  					<li class="active"><a href="#">科技服务</a><img src="../img/hot.png"/></li>
   					<li><a href="#">技术交易</a></li>
   					<li><a href="#">智库咨询</a></li>
   					<li><a href="#">科技金融</a></li>

+ 1 - 1
template/registered.html

@@ -20,7 +20,7 @@
   			<div class="logo"><a href="../template/index.html"><img src="../img/Logo111.png" alt="" title="技淘"/></a></div>
   			<div  class="nav">
   				<ul>
-  					<li class="active"><a href="#">科技服务</a><img src="../img/hot .png"/></li>
+  					<li class="active"><a href="#">科技服务</a><img src="../img/hot.png"/></li>
   					<li><a href="#">技术交易</a></li>
   					<li><a href="#">智库咨询</a></li>
   					<li><a href="#">科技金融</a></li>