留言板接口

Ainaphp/Tpl/Home/Default/Page_contact.html

@@ -9,25 +9,55 @@
 				
 				<div class="form animateTop">
 					<div class="input">
-						<input type="text" placeholder="姓名">
+						<input type="text" placeholder="姓名" id="input_name">
 					</div>
 					<div class="input">
-						<input type="text" placeholder="电话">
+						<input type="text" placeholder="电话" id="input_mobile">
 					</div>
 					<div class="input">
-						<input type="text" placeholder="邮箱">
+						<input type="text" placeholder="邮箱" id="input_email">
 					</div>
 					<div class="input">
-						<input type="text" placeholder="地址">
+						<input type="text" placeholder="地址" id="input_address">
 					</div>
 					<div class="input">
-						<textarea name="" placeholder="留言内容"></textarea>
+						<textarea name="" placeholder="留言内容" id="input_content"></textarea>
 					</div>
 				</div>
 				
-				<div class="btn animateTop"><a>联系我们</a></div>
+				<div class="btn animateTop"><a id="submitForm">提交</a></div>
 			</div>
 		</div>
+		
+		<script type="text/javascript">
+			$(document).ready(function(){
+				$("#submitForm").click(function(){
+					var name = $("#input_name").val();
+					var mobile = $("#input_mobile").val();
+					var email = $("#input_email").val();
+					var address = $("#input_address").val();
+					var content = $("#input_content").val();
+					$.post("https://admin.zfire.top/services/order/login/sendEmail", {
+						name,
+						mobile,
+						email,
+						address,
+						content,
+					},function(res){
+					    if(res.code === 1) {
+							alert('提交成功');
+							$("#input_name").val('');
+							$("#input_mobile").val('');
+							$("#input_email").val('');
+							$("#input_address").val('');
+							$("#input_content").val('');
+						}else {
+							alert(res.msg);
+						}
+					});
+				});
+			});
+		</script>
 		<!--banner 结束-->
 		
 		<!--联系我们 开始-->

css/styles.css

@@ -105,9 +105,9 @@ a:active{blr:expression(this.onFocus=this.blur());}
 .page_banner_mask .btn a:hover {color: #fff; background: none;}
 .page_banner_mask .text {font-size: 14px; color: #fff; line-height: 20px; letter-spacing: 2px; padding-top: 165px; font-family: arial;}
 .page_banner_mask .form {width: 500px; display: inline-block;}
-.page_banner_mask .form .input {margin-top: 10px;}
-.page_banner_mask .form input {width: 100%; height: 36px; border: 1px solid #fff; border-radius: 5px; padding: 0 10px;}
-.page_banner_mask .form textarea {width: 100%; height: 100px; border: 1px solid #fff; border-radius: 5px; padding: 4px 10px;}
+.page_banner_mask .form .input {margin-top: 15px;}
+.page_banner_mask .form input {width: 100%; height: 36px; border: 1px solid #fff; border-radius: 5px; padding: 0 10px; background: none; color: #fff;}
+.page_banner_mask .form textarea {width: 100%; height: 100px; border: 1px solid #fff; border-radius: 5px; padding: 4px 10px; background: none; color: #fff;}
 
 .in_service {height: 666px;}
 .in_service_left {width: 49.5%; height: 666px; transition: all 0.4s;}

js/main.js

@@ -102,12 +102,18 @@ $(function() {
 	
 	setTimeout(function () {
 		setTimeout(function () {
+			$(".page_banner_mask .p0").animate({"top":"0","opacity":"1"});
+		}, 400);
+		setTimeout(function () {
 			$(".page_banner_mask .p1").animate({"top":"0","opacity":"1"});
 		}, 400);
 		setTimeout(function () {
 			$(".page_banner_mask .p2").animate({"top":"0","opacity":"1"});
 		}, 800);
 		setTimeout(function () {
+			$(".page_banner_mask .form").animate({"top":"0","opacity":"1"});
+		}, 1200);
+		setTimeout(function () {
 			$(".page_banner_mask .btn").animate({"top":"0","opacity":"1"});
 		}, 1200);
 		setTimeout(function () {