Merge remote-tracking branch 'origin/master'

# Conflicts:
#	Front-end/首页/index.html
master
jyx 7 years ago
commit 291330e7f4

@ -0,0 +1,13 @@
<component name="libraryTable">
<library name="Maven: com.alibaba:fastjson:1.2.47">
<CLASSES>
<root url="jar://$MAVEN_REPOSITORY$/com/alibaba/fastjson/1.2.47/fastjson-1.2.47.jar!/" />
</CLASSES>
<JAVADOC>
<root url="jar://$MAVEN_REPOSITORY$/com/alibaba/fastjson/1.2.47/fastjson-1.2.47-javadoc.jar!/" />
</JAVADOC>
<SOURCES>
<root url="jar://$MAVEN_REPOSITORY$/com/alibaba/fastjson/1.2.47/fastjson-1.2.47-sources.jar!/" />
</SOURCES>
</library>
</component>

@ -302,9 +302,8 @@
<form action="/login" method="post">
<p class="form"><input type="text" id="userName" placeholder="账号"></p>
<p class="form"><input type="password" id="userPwd" placeholder="密码"></p>
<p class="form confirm"><input type="password" id="userPwd1" placeholder="确认密码"></p>
<input type="submit" value="登录" class="btn" name="action">
<input type="submit" value="注册" class="btn" name="action">
<input type="button" value="注册" class="btn" onclick="location.href='Login1.html'">
</form>
<a href="#">忘记密码</a>
</span>

@ -0,0 +1,443 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/x-icon" href="#" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>账号登录</title>
<style>
*{
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
@font-face {
font-family: 'neo';
src: url("NEOTERICc.ttf")/*tpa=http://www.17sucai.com/preview/384665/2018-12-28/login/font/NEOTERICc.ttf*/;
}
input:focus{
outline: none;
}
.form input{
width: 300px;
height: 30px;
font-size: 18px;
background: none;
border: none;
border-bottom: 1px solid #fff;
color: #fff;
margin-bottom: 20px;
}
.form input::placeholder{
color: rgba(255,255,255,0.8);
font-size: 18px;
font-family: "neo";
}
.confirm{
height: 0;
overflow: hidden;
transition: .25s;
}
.btn{
width:140px;
height: 40px;
border: 1px solid #fff;
background: none;
font-size:20px;
color: #fff;
cursor: pointer;
margin-top: 25px;
font-family: "neo";
transition: .25s;
}
.btn:hover{
background: rgba(255,255,255,.25);
}
#login_wrap{
width: 980px;
min-height: 500px;
border-radius: 10px;
font-family: "neo";
overflow: hidden;
box-shadow: 0px 0px 120px rgba(0, 0, 0, 0.25);
position: fixed;
top: 50%;
right: 50%;
margin-top: -250px;
margin-right: -490px;
}
#login{
width: 50%;
height: 100%;
min-height: 500px;
background: linear-gradient(45deg, #9a444e, #e06267);
position: relative;
float: right;
}
#login #status{
width: 90px;
height: 35px;
margin: 40px auto;
color: #fff;
font-size: 30px;
font-weight: 600;
position: relative;
overflow: hidden;
}
#login #status i{
font-style: normal;
position: absolute;
transition: .5s
}
#login span{
text-align: center;
position: absolute;
left: 50%;
margin-left: -150px;
top: 52%;
margin-top: -140px;
}
#login span a{
text-decoration: none;
color: #fff;
display: block;
margin-top: 80px;
font-size: 18px;
}
#bg{
background: linear-gradient(45deg, #211136, #bf5853);
height: 100%;
}
/*绘图*/
#login_img{
width: 50%;
min-height: 500px;
background: linear-gradient(45deg, #221334, #6c3049);
float: left;
position: relative;
}
#login_img span{
position: absolute;
display: block;
}
#login_img .circle{
width: 200px;
height: 200px;
border-radius: 50%;
background: linear-gradient(45deg, #df5555, #ef907a);
top: 70px;
left: 50%;
margin-left: -100px;
overflow: hidden;
}
#login_img .circle span{
width: 150px;
height: 40px;
border-radius: 50px;
position: absolute;
}
#login_img .circle span:nth-child(1){
top: 30px;
left: -38px;
background: #c55c59;
}
#login_img .circle span:nth-child(2){
bottom: 20px;
right: -35px;
background: #934555;
}
#login_img .star span{
background: radial-gradient(#fff 10%,#fff 20%,rgba(72, 34, 64, 0));
border-radius: 50%;
box-shadow: 0 0 7px #fff;
}
#login_img .star span:nth-child(1){
width: 15px;
height: 15px;
top: 50px;
left: 30px;
}
#login_img .star span:nth-child(2){
width: 10px;
height: 10px;
left: 360px;
top: 80px;
}
#login_img .star span:nth-child(3){
width: 5px;
height: 5px;
top: 400px;
left: 80px;
}
#login_img .star span:nth-child(4){
width: 8px;
height: 8px;
top: 240px;
left: 60px;
}
#login_img .star span:nth-child(5){
width: 4px;
height: 4px;
top: 20px;
left: 200px;
}
#login_img .star span:nth-child(6){
width: 4px;
height: 4px;
top: 460px;
left: 410px;
}
#login_img .star span:nth-child(7){
width: 6px;
height: 6px;
top: 250px;
left: 350px;
}
#login_img .fly_star span{
width: 90px;
height: 3px;
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.67), rgba(255,255,255,0));
background: -o-linear-gradient(left, rgba(255, 255, 255, 0.67), rgba(255,255,255,0));
background: linear-gradient(to right, rgba(255, 255, 255, 0.67), rgba(255,255,255,0));
transform: rotate(-45deg);
}
#login_img .fly_star span:nth-child(1){
top:60px;
left: 80px;
}
#login_img .fly_star span:nth-child(2){
top: 210px;
left: 332px;
opacity: 0.6;
}
#login_img p{
text-align: center;
color: #af4b55;
font-weight: 600;
margin-top: 365px;
font-size: 25px;
}
#login_img p i{
font-style: normal;
margin-right: 45px;
}
#login_img p i:nth-last-child(1){
margin-right: 0;
}
/*提示*/
#hint{
width: 100%;
line-height: 70px;
background: linear-gradient(-90deg, #9b494d, #bf5853);
text-align: center;
font-size: 25px;
color: #fff;
box-shadow: 0 0 20px #733544;
display: none;
opacity: 0;
transition: .5s;
position: absolute;
top: 0;
z-index: 999;
}
/* 响应式 */
@media screen and (max-width:1000px ) {
#login_img{
display: none;
}
#login_wrap{
width: 490px;
margin-right: -245px;
}
#login{
width: 100%;
}
}
@media screen and (max-width:560px ) {
#login_wrap{
width: 330px;
margin-right: -165px;
}
#login span{
margin-left: -125px;
}
.form input{
width: 250px;
}
.btn{
width: 113px;
}
}
@media screen and (max-width:345px ) {
#login_wrap {
width: 290px;
margin-right: -145px;
}
}
</style>
</head>
<body>
<div id="bg">
<div id="hint"><!-- 提示框 -->
<p>登录失败</p>
</div>
<div id="login_wrap">
<div id="login"><!-- 登录注册切换动画 -->
<div id="status">
<i style="top: 0"></i>
<i style="top: 35px"></i>
<i style="right: 5px"></i>
</div>
<span>
<form action="/login1" method="post">
<p class="form"><input type="text" id="userName" placeholder="账号"></p>
<p class="form"><input type="password" id="userPwd" placeholder="密码"></p>
<p class="form"><input type="password" id="userPwd1" placeholder="确认密码"></p>
<input type="button" value="登录" class="btn" onclick="location.href='Login.html'">
<input type="submit" value="确认注册" class="btn" name="action">
</form>
<a href="#">忘记密码</a>
</span>
</div>
<div id="login_img"><!-- 图片绘制框 -->
<span class="circle">
<span></span>
<span></span>
</span>
<span class="star">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</span>
<span class="fly_star">
<span></span>
<span></span>
</span>
<p id="title">CLOUD</p>
</div>
</div>
</div>
</body>
<script>
var onoff = true//根据此布尔值判断当前为注册状态还是登录状态
var confirm = document.getElementsByClassName("confirm")[0]
//var user = document.getElementById("user")
//var passwd = document.getElementById("passwd")
//var con_pass = document.getElementById("confirm-passwd")
//自动居中title
var name_c = document.getElementById("title")
name = name_c.innerHTML.split("")
name_c.innerHTML = ""
for (i = 0; i < name.length; i++)
if (name[i] != ",")
name_c.innerHTML += "<i>" + name[i] + "</i>"
//引用hint()在最上方弹出提示
function hint() {
let hit = document.getElementById("hint")
hit.style.display = "block"
setTimeout("hit.style.opacity = 1", 0)
setTimeout("hit.style.opacity = 0", 2000)
setTimeout('hit.style.display = "none"', 3000)
}
//回调函数
/*function submit(callback) {
//if (passwd.value == con_pass.value) {
let request = new XMLHttpRequest()
let url = ""
request.open("post", url, true)
let data = new FormData()
data.append("user", user.value)
data.append("passwd", passwd.value)
request.onreadystatechange = function() {
if (this.readyState == 4) {
callback.call(this, this.response)
//console.log(this.responseText)
}
}
request.send(data)
}*/
/*else {
hit.innerHTML = "两次密码不同"
hitting()
}
}*/
//注册按钮
function signin() {
let status = document.getElementById("status").getElementsByTagName("i")
let hit = document.getElementById("hint").getElementsByTagName("p")[0]
if (onoff) {
confirm.style.height = 51 + "px"
status[0].style.top = 35 + "px"
status[1].style.top = 0
onoff = !onoff
} else {
/*if (!/^[A-Za-z0-9]+$/.test(user.value))
hit.innerHTML = "账号只能为英文和数字"
else if (user.value.length < 6)
hit.innerHTML = "账号长度必须大于6位"
else if (passwd.value.length < 6)
hit.innerHTML = "密码长度必须大于6位"
else if (passwd.value != con_pass.value)
hit.innerHTML = "两次密码不相等"
else if (passwd.value = con_pass.value) {
submit(function(res) {
if (res == "exist")
hit.innerHTML = "该账号已存在"
else if (res == true) {
hit.innerHTML = "账号注册成功,两秒后自动刷新页面"
setTimeout("window.location.reload()", 2000)
} else if (res == false)
hit.innerHTML = "账号注册失败"
})
}
hint()*/
}
}
//登录按钮
function login() {
if (onoff) {
/*let request = new XMLHttpRequest()
let url = ""
request.open("post", url, true)
let data = new FormData()
data.append("user", user.value)
data.append("passwd", passwd.value)
request.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.responseText == false)
hint()
else
window.location.href = this.responseText;
}
}
request.send(data)*/
} else {
let status = document.getElementById("status").getElementsByTagName("i")
confirm.style.height = 0
status[0].style.top = 0
status[1].style.top = 35 + "px"
onoff = !onoff
}
}
</script>
</html>

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8"utf-8">
<meta charset="utf-8">
<meta http-equiv="Pragma" content="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<meta name="format-detection" content="telephone=yes"/>

