201530126012@qq.com
7 years ago
parent
bafdf0e9e9
commit
9122fe2b8e
@ -0,0 +1,55 @@
|
|||||||
|
<!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"/>
|
||||||
|
</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:;" class="aui-navBar-item">
|
||||||
|
<i class="icon icon-sys"></i>
|
||||||
|
</a>
|
||||||
|
</header>
|
||||||
|
<section class="aui-scrollView">
|
||||||
|
<div class="aui-view-box">
|
||||||
|
<div class="aui-view-box-item">
|
||||||
|
<h2>请填写对应的真实信息！</h2>
|
||||||
|
</div>
|
||||||
|
<div class="aui-view-box-item">
|
||||||
|
<h2>您的个人信息:</h2>
|
||||||
|
<input type="text" placeholder="输入银行卡号">
|
||||||
|
<input type="text" placeholder="输入身份证号">
|
||||||
|
<input type="text" placeholder="输入对应的手机号">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="aui-view-box-item">
|
||||||
|
<p>请确保填写的信息无误！</p>
|
||||||
|
</div>
|
||||||
|
<div class="aui-btn-submit">
|
||||||
|
<button>提交</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<footer class="aui-footer aui-footer-fixed">
|
||||||
|
<p>
|
||||||
|
<span>
|
||||||
|
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</footer>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,324 @@
|
|||||||
|
|
||||||
|
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 {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 必要布局样式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;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-navBar {
|
||||||
|
height: 44px;
|
||||||
|
position: relative;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
z-index: 1002;
|
||||||
|
background: #fff;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: #a0a0a0;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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/NlyAAACh0lEQVRoQ+3ZMW8TMRQH8PcOsTBQISExVCIRCwgWFvZ+hZYBpIrEcTYkBsTGlI2VDamL3YEBpWJoR1BJaOlXYEzyDYp0bMRGRjnJoDuWs/1e3EbKeHf55b33vzsb4YJ98IJ54RKce8XZV1gIcQ8AviDiD2vtC631pzZFYQ2WUt611p4CwM0VcqqU2soSXIN1ztdKqTfZgRuw75RSz9tg3bHsWjomlh04NpYVOAWWDbjf7z8oimLipbH7bUopJdvO7L/Hk8+wwyLiCSLe8H6cww4BwGYFTo0lbWkKLBmYCksCrsNaa99rrZ/FmFnS0GrCdrvd3mg0MqEDqu58yVKaAzZZSwshHgLAsX/rcW2csrJVtaNXeIWdIuL16qJU2OgVrsMCwEGn03mSamaThVYTtizLp+PxeJkioJKFFldslJbmjA0O5o4NCm7AHpZluUM5s1FCSwjxCAA++7ceADiczWaPJ5PJL6qAihJaUspdY8w+Il7xLsASG6SlhRA/EfGa91BxNJ/Pd7hVNtiT1mAwOAeADXdCa637Hi0Wi3zBUsptY8wHRLzqwIh/nlbzbWmna0roLEOrmo11QQd9W1oHdFDwOrR3cLCH/uuFn0uQRQE7dMPKJHl6RwNzRUcF/w9N9VIRHVyhazbLDihWP5KAHbphOzQ5OhmYCzopmAM6OZgaTQL20FMAuOUtHESfaTLwCn3HWnuWEk0KpkCTg1OjWYArtDHmKyJu+jMdeh+KDdghh8NhZ7lcfvPRoXcaWYFToNmBY6NZgj20m+nb3pr3W631yzY7GWzBDtXr9TaLojjz0N+VUvezBXvoPQBw0Fda649Zg9vg6o5l3dKhse58l+AY/yqnc/4GvNDoTFOq8FwAAAAASUVORK5CYII=");
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-view-box {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-view-box-item h2 {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #484848;
|
||||||
|
padding: 0.8rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-view-box-item textarea {
|
||||||
|
background: #f4f4f4;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 0.8rem;
|
||||||
|
border: none;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
resize: none;
|
||||||
|
height: 10rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-view-box-item input {
|
||||||
|
background: #f4f4f4;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 0.8rem;
|
||||||
|
border: none;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
resize: none;
|
||||||
|
margin-bottom: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-view-box-item p {
|
||||||
|
color: #bdbdbd;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-btn-submit button {
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
border: none;
|
||||||
|
pointer-events: auto;
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
height: 3rem;
|
||||||
|
line-height: 3rem;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
border-radius: 50px;
|
||||||
|
background: #17bd88;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-footer {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
z-index: 100;
|
||||||
|
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;
|
||||||
|
padding: .104rem 0 .07rem;
|
||||||
|
background-color: rgba(255, 255, 255, 0.96);
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-footer-fixed {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 49;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-footer p {
|
||||||
|
-webkit-box-flex: 1;
|
||||||
|
-webkit-flex: 1;
|
||||||
|
-ms-flex: 1;
|
||||||
|
flex: 1;
|
||||||
|
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;
|
||||||
|
-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;
|
||||||
|
color: #979797;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-footer p {
|
||||||
|
color: #999;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-footer p em {
|
||||||
|
color: #17bd88;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
@ -0,0 +1,118 @@
|
|||||||
|
<!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"/>
|
||||||
|
</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">
|
||||||
|
<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">
|
||||||
|
<a href="javascript:;" class="aui-list-item">
|
||||||
|
<div class="aui-right-top"> </div>
|
||||||
|
<div class="aui-list-head">产品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>申请</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,95 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en-US">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Light Theme</title>
|
||||||
|
<link href="css/singlePageTemplate.css" rel="stylesheet" type="text/css">
|
||||||
|
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
|
||||||
|
<script>var __adobewebfontsappname__="dreamweaver"</script>
|
||||||
|
<script src="http://use.edgefonts.net/source-sans-pro:n2:default.js" type="text/javascript"></script>
|
||||||
|
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
||||||
|
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||||||
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Main Container -->
|
||||||
|
<div class="container">
|
||||||
|
<!-- Navigation -->
|
||||||
|
<header> <a href="">
|
||||||
|
</a>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li></li>
|
||||||
|
<li></li>
|
||||||
|
<li> </li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section class="hero" id="hero">
|
||||||
|
<h2 class="hero_header">标题 <span class="light">标题</span></h2>
|
||||||
|
<p class="tagline">标题下面内容</p>
|
||||||
|
</section>
|
||||||
|
<!-- About Section -->
|
||||||
|
<section class="about" id="about">
|
||||||
|
<h2 class="hidden">About</h2>
|
||||||
|
<p class="text_column">这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
|
||||||
|
<p class="text_column">这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
|
||||||
|
<p class="text_column">这里是内容这里是内容这里是内容</p>
|
||||||
|
</section>
|
||||||
|
<!-- Stats Gallery Section -->
|
||||||
|
<div class="gallery">
|
||||||
|
<div class="thumbnail">
|
||||||
|
<h1 class="stats">小标题</h1>
|
||||||
|
<h4>TITLE</h4>
|
||||||
|
<p>One line description</p>
|
||||||
|
</div>
|
||||||
|
<div class="thumbnail">
|
||||||
|
<h1 class="stats">小标题</h1>
|
||||||
|
<h4>TITLE</h4>
|
||||||
|
<p>One line description</p>
|
||||||
|
</div>
|
||||||
|
<div class="thumbnail">
|
||||||
|
<h1 class="stats">小标题</h1>
|
||||||
|
<h4>TITLE</h4>
|
||||||
|
<p>One line description</p>
|
||||||
|
</div>
|
||||||
|
<div class="thumbnail">
|
||||||
|
<h1 class="stats">小标题</h1>
|
||||||
|
<h4>TITLE</h4>
|
||||||
|
<p>One line description</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Parallax Section -->
|
||||||
|
<section class="banner">
|
||||||
|
<h2 class="parallax">文章标题</h2>
|
||||||
|
<p class="parallax_description">内容段落</p>
|
||||||
|
</section>
|
||||||
|
<!-- More Info Section -->
|
||||||
|
<footer>
|
||||||
|
<article class="footer_column">
|
||||||
|
<h3>ABOUT</h3>
|
||||||
|
<img src="images/placeholder.jpg" alt="" width="400" height="200" class="cards"/>
|
||||||
|
<p>文章段落</p>
|
||||||
|
</article>
|
||||||
|
<article class="footer_column">
|
||||||
|
<h3>LOCATION</h3>
|
||||||
|
<img src="images/placeholder.jpg" alt="" width="400" height="200" class="cards"/>
|
||||||
|
<p>文章段落 </p>
|
||||||
|
</article>
|
||||||
|
</footer>
|
||||||
|
<!-- Footer Section -->
|
||||||
|
<section class="footer_banner" id="contact">
|
||||||
|
<h2 class="hidden">Footer Banner Section </h2>
|
||||||
|
<p class="hero_header">了解 & 更多</p>
|
||||||
|
<div class="button" onclick="window.location=''">申请</div>
|
||||||
|
</section>
|
||||||
|
<!-- Copyrights Section --></div>
|
||||||
|
<!-- Main Container Ends -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,479 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
/* Body */
|
||||||
|
body {
|
||||||
|
font-family: source-sans-pro;
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-right: 0px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
margin-left: 0px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 200;
|
||||||
|
}
|
||||||
|
/* Container */
|
||||||
|
.container {
|
||||||
|
width: 90%;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
height: 1000px;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
/* Navigation */
|
||||||
|
header {
|
||||||
|
width: 100%;
|
||||||
|
height: 5%;
|
||||||
|
background-color: #52bad5;
|
||||||
|
border-bottom: 1px solid #2C9AB7;
|
||||||
|
}
|
||||||
|
.logo {
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: undefined;
|
||||||
|
width: 10%;
|
||||||
|
float: left;
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-left: 25px;
|
||||||
|
letter-spacing: 4px;
|
||||||
|
}
|
||||||
|
nav {
|
||||||
|
float: right;
|
||||||
|
width: 50%;
|
||||||
|
text-align: right;
|
||||||
|
margin-right: 25px;
|
||||||
|
}
|
||||||
|
header nav ul {
|
||||||
|
list-style: none;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
nav ul li {
|
||||||
|
float: left;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: left;
|
||||||
|
margin-right: 25px;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
font-weight: bold;
|
||||||
|
transition: all 0.3s linear;
|
||||||
|
}
|
||||||
|
ul li a {
|
||||||
|
color: #FFFFFF;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
ul li:hover a {
|
||||||
|
color: #2C9AB7;
|
||||||
|
}
|
||||||
|
.hero_header {
|
||||||
|
color: #FFFFFF;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-right: 0px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
margin-left: 0px;
|
||||||
|
letter-spacing: 4px;
|
||||||
|
}
|
||||||
|
/* Hero Section */
|
||||||
|
.hero {
|
||||||
|
background-color: #B3B3B3;
|
||||||
|
padding-top: 150px;
|
||||||
|
padding-bottom: 150px;
|
||||||
|
}
|
||||||
|
.light {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #717070;
|
||||||
|
}
|
||||||
|
.tagline {
|
||||||
|
text-align: center;
|
||||||
|
color: #FFFFFF;
|
||||||
|
margin-top: 4px;
|
||||||
|
font-weight: lighter;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
/* About Section */
|
||||||
|
.text_column {
|
||||||
|
width: 29%;
|
||||||
|
text-align: justify;
|
||||||
|
font-weight: lighter;
|
||||||
|
line-height: 25px;
|
||||||
|
float: left;
|
||||||
|
padding-left: 20px;
|
||||||
|
padding-right: 20px;
|
||||||
|
color: #A3A3A3;
|
||||||
|
}
|
||||||
|
.about {
|
||||||
|
padding-left: 25px;
|
||||||
|
padding-right: 25px;
|
||||||
|
padding-top: 35px;
|
||||||
|
display: inline-block;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
/* Stats Gallery */
|
||||||
|
.stats {
|
||||||
|
color: #717070;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.gallery {
|
||||||
|
clear: both;
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
/* [disabled]min-width: 400px;
|
||||||
|
*/
|
||||||
|
padding-bottom: 35px;
|
||||||
|
padding-top: 0px;
|
||||||
|
margin-top: -5px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
.thumbnail {
|
||||||
|
width: 25%;
|
||||||
|
text-align: center;
|
||||||
|
float: left;
|
||||||
|
margin-top: 35px;
|
||||||
|
}
|
||||||
|
.gallery .thumbnail h4 {
|
||||||
|
margin-top: 5px;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
margin-left: 5px;
|
||||||
|
color: #52BAD5;
|
||||||
|
}
|
||||||
|
.gallery .thumbnail p {
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-right: 0px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
margin-left: 0px;
|
||||||
|
color: #A3A3A3;
|
||||||
|
}
|
||||||
|
/* Parallax Section */
|
||||||
|
.banner {
|
||||||
|
background-color: #2D9AB7;
|
||||||
|
background-image: url(../images/parallax.png);
|
||||||
|
height: 400px;
|
||||||
|
background-attachment: fixed;
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
.parallax {
|
||||||
|
color: #FFFFFF;
|
||||||
|
text-align: right;
|
||||||
|
padding-right: 100px;
|
||||||
|
padding-top: 110px;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
.parallax_description {
|
||||||
|
color: #FFFFFF;
|
||||||
|
text-align: right;
|
||||||
|
padding-right: 100px;
|
||||||
|
width: 30%;
|
||||||
|
float: right;
|
||||||
|
font-weight: lighter;
|
||||||
|
line-height: 23px;
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-right: 0px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
margin-left: 0px;
|
||||||
|
}
|
||||||
|
/* More info */
|
||||||
|
footer {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
padding-bottom: 35px;
|
||||||
|
}
|
||||||
|
.footer_column {
|
||||||
|
width: 50%;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 30px;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
footer .footer_column h3 {
|
||||||
|
color: #B3B3B3;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
footer .footer_column p {
|
||||||
|
color: #717070;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
.cards {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
max-width: 400px;
|
||||||
|
max-height: 200px;
|
||||||
|
}
|
||||||
|
footer .footer_column p {
|
||||||
|
padding-left: 30px;
|
||||||
|
padding-right: 30px;
|
||||||
|
text-align: justify;
|
||||||
|
line-height: 25px;
|
||||||
|
font-weight: lighter;
|
||||||
|
margin-left: 20px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
.button {
|
||||||
|
width: 200px;
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-bottom: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
padding-top: 20px;
|
||||||
|
padding-right: 10px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
padding-left: 10px;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
border-radius: 0px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: bold;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
border: 3px solid #FFFFFF;
|
||||||
|
color: #FFFFFF;
|
||||||
|
transition: all 0.3s linear;
|
||||||
|
}
|
||||||
|
.button:hover {
|
||||||
|
background-color: #FEFEFE;
|
||||||
|
color: #C4C4C4;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.copyright {
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 20px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
background-color: #717070;
|
||||||
|
color: #FFFFFF;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: lighter;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
border-top-width: 2px;
|
||||||
|
}
|
||||||
|
.footer_banner {
|
||||||
|
background-color: #B3B3B3;
|
||||||
|
padding-top: 60px;
|
||||||
|
padding-bottom: 60PX;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
background-image: url(../images/pattern.png);
|
||||||
|
background-repeat: repeat;
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile */
|
||||||
|
@media (max-width: 320px) {
|
||||||
|
.logo {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 13px;
|
||||||
|
margin-right: 0px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
margin-left: 0px;
|
||||||
|
}
|
||||||
|
.container header nav {
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-right: 0px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
margin-left: 0px;
|
||||||
|
width: 100%;
|
||||||
|
float: none;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
header nav ul {
|
||||||
|
}
|
||||||
|
nav ul li {
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-right: 0px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
margin-left: 0px;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.text_column {
|
||||||
|
width: 100%;
|
||||||
|
text-align: justify;
|
||||||
|
padding-top: 0px;
|
||||||
|
padding-right: 0px;
|
||||||
|
padding-bottom: 0px;
|
||||||
|
padding-left: 0px;
|
||||||
|
}
|
||||||
|
.thumbnail {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.footer_column {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
.parallax {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-right: 0px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
margin-left: 0px;
|
||||||
|
padding-top: 40%;
|
||||||
|
padding-right: 0px;
|
||||||
|
padding-bottom: 0px;
|
||||||
|
padding-left: 0px;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
.parallax_description {
|
||||||
|
padding-top: 0px;
|
||||||
|
padding-right: 0px;
|
||||||
|
padding-bottom: 0px;
|
||||||
|
padding-left: 0px;
|
||||||
|
width: 90%;
|
||||||
|
margin-top: 25px;
|
||||||
|
margin-right: 0px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
margin-left: 12px;
|
||||||
|
float: none;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.banner {
|
||||||
|
background-color: #2D9AB7;
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
.tagline {
|
||||||
|
margin-top: 20px;
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
.hero_header {
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 10px;
|
||||||
|
line-height: 22px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small Tablets */
|
||||||
|
@media (min-width: 321px)and (max-width: 767px) {
|
||||||
|
.logo {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 13px;
|
||||||
|
margin-right: 0px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
margin-left: 0px;
|
||||||
|
color: #043745;
|
||||||
|
}
|
||||||
|
.container header nav {
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-right: 0px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
margin-left: 0px;
|
||||||
|
width: 100%;
|
||||||
|
float: none;
|
||||||
|
overflow: auto;
|
||||||
|
display: inline-block;
|
||||||
|
background: #52bad5;
|
||||||
|
}
|
||||||
|
header nav ul {
|
||||||
|
padding: 0px;
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
nav ul li {
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-right: 0px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
margin-left: 0px;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 8px;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
}
|
||||||
|
.text_column {
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
padding-top: 0px;
|
||||||
|
padding-right: 0px;
|
||||||
|
padding-bottom: 0px;
|
||||||
|
padding-left: 0px;
|
||||||
|
}
|
||||||
|
.thumbnail {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.footer_column {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
.parallax {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-right: 0px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
margin-left: 0px;
|
||||||
|
padding-top: 40%;
|
||||||
|
padding-right: 0px;
|
||||||
|
padding-bottom: 0px;
|
||||||
|
padding-left: 0px;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
.parallax_description {
|
||||||
|
padding-top: 0px;
|
||||||
|
padding-right: 0px;
|
||||||
|
padding-bottom: 0px;
|
||||||
|
padding-left: 0px;
|
||||||
|
margin-top: 30%;
|
||||||
|
margin-right: 0px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
margin-left: 0px;
|
||||||
|
float: none;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.thumbnail {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
.parallax {
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-right: 0px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
margin-left: 0px;
|
||||||
|
padding-right: 0px;
|
||||||
|
padding-bottom: 0px;
|
||||||
|
padding-left: 0px;
|
||||||
|
padding-top: 20%;
|
||||||
|
}
|
||||||
|
.parallax_description {
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-right: 0px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
margin-left: 0px;
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 30px;
|
||||||
|
}
|
||||||
|
.banner {
|
||||||
|
padding-left: 20px;
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
|
.footer_column {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small Desktops */
|
||||||
|
@media (min-width: 768px) and (max-width: 1096px) {
|
||||||
|
.text_column {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.thumbnail {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
.text_column {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-right: 0px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
margin-left: 0px;
|
||||||
|
padding-top: 0px;
|
||||||
|
padding-right: 0px;
|
||||||
|
padding-bottom: 0px;
|
||||||
|
padding-left: 0px;
|
||||||
|
}
|
||||||
|
.banner {
|
||||||
|
margin-top: 0px;
|
||||||
|
padding-top: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 16 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>
|
||||||
|
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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
After Width: | Height: | Size: 10 KiB |
@ -0,0 +1,16 @@
|
|||||||
|
@charset 'utf-8';
|
||||||
|
html{color:#000;background:#FFF;font-family:'Microsoft YaHei',sans-serif,Arial;}
|
||||||
|
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,strong{padding:0;margin:0;font-family:'Microsoft YaHei',sans-serif,Arial;}
|
||||||
|
table{border-collapse:collapse;border-spacing:0;}
|
||||||
|
img{border:0;}
|
||||||
|
a{text-decoration:none; color:#333; outline:none;}
|
||||||
|
a:hover{text-decoration:underline;}
|
||||||
|
var,em,strong{font-style:normal;}
|
||||||
|
em,strong,th,var{font-style:inherit;font-weight:inherit;}
|
||||||
|
li{list-style:none;}
|
||||||
|
caption,th{text-align:left;}
|
||||||
|
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
|
||||||
|
input,button,textarea,select,optgroup,option{font-family:inherit; font-size:inherit;font-style:inherit;font-weight:inherit;}
|
||||||
|
input,button,textarea,select{*font-size:100%;}
|
||||||
|
.clearfix {*zoom: 1;}
|
||||||
|
.clearfix:after {content: '\200B';clear: both;display: block;height: 0px;}
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, target-densitydpi=device-dpi" name="viewport" >
|
||||||
|
<link rel="stylesheet" type="text/css" href="reset.css" >
|
||||||
|
<link rel="stylesheet" type="text/css" href="weichat.css">
|
||||||
|
<title>My Wallet</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="wallet-content">
|
||||||
|
<div class="wallet-box">
|
||||||
|
<img src="aq.png" >
|
||||||
|
<h2>您的订单已提交</h2>
|
||||||
|
<h3>请耐心等候银行审批</h3>
|
||||||
|
|
||||||
|
<button class="out">返回首页</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom"> </div>
|
||||||
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,283 @@
|
|||||||
|
@charset"utf-8";
|
||||||
|
html{
|
||||||
|
background: #f0eff5;
|
||||||
|
}
|
||||||
|
.wrap{
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
background: #f0f0f0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.top-bar{
|
||||||
|
width: 100%;
|
||||||
|
height: 2em;
|
||||||
|
background: #6C7B8B;
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
.goback{
|
||||||
|
width: 2em;
|
||||||
|
height: 2em;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.goback img{
|
||||||
|
width: 1em;
|
||||||
|
height:1em;
|
||||||
|
position: absolute;
|
||||||
|
top: 0.5em;
|
||||||
|
left: 0.2em;
|
||||||
|
}
|
||||||
|
.wrap h1{
|
||||||
|
font-size: 1em;
|
||||||
|
color:white;
|
||||||
|
position: absolute;
|
||||||
|
left: 2em;
|
||||||
|
line-height: 2em;
|
||||||
|
}
|
||||||
|
.more{
|
||||||
|
width: 2em;
|
||||||
|
height: 2em;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.more img{
|
||||||
|
width: 2em;
|
||||||
|
height: 2em;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0.2em;
|
||||||
|
}
|
||||||
|
.top-con{
|
||||||
|
width: 100%;
|
||||||
|
height: 10em;
|
||||||
|
position: absolute;
|
||||||
|
top: 2em;
|
||||||
|
background: #6C7B8B;
|
||||||
|
}
|
||||||
|
.top-con-box{
|
||||||
|
width: 12%;
|
||||||
|
height: 3em;
|
||||||
|
float: left;
|
||||||
|
margin-right:16%;
|
||||||
|
margin-top: 2.5em;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.top-con-box:first-child{
|
||||||
|
margin-left: 16%;
|
||||||
|
}
|
||||||
|
.top-con-box:last-child{
|
||||||
|
margin-right: 16%;
|
||||||
|
}
|
||||||
|
.top-con-box img{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.top-con-box h4{
|
||||||
|
color:white;
|
||||||
|
font-size:1em;
|
||||||
|
}
|
||||||
|
.top-con-box p{
|
||||||
|
font-size: 0.2em;
|
||||||
|
color:white;
|
||||||
|
}
|
||||||
|
.content{
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
position: absolute;
|
||||||
|
top: 12.2em;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
.con-bar{
|
||||||
|
width: 100%;
|
||||||
|
height: 2em;
|
||||||
|
line-height: 2em;
|
||||||
|
color:#696969;
|
||||||
|
}
|
||||||
|
.con-bar h5{
|
||||||
|
font-size: 1em;
|
||||||
|
position: absolute;
|
||||||
|
left: 1em;
|
||||||
|
}
|
||||||
|
.con-box{
|
||||||
|
width:32.6% ;
|
||||||
|
height: 8em;
|
||||||
|
border:1px solid #f0f0f0;
|
||||||
|
float: left;
|
||||||
|
margin-left: -1px;
|
||||||
|
margin-top: -1px;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 2em;
|
||||||
|
}
|
||||||
|
.con-box img{
|
||||||
|
width: 70%;
|
||||||
|
height: 70%;
|
||||||
|
}
|
||||||
|
.con-box h5{
|
||||||
|
font-size: 0.6em;
|
||||||
|
color:#696969;
|
||||||
|
}
|
||||||
|
.wallet-more{
|
||||||
|
width: 4em;
|
||||||
|
height: 2em;
|
||||||
|
position: absolute;
|
||||||
|
right: 1em;
|
||||||
|
top:0;
|
||||||
|
line-height: 2.5em;
|
||||||
|
color:white;
|
||||||
|
font-size: 0.2em;
|
||||||
|
}
|
||||||
|
.wallet-content{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
top: 2em;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 10%;
|
||||||
|
}
|
||||||
|
.wallet-box{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.wallet-box img{
|
||||||
|
width: 20%;
|
||||||
|
height: 20%;
|
||||||
|
}
|
||||||
|
.wallet-box h2{
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
.wallet-box h3{
|
||||||
|
font-size: 2em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.wallet-box p{
|
||||||
|
font-size: 11px;
|
||||||
|
color:#586699;
|
||||||
|
}
|
||||||
|
.in-int{
|
||||||
|
width: 90%;
|
||||||
|
height: 2.6em;
|
||||||
|
border:none;
|
||||||
|
background: #19ab18;
|
||||||
|
border-radius: 2px;
|
||||||
|
color: white;
|
||||||
|
outline: none;
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
.out{
|
||||||
|
width: 90%;
|
||||||
|
height: 2.6em;
|
||||||
|
border:1px solid #ccc;
|
||||||
|
border-radius: 2px;
|
||||||
|
margin-top: 0.5em;
|
||||||
|
margin-bottom: 2em;
|
||||||
|
background: transparent;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.bottom{
|
||||||
|
position: absolute;
|
||||||
|
bottom:0.5em;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.qs{
|
||||||
|
font-size: 11px;
|
||||||
|
color:#606f8b;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
.ser{
|
||||||
|
color:#b8b8ba;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
.tixian-box{
|
||||||
|
width: 90%;
|
||||||
|
height: 15em;
|
||||||
|
position: absolute;
|
||||||
|
top: 3em;
|
||||||
|
box-shadow: 1px 1px 3px #ccc;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
left: 5%;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.tobank{
|
||||||
|
width: 100%;
|
||||||
|
height: 6em;
|
||||||
|
background:#fcfcfc;
|
||||||
|
}
|
||||||
|
.dzyh{
|
||||||
|
font-size: 0.6em;
|
||||||
|
color:#1a1a1a;
|
||||||
|
position: absolute;
|
||||||
|
left: 8%;
|
||||||
|
top: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yhk{
|
||||||
|
font-size: 0.8em;
|
||||||
|
color:#565899;
|
||||||
|
position: absolute;
|
||||||
|
top: 5%;
|
||||||
|
left: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dz{
|
||||||
|
font-size: 0.8em;
|
||||||
|
color:#bdbdbd;
|
||||||
|
position: absolute;
|
||||||
|
top: 14%;
|
||||||
|
left: 30%;
|
||||||
|
}
|
||||||
|
.t-moneys{
|
||||||
|
background: #ffffff;
|
||||||
|
width: 100%;
|
||||||
|
height: 9em;
|
||||||
|
}
|
||||||
|
.txje{
|
||||||
|
font-size: 0.8em;
|
||||||
|
color:#1a1a1a;
|
||||||
|
position: absolute;
|
||||||
|
left: 8%;
|
||||||
|
}
|
||||||
|
.rmb{
|
||||||
|
font-size: 2em;
|
||||||
|
position: absolute;
|
||||||
|
left: 8%;
|
||||||
|
top: 45%;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
.t-input{
|
||||||
|
width: 75%;
|
||||||
|
height: 2.8em;
|
||||||
|
border:none;
|
||||||
|
border-bottom: 2px solid #e7e7e7;
|
||||||
|
position: relative;
|
||||||
|
left: 3.5%;
|
||||||
|
outline: none;
|
||||||
|
padding-left: 15%;
|
||||||
|
}
|
||||||
|
.kyye{
|
||||||
|
font-size: 0.8em;
|
||||||
|
position: relative;
|
||||||
|
top: 50%;
|
||||||
|
left: 8%;
|
||||||
|
color:#bdbdbd;
|
||||||
|
}
|
||||||
|
.kyye a{
|
||||||
|
color:#565899;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
#getout{
|
||||||
|
width: 90%;
|
||||||
|
height: 2.5em;
|
||||||
|
position: relative;
|
||||||
|
top:20%;
|
||||||
|
left: 5%;
|
||||||
|
border:none;
|
||||||
|
background: #19ab18;
|
||||||
|
outline: none;
|
||||||
|
border-radius: 2px;
|
||||||
|
color:white;
|
||||||
|
filter: alpha(opacity:40);
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
@ -0,0 +1,127 @@
|
|||||||
|
<!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"/>
|
||||||
|
</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:;" class="aui-navBar-item">
|
||||||
|
<i class="icon icon-set"></i>
|
||||||
|
<i class="icon icon-news"></i>
|
||||||
|
</a>
|
||||||
|
</header>
|
||||||
|
<section class="aui-scrollView">
|
||||||
|
<div class="aui-account-box">
|
||||||
|
<div class="aui-flex">
|
||||||
|
<div class="aui-account-user">
|
||||||
|
<img src="user-logo-004.png" >
|
||||||
|
</div>
|
||||||
|
<div class="aui-flex-box">
|
||||||
|
<h2>李同学</h2>
|
||||||
|
</div>
|
||||||
|
<div class="aui-account-arrow"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer class="aui-footer aui-footer-fixed"> <a href="javascript:;" class="aui-tabBar-item aui-tabBar-item-active"> <span class="aui-tabBar-item-icon"> <i class="icon icon-home"></i> </span> <span class="aui-tabBar-item-text">首页</span> </a> <a href="javascript:;" class="aui-tabBar-item "> <span class="aui-tabBar-item-icon"> <i class="icon icon-credit"></i></span> <span class="aui-tabBar-item-text">资讯</span></a> <a href="javascript:;" class="aui-tabBar-item "> <span class="aui-tabBar-item-icon"> <i class="icon icon-credit"></i> </span> <span class="aui-tabBar-item-text">商城</span> </a> <a href="javascript:;" class="aui-tabBar-item "> <span class="aui-tabBar-item-icon"> <i class="icon icon-me"></i> </span> <span class="aui-tabBar-item-text">我的</span> </a> </footer>
|
||||||
|
<div class="divHeight"></div>
|
||||||
|
<div class="aui-flex b-line">
|
||||||
|
<div class="aui-flex-box">
|
||||||
|
<h4>我的贷款</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="aui-layout">
|
||||||
|
<a href="javascript:;" class="aui-layout-item">
|
||||||
|
<div class="aui-icon-img">
|
||||||
|
<img src="icon-acc-001.png">
|
||||||
|
</div>
|
||||||
|
<h2>待完成订单</h2>
|
||||||
|
</a>
|
||||||
|
<a href="javascript:;" class="aui-layout-item">
|
||||||
|
<div class="aui-icon-img">
|
||||||
|
<img src="icon-acc-002.png" >
|
||||||
|
</div>
|
||||||
|
<h2>待还款订单</h2>
|
||||||
|
</a>
|
||||||
|
<a href="javascript:;" class="aui-layout-item">
|
||||||
|
<div class="aui-icon-img">
|
||||||
|
<img src="icon-acc-003.png" >
|
||||||
|
</div>
|
||||||
|
<h2>全部订单</h2>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="divHeight"></div>
|
||||||
|
<div class="aui-flex b-line">
|
||||||
|
<div class="aui-flex-box">
|
||||||
|
<h4>我的服务</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="aui-layout">
|
||||||
|
<a href="javascript:;" class="aui-layout-item">
|
||||||
|
<div class="aui-icon-img">
|
||||||
|
<img src="icon-acc-004.png" >
|
||||||
|
</div>
|
||||||
|
<h2>还款提醒</h2>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<a href="javascript:;" class="aui-layout-item">
|
||||||
|
<div class="aui-icon-img">
|
||||||
|
<img src="icon-acc-007.png">
|
||||||
|
</div>
|
||||||
|
<h2>我的银行卡</h2>
|
||||||
|
</a>
|
||||||
|
<a href="javascript:;" class="aui-layout-item">
|
||||||
|
<div class="aui-icon-img">
|
||||||
|
<img src="icon-acc-008.png" >
|
||||||
|
</div>
|
||||||
|
<h2>我的流水</h2>
|
||||||
|
</a>
|
||||||
|
<a href="javascript:;" class="aui-layout-item">
|
||||||
|
|
||||||
|
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="divHeight"></div>
|
||||||
|
</section>
|
||||||
|
<footer class="aui-footer aui-footer-fixed">
|
||||||
|
<a href="javascript:;" class="aui-tabBar-item ">
|
||||||
|
<span class="aui-tabBar-item-icon">
|
||||||
|
<i class="icon icon-loan"></i>
|
||||||
|
</span>
|
||||||
|
<span class="aui-tabBar-item-text">首页</span>
|
||||||
|
</a>
|
||||||
|
<a href="javascript:;" class="aui-tabBar-item ">
|
||||||
|
<span class="aui-tabBar-item-icon">
|
||||||
|
<i class="icon icon-ions"></i>
|
||||||
|
</span>
|
||||||
|
<span class="aui-tabBar-item-text">发现</span>
|
||||||
|
</a>
|
||||||
|
<a href="javascript:;" class="aui-tabBar-item aui-tabBar-item-active">
|
||||||
|
<span class="aui-tabBar-item-icon">
|
||||||
|
<i class="icon icon-meTo"></i>
|
||||||
|
</span>
|
||||||
|
<span class="aui-tabBar-item-text">我的</span> </span>
|
||||||
|
</a>
|
||||||
|
</footer>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
@ -0,0 +1,118 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||||
|
<meta content="telephone=no" name="format-detection" />
|
||||||
|
|
||||||
|
<link href="style.css" tppabs="http://www.17sucai.com/preview/1089623/2018-06-08/form/css/style.css" rel="stylesheet" type="text/css">
|
||||||
|
|
||||||
|
|
||||||
|
<title>注册判断</title>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(function (doc, win) {
|
||||||
|
var docEl = doc.documentElement,
|
||||||
|
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
|
||||||
|
recalc = function () {
|
||||||
|
var clientWidth = docEl.clientWidth;
|
||||||
|
if (!clientWidth) return;
|
||||||
|
if(clientWidth>=750){
|
||||||
|
docEl.style.fontSize = '100px';
|
||||||
|
}else{
|
||||||
|
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!doc.addEventListener) return;
|
||||||
|
win.addEventListener(resizeEvt, recalc, false);
|
||||||
|
doc.addEventListener('DOMContentLoaded', recalc, false);
|
||||||
|
})(document, window);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="Nav_bar">
|
||||||
|
<div class="left"><a href="#" onclick="history.go(-1)"><img src="left_arrow.png" ></a></div>
|
||||||
|
<div class="center">卡号绑定</div>
|
||||||
|
<div class="right"><img src="dian.png"></div>
|
||||||
|
</div>
|
||||||
|
<!--中间内容部分-->
|
||||||
|
<div id="content">
|
||||||
|
<div class="txt01">银行卡号<input type="number" id="mobile" name="mobile" class="text" value="" pattern="[0-9]*" tabindex="10" onChange="check_for_btn()" /></div>
|
||||||
|
<div class="txt01">真实姓名<input type="text" id="realname" name="realname" class="text" tabindex="7" onChange="check_for_btn()" /></div>
|
||||||
|
<div class="txt01">身份证号
|
||||||
|
<input type="text" id="realname" pattern="[0-9]*" name="realname" class="text" tabindex="6"/>
|
||||||
|
</div>
|
||||||
|
<div class="txt01">预留手机号<input type="number" id="realname" pattern="[0-9]*" name="realname" class="text1" tabindex="6"/></div>
|
||||||
|
</div>
|
||||||
|
<button id="btn" class="r_but" onClick="check()">确定</button>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="jquery-1.8.3.min.js" tppabs="http://www.17sucai.com/preview/1089623/2018-06-08/form/js/jquery-1.8.3.min.js"></script>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
//弹出框
|
||||||
|
function alert1(e) {
|
||||||
|
$("body").append("<div id='msg'><span>" + e + "</span></div>");
|
||||||
|
clearmsg();
|
||||||
|
}
|
||||||
|
|
||||||
|
//关闭弹出框
|
||||||
|
function clearmsg() {
|
||||||
|
var t = setTimeout(function() {
|
||||||
|
$("#msg").remove();
|
||||||
|
}, 2000)
|
||||||
|
};
|
||||||
|
|
||||||
|
//提交后的check
|
||||||
|
function check() {
|
||||||
|
|
||||||
|
var mobile = $("#mobile").val();
|
||||||
|
var realname = $("#realname").val();
|
||||||
|
|
||||||
|
if(mobile == "") {
|
||||||
|
alert1("请输入手机号");
|
||||||
|
clearmsg();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if(!(/^1[34578]\d{9}$/.test(mobile))) {
|
||||||
|
alert1("请输入正确的手机号");
|
||||||
|
clearmsg();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if(realname == "") {
|
||||||
|
alert1("请输入姓名");
|
||||||
|
clearmsg();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
$(".r_but").css("background", "#49b9eb");
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
//必填项没有全部填写时,灰色,全部填写时蓝色
|
||||||
|
function check_for_btn() {
|
||||||
|
var mobile = $("#mobile").val();
|
||||||
|
var realname = $("#realname").val();
|
||||||
|
if(realname == "" || mobile == null) {
|
||||||
|
$(".r_but").css("background", "#d1d5db");
|
||||||
|
}
|
||||||
|
if(realname != "" && mobile != null) {
|
||||||
|
$(".r_but").css("background", "#49b9eb");
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
$(function() {
|
||||||
|
|
||||||
|
$(".r_but").css("background", "#d1d5db");
|
||||||
|
|
||||||
|
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 3.0 KiB |
@ -0,0 +1,53 @@
|
|||||||
|
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img{
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-family: 'microsoft yahei','微软雅黑','abchanel-couture','华文细黑','STXHei','华文黑体','ST Heiti','MS黑体','MSHei','Arial','Helvetica','sans-serif';
|
||||||
|
background-color: #fff;
|
||||||
|
height: 100%;
|
||||||
|
max-width:7.5rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
li, ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
li, ul { list-style-type: none;}
|
||||||
|
img {
|
||||||
|
border: 0;
|
||||||
|
border: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
a, a:hover, a:visited {text-decoration: none;}
|
||||||
|
a{color: #000;}
|
||||||
|
a:hover, a:focus{
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
#Nav_bar{height:0.88rem; padding:0 0.2rem; background:#2d2d2e; color:#fff; font-size:0.28rem;}
|
||||||
|
#Nav_bar .left{width:20%; height:0.63rem; float:left; padding-top:0.25rem;}
|
||||||
|
#Nav_bar .left img{ width:0.2rem; height:0.38rem;}
|
||||||
|
#Nav_bar .center{width:60%; height:0.88rem; float:left; font-size:0.36rem; text-align:center; line-height:0.88rem;}
|
||||||
|
#Nav_bar .right{width:20%; height:0.88rem; float:right; text-align:right; line-height:0.88rem;}
|
||||||
|
#Nav_bar .right img{ width:0.5rem; height:0.1rem;}
|
||||||
|
|
||||||
|
#content{width:6.9rem; overflow:auto; padding:0 0.3rem;}
|
||||||
|
#content .txt01{width:100%; min-height:1.08rem; border-bottom:#dfdfdf solid 0.01rem; float:left; line-height:1.08rem; color:#666; font-size:0.3rem;}
|
||||||
|
.r_but{ width:5.5rem; height:0.98rem; background:#49b9eb; line-height:0.98rem; border:none; font-size:0.32rem; color:#fff; text-align:center; margin-left:1rem;}
|
||||||
|
select,input,textarea{
|
||||||
|
font-size: 0.28rem;
|
||||||
|
color: #999;
|
||||||
|
width: 70%;
|
||||||
|
height: 1rem;
|
||||||
|
float: right;
|
||||||
|
margin-right: 0.1rem;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.txt01 label{float:right; width:13%; height:0.48rem; text-align:right; margin-top:0.3rem; vertical-align:middle; line-height:0.48rem; margin-left:0.8rem;}
|
||||||
|
.txt01 span{ margin-bottom:-0.1rem;}
|
||||||
|
.txt01 a{float:right; height:1rem; width:80%; text-align:right; color:#999;}
|
||||||
|
/*弹出框样式*/
|
||||||
|
#msg {height: 1em; text-align: center; position: fixed; top: 50%; margin-top: -1rem; line-height: 2rem; width: 100%; }
|
||||||
|
#msg span {color: #ffffff; background: rgba(0, 0, 0, 0.5); height: 1.5em; padding: 0.5em 1.5em; border-radius: 6px; font-size: 26px; font-family: "microsoft yahei"; }
|
||||||
|
#btn {border-radius: 6px;}
|
||||||
Binary file not shown.
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 4.8 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
@ -0,0 +1,82 @@
|
|||||||
|
<!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"/>
|
||||||
|
</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:;" class="aui-navBar-item">
|
||||||
|
<i class="icon icon-member"></i>
|
||||||
|
</a>
|
||||||
|
</header>
|
||||||
|
<section class="aui-scrollView">
|
||||||
|
<div class="aui-layout">
|
||||||
|
<a href="javascript:void(0);" class="aui-layout-item">
|
||||||
|
<div class="aui-layout-item-img">
|
||||||
|
<img src="icon-item005.png" >
|
||||||
|
</div>
|
||||||
|
<div class="aui-layout-item-text">
|
||||||
|
<h4>消息提醒</h4>
|
||||||
|
<p>这里是消息内容</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="javascript:void(0);" class="aui-layout-item">
|
||||||
|
<div class="aui-layout-item-img">
|
||||||
|
<img src="icon-item002.png">
|
||||||
|
</div>
|
||||||
|
<div class="aui-layout-item-text">
|
||||||
|
<h4>客服</h4>
|
||||||
|
<p>这里是客服消息</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="javascript:void(0);" class="aui-layout-item">
|
||||||
|
<div class="aui-layout-item-img">
|
||||||
|
<img src="icon-item005.png" >
|
||||||
|
</div>
|
||||||
|
<div class="aui-layout-item-text">
|
||||||
|
<h4>消息提醒</h4>
|
||||||
|
<p>这是内容</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="javascript:void(0);" class="aui-layout-item">
|
||||||
|
<div class="aui-layout-item-img">
|
||||||
|
<img src="icon-item004.png" >
|
||||||
|
</div>
|
||||||
|
<div class="aui-layout-item-text">
|
||||||
|
<h4>互动消息</h4>
|
||||||
|
<p>XXXXX</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="javascript:void(0);" class="aui-layout-item">
|
||||||
|
<div class="aui-layout-item-img">
|
||||||
|
<img src="icon-item005.png">
|
||||||
|
</div>
|
||||||
|
<div class="aui-layout-item-text">
|
||||||
|
<h4>通知消息</h4>
|
||||||
|
<p>XXXX </p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,297 @@
|
|||||||
|
/* 公共样式表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: #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 {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 必要布局样式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.98);
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-navBar:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
border-bottom: 1px solid #B2B2B2;
|
||||||
|
-webkit-transform: scaleY(0.5);
|
||||||
|
transform: scaleY(0.5);
|
||||||
|
-webkit-transform-origin: 0 100%;
|
||||||
|
transform-origin: 0 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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-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.3rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
color: #5C5C5C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-navBar-item:first-child {
|
||||||
|
-webkit-box-ordinal-group: 2;
|
||||||
|
-webkit-order: 1;
|
||||||
|
-ms-flex-order: 1;
|
||||||
|
order: 1;
|
||||||
|
margin-right: -25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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/NlyAAACf0lEQVRoQ93bwYrUQBAA0Kokw+BNhMEVggruZRkIMfmB+YXFw85FQf0Ff8Nv0IvoQVDxA2RZQS/dk4X5AA8e1pOeB6ZLeplAwBkn6aS7q6dPgaSSflQnFBUagfnI8/xmHMcfAGBGRD+UUqdVVVWm00bTQBdxG+wXAMjr523QD6uq+mMyB7bgbdgG+qmU8vXBgP+H3SBPhRAfDwK8D0tE51LKmQlWx7Ba0i2wl0qpmen7ywrsAssG7ArLAuwS6x3sGusV7APrDewL6wXsE+sc7BvrFMwB6wzMBesEzAlrHcwNaxXMEWsNzBVrBcwZOziYO3ZQcAjYwcChYAcBh4TtDQ4N2wscItYYrLFRFF0i4t1t7VIi6t1dNG3D7oszatOWZXkFALcbfwKuDxEROGONMpxl2TxJkrca1xxEdI0lol59430Z6nu+c4aLojhDxHc7HvxJCPEIANZ9J2YrvjM4TdMbk8nkZxRFt3ZM6r0QYs4V3RmskdPp9Gg8HktEvBMa2gjcQF8g4nFIaGNwqOhe4BDRvcEd0GcAoGx9fdvedxBwGzQRvZFSPvGNHgzcQH9HxHs7Sk7v6EHBGpllWZokyVeu6MHB3NFWwJzR1sBc0VbBHNHWwdzQTsAd0I8BgNoWESbXOQO3RL+SUj63iXYKrtGj0egbAKQ7ihOraOdgjczz/H4cxxc+0F7APtHewL7QXsE+0N7BrtEswC7RbMAd0M9MCo46hhW4DRoAXgohXpii2YEbaF2cHG2DrddrvY3HaO8SS7BGFkVxjIi6OPkHTUSHtY2nzuo2NBH9Xq1WJ8vl8pfJsmab4RpTluUDIvqMiCcAcKWUmi8Wi3MTrI75C5IXV1vJTA+EAAAAAElFTkSuQmCC');
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-member {
|
||||||
|
background-image: url('data:image/png;base64,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');
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-center-title {
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
display: block;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #232326;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-layout-item {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 15px;
|
||||||
|
position: relative;
|
||||||
|
color: #000000;
|
||||||
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-layout-item-img {
|
||||||
|
margin-right: .8em;
|
||||||
|
width: 45px;
|
||||||
|
height: 45px;
|
||||||
|
line-height: 45px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-layout-item-img img {
|
||||||
|
width: 45px;
|
||||||
|
height: 45px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-layout-item-text p {
|
||||||
|
color: #808080;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.2;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-layout-item-text {
|
||||||
|
-webkit-box-flex: 1;
|
||||||
|
-webkit-flex: 1;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-layout-item-text h4 {
|
||||||
|
color: #333;
|
||||||
|
font-size: 1rem;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-layout-item-text p {
|
||||||
|
color: #999999;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-layout-item:after {
|
||||||
|
content: " ";
|
||||||
|
position: absolute;
|
||||||
|
left: 20px;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 1px;
|
||||||
|
border-bottom: 1px solid #E5E5E5;
|
||||||
|
color: #E5E5E5;
|
||||||
|
-webkit-transform-origin: 0 100%;
|
||||||
|
transform-origin: 0 100%;
|
||||||
|
-webkit-transform: scaleY(0.5);
|
||||||
|
transform: scaleY(0.5);
|
||||||
|
}
|
||||||
@ -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 it is too large
Load Diff
@ -0,0 +1,142 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"/>
|
||||||
|
<title>我的订单</title>
|
||||||
|
<link href="bootstrap.css" rel="stylesheet" type="text/css"/>
|
||||||
|
<link href="home.css" rel="stylesheet" type="text/css"/>
|
||||||
|
<link href="font_l6a0fwucxvzehfr.css" type="text/css"/>
|
||||||
|
<style type="text/css">
|
||||||
|
.tb960x90 {display:none!important;display:none}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!--top-->
|
||||||
|
<div class="top_c">
|
||||||
|
<a ></a>
|
||||||
|
<p class="titi">
|
||||||
|
我的订单
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<!--头部-->
|
||||||
|
<div class="pos">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row titll">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--列表-->
|
||||||
|
<div class="ding_d">
|
||||||
|
<div class="on_d">
|
||||||
|
<div class="sp_pr">
|
||||||
|
<img src=>
|
||||||
|
<div class="text_p">
|
||||||
|
<p>
|
||||||
|
订单 <span>银行转入</span>
|
||||||
|
</p>
|
||||||
|
<span class="yue">信息</span>
|
||||||
|
<span class="yue">信息</span>
|
||||||
|
</div>
|
||||||
|
<div class="button">
|
||||||
|
<p>
|
||||||
|
<span>订单号</span>
|
||||||
|
</p>
|
||||||
|
<a href="#" class="liji">详情</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="on_d">
|
||||||
|
<div class="sp_pr">
|
||||||
|
<img src=>
|
||||||
|
<div class="text_p">
|
||||||
|
<p>
|
||||||
|
订单 <span>银行转出</span>
|
||||||
|
</p>
|
||||||
|
<span class="yue">123456</span>
|
||||||
|
<span class="yue">123456</span>
|
||||||
|
</div>
|
||||||
|
<div class="button">
|
||||||
|
<p>
|
||||||
|
<span>123456</span>
|
||||||
|
</p>
|
||||||
|
<a href="#" class="liji">详情</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="on_d">
|
||||||
|
<div class="sp_pr">
|
||||||
|
<img src=>
|
||||||
|
<div class="text_p">
|
||||||
|
<p>
|
||||||
|
订单 <span>银行转账</span>
|
||||||
|
</p>
|
||||||
|
<span class="yue">123456</span>
|
||||||
|
<span class="yue">123456</span>
|
||||||
|
</div>
|
||||||
|
<div class="button">
|
||||||
|
<p>
|
||||||
|
<span>123456</span>
|
||||||
|
</p>
|
||||||
|
<a href="#" class="liji">详情</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="on_d">
|
||||||
|
<div class="sp_pr">
|
||||||
|
<img src=>
|
||||||
|
<div class="text_p">
|
||||||
|
<p>
|
||||||
|
订单 <span>银行转账</span>
|
||||||
|
</p>
|
||||||
|
<span class="yue">123456</span>
|
||||||
|
<span class="yue">123456</span>
|
||||||
|
</div>
|
||||||
|
<div class="button">
|
||||||
|
<p>
|
||||||
|
<span>123456</span>
|
||||||
|
</p>
|
||||||
|
<a href="#" class="liji">详情</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="on_d">
|
||||||
|
<div class="sp_pr">
|
||||||
|
<img src=>
|
||||||
|
<div class="text_p">
|
||||||
|
<p>
|
||||||
|
订单 <span>银行转账</span>
|
||||||
|
</p>
|
||||||
|
<span class="yue">123456</span>
|
||||||
|
<span class="yue">123456</span>
|
||||||
|
</div>
|
||||||
|
<div class="button">
|
||||||
|
<p>
|
||||||
|
<span>123456</span>
|
||||||
|
</p>
|
||||||
|
<a href="#" class="liji">详情</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="on_d">
|
||||||
|
<div class="sp_pr">
|
||||||
|
<img src=>
|
||||||
|
<div class="text_p">
|
||||||
|
<p>
|
||||||
|
订单 <span>银行转账</span>
|
||||||
|
</p>
|
||||||
|
<span class="yue">123456</span>
|
||||||
|
<span class="yue">123456</span>
|
||||||
|
</div>
|
||||||
|
<div class="button">
|
||||||
|
<p>
|
||||||
|
<span>123456</span>
|
||||||
|
</p>
|
||||||
|
<a href="#" class="liji">详情</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,87 @@
|
|||||||
|
|
||||||
|
@font-face {font-family: "iconfont";
|
||||||
|
src: url("font_l6a0fwucxvzehfr.eot-t=1490091634016")/*tpa=http://at.alicdn.com/t/font_l6a0fwucxvzehfr.eot?t=1490091634016*/; /* IE9*/
|
||||||
|
src: url("font_l6a0fwucxvzehfr.eot-t=1490091634016#iefix")/*tpa=http://at.alicdn.com/t/font_l6a0fwucxvzehfr.eot?t=1490091634016#iefix*/ format('embedded-opentype'), /* IE6-IE8 */
|
||||||
|
url("font_l6a0fwucxvzehfr.woff-t=1490091634016")/*tpa=http://at.alicdn.com/t/font_l6a0fwucxvzehfr.woff?t=1490091634016*/ format('woff'), /* chrome, firefox */
|
||||||
|
url("font_l6a0fwucxvzehfr.ttf-t=1490091634016")/*tpa=http://at.alicdn.com/t/font_l6a0fwucxvzehfr.ttf?t=1490091634016*/ format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||||
|
url("font_l6a0fwucxvzehfr.svg-t=1490091634016#iconfont")/*tpa=http://at.alicdn.com/t/font_l6a0fwucxvzehfr.svg?t=1490091634016#iconfont*/ format('svg'); /* iOS 4.1- */
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
font-family:"iconfont" !important;
|
||||||
|
font-size:16px;
|
||||||
|
font-style:normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-sousuo01:before { content: "\e61e"; }
|
||||||
|
|
||||||
|
.icon-jilu:before { content: "\e604"; }
|
||||||
|
|
||||||
|
.icon-iconfontshezhi:before { content: "\e612"; }
|
||||||
|
|
||||||
|
.icon-iconfontshanchu:before { content: "\e614"; }
|
||||||
|
|
||||||
|
.icon-jianshao:before { content: "\e644"; }
|
||||||
|
|
||||||
|
.icon-shoucang:before { content: "\e623"; }
|
||||||
|
|
||||||
|
.icon-jiantou:before { content: "\e635"; }
|
||||||
|
|
||||||
|
.icon-xiaoxi:before { content: "\e63a"; }
|
||||||
|
|
||||||
|
.icon-iconfontgouwuche:before { content: "\e61b"; }
|
||||||
|
|
||||||
|
.icon-shangjia:before { content: "\e60c"; }
|
||||||
|
|
||||||
|
.icon-daifahuo1:before { content: "\e6fd"; }
|
||||||
|
|
||||||
|
.icon-shoucang1:before { content: "\e68d"; }
|
||||||
|
|
||||||
|
.icon-iconliushuizijin:before { content: "\e88c"; }
|
||||||
|
|
||||||
|
.icon-hongbao:before { content: "\e647"; }
|
||||||
|
|
||||||
|
.icon-tuikuan:before { content: "\e6de"; }
|
||||||
|
|
||||||
|
.icon-jiantou-copy-copy:before { content: "\e601"; }
|
||||||
|
|
||||||
|
.icon-zhangdan:before { content: "\e64b"; }
|
||||||
|
|
||||||
|
.icon-daikuanedu:before { content: "\e688"; }
|
||||||
|
|
||||||
|
.icon-buoumaotubiao26:before { content: "\e618"; }
|
||||||
|
|
||||||
|
.icon-tubiao225:before { content: "\e69b"; }
|
||||||
|
|
||||||
|
.icon-information:before { content: "\e6d9"; }
|
||||||
|
|
||||||
|
.icon-tixian1:before { content: "\e611"; }
|
||||||
|
|
||||||
|
.icon-shouye-copy-copy-copy:before { content: "\e600"; }
|
||||||
|
|
||||||
|
.icon-daishouhuo:before { content: "\e65d"; }
|
||||||
|
|
||||||
|
.icon-daipingjia1:before { content: "\e610"; }
|
||||||
|
|
||||||
|
.icon-shouhuodizhi:before { content: "\e674"; }
|
||||||
|
|
||||||
|
.icon-touxiang:before { content: "\e6ae"; }
|
||||||
|
|
||||||
|
.icon-qianbao-:before { content: "\e66b"; }
|
||||||
|
|
||||||
|
.icon-chongzhi:before { content: "\e61d"; }
|
||||||
|
|
||||||
|
.icon-conpon1:before { content: "\e687"; }
|
||||||
|
|
||||||
|
.icon-zuji1:before { content: "\e62c"; }
|
||||||
|
|
||||||
|
.icon-tuijian:before { content: "\e65b"; }
|
||||||
|
|
||||||
|
.icon-daifahuo:before { content: "\e640"; }
|
||||||
|
|
||||||
|
.icon-quanbu:before { content: "\e616"; }
|
||||||
|
|
||||||
|
.icon-shimingrenzheng:before { content: "\e605"; }
|
||||||
|
|
||||||
@ -0,0 +1,430 @@
|
|||||||
|
@charset "utf-8";
|
||||||
|
/* CSS Document */
|
||||||
|
|
||||||
|
body{ background:#ececec;}
|
||||||
|
|
||||||
|
.top{ height:3em; position:fixed; top:0; left:0; width:100%; z-index:10;}
|
||||||
|
.local{ background:rgba(255,255,255,0.7); display:block; height:2.163em; border-radius:4px; line-height:2.163em; margin-top:0.571em; font-size:0.857em;}
|
||||||
|
.loc_d{ color:#666; margin:0 0.143em 0 0.571em;}
|
||||||
|
.local .glyphicon{ color:#888; float:right; margin-right:0.571em; margin-top:0.429em;}
|
||||||
|
.search{ width:2.163em; height:2.163em;background:rgba(255,255,255,0.7); border-radius:50%; display:block; font-size:0.857em; line-height:2.163em; text-align:center; float:right;margin-top:0.571em;}
|
||||||
|
.search span{ color:#666;}
|
||||||
|
.top .col-xs-1{ padding:0 6px;}
|
||||||
|
.top .col-xs-9{ padding-right:0; padding-left:0;}
|
||||||
|
|
||||||
|
.hot{ background:#fff; margin:1.143em 0; width:100%; padding-bottom:1.143em;}
|
||||||
|
.title{ overflow:hidden; margin:1em auto; width:12.627em;}
|
||||||
|
.title *{ float:left;}
|
||||||
|
.title h4{ margin:0 0.571em; color:#1798f2;}
|
||||||
|
.title hr{ width:2.857em; height:1px; background:#9dbee3; margin:0.714em 0;}
|
||||||
|
.hot .col-xs-5{ padding-right:0;}
|
||||||
|
.hot .col-xs-7{ padding-left:0;}
|
||||||
|
.sp{ display:block; border-right:1px solid #e1e1e1; padding-right:0.714em;}
|
||||||
|
.sp img{ width:107px; height:107px; margin:0 auto 0.571em; display:block;}
|
||||||
|
.sp p,.sp_1 p{ font-size:0.857em; color:#333; height:2.857em; overflow:hidden;}
|
||||||
|
.sp span,.sp_1 span{ color:#fe6e12; font-size:0.857em; display:block; font-family:'微软雅黑';}
|
||||||
|
.sp span em,.sp_1 span em{ font-style:normal!important; font-size:1.667em;}
|
||||||
|
.sp_1 img{ width:70px; height:70px; margin:0 0.714em; float:left;}
|
||||||
|
.sp_1{ overflow:hidden; border-bottom:1px solid #ececec; padding-bottom:1em;}
|
||||||
|
.sp_1 p,.sp_1 span{ text-align:right;}
|
||||||
|
|
||||||
|
.nav_s{ background:#fff; height:2.786em; width:100%; overflow:hidden; position:relative;}
|
||||||
|
.pos{ position:fixed; left:0; top:3em; border-bottom:1px solid #ececec; z-index:18; width:100%; background:#fff;}
|
||||||
|
.scroll a{ font-size:1.143em; display:block; color:#555; line-height:2.241em;margin:0 1em; float:left;}
|
||||||
|
.scroll a.currer{ color:#1798f2; border-bottom:2px solid #1798f2;}
|
||||||
|
|
||||||
|
.product{ background:#fff; margin-top:1.423em; margin-bottom:5.571em;}
|
||||||
|
.sp_pr{ padding:1em; border-bottom:1px solid #ececec; overflow:hidden;}
|
||||||
|
.sp_pr img{ width:60px; height:60px; margin-right:1em; float:left;border-radius: 50%;}
|
||||||
|
.text_p{ float:left;}
|
||||||
|
.text_p p{ font-size:1em; color:#272727; margin-bottom:0;}
|
||||||
|
|
||||||
|
.text_p p span{background:#00c451;color:#fff;padding:0 5px;}
|
||||||
|
|
||||||
|
.xing{ overflow:hidden;}
|
||||||
|
.xing span{ font-size:0.857em; color:#fe6e12; margin-right:0.286em;}
|
||||||
|
.yue{ font-size:0.857em; color:#888; display:block; margin-top:0.286em;}
|
||||||
|
.yue em{ color:#333; font-style:normal; margin-left:0.366em;}
|
||||||
|
.jul{ float:right; font-size:1em; color:#1798f2; margin-top:2em;}
|
||||||
|
.em_s{ margin-right:0.286em;}
|
||||||
|
|
||||||
|
.footer{ background:#fff; border-top:1px solid #ccc; height:3.857em; position:fixed; bottom:0; left:0; z-index:24; width:100%;}
|
||||||
|
.footer .col-xs-3{ margin:0; padding:0;}
|
||||||
|
.dao{ display:block; color:#7b7b7b; text-align:center; text-decoration:none;}
|
||||||
|
.dao span{ display:block; font-size:0.857em; text-align:center;}
|
||||||
|
.dao i{ display:block; font-size:1.571em; color:#7b7b7b; margin-top:2px; text-align:center;}
|
||||||
|
|
||||||
|
/*便民服务*/
|
||||||
|
.top_c{height:3em; position:fixed; top:0; left:0; width:100%; z-index:20; background:#1798f2; border-bottom:1px solid #ccc;}
|
||||||
|
.ss_c{ overflow:hidden; background:#f1f1f1; border-radius:4px; height:2em; margin-top:0.5em;}
|
||||||
|
.ss_c input{ float:left; width:89%; border:0; background:none; height:2em; padding-left:0.714em;}
|
||||||
|
.ss_c a{ float:right; font-size:1.286em; color:#333; line-height:1.5em; margin-right:0.571em;}
|
||||||
|
|
||||||
|
.lie{ margin-top:3em; width:100%; overflow:hidden;}
|
||||||
|
.left_c{ float:left; width:30%; position:relative;}
|
||||||
|
.left_c ul,.left_c li,.right_c ul,.right_c li{ list-style:none; margin:0; padding:0;}
|
||||||
|
.left_c ul{ width:100%; height:auto;}
|
||||||
|
.left_c li{ width:100%; height:2.571em; font-size:1em; line-height:2.571em; text-align:center; color:#484848; border-bottom:1px solid #d7d7d7;}
|
||||||
|
.left_c li a{ color:#484848;}
|
||||||
|
.right_c{ background:#fff; width:70%; float:left; position:relative;}
|
||||||
|
.right_c ul{ padding:0 1em; height:auto; width:100%;}
|
||||||
|
.right_c li{ border-bottom:1px dashed #ccc; margin-top:1em; padding-bottom:0.857em;}
|
||||||
|
.right_c li p{ font-size:1.143em; color:#333; font-weight:600; margin-bottom:0.286em;}
|
||||||
|
.right_c li p span{ font-size:0.825em; color:#666; margin-left:0.714em; font-weight:normal;}
|
||||||
|
.right_c li p span em{ font-style:normal; margin-left:1em;}
|
||||||
|
.jian{ font-size:0.857em; color:#999;}
|
||||||
|
|
||||||
|
/*钱包*/
|
||||||
|
.titi{ font-size:1.286em; color:#fff; line-height:2.3em; margin:0; text-align:center;}
|
||||||
|
.tou{ background:#1798f2; width:100%; margin-top:3em; padding:2.429em 0 1.286em;}
|
||||||
|
.tou span{ font-size:0.857em; text-align:center; color:#f5f5f5; display:block; margin-bottom:0.286em;}
|
||||||
|
.tou p{ text-align:center; color:#fff; font-size:2.143em;}
|
||||||
|
|
||||||
|
.tou2{height:50px;line-height:50px;background:#1589d9 url("1.png")/*tpa=http://www.17sucai.com/preview/80883/2017-12-26/bixinwang/images/1.png*/ center center no-repeat;text-align:center;}
|
||||||
|
.tou2 a{ color:#fff; }
|
||||||
|
|
||||||
|
|
||||||
|
.lie_b{ background:#fff; margin-top:1em;}
|
||||||
|
.one{ border-bottom:1px solid #ececec;}
|
||||||
|
.biao{ font-size:1.071em; height:2.414em; line-height:2.414em; color:#333; margin:0;}
|
||||||
|
.biao span{ color:#000; font-size:1.2em; margin-right:0.625em;}
|
||||||
|
.biao i{ float:right; color:#888; font-size:0.8em;}
|
||||||
|
.biao b{float:right; color:#4e4e4e;font-size:1em;font-weight:100;}
|
||||||
|
.biao input{width: 15px;height: 30px;float: right;}
|
||||||
|
|
||||||
|
|
||||||
|
.remember { margin-top: 15px; }
|
||||||
|
.remember input[type=checkbox] { vertical-align: middle; margin:0 5px 0 0; }
|
||||||
|
.remember span { color: #999;font-size:0.8em; }
|
||||||
|
|
||||||
|
/*个人中心*/
|
||||||
|
.zhang{ background:url("bj.jpg")/*tpa=http://www.17sucai.com/preview/80883/2017-12-26/bixinwang/images/bj.jpg*/ no-repeat; background-size:cover; width:100%; overflow:hidden;}
|
||||||
|
.xiao{ line-height:2.143em; height:2.143em;}
|
||||||
|
.xiao span{ float:right; margin-left:0.857em;font-size:1.286em; color:#fff;}
|
||||||
|
.xiao .icon-xiaoxi{ position:relative;}
|
||||||
|
.xiao .icon-xiaoxi i{ display:block; position:absolute; top:4px; right:-4px; width:6px; height:6px; background:#fff; border-radius:50%;}
|
||||||
|
.tou_x{ overflow:hidden; margin-bottom:0.714em;}
|
||||||
|
.tou_x .icon-touxiang{ font-size:4.286em; color:#ececec; float:left;}
|
||||||
|
.yong{ float:left; margin-left:1em; margin-top:1.143em;}
|
||||||
|
.yong p{ font-size:1.256em; color:#fff; font-weight:600; margin-bottom:0.429em;}
|
||||||
|
.yong span{ display:block; color:#eaeaea; font-size:0.857em;}
|
||||||
|
|
||||||
|
.ding{ background:#fff; margin-top:1em;}
|
||||||
|
.ding ul,.ding li{ list-style:none; margin:0; padding:0;}
|
||||||
|
.ding ul{ overflow:hidden;}
|
||||||
|
.ding li{ float:left; width:20%;}
|
||||||
|
.ding li span{ font-size:1.429em; text-align:center; display:block; color:#444; margin-top:1.086em; position:relative;}
|
||||||
|
.ding li p{ font-size:1em; color:#444; text-align:center;}
|
||||||
|
.ding li span i{ display:block; font-style:normal; width:1.429em; height:1.429em; background:#fe6e12; color:#fff; font-size:0.6em; text-align:center; position:absolute; top:-10px; right:6px; border-radius:50%; line-height:1.429em;}
|
||||||
|
|
||||||
|
.lie_y{ background:#fff; margin-top:1.2em; margin-bottom:4.857em;}
|
||||||
|
.lie_y .col-xs-4{ margin:0; padding:0; border:1px solid #ececec; border-top:none; border-left:none;}
|
||||||
|
.lie_y .iconfont{ font-size:2.143em; display:block; color:#5da9fb; text-align:center; margin:0.614em 0 0.246em; }
|
||||||
|
.lll{ font-size:1em; text-align:center; color:#444; margin-bottom:1.143em;}
|
||||||
|
|
||||||
|
|
||||||
|
/*商家*/
|
||||||
|
.top_c .icon-jiantou-copy-copy{ float:left; color:#fff; display:block; margin-left:1em; line-height:2.68em;}
|
||||||
|
.shou{ float:right; display:block;}
|
||||||
|
.shou span{ font-size:1.143em;margin-right:1em; line-height:2.68em; color:#666; display:block;}
|
||||||
|
.shou .icon-shoucang1{ display:none;}
|
||||||
|
.titll .col-xs-2{width:50%;}
|
||||||
|
.titll .col-xs-4,.titll .col-xs-2{ padding:0.571em 0; text-align:center; font-size:1em; color:#666;}
|
||||||
|
.sp_b{ width:60px; height:62px; border:1px solid #ececec; float:left; display:block;}
|
||||||
|
.text{ float:left; margin-left:0.714em;}
|
||||||
|
.right_c li .text p{ font-size:1em; margin-bottom:0;}
|
||||||
|
.money{ margin-top:0.286em;}
|
||||||
|
.money span{ color:#fe6e12; font-size:1.143em;}
|
||||||
|
.right_c li .icon-tubiao225{ position:absolute; color:#1798f2; right:0; bottom:0.657em;}
|
||||||
|
|
||||||
|
.footer .icon-iconfontgouwuche{ display:block; float:left; font-size:2em; color:#555; line-height:1.9em; margin-left:0.614em; position:relative;}
|
||||||
|
.footer .icon-iconfontgouwuche i{ position:absolute; right:-9px; top:4px; display:block; width:1.67em; height:1.67em; font-size:0.429em; color:#fff; text-align:center; background:#fe6e12; line-height:1.67em; border-radius:50%; font-style:normal;}
|
||||||
|
.jia{ float:left; margin-left:1.714em; margin-top:0.143em;}
|
||||||
|
.jia p{ font-size:1.143em; color:#555; margin-bottom:-2px;}
|
||||||
|
.jia p em{ color:#fe6e12; font-size:1.25em; font-style:normal;}
|
||||||
|
.jia span{ color:#888; font-size:0.857em;}
|
||||||
|
.jie{ display:block; float:right; height:3em; width:5em; font-size:1.286em; color:#fff; background:#1798f2; line-height:3em; text-align:center;}
|
||||||
|
|
||||||
|
.ping{ display:none;}
|
||||||
|
.zong{ background:#fff; width:100%;}
|
||||||
|
.num{ font-size:1.571em; color:#fe6e12; display:block; text-align:center; margin:0.627em 0 0.2em;}
|
||||||
|
.he{ display:block; font-size:1em; text-align:center; margin-bottom:0.857em; color:#666;}
|
||||||
|
.zero{ overflow:hidden; margin-top:0.857em;}
|
||||||
|
.fu{ font-size:0.857em; color:#666; float:left; display:block; line-height:1.67em;}
|
||||||
|
.zero .xing{ float:left; margin-left:1.286em;}
|
||||||
|
.lun{ background:#fff; margin-top:1.143em; margin-bottom:1em;}
|
||||||
|
.lun ul,.lun li{ list-style:none; margin:0; padding:0;}
|
||||||
|
.lun li{ border-bottom:1px solid #ececec; margin-top:1em; padding-bottom:1em;}
|
||||||
|
.touxi{ overflow:hidden; margin-bottom:8px;}
|
||||||
|
.touxi img{ display:block; float:left; width:40px; height:40px; border-radius:50%; margin-right:0.857em;}
|
||||||
|
.time p{ font-size:1em; color:#333; margin-bottom:0;}
|
||||||
|
.time span{ font-size:0.857em; color:#888;}
|
||||||
|
.nei{ font-size:1em; color:#666;}
|
||||||
|
|
||||||
|
.img_sh{ width:100%; display:block;}
|
||||||
|
.sh_name{ background:#fff; width:100%; margin-bottom:1em;}
|
||||||
|
.biti{ font-size:1.286em; color:#222; margin-top:1em;}
|
||||||
|
.sh_name .zero{ margin-top:0.3em;}
|
||||||
|
.sh_name .fu,.sh_name .glyphicon-star,.sh_name .xing{ font-size:1em; line-height:1.67em;}
|
||||||
|
.sh_name .xing{ margin-left:0.714em;}
|
||||||
|
.shop{ display:none;}
|
||||||
|
|
||||||
|
.window{ position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:22; display:none;}
|
||||||
|
.gou{ background:#fff; position:fixed; width:100%; left:0; bottom:3.857em; z-index:23; display:none;}
|
||||||
|
.wu_t{ font-size:0.857em; color:#666; line-height:2.571em; border-bottom:1px solid #ececec; margin-bottom:4px;}
|
||||||
|
.wu_t i{ display:block; width:0.286em; height:1.286em; background:#fe6e12; margin:0.571em 0.571em 0 1.143em; float:left;}
|
||||||
|
.wu_t a{ display:block; float:right; color:#666; margin-right:1.143em;}
|
||||||
|
.wu_t a span{ margin-right:0.429em;}
|
||||||
|
.gou table tr td{ border-top:none; border-bottom:1px dashed #ccc;}
|
||||||
|
.j_ge{ color:#fe6e12;}
|
||||||
|
#add{ color:#1798f2;}
|
||||||
|
#min{ color:#666;}
|
||||||
|
.xuan input{ border:none; text-align:center; height:1.429em; width:2em;}
|
||||||
|
|
||||||
|
/*商品*/
|
||||||
|
.sp_tit{ background:#fff; border-top:1px solid #ececec;}
|
||||||
|
.sp_tit p{ font-size:1.286em; color:#222; font-weight:600; margin-top:1em;}
|
||||||
|
.gui{ font-size:1em; color:#888; display:block;}
|
||||||
|
.gui em{ font-style:normal; float:right;}
|
||||||
|
.ge{ display:block; color:#fe6e12; font-size:1em; margin:1em 0 0.714em;}
|
||||||
|
.ge em{ font-size:1.571em; font-style:normal;}
|
||||||
|
.ge a{ float:right; color:#1798f2; font-size:1.429em;}
|
||||||
|
|
||||||
|
.xiang{ background:#fff; margin-top:1.143em; margin-bottom:4.875em;}
|
||||||
|
.xi_t{ font-size:1.143em; color:#333; line-height:2.571em; border-bottom:1px solid #ececec;}
|
||||||
|
.xi_t i{ display:block; width:0.1875em; height:1.375em; background:#1798f2; margin:0.625em 0.5em 0 1em; float:left;}
|
||||||
|
.xiang img{ width:100%; margin-top:1em;}
|
||||||
|
|
||||||
|
|
||||||
|
/*搜索*/
|
||||||
|
|
||||||
|
.bi_ao{ background:#fff;}
|
||||||
|
.li_s{ margin-top:3em;}
|
||||||
|
.li_s p{ font-size:1.143em; line-height:2.286em; padding-left:1em; color:#333; margin-bottom:0;}
|
||||||
|
.content{ font-size:1em; line-height:2.143em; border-bottom:1px solid #ececec; color:#666;}
|
||||||
|
.kong{ display:block; color:#fe6e12; font-size:1em; text-align:center; line-height:2.286em;}
|
||||||
|
|
||||||
|
|
||||||
|
/*登录注册*/
|
||||||
|
.login img{ width:180px; margin:5.2em auto 2.6em; display:block;}
|
||||||
|
.ru{ width:100%; border-bottom:1px solid #ccc; line-height:2.714em; margin-top:1.2em;}
|
||||||
|
.ru input{ width:90%; border:none;}
|
||||||
|
.ru span{ font-size:1.286em; color:#888; margin-right:0.286em;}
|
||||||
|
.wang{ font-size:1em; color:#fe6e12; margin-top:0.871em; display:block; text-align:right;}
|
||||||
|
.deng{ width:100%; display:block; border-radius:6px; background:#1798f2; height:2.286em; font-size:1.143em; line-height:2.286em; text-align:center; color:#fff; margin:1.571em 0 0.714em; clear:both;}
|
||||||
|
.san hr{ height:1px; width:4.286em; float:left; background:#ccc;}
|
||||||
|
.san span{ font-size:1em; color:#666; margin:0.714em; float:left;}
|
||||||
|
.san i{ font-size:1.714em; color:#666; text-align:center; display:block; margin-top:0.429em;}
|
||||||
|
.san{ width:15em; margin:4em auto 0;}
|
||||||
|
|
||||||
|
.zhu input{ width:100%;}
|
||||||
|
.zhu{ margin-top:4em;}
|
||||||
|
.yan{position:absolute;bottom:0;right:0;}
|
||||||
|
.zhu .ru{ position:relative;}
|
||||||
|
.btn_mfyzm{ background:#fe6e12; color:#fff;}
|
||||||
|
|
||||||
|
|
||||||
|
/*充值提现*/
|
||||||
|
|
||||||
|
.cong{ margin-top:4em;}
|
||||||
|
.cong p{ font-size:1em; color:#666; line-height:2.286em; padding-left:1em;}
|
||||||
|
.cong p em{ font-size:1.286em; color:#fe6e12; font-style:normal;}
|
||||||
|
.zhi{ background:#fff; line-height:2.714em; }
|
||||||
|
.zhi span{ font-size:1em; color:#333; margin-right:0.571em;}
|
||||||
|
.zhi input{ width:80%; border:0;}
|
||||||
|
.ming{ display:block; float:right; font-size:1em; color:#888; line-height:3em; margin-right:1em;}
|
||||||
|
|
||||||
|
.zhi .icon-zhifubao{ color:#009fe8; font-size:1.714em; margin-top:0.143em; display:block; float:left;}
|
||||||
|
.zhong{ display:block; float:right;}
|
||||||
|
.zhong span{ margin-right:0; color:#666; font-size:1.286em;}
|
||||||
|
.zhong .icon-xuanzhong{ display:none;color:#fe6e12;}
|
||||||
|
|
||||||
|
.ka{ background:#fff; overflow:hidden; padding-bottom:0.429em; margin-bottom:1em;}
|
||||||
|
.hao{ float:left;}
|
||||||
|
.hao p{ font-size:1.143em; color:#333; padding-left:0; margin-bottom:0; line-height:2em;}
|
||||||
|
.hao span{ font-size:0.857em; color:#888; margin-bottom:0.286em;}
|
||||||
|
.ka .icon-jiantou{ font-size:1.286em; color:#ccc; float:right; line-height:3em;}
|
||||||
|
|
||||||
|
.xi_m{ margin-top:3em; background:#fff;}
|
||||||
|
.xi_one{ overflow:hidden; border-bottom:1px solid #ececec; padding:0.571em 0;}
|
||||||
|
.xi_left{ float:left;}
|
||||||
|
.xi_left p{ font-size:1em; color:#333; margin-bottom:0;}
|
||||||
|
.xi_left span,.xi_right span{ font-size:0.857em; color:#999; display:block;}
|
||||||
|
.xi_right{ float:right;}
|
||||||
|
.xi_right p{ font-size:1.143em; color:#fe6e12; margin-bottom:0; text-align:right;}
|
||||||
|
.xi_right span{ text-align:right;}
|
||||||
|
|
||||||
|
|
||||||
|
/*信用额度*/
|
||||||
|
|
||||||
|
.tou_e{ margin-top:3em; background:#1798f2; padding:1.429em 0 0.714em;}
|
||||||
|
.jian_z{ text-align:center;}
|
||||||
|
.jian_z span{ display:block; text-align:center; color:#c4d4eb; font-size:1em; margin-top:0.286em;}
|
||||||
|
.jian_z b{ color:#fff; font-size:2em; margin:0.286em auto 0.714em; border-bottom:1px dashed #91b8e3; font-weight:normal; display:inline-block;}
|
||||||
|
.jian_z p{ font-size:1.571em; text-align:center; color:#dfe8f1;}
|
||||||
|
|
||||||
|
.dna{ background:#fff; overflow:hidden;}
|
||||||
|
.zhangd{ float:left;}
|
||||||
|
.zhangd p{ font-size:1.143em; color:#333; margin:0.714em 0 0.429em;}
|
||||||
|
.zhangd span{ display:block; font-size:0.857em; color:#999;}
|
||||||
|
.zhangd i{ font-size:1.571em; font-style:normal; color:#666; margin-bottom:0.429em; display:block;}
|
||||||
|
.huan{ float:right; color:#1798f2; width:5.2em; font-size:1.143em; line-height:1.857em; display:block; border:1px solid #1798f2; border-radius:30px; text-align:center; margin-top:2em;}
|
||||||
|
|
||||||
|
.tu{ width:6em; height:6em; background:#ddd; border-radius:50%; text-align:center; line-height:6em; margin:6em auto 2em;}
|
||||||
|
.tu span{ font-size:2.714em; color:#666;}
|
||||||
|
.nin{ font-size:1.143em; color:#333; text-align:center;}
|
||||||
|
.tiao{ text-align:center; margin-top:2em;}
|
||||||
|
.tiao p{ font-size:0.857em; color:#333;}
|
||||||
|
.tiao span{ font-size:0.857em; color:#777;}
|
||||||
|
|
||||||
|
.xi_right .edu{ color:#333; font-size:1.286em; line-height:2.143em;}
|
||||||
|
|
||||||
|
/*银行卡*/
|
||||||
|
.bank{ background:#1798f2; width:100%; border-radius:6px; margin-top:4em;}
|
||||||
|
.bank span{ display:block; padding:1.143em 1em; font-size:1em; color:#f5f5f5;}
|
||||||
|
.bank p{ font-size:1.714em; text-align:right; padding-right:1em; padding-bottom:1.143em; color:#fff;}
|
||||||
|
.jia_t{ position:fixed; bottom:0; left:0; width:100%; background:#fff; height:3em; line-height:3em; display:block; text-align:center; font-size:1.143em; color:#222; border-top:1px solid #ccc;}
|
||||||
|
|
||||||
|
/*账户子页*/
|
||||||
|
|
||||||
|
.one p em{ float:right; font-size:1.714em; color:#999; margin-right:0.571em;}
|
||||||
|
|
||||||
|
.ding_d{ margin-top:6.4em; margin-bottom:5.571em;}
|
||||||
|
.on_d{ background:#fff; margin-top:1em;}
|
||||||
|
.bh{ font-size:0.857em; line-height:2.857em; color:#666; padding:0 1em; border-bottom:1px solid #ececec; margin-bottom:0;}
|
||||||
|
.bh span{ float:right; font-size:1.33em; color:#fe6e12;}
|
||||||
|
.button{ overflow:hidden; float: right;}
|
||||||
|
.button a{ display:block; float:right; width:3em; height:2.143em; font-size:1em; text-align:center; line-height:2.1em; border-radius:6px; }
|
||||||
|
.button .liji{ background:#fff;border:1px solid #1798f2; color:#1798f2;}
|
||||||
|
.button .qu{ color:#333; border:1px solid #666;}
|
||||||
|
.button .lip{ background:#fe6e12; color:#fff;}
|
||||||
|
|
||||||
|
.button p span{color:#00c451;font-weight:600;padding:0 5px;}
|
||||||
|
|
||||||
|
.deta{ margin-top:3em; margin-bottom:4.4em;}
|
||||||
|
.zhuang{ line-height:2.571em; font-size:1.143em; color:#fe6e12; padding-left:1em; background:#fff;}
|
||||||
|
.d_min{ font-size:1em; padding-left:1em; line-height:2.429em; color:#333; margin-bottom:0;}
|
||||||
|
.leb{ background:#fff;}
|
||||||
|
.d_ti{ display:block; border-bottom:1px solid #ececec; font-size:0.857em; color:#888; line-height:3em;}
|
||||||
|
.d_ti img{ width:20px; height:20px; float:left; margin:0.714em 0.714em 0.714em 1em; display:block;}
|
||||||
|
.d_ti i{ float:right; font-size:1em; margin-right:1em; color:#ccc;}
|
||||||
|
.leb table tr td{ border:none; color:#444;}
|
||||||
|
.leb table{ margin:0.714em 0;}
|
||||||
|
.pei,.hui{ display:block; border-top:1px solid #ececec; font-size:1em; color:#555; line-height:2.714em;}
|
||||||
|
.pei i,.hui i{ font-style:normal; float:right;}
|
||||||
|
.hui{ color:#999;}
|
||||||
|
.hui i{ color:#555;}
|
||||||
|
.hui i em{ font-style:normal; color:#fe6e12;}
|
||||||
|
.bu_fi{ position:fixed; bottom:0; left:0; background:#fff; width:100%;}
|
||||||
|
|
||||||
|
.ke{ color:#888; margin-left:0.714em;}
|
||||||
|
.lit{ display:block; width:12.143em; height:8.571em; margin-top:0.714em;}
|
||||||
|
.shi{ display:block; color:#666; text-align:center; line-height:2.143em;}
|
||||||
|
|
||||||
|
.sp_pr a{ display:block;}
|
||||||
|
|
||||||
|
.addr{ margin-top:4em;}
|
||||||
|
.add{ background:#fff; border-radius:6px; padding:0.714em; margin-bottom:1em;}
|
||||||
|
.add p{ font-size:1.143em; color:#333;}
|
||||||
|
.add p i{ font-size:0.875em; font-style:normal; color:#666; margin-left:0.714em;}
|
||||||
|
.add span{ font-size:0.857em; color:#888;}
|
||||||
|
.mo{ border-top:1px solid #ececec; margin-top:0.714em; padding-top:0.714em;}
|
||||||
|
.mo a{ font-size:0.857em; color:#666; float:right; margin-right:1em;}
|
||||||
|
.mo a span{ margin-right:0.286em; color:#888;}
|
||||||
|
|
||||||
|
.tui{ margin-top:4em; background:#fff; border-radius:6px; padding:0.714em 0;}
|
||||||
|
.tui p{ font-size:1.143em; color:#888; text-align:center; margin-top:0.429em;}
|
||||||
|
.tui p span{ color:#fe6e12; font-size:1.25em;}
|
||||||
|
.tui img{ width:120px; margin:2.143em auto; display:block;}
|
||||||
|
|
||||||
|
.bj{ width:100%; height:180px; background:url("bjjj.jpg")/*tpa=http://www.17sucai.com/preview/80883/2017-12-26/bixinwang/images/bjjj.jpg*/ no-repeat; background-size:cover; padding-top:1px; position:relative;}
|
||||||
|
.bj img{ width:80px; height:80px; display:block; border-radius:6px; margin:2.429em auto 0.714em;}
|
||||||
|
.bj p{ font-size:1.143em; color:#fff; text-align:center;}
|
||||||
|
.bj .icon-jiantou-copy-copy{ position:absolute; top:0.714em; left:1em; color:#666; font-size:1em;}
|
||||||
|
|
||||||
|
|
||||||
|
/* toggle switch css start */
|
||||||
|
.switch-btn {position: relative; display: block; vertical-align: top; width: 52px; height: 20px; border-radius: 18px; cursor: pointer; float:right; margin-top:8px;}
|
||||||
|
.checked-switch {position: absolute; top: 0; left: 0; opacity: 0;}
|
||||||
|
.text-switch {background-color:#fe6e12; border: 1px solid #ef6208; border-radius: inherit; color: #fff; display: block; font-size: 0.857em; height: inherit; position: relative; text-transform: uppercase;}
|
||||||
|
.text-switch:before, .text-switch:after {position: absolute; top: 50%; margin-top: -.5em; line-height: 1; -webkit-transition: inherit; -moz-transition: inherit; -o-transition: inherit; transition: inherit;}
|
||||||
|
.text-switch:before {content: attr(data-no); right: 11px;}
|
||||||
|
.text-switch:after {content: attr(data-yes); left: 11px; color: #FFFFFF; opacity: 0;}
|
||||||
|
.checked-switch:checked ~ .text-switch {background-color: #00af2c; border: 1px solid #01a42a;}
|
||||||
|
.checked-switch:checked ~ .text-switch:before {opacity: 0;}
|
||||||
|
.checked-switch:checked ~ .text-switch:after {opacity: 1;}
|
||||||
|
.toggle-btn {background: linear-gradient(#eee, #fafafa); border-radius: 100%; height: 18px; left: 1px; position: absolute; top: 1px; width: 18px;}
|
||||||
|
.toggle-btn::before {color: #aaaaaa; display: inline-block; font-size: 12px; letter-spacing: -2px; padding: 4px 0; vertical-align: middle;}
|
||||||
|
.checked-switch:checked ~ .toggle-btn {left: 32px;}
|
||||||
|
.text-switch, .toggle-btn {transition: All 0.3s ease; -webkit-transition: All 0.3s ease; -moz-transition: All 0.3s ease; -o-transition: All 0.3s ease;}
|
||||||
|
|
||||||
|
.tis{ position:fixed; top:50%; left:0; z-index:30; width:100%; height:180px; margin-top:-90px; display:none;}
|
||||||
|
.tib{ background:#fff; border-radius:6px; padding:0.714em;}
|
||||||
|
.tib p{ font-size:1.143em; color:#333; line-height:2.571em; text-align:center;}
|
||||||
|
|
||||||
|
.diz{ background:#fff; margin-top:1em; padding:1em 0;}
|
||||||
|
.diz .add{ margin-bottom:0; padding:0;}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@media (min-width: 340px) {
|
||||||
|
|
||||||
|
.em_s{ margin-right:20px;}
|
||||||
|
.sp_b{ width:72px;}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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=');
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 7.1 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 8.6 KiB |
|
After Width: | Height: | Size: 8.4 KiB |
@ -0,0 +1,173 @@
|
|||||||
|
<!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="slider.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 "></i>
|
||||||
|
</a>
|
||||||
|
<div class="aui-center">
|
||||||
|
<span class="aui-center-title">首页</span>
|
||||||
|
</div>
|
||||||
|
<a href="javascript:;" class="aui-navBar-item" style="min-width: 35%;flex: 0 0 35%;">
|
||||||
|
</a>
|
||||||
|
</header>
|
||||||
|
<section class="aui-scrollView">
|
||||||
|
<div class="aui-borrow-box">
|
||||||
|
<div class="aui-borrow-flex">
|
||||||
|
<div class="aui-borrow-flex-hd">
|
||||||
|
<p>最高申请额度(元)</p>
|
||||||
|
<h2>XXXXX</h2>
|
||||||
|
<h3>快速申请，快速审批</h3>
|
||||||
|
</div>
|
||||||
|
<div class="aui-borrow-flex-bd">
|
||||||
|
<button>我要借钱</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="aui-palace clearfix">
|
||||||
|
<a href="javascript:;" class="aui-palace-grid">
|
||||||
|
<div class="aui-palace-grid-icon">
|
||||||
|
<img src="icon-item-001.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="aui-palace-grid-text">
|
||||||
|
<h2>借款</h2>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="javascript:;" class="aui-palace-grid">
|
||||||
|
<div class="aui-palace-grid-icon">
|
||||||
|
<img src="icon-item-002.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="aui-palace-grid-text">
|
||||||
|
<h2>还款</h2>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="javascript:;" class="aui-palace-grid">
|
||||||
|
<div class="aui-palace-grid-icon">
|
||||||
|
<img src="icon-item-003.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="aui-palace-grid-text">
|
||||||
|
<h2>利息计算</h2>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="javascript:;" class="aui-palace-grid">
|
||||||
|
<div class="aui-palace-grid-icon">
|
||||||
|
<img src="icon-item-004.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="aui-palace-grid-text">
|
||||||
|
<h2>账单</h2>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="divHeight"></div>
|
||||||
|
<div class="aui-m-slider">
|
||||||
|
<div class="m-slider" data-ydui-slider>
|
||||||
|
<div class="slider-wrapper">
|
||||||
|
<div class="slider-item">
|
||||||
|
<a href="javascript:;">
|
||||||
|
<img src="ad-001.jpg" >
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="slider-item">
|
||||||
|
<a href="javascript:;">
|
||||||
|
<img src="ad-001.jpg" >
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="slider-pagination"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="divHeight"></div>
|
||||||
|
<div class="aui-horn-flex">
|
||||||
|
<div class="aui-horn-flex-hd">
|
||||||
|
<i class="icon icon-horn"></i>
|
||||||
|
</div>
|
||||||
|
<div class="aui-horn-flex-bd" id="aui-show">
|
||||||
|
<ul id="holder">
|
||||||
|
<li>
|
||||||
|
<a href="javascript:;" target="_blank"></a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="javascript:;" target="_blank"></a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="javascript:;" target="_blank"></a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="javascript:;" target="_blank"> </a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="javascript:;" target="_blank">消息通知（待开发）</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="divHeight"></div>
|
||||||
|
<div class="aui-borrow-head">
|
||||||
|
<a href="javascript:;" class="aui-borrow-head">
|
||||||
|
<!-- herf到业务展示页-->
|
||||||
|
<div class="aui-borrow-head-title">
|
||||||
|
<h2>有贷有还业务</h2>
|
||||||
|
</div>
|
||||||
|
<div class="aui-borrow-head-ad">
|
||||||
|
<img src="111">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="aui-borrow-head">
|
||||||
|
<div class="aui-borrow-head-title"> </div>
|
||||||
|
<div class="aui-borrow-head-ad"> </div>
|
||||||
|
</div>
|
||||||
|
<div class="aui-borrow-head">
|
||||||
|
<div class="aui-borrow-head-title"> </div>
|
||||||
|
<div class="aui-borrow-head-ad"> </div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<footer class="aui-footer aui-footer-fixed">
|
||||||
|
<a href="javascript:;" class="aui-tabBar-item aui-tabBar-item-active">
|
||||||
|
<span class="aui-tabBar-item-icon">
|
||||||
|
<i class="icon icon-home"></i>
|
||||||
|
</span>
|
||||||
|
<span class="aui-tabBar-item-text">首页</span>
|
||||||
|
</a>
|
||||||
|
<a href="javascript:;" class="aui-tabBar-item ">
|
||||||
|
<span class="aui-tabBar-item-icon">
|
||||||
|
<i class="icon icon-loan"></i>
|
||||||
|
</span>
|
||||||
|
<span class="aui-tabBar-item-text">发现</span>
|
||||||
|
</a>
|
||||||
|
<a href="javascript:;" class="aui-tabBar-item ">
|
||||||
|
<span class="aui-tabBar-item-icon">
|
||||||
|
<i class="icon icon-me"></i>
|
||||||
|
</span>
|
||||||
|
<span class="aui-tabBar-item-text">我的</span>
|
||||||
|
</a>
|
||||||
|
</footer>
|
||||||
|
</section>
|
||||||
|
<script type="text/javascript">
|
||||||
|
function AutoScroll(obj) {
|
||||||
|
$(obj).find("ul:first").animate({
|
||||||
|
marginTop: "-22px"
|
||||||
|
}, 500, function() {
|
||||||
|
$(this).css({
|
||||||
|
marginTop: "0px"
|
||||||
|
}).find("li:first").appendTo(this);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
$(document).ready(function() {
|
||||||
|
setInterval('AutoScroll("#aui-show")', 3000)
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,339 @@
|
|||||||
|
!function(window) {
|
||||||
|
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var doc = window.document
|
||||||
|
, ydui = {};
|
||||||
|
|
||||||
|
var util = ydui.util = {
|
||||||
|
|
||||||
|
parseOptions: function(string) {},
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
;function Slider(element, options) {
|
||||||
|
this.$element = $(element);
|
||||||
|
this.options = $.extend({}, Slider.DEFAULTS, options || {});
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
Slider.DEFAULTS = {
|
||||||
|
speed: 300,
|
||||||
|
autoplay: 5000,
|
||||||
|
|
||||||
|
lazyLoad: false,
|
||||||
|
pagination: '.slider-pagination',
|
||||||
|
wrapperClass: 'slider-wrapper',
|
||||||
|
slideClass: 'slider-item',
|
||||||
|
bulletClass: 'slider-pagination-item',
|
||||||
|
bulletActiveClass: 'slider-pagination-item-active'
|
||||||
|
};
|
||||||
|
|
||||||
|
function Slider(element, options) {
|
||||||
|
this.$element = $(element);
|
||||||
|
this.options = $.extend({}, Slider.DEFAULTS, options || {});
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
Slider.DEFAULTS = {
|
||||||
|
speed: 300,
|
||||||
|
autoplay: 3000,
|
||||||
|
lazyLoad: false,
|
||||||
|
pagination: '.slider-pagination',
|
||||||
|
wrapperClass: 'slider-wrapper',
|
||||||
|
slideClass: 'slider-item',
|
||||||
|
bulletClass: 'slider-pagination-item',
|
||||||
|
bulletActiveClass: 'slider-pagination-item-active'
|
||||||
|
};
|
||||||
|
|
||||||
|
Slider.prototype.init = function() {
|
||||||
|
var _this = this
|
||||||
|
, options = _this.options
|
||||||
|
, $element = _this.$element;
|
||||||
|
|
||||||
|
_this.index = 1;
|
||||||
|
_this.autoPlayTimer = null;
|
||||||
|
_this.$pagination = $element.find(options.pagination);
|
||||||
|
_this.$wrapper = $element.find('.' + options.wrapperClass);
|
||||||
|
_this.itemNums = _this.$wrapper.find('.' + options.slideClass).length;
|
||||||
|
|
||||||
|
options.lazyLoad && _this.loadImage(0);
|
||||||
|
|
||||||
|
_this.createBullet();
|
||||||
|
|
||||||
|
_this.cloneItem().bindEvent();
|
||||||
|
}
|
||||||
|
;
|
||||||
|
|
||||||
|
Slider.prototype.bindEvent = function() {
|
||||||
|
var _this = this
|
||||||
|
, touchEvents = _this.touchEvents();
|
||||||
|
|
||||||
|
_this.$wrapper.find('.' + _this.options.slideClass).on(touchEvents.start, function(e) {
|
||||||
|
_this.onTouchStart(e);
|
||||||
|
}).on(touchEvents.move, function(e) {
|
||||||
|
_this.onTouchMove(e);
|
||||||
|
}).on(touchEvents.end, function(e) {
|
||||||
|
_this.onTouchEnd(e);
|
||||||
|
});
|
||||||
|
|
||||||
|
$(window).on('resize.ydui.slider', function() {
|
||||||
|
_this.setSlidesSize();
|
||||||
|
});
|
||||||
|
|
||||||
|
~~_this.options.autoplay > 0 && _this.autoPlay();
|
||||||
|
|
||||||
|
_this.$wrapper.on('click.ydui.slider', function(e) {
|
||||||
|
if (!_this.touches.allowClick) {
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
;
|
||||||
|
|
||||||
|
Slider.prototype.cloneItem = function() {
|
||||||
|
var _this = this
|
||||||
|
, $wrapper = _this.$wrapper
|
||||||
|
, $sliderItem = _this.$wrapper.find('.' + _this.options.slideClass)
|
||||||
|
, $firstChild = $sliderItem.filter(':first-child').clone()
|
||||||
|
, $lastChild = $sliderItem.filter(':last-child').clone();
|
||||||
|
|
||||||
|
$wrapper.prepend($lastChild);
|
||||||
|
$wrapper.append($firstChild);
|
||||||
|
|
||||||
|
_this.setSlidesSize();
|
||||||
|
|
||||||
|
return _this;
|
||||||
|
}
|
||||||
|
;
|
||||||
|
|
||||||
|
Slider.prototype.createBullet = function() {
|
||||||
|
|
||||||
|
var _this = this;
|
||||||
|
|
||||||
|
if (!_this.$pagination[0])
|
||||||
|
return;
|
||||||
|
|
||||||
|
var initActive = '<span class="' + (_this.options.bulletClass + ' ' + _this.options.bulletActiveClass) + '"></span>';
|
||||||
|
|
||||||
|
_this.$pagination.append(initActive + new Array(_this.itemNums).join('<span class="' + _this.options.bulletClass + '"></span>'));
|
||||||
|
}
|
||||||
|
;
|
||||||
|
|
||||||
|
Slider.prototype.activeBullet = function() {
|
||||||
|
var _this = this;
|
||||||
|
|
||||||
|
if (!_this.$pagination[0])
|
||||||
|
return;
|
||||||
|
|
||||||
|
var itemNums = _this.itemNums
|
||||||
|
, index = _this.index % itemNums >= itemNums ? 0 : _this.index % itemNums - 1
|
||||||
|
, bulletActiveClass = _this.options.bulletActiveClass;
|
||||||
|
|
||||||
|
!!_this.$pagination[0] && _this.$pagination.find('.' + _this.options.bulletClass).removeClass(bulletActiveClass).eq(index).addClass(bulletActiveClass);
|
||||||
|
}
|
||||||
|
;
|
||||||
|
|
||||||
|
Slider.prototype.setSlidesSize = function() {
|
||||||
|
var _this = this
|
||||||
|
, _width = _this.$wrapper.width();
|
||||||
|
|
||||||
|
_this.$wrapper.css('transform', 'translate3d(-' + _width + 'px,0,0)');
|
||||||
|
_this.$wrapper.find('.' + _this.options.slideClass).css({
|
||||||
|
width: _width
|
||||||
|
});
|
||||||
|
}
|
||||||
|
;
|
||||||
|
|
||||||
|
Slider.prototype.autoPlay = function() {
|
||||||
|
var _this = this;
|
||||||
|
|
||||||
|
_this.autoPlayTimer = setInterval(function() {
|
||||||
|
|
||||||
|
if (_this.index > _this.itemNums) {
|
||||||
|
_this.index = 1;
|
||||||
|
_this.setTranslate(0, -_this.$wrapper.width());
|
||||||
|
}
|
||||||
|
|
||||||
|
_this.setTranslate(_this.options.speed, -(++_this.index * _this.$wrapper.width()));
|
||||||
|
|
||||||
|
}, _this.options.autoplay);
|
||||||
|
}
|
||||||
|
;
|
||||||
|
|
||||||
|
Slider.prototype.stopAutoplay = function() {
|
||||||
|
var _this = this;
|
||||||
|
clearInterval(_this.autoPlayTimer);
|
||||||
|
return _this;
|
||||||
|
}
|
||||||
|
;
|
||||||
|
|
||||||
|
Slider.prototype.setTranslate = function(speed, x) {
|
||||||
|
var _this = this;
|
||||||
|
|
||||||
|
_this.options.lazyLoad && _this.loadImage(_this.index);
|
||||||
|
|
||||||
|
_this.activeBullet();
|
||||||
|
|
||||||
|
_this.$wrapper.css({
|
||||||
|
'transitionDuration': speed + 'ms',
|
||||||
|
'transform': 'translate3d(' + x + 'px,0,0)'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
;
|
||||||
|
|
||||||
|
Slider.prototype.touches = {
|
||||||
|
moveTag: 0,
|
||||||
|
startClientX: 0,
|
||||||
|
moveOffset: 0,
|
||||||
|
touchStartTime: 0,
|
||||||
|
isTouchEvent: false,
|
||||||
|
allowClick: false// 用于判断事件为点击还是拖动
|
||||||
|
};
|
||||||
|
|
||||||
|
Slider.prototype.onTouchStart = function(event) {
|
||||||
|
if (event.originalEvent.touches)
|
||||||
|
event = event.originalEvent.touches[0];
|
||||||
|
|
||||||
|
var _this = this
|
||||||
|
, touches = _this.touches;
|
||||||
|
|
||||||
|
touches.allowClick = true;
|
||||||
|
|
||||||
|
touches.isTouchEvent = event.type === 'touchstart';
|
||||||
|
|
||||||
|
if (!touches.isTouchEvent && 'which'in event && event.which === 3)
|
||||||
|
return;
|
||||||
|
|
||||||
|
if (touches.moveTag == 0) {
|
||||||
|
touches.moveTag = 1;
|
||||||
|
|
||||||
|
touches.startClientX = event.clientX;
|
||||||
|
touches.touchStartTime = Date.now();
|
||||||
|
|
||||||
|
var itemNums = _this.itemNums;
|
||||||
|
|
||||||
|
if (_this.index == 0) {
|
||||||
|
_this.index = itemNums;
|
||||||
|
_this.setTranslate(0, -itemNums * _this.$wrapper.width());
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (_this.index > itemNums) {
|
||||||
|
_this.index = 1;
|
||||||
|
_this.setTranslate(0, -_this.$wrapper.width());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
;
|
||||||
|
|
||||||
|
Slider.prototype.onTouchMove = function(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
if (event.originalEvent.touches)
|
||||||
|
event = event.originalEvent.touches[0];
|
||||||
|
|
||||||
|
var _this = this
|
||||||
|
, touches = _this.touches;
|
||||||
|
|
||||||
|
touches.allowClick = false;
|
||||||
|
|
||||||
|
if (touches.isTouchEvent && event.type === 'mousemove')
|
||||||
|
return;
|
||||||
|
|
||||||
|
var deltaSlide = touches.moveOffset = event.clientX - touches.startClientX;
|
||||||
|
|
||||||
|
if (deltaSlide != 0 && touches.moveTag != 0) {
|
||||||
|
|
||||||
|
if (touches.moveTag == 1) {
|
||||||
|
_this.stopAutoplay();
|
||||||
|
touches.moveTag = 2;
|
||||||
|
}
|
||||||
|
if (touches.moveTag == 2) {
|
||||||
|
_this.setTranslate(0, -_this.index * _this.$wrapper.width() + deltaSlide);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
;
|
||||||
|
|
||||||
|
Slider.prototype.onTouchEnd = function() {
|
||||||
|
var _this = this
|
||||||
|
, speed = _this.options.speed
|
||||||
|
, _width = _this.$wrapper.width()
|
||||||
|
, touches = _this.touches
|
||||||
|
, moveOffset = touches.moveOffset;
|
||||||
|
|
||||||
|
setTimeout(function() {
|
||||||
|
touches.allowClick = true;
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
if (touches.moveTag == 1) {
|
||||||
|
touches.moveTag = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (touches.moveTag == 2) {
|
||||||
|
touches.moveTag = 0;
|
||||||
|
|
||||||
|
var timeDiff = Date.now() - touches.touchStartTime;
|
||||||
|
|
||||||
|
if (timeDiff > 300 && Math.abs(moveOffset) <= _this.$wrapper.width() * .5) {
|
||||||
|
_this.setTranslate(speed, -_this.index * _this.$wrapper.width());
|
||||||
|
} else {
|
||||||
|
_this.setTranslate(speed, -((moveOffset > 0 ? --_this.index : ++_this.index) * _width));
|
||||||
|
}
|
||||||
|
_this.autoPlay();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
;
|
||||||
|
|
||||||
|
Slider.prototype.touchEvents = function() {
|
||||||
|
var supportTouch = (window.Modernizr && !!window.Modernizr.touch) || (function() {
|
||||||
|
return !!(('ontouchstart'in window) || window.DocumentTouch && document instanceof DocumentTouch);
|
||||||
|
}
|
||||||
|
)();
|
||||||
|
|
||||||
|
return {
|
||||||
|
start: supportTouch ? 'touchstart.ydui.slider' : 'mousedown.ydui.slider',
|
||||||
|
move: supportTouch ? 'touchmove.ydui.slider' : 'mousemove.ydui.slider',
|
||||||
|
end: supportTouch ? 'touchend.ydui.slider' : 'mouseup.ydui.slider'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
;
|
||||||
|
|
||||||
|
function Plugin(option) {
|
||||||
|
return this.each(function() {
|
||||||
|
|
||||||
|
var $this = $(this)
|
||||||
|
, slider = $this.data('ydui.slider');
|
||||||
|
|
||||||
|
if (!slider) {
|
||||||
|
$this.data('ydui.slider', new Slider(this,option));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
$(window).on('load.ydui.slider', function() {
|
||||||
|
$('[data-ydui-slider]').each(function() {
|
||||||
|
var $this = $(this);
|
||||||
|
$this.slider(window.YDUI.util.parseOptions($this.data('ydui-slider')));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
$.fn.slider = Plugin;
|
||||||
|
|
||||||
|
}(window);
|
||||||
@ -0,0 +1,572 @@
|
|||||||
|
|
||||||
|
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 {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 必要布局样式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;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-navBar {
|
||||||
|
height: 44px;
|
||||||
|
position: relative;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
z-index: 1002;
|
||||||
|
background: #5282ea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-navBar:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
border-bottom: 1px solid #5282ea;
|
||||||
|
-webkit-transform: scaleY(0.5);
|
||||||
|
transform: scaleY(0.5);
|
||||||
|
-webkit-transform-origin: 0 100%;
|
||||||
|
transform-origin: 0 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: #a0a0a0;
|
||||||
|
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: 35%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-center-title {
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
display: block;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
display: block;
|
||||||
|
border: none;
|
||||||
|
float: left;
|
||||||
|
background-size: 25px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-return {
|
||||||
|
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAACh0lEQVRoQ+3ZMW8TMRQH8PcOsTBQISExVCIRCwgWFvZ+hZYBpIrEcTYkBsTGlI2VDamL3YEBpWJoR1BJaOlXYEzyDYp0bMRGRjnJoDuWs/1e3EbKeHf55b33vzsb4YJ98IJ54RKce8XZV1gIcQ8AviDiD2vtC631pzZFYQ2WUt611p4CwM0VcqqU2soSXIN1ztdKqTfZgRuw75RSz9tg3bHsWjomlh04NpYVOAWWDbjf7z8oimLipbH7bUopJdvO7L/Hk8+wwyLiCSLe8H6cww4BwGYFTo0lbWkKLBmYCksCrsNaa99rrZ/FmFnS0GrCdrvd3mg0MqEDqu58yVKaAzZZSwshHgLAsX/rcW2csrJVtaNXeIWdIuL16qJU2OgVrsMCwEGn03mSamaThVYTtizLp+PxeJkioJKFFldslJbmjA0O5o4NCm7AHpZluUM5s1FCSwjxCAA++7ceADiczWaPJ5PJL6qAihJaUspdY8w+Il7xLsASG6SlhRA/EfGa91BxNJ/Pd7hVNtiT1mAwOAeADXdCa637Hi0Wi3zBUsptY8wHRLzqwIh/nlbzbWmna0roLEOrmo11QQd9W1oHdFDwOrR3cLCH/uuFn0uQRQE7dMPKJHl6RwNzRUcF/w9N9VIRHVyhazbLDihWP5KAHbphOzQ5OhmYCzopmAM6OZgaTQL20FMAuOUtHESfaTLwCn3HWnuWEk0KpkCTg1OjWYArtDHmKyJu+jMdeh+KDdghh8NhZ7lcfvPRoXcaWYFToNmBY6NZgj20m+nb3pr3W631yzY7GWzBDtXr9TaLojjz0N+VUvezBXvoPQBw0Fda649Zg9vg6o5l3dKhse58l+AY/yqnc/4GvNDoTFOq8FwAAAAASUVORK5CYII=");
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-mail {
|
||||||
|
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAAA8CAYAAAA5S9daAAAEB0lEQVRoQ+2aW8ilUxjHf3+nJiWnGcdQCEXjZiSR0wxjNJoIKZpBjXLjgpIpikKmuCFRCskpyg1mchqRIlcuuEAKEaIpKTk/+vet/bW83r3fd3/73ft7d63ncq/1Pms9//V/TmttUQQVDCggmASFCQWEhWBQmFBAKExYTIzFHYo7FHcY3x0iYhVwC3A8cHBPWfQP8D3wMfCApN/bVMStYkJEXAE8C+zVRmlP5vwEnCbpy6b9NIIQEQcAPwD7NCnr4fjnwEmSzJCh0gaE+5Mb9NDGVlu6TtKTk4LwDnB2jZLfgMsk7Wy1lSlNioi9gSeAq4cs8ZCkmyYF4Svg6KTkT8CLDsQ02yrp8SnZOFJtROwHvFJzSH9k7vuqpI2TgvA1cFRS8h5wBHBsRel2SbfNEoiIOAx4Ezi5su4jwKWAxy07JV3cJQhe9EorBk6vKH7RlJRktkxVIsKGvwYcmS0UwDZJ2yPiu6mCIOmCiHCmeM4xoWLtu8BGSb9MC4WIOAd4GbArDMT0v0aSD4KZgJAWcma5D7i1YvAnwEWSvukaiFSvPFOJSz8DGyS9P1hvZiBkC24FHgX2yIx21bZOkgHpRCJiG3BvRdm3wFpJn+a/zxyExIr1wEvAvtlm7BKXSHKKXbJEhMF9DLi+ouSjxAAD/h9ZFhASEKuBt4CV2Y4cJF2smMJjS0SsSOBuqHzsAL1J0q91SpcNhASE64k3gBMqm7tD0t3joJAath3Amsp3rklukPT3MH3LCkICYv9UwJxVs3kXViPr+KTjuMSqYyo6bpd0TxOYyw5CMsJV5fM1KdT1xeXDaJy+PSOBeNBS3aoXICRjnEJ9ao7quTigXSjpx5qAtgl4odKxjh1gewPCwMCI2AzYj/fMjHY/4tT2RTbvRuDhymWNU+D6cVNt70BIrDgvUTxPobtdXQIfAG7Xb64wwzWGa43/pcC5iAlD0pZT6OvAodm4y103ZefXpEC36Usqv3vJhIzybnh21aTQHAPXFFtGpcC5ZUIGxLAU6il3Srqrycim8V4zIQPCKfQp4Kr0mwsfn/6SKsuaLDP9VrrpJNqOR8S1TpfAg5IcIDuRuWBCJ5aOUFJAmOWlyrRPcxL9hQmFCQv8KUwoIBQmLMbSabiDn7YHNzy7JK2dJHLP4tuI8Cv6IWmtTp7h3gbOTQrd1a2R9NksjBl3jYjwRY7bdl/4DqSTB9l5f5p3T+I+Zai0+X/CgYAvOA4f92R6MP9D4ExJf00EQsq7pwJPA6f0wLC2W/C9xWZJvqIbKY1MGHwdEb4j9JP3OuDEnv5xyy25L3J3SMrjQjcgNKE5z+OtmTDPRjbtvYDQU79uOrjOxwsTChMWSFWYUEAoTFgMsMUdijsskOFfjGQKW4+C488AAAAASUVORK5CYII=');
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-sign-text {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-style: normal;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-borrow-box {
|
||||||
|
background-image: -webkit-gradient(linear,bottom top,bottom top,from(#5282ea),to(#2562e3));
|
||||||
|
background-image: -webkit-linear-gradient(bottom,#5282ea,#2562e3);
|
||||||
|
background-image: -moz-linear-gradient(bottom,#5282ea,#2562e3);
|
||||||
|
background-image: linear-gradient(to bottom,#5282ea,#2562e3);
|
||||||
|
background-color: #006ae3;
|
||||||
|
height: 8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-borrow-flex {
|
||||||
|
padding: 20px;
|
||||||
|
position: relative;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-borrow-flex-hd {
|
||||||
|
-webkit-box-flex: 1;
|
||||||
|
-webkit-flex: 1;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-borrow-flex-hd p {
|
||||||
|
color: #a1c1ff;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-borrow-flex-hd h2 {
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
padding-bottom: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-borrow-flex-hd h3 {
|
||||||
|
color: #a1c1ff;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-borrow-flex-bd button {
|
||||||
|
background: #fff;
|
||||||
|
color: #006ae3;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 0.35rem 0.95rem;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-palace {
|
||||||
|
padding: 10px 0;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-palace-grid {
|
||||||
|
position: relative;
|
||||||
|
float: left;
|
||||||
|
padding: 5px 0;
|
||||||
|
width: 25%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-palace-grid-icon {
|
||||||
|
width: 38px;
|
||||||
|
height: 38px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-palace-grid-icon img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-palace-grid-text {
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
color: #333333;
|
||||||
|
font-size: 13px;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
padding-top: 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-palace-grid-text h2 {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: normal;
|
||||||
|
color: #4a4a4a;
|
||||||
|
padding-top: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divHeight {
|
||||||
|
background: #f5f5f5;
|
||||||
|
height: 10px;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-horn {
|
||||||
|
background-image: url('data:image/png;base64,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');
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-horn-flex {
|
||||||
|
padding: 15px;
|
||||||
|
position: relative;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-horn-flex-bd {
|
||||||
|
-webkit-box-flex: 1;
|
||||||
|
-webkit-flex: 1;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
height: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-horn-flex-bd ul li {
|
||||||
|
color: #808080;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-horn-flex-hd {
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-footer {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
z-index: 100;
|
||||||
|
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;
|
||||||
|
padding: 7px 5px 7px 5px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
box-shadow: 0 0px 4px #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-footer:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
z-index: 0;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
/* border-top: 1px solid #D9D9D9; */
|
||||||
|
-webkit-transform: scaleY(0.5);
|
||||||
|
transform: scaleY(0.5);
|
||||||
|
-webkit-transform-origin: 0 100%;
|
||||||
|
transform-origin: 0 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-tabBar-item {
|
||||||
|
-webkit-box-flex: 1;
|
||||||
|
-webkit-flex: 1;
|
||||||
|
-ms-flex: 1;
|
||||||
|
flex: 1;
|
||||||
|
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;
|
||||||
|
-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;
|
||||||
|
color: #979797;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-tabBar-item-text {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.65rem;
|
||||||
|
color: #666666;
|
||||||
|
padding-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-tabBar-item-active .aui-tabBar-item-text {
|
||||||
|
color: #4C7EDD;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-home {
|
||||||
|
width: 20px;
|
||||||
|
background-size: 20px;
|
||||||
|
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTJGODE5MTI5RUNEMTFFOEE2MkNDNkNGMUVDQTYyN0EiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NkFGMEVBQzQ5RUQwMTFFOEE2MkNDNkNGMUVDQTYyN0EiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxMkY4MTkxMDlFQ0QxMUU4QTYyQ0M2Q0YxRUNBNjI3QSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxMkY4MTkxMTlFQ0QxMUU4QTYyQ0M2Q0YxRUNBNjI3QSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuARdncAAAXXSURBVHja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');
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-loan {
|
||||||
|
width: 20px;
|
||||||
|
background-size: 20px;
|
||||||
|
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTJGODE5MEU5RUNEMTFFOEE2MkNDNkNGMUVDQTYyN0EiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTJGODE5MEY5RUNEMTFFOEE2MkNDNkNGMUVDQTYyN0EiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxMkY4MTkwQzlFQ0QxMUU4QTYyQ0M2Q0YxRUNBNjI3QSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxMkY4MTkwRDlFQ0QxMUU4QTYyQ0M2Q0YxRUNBNjI3QSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlJ7jE8AAAdtSURBVHja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');
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-credit {
|
||||||
|
width: 20px;
|
||||||
|
background-size: 20px;
|
||||||
|
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NkFGMEVBQzc5RUQwMTFFOEE2MkNDNkNGMUVDQTYyN0EiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NkFGMEVBQzg5RUQwMTFFOEE2MkNDNkNGMUVDQTYyN0EiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2QUYwRUFDNTlFRDAxMUU4QTYyQ0M2Q0YxRUNBNjI3QSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2QUYwRUFDNjlFRDAxMUU4QTYyQ0M2Q0YxRUNBNjI3QSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ph/zl1UAAAchSURBVHja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');
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-me {
|
||||||
|
width: 20px;
|
||||||
|
background-size: 20px;
|
||||||
|
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NkFGMEVBQ0I5RUQwMTFFOEE2MkNDNkNGMUVDQTYyN0EiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NkFGMEVBQ0M5RUQwMTFFOEE2MkNDNkNGMUVDQTYyN0EiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2QUYwRUFDOTlFRDAxMUU4QTYyQ0M2Q0YxRUNBNjI3QSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2QUYwRUFDQTlFRDAxMUU4QTYyQ0M2Q0YxRUNBNjI3QSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pkn2BlEAAApmSURBVHja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');
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-footer-fixed {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 49;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-borrow-head {
|
||||||
|
padding: 15px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-borrow-head-title h2 {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #333;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-borrow-head-ad img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-slider {
|
||||||
|
overflow-x: hidden;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-wrapper {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
-webkit-transform: translate3d(0px, 0px, 0px);
|
||||||
|
transform: translate3d(0px, 0px, 0px);
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
-webkit-transition-property: -webkit-transform;
|
||||||
|
transition-property: -webkit-transform;
|
||||||
|
transition-property: transform;
|
||||||
|
transition-property: transform, -webkit-transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-item {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
-webkit-flex-shrink: 0;
|
||||||
|
-ms-flex-negative: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-item img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-pagination {
|
||||||
|
text-align: right;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 2;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0.5rem;
|
||||||
|
pointer-events: none;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: end;
|
||||||
|
-webkit-align-items: flex-end;
|
||||||
|
-ms-flex-align: end;
|
||||||
|
align-items: flex-end;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-webkit-justify-content: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-pagination > .slider-pagination-item {
|
||||||
|
margin: 0 .25rem;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
display: inline-block;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
border-radius: 100%;
|
||||||
|
/*background-color: rgba(255,255,255,0.50);*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-pagination > .slider-pagination-item.slider-pagination-item-active {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<module type="JAVA_MODULE" version="4">
|
||||||
|
<component name="NewModuleRootManager" inherit-compiler-output="true">
|
||||||
|
<exclude-output />
|
||||||
|
<content url="file://$MODULE_DIR$">
|
||||||
|
<sourceFolder url="file://$MODULE_DIR$" isTestSource="false" />
|
||||||
|
</content>
|
||||||
|
<orderEntry type="inheritedJdk" />
|
||||||
|
<orderEntry type="sourceFolder" forTests="false" />
|
||||||
|
</component>
|
||||||
|
</module>
|
||||||
Loading…
Reference in new issue