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
5 years ago
|
<!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>
|