Browse Source

新 页面

yuhaitao14 7 years ago
parent
commit
79a98f601a

+ 62 - 0
shop/src/main/java/com/zskk/shop/controller/h5/H5AppointmentController.java

@@ -0,0 +1,62 @@
+/**
+* @版权信息 (@copyright Copyright 2017-XXXX JDJR.COM All Right Reserved);
+* @see
+* @author 于海涛 京东金融【技术研发部-证券及营销平台研发部-营销平台研发部】
+* @version 1.0
+* @date 2018年6月30日
+*/
+
+package com.zskk.shop.controller.h5;
+
+import java.util.List;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.RequestMapping;
+
+import com.alibaba.fastjson.JSON;
+import com.zskk.shop.controller.AbstractController;
+import com.zskk.shop.controller.bean.UserBean;
+import com.zskk.shop.dao.entry.BuyOrderItem;
+import com.zskk.shop.dao.entry.FamilyPeople;
+import com.zskk.shop.exception.ErrorConstant;
+import com.zskk.shop.exception.ZSKKException;
+import com.zskk.shop.service.BuyOrderService;
+import com.zskk.shop.service.FamilyPeopleService;
+import com.zskk.shop.service.GoodService;
+
+@RequestMapping("/h5/appointment")
+@Controller
+public class H5AppointmentController extends AbstractController  {
+
+	@Autowired
+	private BuyOrderService buyOrderService;
+	
+	@Autowired
+	private GoodService goodService;
+	
+	@Autowired
+	private FamilyPeopleService familyPeopleService;
+	
+	@RequestMapping("/goappointment/{bid}/{itemid}")
+	public String goappointment(Model model, @PathVariable("bid") Long bid, @PathVariable("itemid") Long itemid){
+		UserBean userBean 			= this.getUser();
+		BuyOrderItem item			= buyOrderService.queryItem(itemid);
+		if (item == null){
+			throw new ZSKKException(ErrorConstant.PARAM_ERROR);
+		}
+		if (!item.getBid().equals(bid)){
+			throw new ZSKKException(ErrorConstant.PARAM_ERROR);
+		}
+		List<FamilyPeople> peoples	= familyPeopleService.queryMyPeoples(userBean.getUserid());
+		model.addAttribute("good", goodService.queryOneGoodBase(item.getGid()));
+		model.addAttribute("peoples", peoples);
+		model.addAttribute("peoplesJSON", JSON.toJSONString(peoples));
+		model.addAttribute("bid", bid);
+		model.addAttribute("itemid", itemid);
+		this.initUser(model);
+		return "/h5/appointment";
+	}
+}

+ 8 - 4
shop/src/main/java/com/zskk/shop/controller/h5/H5BuyOrderController.java

@@ -25,11 +25,12 @@ import com.zskk.shop.dao.entry.BuyOrder;
 import com.zskk.shop.dao.entry.GoodBase;
 import com.zskk.shop.dao.entry.GoodPrice;
 import com.zskk.shop.service.BuyOrderService;
+import com.zskk.shop.service.FamilyPeopleService;
 import com.zskk.shop.service.GoodService;
 import com.zskk.shop.service.UserCenterService;
 
 @Controller