@ -1,16 +1,4 @@
/*
<!--
* 17vip
* http://www.17sucai.com/pins/vip
*
* Copyright ,
*
*
*
-->
*/
html,body {
color: #333;
margin: 0;

@ -0,0 +1,120 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>产品展示</title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
<meta content="telephone=no" name="format-detection"/>
<link href="showstyle.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="show.js"></script>
</head>
<body>
<section class="aui-flexView">
<header class="aui-navBar aui-navBar-fixed">
<a href="javascript:;" class="aui-navBar-item">
<i class="icon icon-return"></i>
</a>
<div class="aui-center">
<span class="aui-center-title">产品列表</span>
</div>
<a href="javascript:location.reload();" class="aui-navBar-item" id="reload">
<i class="icon icon-sys"></i>刷新
</a>
</header>
<section class="aui-scrollView">
<div class="aui-pri-box">
<div class="aui-flex">
<div class="aui-pri-img">
<img src="vip.png">
</div>
<div class="aui-flex-box">
<h2>用户 <em>XXX</em></h2>
</div>
<div class="aui-pri-button"> </div>
</div>
</div>
<div class="aui-list-box" id="content">
<a href="javascript:;" class="aui-list-item">
<div class="aui-right-top"> </div>
<div class="aui-list-head" id="proname">产品1</div>
<div class="aui-flex">
<div class="aui-flex-box">
<h4>1111</h4>
</div>
<div class="aui-text-time"> </div>
<div class="aui-button-get">
<button id="apply", onclick="location='apply.html'">申请</button>
</div>
</div>
<div class="aui-dotted"> </div>
</a>
<a href="javascript:;" class="aui-list-item">
<div class="aui-right-top"> </div>
<div class="aui-list-head">产品2</div>
<div class="aui-flex">
<div class="aui-flex-box">
<h4>2222</h4>
</div>
<div class="aui-text-time"> </div>
<div class="aui-button-get">
<button>详情</button>
</div>
</div>
<div class="aui-dotted"> </div>
</a>
<a href="javascript:;" class="aui-list-item">
<div class="aui-right-top"> </div>
<div class="aui-list-head">产品3</div>
<div class="aui-flex">
<div class="aui-flex-box">
<h4>3333</h4>
</div>
<div class="aui-text-time"> </div>
<div class="aui-button-get">
<button>详情</button>
</div>
</div>
<div class="aui-dotted"> </div>
</a>
<a href="javascript:;" class="aui-list-item">
<div class="aui-right-top"> </div>
<div class="aui-list-head">产品4</div>
<div class="aui-flex">
<div class="aui-flex-box">
<h4>4444</h4>
</div>
<div class="aui-text-time"> </div>
<div class="aui-button-get">
<button>详情</button>
</div>
</div>
<div class="aui-dotted"> </div>
</a>
<a href="javascript:;" class="aui-list-item">
<div class="aui-right-top"> </div>
<div class="aui-list-head">产品5</div>
<div class="aui-flex">
<div class="aui-flex-box">
<h4>55555</h4>
</div>
<div class="aui-text-time"> </div>
<div class="aui-button-get">
<button>详情</button>
</div>
</div>
<div class="aui-dotted"> </div>
</a>
</div>
</section>
</section>
</body>
</html>

@ -0,0 +1,58 @@
var xmlHttp = null;//声明XMLHttpRequest
// 创建XMLHttpRequest对象
function createXMLHttpRequest() {
// 已创建XMLHttpRequest对象直接返回
if (xmlHttp != null)
return;
// 检测浏览器针对(FireFox、Chrome、Safari、Opera与IE7+)是否支持直接创建XMLHttpRequest
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
// 检测否是IE浏览器
} else if (window.ActiveXObject) {
try {
// IE6
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
// IE5
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
}
//发送请求
function sendRequest(){
// 创建异步发送请求对象
createXMLHttpRequest();
//非0、非null、true表示真
if (!xmlHttp){
alert("XMLHttpRequest对象创建失败!!");
return;
}
//Post方式发送请求
xmlHttp.open("POST","SearchServiceController",true);
xmlHttp.onreadystatechange=showProduct;
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//设置编码方式
xmlHttp.send("message="+str);
}
//回调函数
function showProduct(){
//判断就绪状态和响应状态码是否符合要求
if(xmlHttp.readyState==4&&xmlHttp.status==200) {
var jsonPro = xmlHttp.responseText;//接收服务器响应的文本
$("#content").html=null;
for(var i=0;i<jsonPro.length;i++){
var pro = jsonPro[i];
var str = '<a href="javascript:;" class="aui-list-item"><div class="aui-right-top"></div><div class="aui-list-head" id="proname">'+pro.productName+'</div><div class="aui-flex"><div class="aui-flex-box"><h4>'+pro.productNum+'</h4></div><div class="aui-text-time"></div><div class="aui-button-get"><button id="apply", onclick="location=\'apply.html\'">申请</button> </div></div><div class="aui-dotted"></div></a>';
}
$("#content").append(str);
}
}

@ -0,0 +1,462 @@
html,body {
color: #333;
margin: 0;
height: 100%;
font-family: "Myriad Set Pro","Helvetica Neue",Helvetica,Arial,Verdana,sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: normal;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
a {
text-decoration: none;
color: #000;
}
a, label, button, input, select {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
img {
border: 0;
}
body {
background: #edeff3;
color: #666;
}
html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, button, fieldset, form, input, legend, textarea, th, td {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #08acee;
}
button {
outline: 0;
}
img {
border: 0;
}
button,input,optgroup,select,textarea {
margin: 0;
font: inherit;
color: inherit;
outline: none;
}
li {
list-style: none;
}
a {
color: #666;
}
.clearfix::after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix {
}
.divHeight {
width: 100%;
height: 10px;
background: #f5f5f5;
position: relative;
overflow: hidden;
}
.r-line {
position: relative;
}
.r-line:after {
content: '';
position: absolute;
z-index: 0;
top: 0;
right: 0;
height: 100%;
border-right: 1px solid #D9D9D9;
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.b-line {
position: relative;
}
.b-line:after {
content: '';
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
border-bottom: 1px solid #e2e2e2;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.aui-flex {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
padding: 15px;
position: relative;
}
.aui-flex-box {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
min-width: 0;
font-size: 14px;
color: #333;
}
/* 必要布局样式css */
.aui-flexView {
width: 100%;
height: 100%;
margin: 0 auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.aui-scrollView {
width: 100%;
height: 100%;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
position: relative;
}
.aui-navBar {
height: 44px;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
z-index: 1002;
background-image: -webkit-gradient(linear,left top,right top,from(#39b9ff),to(#3579e4));
background-image: -webkit-linear-gradient(left,#39b9ff,#3579e4);
background-image: -moz-linear-gradient(left,#39b9ff,#3579e4);
background-image: linear-gradient(to right,#39b9ff,#3579e4);
background-color: #3579e4;
}
.aui-navBar-item {
height: 44px;
min-width: 25%;
-webkit-box-flex: 0;
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
padding: 0 0.9rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
font-size: 0.7rem;
white-space: nowrap;
overflow: hidden;
color: #fff;
position: relative;
}
.aui-navBar-item:first-child {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
margin-right: -25%;
font-size: 0.9rem;
font-weight: bold;
}
.aui-navBar-item:last-child {
-webkit-box-ordinal-group: 4;
-webkit-order: 3;
-ms-flex-order: 3;
order: 3;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.aui-center {
-webkit-box-ordinal-group: 3;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 44px;
width: 50%;
margin-left: 25%;
}
.aui-center-title {
text-align: center;
width: 100%;
white-space: nowrap;
overflow: hidden;
display: block;
text-overflow: ellipsis;
font-size: 0.95rem;
color: #fff;
}
.icon {
width: 20px;
height: 20px;
display: block;
border: none;
float: left;
background-size: 20px;
background-repeat: no-repeat;
}
.icon-return{
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAACcklEQVRoQ+3bPavWMBjG8f+FiogiCIIfQPEMLi4iHF8XJ6fzAVx1chGcdRZBBCfdxEkHBfGgIL7gmfwGLoKDguDo4HZLIEIox6ZP26RJtGtp2l/vKylpWvGPbSrBa2Z7gbvAEWBT0q1U17U42Mz2AK+B9QB5UtLHFOhFwX/BOuclSY+aAvdgvwFrkn42A+7B/gBOS/qUAuvazB7pHux34FxKbHZwBLsu6XOqyv5pN1uFS8Bmq3Ap2CxgM9sHvOo8Z925XZ/NEuOwmySNtMe+AU50+uYi2KQVLhGbDFwqNgm4ZOzs4NKxs4JrwM4GrgU7C7gm7GRwbdhJ4Bqxo8G1YkeBa8auDO7BfgXO5pjPTp0vD548RLCnJH2ZejE5jh8EbgU7KNItYaNgvyLwdpv5rOuz1cR48AsAM7sB3Oz0rWqxQyr80K0CdMD3JV3JMcCkOEfvoGVmZwAX6R2dk9+WdD3FBaVuMzpKm9kG8KQVdBTs7nhL6EHgAP0Y2FlzvAeDPfoi8Kxm9ErgFtArgwP0U2BXJ973JF1NPdJOaX8U2KMvAC9qQ48GB+jnwO5aKj0J7NHngZe1oCeDa0PPAg7Qm4D7DCncihrIZgN7tPvWyn1zVSx6VnAN6NnBAdqt+rvV/6LinQTs0W7V363+F4VOBi4VnRQcoN1Atr+EeCcHe/Rx4H0J6CzgAO369IElK50N7NHHgA9LorOCS0BnBwfod8DBTrwfSLo8Zb4bO3YRsEevAVvboO9Iuha78LH7FwNH0G3+8xCg3SPrUFC19v55CCNpZkfd7zvAYf8yYUPSr7Gx7Ttu0UinAMXa/A+O3aHa9/8GowEyTObF2IkAAAAASUVORK5CYII=');
}
.aui-pri-box{
width:100%;
height:6rem;
background-image: -webkit-gradient(linear,left top,right top,from(#39b9ff),to(#3579e4));
background-image: -webkit-linear-gradient(left,#39b9ff,#3579e4);
background-image: -moz-linear-gradient(left,#39b9ff,#3579e4);
background-image: linear-gradient(to right,#39b9ff,#3579e4);
background-color: #3579e4;
}
.aui-pri-img{
width:60px;
height:60px;
overflow:hidden;
margin-right:0.8rem;
border-radius:100%;
}
.aui-pri-img img{
width:60px;
height:60px;
display:block;
border:none;
}
.aui-flex-box h2{
color:#daeffe;
font-weight:normal;
font-size:0.95rem;
margin-bottom:0.3rem;
}
.aui-flex-box h3{
color:#daeffe;
font-weight:normal;
font-size:0.95rem;
}
.aui-flex-box h2 em{
font-style:normal;
color:#fff;
font-weight:bold;
}
.aui-flex-box h3 em{
color:#fff;
font-style:normal;
font-weight:bold;
}
.aui-pri-button button{
background:none;
border:1px solid #fff;
color:#fff;
border-radius:20px;
font-size:0.75rem;
padding:0.2rem 0.8rem;
}
.aui-list-box{
position:relative;
overflow:hidden;
padding:0 15px;
}
.aui-list-item{
margin-top:15px;
display:block;
border-radius:5px;
background:#fff;
position:relative;
overflow:hidden;
}
.aui-dotted{
padding:15px;
border-top:1px dashed #d8d9dc;
}
.aui-dotted h2{
color:#666666;
font-size:0.85rem;
font-weight:normal;
}
.aui-dotted h2 em{
color:#4080e8;
font-style:normal;
font-weight:bold;
}
.aui-dotted button{
background:none;
border:1px solid #fa5d5d;
color:#fa5d5d;
font-size:0.85rem;
margin-top:0.6rem;
padding:0.2rem 0.9rem 0.2rem 0.5rem;
position:relative;
}
.aui-dotted button:after{
content: '';
width: 0;
height: 0;
border-width: 5px 0px 5px 8px;
border-style: solid;
border-color: transparent transparent transparent #fa5d5d;
position: absolute;
top: 30%;
right: 4px;
border-radius: 1px;
}
.aui-list-head{
padding:15px 0 0 15px;
font-size:0.9rem;
}
.aui-flex-box h4{
color: #fa5d5d;
font-size:1.5rem;
font-weight:normal;
}
.aui-flex-box h5{
font-size:0.85rem;
font-weight:normal;
color:#999999;
}
.aui-button-get button{
background-image: -webkit-gradient(linear,left top,right top,from(#ff744a),to(#fc2943));
background-image: -webkit-linear-gradient(left,#ff744a,#fc2943);
background-image: -moz-linear-gradient(left,#ff744a,#fc2943);
background-image: linear-gradient(to right,#ff744a,#fc2943);
background-color: #fc2943;
color:#fff;
font-size:0.8rem;
border:none;
padding:0.3rem 0.8rem;
}
.aui-text-time{
padding-right:2rem;
}
.aui-text-time p {
font-size:0.85rem;
color:#999999;
}
.aui-right-top{
position:absolute;
right:0;
top: 0;
width:50px;
height:50px;
}
.aui-right-top img{
width:100%;
height:auto;
display:block;
border:none;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

@ -0,0 +1,300 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<title>填写信息</title>
<style>
html,
body {
margin: 0px;
height: 100%;
}
body {
background: #f1f1f1;
font-family: "Microsoft YaHei", "MicrosoftJhengHei", STHeiti, MingLiu;
}
.div_c_l {
float: left;
padding: 5px;
font-size: 15px;
font-weight: 500;
}
.div_c_l span {
line-height: 38px;
padding: 0 5px;
width: 60px;
}
.div_c_l img {
height: 30px;
margin: 2px;
padding: 0px 7px;
}
.div_c_r {
float: right;
padding: 5px;
width: calc(100% - 100px);
}
.div_c_r input {
border: 0px;
margin: 5px;
float: left;
line-height: 28px;
font-size: 15px;
text-align: right;
padding-right: 5px;
width: 100%;
outline: none;
text-align: left;
}
.div_c_r button {
width: 88px;
float: right;
background-color: #F2F2F2;
height: 28px;
padding: 4px 8px;
line-height: 20px;
font-size: 14px;
font-weight: 500;
margin: 5px 5px 0 0;
border: 1px solid #DBDBDB;
border-radius: 6px;
outline: none;
}
.div_f {
border-bottom: 1px solid #E8E8E8;
background-color: #fff;
}
.btn_1 {
border: none;
margin: 40px 6% 16px 6%;
width: 88%;
height: 1.8em;
background-color: #05a0e0;
border-radius: 4px;
font-size: 20px;
color: #FFFFFF;
outline: none;
-webkit-tap-highlight-color: transparent;
}
.div_b_l {
float: left;
margin-left: 6%;
padding: 5px;
width: calc(44% - 10px);
}
.div_b_r {
float: right;
margin-right: 6%;
padding: 5px;
width: calc(44% - 10px);
text-align: right;
}
.span_b {
font-size: 16px;
font-weight: 500;
color: #000;
padding: 0 2px;
float: left;
}
.span_br {
font-size: 16px;
font-weight: 500;
color: #05a0e0;
float: left;
}
input[type=checkbox] {
visibility: hidden;
}
.checkboxforget {
top: 0px;
float: left;
width: 20px;
height: 20px;
background: #05a0e0;
margin: 0 5px 0 0;
border-radius: 100%;
position: relative;
}
.checkboxforget label {
display: block;
width: 18px;
height: 18px;
border-radius: 100px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: 1px;
left: 1px;
z-index: 1;
background: #fff;
}
.checkboxforget input[type=checkbox]:checked+label {
background: #05a0e0;
width: 20px;
height: 20px;
top: 0px;
left: 0px;
}
.inp_radio {
float: left;
line-height: 48px;
}
input[type=radio] {
visibility: hidden;
}
.checkboxforget1 {
top: 13px;
float: left;
width: 20px;
height: 20px;
background: #AFAFAF;
margin: 0 5px 0 0;
border-radius: 100%;
position: relative;
/* -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.5);
box-shadow: 0px 1px 1px rgba(0,0,0,0.5);*/
}
.checkboxforget1 label {
display: block;
width: 18px;
height: 18px;
border-radius: 100px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: 1px;
left: 1px;
z-index: 1;
background: #fff;
/* -webkit-box-shadow:inset 0px 1px 1px rgba(0,0,0,0.5);
-moz-box-shadow:inset 0px 1px 1px rgba(0,0,0,0.5);
box-shadow:inset 0px 1px 1px rgba(0,0,0,0.5);*/
}
.checkboxforget1 input[type=radio]:checked+label {
background: #05a0e0;
width: 20px;
height: 20px;
top: 0px;
left: 0px;
}
.red {
color: #ff6600;
display: inline-block;
}
</style>
</head>
<body sroll="no" onclick="onload">
<form name="form1" onSubmit="return checkreg()" action="#" method="post">
<div class="div_f">
<div class="div_col" id="me">
<div class="div_c_l"><span> 贷款金额</span>
</div>
<div class="div_c_r"><input type="text" name="num" id="num" placeholder="还款金额">
<span style="float: right;margin-top: -30px;background:#fff" id="tish"></span></input>
</div>
</div>
<div style="clear:both"></div>
</div>
<div class="div_f">
<div class="div_col" id="me">
<div class="div_c_l"><span>卡号</span>
</div>
<div class="div_c_r"><input type="cardNum" name="cardNum" id="cardNum" onKeyDown="" value="" placeholder="卡号">
<span style="float: right;margin-top: -30px;background:#fff" id="ts"></span></input>
</div>
</div>
<div style="clear:both"></div>
</div>
<div class="div_f">
<div class="div_col" id="me">
<div class="div_c_l"><span style="width:70px;">姓名</span>
</div>
<div class="div_c_r"><input type=" " name="name" id="name" onKeyDown="" value="" placeholder="姓名(选填)">
<span style="float: right;margin-top: -30px;background:#fff" id="tishi"></span></input>
</div>
</div>
<div style="clear:both"></div>
</div>
<div class="div_f">
<div class="div_col" id="me">
<div class="div_c_l"><span style="width:70px;">手机号码</span>
</div>
<div class="div_c_r"><input type="tel" id="phone" name="phone" onkeydown="" id="phone" value="" placeholder="请输入手机号码">
<span style="float: right;margin-top: -30px;background:#fff" id="tss"></span>
</div>
</div>
<div style="clear:both"></div>
</div>
<div class="div_f">
<div class="div_col" id="me">
<div class="div_c_l"><span>还款方式</span>
</div>
<div class="div_c_r" style="padding: 0;">
<div style="margin-left: 28px;" class="inp_radio">
<div class="checkboxforget1">
<input type="radio" id="Remember1" name="way" id="" value="0" />
<label for="Remember1"></label>
</div>
等额本息
</div>
<div style="margin-left: 8px;" class="inp_radio">
<div class="checkboxforget1">
<input type="radio" id="Remember2" name="way" id="" value="1" />
<label for="Remember2"></label>
</div>
等额本金
</div>
</div>
</div>
<div style="clear:both"></div>
</div>
<button id="submit" class="btn_1">确定贷款</button>
</form>
<script type="text/javascript">
</script>
</body>
</html>

@ -7,10 +7,10 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta content="telephone=no" name="format-detection" />
<link href="style.css" tppabs="http://www.17sucai.com/preview/1089623/2018-06-08/form/css/style.css" rel="stylesheet" type="text/css">
<link href="bindingStyle.css" tppabs="http://www.17sucai.com/preview/1089623/2018-06-08/form/css/style.css" rel="stylesheet" type="text/css">
<title>注册判断</title>
<title>卡号绑定</title>
<script>
(function (doc, win) {
@ -42,14 +42,14 @@
</div>
<!--中间内容部分-->
<div id="content">
<div class="txt01">银行卡号<input type="number" id="mobile" name="mobile" class="text" value="" pattern="[0-9]*" tabindex="10" onChange="check_for_btn()" /></div>
<div class="txt01">银行卡号<input type="number" id="bankAccount" name="bankAccount" class="text" value="" pattern="[0-9]*" tabindex="10" onChange="check_for_btn()" /></div>
<div class="txt01">真实姓名<input type="text" id="realname" name="realname" class="text" tabindex="7" onChange="check_for_btn()" /></div>
<div class="txt01">身份证号
<input type="text" id="realname" pattern="[0-9]*" name="realname" class="text" tabindex="6"/>
<input type="text" id="idNum" pattern="[0-9]*" name="idNum" class="text" tabindex="6"/>
</div>
<div class="txt01">预留手机号<input type="number" id="realname" pattern="[0-9]*" name="realname" class="text1" tabindex="6"/></div>
<div class="txt01">预留手机号<input type="number" id="phoneNum" pattern="[0-9]*" name="phoneNum" class="text1" tabindex="6"/></div>
</div>
<button id="btn" class="r_but" onClick="check()">确定</button>
<button id="btn" class="r_but" onclick="check()">确定</button>
<script type="text/javascript" src="jquery-1.8.3.min.js" tppabs="http://www.17sucai.com/preview/1089623/2018-06-08/form/js/jquery-1.8.3.min.js"></script>
@ -67,18 +67,38 @@ function clearmsg() {
}, 2000)
};
// $("#btn").check(){
// if(bankNum!=""&&realname!=""&&idNum!=""&&phoneNum!=""){
// var userBank = {"bankNum":document.getElementById("bankNum").value,
// "realname":document.getElementById("realname").value,
// "idNum":document.getElementById("idNum").value,
// "phoneNum":document.getElementById("phoneNum").value,
// }
// var jsonStr = JSON.stringify(userBank);
// $.ajax({
// type:"POST",
// url:"bankCardController",
// dataType:"JSON",
// data:jsonStr
// })
// }else{
// alert("请检查您的输入!");
// }
// }
//提交后的check
function check() {
var mobile = $("#mobile").val();
var phoneNum = $("#phoneNum").val();
var realname = $("#realname").val();
if(mobile == "") {
if(phoneNum == "") {
alert1("请输入手机号");
clearmsg();
return false;
}
if(!(/^1[34578]\d{9}$/.test(mobile))) {
if(!(/^1[34578]\d{9}$/.test(phoneNum))) {
alert1("请输入正确的手机号");
clearmsg();
return false;
@ -95,12 +115,12 @@ function check() {
//必填项没有全部填写时,灰色,全部填写时蓝色
function check_for_btn() {
var mobile = $("#mobile").val();
var phoneNum = $("#phoneNum").val();
var realname = $("#realname").val();
if(realname == "" || mobile == null) {
if(realname == "" || phoneNum == null) {
$(".r_but").css("background", "#d1d5db");
}
if(realname != "" && mobile != null) {
if(realname != "" && phoneNum != null) {
$(".r_but").css("background", "#49b9eb");
}

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<title>产品展示</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="headBox">
<h2 class="titHead">产品信息</h2>
<h3 class="titNeck">内容简介</h3>
<div class="search">
<input id="serch" type="text" placeholder="搜索">
<button id="btn" type="button"></button>
</div>
</div>
<div class="content">
</div>
<div class="footBox">
<input type="button" name="" id="btn2" value="确&nbsp;&nbsp;定" />
</div>
<script type="text/javascript" src="jquery.min.js" ></script>
<script type="text/javascript" src="serch.js"></script>
</body>
</html>

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

@ -0,0 +1,81 @@
//以下代码为AJAX提交搜索请求代码,实际应用中请启用以下代码,并正确填写搜索提交路径和数据获取路径.
//$('#btn').click(function() {
// $.ajax({
// cache: true, //保留缓存数据
// type: "POST", //为post请求
// url: "url", //提交到指定路径
// async: true, //true可异步false不可异步
// data: $("#serch").val(), //提交数据为input里value
// async: true, //true可异步false不可异步
// error: function(request) { //请求失败之后的操作
// return;
// alert("提交失败");
// },
// success: function(data) { //请求成功之后的操作
// $.ajax({
// cache: true, //保留缓存数据
// type: "GET", //为get请求
// url: "url", //数据返回接口路径
// async: true, //true可异步false不可异步
// error: function(request) { //请求失败之后的操作
// return;
// alert("请求失败");
// },
// success: function(data) { //请求成功之后的操作
// var x = '';
// $.each(data, function(index, value) {
// var trs = "";
// trs += "<label class='el-checkbox'><img src=" + data[index].head_img + "alt='' /><h4>" + data[index].nickname + "</h4><p>" + data[index].desc + "</p><input name='public' type='checkbox' value='' /></label>";
// x += trs;
// });
// $(".content").html(x);
// }
// });
// }
// });
//})
//以下代码为本次测试数据的打印,实际应用中请把以下代码全部注释,并启用上面的代码块.
$('#btn').click(function() {
$.ajax({
cache: true, //保留缓存数据
type: "GET", //为get请求
url: "http://www.17sucai.com/preview/575598/2018-05-09/%E5%85%AC%E4%BC%97%E5%8F%B7/js/shuju.json", //获取数据接口指定路径
async: true, //true可异步false不可异步
error: function(request) { //请求失败之后的操作
return;
alert("请求失败");
},
success: function(data) { //请求成功之后的操作
var x = '';
$.each(data, function(index, value) {
console.log(data[index].wxid + '' + data[index].nickname + '' + data[index].head_img + '' + data[index].desc);
var trs = "";
trs += "<label class='el-checkbox'><img src=" + data[index].head_img + "alt='' /><h4>" + data[index].nickname + "</h4><p>" + data[index].desc + "</p><input name='public' type='radio' value='' /></label>";
x += trs;
});
$(".content").html(x);
}
});
})
//点击确认,提交所选公众号名称,修改提交地址
$('#btn2').click(function(){
var radioValue = $("input[type='radio']:checked").parent().find('h4').html();
console.log(radioValue);
// $.ajax({
// cache: true, //保留缓存数据
// type: "POST", //为post请求
// url: "url", //提交到指定路径
// async: true, //true可异步false不可异步
// data: radioValue, //提交数据为公众号名字
// async: true, //true可异步false不可异步
// error: function(request) { //请求失败之后的操作
// return;
// alert("提交失败");
// },
// success: function(data) { //请求成功之后的操作
// console.log("提交成功");
// }
// });
})

@ -0,0 +1,324 @@
/*样式初始化 star*/
html {
overflow-y: scroll;
width: 100%;
font-family: "微软雅黑";
}
body {
margin: 0;
background: #f7f7f7;
}
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
blockquote,
p {
padding: 0;
margin: 0;
}
table,
td,
tr,
th {
font-size: 12px;
}
li {
list-style-type: none;
}
img {
vertical-align: top;
border: 0;
}
ol,
ul {
list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 12px;
font-weight: normal;
}
address,
cite,
code,
em,
th {
font-weight: normal;
font-style: normal;
}
/*样式初始化 end*/
/*serch 样式 star*/
.headBox {
width: 100%;
height: auto;
margin-top: 2%;
background-color: #ffffff;
text-align: center;
padding: 4% 0;
}
.titHead {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 2%;
}
.titNeck {
font-size: 0.9rem;
color: #a7a7a7;
margin-bottom: 15px;
}
.search {
position: relative;
}
.search input {
width: 80%;
height: 36px;
font-size: 1rem;
color: #d2d2d2;
border: none;
outline: none;
box-sizing: border-box;
padding-left: 2%;
background-color: #f2f2f2;
border-radius: 6px;
}
input::-webkit-input-placeholder {
color: #d2d2d2;
}
.search button {
position: absolute;
height: 36px;
width: 13%;
top: 0;
right: 10%;
border-radius: 0 6px 6px 0;
border: none;
outline: none;
background-color: #d3d3d3;
background: url("serch.jpg") no-repeat;
background-size: 100%;
background-position: center;
}
.content {
width: 100%;
height: auto;
}
.content label {
display: block;
width: 90%;
height: 70px;
margin: 2% auto;
background-color: #FFFFFF;
position: relative;
}
.content label img {
float: left;
width: auto;
height: 85%;
vertical-align: middle;
margin-top: 1.5%;
margin-left: 2%;
}
.content label h4 {
font-size: 1rem;
font-weight: 600;
color: #000000;
margin: 2% 0 2% 25%;
width: 65%;
padding-top: 3%;
}
.content label p {
font-size: 0.9rem;
font-weight: 500;
color: #dbdbdb;
width: 60%;
margin-left: 25%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.content label input {
position: absolute;
top: 35%;
right: 5%;
}
.el-checkbox input[type=checkbox]:checked {
background: url("checkbox.png")no-repeat center;
background-size: 100%;
}
.el-checkbox>input[type="checkbox"]+.el-checkbox-style:before {
border-radius: 50%;
}
.el-checkbox>input[type="checkbox"]+.el-checkbox-style:after {
top: 0.15em;
left: 0.5em;
box-sizing: border-box;
width: 0.4em;
height: 0.85em;
transform: rotate(45deg);
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
input[type='checkbox'] {
width: 25px;
height: 25px;
background-color: #fff;
-webkit-appearance: none;
border: 1px solid #c9c9c9;
border-radius: 50%;
outline: none;
}
.el-checkbox input[type=radio]:checked {
background: url("checkbox.png")no-repeat center;
background-size: 100%;
}
.el-checkbox>input[type="radio"]+.el-checkbox-style:before {
border-radius: 50%;
}
.el-checkbox>input[type="radio"]+.el-checkbox-style:after {
top: 0.15em;
left: 0.5em;
box-sizing: border-box;
width: 0.4em;
height: 0.85em;
transform: rotate(45deg);
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
input[type='radio'] {
width: 25px;
height: 25px;
background-color: #fff;
-webkit-appearance: none;
border: 1px solid #c9c9c9;
border-radius: 50%;
outline: none;
}
.el-checkbox input[type=radio]:checked {
background: url("checkbox.png")no-repeat center;
background-size: 100%;
}
.footBox {
width: 100%;
height: 64px;
position: fixed;
bottom: 0;
background-color: #FFFFFF;
text-align: center;
}
.footBox input {
width: 90%;
height: 70%;
margin: 0 auto;
background-color: #09bb07;
margin-top: 3%;
border: none;
outline: none;
border-radius: 6px;
font-size: 1rem;
color: #FFFFFF;
}
/*serch 样式 end*/
/*checkbox 样式 star*/
.headBoxTwo {
width: 100%;
height: auto;
background-color: #ffffff;
text-align: center;
padding: 6% 0;
}
.headBoxTwo .titHead {
margin-bottom: 2%;
}
.headBoxTwo .titNeck {
margin-bottom: 0px;
}
/*checkbox 样式 end*/
@media only screen and (min-width: 420px) and (max-width: 1024px) {
.search button {
background-size: 100%;
right: 10%;
width: 7%;
}
.content label img {
margin-top: 0.5%;
margin-left: 1%;
}
.content label h4 {
margin: 0 0 1% 25%;
padding-top: 1%;
}
.footBox input {
margin-top: 1%;
}
}

@ -1,16 +1,4 @@
/*
<!--
* 17vip
* http://www.17sucai.com/pins/vip
*
* Copyright ,
*
*
*
-->
*/
html,body {
color: #333;

@ -0,0 +1,181 @@
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8"utf-8">
<meta http-equiv="Pragma" content="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<meta name="format-detection" content="telephone=yes"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>绑定信息</title>
<!-- Bootstrap core CSS-->
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="bootstrap.min.css" tppabs="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
body{
margin: 0;
padding: 0;
}
.modal_content{
padding: 30px;
display: flex;
justify-content: center;
flex-direction: column;
}
.modal_content>div{
margin-bottom: 20px;
}
.modal_content>h5:first-child{
margin:30px 0px;
}
#dialog label{
color: #666;
}
#phone1{
display: block;
width: 100%;
height: 70px;
background: none;
padding-top: 30px;
border: 0;
outline:none;
text-align: center;
margin-top: -30px;
font-size: 16px;
border-bottom: 1px solid rgba(0,0,0,.2);
border-radius: 0;
}
.code1{
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
height: 70px;
background: none;
padding-top: 30px;
margin-top: -30px;
font-size: 16px;
border-bottom: 1px solid rgba(0,0,0,.2);
border-radius: 0;
}
#code1{
width: calc(100% - 90px);
height: 55px;
background: none;
padding-top: 20px;
border: 0;
outline:none;
text-align: center;
margin-top: -20px;
font-size: 16px;
}
#btnSendCode1{
width: 90px;
height: 30px;
padding: 0 5px;
margin: 0;
font-size: 14px;
text-align: center;
background: transparent;
border-radius: 30px;
color: #a07941;
border-color: #a07941;
}
::-webkit-input-placeholder { /* WebKit browsers */
font-size: 14px;
color: rgba(0,0,0,.4);
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
font-size: 14px;
color: rgba(0,0,0,.4);
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
font-size: 14px;
color: rgba(0,0,0,.4);
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
font-size: 14px;
color: rgba(0,0,0,.4);
}
.next{
text-align: center;
margin: 20px 0;
}
.next button{
width: 100%;
height: 45px;
padding: 0;
margin: 0;
background: #007BFF;
color: #fff;
border: 0;
outline:none;
border-radius: 3px;
}
</style>
</head>
<body>
<div class="modal_content">
<h5></h5>
<div>
<label for="phone1">手机号:</label><br />
<input id="phone1" type="text" autocomplete="off" placeholder="请输入已绑定的手机号"/>
</div>
<div>
<label for="code1">验证码:</label>
<div class="code1">
<input id="code1" type="text" autocomplete="off" placeholder="短信验证码(待开发,输入用户密码)"/>
<input id="btnSendCode1" type="button" class="btn btn-default" value="获取验证码" onClick="sendMessage1()" />
</div>
</div>
<div class="next">
<button onClick="binding()">确定</button>
</div>
</div>
<script type="text/javascript" src="jquery.min.js" tppabs="http://www.17sucai.com/preview/1266961/2018-07-11/sms/js/jquery.min.js"></script>
<script type="text/javascript">
var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;//手机号正则
var count = 60; //间隔函数1秒执行
var InterValObj1; //timer变量控制时间
var curCount1;//当前剩余秒数
/*第一*/
function sendMessage1() {
curCount1 = count;
var phone = $.trim($('#phone1').val());
if (!phoneReg.test(phone)) {
alert(" 请输入有效的手机号码");
return false;
}
//设置button效果开始计时
$("#btnSendCode1").attr("disabled", "true");
$("#btnSendCode1").val( + curCount1 + "秒再获取");
InterValObj1 = window.setInterval(SetRemainTime1, 1000); //启动计时器1秒执行一次
//向后台发送处理数据
}
function SetRemainTime1() {
if (curCount1 == 0) {
window.clearInterval(InterValObj1);//停止计时器
$("#btnSendCode1").removeAttr("disabled");//启用按钮
$("#btnSendCode1").val("重新发送");
}
else {
curCount1--;
$("#btnSendCode1").val( + curCount1 + "秒再获取");
}
}
/*提交*/
function binding(){
alert(1)
}
</script>
</body>
</html>

File diff suppressed because one or more lines are too long

@ -0,0 +1,443 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/x-icon" href="#" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>账号登录</title>
<style>
*{
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
@font-face {
font-family: 'neo';
src: url("NEOTERICc.ttf")/*tpa=http://www.17sucai.com/preview/384665/2018-12-28/login/font/NEOTERICc.ttf*/;
}
input:focus{
outline: none;
}
.form input{
width: 300px;
height: 30px;
font-size: 18px;
background: none;
border: none;
border-bottom: 1px solid #fff;
color: #fff;
margin-bottom: 20px;
}
.form input::placeholder{
color: rgba(255,255,255,0.8);
font-size: 18px;
font-family: "neo";
}
.confirm{
height: 0;
overflow: hidden;
transition: .25s;
}
.btn{
width:140px;
height: 40px;
border: 1px solid #fff;
background: none;
font-size:20px;
color: #fff;
cursor: pointer;
margin-top: 25px;
font-family: "neo";
transition: .25s;
}
.btn:hover{
background: rgba(255,255,255,.25);
}
#login_wrap{
width: 980px;
min-height: 500px;
border-radius: 10px;
font-family: "neo";
overflow: hidden;
box-shadow: 0px 0px 120px rgba(0, 0, 0, 0.25);
position: fixed;
top: 50%;
right: 50%;
margin-top: -250px;
margin-right: -490px;
}
#login{
width: 50%;
height: 100%;
min-height: 500px;
background: linear-gradient(45deg, #9a444e, #e06267);
position: relative;
float: right;
}
#login #status{
width: 90px;
height: 35px;
margin: 40px auto;
color: #fff;
font-size: 30px;
font-weight: 600;
position: relative;
overflow: hidden;
}
#login #status i{
font-style: normal;
position: absolute;
transition: .5s
}
#login span{
text-align: center;
position: absolute;
left: 50%;
margin-left: -150px;
top: 52%;
margin-top: -140px;
}
#login span a{
text-decoration: none;
color: #fff;
display: block;
margin-top: 80px;
font-size: 18px;
}
#bg{
background: linear-gradient(45deg, #211136, #bf5853);
height: 100%;
}
/*绘图*/
#login_img{
width: 50%;
min-height: 500px;
background: linear-gradient(45deg, #221334, #6c3049);
float: left;
position: relative;
}
#login_img span{
position: absolute;
display: block;
}
#login_img .circle{
width: 200px;
height: 200px;
border-radius: 50%;
background: linear-gradient(45deg, #df5555, #ef907a);
top: 70px;
left: 50%;
margin-left: -100px;
overflow: hidden;
}
#login_img .circle span{
width: 150px;
height: 40px;
border-radius: 50px;
position: absolute;
}
#login_img .circle span:nth-child(1){
top: 30px;
left: -38px;
background: #c55c59;
}
#login_img .circle span:nth-child(2){
bottom: 20px;
right: -35px;
background: #934555;
}
#login_img .star span{
background: radial-gradient(#fff 10%,#fff 20%,rgba(72, 34, 64, 0));
border-radius: 50%;
box-shadow: 0 0 7px #fff;
}
#login_img .star span:nth-child(1){
width: 15px;
height: 15px;
top: 50px;
left: 30px;
}
#login_img .star span:nth-child(2){
width: 10px;
height: 10px;
left: 360px;
top: 80px;
}
#login_img .star span:nth-child(3){
width: 5px;
height: 5px;
top: 400px;
left: 80px;
}
#login_img .star span:nth-child(4){
width: 8px;
height: 8px;
top: 240px;
left: 60px;
}
#login_img .star span:nth-child(5){
width: 4px;
height: 4px;
top: 20px;
left: 200px;
}
#login_img .star span:nth-child(6){
width: 4px;
height: 4px;
top: 460px;
left: 410px;
}
#login_img .star span:nth-child(7){
width: 6px;
height: 6px;
top: 250px;
left: 350px;
}
#login_img .fly_star span{
width: 90px;
height: 3px;
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.67), rgba(255,255,255,0));
background: -o-linear-gradient(left, rgba(255, 255, 255, 0.67), rgba(255,255,255,0));
background: linear-gradient(to right, rgba(255, 255, 255, 0.67), rgba(255,255,255,0));
transform: rotate(-45deg);
}
#login_img .fly_star span:nth-child(1){
top:60px;
left: 80px;
}
#login_img .fly_star span:nth-child(2){
top: 210px;
left: 332px;
opacity: 0.6;
}
#login_img p{
text-align: center;
color: #af4b55;
font-weight: 600;
margin-top: 365px;
font-size: 25px;
}
#login_img p i{
font-style: normal;
margin-right: 45px;
}
#login_img p i:nth-last-child(1){
margin-right: 0;
}
/*提示*/
#hint{
width: 100%;
line-height: 70px;
background: linear-gradient(-90deg, #9b494d, #bf5853);
text-align: center;
font-size: 25px;
color: #fff;
box-shadow: 0 0 20px #733544;
display: none;
opacity: 0;
transition: .5s;
position: absolute;
top: 0;
z-index: 999;
}
/* 响应式 */
@media screen and (max-width:1000px ) {
#login_img{
display: none;
}
#login_wrap{
width: 490px;
margin-right: -245px;
}
#login{
width: 100%;
}
}
@media screen and (max-width:560px ) {
#login_wrap{
width: 330px;
margin-right: -165px;
}
#login span{
margin-left: -125px;
}
.form input{
width: 250px;
}
.btn{
width: 113px;
}
}
@media screen and (max-width:345px ) {
#login_wrap {
width: 290px;
margin-right: -145px;
}
}
</style>
</head>
<body>
<div id="bg">
<div id="hint"><!-- 提示框 -->
<p>登录失败</p>
</div>
<div id="login_wrap">
<div id="login"><!-- 登录注册切换动画 -->
<div id="status">
<i style="top: 0"></i>
<i style="top: 35px"></i>
<i style="right: 5px"></i>
</div>
<span>
<form action=" ">
<p class="form"><input type="text" id="user" placeholder="账号"></p>
<p class="form"><input type="password" id="passwd" placeholder="密码"></p>
<p class="form confirm"><input type="password" id="confirm-passwd" placeholder="确认密码"></p>
<input type="button" value="登录" class="btn" onclick="login()" style="margin-right: 20px;">
<input type="button" value="注册" class="btn" onclick="signin()" id="btn">
</form>
<a href="#">忘记密码</a>
</span>
</div>
<div id="login_img"><!-- 图片绘制框 -->
<span class="circle">
<span></span>
<span></span>
</span>
<span class="star">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</span>
<span class="fly_star">
<span></span>
<span></span>
</span>
<p id="title">CLOUD</p>
</div>
</div>
</div>
</body>
<script>
var onoff = true//根据此布尔值判断当前为注册状态还是登录状态
var confirm = document.getElementsByClassName("confirm")[0]
//var user = document.getElementById("user")
//var passwd = document.getElementById("passwd")
//var con_pass = document.getElementById("confirm-passwd")
//自动居中title
var name_c = document.getElementById("title")
name = name_c.innerHTML.split("")
name_c.innerHTML = ""
for (i = 0; i < name.length; i++)
if (name[i] != ",")
name_c.innerHTML += "<i>" + name[i] + "</i>"
//引用hint()在最上方弹出提示
function hint() {
let hit = document.getElementById("hint")
hit.style.display = "block"
setTimeout("hit.style.opacity = 1", 0)
setTimeout("hit.style.opacity = 0", 2000)
setTimeout('hit.style.display = "none"', 3000)
}
//回调函数
/*function submit(callback) {
//if (passwd.value == con_pass.value) {
let request = new XMLHttpRequest()
let url = ""
request.open("post", url, true)
let data = new FormData()
data.append("user", user.value)
data.append("passwd", passwd.value)
request.onreadystatechange = function() {
if (this.readyState == 4) {
callback.call(this, this.response)
//console.log(this.responseText)
}
}
request.send(data)
}*/
/*else {
hit.innerHTML = "两次密码不同"
hitting()
}
}*/
//注册按钮
function signin() {
let status = document.getElementById("status").getElementsByTagName("i")
let hit = document.getElementById("hint").getElementsByTagName("p")[0]
if (onoff) {
confirm.style.height = 51 + "px"
status[0].style.top = 35 + "px"
status[1].style.top = 0
onoff = !onoff
} else {
/*if (!/^[A-Za-z0-9]+$/.test(user.value))
hit.innerHTML = "账号只能为英文和数字"
else if (user.value.length < 6)
hit.innerHTML = "账号长度必须大于6位"
else if (passwd.value.length < 6)
hit.innerHTML = "密码长度必须大于6位"
else if (passwd.value != con_pass.value)
hit.innerHTML = "两次密码不相等"
else if (passwd.value = con_pass.value) {
submit(function(res) {
if (res == "exist")
hit.innerHTML = "该账号已存在"
else if (res == true) {
hit.innerHTML = "账号注册成功,两秒后自动刷新页面"
setTimeout("window.location.reload()", 2000)
} else if (res == false)
hit.innerHTML = "账号注册失败"
})
}
hint()*/
}
}
//登录按钮
function login() {
if (onoff) {
/*let request = new XMLHttpRequest()
let url = ""
request.open("post", url, true)
let data = new FormData()
data.append("user", user.value)
data.append("passwd", passwd.value)
request.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.responseText == false)
hint()
else
window.location.href = this.responseText;
}
}
request.send(data)*/
} else {
let status = document.getElementById("status").getElementsByTagName("i")
confirm.style.height = 0
status[0].style.top = 0
status[1].style.top = 35 + "px"
onoff = !onoff
}
}
</script>
</html>

@ -0,0 +1,274 @@
*{
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
@font-face {
font-family: 'neo';
src: url("NEOTERICc-1.ttf");
}
input:focus{
outline: none;
}
.form input{
width: 300px;
height: 30px;
font-size: 18px;
background: none;
border: none;
border-bottom: 1px solid #fff;
color: #fff;
margin-bottom: 20px;
}
.form input::placeholder{
color: rgba(255,255,255,0.8);
font-size: 18px;
font-family: "neo";
}
.confirm{
height: 0;
overflow: hidden;
transition: .25s;
}
.btn{
width:140px;
height: 40px;
border: 1px solid #fff;
background: none;
font-size:20px;
color: #fff;
cursor: pointer;
margin-top: 25px;
font-family: "neo";
transition: .25s;
}
.btn:hover{
background: rgba(255,255,255,.25);
}
#login_wrap{
width: 980px;
min-height: 500px;
border-radius: 10px;
font-family: "neo";
overflow: hidden;
box-shadow: 0px 0px 120px rgba(0, 0, 0, 0.25);
position: fixed;
top: 50%;
right: 50%;
margin-top: -250px;
margin-right: -490px;
}
#login{
width: 50%;
height: 100%;
min-height: 500px;
background: linear-gradient(45deg, #9a444e, #e06267);
position: relative;
float: right;
}
#login #status{
width: 90px;
height: 35px;
margin: 40px auto;
color: #fff;
font-size: 30px;
font-weight: 600;
position: relative;
overflow: hidden;
}
#login #status i{
font-style: normal;
position: absolute;
transition: .5s
}
#login span{
text-align: center;
position: absolute;
left: 50%;
margin-left: -150px;
top: 52%;
margin-top: -140px;
}
#login span a{
text-decoration: none;
color: #fff;
display: block;
margin-top: 80px;
font-size: 18px;
}
#bg{
background: linear-gradient(45deg, #211136, #bf5853);
height: 100%;
}
/*绘图*/
#login_img{
width: 50%;
min-height: 500px;
background: linear-gradient(45deg, #221334, #6c3049);
float: left;
position: relative;
}
#login_img span{
position: absolute;
display: block;
}
#login_img .circle{
width: 200px;
height: 200px;
border-radius: 50%;
background: linear-gradient(45deg, #df5555, #ef907a);
top: 70px;
left: 50%;
margin-left: -100px;
overflow: hidden;
}
#login_img .circle span{
width: 150px;
height: 40px;
border-radius: 50px;
position: absolute;
}
#login_img .circle span:nth-child(1){
top: 30px;
left: -38px;
background: #c55c59;
}
#login_img .circle span:nth-child(2){
bottom: 20px;
right: -35px;
background: #934555;
}
#login_img .star span{
background: radial-gradient(#fff 10%,#fff 20%,rgba(72, 34, 64, 0));
border-radius: 50%;
box-shadow: 0 0 7px #fff;
}
#login_img .star span:nth-child(1){
width: 15px;
height: 15px;
top: 50px;
left: 30px;
}
#login_img .star span:nth-child(2){
width: 10px;
height: 10px;
left: 360px;
top: 80px;
}
#login_img .star span:nth-child(3){
width: 5px;
height: 5px;
top: 400px;
left: 80px;
}
#login_img .star span:nth-child(4){
width: 8px;
height: 8px;
top: 240px;
left: 60px;
}
#login_img .star span:nth-child(5){
width: 4px;
height: 4px;
top: 20px;
left: 200px;
}
#login_img .star span:nth-child(6){
width: 4px;
height: 4px;
top: 460px;
left: 410px;
}
#login_img .star span:nth-child(7){
width: 6px;
height: 6px;
top: 250px;
left: 350px;
}
#login_img .fly_star span{
width: 90px;
height: 3px;
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.67), rgba(255,255,255,0));
background: -o-linear-gradient(left, rgba(255, 255, 255, 0.67), rgba(255,255,255,0));
background: linear-gradient(to right, rgba(255, 255, 255, 0.67), rgba(255,255,255,0));
transform: rotate(-45deg);
}
#login_img .fly_star span:nth-child(1){
top:60px;
left: 80px;
}
#login_img .fly_star span:nth-child(2){
top: 210px;
left: 332px;
opacity: 0.6;
}
#login_img p{
text-align: center;
color: #af4b55;
font-weight: 600;
margin-top: 365px;
font-size: 25px;
}
#login_img p i{
font-style: normal;
margin-right: 45px;
}
#login_img p i:nth-last-child(1){
margin-right: 0;
}
/*提示*/
#hint{
width: 100%;
line-height: 70px;
background: linear-gradient(-90deg, #9b494d, #bf5853);
text-align: center;
font-size: 25px;
color: #fff;
box-shadow: 0 0 20px #733544;
display: none;
opacity: 0;
transition: .5s;
position: absolute;
top: 0;
z-index: 999;
}
/* 响应式 */
@media screen and (max-width:1000px ) {
#login_img{
display: none;
}
#login_wrap{
width: 490px;
margin-right: -245px;
}
#login{
width: 100%;
}
}
@media screen and (max-width:560px ) {
#login_wrap{
width: 330px;
margin-right: -165px;
}
#login span{
margin-left: -125px;
}
.form input{
width: 250px;
}
.btn{
width: 113px;
}
}
@media screen and (max-width:345px ) {
#login_wrap {
width: 290px;
margin-right: -145px;
}
}

