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.
320 lines
12 KiB
320 lines
12 KiB
5 years ago
|
<!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="css/market_info.css" rel="stylesheet" />
|
||
|
|
<script src="../../lib/js/mui.min.js" type="text/javascript" charset="utf-8"></script>
|
||
|
|
<script src="../../lib/js/rem-layout.js"></script>
|
||
|
|
<script src="../../lib/js/vue.min.js"></script>
|
||
|
|
<script src="js/echarts.min.js"></script>
|
||
|
|
<script 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>
|
||
|
|
<script src="../../lib/JsApi/jquery.min.js"></script>
|
||
|
|
<script src="../../lib/charting_library/charting_library.min.js"></script>
|
||
|
|
<script src="../../lib/JsApi/Datafeed.js"></script>
|
||
|
|
<script src="js/data.js"></script>
|
||
|
|
<script src="js/echarts_options.js"></script>
|
||
|
|
<style>
|
||
|
|
.mui-slider-indicator.mui-segmented-control {
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mui-table-view-cell.mui-active {
|
||
|
|
background-color: #EEEEEE;
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-chart {
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-chart-heard {
|
||
|
|
padding: .1rem .15rem;
|
||
|
|
font-size: .17rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-chart-vol {
|
||
|
|
color: #376691;
|
||
|
|
padding-right: .1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-chart-MA5 {
|
||
|
|
color: #8B7500;
|
||
|
|
padding-right: .1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-chart-MA10 {
|
||
|
|
color: #4CD49B;
|
||
|
|
padding-right: .1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-chart-MA20 {
|
||
|
|
color: #DD5F9E;
|
||
|
|
padding-right: .1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-chart-MA30 {
|
||
|
|
color: #9751DC;
|
||
|
|
padding-right: .1rem;
|
||
|
|
}
|
||
|
|
.buttons {
|
||
|
|
display: flex;
|
||
|
|
margin-left: 0.1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.buttons>div {
|
||
|
|
padding: 0.1rem;
|
||
|
|
flex: 1;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.active {
|
||
|
|
color: #0094ff;
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<header class="mui-bar mui-bar-nav">
|
||
|
|
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
|
||
|
|
<a class="mui-icon mui-icon-list mui-icon-left-nav" id="icon-popover" style="color: #333333; margin-left: .5rem; font-size: 22px;"></a>
|
||
|
|
<h1 id="title" class="mui-title" style="text-align: left; margin-left: 1rem;"></h1>
|
||
|
|
<a id="choice" class="mui-icon mui-icon-starhalf mui-pull-right mui-icon-right-nav" ></a>
|
||
|
|
</header>
|
||
|
|
<div id="js-data-info" class="mui-content">
|
||
|
|
<!--弹出菜单-->
|
||
|
|
<div class="popover" id="popover">
|
||
|
|
<div class="popover-top">
|
||
|
|
<div id="basecoin-a" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
|
||
|
|
<!--<a class="mui-control-item mui-active" href="#item10">USDT</a>-->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!--<div id="item10" class="mui-control-content mui-active">
|
||
|
|
<ul class="mui-table-view">
|
||
|
|
<li class="mui-table-view-cell">
|
||
|
|
<span class="popover-coin">
|
||
|
|
BTC <span>/USDT </span>
|
||
|
|
</span>
|
||
|
|
<span class="popover-price">402.00</span>
|
||
|
|
</li>
|
||
|
|
<li class="mui-table-view-cell">
|
||
|
|
<span class="popover-coin">
|
||
|
|
BTC <span>/USDT </span>
|
||
|
|
</span>
|
||
|
|
<span class="popover-price">400.00</span>
|
||
|
|
</li>
|
||
|
|
<li class="mui-table-view-cell">
|
||
|
|
<span class="popover-coin">
|
||
|
|
BTC <span>/USDT </span>
|
||
|
|
</span>
|
||
|
|
<span class="popover-price">4002.00</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>-->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--行情顶部显示内容-->
|
||
|
|
<div class="market-info">
|
||
|
|
<div class="market--info-left">
|
||
|
|
<span id="coin-price" class="coin-price"></span>
|
||
|
|
<p class="coin-rate">
|
||
|
|
<span id="coin-rate"></span>
|
||
|
|
<span id="coin-gain" class="coin-gain"></span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="market-info-right">
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<span class="coin-ranking">{{langue.high}}</span>
|
||
|
|
<span id="highest" class="coin-ranking-info"></span>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<span class="coin-ranking">{{langue.low}}</span>
|
||
|
|
<span id="lowest" class="coin-ranking-info"></span>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<span class="coin-ranking">24H</span>
|
||
|
|
<span id="day-total" class="coin-ranking-info"></span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--行情走势图 分时线/日 线-->
|
||
|
|
<div class="market-k">
|
||
|
|
<!--<div id="market-k-a" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
|
||
|
|
<a id="T" class="mui-control-item " href="#item1">{{langue.ktype.realtime}}</a>
|
||
|
|
<a id="15M" class="mui-control-item mui-active" href="#item2 ">{{langue.ktype.ftmin}}</a>
|
||
|
|
<a id="1H" class="mui-control-item" href="#item3">{{langue.ktype.onehour}}</a>
|
||
|
|
<a id="4H" class="mui-control-item" href="#item4">{{langue.ktype.fourhour}}</a>
|
||
|
|
<a id="1D" class="mui-control-item" href="#item5">{{langue.ktype.oneday}}</a>
|
||
|
|
</div>
|
||
|
|
<div id="item1" class="app-chart mui-control-content ">
|
||
|
|
<div id="main1" style="width: 100%;height:357px;"></div>
|
||
|
|
</div>
|
||
|
|
<div id="item2" class="app-chart mui-control-content mui-active">
|
||
|
|
<div class="app-chart-heard">
|
||
|
|
<span id="15M-chart-MA5" class="app-chart-MA5">MA5:</span>
|
||
|
|
<span id="15M-chart-MA10" class="app-chart-MA10">MA10:</span>
|
||
|
|
<span id="15M-chart-MA20" class="app-chart-MA20">MA20:</span>
|
||
|
|
<span id="15M-chart-MA30" class="app-chart-MA30">MA30:</span>
|
||
|
|
</div>
|
||
|
|
<div id="main2" style="width: 100%;height:357px;"></div>
|
||
|
|
</div>
|
||
|
|
<div id="item3" class="app-chart mui-control-content">
|
||
|
|
<div class="app-chart-heard">
|
||
|
|
<span id="1H-chart-MA5" class="app-chart-MA5">MA5:</span>
|
||
|
|
<span id="1H-chart-MA10" class="app-chart-MA10">MA10:</span>
|
||
|
|
<span id="1H-chart-MA20" class="app-chart-MA20">MA20:</span>
|
||
|
|
<span id="1H-chart-MA30" class="app-chart-MA30">MA30:</span>
|
||
|
|
</div>
|
||
|
|
<div id="main3" style="width: 100%;height:357px;"></div>
|
||
|
|
</div>
|
||
|
|
<div id="item4" class="app-chart mui-control-content">
|
||
|
|
<div class="app-chart-heard">
|
||
|
|
<span id="4H-chart-MA5" class="app-chart-MA5">MA5:</span>
|
||
|
|
<span id="4H-chart-MA10" class="app-chart-MA10">MA10:</span>
|
||
|
|
<span id="4H-chart-MA20" class="app-chart-MA20">MA20:</span>
|
||
|
|
<span id="4H-chart-MA30" class="app-chart-MA30">MA30:</span>
|
||
|
|
</div>
|
||
|
|
<div id="main4" style="width: 100%;height:357px;"></div>
|
||
|
|
</div>
|
||
|
|
<div id="item5" class="app-chart mui-control-content">
|
||
|
|
<div class="app-chart-heard">
|
||
|
|
<span id="1D-chart-MA5" class="app-chart-MA5">MA5:</span>
|
||
|
|
<span id="1D-chart-MA10" class="app-chart-MA10">MA10:</span>
|
||
|
|
<span id="1D-chart-MA20" class="app-chart-MA20">MA20:</span>
|
||
|
|
<span id="1D-chart-MA30" class="app-chart-MA30">MA30:</span>
|
||
|
|
</div>
|
||
|
|
<div id="main5" style="width: 100%;height:357px;"></div>
|
||
|
|
</div>-->
|
||
|
|
<div class="buttons">
|
||
|
|
<div class="timebutton" data-interval="1">{{langue.ktype.realtime}}</div>
|
||
|
|
<div class="timebutton active" data-interval="15" id="15m">15m</div>
|
||
|
|
<div class="timebutton" data-interval="30">30m</div>
|
||
|
|
<div class="timebutton" data-interval="1H">1H</div>
|
||
|
|
<div class="timebutton" data-interval="4H">4H</div>
|
||
|
|
<div class="timebutton" data-interval="1D">1D</div>
|
||
|
|
<div class="timebutton" data-interval="1W">1W</div>
|
||
|
|
<!--<div class="timebutton" data-interval="1M">1M</div>-->
|
||
|
|
</div>
|
||
|
|
<div id="TradingView" style="width:100%;height:380px;" v-loading="loading"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--深度，成交，简介-->
|
||
|
|
<div class="market-bottom">
|
||
|
|
<div id="market-bottom-a" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
|
||
|
|
<a class="mui-control-item mui-active" href="#item6">{{langue.depth}}</a>
|
||
|
|
<a class="mui-control-item" href="#item7">{{langue.deal}}</a>
|
||
|
|
<a class="mui-control-item" href="#item8">{{langue.introduction.introduction}}</a>
|
||
|
|
</div>
|
||
|
|
<div id="item6" class="mui-control-content mui-active">
|
||
|
|
<!--深度图容器-->
|
||
|
|
<div id="container" style="width: 100%;height:260px; background: #FFFFFF;"></div>
|
||
|
|
<!--买卖情况-->
|
||
|
|
<div class="buying-selling">
|
||
|
|
<ul id="depth-ul">
|
||
|
|
<!--<li class="buying-selling-title">
|
||
|
|
<span>买盘</span>
|
||
|
|
<span>数量(THETA)</span>
|
||
|
|
<span>价格(USDT)</span>
|
||
|
|
<span>数量(THETA)</span>
|
||
|
|
<span>卖盘</span>
|
||
|
|
</li>
|
||
|
|
<li class="buying-selling-info">
|
||
|
|
<span class="buy-sale">小林</span>
|
||
|
|
<span class="buy-sale-num">11907.9794</span>
|
||
|
|
<p class="price">
|
||
|
|
<span class="price-buy">0.0938</span>
|
||
|
|
<span class="price-sale">0.0942</span>
|
||
|
|
</p>
|
||
|
|
<span class="buy-sale-num">21907.9794</span>
|
||
|
|
<span class="buy-sale">小丽</span>
|
||
|
|
</li>-->
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div id="item7" class="mui-control-content">
|
||
|
|
<!--成交-->
|
||
|
|
<div class="transaction">
|
||
|
|
<ul id="list-record">
|
||
|
|
<!--<li class="transaction-title">
|
||
|
|
<span>时间</span>
|
||
|
|
<span>方向</span>
|
||
|
|
<span>价格(USDT)</span>
|
||
|
|
<span>数量(THETA)</span>
|
||
|
|
</li>
|
||
|
|
<li class="transaction-info">
|
||
|
|
<span class="transaction-time">11:44:58</span>
|
||
|
|
<span class="transaction-direction-buy">买入</span>
|
||
|
|
<span class="transaction-price">2000.0938</span>
|
||
|
|
<span class="transaction-num">07.9794</span>
|
||
|
|
</li>
|
||
|
|
<li class="transaction-info">
|
||
|
|
<span class="transaction-time">11:44:58</span>
|
||
|
|
<span class="transaction-direction-sale">卖出</span>
|
||
|
|
<span class="transaction-price">2000.0938</span>
|
||
|
|
<span class="transaction-num">07.9794</span>
|
||
|
|
</li>-->
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="item8" class="mui-control-content">
|
||
|
|
<!--简介-->
|
||
|
|
<div class="introduction">
|
||
|
|
<h3><span id="currencyFullName"></span>(<span id="currencyName"></span>)</h3>
|
||
|
|
<div class="introduction-item">
|
||
|
|
<ul>
|
||
|
|
<li class="introduction-item-list">
|
||
|
|
<span class="introduction-item-list-txt">{{langue.introduction.issueDate}}</span>
|
||
|
|
<span id="issueTime" class="introduction-item-list-num"></span>
|
||
|
|
</li>
|
||
|
|
<li class="introduction-item-list">
|
||
|
|
<span class="introduction-item-list-txt">{{langue.introduction.totalAmount}}</span>
|
||
|
|
<span id="totalSupply" class="introduction-item-list-num"></span>
|
||
|
|
</li>
|
||
|
|
<li class="introduction-item-list">
|
||
|
|
<span class="introduction-item-list-txt">{{langue.introduction.circulation}}</span>
|
||
|
|
<span id="totalCirculation" class="introduction-item-list-num"></span>
|
||
|
|
</li>
|
||
|
|
<li class="introduction-item-list">
|
||
|
|
<span class="introduction-item-list-txt">{{langue.introduction.ico}}</span>
|
||
|
|
<span id="icoAmount" class="introduction-item-list-num"></span>
|
||
|
|
</li>
|
||
|
|
<li class="introduction-item-list">
|
||
|
|
<span class="introduction-item-list-txt">{{langue.introduction.whitePaper}}</span>
|
||
|
|
<span id="whitePaper" class="introduction-item-list-num"></span>
|
||
|
|
</li>
|
||
|
|
<li class="introduction-item-list">
|
||
|
|
<span class="introduction-item-list-txt">{{langue.introduction.officialWebsite}}</span>
|
||
|
|
<span id="officialWebsite" class="introduction-item-list-num"></span>
|
||
|
|
</li>
|
||
|
|
<li class="introduction-item-list">
|
||
|
|
<span class="introduction-item-list-txt">{{langue.introduction.blockExplorer}}</span>
|
||
|
|
<span id="blockUrl" class="introduction-item-list-num"></span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<h3>{{langue.introduction.introduction}}</h3>
|
||
|
|
<p id="descr"></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!--买入卖出公用按钮-->
|
||
|
|
<div class="btn-group">
|
||
|
|
<div id="buy-currency" class="btn-group-buy">{{langue.buy}}</div>
|
||
|
|
<div id="sale-currency" class="btn-group-sale">{{langue.sale}}</div>
|
||
|
|
</div>
|
||
|
|
<!--灰色背景图蒙版-->
|
||
|
|
<div id="bg" class="bg"></div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
<script type="text/javascript" src="js/market_info.js"></script>
|
||
|
|
|
||
|
|
</html>
|