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>
|
||||
@ -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>
|
||||
@ -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,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;
|
||||
}
|
||||
|
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>
|
||||
|
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 |
|
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="确 定" />
|
||||
</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
|
After Width: | Height: | Size: 23 KiB |
@ -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%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Binary file not shown.
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>
|
||||
Binary file not shown.
@ -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);
|
||||
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">×</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
|
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;
|
||||
} */
|
||||
|
After Width: | Height: | Size: 13 KiB |
|
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=');
|
||||
}
|
||||
@ -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();
|
||||
}
|
||||
Loading…
Reference in new issue