@ -0,0 +1,174 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>利息计算器</title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
<meta content="telephone=no" name="format-detection"/>
<link href="style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="tab.js"></script>
</head>
<body>
<section class="aui-flexView">
<header class="aui-navBar aui-navBar-fixed b-line">
<a href="javascript:;" class="aui-navBar-item">
<i class="icon icon-return"></i>
</a>
<div class="aui-center">
<span class="aui-center-title">利息计算器</span>
</div>
<a href="javascript:;" class="aui-navBar-item">
<i class="icon icon-sys"></i>
</a>
</header>
<section class="aui-scrollView">
<div class="aui-tab" data-ydui-tab>
<ul class="tab-nav b-line">
<li class="tab-nav-item tab-active"> </li>
<li class="tab-nav-item"> </li>
<li class="tab-nav-item"> </li>
</ul>
<div class="tab-panel">
<div class="tab-panel-item tab-active">
<a href="javascript:;" class="aui-flex b-line">
<div class="aui-calc-title">
<h2>贷款金额</h2>
</div>
<div class="aui-flex-box aui-flex-box-right">
<input type="text" placeholder="请输入贷款金额">
<span></span>
</div>
</a>
<a href="javascript:;" class="aui-flex b-line">
<div class="aui-calc-title">
<h2>贷款期限</h2>
</div>
<div class="aui-flex-box aui-flex-box-right">
<input type="text" placeholder="请输入贷款期限">
<span></span>
</div>
</a>
<a href="javascript:;" class="aui-flex b-line">
<div class="aui-calc-title">
<h2>贷款利率</h2>
</div>
<div class="aui-flex-box aui-flex-box-right aui-flex-box-dow">
<select class="cell-select">
<option value="">4.90%</option>
<option value="1">3.80%</option>
<option value="2">3.90%</option>
<option value="3">1.90%</option>
</select>
</div>
</a>
<a href="javascript:;" class="aui-flex b-line">
<div class="aui-calc-title">
<h2>还款方式</h2>
</div>
<div class="aui-flex-box aui-flex-box-right">
<button>等额本息</button>
<button>等额本金</button>
</div>
</a>
</div>
<div class="tab-panel-item">
<a href="javascript:;" class="aui-flex b-line">
<div class="aui-calc-title">
<h2>贷款金额</h2>
</div>
<div class="aui-flex-box aui-flex-box-right">
<input type="text" placeholder="请输入贷款金额">
<span></span>
</div>
</a>
<a href="javascript:;" class="aui-flex b-line">
<div class="aui-calc-title">
<h2>贷款期限</h2>
</div>
<div class="aui-flex-box aui-flex-box-right">
<input type="text" placeholder="请输入贷款期限">
<span></span>
</div>
</a>
<a href="javascript:;" class="aui-flex b-line">
<div class="aui-calc-title">
<h2>贷款利率</h2>
</div>
<div class="aui-flex-box aui-flex-box-right aui-flex-box-dow">
<select class="cell-select">
<option value="">4.90%</option>
<option value="1">3.80%</option>
<option value="2">3.90%</option>
<option value="3">1.90%</option>
</select>
</div>
</a>
<a href="javascript:;" class="aui-flex b-line">
<div class="aui-calc-title">
<h2>还款方式</h2>
</div>
<div class="aui-flex-box aui-flex-box-right">
<button>等额本息</button>
<button>等额本金</button>
</div>
</a>
</div>
<div class="tab-panel-item">
<a href="javascript:;" class="aui-flex b-line">
<div class="aui-calc-title">
<h2>贷款金额</h2>
</div>
<div class="aui-flex-box aui-flex-box-right">
<input type="text" placeholder="请输入贷款金额">
<span></span>
</div>
</a>
<a href="javascript:;" class="aui-flex b-line">
<div class="aui-calc-title">
<h2>贷款期限</h2>
</div>
<div class="aui-flex-box aui-flex-box-right">
<input type="text" placeholder="请输入贷款期限">
<span></span>
</div>
</a>
<a href="javascript:;" class="aui-flex b-line">
<div class="aui-calc-title">
<h2>贷款利率</h2>
</div>
<div class="aui-flex-box aui-flex-box-right aui-flex-box-dow">
<select class="cell-select">
<option value="">4.90%</option>
<option value="1">3.80%</option>
<option value="2">3.90%</option>
<option value="3">1.90%</option>
</select>
</div>
</a>
<a href="javascript:;" class="aui-flex b-line">
<div class="aui-calc-title">
<h2>还款方式</h2>
</div>
<div class="aui-flex-box aui-flex-box-right">
<button>等额本息</button>
<button>等额本金</button>
</div>
</a>
</div>
<div class="tab-button">
<button>开始计算</button>
</div>
</div>
</div>
</section>
</section>
</body>
</html>

