代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimum-scale=1,maximum-scale=1">
<title>区块头条</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="js/jquery.color.min.js" type="text/javascript"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!--自定义字体-->
<link rel="stylesheet" href="css/font.css">
<link rel="stylesheet/less" type="text/css" href="css/base.less" />
<link rel="stylesheet" type="text/css" href="css/currency.css">
<script src="js/less.js"></script>
<script src="js/qs.js"></script>
<script src="js/base.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/jquery.md5.js"></script>
<script src="js/html-params.js"></script>
<script src="js/vue.js"></script>
<!--各种图-->
<script type="text/javascript" src="js/echart/echarts.min.js"></script>
<!--加载Axios-->
<script src="js/axios.min.js"></script>
<script src="js/page/currency.js"></script>
</head>
<body>
<div id="header" v-cloak="">
<header-content :is-three="true"></header-content>
</div>
<div id="main">
<div class="content">
<div id="currency-nav" v-cloak="">
<div class="total" @click="showTotal">全部</div>
<!--货币信息-->
<div class="msg-list">
<div class="next-btn"><img src="image/you.png" width="10px" height="20px" @click="blockSilder('next',$event)" @mouseEnter="hightShow(1,$event)" @mouseLeave="remHightShow(1,$event)"></div>
<div class="prev-btn"><img src="image/zuo.png" width="10px" height="20px" @click="blockSilder('prev',$event)" @mouseEnter="hightShow(0,$event)" @mouseLeave="remHightShow(0,$event)"></div>
<div class="item-group">
<div class="item-box">
<!--每组货币循环-->
<template v-for="(item,index) in items">
<div class="currency-item" :value="item.id" @click="showMessage" :index="index">
<div class="currency-item-border">
<span class="currency-name">{{ item.name }}</span>
<span class="currency-num" :class="{'font-down':item.down,'font-up':!item.down }">{{ item.avgChange }}</span>
<span class="currency-sign" v-if="!item.down">
<img src="image/shangzhang.png">
</span>
<span class="currency-sign" v-else>
<img src="image/xiadie.png">
</span>
</div>
</div>
</template>
</div>
</div>
</div>
</div>
<!--隐藏的货币的信息，点击某个出发-->
<div id="currency-info" class="hidden" v-cloak="">
<div class="info-name">
<div class="info-name-title">{{name}}
<span class="info-value font-down" v-if="down">{{avgChange}}
<img src="image/xiadie.png">
</span>
<span class="info-value font-up" v-else>{{avgChange}}
<img src="image/shangzhang.png">
</span>
</div>
<div class="info-name-value">平均涨跌幅(24H)</div>
</div>
<div class="info-num">
<div class="info-num-title">货币总数</div>
<div class="info-num-value">{{coinCounts}}</div>
</div>
<div class="info-num">
<div class="info-num-title">上涨</div>
<div class="info-num-value">{{upCounts}}</div>
</div>
<div class="info-num">
<div class="info-num-title">下跌</div>
<div class="info-num-value">{{upCounts}}</div>
</div>
<div class="info-max">
<div class="info-num-title">表现最强</div>
<div class="info-minmax-value">
{{upMostCoinInfo.symbol}}
<span class="info-value font-up" v-if="upMostCoinInfo.change >= 0">
{{upMostCoinInfo.changeABS}}% <img src="image/shangzhang.png">
</span>
<span class="info-value font-down" v-else>
{{upMostCoinInfo.changeABS}}% <img src="image/xiadie.png">
</span>
</div>
</div>
<div class="info-min">
<div class="info-num-title">表现最弱</div>
<div class="info-minmax-value">
{{downMostCoinInfo.symbol}}
<span class="info-value font-up" v-if="downMostCoinInfo.change >= 0">
{{downMostCoinInfo.changeABS}}% <img src="image/shangzhang.png">
</span>
<span class="info-value font-down" v-else>
{{downMostCoinInfo.changeABS}}% <img src="image/xiadie.png">
</span>
</div>
</div>
</div>
<!--货币列表-->
<div id="currency-list" v-cloak="">
<ul class="nav nav-tabs multipart-title" id="currency-header">
<li value="1"><a href="#optional" data-toggle="tab" @click="myFocus">自选</a></li>
<li class="active" value="0"><a href="#market" data-toggle="tab" @click="showSearch">货币列表</a></li>
<li class="more">
<div class="filtrate-search">
<input type="text" class="filtrate-input" v-model="market.keyWord" placeholder="请输入币种" @keyup.enter="toSearch">
<img src="image/sousuo.png" class="filtrate-search-btn" style="" @click="toSearch" >
</div>
</li>
</ul>
<div class="tab-content">
<!--货币列表-->
<div role="tabpanel" class="tab-pane active" id="market">
<table class="table currency-table">
<thead>
<tr>
<td>加自选</td>
<td> </td>
<td>名称</td>
<td>价格 <img src="image/paixu1.png" class="sort-img" value="1" @click="changeSort" type="price"></td>
<td>24H涨跌幅 <img src="image/paixu1.png" class="sort-img" value="1" @click="changeSort" type="change"></td>
<td>24H价格趋势</td>
<td>流通数量 <img src="image/paixu1.png" class="sort-img" value="1" @click="changeSort" type="availableSupply"></td>
<td>24H成交额 <img src="image/paixu1.png" class="sort-img" value="1" @click="changeSort" type="volumeEx"></td>
<td>24H成交量 <img src="image/paixu1.png" class="sort-img" value="1" @click="changeSort" type="volumeCoin"></td>
<td>市值 <img src="image/paixu1.png" class="sort-img" value="1" @click="changeSort" type="marketCap"></td>
<!--<td>推荐交易所</td>-->
</tr>
</thead>
<tbody>
<tr class="bg-hover-blue" :value="item.id" :index="index" v-for="(item,index) in market.list" v-cloak="" :followid="item.followId">
<td class="favorite" v-if="item.isFavorite" :value="index">
<img src="image/shoucanghou.png" @click="setFavorite('market',$event)">
</td>
<td class="favorite" v-else :value="index">
<img src="image/shoucangqian.png" @click="setFavorite('market',$event)">
</td>
<td @click="goCurrencyProfile">{{ item.index }}</td>
<td class="bourse" @click="goCurrencyProfile">
<!--<div v-for="name in item.names">{{ name }}</div>-->
<div >{{ item.enName }}</div>
<div >{{ item.zhName }}</div>
</td>
<td @click="goCurrencyProfile">{{ item.price }}</td>
<td @click="goCurrencyProfile" :class="{'font-up':item.isUp, 'font-down':!item.isUp }">{{item.fluctuate}}</td>
<td @click="goCurrencyProfile" class="flow-td">
<div :id="item.id" class="flow-img" style="width:162px; height:39px;"></div>
</td>
<td @click="goCurrencyProfile">{{ item.flowNum }}</td>
<td @click="goCurrencyProfile">{{ item.transPirce }}</td>
<td @click="goCurrencyProfile">{{ item.transNum }}</td>
<td @click="goCurrencyProfile">{{ item.marketNum }}</td>
<!--<td class="bourse">-->
<!--<div v-for="name in item.bourse">{{ name }}</div>-->
<!--</td>-->
</tr>
<tr class="no-data hidden"><td colspan="10">暂无信息</td></tr>
</tbody>
<tfoot>
<tr>
<td colspan="10" class="page-line">
<nav aria-label="Page navigation">
<!--标签翻页-->
<ul class="pagination tab-page">
<li class="page-block page-prev" @click.prevent="toPage('market',$event)" :value="-1">
<a aria-label="Previous" href="###">
<!--<span aria-hidden="true">«</span>-->
<img src="image/yema1.png">
</a>
</li>
<template v-for="(item,index) in market.currArea ">
<li class="page-block page-num-btn" @click="toPage('market',$event)" :value="item"><a href="###">{{ item }}</a></li>
</template>
<li class="page-block page-next" @click="toPage('market',$event)" :value="0">
<a href="###" aria-label="Next">
<img src="image/yema2.png">
</a>
</li>
<!--页行数-->
<li>
<select class="page-num" @change.self="setPageNum('market',$event)">
<option value="10">10条/页</option>
<option value="20">20条/页</option>
<option value="30">30条/页</option>
<option value="40">40条/页</option>
<option value="50">50条/页</option>
</select>
</li>
<!--跳转翻页-->
<li>
<div class="page-jump">
跳至<input type="text" @keyup.enter="jumpPage('market',$event)">页 / {{ market.totalNum}}
<div class="jump-btn pointer" @click="jumpPage('market',$event)">确定</div>
</div>
</li>
</ul>
</nav>
</td>
</tr>
</tfoot>
</table>
</div>
<!--自选-->
<div role="tabpanel" class="tab-pane" id="optional">
<table class="table currency-table">
<thead>
<tr>
<td>取消自选</td>
<td> </td>
<td>名字</td>
<td>交易所 <img src="image/paixu1.png" class="sort-img" value="1" @click="changeSort" type="marketName"></td>
<td>平台价 <img src="image/paixu1.png" class="sort-img" value="1" @click="changeSort" type="pairPrice"></td>
<td>最新价格</td>
<td>24h涨跌幅 <img src="image/paixu1.png" class="sort-img" value="1" @click="changeSort" type="change"></td>
<td>24h成交额 <img src="image/paixu1.png" class="sort-img" value="1" @click="changeSort" type="volumeEx"></td>
<td>24h最高 <img src="image/paixu1.png" class="sort-img" value="1" @click="changeSort" type="high"></td>
<td>24h最低 <img src="image/paixu1.png" class="sort-img" value="1" @click="changeSort" type="low"></td>
</tr>
</thead>
<tbody>
<tr class="bg-hover-blue" :value="item.id" :index="index" v-for="(item,index) in optional.list" v-cloak="" :followid="item.followId">
<td class="favorite" v-if="item.isFavorite" :value="index">
<img src="image/shoucanghou.png" @click="setFavorite('optional',$event)">
</td>
<td class="favorite" v-else :value="index">
<img src="image/shoucangqian.png" @click="setFavorite('optional',$event)">
</td>
<td @click="goCurrencyProfile">{{ item.index }}</td>
<td class="bourse" @click="goCurrencyProfile">
<div >{{ item.enName }}</div>
<div >{{ item.zhName }}</div>
</td>
<td @click="goCurrencyProfile">{{ item.bourse}}</td>
<td @click="goCurrencyProfile">{{ item.price }}</td>
<td @click="goCurrencyProfile">{{ item.newPrice}}</td>
<td @click="goCurrencyProfile" :class="{'font-up':item.isUp, 'font-down':!item.isUp }">{{ item.fluctuate}}</td>
<td @click="goCurrencyProfile">{{ item.transNum }}</td>
<td @click="goCurrencyProfile">{{ item.maxPrice }}</td>
<td @click="goCurrencyProfile">{{ item.minPrice }}</td>
</tr>
<tr class="no-data hidden"><td colspan="10">暂无信息</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div id="footer">
<footer-content></footer-content>
</div>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。