jquery组件Vue加密价格墙资源-CSDN文库

共3个文件

css：1个

html：1个

js：1个

版权申诉

vue.js

jquery

javascript

ecmascript

140 浏览量 2022-04-15 12:09:17 上传评论收藏 7KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

dist.zip （3个子文件）

dist

index.html 4KB

style.css 9KB

script.js 9KB

<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CodePen - Vue Crypto Price Wall</title> <link rel="stylesheet" href="./style.css"> </head> <body>   <div id="app" v-cloak>  <header class="header-wrap"> <div class="header-row flex-row flex-middle flex-space"> <div class="if-small"> <div class="form-input dark"> <div class="push-right">ð</div> <input type="text" v-model="search" placeholder="Search token..." /> </div> </div> <div class="text-primary if-medium"> <h1 class="text-nowrap text-condense shadow-text">Crypto 24h Change</h1> </div> <div class="flex-row flex-middle"> <div class="dropdown"> <div class="form-input text-nowrap shadow-box">â¼ {{ limit }}</div> <ul> <li @click="setLimit( 0 )"><span class="text-faded">Show:</span> All</li> <li @click="setLimit( 10 )"><span class="text-faded">Show:</span> 10</li> <li @click="setLimit( 20 )"><span class="text-faded">Show:</span> 20</li> <li @click="setLimit( 50 )"><span class="text-faded">Show:</span> 50</li> <li @click="setLimit( 100 )"><span class="text-faded">Show:</span> 100</li> </ul> </div> <div class="dropdown"> <div class="form-input text-nowrap shadow-box">â¼ {{ sortLabel }}</div> <ul> <li @click="sortBy( 'token', 'asc' )"><span class="text-faded">Sort:</span> Token</li> <li @click="sortBy( 'close', 'desc' )"><span class="text-faded">Sort:</span> Price</li> <li @click="sortBy( 'assetVolume', 'desc' )"><span class="text-faded">Sort:</span> Volume</li> <li @click="sortBy( 'percent', 'desc' )"><span class="text-faded">Sort:</span> Percent</li> <li @click="sortBy( 'change', 'desc' )"><span class="text-faded">Sort:</span> Change</li> <li @click="sortBy( 'trades', 'desc' )"><span class="text-faded">Sort:</span> Trades</li> </ul> </div> <div class="dropdown"> <div class="form-input text-nowrap shadow-box">â¼ {{ asset }}</div> <ul> <li @click="filterAsset( 'BTC' )"><span class="text-faded">Asset:</span> BTC</li> <li @click="filterAsset( 'ETH' )"><span class="text-faded">Asset:</span> ETH</li> <li @click="filterAsset( 'BNB' )"><span class="text-faded">Asset:</span> BNB</li> <li @click="filterAsset( 'USDT' )"><span class="text-faded">Asset:</span> USDT</li> </ul> </div> </div> </div> </header>  <main class="main-wrap"> <div class="main-grid-list"> <div class="main-grid-item" v-for="c in coinsList" :key="c.symbol" :class="c.style"> <div class="main-grid-info flex-row flex-top flex-stretch"> <div class="push-right"> <img :src="c.icon" :alt="c.pair" /> </div> <div class="flex-1 shadow-text"> <div class="flex-row flex-top flex-space"> <div class="text-left text-clip push-right"> <h1 class="text-primary text-clip">{{ c.token }}<small class="text-faded text-small text-condense">/{{ c.asset }}</small></h1> <h2 class="text-bright text-clip">{{ c.close | toFixed( asset ) }}</h2> </div> <div class="text-right"> <div class="color text-big text-clip">{{ c.arrow }} {{ c.sign }}{{ c.percent | toFixed( 2 ) }}%</div> <div class="text-clip">{{ c.sign }}{{ c.change | toFixed( asset ) }} <small class="text-faded">24h</small></div> <div class="text-clip">{{ c.assetVolume | toMoney }} <small class="text-faded">Vol</small></div> </div> </div> </div> </div> <div class="main-grid-chart"> <linechart :width="600" :height="40" :values="c.history"></linechart> </div> </div> </div> </main>  <div class="loader-wrap" :class="{ 'visible': loaderVisible }"> <div class="loader-content"> <div v-if="status === 0"><i>ð¡</i> <br /> Connecting to Socket API ...</div> <div v-else-if="status === 1"><i>ð¬</i> <br /> Waiting for data from Socket API ...</div> <div v-else-if="status === 2"><i>ð</i> <br /> Connected to the Socket API</div> <div v-else-if="status === -1"><i>ð¡</i> <br /> Error connecting to the Socket API</div> </div> </div> </div>  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js'></script><script src="./script.js"></script> </body> </html>

评论收藏

内容反馈

版权申诉