File diff suppressed because one or more lines are too long

@ -0,0 +1,434 @@
html,body {
color: #333;
margin: 0;
height: 100%;
font-family: "Myriad Set Pro","Helvetica Neue",Helvetica,Arial,Verdana,sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: normal;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
a {
text-decoration: none;
color: #000;
}
a, label, button, input, select {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
img {
border: 0;
}
body {
background: #fff;
color: #666;
}
html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, button, fieldset, form, input, legend, textarea, th, td {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #08acee;
}
button {
outline: 0;
}
img {
border: 0;
}
button,input,optgroup,select,textarea {
margin: 0;
font: inherit;
color: inherit;
outline: none;
}
li {
list-style: none;
}
a {
color: #666;
}
.clearfix::after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix {
}
.divHeight {
width: 100%;
height: 10px;
background: #f5f5f5;
position: relative;
overflow: hidden;
}
.r-line {
position: relative;
}
.r-line:after {
content: '';
position: absolute;
z-index: 0;
top: 0;
right: 0;
height: 100%;
border-right: 1px solid #D9D9D9;
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.b-line {
position: relative;
}
.b-line:after {
content: '';
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
border-bottom: 1px solid #e2e2e2;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.aui-flex {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
padding: 15px;
position: relative;
}
.aui-flex-box {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
min-width: 0;
font-size: 14px;
color: #333;
}
/* 必要布局样式css */
.aui-flexView {
width: 100%;
height: 100%;
margin: 0 auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.aui-scrollView {
width: 100%;
height: 100%;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
position: relative;
}
.aui-navBar {
height: 44px;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
z-index: 1002;
background: #fff;
}
.aui-navBar-item {
height: 44px;
min-width: 25%;
-webkit-box-flex: 0;
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
padding: 0 0.9rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
font-size: 0.7rem;
white-space: nowrap;
overflow: hidden;
color: #808080;
position: relative;
}
.aui-navBar-item:first-child {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
margin-right: -25%;
font-size: 0.9rem;
font-weight: bold;
}
.aui-navBar-item:last-child {
-webkit-box-ordinal-group: 4;
-webkit-order: 3;
-ms-flex-order: 3;
order: 3;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.aui-center {
-webkit-box-ordinal-group: 3;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 44px;
width: 50%;
margin-left: 25%;
}
.aui-center-title {
text-align: center;
width: 100%;
white-space: nowrap;
overflow: hidden;
display: block;
text-overflow: ellipsis;
font-size: 0.95rem;
color: #333;
font-weight: bold;
}
.icon {
width: 20px;
height: 20px;
display: block;
border: none;
float: left;
background-size: 20px;
background-repeat: no-repeat;
}
.icon-return {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAElklEQVRoQ+WbTYgURxTH3+vpJrgg7EYIBHLIwYMXLzl4CWLGiCKEJXoRvIhg9jIzW12XTfQ0lyQeJtuvtgdCLoo3g7DkA5FIiCSLIRfxJksgMYSQwF52LoG4bPcLJb0iu93T09/lWNetN/3/dfVW1f+9KoQXpEkpX2VmAoB5APg5CIKe7/u/ZZWPWQOa6O+67uvM/AMiHtp5PjM/VEq9lVWP8cCu677JzGuI+MbzcMzMSqkWAHAWaKOBu93uIdu2fwSA13ZDTd0ISymPMPN3ADAbM4IblmUdXV5e/jXL6Oq+Ro7w4uJi27Ks2wCwL2Zk/0LEo0T0R1ZYI4GFEO8BwCoiOjGw64h4nIj+yQNrHLCU8gIzXwMAK+5/NoId5YU1ClgI0UVEPwHmvm3bpwaDwb9FYI0BFkJ8jIhXEmDuBkEw7/v+k6KwJgCjEOILRPwgAWZ1dnb2XL/f3y4DtlHgfr9vj0ajLwHgbALMDSK6mHVjkfZiGlmWer3eK61W6xsAOBknkJmHSqlemvg8f68deGlpaf/W1tYdAHg7QfAVIvo0D8wkMbUCdzqdA47j3AOAwzHLDluWddHzvBuTCM/bpzZg7XgA4CcAOBgjVk9K54hoNS/IpHG1AEspD4ZheG+349EimfmJZVnznufdnVR0kX6VA0spD0ewB2KE6o3EKSK6XwQiS2ylwJHj+R4A9seIGgVBcNz3/YdZBBftWxmwlPIkM38V53gAYGN7e/vYcDhcLwqQNb4SYNd19WZCbyrsGEHa1rXz2rusgLv7lw6sHU8YhtcRcc9vM/O64zjHBoPBRlHheeNLBRZCfISIsZsGnZIpw97lBd2JKw1YCOEjYjdBUGn2zgRgdF33OgBcSBBTqr1rFHhhYcGZmZm5OcbxlG7vGgOWUu4Lw/A2IrYTRFRi7xoBjhyP3lAciRNQpb1rBFgI8S0i6uxiXKvU3tUOrDMVm5ub/yGiLnM8a7r0UYe9MwoYES8RkU6zGttyrcNCiK8RUZct9zRmvqyUumoqcS7gtEkLAIiIpInQuYA1yATL0jUiulR21rHoS8wNrB+ctvFg5ltzc3Pny8wrNwocPTxta3knCIIzZVUOTAB+qiHFPKzZtn26jNqQMcAR9IeIGDtDM/MDRDxBRIWqf0YBR5PZuATAI8dx2lOTANh5++NSPMz8OAiCd4fD4eOio5UnvtAsPe6BaUm8IAjavu8/yiO6SExlwNHnrQ+mJKZpwzA8sbKy8qAIQNbYSoEj6LGJeEQ87XneWlbheftXDhxBjy21IOIZItIVxcpbLcCaIq2YxsznlVK3qiauDViDpJVL67CXtQJr6AkK4lJbrapGunZgDTLBkYerSqnLVUA3AqxBJjjU8jkRdcq2l40BR6M31mlVYS+bBn7K7bruJwCQ9AmXai+NAI6c1rijh6XZS2OAJ3BapdhLo4Cjz/ssM99MOD5c2F4aB6yhUw6Ia1v5jlLqzzzLlpHAaU6Lmf9utVrtqbkCsDNy+shTZC+n/5LHDvRLdY3nOeg9xxan7hrP7gkpuor3GQC8z8y/WJbV8Tzv96wT1/+UYTdbCjnE2AAAAABJRU5ErkJggg==');
}
.tab-nav {
height: 45px;
line-height: 45px;
display: block;
position: relative;
background: #fff;
z-index: 1;
width: 100%;
margin: 0 auto;
}
.tab-nav-item {
height: 45px;
line-height: 45px;
position: relative;
text-align: center;
color: #585858;
font-size: 0.9rem;
display: block;
float: left;
width: 33.333%;
}
.tab-nav-item.tab-active {
/* background-color: #51bd03; */
}
.tab-nav-item.tab-active a {
color: #222;
font-size: 0.85rem;
}
.tab-nav-item a {
display: inherit;
font-size: 0.85rem;
color: #888;
}
.tab-panel {
position: relative;
overflow: hidden;
}
.tab-panel .tab-panel-item {
width: 100%;
position: absolute;
top: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.tab-panel .tab-panel-item.tab-active ~ .tab-panel-item {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.tab-panel .tab-panel-item.tab-active {
position: relative;
-webkit-transition: -webkit-transform .15s;
transition: -webkit-transform .15s;
transition: transform .15s;
transition: transform .15s, -webkit-transform .15s;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.tab-nav-item.tab-active:before {
content: '';
width: 70%;
height: 3px;
position: absolute;
left: 50%;
bottom: 0;
margin-left: -35%;
z-index: 4;
background-color: #fa623d;
}
.aui-flex-box-right {
text-align: right;
position: relative;
}
.aui-flex-box-right input {
background: none;
border: none;
width: 100%;
text-align: right;
padding-right: 1rem;
font-size: 0.9rem;
}
.aui-flex-box-right span {
position: absolute;
right: 0;
top: -0.1rem;
font-size: 0.95rem;
color: #333;
}
.aui-calc-title h2 {
font-weight: normal;
color: #333;
font-size: 0.95rem;
}
.tab-panel-item .aui-flex {
padding: 1.5rem 1rem;
}
.tab-panel-item .b-line:after {
width: 92%;
left: 15px;
}
.aui-flex-box-right button {
background: #fa623d;
border: 1px solid #fa623d;
color: #fff;
font-size: 0.85rem;
border-radius: 3px;
padding: 0.1rem 0.2rem;
}
.aui-flex-box-right button:nth-child(2) {
background: none;
color: #fa623d;
border: 1px solid #fa623d;
}
.aui-flex-box-dow:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAACpklEQVRoQ+2VzYvTUBDAZ5JGsTdB8CCIiODBoxdZ/MLTKqweFtG/ozQNpZdcSmkT+md4EBRWYd2T+IXg4tXDXlYRFATBY9Gkb+RJC4+apGkySUP29VSadN785jczD+GIffCI8YIGrrtxbVgbrlkFdEvXTOh/ONqwNlyzCuiWrplQvbR0S+uWrlkFdEtHCXVd12g2m48A4AER7QshNrvd7q91yh8MBicNw9hFxCtE9HQymdx3XVcsyymVYd/3LwshPs6DEdEnIcS1dUHPYN8i4qV5ThLctu0PLMD9fv+0ZVmfAeDEuqGjYAFgQkQXHMf5zgIsg3ied4uIdgHguAptmubNdrv9c9lBHM9jYH8j4h3btl+mOSNVS88DxUAfmKZ5tWho3/dPTafTV2obA8BKsJJjJeAE04VCz2DfIeJFxeLKsJmAy4bmhM0MXBZ0FCwR/TEM43bamV2c65VbWg0QN9NhGN7o9Xo/0iyRuHfiYBHxXqfT2csaOxdwgunDMAw3skLLa7DRaLxWZ1aazQubq6UXTQshXiDiMeXKygQ9g32PiOeVWCywbMAy0Gg02iSinTzQRcOyAueFLgOWHTgJ2rKs661W61vUshmPx2eCIHhTVBurZ+ZeWlEAMe391bKsjUXoGayc2bNFzCzrtZR0NaSBjoENEXErz9WTlFchhucHJkHLd4IgWDQbAsC24zjPst6zy/5XKLAy088RsaG07Jd/CwTxnPJb4bCFLK2oCg+Hw7sA8ESFVt8jolJgSwOWB8VBlwlbKnAUdNmwpQPLAz3P2xJCPJbfDcN4aNv2zrJFw/m88KXFmSxHLA3MUcUqx9CGq2yHIzdtmKOKVY6hDVfZDkdu2jBHFascQxuush2O3LRhjipWOYY2XGU7HLlpwxxVrHKMvzbytEzMVwJXAAAAAElFTkSuQmCC');
content: '';
position: absolute;
z-index: 0;
bottom: 0.1rem;
right: 0;
width: 18px;
height: 18px;
background-size: 18px;
}
.tab-button {
padding: 2rem 0;
}
.tab-button button {
width: 92%;
margin: 0 auto;
display: block;
background: #fa623d;
color: #fff;
height: 3rem;
line-height: 3rem;
box-shadow: 0 3px 9px #d0d0d0;
border-radius: 5px;
border: none;
}

@ -0,0 +1,145 @@
/*
* author: lzy-aui
* tab.js
* http://azenui.com/
* http://a-ui.cn/
* http://588sucai.com/
*/
!function(window) {
"use strict";
var doc = window.document
, ydui = {};
$(window).on('load', function() {});
var util = ydui.util = {
parseOptions: function(string) {},
pageScroll: function() {}(),
localStorage: function() {}(),
sessionStorage: function() {}(),
serialize: function(value) {},
deserialize: function(value) {}
};
function storage(ls) {}
$.fn.emulateTransitionEnd = function(duration) {}
;
if (typeof define === 'function') {
define(ydui);
} else {
window.YDUI = ydui;
}
}(window);
!function(window) {
"use strict";
function Tab(element, options) {
this.$element = $(element);
this.options = $.extend({}, Tab.DEFAULTS, options || {});
this.init();
this.bindEvent();
this.transitioning = false;
}
Tab.TRANSITION_DURATION = 150;
Tab.DEFAULTS = {
nav: '.tab-nav-item',
panel: '.tab-panel-item',
activeClass: 'tab-active'
};
Tab.prototype.init = function() {
var _this = this
, $element = _this.$element;
_this.$nav = $element.find(_this.options.nav);
_this.$panel = $element.find(_this.options.panel);
}
;
Tab.prototype.bindEvent = function() {
var _this = this;
_this.$nav.each(function(e) {
$(this).on('http://www.17sucai.com/preview/1268063/2018-12-13/calculator/js/click.ydui.tab', function() {
_this.open(e);
});
});
}
;
Tab.prototype.open = function(index) {
var _this = this;
index = typeof index == 'number' ? index : _this.$nav.filter(index).index();
var $curNav = _this.$nav.eq(index);
_this.active($curNav, _this.$nav);
_this.active(_this.$panel.eq(index), _this.$panel, function() {
$curNav.trigger({
type: 'http://www.17sucai.com/preview/1268063/2018-12-13/calculator/js/opened.ydui.tab',
index: index
});
_this.transitioning = false;
});
}
;
Tab.prototype.active = function($element, $container, callback) {
var _this = this
, activeClass = _this.options.activeClass;
var $avtive = $container.filter('.' + activeClass);
function next() {
typeof callback == 'function' && callback();
}
$element.one('webkitTransitionEnd', next).emulateTransitionEnd(Tab.TRANSITION_DURATION);
$avtive.removeClass(activeClass);
$element.addClass(activeClass);
}
;
function Plugin(option) {
var args = Array.prototype.slice.call(arguments, 1);
return this.each(function() {
var target = this
, $this = $(target)
, tab = $this.data('http://www.17sucai.com/preview/1268063/2018-12-13/calculator/js/ydui.tab');
if (!tab) {
$this.data('http://www.17sucai.com/preview/1268063/2018-12-13/calculator/js/ydui.tab', (tab = new Tab(target,option)));
}
if (typeof option == 'string') {
tab[option] && tab[option].apply(tab, args);
}
});
}
$(window).on('http://www.17sucai.com/preview/1268063/2018-12-13/calculator/js/load.ydui.tab', function() {
$('[data-ydui-tab]').each(function() {
var $this = $(this);
$this.tab(window.YDUI.util.parseOptions($this.data('ydui-tab')));
});
});
$.fn.tab = Plugin;
}(window);

@ -52,7 +52,7 @@ function showMessage(){
//判断就绪状态和响应状态码是否符合要求
if(xmlHttp.readyState==4&&xmlHttp.status==200) {
var result = xmlHttp.responseText;//接收服务器响应的文本
document.getElementById("myspan").innerHTML = result;
document.getElementById("myspan").innerHTL = result;
}
}
</script>

@ -34,14 +34,14 @@
<img src=>
<div class="text_p">
<p>
订单 <span>银行转</span>
订单 <span>银行转</span>
</p>
<span class="yue">123456</span>
<span class="yue">123456</span>
<span class="yue">信息</span>
<span class="yue">信息</span>
</div>
<div class="button">
<p>
<span>123456</span>
<span>订单号</span>
</p>
<a href="#" class="liji">详情</a>
</div>
@ -52,7 +52,7 @@
<img src=>
<div class="text_p">
<p>
订单 <span>银行转</span>
订单 <span>银行转</span>
</p>
<span class="yue">123456</span>
<span class="yue">123456</span>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -0,0 +1,106 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="bootstrap.min.css" >
<link rel="stylesheet" href="style1.css">
<title>输入贷款金额</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="container_logo">
<div class="play col-xs-10 col-sm-10 col-md-10 col-lg-10">
<img src="logo.png" />
</div>
</div>
</div>
<form action="http://127.0.0.1:3001/login" method="post">
<div class="row">
<div class="play col-xs-10 col-sm-10 col-md-10 col-lg-10">
<div class="form-group">
<input type="hidden" class="getId" name="id">
<h4>还款金额</h4>
<div class="number_amount">
<label></label>
<input type="number" name="amount">
</div>
</div>
</div>
</div>
<div class="row"> </div>
<div class="row">
<div class="_submit col-xs-10 col-sm-10 col-md-10 col-lg-10">
<input type="submit" value="下一步" class="btn btn-primary submit-amount">
</div>
</div>
</form>
</div>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id='exampleModal'>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title">提示</h4>
</div>
<div class="modal-body">
<p>输入金额不能超出5000元</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal" aria-label="Close">确定</button>
</div>
</div>
</div>
</div>
<div class="mask"></div>
</body>
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script>
var $amountInput = $('[type="number"]');
var amount = '';
var $getId = $('[type="hidden"]');
var getparse=ParaMeter();
$getId.val(getparse.id);
$(".quick_amount p").off("click").on("click", function () {
amount = $(this).text();
if (!$(this).hasClass('active')) {
$(this).addClass('active').siblings().removeClass('active');
$amountInput.val(amount);
} else {
$(this).removeClass('active');
$amountInput.val('');
}
})
$amountInput.on('input propertychange', function () {
if ($(this).val() > 5000) {
$('#exampleModal').modal('show')
}
if($(this).val()!==$('.quick_amount p.active').text()){
$('.quick_amount p').removeClass('active');
}
})
$('#exampleModal').on('hidden.bs.modal', function (e) {
$amountInput.val(5000);
})
function ParaMeter()
{
var obj={};
var arr=location.href.substring(location.href.lastIndexOf('?')+1).split("&");
for(var i=0;i < arr.length;i++){
var aa=arr[i].split("=");
obj[aa[0]]=aa[1];
}
return obj;
}
</script>
</html>

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

@ -0,0 +1,84 @@
*{
margin:0;padding:0
}
ol,ul{
list-style: none;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-13, .col-xs-14{
float:none;
}
.mask{
background:#f0eff5;
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
z-index:-1;
}
.h1{padding-top:50px}
.container{
width:90%;
margin:0 auto;
background:#fff;
margin-top:5%;
}
.container_logo{
background:#fbfbfb
}
.play{
margin:0 auto;
padding:10px 0px;
}
.play img{
width:80%;
display:block;
margin:0 auto;
}
.number_amount{
position:relative;
height:42px;
}
.number_amount label{
position:absolute;
top:50%;
margin-top:-18px;
font-size:24px;
left:0;
}
.play input[type="number"]{
width:100%;
height:100%;
font-size:24px;
border:none;
border-bottom:1px solid #eee;
outline: none;
padding:0 30px;
}
.quick_amount{
margin:0 auto;
padding:0;
}
.quick_amount p{
display:inline-block;
text-align:center;
font-size:16px;
line-height:40px;
border:dashed 1px #eee;
color:#888;
margin:10px 3.3%;
}
.quick_amount p.active{
border:#337ab7 1px solid;
color:#337ab7;
border-radius:2px;
}
._submit{
margin:30px auto;
}
.submit-amount{
width:100%;
}
/* .getId{
display:none;
} */

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>银行卡管理</title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
<meta content="telephone=no" name="format-detection"/>
<link type="text/css" rel="stylesheet" href="style.css" >
</head>
<body>
<section class="aui-flexView">
<header class="aui-navBar">
<a href="javascript:;" class="aui-navBar-item">
<i class="icon icon-return"></i>
</a>
<div class="aui-center">
<span class="aui-center-title">银行卡管理</span>
</div>
</header>
<section class="aui-scrollView">
<div class="aui-box-item">
<div class="aui-card-list">
<div class="aui-card-list-bg">
<h2>银行卡1</h2>
<a href="javascript:;" class="aui-card-list-link">
<i class="icon icon-arrow"></i>详情
</a>
</div>
</div>
<div class="aui-card-list">
<div class="aui-card-list-bg">
<h2>银行卡1</h2>
<a href="javascript:;" class="aui-card-list-link">
<i class="icon icon-arrow"></i>详情
</a>
</div>
</div>
<div class="aui-card-list aui-card-blue">
<div class="aui-card-list-bg aui-card-list-loan">
<h2>银行卡2</h2>
<a href="javascript:;" class="aui-card-list-link">
<i class="icon icon-arrow"></i>详情
</a>
</div>
</div>
<div class="aui-card-list aui-card-blue">
<div class="aui-card-list-bg aui-card-list-loan">
<h2>银行卡2</h2>
<a href="javascript:;" class="aui-card-list-link">
<i class="icon icon-arrow"></i>详情
</a>
</div>
</div>
</div>
</section>
</section>
</body>
</html>

@ -0,0 +1,242 @@
/* 公共样式表css */
html,body {
color: #333;
margin: 0;
height: 100%;
font-family: "Myriad Set Pro","Helvetica Neue",Helvetica,Arial,Verdana,sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: normal;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
a, label, button, input, select {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a {
text-decoration: none;
color: #000;
}
img {
border: 0;
}
body {
background: #f8f8f8;
color: #666;
}
html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, button, fieldset, form, input, legend, textarea, th, td {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #08acee;
}
button {
outline: 0;
}
img {
border: 0;
}
button,input,optgroup,select,textarea {
margin: 0;
font: inherit;
color: inherit;
outline: none;
}
li {
list-style: none;
}
a {
color: #666;
}
.clearfix::after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix {
}
/* 必要布局样式css */
.aui-flexView {
width: 100%;
height: 100%;
margin: 0 auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.aui-navBar {
height: 44px;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
background-color: rgba(255, 255, 255, 0.99);
}
.aui-navBar-item {
height: 44px;
min-width: 25%;
-webkit-box-flex: 0;
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
padding: 0 10px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
font-size: 0.8rem;
white-space: nowrap;
overflow: hidden;
color: #5C5C5C;
}
.icon {
width: 18px;
height: 18px;
background-size: 18px;
display: block;
}
.icon-return {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAC3UlEQVRoQ93bvYvUQBQA8PdmsqyyIsgJFgcKWrjgkuwaRLjGww8EQQQFsbE5re5fEGyEq+wsbESr66wUjhNUPPUEi5mBxUbwT7ARDovbNSOjicTlcgfJfLzd9DOZX/Lem7yEIEzJ0e125zqdzrLWektK+QgAxnWWjnUG+R7T6/WOtNvtTwBw3Jxba70ipbxXZx3kwZPYHLwhpVycOXAFdltrfUUp9WamwFVYALgmpVyvgzVjSIa0KyxJsEssOXCSJPNRFL0vqnEetmOt9dUmYVwOfzIhnWPN1nO0tMBxlmU3lFIv6ubs5DgSYF9YEiHtExsc7BsbFFyB/ZVl2XWbOUsih3fB3lJKPbdVoHaax3vRCon1HtKhsV7BO2H13+Om6zD2/uBRhQWA21LKVZc5671oUcI6D2lqWKdgilhn4F0K1F2l1FOfOes8hyljrd9h6lir4GnAWgNXPEFBlmV3Ques9RweDAbHGGPmtUz5TYU5z7IQ4nHIAmW9eTBYRNxExPmJyUliG4V0HMenoyjaBIB9fybCf40XWWwjcJqm3wDgxLTc2WKdtfvhNE2/A8BcMZHWehsRLwghPlLLWyvdUpIkS5zzJ1iKZQD4CQCXKaNr32Fz1fr9/iXG2EtEbJeuIml0I3COXmSMrU8LujF42tBWwHugzwshPlMpZNbABZpzvgYA+0vVewsRL1JBWwXn6AXO+WuqaOtg6mgnYMpoZ2CqaKfgAs0Ye4WIBygUMufgHH2GMfaWAtoLmBLaG5gK2iu4QOf79MEQOe0dnKP7nPMNAPCODgIOiQ4GDoUOCt4DfU4IIW13WcHBBTrfpw+VgD8AwLSWVtEkwAaZJMkpzvkHRHSKJgP2hSYF9oEmB3aNJgku0FEUvQOAwzYLGVmwQcZxfLLVapkvGf+hR6PR2eFw+LXOlkUaXIXWWj+TUi7NJLgCfV8I8WBmwXlOm/8hVrTWX6SUD80PanXAvwF8evVM7fdtLQAAAABJRU5ErkJggg==');
}
.aui-center {
-webkit-box-ordinal-group: 3;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 44px;
width: 50%;
}
.aui-center-title {
text-align: center;
width: 100%;
white-space: nowrap;
overflow: hidden;
display: block;
text-overflow: ellipsis;
font-size: 0.9rem;
color: #333333;
}
.aui-scrollView {
width: 100%;
height: 100%;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
position: relative;
margin-bottom: 1px;
}
.aui-box-item {
padding: 15px 10px;
}
.aui-card-list {
height: 140px;
border-radius: 8px;
background-image: -webkit-gradient(linear,left top,right top,from(#fe9b2c),to(#ff7b03));
background-image: -webkit-linear-gradient(left,#fe9b2c,#ff7b03);
background-image: -moz-linear-gradient(left,#fe9b2c,#ff7b03);
background-image: linear-gradient(to right,#fe9b2c,#ff7b03);
background-color: #ff7b03;
margin-bottom: 20px;
}
.aui-card-blue {
background-image: -webkit-gradient(linear,left top,right top,from(#60a5f5),to(#006ae3));
background-image: -webkit-linear-gradient(left,#60a5f5,#006ae3);
background-image: -moz-linear-gradient(left,#60a5f5,#006ae3);
background-image: linear-gradient(to right,#60a5f5,#006ae3);
background-color: #006ae3;
}
.aui-card-list-bg {
padding-left: 20px;
padding-top: 20px;
background: url("icon-pig.png")/*tpa=http://www.17sucai.com/preview/1268063/2018-07-17/BankCard/images/icon-pig.png*/ no-repeat right;
background-size: contain;
height: 140px;
position: relative;
}
.aui-card-list-loan {
background: url("icon-loan.png")/*tpa=http://www.17sucai.com/preview/1268063/2018-07-17/BankCard/images/icon-loan.png*/ no-repeat right;
background-size: contain;
}
.aui-card-list-bg h2 {
color: #fff;
font-size: 1.2rem;
font-weight: normal;
}
.aui-card-list-link {
position: absolute;
right: 30px;
bottom: 15px;
font-size: 0.8rem;
color: #fff;
text-align: right;
}
.icon-arrow {
position: absolute;
right: -20px;
bottom: 0;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NkRFNDJCMTQ4MUIxMTFFOEE0MTJEMkRDQTIwN0VGOUYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NkRFNDJCMTU4MUIxMTFFOEE0MTJEMkRDQTIwN0VGOUYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2REU0MkIxMjgxQjExMUU4QTQxMkQyRENBMjA3RUY5RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2REU0MkIxMzgxQjExMUU4QTQxMkQyRENBMjA3RUY5RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsJXOMQAAAJ5SURBVHja7JpNSFVBFIDve2oaLRIFkcqKhBYVtIlCXGZEBkEQ0boWLgI3GoIlKgghBBFCLYV2iSIVGG2MaFUQboykHzV/QET6QQ3Mn9s3MA/ldq4E94rDcQ58PJjFhe/dMzNnztxMGIbBTopssMPCC3thL+yFvbAX9sLbF/kpPGMPVNnftzDjtLEpLRNQCE/D9RiCSwmfuaVkEtbSxfAjMrYE96DF/J/a5vAvaITfG8YK4Ta8gAptKZ3jPHwI/41vUOtSSqf5sMPwRJD+A20ahQ27oBGWBPEB2KdNOEcNjMSk+AWNwoaD0CNIr0IrZLUJGwrgFizHpPh+bcI5zsJXQXoCzmkUDuzb7BOk16AZ8rUJG/LgjpWMhilRD2gT3lioTAjSY3aFVydsqLALl7SKN0GRNuHAzttWKymleKU24Rym3p4SpEfTrsVdOquaFH8pSC/bhW63NuHAVl8dsCKI98Pp7W4AbFXUQhcciYzPQjV80dbEG4BeYbwMzrjQAEiTvfAwlONZ0orMNdnj8CqmidCkbdG6CNOC7LQ9fKjZlrK2SyKtzK/hkKZ9uAS6Y+brg7T2XleEj8E7QXQRbmg7PFyGWUH2UxrFhUvCZr62bLLllGs6D5fGNPVMtNsWr5qOx0kYFkTn4Iq2ntZV+CnIvocTmrqWpgTsjEnhxzbF1fSlyzZp3zTYZp6amwezrXwWZCdt+ajqbuk6zAuyg3BU0+2huVK5HzNfH9kjn5rr0vKYI50pEesgo+kbjyJ4A6ci4yNwEwZda6UkFS6FucjYc6iHcY0fpn2HZvgIC3AXrrkqm8Yb9p8eemEv7IW9sBf2wl74v+OvAAMAnNUWIiVsUYIAAAAASUVORK5CYII=');
}

@ -109,7 +109,7 @@
<a href="javascript:;" target="_blank"> </a>
</li>
<li>
<a href="javascript:;" target="_blank">eeeeee</a>
<a href="javascript:;" target="_blank">消息通知(待开发)</a>
</li>
</ul>
</div>

@ -1,16 +1,4 @@
/*
<!--
* 17vip
* http://www.17sucai.com/pins/vip
*
* Copyright ,
*
*
*
-->
*/
html,body {
color: #333;
margin: 0;

@ -16,7 +16,7 @@ public interface userMapper {
@Select("select * from user where telephoneNum = #{telephoneNum}")
public User selectUserBytelephoneNum(String telephoneNum);
@Select("select count(*) from user where userName!='null'")
@Select("select count(*) from user")
public long count();
@Select("select * from user")

@ -30,7 +30,7 @@ public class PayCirService {
double repamount = 0;
long productNum = usageDate.getProductNum();
long userNum = usageDate.getUserNum();
int bankNum = usageDate.getBankNum();
long bankNum = usageDate.getBankNum();
double amount = usageDate.getAmount();
if (repayment != null)

@ -0,0 +1,11 @@
package com.example.demo.loginService.API;
import com.example.demo.bean.User;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface UserService {
public User selectUserByuserName(String userName);
public User selectUserBytelephoneNum(String telephoneNum);
public void insertUser(long userNum, String userName, String userPwd, String registerTime, String userRight);
public long count();
}

@ -9,7 +9,7 @@ import java.io.IOException;
@WebFilter(filterName = "sessionFilter",urlPatterns = {"/*"})
public class SessionFilter implements Filter {
String NO_LOGIN="/notLogin";
String includeUrl=new String("redirect:http://localhost:8080/firstproject/demo/Front-end/Login/Login.html");
String[] includeUrls=new String[]{"redirect:http://localhost:8080/firstproject/demo/Front-end/Login/Login.html","redirect:http://localhost:8080/firstproject/demo/Front-end/Login/Login1.html"};
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws ServletException,IOException{
HttpServletRequest request=(HttpServletRequest) servletRequest;
@ -32,7 +32,7 @@ public class SessionFilter implements Filter {
response.sendRedirect(NO_LOGIN);
}else{
//重定向到登录页(需要在static文件夹下建立此html文件)
response.sendRedirect(request.getContextPath()+includeUrl);
response.sendRedirect(request.getContextPath()+"redirect:http://localhost:8080/firstproject/demo/Front-end/Login/Login.html");
}
return;
}
@ -40,10 +40,12 @@ public class SessionFilter implements Filter {
}
public boolean isNeedFilter(String uri){
if(includeUrl.equals(uri)){
return false;
}
public boolean isNeedFilter(String uri) {
for (String includeUrl : includeUrls) {
if (includeUrl.equals(uri)) {
return false;
}
}
return true;
}

@ -1,7 +1,7 @@
package com.example.demo.loginService;
import com.example.demo.bean.User;
import com.example.demo.loginService.API.impl.UserService;
import com.example.demo.loginService.API.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
@ -9,7 +9,6 @@ import org.springframework.web.bind.annotation.PostMapping;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.text.SimpleDateFormat;
@ -20,31 +19,38 @@ import java.util.Date;
public class UserController extends HttpServlet {
@Autowired
private UserService userService;
//private User user = new User();
// private String userPwd;
private User user;
private String userPwd;
@PostMapping("/login")
public void handle(HttpServletRequest request,HttpServletResponse response)throws Exception{
String action=request.getParameter("action");
if(action.equals("登录")){
doPost1(request,response);
public String doPost(HttpServletRequest request){
String userName = request.getParameter("userName");
userPwd = request.getParameter("userPwd");
user = this.userService.selectUserByuserName(userName);
if(user!=null){
if(user.getUserPwd().equals(userPwd)){
HttpSession session=request.getSession();
session.setAttribute("user",user);
return "redirect:http://localhost:8080/firstproject/demo/Front-end/首页/index.html";
}
else{
return "/userPwdError";
}
}else{
doPost3(request,response);
return "/userNotExist";
}
}
public String doPost3(HttpServletRequest request,HttpServletResponse response){
@PostMapping("/login1")
public String doPost1(HttpServletRequest request){
String userName = request.getParameter("userName");
String userPwd = request.getParameter("userPwd");
userPwd = request.getParameter("userPwd");
String userPwd1=request.getParameter("userPwd1");
User user=this.userService.selectUserByuserName("userName");
user=this.userService.selectUserByuserName("userName");
if(user!=null){
return "/operateError";
}
if(userPwd.equals(userPwd1)){
}else if(userPwd.equals(userPwd1)){
long count = this.userService.count()+1;
SimpleDateFormat dateFormat=new SimpleDateFormat("yyyy-MM-dd HH-mm-ss");
SimpleDateFormat dateFormat=new SimpleDateFormat("yyyy-MM-dd HH-mm-ss");
String registerTime=dateFormat.format(new Date());
String userRight="0";
this.userService.insertUser(count, userName, userPwd,registerTime,userRight);
@ -54,27 +60,6 @@ public class UserController extends HttpServlet {
}
}
public String doPost1(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException {
String userName = request.getParameter("userName");
String userPwd = request.getParameter("userPwd");
User user = this.userService.selectUserByuserName(userName);
if(user!=null){
if(user.getUserPwd().equals(userPwd)){
HttpSession session=request.getSession();
session.setAttribute("user",user);
//request.getRequestDispatcher("../首页/index.html").forward(request,response);
//return "redirect:http://localhost:8080/firstproject/demo/Front-end/首页/index.html";
return "/success";
}
else{
//response.sendRedirect("../userPwdError");
return "userPwdError";
}
}else{
//response.sendRedirect("../userNotExist");
return "/userNotExit";
}
}
/** @PostMapping("/Login1.do")
public void doPost2(HttpServletRequest request) {

@ -15,13 +15,13 @@ public class bankCardController extends HttpServlet {
private identify identify=new identify();
@RequestMapping("/phone")//手机表单界面
@RequestMapping("/binding")//卡号绑定界面
public String doPost(HttpServletResponse response, HttpServletRequest request){
try{
long num=1;//获取得到userNum
short result=0;
UserBankIdentify userBankIdentify=new UserBankIdentify();
userBankIdentify.setBankAccount(request.getParameter("mobile"));
userBankIdentify.setBankAccount(request.getParameter("bankAccount"));
userBankIdentify.setTrueName(request.getParameter("realname"));
userBankIdentify.setIdNum(request.getParameter("idNum"));
userBankIdentify.setTelephoneNum(request.getParameter("phoneNum"));
@ -31,6 +31,6 @@ public class bankCardController extends HttpServlet {
}catch (Exception e){
e.printStackTrace();
}
return "";//返回首页
return "../首页/index.html";//返回首页
}
}

Loading…
Cancel
Save