You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
295 lines
9.2 KiB
295 lines
9.2 KiB
<!DOCTYPE html> |
|
<html> |
|
|
|
<head> |
|
<meta charset="utf-8"> |
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> |
|
<title>交易记录</title> |
|
<!--REM自适应布局JS--> |
|
<link rel="stylesheet" type="text/css" href="../../../lib/css/mui.min.css"> |
|
<link rel="stylesheet" type="text/css" href="../../../lib/css/basic.css"/> |
|
<link rel="stylesheet" type="text/css" href="../../css/base.css" /> |
|
<link href="../../../lib/css/icons-extra.css" rel="stylesheet" /> |
|
<link rel="stylesheet" type="text/css" href="../../../lib/css/mui.picker.min.css"> |
|
<script src="../../../lib/js/mui.min.js"></script> |
|
<script src="../../../lib/js/mui.picker.min.js"></script> |
|
<script src="../../../lib/js/mui.pullToRefresh.js"></script> |
|
<script src="../../../lib/js/mui.pullToRefresh.material.js"></script> |
|
<script src="../../../lib/js/mui.zoom.js"></script> |
|
<script src="../../../lib/js/vue.js"></script> |
|
<script src="../../../lib/js/app.js"></script> |
|
<script src="../../js/base/rem-layout.js"></script> |
|
<script src="../../js/language/wallet_language.js"></script> |
|
</head> |
|
<style> |
|
#contents { |
|
margin: 0.5rem; |
|
} |
|
|
|
.mui-icon { |
|
color: #666666; |
|
} |
|
|
|
.app-input-row-list { |
|
border-radius: 0.1rem; |
|
overflow: hidden; |
|
} |
|
|
|
.app-input-group-text { |
|
width: 100% !important; |
|
height: 0.65rem; |
|
} |
|
|
|
.app-input-group-text .app-input { |
|
padding: 0.2rem 0 !important; |
|
} |
|
|
|
.app-input-group-text .app-group-right-text, |
|
.app-input-group-text .app-group-right-text .mui-icon { |
|
line-height: 0.65rem !important; |
|
} |
|
|
|
.app-input-group-text .app-group-right-text { |
|
padding: 0 !important; |
|
} |
|
|
|
.app-record-contorol .top-text { |
|
font-size: 0.3rem; |
|
border: none !important; |
|
} |
|
|
|
.app-record-contorol .bottom-text { |
|
font-size: 0.2rem; |
|
color: #666666; |
|
} |
|
|
|
.roll-in { |
|
border: 1px solid #BC215A; |
|
color: #BC215A; |
|
} |
|
|
|
.roll-out { |
|
border: 1px solid #2AC845; |
|
color: #2AC845; |
|
} |
|
.app-table-view-darkly{ |
|
border-radius: 0; |
|
padding: 0; |
|
background:none; |
|
} |
|
.app-table-view-darkly .mui-table-view-cell{ |
|
margin-bottom: 2px; |
|
border-radius: 0.2rem; |
|
} |
|
</style> |
|
|
|
<style> |
|
.mui-slider-group { |
|
top: 0.8rem !important; |
|
} |
|
|
|
.mui-slider-group .mui-slider-item { |
|
border: none !important; |
|
} |
|
|
|
</style> |
|
|
|
<body> |
|
<div id="data-info"> |
|
<header class="mui-bar mui-bar-nav "> |
|
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> |
|
<h1 class="mui-title">交易记录</h1> |
|
<a id="search-btn" class="mui-icon mui-icon-search " style="position: absolute; right: 12px;bottom: .28rem; color:#FFFFFF;"></a> |
|
</header> |
|
<div class="mui-content dom-flex-row"> |
|
<div class="app-input-group app-input-group-darkly" style="display: flex;flex-direction: row;align-items: center;"> |
|
<div class="app-input-row-list" style="flex-grow: 1;"> |
|
<div class="app-input-group-text"> |
|
<span class="app-group-right-text"><i class="mui-icon mui-icon-extra mui-icon-extra-calendar"></i></span> |
|
<input class="app-input date" type="text" data-options='{"type":"date"}' readonly="readonly" placeholder="2018-10-17" /> |
|
</div> |
|
</div> |
|
<span><i class="mui-icon mui-icon-arrowthinright"></i></span> |
|
<div class="app-input-row-list" style="flex-grow: 1;"> |
|
<div class="app-input-group-text"> |
|
<span class="app-group-right-text"><i class="mui-icon mui-icon-extra mui-icon-extra-calendar"></i></span> |
|
<input class="app-input date" type="text" data-options='{"type":"date"}' readonly="readonly" placeholder="2018-10-17" /> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div id="slider" class="mui-slider mui-fullscreen" style="top:2.5rem;left: 0.25rem; right: 0.25rem;width: auto;"> |
|
<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" style="border: none !important;"> |
|
<div class="mui-scroll app-scroll-darkly"> |
|
<a class="mui-control-item mui-active" href="#all"> |
|
全部 |
|
</a> |
|
<a class="mui-control-item" href="#roll-in"> |
|
转入 |
|
</a> |
|
<a class="mui-control-item" href="#roll-out"> |
|
转出 |
|
</a> |
|
</div> |
|
</div> |
|
<div class="mui-slider-group"> |
|
<div id="all" class="mui-slider-item mui-control-content mui-active"> |
|
<div id="scroll1" class="mui-scroll-wrapper"> |
|
<div class="mui-scroll"> |
|
<ul class="mui-table-view app-table-view app-table-view-darkly"> |
|
<li class="mui-table-view-cell"> |
|
<div class="app-record-contorol"> |
|
<div class="app-record-img roll-in"> |
|
↗ |
|
</div> |
|
<div class="app-record-left"> |
|
<span class="top-text">龙哥</span> |
|
<span class="bottom-text">2018-10-18 11:00:03</span> |
|
</div> |
|
<div class="app-record-right"> |
|
<span class="top-text roll-in">－2.0000</span> |
|
<span class="bottom-text">ETH</span> |
|
</div> |
|
</div> |
|
</li> |
|
<li class="mui-table-view-cell"> |
|
<div class="app-record-contorol"> |
|
<div class="app-record-img roll-out"> |
|
↙ |
|
</div> |
|
<div class="app-record-left"> |
|
<span class="top-text">Array</span> |
|
<span class="bottom-text">2018-01-18 11:00:03</span> |
|
</div> |
|
<div class="app-record-right"> |
|
<span class="top-text roll-out">＋2.0000</span> |
|
<span class="bottom-text">ETH</span> |
|
</div> |
|
</div> |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
</div> |
|
<div id="roll-in" class="mui-slider-item mui-control-content"> |
|
<div id="scroll1" class="mui-scroll-wrapper"> |
|
<div class="mui-scroll"> |
|
<ul class="mui-table-view app-table-view app-table-view-darkly"> |
|
<li class="mui-table-view-cell"> |
|
<div class="app-record-contorol"> |
|
<div class="app-record-img roll-out"> |
|
↙ |
|
</div> |
|
<div class="app-record-left"> |
|
<span class="top-text">Array</span> |
|
<span class="bottom-text">2018-01-18 11:00:03</span> |
|
</div> |
|
<div class="app-record-right"> |
|
<span class="top-text roll-out">＋2.0000</span> |
|
<span class="bottom-text">ETH</span> |
|
</div> |
|
</div> |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
</div> |
|
<div id="roll-out" class="mui-slider-item mui-control-content"> |
|
<div id="scroll1" class="mui-scroll-wrapper"> |
|
<div class="mui-scroll"> |
|
<ul class="mui-table-view app-table-view app-table-view-darkly"> |
|
|
|
<li class="mui-table-view-cell"> |
|
<div class="app-record-contorol"> |
|
<div class="app-record-img roll-in"> |
|
↗ |
|
</div> |
|
<div class="app-record-left"> |
|
<span class="top-text">龙哥</span> |
|
<span class="bottom-text">2018-10-18 11:00:03</span> |
|
</div> |
|
<div class="app-record-right"> |
|
<span class="top-text roll-in">－2.0000</span> |
|
<span class="bottom-text">ETH</span> |
|
</div> |
|
</div> |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</body> |
|
|
|
</html> |
|
<script> |
|
(function($) { |
|
$.init(); |
|
var result = $('#result')[0]; |
|
var btns = $('.date'); |
|
btns.each(function(i, btn) { |
|
btn.addEventListener('tap', function() { |
|
var _self = this; |
|
if(_self.picker) { |
|
_self.picker.show(function(rs) { |
|
_self.value = rs.text; |
|
_self.picker.dispose(); |
|
_self.picker = null; |
|
}); |
|
} else { |
|
var optionsJson = this.getAttribute('data-options') || '{}'; |
|
var options = JSON.parse(optionsJson); |
|
var id = this.getAttribute('id'); |
|
/* |
|
* 首次显示时实例化组件 |
|
* 示例为了简洁，将 options 放在了按钮的 dom 上 |
|
* 也可以直接通过代码声明 optinos 用于实例化 DtPicker |
|
*/ |
|
_self.picker = new $.DtPicker(options); |
|
_self.picker.show(function(rs) { |
|
/* |
|
* rs.value 拼合后的 value |
|
* rs.text 拼合后的 text |
|
* rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本 |
|
* rs.m 月，用法同年 |
|
* rs.d 日，用法同年 |
|
* rs.h 时，用法同年 |
|
* rs.i 分（minutes 的第二个字母），用法同年 |
|
*/ |
|
_self.value = rs.text; |
|
/* |
|
* 返回 false 可以阻止选择框的关闭 |
|
* return false; |
|
*/ |
|
/* |
|
* 释放组件资源，释放后将将不能再操作组件 |
|
* 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。 |
|
* 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。 |
|
* 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。 |
|
*/ |
|
_self.picker.dispose(); |
|
_self.picker = null; |
|
}); |
|
} |
|
|
|
}, false); |
|
}); |
|
})(mui); |
|
|
|
mui.init(); |
|
|
|
mui.plusReady(function() { |
|
//阻尼系数 |
|
var deceleration = mui.os.ios ? 0.003 : 0.0009; |
|
mui('.mui-scroll-wrapper').scroll({ |
|
bounce: false, |
|
indicators: false, //是否显示滚动条 |
|
deceleration: deceleration |
|
}); |
|
|
|
}) |
|
</script> |