hf pay page

src/main/ui/static/templates/hf/css/gateway_payment.css

@@ -0,0 +1,213 @@
+body {
+	color: #333333;
+	font-family: PingFang-SC-Regular;
+	font-size: 14px;
+	letter-spacing: 0px;
+}
+
+ul, li {
+	padding: 0px;
+	margin: 0px;
+	list-style: none;
+}
+
+input::-webkit-input-placeholder {
+    color: #C0C0C0;
+}
+input::-moz-placeholder {   /* Mozilla Firefox 19+ */
+    color: #C0C0C0;
+}
+input:-moz-placeholder {    /* Mozilla Firefox 4 to 18 */
+    color: #C0C0C0;
+}
+input:-ms-input-placeholder {  /* Internet Explorer 10-11 */ 
+    color: #C0C0C0;
+}
+
+.my-input {
+	border-top: 0;
+	border-right: 0;
+	border-bottom: 1px solid #EBEBEB;
+	border-left: 0;
+	padding: 10px 0;
+	width: 100%;
+	outline: none;
+}
+
+.tab-item {
+  position:relative;
+  display: inline-block;
+  font-size: 16px;
+  width:100px;
+  background:#fff;
+  padding: 10px 0px;
+  text-align: center;
+  border-bottom: 1px solid #EBEBEB;
+  margin-right: -4px;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+.change-color {
+	color: #FF6600;
+	border-bottom: 1px solid #FF6600;
+}
+
+.s1{
+  position:absolute;
+  bottom:-1px;
+  left:45px;
+  width:0px;
+  height:0px;
+  border-top:5px solid transparent;
+  border-left:5px solid transparent;
+  border-right:5px solid transparent;
+  border-bottom:5px solid #EBEBEB;
+}
+
+.s1-change-color {
+	border-bottom:5px solid #FF6600;
+}
+ 
+.s2{
+  position:absolute;
+  bottom:-3px;
+  left:45px;
+  width:0px;
+  height:0px;
+  border-top:5px solid transparent;
+  border-left:5px solid transparent;
+  border-right:5px solid transparent;
+  border-bottom:5px solid #fff;
+}
+
+.bg-pc {
+	width: 100%;
+	height: 100%;
+	background: url("../assets/bg_pc.png") no-repeat center transparent;
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: box;
+	box-pack: center;
+	box-orient: vertical;
+	display: -webkit-box;
+	-webkit-box-pack: center;
+	-webkit-box-orient: vertical;
+}
+.main {
+	width: 700px;
+	padding: 40px 0 0 70px;
+	background-color: #FFFFFF;
+	margin: 0 auto;
+}
+
+.main-logo {
+	width: 770px;
+	height: 47px;
+	margin: 0 auto;
+	margin-bottom: 32px;
+}
+
+.main-left {
+	width: 300px;
+	display: inline-block;
+	margin-right: 50px;
+	vertical-align: top;
+} 
+
+.input-item {
+	margin-bottom: 12px;
+}
+
+.commit-button {
+	background-color: #FF6600;
+	color: #FFFFFF;
+	width: 100%;
+	text-align: center;
+	padding: 10px 0; 
+	font-size: 17px;
+	border: none;
+	border-radius: 2px;
+	margin: 20px 0;
+	box-shadow: 0 2px 11px 0;
+	cursor: pointer;
+	outline: none;
+}
+
+select {
+     appearance:none;  
+    -moz-appearance:none;  
+    -webkit-appearance:none;
+     background: url("../assets/down.png") no-repeat scroll right center transparent;
+}
+
+.select-placeholder {
+	position: absolute; 
+	top: 10px;
+	color: #C0C0C0;
+}
+
+.main-middle {
+	width: 2px;
+	height: 306px;
+	border: 1px dashed #EBEBEB;
+	display: inline-block;
+	box-sizing: border-box;
+	vertical-align: top;
+	margin: 47px 40px 0 0;
+}
+.main-right {
+	vertical-align: top;
+	display: inline-block;
+	text-align: center;
+	padding-top: 72px;
+}
+.main-right-top {
+	background: #FFFFFF;
+	border: 1px solid #EBEBEB;
+	box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.30);
+	width: 80px;
+	height: 80px;
+	border-radius: 80px;
+	text-align: center;
+	margin: 0 auto;
+	line-height: 80px;
+}
+.main-right-top img {
+	width: 35px;
+	height: 40px;
+	display: inline-block;
+	vertical-align: middle;
+}
+.royalpay {
+	font-size: 16px;
+	letter-spacing: 0px;
+	margin-top: 12px;
+}
+.description {
+	margin-top: 162px;
+	letter-spacing: 0px;
+}
+
+.my-modal {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	background-color: black;
+	opacity:0.80;
+	z-index: 111;
+}
+.qrcode {
+	position: absolute;
+	z-index: 112;
+	left: 0;
+	right: 0;
+	top: 20%;
+	text-align: center;
+}
+
+.qrcode img {
+	width: 200px;
+	height: 200px;
+}

src/main/ui/static/templates/hf/gateway_payment.js

@@ -0,0 +1,32 @@
+$("#bank-li").hide();
+var currentIndex = 0;
+$(".main .main-left ul li.tab-item").click(function () {
+    var selectedIndex = $(this).index();
+    $(this).addClass("change-color").siblings().removeClass("change-color");
+    $(this).children(".s1").addClass("s1-change-color");
+    $(this).siblings().children(".s1").removeClass("s1-change-color");
+    if (selectedIndex == 2) {
+        $("#bank-li").show();
+    } else {
+        $("#bank-li").hide();
+    }
+    if (selectedIndex != currentIndex) {
+        $("#payment-form")[0].reset();
+        $(".select-placeholder").show();
+        currentIndex = selectedIndex;
+    }
+});
+
+$("#modal-close").click(function () {
+    $(".my-modal").hide();
+    $(".qrcode").hide();
+});
+
+var select = $("select#bank-select,#product-category-select");
+if (select.val() != "")
+    select.prev().hide();
+select.bind("change", function() {
+    if($(this).val() != "") {
+        $(this).prev().hide();
+    }
+})