zhangziliang
5 years ago
parent
252091db2c
commit
aca4604f82
19 changed files with 1675 additions and 1730 deletions
@ -1,230 +1,356 @@ |
||||
.popover { |
||||
transition: all 0.3s; |
||||
transform: translate(-100%, 0); |
||||
width: 3.88rem; |
||||
height: 100%; |
||||
width: 3.88rem; |
||||
background: #FFFFFF; |
||||
position: fixed; |
||||
top: 1.1rem; |
||||
bottom: 0; |
||||
z-index: 5; } |
||||
.popover .popover-top { |
||||
width: 100%; |
||||
height: .65rem; |
||||
border-top: 1px solid #EEEEEE; |
||||
font-size: .24rem; |
||||
font-weight: 400; |
||||
color: #666666; |
||||
line-height: .2rem; } |
||||
.popover .popover-top .mui-segmented-control { |
||||
width: 100%; |
||||
overflow-x: auto; |
||||
display: flex; |
||||
overflow: auto; } |
||||
.popover .popover-top .mui-segmented-control::-webkit-scrollbar { |
||||
display: none; } |
||||
.popover .popover-top .mui-segmented-control .mui-control-item { |
||||
overflow: visible; |
||||
flex: 1; |
||||
width: unset; |
||||
margin-right: .5rem; } |
||||
.popover .popover-top .mui-segmented-control .mui-control-item:first-child { |
||||
padding-left: .3rem; } |
||||
.popover .popover-top .mui-segmented-control .mui-control-item:last-child { |
||||
padding-right: .3rem; } |
||||
.popover .mui-table-view { |
||||
background: #FFFFFF; } |
||||
.popover .mui-table-view:before { |
||||
background-color: #EEEEEE; } |
||||
.popover .mui-table-view:after { |
||||
height: 0; } |
||||
.popover .mui-table-view-cell { |
||||
width: 100%; |
||||
height: .65rem; |
||||
display: flex; |
||||
justify-content: space-between; } |
||||
.popover .mui-table-view-cell:after { |
||||
left: 0; |
||||
background-color: #EEEEEE; } |
||||
.popover .mui-table-view-cell .popover-coin { |
||||
font-size: .24rem; |
||||
color: #333333; } |
||||
.popover .mui-table-view-cell .popover-coin span { |
||||
color: #666666; |
||||
font-size: .17rem; } |
||||
.popover .mui-table-view-cell .popover-price { |
||||
font-size: .24rem; |
||||
color: #4CD49B; } |
||||
transition: all 0.3s; |
||||
transform: translate(-100%, 0); |
||||
width: 3.88rem; |
||||
height: 100%; |
||||
width: 3.88rem; |
||||
background: #FFFFFF; |
||||
position: fixed; |
||||
top: 1.1rem; |
||||
bottom: 0; |
||||
z-index: 5; |
||||
} |
||||
|
||||
.popover .popover-top { |
||||
width: 100%; |
||||
height: .65rem; |
||||
border-top: 1px solid #EEEEEE; |
||||
font-size: .24rem; |
||||
font-weight: 400; |
||||
color: #666666; |
||||
line-height: .2rem; |
||||
} |
||||
|
||||
.popover .popover-top .mui-segmented-control { |
||||
width: 100%; |
||||
overflow-x: auto; |
||||
display: flex; |
||||
overflow: auto; |
||||
} |
||||
|
||||
.popover .popover-top .mui-segmented-control::-webkit-scrollbar { |
||||
display: none; |
||||
} |
||||
|
||||
.popover .popover-top .mui-segmented-control .mui-control-item { |
||||
overflow: visible; |
||||
flex: 1; |
||||
width: unset; |
||||
margin-right: .5rem; |
||||
} |
||||
|
||||
.popover .popover-top .mui-segmented-control .mui-control-item:first-child { |
||||
padding-left: .3rem; |
||||
} |
||||
|
||||
.popover .popover-top .mui-segmented-control .mui-control-item:last-child { |
||||
padding-right: .3rem; |
||||
} |
||||
|
||||
.popover .mui-table-view { |
||||
background: #FFFFFF; |
||||
} |
||||
|
||||
.popover .mui-table-view:before { |
||||
background-color: #EEEEEE; |
||||
} |
||||
|
||||
.popover .mui-table-view:after { |
||||
height: 0; |
||||
} |
||||
|
||||
.popover .mui-table-view-cell { |
||||
width: 100%; |
||||
height: .65rem; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
.popover .mui-table-view-cell:after { |
||||
left: 0; |
||||
background-color: #EEEEEE; |
||||
} |
||||
|
||||
.popover .mui-table-view-cell .popover-coin { |
||||
font-size: .24rem; |
||||
color: #333333; |
||||
} |
||||
|
||||
.popover .mui-table-view-cell .popover-coin span { |
||||
color: #666666; |
||||
font-size: .17rem; |
||||
} |
||||
|
||||
.popover .mui-table-view-cell .popover-price { |
||||
font-size: .24rem; |
||||
color: #4CD49B; |
||||
} |
||||
|
||||
.market-info { |
||||
width: 100%; |
||||
height: 1.3rem; |
||||
background: #FFFFFF; |
||||
display: flex; |
||||
justify-content: space-around; |
||||
align-items: center; } |
||||
.market-info .market--info-left { |
||||
margin-right: 1rem; |
||||
font-family: Helvetica; } |
||||
.market-info .market--info-left .coin-price { |
||||
font-size: .43rem; |
||||
font-weight: bold; |
||||
color: #666666; |
||||
line-height: .2rem; |
||||
display: block; |
||||
padding-bottom: .3rem; } |
||||
.market-info .market--info-left .coin-rate { |
||||
font-size: .24rem; |
||||
color: #666666; |
||||
line-height: .2rem; } |
||||
.market-info .market--info-left .coin-rate .coin-gain { |
||||
font-size: .2rem; |
||||
color: #73D13D; } |
||||
.market-info .market-info-right { |
||||
font-size: .2rem; } |
||||
.market-info .market-info-right li { |
||||
width: 1.75rem; |
||||
display: flex; |
||||
justify-content: space-between; } |
||||
.market-info .market-info-right span { |
||||
display: block; |
||||
padding-bottom: .1rem; } |
||||
.market-info .market-info-right .coin-ranking { |
||||
color: #666666; |
||||
line-height: .2rem; } |
||||
.market-info .market-info-right .coin-ranking-info { |
||||
font-family: Helvetica; |
||||
color: #999999; |
||||
line-height: .2rem; } |
||||
width: 100%; |
||||
height: 1.3rem; |
||||
background: #FFFFFF; |
||||
display: flex; |
||||
justify-content: space-around; |
||||
align-items: center; |
||||
} |
||||
|
||||
.market-info .market--info-left { |
||||
margin-right: 1rem; |
||||
font-family: Helvetica; |
||||
} |
||||
/* 左侧金额文字 */ |
||||
.market-info .market--info-left .coin-price { |
||||
font-size: .43rem; |
||||
font-weight: bold; |
||||
color: #50BC78; |
||||
line-height: .2rem; |
||||
display: block; |
||||
padding-bottom: .3rem; |
||||
} |
||||
.market-info .market--info-left .coin-price.price-height{ |
||||
color: #50BC78; |
||||
} |
||||
.market-info .market--info-left .coin-price.price-low{ |
||||
color: #E95F61; |
||||
} |
||||
.market-info .market--info-left .coin-rate { |
||||
font-size: .24rem; |
||||
color: #666666; |
||||
line-height: .2rem; |
||||
} |
||||
|
||||
.market-info .market--info-left .coin-rate .coin-gain { |
||||
font-size: .2rem; |
||||
color: #73D13D; |
||||
} |
||||
|
||||
.market-info .market-info-right { |
||||
font-size: .2rem; |
||||
} |
||||
|
||||
.market-info .market-info-right li { |
||||
width: 1.75rem; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
.market-info .market-info-right span { |
||||
display: block; |
||||
padding-bottom: .1rem; |
||||
} |
||||
|
||||
.market-info .market-info-right .coin-ranking { |
||||
/* color: #8B9FB4; */ |
||||
line-height: .2rem; |
||||
} |
||||
|
||||
.market-info .market-info-right .coin-ranking-info { |
||||
font-family: Helvetica; |
||||
/* color: #B3D0E7; */ |
||||
line-height: .2rem; |
||||
} |
||||
|
||||
.market-k, |
||||
.market-bottom { |
||||
background: #FFFFFF; |
||||
color: #666666; |
||||
font-size: .24rem; } |
||||
background: #FFFFFF; |
||||
color: #666666; |
||||
font-size: .24rem; |
||||
} |
||||
|
||||
.market-bottom { |
||||
background: #FFFFFF; |
||||
padding-bottom: .2rem; |
||||
margin: .2rem 0 .9rem 0; } |
||||
.market-bottom .buying-selling li { |
||||
width: 100%; |
||||
display: flex; |
||||
margin: 0 auto; |
||||
text-align: center; } |
||||
.market-bottom .buying-selling li span { |
||||
flex: 1; } |
||||
.market-bottom .buying-selling li span:nth-child(3) { |
||||
flex: 2; } |
||||
.market-bottom .buying-selling li span:first-child, .market-bottom .buying-selling li span:last-child { |
||||
flex: 0.5; } |
||||
.market-bottom .buying-selling li p { |
||||
flex: 2; |
||||
display: flex; } |
||||
.market-bottom .buying-selling li p span { |
||||
flex: 1; } |
||||
.market-bottom .buying-selling li p .price-buy { |
||||
color: #4CD49B; |
||||
text-align: right; } |
||||
.market-bottom .buying-selling li p .price-sale { |
||||
color: #FD595D; |
||||
text-align: left; } |
||||
.market-bottom .buying-selling .buying-selling-title { |
||||
font-size: .2rem; |
||||
color: #333333; } |
||||
.market-bottom .buying-selling .buying-selling-info { |
||||
font-size: .17rem; } |
||||
.market-bottom .buying-selling .buying-selling-info p { |
||||
font-size: .17rem; } |
||||
.market-bottom .buying-selling .buying-selling-info .buy-sale { |
||||
color: #6584AB; } |
||||
.market-bottom .buying-selling .buying-selling-info .buy-sale-num { |
||||
color: #999999; } |
||||
background: #FFFFFF; |
||||
/* padding-bottom: .2rem; */ |
||||
/* margin: .2rem 0 .9rem 0; */ |
||||
} |
||||
|
||||
.market-bottom .buying-selling li { |
||||
width: 100%; |
||||
display: flex; |
||||
margin: 0 auto; |
||||
text-align: center; |
||||
} |
||||
|
||||
.market-bottom .buying-selling li span { |
||||
flex: 1; |
||||
} |
||||
|
||||
.market-bottom .buying-selling li span:nth-child(3) { |
||||
flex: 2; |
||||
} |
||||
|
||||
.market-bottom .buying-selling li span:first-child, |
||||
.market-bottom .buying-selling li span:last-child { |
||||
flex: 0.5; |
||||
} |
||||
|
||||
.market-bottom .buying-selling li p { |
||||
flex: 2; |
||||
display: flex; |
||||
} |
||||
|
||||
.market-bottom .buying-selling li p span { |
||||
flex: 1; |
||||
} |
||||
|
||||
.market-bottom .buying-selling li p .price-buy { |
||||
color: #4CD49B; |
||||
text-align: right; |
||||
} |
||||
|
||||
.market-bottom .buying-selling li p .price-sale { |
||||
color: #FD595D; |
||||
text-align: left; |
||||
} |
||||
|
||||
.market-bottom .buying-selling .buying-selling-title { |
||||
font-size: .2rem; |
||||
color: #425877; |
||||
} |
||||
|
||||
.market-bottom .buying-selling .buying-selling-info { |
||||
font-size: .17rem; |
||||
} |
||||
|
||||
.market-bottom .buying-selling .buying-selling-info p { |
||||
font-size: .17rem; |
||||
} |
||||
|
||||
.market-bottom .buying-selling .buying-selling-info .buy-sale { |
||||
color: #6584AB; |
||||
} |
||||
|
||||
.market-bottom .buying-selling .buying-selling-info .buy-sale-num { |
||||
color: #999999; |
||||
} |
||||
|
||||
.transaction { |
||||
margin-top: .2rem; } |
||||
.transaction li { |
||||
width: 94%; |
||||
display: flex; |
||||
margin: 0 auto; |
||||
font-size: .17rem; |
||||
text-align: center; } |
||||
.transaction .transaction-title { |
||||
color: #333333; } |
||||
.transaction .transaction-title span { |
||||
flex: 1; } |
||||
.transaction .transaction-info span { |
||||
flex: 1; } |
||||
.transaction .transaction-info .transaction-time, |
||||
.transaction .transaction-info .transaction-num { |
||||
color: #6584AB; } |
||||
.transaction .transaction-info .transaction-direction-sale { |
||||
color: #FD595D; } |
||||
.transaction .transaction-info .transaction-direction-buy { |
||||
color: #4CD49B; } |
||||
.transaction .transaction-info .transaction-price { |
||||
color: #999999; } |
||||
margin-top: .2rem; |
||||
} |
||||
|
||||
.transaction li { |
||||
width: 94%; |
||||
display: flex; |
||||
margin: 0 auto; |
||||
font-size: .17rem; |
||||
text-align: center; |
||||
} |
||||
|
||||
.transaction .transaction-title { |
||||
color: #333333; |
||||
} |
||||
|
||||
.transaction .transaction-title span { |
||||
flex: 1; |
||||
} |
||||
|
||||
.transaction .transaction-info span { |
||||
flex: 1; |
||||
} |
||||
|
||||
.transaction .transaction-info .transaction-time, |
||||
.transaction .transaction-info .transaction-num { |
||||
color: #6584AB; |
||||
} |
||||
|
||||
.transaction .transaction-info .transaction-direction-sale { |
||||
color: #FD595D; |
||||
} |
||||
|
||||
.transaction .transaction-info .transaction-direction-buy { |
||||
color: #4CD49B; |
||||
} |
||||
|
||||
.transaction .transaction-info .transaction-price { |
||||
color: #999999; |
||||
} |
||||
|
||||
.introduction h3 { |
||||
width: 90%; |
||||
color: #333333; |
||||
font-size: .37rem; |
||||
margin: .2rem auto; } |
||||
width: 100%; |
||||
/* color: #FFF; */ |
||||
font-size: .31rem; |
||||
margin: 0 auto; |
||||
|
||||
} |
||||
.introduction h3.title{ |
||||
text-align: center; |
||||
} |
||||
.introduction h3.datail{ |
||||
width: 90%; |
||||
margin: 0 auto; |
||||
margin-bottom: .1rem; |
||||
} |
||||
.introduction .introduction-item .introduction-item-list { |
||||
width: 90%; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
font-size: .24rem; |
||||
margin: 0 auto; } |
||||
.introduction .introduction-item .introduction-item-list span { |
||||
padding: .1rem 0; } |
||||
.introduction .introduction-item .introduction-item-list .introduction-item-list-txt { |
||||
color: #666666; } |
||||
.introduction .introduction-item .introduction-item-list .introduction-item-list-num { |
||||
width: 70%; |
||||
color: #999999; |
||||
word-wrap: break-word; |
||||
word-break: normal; |
||||
text-align: right; } |
||||
width: 90%; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
font-size: .24rem; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.introduction .introduction-item .introduction-item-list span { |
||||
padding: .1rem 0; |
||||
} |
||||
|
||||
.introduction .introduction-item .introduction-item-list .introduction-item-list-txt { |
||||
color: #000; |
||||
} |
||||
|
||||
.introduction .introduction-item .introduction-item-list .introduction-item-list-num { |
||||
width: 75%; |
||||
/* color: #FFF; */ |
||||
word-wrap: break-word; |
||||
word-break: normal; |
||||
text-align: right; |
||||
} |
||||
#descr{ |
||||
/* color:#6787AE; */ |
||||
} |
||||
.introduction p { |
||||
width: 90%; |
||||
font-size: .24rem; |
||||
color: #999999; |
||||
line-height: .3rem; |
||||
margin: 0 auto; |
||||
text-indent: .4rem; } |
||||
width: 90%; |
||||
font-size: .24rem; |
||||
color: #999999; |
||||
line-height: .3rem; |
||||
margin: 0 auto; |
||||
text-indent: .4rem; |
||||
} |
||||
|
||||
.btn-group { |
||||
display: flex; |
||||
justify-content: center; |
||||
position: fixed; |
||||
bottom: .2rem; |
||||
width: 100%; |
||||
margin-top: .2rem; } |
||||
.btn-group .btn-group-buy, |
||||
.btn-group .btn-group-sale { |
||||
width: 44%; |
||||
height: .6rem; |
||||
background: #73D13D; |
||||
border-radius: 4px; |
||||
font-size: .27rem; |
||||
color: #FFFFFF; |
||||
text-align: center; |
||||
line-height: .6rem; |
||||
margin: 0 .1rem; } |
||||
.btn-group .btn-group-sale { |
||||
background: #E32E33; } |
||||
display: flex; |
||||
justify-content: center; |
||||
position: fixed; |
||||
bottom: .2rem; |
||||
width: 100%; |
||||
margin-top: .2rem; |
||||
} |
||||
|
||||
.btn-group .btn-group-buy, |
||||
.btn-group .btn-group-sale { |
||||
width: 44%; |
||||
height: .6rem; |
||||
background: #73D13D; |
||||
border-radius: 4px; |
||||
font-size: .27rem; |
||||
color: #FFFFFF; |
||||
text-align: center; |
||||
line-height: .6rem; |
||||
margin: 0 .1rem; |
||||
} |
||||
|
||||
.btn-group .btn-group-sale { |
||||
background: #E32E33; |
||||
} |
||||
|
||||
.bg { |
||||
position: fixed; |
||||
left: 0; |
||||
bottom: 0; |
||||
right: 0; |
||||
top: 0; |
||||
background: rgba(21, 33, 54, 0.8); |
||||
z-index: 2; |
||||
display: none; } |
||||
position: fixed; |
||||
left: 0; |
||||
bottom: 0; |
||||
right: 0; |
||||
top: 0; |
||||
background: rgba(21, 33, 54, 0.8); |
||||
z-index: 2; |
||||
display: none; |
||||
} |
||||
|
||||
/*# sourceMappingURL=market_info.css.map */ |
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,319 @@ |
||||
//1、每个页面写自己的国际化语言变量，例子：
|
||||
var langues = { |
||||
zh_CN: { |
||||
title: '行情', |
||||
price: '价格', |
||||
all: '全部', |
||||
change: '涨跌幅', |
||||
favorites: "自选", |
||||
fullMarket:'全部' |
||||
}, |
||||
zh_HK: { |
||||
title: '行情', |
||||
price: '價格', |
||||
all: '全部', |
||||
change: '漲跌幅', |
||||
favorites: " 自選", |
||||
fullMarket:'全部' |
||||
|
||||
}, |
||||
en_US: { |
||||
title: 'Market', |
||||
price: 'Price', |
||||
all: 'All', |
||||
change: 'Change', |
||||
favorites: "Favorites", |
||||
fullMarket:'All' |
||||
} |
||||
}; |
||||
//2、页面上所有需要国际化的文字，包括提示，都通过Vue去引用，例子：
|
||||
var langueKey = app.getLanguageLocalStorage(); //获取国际化语种
|
||||
var langue = langues[langueKey]; // 获取国际化语种数据
|
||||
var dataInfo = new Vue({ |
||||
el: "#js-data-info", |
||||
data: { |
||||
langue: langue, |
||||
marketList: [] |
||||
} |
||||
}) |
||||
//3、每个页面都需要加上以下的方法：
|
||||
window.addEventListener('switchLangueData', function(e) { |
||||
//dataInfo为Vue对象的名称
|
||||
dataInfo.langue = langues[e.detail]; |
||||
}); |
||||
var currencysObj = {}; |
||||
var choiceMarketsObj; |
||||
console.log=function(){} |
||||
mui.plusReady(function() { |
||||
initData(); |
||||
listener(); |
||||
}); |
||||
|
||||
function initData() { |
||||
choiceMarketsObj = app.getLocalStorage(app.marketChoiceKey); |
||||
if(JSON.stringify(choiceMarketsObj) != "{}"){ |
||||
document.getElementById("choice-item").classList.add("mui-active"); |
||||
document.getElementById("choice").classList.add("mui-active"); |
||||
}else{ |
||||
document.getElementById("USDT-item").classList.add("mui-active"); |
||||
document.getElementById("USDT").classList.add("mui-active"); |
||||
} |
||||
getMarkets(); |
||||
} |
||||
|
||||
function listener() { |
||||
setWebsocket(); |
||||
/** |
||||
* 监听行情改变事件 |
||||
*/ |
||||
window.addEventListener("marketChange", function(event) { |
||||
var changeData = event.detail; |
||||
if(changeData.type == 'deal') { //成交
|
||||
getChangeMarket(changeData.unitName + '-' + changeData.coinName) |
||||
} else { //盘口
|
||||
var infoPage = plus.webview.getWebviewById('market_info.html'); |
||||
if(infoPage) { |
||||
mui.fire(infoPage, "depthChange", changeData); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
/** |
||||
* 监听自选改变事件 |
||||
*/ |
||||
window.addEventListener("marketChoice", function(event) { |
||||
var currencyPair = event.detail; |
||||
choiceMarketsObj = app.getLocalStorage(app.marketChoiceKey); |
||||
if(choiceMarketsObj[currencyPair]){ |
||||
var currencys = currencyPair.split('-'); |
||||
var marketObj = currencysObj[currencys[1]][currencys[0]].marketObj; |
||||
var choiceLi = getLiDocument(marketObj,currencys,'choice-'); |
||||
document.getElementById("market-choice-ul").appendChild(choiceLi); |
||||
setMarket(marketObj,'choice-'); |
||||
liListener(choiceLi, marketObj.currencyPair); |
||||
}else{ |
||||
document.getElementById('choice-' + currencyPair + '-market-li').remove(); |
||||
} |
||||
}); |
||||
|
||||
/** |
||||
* 汇率改变事件 |
||||
*/ |
||||
window.addEventListener("exchangeRate", function(event) { |
||||
initData(); |
||||
}); |
||||
|
||||
/** |
||||
* 首页自选跳转 |
||||
*/ |
||||
window.addEventListener("choiceTab", function(event) { |
||||
var current = document.querySelector(".mui-control-item.mui-active"); |
||||
var dom = document.getElementById('choice-item'); |
||||
if(dom !== current) { |
||||
current.classList.remove('mui-active'); |
||||
dom.classList.add('mui-active'); |
||||
document.querySelector(".mui-control-content.mui-active").classList.remove('mui-active'); |
||||
document.getElementById('choice').classList.add('mui-active'); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
function setWebsocket(){ |
||||
console.log=function(){} |
||||
var socket = new SockJS(app.currencyBaseUrl + "/websocket"); |
||||
var stompClient = Stomp.over(socket); |
||||
stompClient.connect({}, function(frame) { |
||||
//订阅讲座消息
|
||||
stompClient.subscribe('/topic/market', function(greeting) { |
||||
var obj = JSON.parse(greeting.body); |
||||
var currencys = obj.currencyPair.split('-'); |
||||
if(JSON.stringify(currencysObj) == '{}'){ |
||||
initData(); |
||||
} |
||||
if(currencysObj[currencys[1]] && currencysObj[currencys[1]][currencys[0]]){ |
||||
currencysObj[currencys[1]][currencys[0]].marketObj = obj; |
||||
setMarket(obj,'base-'); |
||||
if(choiceMarketsObj[obj.currencyPair]){ |
||||
setMarket(obj,'choice-'); |
||||
} |
||||
sendChangeDataToView(obj); |
||||
} |
||||
}); |
||||
}); |
||||
socket.onclose = function() { |
||||
setWebsocket(); |
||||
}; |
||||
} |
||||
|
||||
function getChangeMarket(currencyPair) { |
||||
var url = app.currencyBaseUrl + "market/get?currencyPair=" + currencyPair; |
||||
mui.ajax(url, { |
||||
type: "GET", |
||||
dataType: "json", |
||||
success: function(j) { |
||||
if(j.code == 200) { |
||||
var currencys = currencyPair.split('-'); |
||||
currencysObj[currencys[1]][currencys[0]].marketObj = j.data; |
||||
setMarket(j.data,'base-'); |
||||
if(choiceMarketsObj[j.data.currencyPair]){ |
||||
setMarket(j.data,'choice-'); |
||||
} |
||||
sendChangeDataToView(j.data) |
||||
} else {} |
||||
}, |
||||
error: function(xhr, type, errorThrown) { |
||||
console.log(type) |
||||
} |
||||
}); |
||||
} |
||||
|
||||
function getMarkets() { |
||||
var url = app.currencyBaseUrl + "market/getList"; |
||||
mui.ajax(url, { |
||||
type: "GET", |
||||
dataType: "json", |
||||
success: function(j) { |
||||
if(j.code == 200) { |
||||
var markets = j.data; |
||||
for(var index in markets) { |
||||
setLiDocument(markets[index]); |
||||
app.setLocalStorage(app.marketKey + markets[index].currencyPair, markets[index]); |
||||
} |
||||
sendDataToView(); |
||||
} else {} |
||||
}, |
||||
error: function(xhr, type, errorThrown) { |
||||
console.log(type) |
||||
} |
||||
}); |
||||
} |
||||
|
||||
function getMarket(currencyObj) { |
||||
var now = new Date(); |
||||
var timestamp = app.formatDate(now.getTime()); |
||||
var currencyName = currencyObj.currencyName; |
||||
var currencyPair = currencyObj.currencyPair; |
||||
} |
||||
|
||||
function setMarket(marketObj,id) { |
||||
var currencyName = marketObj.currencyPair; |
||||
document.getElementById(id + currencyName + '-total').innerText = '24H '+app.formatValue(marketObj.total); |
||||
var marketEl = document.getElementById(id + currencyName + '-market'); |
||||
marketEl.innerHTML = '<span class="price1">'+app.formatValue(marketObj.amount)+'</span>'+ |
||||
'<span class="price2">' + app.formatValue(marketObj[app.getExchangeRateLocalStorage().toLowerCase() + 'Amount'] * marketObj.amount) + ' ' + app.getExchangeRateLocalStorage() +'</span>'; |
||||
var percentEl = document.getElementById(id + currencyName + '-percent'); |
||||
marketObj.percent = marketObj.percent; |
||||
if(marketObj.percent < 0) { |
||||
percentEl.innerText = parseFloat(marketObj.percent * 100).toFixed(2) + '%'; |
||||
percentEl.classList.remove('app-coin-percent-up'); |
||||
percentEl.classList.remove('app-coin-percent-down'); |
||||
percentEl.classList.add('app-coin-percent-down'); |
||||
} else { |
||||
percentEl.innerText = '+' + parseFloat(marketObj.percent * 100).toFixed(2) + '%'; |
||||
percentEl.classList.remove('app-coin-percent-down'); |
||||
percentEl.classList.remove('app-coin-percent-up'); |
||||
percentEl.classList.add('app-coin-percent-up'); |
||||
} |
||||
} |
||||
|
||||
function setLiDocument(marketObj) { |
||||
var currencys = marketObj.currencyPair.split('-'); |
||||
var li = getLiDocument(marketObj,currencys,'base-'); |
||||
var ul = document.getElementById(currencys[1] + "-ul"); |
||||
if(!ul){ |
||||
var a = document.createElement('a'); |
||||
a.id = currencys[1] + '-item'; |
||||
a.className = "mui-control-item"; |
||||
a.href = '#' + currencys[1]; |
||||
a.innerHTML = currencys[1]; |
||||
document.getElementById("sliderSegmentedControl").appendChild(a); |
||||
|
||||
var div = document.createElement('div'); |
||||
div.id = currencys[1]; |
||||
div.className = "mui-control-content"; |
||||
document.getElementById("app-scroll").appendChild(div); |
||||
ul = document.createElement('ul'); |
||||
ul.id = currencys[1] + "-ul"; |
||||
ul.className = "dapp-table-view mui-table-view"; |
||||
div.appendChild(ul); |
||||
} |
||||
ul.appendChild(li); |
||||
setMarket(marketObj,'base-'); |
||||
if(!currencysObj[currencys[1]]) { |
||||
currencysObj[currencys[1]] = {}; |
||||
} |
||||
var currencyObj = { |
||||
'marketObj': marketObj, |
||||
'title': currencys[0] + '/' + currencys[1], |
||||
'basecoin': currencys[1], |
||||
'coin': currencys[0] |
||||
} |
||||
currencysObj[currencys[1]][currencys[0]] = currencyObj; |
||||
liListener(li, marketObj.currencyPair); |
||||
if(choiceMarketsObj[marketObj.currencyPair]){ |
||||
var choiceLi = getLiDocument(marketObj,currencys,'choice-'); |
||||
document.getElementById("market-choice-ul").appendChild(choiceLi); |
||||
setMarket(marketObj,'choice-'); |
||||
liListener(choiceLi, marketObj.currencyPair); |
||||
} |
||||
} |
||||
|
||||
function getLiDocument(marketObj,currencys,id){ |
||||
var li = document.createElement("li"); |
||||
li.id = id + marketObj.currencyPair + '-market-li'; |
||||
li.className = 'dapp-table-view-cell mui-table-view-cell mui-media'; |
||||
li.innerHTML = '<div class="dapp-market-info">' +
|
||||
'<span class="name1">' + currencys[0] + '<span class="dapp-market-currency">/' + currencys[1] + '</span>'+ |
||||
'</span><span id="'+id + marketObj.currencyPair + '-total" class="name2"></span>'+ |
||||
'</div>' + |
||||
'<div id="'+id + marketObj.currencyPair + '-market" class="dapp-market-info"></div>' + |
||||
'<div id="'+id + marketObj.currencyPair + '-percent" class="dapp-market-percent "></div>'; |
||||
return li; |
||||
} |
||||
|
||||
function liListener(li, currencyPair) { |
||||
li.addEventListener('tap', function() { |
||||
openMarketInfo(currencyPair); |
||||
}); |
||||
} |
||||
|
||||
function openMarketInfo(currencyPair) { |
||||
var data = { |
||||
currencysObj: currencysObj, |
||||
currencyPair: currencyPair, |
||||
choiceMarketsObj: choiceMarketsObj |
||||
} |
||||
app.openWin('market_info.html', 'market_info.html', null, data); |
||||
} |
||||
|
||||
/** |
||||
* 把行情数据推送到其它窗口 |
||||
*/ |
||||
function sendDataToView() { |
||||
var homePage = plus.webview.getWebviewById('html/home/html/home.html'); |
||||
mui.fire(homePage, "marketList", currencysObj); |
||||
var cctPage = plus.webview.getWebviewById('html/cct/html/cct_index.html'); |
||||
mui.fire(cctPage, "marketList", currencysObj); |
||||
var walletPage = plus.webview.getWebviewById('html/wallet/html/wallet.html'); |
||||
mui.fire(walletPage, "marketList", currencysObj); |
||||
|
||||
} |
||||
|
||||
/** |
||||
* 把新行情数据推送到其它窗口 |
||||
* @param {Object} data |
||||
*/ |
||||
function sendChangeDataToView(data) { |
||||
var homePage = plus.webview.getWebviewById('html/home/html/home.html'); |
||||
mui.fire(homePage, "marketChange", data); |
||||
sendDataToView(); |
||||
var infoPage = plus.webview.getWebviewById('market_info.html'); |
||||
if (infoPage) { |
||||
mui.fire(infoPage, "marketChange", data); |
||||
} |
||||
var cctPage = plus.webview.getWebviewById('html/cct/html/cct_index.html'); |
||||
if (cctPage) { |
||||
mui.fire(cctPage, "marketChange", data); |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,194 @@ |
||||
<!doctype html> |
||||
<html> |
||||
|
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title></title> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"> |
||||
<link href="../../lib/css/mui.min.css" rel="stylesheet" /> |
||||
<!--引入公共样式--> |
||||
<link href="../../lib/css/basic.css" rel="stylesheet" /> |
||||
<link href="../../lib/css/icons-extra.css" rel="stylesheet" /> |
||||
<script src="../../lib/js/rem-layout.js"></script> |
||||
<script type="text/javascript" src="../../lib/js/mui.min.js"></script> |
||||
<script type="text/javascript" src="../../lib/js/mui.pullToRefresh.js"></script> |
||||
<script type="text/javascript" src="../../lib/js/mui.pullToRefresh.material.js"></script> |
||||
<script type="text/javascript" src="../../lib/js/vue.min.js"></script> |
||||
<script type="text/javascript" src="../../lib/js/app.js"></script> |
||||
<script type="text/javascript" src="../../lib/js/sockjs.min.js"></script> |
||||
<script type="text/javascript" src="../../lib/js/stomp.min.js"></script> |
||||
<style type="text/css"> |
||||
html, |
||||
body { |
||||
background: #FFFFFF; |
||||
} |
||||
|
||||
.mui-slider-indicator.mui-segmented-control { |
||||
color: #333333; |
||||
margin: .05rem 0px; |
||||
} |
||||
|
||||
.mui-icon, |
||||
.mui-icon-extra { |
||||
border: none !important; |
||||
margin: 0 !important; |
||||
font-size: 20px; |
||||
line-height: 30px; |
||||
width: 40px; |
||||
height: 30px; |
||||
} |
||||
|
||||
.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active { |
||||
color: #007aff; |
||||
border-bottom: none; |
||||
border-radius: .05rem; |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
.mui-table-view-cell.mui-active { |
||||
background-color: #EEEEEE; |
||||
} |
||||
|
||||
.app-fullscreen { |
||||
position: relative; |
||||
} |
||||
|
||||
.dapp-table-view { |
||||
background: #FFFFFF; |
||||
} |
||||
|
||||
.dapp-table-view:before { |
||||
height: 0; |
||||
} |
||||
|
||||
.dapp-table-view:after { |
||||
height: 0; |
||||
} |
||||
|
||||
.dapp-table-view-cell { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
.dapp-table-view-cell:after { |
||||
height: 0px; |
||||
} |
||||
|
||||
.dapp-table-view-cell-head { |
||||
padding: .15rem 5%; |
||||
color: #FFFFFF; |
||||
} |
||||
|
||||
.dapp-table-view-cell-head:after { |
||||
position: absolute; |
||||
right: 0; |
||||
top: .78rem; |
||||
left: 0; |
||||
height: 1px; |
||||
content: ''; |
||||
background-color: #EEEEEE; |
||||
} |
||||
|
||||
.dapp-table-view-cell .dapp-market-info { |
||||
font-size: .24rem; |
||||
font-weight: 400; |
||||
width: 30%; |
||||
text-align: left; |
||||
line-height: .43rem; |
||||
color: #333333; |
||||
flex: 1; |
||||
margin-left: .3rem; |
||||
} |
||||
|
||||
.dapp-table-view-cell-head .dapp-market-info { |
||||
font-weight: 400; |
||||
} |
||||
|
||||
.dapp-table-view-cell-head .dapp-market-info:last-child { |
||||
width: 40%; |
||||
} |
||||
|
||||
.dapp-table-view-cell .dapp-market-percent { |
||||
width:1.12rem; |
||||
height:.43rem; |
||||
border-radius: .07rem; |
||||
font-size: .2rem; |
||||
font-weight: 600; |
||||
color: #fff; |
||||
text-align: center; |
||||
line-height: .43rem; |
||||
} |
||||
|
||||
.app-coin-percent-up { |
||||
background: #73D13D; |
||||
border-radius: 4px; |
||||
} |
||||
|
||||
.app-coin-percent-down { |
||||
background: #E32E33; |
||||
border-radius: 4px; |
||||
} |
||||
|
||||
.dapp-market-currency { |
||||
color: #666666; |
||||
font-size: .17rem; |
||||
} |
||||
|
||||
.name2, |
||||
.price2 { |
||||
font-size: .2rem; |
||||
font-weight: 400; |
||||
color: #999999; |
||||
line-height: .2rem; |
||||
display: block; |
||||
padding: .2rem 0; |
||||
} |
||||
</style> |
||||
</head> |
||||
|
||||
<body> |
||||
<div id="js-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">{{langue.title}}</h1> |
||||
</header> |
||||
<div class="mui-content"> |
||||
<div class="app-fullscreen"> |
||||
<div id="app-scroll" class="mui-scroll"> |
||||
<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"> |
||||
<a id="choice-item" class="mui-control-item" href="#choice"> |
||||
{{langue.favorites}} |
||||
</a> |
||||
<a id="USDT-item" class="mui-control-item" href="#USDT"> |
||||
USDT |
||||
</a> |
||||
</div> |
||||
<div id="USDT" class="mui-control-content"> |
||||
<ul id="USDT-ul" class="dapp-table-view mui-table-view"> |
||||
<!--<li class="dapp-table-view-cell mui-table-view-cell mui-media"> |
||||
<div class="dapp-market-info"> |
||||
<span class="name1">ETH<span class="dapp-market-currency">/USDT</span></span> |
||||
<span class="name2">24H 2453333.56</span> |
||||
</div> |
||||
<div id="BTC-market" class="dapp-market-info"> |
||||
<span class="price1">0.0006744</span> |
||||
<span class="price2">￥0.07</span> |
||||
</div> |
||||
<div id="BTC-percent" class="dapp-market-percent app-coin-percent-down ">-10.93%</div> |
||||
</li>--> |
||||
|
||||
</ul> |
||||
</div> |
||||
<div id="choice" class="mui-control-content"> |
||||
<ul id="market-choice-ul" class="dapp-table-view mui-table-view"> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</body> |
||||
<script type="text/javascript" src="js/market.js"></script> |
||||
|
||||
</html> |
||||
@ -0,0 +1,25 @@ |
||||
@media only screen and (-webkit-device-pixel-ratio: 3) and (device-height: 812px) and (device-width: 375px) { |
||||
.mui-bar-nav~.mui-content { |
||||
position: absolute; |
||||
top: .8rem; |
||||
right: 15px; |
||||
left: 15px; |
||||
bottom: 0; |
||||
margin: 0; |
||||
padding: 0 !important; |
||||
overflow: scroll; |
||||
-webkit-overflow-scrolling: touch; |
||||
|
||||
} |
||||
::-webkit-scrollbar { |
||||
display: none; |
||||
} |
||||
.mui-bar-nav{ |
||||
height: .6rem; |
||||
} |
||||
.mui-bar.mui-bar-nav { |
||||
top: 0 !important; |
||||
padding: 0; |
||||
margin: 0; |
||||
} |
||||
} |
||||
Loading…
Reference in new issue