zhixinlian
/
fontend-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
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.
15 Commits
1 Branch
0 Tags
7.3 MiB
 
 
 
 
Tag: Branch: Tree: 34b0781922
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '34b0781922'
${ noResults }
fontend-app/html/market/market_info.html

320 lines
12 KiB
Raw Blame History

<!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>