作为一个前端菜鸟,记一下,方便自己以后翻阅
效果
businessIncomeRecord.html
<#assign base=base.contextPath />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>收款记录</title>
<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">
<link rel="stylesheet" href="../../h5-web/resources/css/swiper.min.css">
<link rel="stylesheet" href="../../h5-web/resources/jquery-weui/dist/lib/weui.min.css">
<link rel="stylesheet" href="../../h5-web/resources/jquery-weui/dist/css/jquery-weui.css">
<style type="text/css">
body {
background:#fff;
font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
font-size:12px;
}
* {
padding:0;
margin:0;
}
li {
list-style:none;
}
#top {
position:fixed;
top:0;
z-index:5;
width:100%;
background:#fff;
}
.go-back {
height: 30px;
width: 100%;
text-align: left;
background-color: #46A3FF;
padding: 5px 5px;
}
.go-back input {
width: 2.8rem;
height: 1.5rem;
line-height: 19px;
border: 1px solid #ccc;
font-size: 17px;
background: #ffffff;
color: #000000;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.summary{
position:relative;
}
.summaryCount{
position:absolute;
top:0px;
left:0px;
width:48%;
height:100%;
}
.summaryMoney{
position:absolute;
top:0px;
right:5px;
width:48%;
height:100%;
}
.content{
position: absolute;
height: 50px;
border-left: 1px solid #F0F0F0;
left: 50%;
top: 15px;
}
.totalAmount{
margin: 0 auto;
height:40px;
line-height: 30px;
font-size:23px;
text-align:center;
color:#01b49f;
position: relative;
top: 8px;
}
.totalDesc{
text-align:center;
margin: 0 auto;
height:22px;
line-height: 19px;
font-size:14px;
color:#000000;
position: relative;
top: 50%;
}
#nav .swiper-slide span {
text-align:center;
display:block;
line-height:2.5;
font-size:14px;
color:#333333;
}
.default_span{
color:#ffffff;
background-color:#01b49f;
}
#nav .bar {
width:50px;
height:3px;
position:absolute;
bottom:0px;
}
#nav .bar .color {
width:36px;
margin:0 auto;
height:3px;
background:#ff4891;
}
#page {
margin-top: 8.7rem;
height:100%;
}
.amount-type{
line-height: 19px;
height: 19px;
font-size:17px;
float:left;
}
.payAmount{
line-height: 19px;
height: 19px;
font-size:17px;
float:right;
color:#000000;
}
.incomeAmount{
line-height: 19px;
height: 19px;
font-size:17px;
float:right;
color:#01b49f;
}
.sj{
position: absolute;
bottom: 0.1rem;
display: flex;
flex-direction: row;
width: 40%;
height: 0.8rem;
line-height: 0.8rem;
float:left;
}
#container{
width:550px; height: 300px;
}
</style>
</head>
<body ontouchstart>
<div id="top">
<div class="go-back">
<input name="back" type="button" value="返回" onclick="goBack()"/>
</div>
<div style="height: 0.3rem; background-color: #eeeeee"></div>
<div class="total_money" id="total" style="background-color: #ffffff;height:80px"></div>
<div style="height: 0.3rem; background-color: #eeeeee"></div>
<div class="swiper-container" id="nav"></div>
<div style="height: 0.3rem; background-color: #eeeeee"></div>
</div>
<div class="in