-@RequestMapping("/h5")
+@RequestMapping("/h5/buy")
 public class H5BuyOrderController extends AbstractController{
 
 	@Autowired
@@ -41,13 +42,16 @@ public class H5BuyOrderController extends AbstractController{
 	@Autowired
 	private UserCenterService userCenterService;
 	
+	@Autowired
+	private FamilyPeopleService familyPeopleService;
+	
 	/**
 	 * 购买
 	 * @param gid
 	 * @param num
 	 * @return
 	 */
-	@RequestMapping("/buy/{gid}")
+	@RequestMapping("/{gid}")
 	public String buy(Model model, @PathVariable("gid") Integer gid){
 		UserBean userBean 	= this.getUser();
 		String uid 			= userBean.getUserid();
@@ -73,12 +77,12 @@ public class H5BuyOrderController extends AbstractController{
 		}
 	}
 	
-	@RequestMapping("/buy/paySuccess")
+	@RequestMapping("/paySuccess")
 	public String paySuccess(Model model){
 		return "/h5/";
 	}
 	
-	@RequestMapping("/buy/mypayedorders")
+	@RequestMapping("/mypayedorders")
 	public String myorders(Model model){
 		UserBean userBean			= this.getUser();
 		String uid 					= userBean.getUserid();

+ 1 - 1
shop/src/main/java/com/zskk/shop/controller/pc/AppointmentController.java

@@ -66,7 +66,7 @@ public class AppointmentController extends AbstractController {
 		List<String> tjCheckList	= tjCenterService.getDJDetail(good.getPackageid());
 		List<FamilyPeople> peoples	= familyPeopleService.queryMyPeoples(userBean.getUserid());
 		
-		model.addAttribute("good", goodService.queryOneGoodBase(item.getGid()));
+		model.addAttribute("good", good);
 		model.addAttribute("checklist", tjCheckList);
 		model.addAttribute("peoples", peoples);
 		model.addAttribute("peoplesJSON", JSON.toJSONString(peoples));

+ 62 - 0
shop/src/main/resource/templates/h5/appointment.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>预约体检</title>
+<meta name="viewport"
+	content="width=device-width, initial-scale=1.0, user-scalable=no" />
+<link href="/h5/style/style.css" rel="stylesheet" />
+</head>
+
+<body>
+	<div class="v-form">
+		<dl>
+			<dt>体检人</dt>
+			<dd>
+				<div>
+					<div>
+						<input type="radio" name="people" value="0"/>
+						<label>新建体检人</label>
+					</div>
+					<div th:each="people : ${peoples}">
+						<input type="radio" name="people" th:attr="value=${people.id}"/><label th:text="${people.name}"></label> 
+					</div>
+				</div>
+			</dd>
+		</dl>
+		<dl>
+			<dt>性别</dt>
+			<dd>
+				<div>
+					<input name="sex" type="radio" value="1" /><label>男</label>
+					<input name="sex" type="radio" value="0" /><label>女</label>
+				</div>
+			</dd>
+		</dl>
+		<dl>
+			<dt>身份证号</dt>
+			<dd>
+				<div>
+					<input name="" type="text" class="txt" />
+				</div>
+			</dd>
+		</dl>
+		<dl>
+			<dt>手机号</dt>
+			<dd>
+				<div>
+					<input name="" type="text" class="txt" />
+				</div>
+			</dd>
+		</dl>
+		<dl>
+			<dt>体检时间</dt>
+			<dd>
+				<div>
+					<input name="" type="date" class="txt" />
+				</div>
+			</dd>
+		</dl>
+	</div>
+</body>
+</html>

+ 1 - 1
shop/src/main/resource/templates/h5/index.html

@@ -33,7 +33,7 @@
     	<li><a href="##"><img src="style/index-tj-icon.png" /><p>体检套餐</p></a></li>
         <li><a href="##"><img src="style/index-yx-icon.png" /><p>影像检查</p></a></li>
         <li><a href="##"><img src="style/index-bg-icon.png" /><p>报告查询</p></a></li>
-        <li><a href="##"><img src="style/index-yy-icon.png" /><p>我的预约</p></a></li>
+        <li><a href="/h5/buy/mypayedorders"><img src="style/index-yy-icon.png" /><p>我的预约</p></a></li>
     </ul>
     <div class="line-10-EEE"></div>
 	<!--热销-->

+ 29 - 23
shop/src/main/resource/templates/h5/mypayedorders.html

@@ -2,33 +2,39 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-<title>昆仑医疗</title>
-<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
+<title>商城订单</title>
+<meta name="viewport"
+	content="width=device-width, initial-scale=1.0, user-scalable=no" />
 <link href="/h5/style/style.css" rel="stylesheet" />
 <script src="/h5/js/jquery-2.1.1.min.js"></script>
 <script src="/h5/js/nav.js"></script>
 </head>
 
-<body>
-	<!--热销-->
-    <div class="v-list">
-        <a href="#">
-            <div class="img l mr10"><img src="" /></div>
-            <dl>
-                <dt>白领高级体检套餐</dt>
-                <dd>重点检查心检查心脏脏、胰</dd>
-                <span class="price-new l"><em>¥</em>500</span>
-            </dl>
-        </a>
-    </div>
-	<!--底部-->
-    <div style="height:60px; "></div>
-	<table class="n-tab">
-    	<tr>
-        	<td><a href="/h5/index" class="n-1-c">首页</a></td>
-            <td><a href="#" class="n-2">报告</a></td>
-            <td><a href="#" class="n-3">我的</a></td>
-        </tr>
-    </table>
+<body style="background-color: #EEE;">
+	<div class="shopOrder">
+		<div th:each="order : ${orders}">
+			<div class="date" th:text="${order.ctime}"></div>
+			<div th:each="item : ${order.items}">
+				<a href="#" class="li"> 
+					<img th:attr="src=${item.good.icon}"/>
+					<div class="price" th:text="'¥' + ${item.totalPrice}"></div>
+					<div class="title">
+						<h3 th:text="${item.good.name}">
+						</h3>
+						<span></span>
+					</div>
+				</a>
+				<p>
+					<a th:if="${item.fa == null}" th:attr="href='/h5/appointment/goappointment/'+${item.bid}+'/'+${item.id}" class="btnBlue" >预约体检</a>
+                    <a th:if="${item.fa != null and item.fa.tjstatus eq -3}" href="#" class="btnBlue" >已退款</a>
+                    <a th:if="${item.fa != null and item.fa.tjstatus eq -2}" href="#" class="btnBlue" >已取消</a>
+                    <a th:if="${item.fa != null and item.fa.tjstatus eq -1}" th:attr="href='/h5/appointment/gochangeappointment/'+${item.fa.aid}" class="btnBlue" >改约</a>
+                    <a th:if="${item.fa != null and item.fa.tjstatus eq 0}" href="#" class="btnBlue" >已登记</a>
+                    <a th:if="${item.fa != null and item.fa.tjstatus eq 1}" href="#" class="btnBlue" >体检结束(报告生成中)</a>
+                    <a th:if="${item.fa != null and item.fa.tjstatus eq 2}" th:attr="href=${item.fa.reportUrl}" class="btnBlue" target="_blank" >查看报告</a>
+				</p>
+			</div>
+		</div>
+	</div>
 </body>
 </html>

+ 2 - 2
shop/src/main/resource/templates/mypayedorders.html

@@ -3,8 +3,8 @@
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>黑龙江昆仑盛和安体检中心</title>
-<link rel="stylesheet" type="text/css" href="../style/common.css"></link>
-<link rel="stylesheet" type="text/css" href="../style/user.css"></link>
+<link rel="stylesheet" type="text/css" href="/style/common.css"></link>
+<link rel="stylesheet" type="text/css" href="/style/user.css"></link>
 <!--[if lt IE 9]> 
 <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
 <![endif]--><!--窗口自适应适配低端IE-->

BIN
shop/static/h5/style/class-icon.png


BIN
shop/static/h5/style/index-bg-icon.png


BIN
shop/static/h5/style/index-tj-icon.png


BIN
shop/static/h5/style/index-yx-icon.png


BIN
shop/static/h5/style/index-yy-icon.png


BIN
shop/static/h5/style/logo.png


BIN
shop/static/h5/style/return.png


+ 28 - 11
shop/static/h5/style/style.css

@@ -45,8 +45,8 @@ a{ text-decoration:none; }
 .v-list dl{ display:block; }
 .v-list dt{ font-size:1rem; color:#333; margin-bottom:5px; white-space:nowrap; }
 .v-list dd{ height:2rem; font-size:.8rem; color:#999; margin-bottom:5px; line-height:1rem; text-align:justify; text-justify:inter-ideograph; }
-.v-list .img{ width:70px; overflow:hidden; }
-.v-list .img img{ width:70px; height:70px; }
+.v-list .img{ width:100px; overflow:hidden; }
+.v-list .img img{ width:100px; height:70px; }
 .v-list .price-new{ color:#D83F31; font-size:1rem; margin-right:20px; line-height:1rem; }
 .v-list em{ font-size:.7rem; margin-right:4px; }
 /*页脚*/
@@ -54,11 +54,11 @@ a{ text-decoration:none; }
 .n-tab td{ border:none; width:33.3%; }
 .n-tab .n-1, .n-tab .n-2, .n-tab .n-3, .n-tab .n-1-c, .n-tab .n-2-c, .n-tab .n-3-c{ width:100%; height:20px; line-height:18px; display:inline-block; text-align:center; font-size:12px; padding-top:27px; color:#999; }
 .n-tab .n-1{ background:url(tab-n-1.png) no-repeat center top; background-size:26px; }
-.n-tab .n-1-c{ background:url(tab-n-1-c.png) no-repeat center top; color:#D83F31; background-size:26px; }
+.n-tab .n-1-c{ background:url(tab-n-1-c.png) no-repeat center top; color:#999; background-size:26px; }
 .n-tab .n-2{ background:url(tab-n-2.png) no-repeat center top; background-size:26px; }
-.n-tab .n-2-c{ background:url(tab-n-2-c.png) no-repeat center top; color:#D83F31; background-size:26px; }
+.n-tab .n-2-c{ background:url(tab-n-2-c.png) no-repeat center top; color:#999; background-size:26px; }
 .n-tab .n-3{ background:url(tab-n-3.png) no-repeat center top; background-size:26px; }
-.n-tab .n-3-c{ background:url(tab-n-3-c.png) no-repeat center top; color:#D83F31; background-size:26px; }
+.n-tab .n-3-c{ background:url(tab-n-3-c.png) no-repeat center top; color:#999; background-size:26px; }
 
 
 /*套餐详情页*/
@@ -91,9 +91,26 @@ a{ text-decoration:none; }
 .v-bottom div{ padding:5px 10px; height:40px; }
 .v-bottom div button{ width:100%; height:40px; border:none; background-color:#D83F31; border-radius:20px; color:#FFF; font-size:1rem; -webkit-appearance:none; }
 
-/*预约体检*/
-.v-form{ }
-.v-form dl{ height:50px; padding:0 10px; border-bottom:1px solid #EEE; }
-.v-form dt{ width:100px; line-height:50px; font-size:1rem; color:#333; float:left; }
-.v-form dd{ margin-left:100px; }
-.v-form dd .txt{ width:100%; border:none; height:48px; font-size:1.2rem; color:#000; -webkit-appearance:none; }
+/*180630新增——商城订单*/
+.shopOrder{}
+.shopOrder .date{ height:30px; line-height:30px; padding:0 15px; background-color:#EEE; color:#AAA; }
+.shopOrder .li{ display:block; overflow:hidden; padding:15px; border-bottom:.5px solid #EEE; background-color:#FFF; }
+.shopOrder img{ height:50px; float:left; margin-right:15px; }
+.shopOrder .title{ width:80%; }
+.shopOrder .title h3{ margin-bottom:5px; font-size:.9rem; color:#666;overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
+.shopOrder .title span{ color:#BBB; }
+.shopOrder .price{ float:right; line-height:50px; color:#666; }
+.shopOrder p{ border-top:.5px solid #EEE; overflow:hidden; padding:5px 15px; background-color:#FFF; text-align:right; }
+.shopOrder p span{ color:#0DC6E4; padding:2px 0; display:inline-block; }
+.shopOrder p a{ display:inline-block; margin-left:10px; border-radius:3px; font-size:1rem;padding:5px 10px; }
+.shopOrder a.btnRed{ background-color:#E05656; border:1px solid #E05656; color:#FFF; }
+.shopOrder a.btnBlue{ background-color:#0DC6E4; border:1px solid #0DC6E4; color:#FFF; }
+.shopOrder a.cancel{ background-color:#FFF; border:1px solid #CCC; color:#999; }
+
+/*180630新增——预约体检*/
+.
+
+
+
+
+

BIN
shop/static/h5/style/tab-n-1-c.png


BIN
shop/static/h5/style/tab-n-2-c.png


BIN
shop/static/h5/style/tab-n-3-c.png


+ 48 - 0
shop/static/h5/新增-商城订单.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>商城订单</title>
+<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
+<link href="style/style.css" rel="stylesheet" />
+<script src="js/jquery-2.1.1.min.js"></script>
+<script src="js/nav.js"></script>
+</head>
+
+<body style="background-color:#EEE; ">
+	<div class="shopOrder">
+    	<!--begin-->
+        <div class="date">2018-02-07</div>
+        <a href="#" class="li">
+            <img src="images/test2.jpg" />
+            <div class="price">¥600</div>
+            <div class="title"><h3>大师傅士大大师傅士大夫大大师傅士大夫大师师傅夫大大师傅士大夫大师师傅<!--控制在20个汉字内--></h3><span>×1</span></div>
+        </a>
+        <a href="#" class="li">
+            <img src="images/test2.jpg" />
+            <div class="price">¥600</div>
+            <div class="title"><h3>大师傅士大大师傅士大夫大大师傅士大夫大师师傅夫大大师傅士大夫大师师傅<!--控制在20个汉字内--></h3><span>×1</span></div>
+        </a>
+        <p><button class="cancel">取消订单</button><button class="btnRed">立即支付</button></p>
+        <!--end-->
+        <!--begin-->
+        <div class="date">2018-02-06</div>
+        <a href="#" class="li">
+            <img src="images/test2.jpg" />
+            <div class="price">¥600</div>
+            <div class="title"><h3>大师傅士大大师傅士大夫大大师傅士大夫大师师傅夫大大师傅士大夫大师师傅<!--控制在20个汉字内--></h3><span>×1</span></div>
+        </a>
+        <p><a href="###" class="btnBlue">立即预约</a></p>
+        <!--end-->
+        <!--begin-->
+        <div class="date">2018-02-05</div>
+        <a href="#" class="li">
+            <img src="images/test2.jpg" />
+            <div class="price">¥600</div>
+            <div class="title"><h3>大师傅士大大师傅士大夫大大师傅士大夫大师师傅夫大大师傅士大夫大师师傅<!--控制在20个汉字内--></h3><span>×1</span></div>
+        </a>
+        <p><span>预约时间:2018年8月1日 10:00</span></p>
+        <!--end-->
+    </div>
+</body>
+</html>

+ 112 - 0
shop/static/h5/新增-微信绑定.html

@@ -0,0 +1,112 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>注册信息</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
+<style>
+html{ font-size:62.5%; }
+body{ background-color:#F4F4F4; position:relative; }
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,textarea{margin:0;padding:0;border:0;font-size:100%; font-weight:normal; font-style:normal; vertical-align:baseline;  font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;}
+article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
+body{line-height:1;max-width:640px;min-width:320px;margin:0 auto !important}
+ol,ul{list-style:none}
+blockquote,q{quotes:none}
+blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
+table{border-collapse:collapse;border-spacing:0}*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}
+html,body{width:100%; height:100%; }
+
+::-webkit-input-placeholder { /* WebKit browsers */
+    color:#CCC; font-size:1rem;
+}
+:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+    color:#CCC; font-size:1rem;
+}
+::-moz-placeholder { /* Mozilla Firefox 19+ */
+    color:#CCC; font-size:1rem;
+}
+:-ms-input-placeholder { /* Internet Explorer 10+ */
+    color:#CCC; font-size:1rem;
+}
+
+.reg_bg{ width:100%; height:160px; background-image:linear-gradient(to bottom right, #F4E1E1, #65D8EB); }
+.box{ width:100%; height:100%; position:absolute; left:0; top:0; }
+.reg{ margin:20px 15px; }
+.reg .header{ height:34px; }
+.reg .header img{ height:34px; }
+.txt_box{ padding:0 15px; overflow:hidden; margin-top:20px; background-color:#FFF; border-radius:6px; }
+.txt_box .txt{ width:100%; height:30px; font-size:1rem; line-height:30px; margin:15px 0; border:none; padding:0; }
+.txt_box .line{ width:100%; height:.5px; background-color:#DDD; }
+.fs{ text-align:right; font-size:1rem; color:#999; margin-top:40px; }
+.next{ width:100%; height:50px; margin-top:20px; background-color:#5ACEE3; color:#FFF; line-height:50px; border-radius:6px; text-align:center; border:none; font-size:1rem; }
+</style>
+
+
+<script type="text/javascript">
+	function setTab ( i )
+	{
+		selectTab(i);
+	}
+	
+	function selectTab ( i )
+	{
+		switch(i){
+			case 1:
+			document.getElementById("TabCon1").style.display="block";
+			document.getElementById("TabCon2").style.display="none";
+			break;
+			case 2:
+			document.getElementById("TabCon1").style.display="none";
+			document.getElementById("TabCon2").style.display="block";
+			break;
+		}
+	}
+</script>
+
+
+</head>
+
+<body>
+	<div class="reg_bg"></div>
+    <div class="box">
+    	<div class="reg">
+        	<form>
+                <div id="TabCon1">
+                    <div class="header"><img src="logo.png" /></div>
+                    <div class="txt_box">
+                        <input name="" type="text" class="txt" autofocus="autofocus" placeholder="用户名(6~18位字符,字母、数字、下划线)" />
+                        <div class="line"></div>
+                        <input name="" type="password" class="txt" placeholder="密码(6~16个字符,区分大小写)" />
+                        <div class="line"></div>
+                        <input name="" type="tel" class="txt" placeholder="手机号码" />
+                    </div>
+                    <div id="font2" class="tab2 next" onClick="setTab(2);">提交</div>
+                </div>
+                <div id="TabCon2" style="display:none">
+                    <div id="font1" class="header"><img src="return.png" class="tab1" onClick="setTab(1);" /></div>
+                        <div class="txt_box">
+                        <input name="" type="text" class="txt" placeholder="请输入验证码" />
+                    </div>
+                    <div class="fs">59s<!--倒计时60s后文案——点此重新发送--></div>
+                    <button class="next">完成</button>
+                </div>
+            </form>
+        </div>
+    </div>
+    
+    
+    
+    
+    
+    
+
+
+
+    
+    
+    
+    
+    
+    
+</body>
+</html>