简洁风格的虚拟货币交易后台管理模板下载

简洁风格的虚拟货币交易后台管理模板下载

1. 引入CSS

<link href="css/style.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

2. 引入JS

<script src="js/lib/jquery/jquery.min.js"></script>
<script src="js/lib/bootstrap/js/popper.min.js"></script>
<script src="js/lib/bootstrap/js/bootstrap.min.js"></script>
<script src="js/jquery.slimscroll.js"></script>
<script src="js/sidebarmenu.js"></script>
<script src="js/lib/sticky-kit-master/dist/sticky-kit.min.js"></script>
<script src="js/lib/webticker/jquery.webticker.min.js"></script>
<script src="js/lib/peitychart/jquery.peity.min.js"></script>
<script src="js/custom.min.js"></script>
<script src="js/dashboard-1.js"></script>
<script src="js/lib/jquery/jquery.min.js"></script>
<script src="js/lib/bootstrap/js/popper.min.js"></script>
<script src="js/lib/bootstrap/js/bootstrap.min.js"></script>
<script src="js/jquery.slimscroll.js"></script>
<script src="js/sidebarmenu.js"></script>
<script src="js/lib/sticky-kit-master/dist/sticky-kit.min.js"></script>
<script src="js/lib/webticker/jquery.webticker.min.js"></script>
<script src="js/lib/peitychart/jquery.peity.min.js"></script>
<script src="js/custom.min.js"></script>
<script src="js/dashboard-1.js"></script>

3. HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" sizes="16x16" href="images/favicon.png">
    <title>Home</title>
    <!-- Custom CSS -->
</head>
<body class="header-fix fix-sidebar">
    <!-- Main wrapper  -->
    <div id="main-wrapper">
        <!-- header header  -->
        <div class="header">
            <nav class="navbar top-navbar navbar-expand-md navbar-light">
                <!-- Logo -->
                <div class="navbar-header">
                    <a class="navbar-brand" href="index.html">
                        <!-- Logo icon -->
                        <b><img src="images/logo.png" alt="homepage" class="dark-logo" /></b>
                        <!--End Logo icon -->
                        <!-- Logo text -->
                        <span><img src="images/logo-text.png" alt="homepage" class="dark-logo" /></span>
                    </a>
                </div>
                <!-- End Logo -->
                <div class="navbar-collapse">
                    <!-- toggle and nav items -->
                    <ul class="navbar-nav mr-auto mt-md-0">
                        <!-- This is  -->
                        <li class="nav-item"> <a class="nav-link toggle-nav hidden-md-up text-muted  " href="javascript:void(0)"><i class="mdi mdi-menu"></i></a> </li>
                        <li class="nav-item m-l-10"> <a class="nav-link sidebartoggle hidden-sm-down text-muted  " href="javascript:void(0)"><i class="ti-menu"></i></a> </li>
                        <!-- Messages -->
                        <li class="nav-item dropdown mega-menu"> <a class="nav-link dropdown-toggle text-muted  " href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="ti-wallet m-r-5"></i> Wallet</a>
                            <div class="dropdown-menu animated slideInDown">
                                <ul class="mega-menu-menu row">
                                    <li class="col-lg-3  m-b-30">
                                        <h4 class="m-b-20">Bitcoin BTC</h4>
                                        <!-- Contact -->
                                        <ul class="list-style-none">
                                            <li><a href="#"><i class="cc BTC"></i> Bitcoin Transaction</a></li>
                                            <li><a href="#"><i class="cc BTC"></i> Bitcoin Transaction</a></li>
                                            <li><a href="#"><i class="cc BTC"></i> Bitcoin Transaction</a></li>
                                            <li><a href="#"><i class="cc BTC"></i> Bitcoin Transaction</a></li>
                                            <li><a href="#"><i class="cc BTC"></i> Bitcoin Transaction</a></li>
                                        </ul>
									</li>
                                    <li class="col-lg-3 col-xlg-3 m-b-30">
                                        <h4 class="m-b-20">Bitcoin BTC</h4>
                                        <!-- List style -->
                                        <ul class="list-style-none">
                                            <li><a href="#"><i class="cc BTC"></i> Bitcoin Transaction</a></li>
                                            <li><a href="#"><i class="cc BTC"></i> Bitcoin Transaction</a></li>
                                            <li><a href="#"><i class="cc BTC"></i> Bitcoin Transaction</a></li>
                                            <li><a href="#"><i class="cc BTC"></i> Bitcoin Transaction</a></li>
                                            <li><a href="#"><i class="cc BTC"></i> Bitcoin Transaction</a></li>
                                        </ul>
                                    </li>
                                    <li class="col-lg-3 col-xlg-3 m-b-30">
                                        <h4 class="m-b-20">Bitcoin BTC</h4>
                                        <!-- List style -->
                                        <ul class="list-style-none">
                                            <li><a href="#"><i class="cc BTC"></i> Bitcoin Transaction</a></li>
                                            <li><a href="#"><i class="cc BTC"></i> Bitcoin Transaction</a></li>
                                            <li><a href="#"><i class="cc BTC"></i> Bitcoin Transaction</a></li>
                                            <li><a href="#"><i class="cc BTC"></i> Bitcoin Transaction</a></li>
                                            <li><a href="#"><i class="cc BTC"></i> Bitcoin Transaction</a></li>
                                        </ul>
                                    </li>
                                    <li class="col-lg-3 col-xlg-3 m-b-30">
                                        <h4 class="m-b-20">Bitcoin BTC</h4>
                                        <!-- List style -->
                                        <ul class="list-style-none">
                                            <li><a href="#"><i class="cc BTC"></i> Bitcoin Transaction</a></li>
                                            <li><a href="#"><i class="cc BTC"></i> Bitcoin Transaction</a></li>
                                            <li><a href="#"><i class="cc BTC"></i> Bitcoin Transaction</a></li>
                                            <li><a href="#"><i class="cc BTC"></i> Bitcoin Transaction</a></li>
                                            <li><a href="#"><i class="cc BTC"></i> Bitcoin Transaction</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <!-- End Messages -->
                    </ul>
                    <!-- User profile and search -->
                    <ul class="navbar-nav my-lg-0">
                        <!-- Comment -->
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle text-muted text-muted  " href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-bell"></i>
                                <div class="notify"> <span class="heartbit"></span> <span class="point"></span> </div>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right mailbox animated slideInRight">
                                <ul>
                                    <li>
                                        <div class="drop-title">Notifications</div>
                                    </li>
                                    <li>
                                        <div class="header-notify">
                                            <!-- Message -->
                                            <a href="#">
                                                <i class="cc BTC m-r-10 f-s-40" title="BTC"></i>
                                                <div class="notification-contnet">
                                                    <h5>All Transaction BTC</h5> <span class="mail-desc">Just see the my new admin!</span> 
                                                </div>
                                            </a>
                                            <!-- Message -->
                                            <a href="#">
                                                <i class="cc LTC m-r-10 f-s-40" title="BTC"></i>
                                                <div class="notification-contnet">
                                                    <h5>This is LTC coin</h5> <span class="mail-desc">Just a reminder that you have event</span>
                                                </div>
                                            </a>
                                            <!-- Message -->
                                            <a href="#">
                                                <i class="cc DASH m-r-10 f-s-40" title="BTC"></i>
                                                <div class="notification-contnet">
                                                    <h5>This is DASH coin</h5> <span class="mail-desc">You can customize this template as you want</span>
                                                </div>
                                            </a>
                                            <!-- Message -->
                                            <a href="#">
                                                <i class="cc XRP m-r-10 f-s-40" title="BTC"></i>
                                                <div class="notification-contnet">
                                                    <h5>This is LTC coin</h5> <span class="mail-desc">Just see the my admin!</span>
                                                </div>
                                            </a>
                                        </div>
                                    </li>
                                    <li>
                                        <a class="nav-link text-center" href="javascript:void(0);"> Check all notifications <i class="fa fa-angle-right"></i> </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <!-- End Comment -->
                        <!-- Messages -->
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle text-muted  " href="#" id="2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-envelope"></i>
                                <div class="notify"> <span class="heartbit"></span> <span class="point"></span> </div>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right mailbox animated slideInRight" aria-labelledby="2">
                                <ul>
                                    <li>
                                        <div class="drop-title">You have 4 new messages</div>
                                    </li>
                                    <li>
                                        <div class="header-notify">
                                            <!-- Message -->
                                            <a href="#">
                                                <div class="notification-contnet">
                                                    <h5>Michael Qin</h5> <span class="mail-desc">Just see the my admin!</span> 
                                                </div>
                                            </a>
                                            <!-- Message -->
                                            <a href="#">
                                                <div class="notification-contnet">
                                                    <h5>John Doe</h5> <span class="mail-desc">I've sung a song! See you at</span>
                                                </div>
                                            </a>
                                            <!-- Message -->
                                            <a href="#">
                                                <div class="notification-contnet">
                                                    <h5>Mr. John</h5> <span class="mail-desc">I am a singer!</span>
                                                </div>
                                            </a>
                                            <!-- Message -->
                                            <a href="#">
                                                <div class="notification-contnet">
                                                    <h5>Michael Qin</h5> <span class="mail-desc">Just see the my admin!</span>
                                                </div>
                                            </a>
                                        </div>
                                    </li>
                                    <li>
                                        <a class="nav-link text-center" href="javascript:void(0);"> See all e-Mails <i class="fa fa-angle-right"></i> </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <!-- End Messages -->
                        <!-- Profile -->
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle text-muted  " href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user"></i></a>
                            <div class="dropdown-menu dropdown-menu-right animated slideInRight">
                                <ul class="dropdown-user">
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#"> Profile</a></li>
                                    <li><a href="#"> Balance</a></li>
                                    <li><a href="#"> Inbox</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#"> Setting</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#"> Logout</a></li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
        <!-- End header header -->
        <!-- Left Sidebar  -->
        <div class="left-sidebar">
            <!-- Sidebar scroll-->
            <div class="scroll-sidebar">
                <!-- Sidebar navigation-->
                <nav class="sidebar-nav">
                    <ul id="sidebar-menu">
                        <li class="nav-devider"></li>
                        <li class="nav-label">Home</li>
                        <li> <a class="has-arrow  " href="#" aria-expanded="false"><i class="fa fa-tachometer"></i><span class="hide-menu">Dashboard <span class="label label-rouded label-primary pull-right">6</span></span></a>
                            <ul aria-expanded="false" class="collapse">
                                <li><a href="index.html">Dashboard 1 </a></li><li><a href="index1.html">Dashboard 2 </a></li><li><a href="index2.html">Dashboard 3 </a></li><li><a href="index3.html">Dashboard 4 </a></li><li><a href="index4.html">Dashboard 5 </a></li><li><a href="index5.html">Dashboard 6 </a></li>
                            </ul>
                        </li>
                        <li class="nav-label">Layout</li>
                        <li> <a class="has-arrow  " href="#" aria-expanded="false"><i class="fa fa-columns"></i><span class="hide-menu">Layout</span></a>
                            <ul aria-expanded="false" class="collapse">
                                <li><a href="layout-blank.html">Blank</a></li>
                                <li><a href="layout-boxed.html">Boxed</a></li>
                                <li><a href="layout-fix-header.html">Fix Header</a></li>
                                <li><a href="layout-fix-sidebar.html">Fix Sidebar</a></li>
                            </ul>
                        </li>
                        <li class="nav-label">Apps &amp; Charts</li>
                        <li> <a class="has-arrow  " href="#" aria-expanded="false"><i class="fa fa-envelope"></i><span class="hide-menu">Mailbox</span></a>
                            <ul aria-expanded="false" class="collapse">
                                <li><a href="email-compose.html">Compose</a></li>
                                <li><a href="email-read.html">Read</a></li>
                                <li><a href="email-inbox.html">Inbox</a></li>
                            </ul>
                        </li>
                        <li> <a class="has-arrow  " href="#" aria-expanded="false"><i class="fa fa-bar-chart"></i><span class="hide-menu">Charts</span></a>
                            <ul aria-expanded="false" class="collapse">
                                <li><a href="chart-morris.html">Morris</a></li>
                                <li><a href="chart-chartjs.html">ChartJs</a></li>
                                <li><a href="chart-chartist.html">Chartist </a></li>
                                <li><a href="chart-amchart.html">AmChart</a></li>
                                <li><a href="chart-echart.html">EChart</a></li>
                                <li><a href="chart-sparkline.html">Sparkline</a></li>
                                <li><a href="chart-peity.html">Peity</a></li>
                            </ul>
                        </li>
                        <li class="nav-label">Features</li>
                        <li> <a class="has-arrow  " href="#" aria-expanded="false"><i class="fa fa-suitcase"></i><span class="hide-menu">Ui Elements <span class="label label-rouded label-danger pull-right">12</span></span></a>
                            <ul aria-expanded="false" class="collapse">
                                <li><a href="ui-alert.html">Alert</a></li>
                                <li><a href="ui-button.html">Button</a></li>
                                <li><a href="ui-dropdown.html">Dropdown</a></li>
                                <li><a href="ui-progressbar.html">Progressbar</a></li>
                                <li><a href="ui-tab.html">Tab</a></li>
                                <li><a href="ui-typography.html">Typography</a></li>
                                <li><a href="uc-calender.html">Calender</a></li>
                                <li><a href="uc-datamap.html">Datamap</a></li>
                                <li><a href="uc-nestedable.html">Nestedable</a></li>
                                <li><a href="uc-sweetalert.html">Sweetalert</a></li>
                                <li><a href="uc-toastr.html">Toastr</a></li>
                                <li><a href="uc-weather.html">Weather</a></li>
                            </ul>
                        </li>
                        <li> <a class="has-arrow  " href="#" aria-expanded="false"><i class="fa fa-wpforms"></i><span class="hide-menu">Forms</span></a>
                            <ul aria-expanded="false" class="collapse">
                                <li><a href="form-basic.html">Basic Forms</a></li>
                                <li><a href="form-layout.html">Form Layout</a></li>
                                <li><a href="form-validation.html">Form Validation</a></li>
                                <li><a href="form-editor.html">Editor</a></li>
                                <li><a href="form-dropzone.html">Dropzone</a></li>
                            </ul>
                        </li>
                        <li> <a class="has-arrow  " href="#" aria-expanded="false"><i class="fa fa-table"></i><span class="hide-menu">Tables</span></a>
                            <ul aria-expanded="false" class="collapse">
                                <li><a href="table-bootstrap.html">Basic Tables</a></li>
                                <li><a href="table-datatable.html">Data Tables</a></li>
                            </ul>
                        </li>
                        <li> <a class="has-arrow  " href="#" aria-expanded="false"><i class="ti-wallet m-r-5"></i><span class="hide-menu">Widgets</span></a>
                            <ul aria-expanded="false" class="collapse">
                                <li><a href="widget.html">Widgets</a></li>
                            </ul>
                        </li>
                        <li class="nav-label">EXTRA</li>
                        <li> <a class="has-arrow  " href="#" aria-expanded="false"><i class="fa fa-book"></i><span class="hide-menu">Sample Pages <span class="label label-rouded label-success pull-right">8</span></span></a>
                            <ul aria-expanded="false" class="collapse">
                                <li><a href="#" class="has-arrow">Authentication <span class="label label-rounded label-success">3</span></a>
                                    <ul aria-expanded="false" class="collapse">
                                        <li><a href="page-login.html">Login</a></li>
                                        <li><a href="page-register.html">Register</a></li>
                                        <li><a href="page-invoice.html">Invoice</a></li>
                                    </ul>
                                </li>
                                <li><a href="#" class="has-arrow">Error Pages</a>
                                    <ul aria-expanded="false" class="collapse">
                                        <li><a href="page-error-400.html">400</a></li>
                                        <li><a href="page-error-403.html">403</a></li>
                                        <li><a href="page-error-404.html">404</a></li>
                                        <li><a href="page-error-500.html">500</a></li>
                                        <li><a href="page-error-503.html">503</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li> <a class="has-arrow  " href="#" aria-expanded="false"><i class="fa fa-map-marker"></i><span class="hide-menu">Maps</span></a>
                            <ul aria-expanded="false" class="collapse">
                                <li><a href="map-vector.html">Vector Map</a></li>
                            </ul>
                        </li>
                        <li> <a class="has-arrow  " href="#" aria-expanded="false"><i class="fa fa-level-down"></i><span class="hide-menu">Multi level dd</span></a>
                            <ul aria-expanded="false" class="collapse">
                                <li><a href="#">item 1.1</a></li>
                                <li><a href="#">item 1.2</a></li>
                                <li> <a class="has-arrow" href="#" aria-expanded="false">Menu 1.3</a>
                                    <ul aria-expanded="false" class="collapse">
                                        <li><a href="#">item 1.3.1</a></li>
                                        <li><a href="#">item 1.3.2</a></li>
                                        <li><a href="#">item 1.3.3</a></li>
                                        <li><a href="#">item 1.3.4</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">item 1.4</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
                <!-- End Sidebar navigation -->
            </div>
            <!-- End Sidebar scroll-->
        </div>
        <!-- End Left Sidebar  -->
        <!-- Page wrapper  -->
        <div class="page-wrapper">
            <!-- Bread crumb -->
            <div class="row page-titles">
                <div class="col-md-5 align-self-center">
                    <h3 class="text-primary">Dashboard</h3> </div>
                <div class="col-md-7 align-self-center">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                        <li class="breadcrumb-item active">Dashboard</li>
                    </ol>
                </div>
            </div>
            <!-- End Bread crumb -->
            <!-- Container fluid  -->
            <div class="container-fluid">
                <!-- Start Page Content -->
                <div class="row">
                    <div class="col-12">
                        <div class="crypto-ticker m-b-15">
                            <ul id="webticker-dark-icons">
                                <li data-update="item1"><i class="cc BTC"></i> BTC <span class="coin-value"> $11.039232</span></li>
                                <li data-update="item2"><i class="cc ETH"></i> ETH <span class="coin-value"> $1.2792</span></li>
                                <li data-update="item3"><i class="cc GAME"></i> GAME <span class="coin-value"> $11.039232</span></li>
                                <li data-update="item4"><i class="cc LBC"></i> LBC <span class="coin-value"> $0.588418</span></li>
                                <li data-update="item5"><i class="cc NEO"></i> NEO <span class="coin-value"> $161.511</span></li>
                                <li data-update="item6"><i class="cc STEEM"></i> STE <span class="coin-value"> $0.551955</span></li>
                                <li data-update="item7"><i class="cc LTC"></i> LIT <span class="coin-value"> $177.80</span></li>
                                <li data-update="item8"><i class="cc NOTE"></i> NOTE <span class="coin-value"> $13.399</span></li>
                                <li data-update="item9"><i class="cc MINT"></i> MINT <span class="coin-value"> $0.880694</span></li>
                                <li data-update="item10"><i class="cc IOTA"></i> IOT <span class="coin-value"> $2.555</span></li>
                                <li data-update="item11"><i class="cc DASH"></i> DAS <span class="coin-value"> $769.22</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4">
                        <div class="card">
                            <div class="card-body">
                                <div class="stat-widget-seven">
                                    <div class="row">
                                        <div class="col-2">
                                            <i class="cc BTC" title="BTC"></i>
                                        </div>
                                        <div class="col-5">
                                            <h3>Bitcoin BTC</h3>
                                            <h6 class="text-muted">0.00000434 <span class="color-gray">BTC</span> <span class="text-info">$0.04</span></h6>
                                        </div>
                                        <div class="col-5 text-right">
                                            <h3>$8,569</h3>
                                            <h6 class="text-success">31% <i class="ti-arrow-up f-s-16 text-success m-l-5"></i></h6>
                                        </div>
                                    </div>
                                    <div class="m-t-15">
                                        <span class="peity-btc" data-peity='{ "fill": "rgba(247, 147, 26, 0.5)", "stroke": "#f7931a"}'>6,2,8,4,3,8,1,3,6,5,9,2,8,1,4,8,9,8,2,1</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="card">
                            <div class="card-body">
                                <div class="stat-widget-seven">
                                    <div class="row">
                                        <div class="col-2">
                                            <i class="cc LTC" title="LTC"></i>
                                        </div>
                                        <div class="col-5">
                                            <h3>Litecoin LTC</h3>
                                            <h6 class="text-muted">0.00000434 <span class="color-gray">BTC</span> <span class="text-info">$0.04</span></h6>
                                        </div>
                                        <div class="col-5 text-right">
                                            <h3>$8,569</h3>
                                            <h6 class="text-danger">31% <i class="ti-arrow-down f-s-16 text-danger m-l-5"></i></h6>
                                        </div>
                                    </div>
                                    <div class="m-t-15">
                                        <span class="peity-ltc" data-peity='{ "fill": "rgba(131, 131, 131, 0.59)", "stroke": "#838383"}'>6,2,8,4,3,8,1,3,6,5,9,2,8,1,4,8,9,8,2,1</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="card">
                            <div class="card-body">
                                <div class="stat-widget-seven">
                                    <div class="row">
                                        <div class="col-2">
                                            <i class="cc NEO" title="NEO"></i>
                                        </div>
                                        <div class="col-5">
                                            <h3>Neo NEO</h3>
                                            <h6 class="text-muted">0.00000434 <span class="color-gray">BTC</span> <span class="text-info">$0.04</span></h6>
                                        </div>
                                        <div class="col-5 text-right">
                                            <h3>$8,569</h3>
                                            <h6 class="text-warning">31% <i class="ti-arrow-up f-s-16 text-warning m-l-5"></i></h6>
                                        </div>
                                    </div>
                                    <div class="m-t-15">
                                        <span class="peity-neo" data-peity='{ "fill": "rgba(88, 191, 0, 0.59)", "stroke": "#58bf00"}'>6,2,8,4,3,8,1,3,6,5,9,2,8,1,4,8,9,8,2,1</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="card">
                            <div class="card-body">
                                <div class="stat-widget-seven">
                                    <div class="row">
                                        <div class="col-2">
                                            <i class="cc DASH"></i>
                                        </div>
                                        <div class="col-5">
                                            <h3>Dash DASH</h3>
                                            <h6 class="text-muted">0.00000434 <span class="color-gray">BTC</span> <span class="text-info">$0.04</span></h6>
                                        </div>
                                        <div class="col-5 text-right">
                                            <h3>$8,569</h3>
                                            <h6 class="text-primary">31% <i class="ti-arrow-up f-s-16 text-primary m-l-5"></i></h6>
                                        </div>
                                    </div>
                                    <div class="m-t-15">
                                        <span class="peity-dash" data-peity='{ "fill": "rgba(28, 117, 188, 0.45)", "stroke": "#1c75bc"}'>6,2,8,4,3,8,1,3,6,5,9,2,8,1,4,8,9,8,2,1</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="card">
                            <div class="card-body">
                                <div class="stat-widget-seven">
                                    <div class="row">
                                        <div class="col-2">
                                            <i class="cc ETH" title="ETH"></i>
                                        </div>
                                        <div class="col-5">
                                            <h3>Ethereum  ETH</h3>
                                            <h6 class="text-muted">0.00000434 <span class="color-gray">BTC</span> <span class="text-info">$0.04</span></h6>
                                        </div>
                                        <div class="col-5 text-right">
                                            <h3>$8,569</h3>
                                            <h6 class="text-info">31% <i class="ti-arrow-up f-s-16 text-info m-l-5"></i></h6>
                                        </div>
                                    </div>
                                    <div class="m-t-15">
                                        <span class="peity-eth" data-peity='{ "fill": "rgba(70, 70, 70, 0.5)", "stroke": "#282828"}'>6,2,8,4,3,8,1,3,6,5,9,2,8,1,4,8,9,8,2,1</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="card">
                            <div class="card-body">
                                <div class="stat-widget-seven">
                                    <div class="row">
                                        <div class="col-2">
                                            <i class="cc XRP" title="XRP"></i>
                                        </div>
                                        <div class="col-5">
                                            <h3>Ripple  XRP</h3>
                                            <h6 class="text-muted">0.00000434 <span class="color-gray">BTC</span> <span class="text-info">$0.04</span></h6>
                                        </div>
                                        <div class="col-5 text-right">
                                            <h3>$8,569</h3>
                                            <h6 class="text-danger">31% <i class="ti-arrow-up f-s-16 text-danger m-l-5"></i></h6>
                                        </div>
                                    </div>
                                    <div class="m-t-15">
                                        <span class="peity-xrp" data-peity='{ "fill": "rgba(52, 106, 169, 0.51)", "stroke": "#346aa9"}'>6,2,8,4,3,8,1,3,6,5,9,2,8,1,4,8,9,8,2,1</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /# row -->
                <div class="row">
                    <div class="col-lg-4">
                        <div class="card">
                            <div class="card-title">
                                <h4>Trade History</h4>
                            </div>
                            <div class="card-body">
                                <div class="trade-history-table">
                                    <div class="table-responsive">
                                        <table class="table table-xs">
                                            <thead>
                                                <tr>
                                                    <th>Price($)</th>
                                                    <th>Amount</th>
                                                    <th>Date</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td class="text-success">11900.12</td>
                                                    <td><i class="cc BTC"></i> 0.215</td>
                                                    <td>11:23:25</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-danger">11903.18</td>
                                                    <td><i class="cc LTC"></i> 1.545</td>
                                                    <td>11:23:05</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-success">11899.56</td>
                                                    <td><i class="cc BTC"></i> 0.541</td>
                                                    <td>11:22:50</td>
                                                </tr>
                                                <tr>
                                                    <td class="danger">11910.52</td>
                                                    <td><i class="cc BTC"></i> 0.321</td>
                                                    <td>11:22:15</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-danger">11901.15</td>
                                                    <td><i class="cc BTC"></i> 0.548</td>
                                                    <td>11:21:25</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-success">11903.45</td>
                                                    <td><i class="cc BTC"></i> 0.587</td>
                                                    <td>11:21:01</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-danger">11895.50</td>
                                                    <td><i class="cc BTC"></i> 5.125</td>
                                                    <td>11:20:15</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-danger">11889.56</td>
                                                    <td><i class="cc BTC"></i> 0.894</td>
                                                    <td>11:20:03</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-success">11885.69</td>
                                                    <td><i class="cc BTC"></i> 0.754</td>
                                                    <td>11:19:55</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-danger">11891.12</td>
                                                    <td><i class="cc BTC"></i> 0.889</td>
                                                    <td>11:19:15</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-danger">11889.88</td>
                                                    <td><i class="cc BTC"></i> 0.654</td>
                                                    <td>11:18:18</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-success">11881.15</td>
                                                    <td><i class="cc BTC"></i> 1.254</td>
                                                    <td>11:18:01</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-success">11875.75</td>
                                                    <td><i class="cc BTC"></i> 0.885</td>
                                                    <td>11:17:25</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-8">
                        <div class="card">
                            <div class="card-title">
                                <h4>Active Order</h4></div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-de mb-0">
                                        <thead>
                                            <tr>
                                                <th>Date</th>
                                                <th>Type</th>
                                                <th>Amount BTC</th>
                                                <th>BTC Remaining</th>
                                                <th>Price</th>
                                                <th>USD</th>
                                                <th>Fee (%)</th>
                                                <th>Cancel</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>2018-01-31 06:51:51</td>
                                                <td class="success">Buy</td>
                                                <td><i class="cc BTC"></i> 0.58647</td>
                                                <td><i class="cc BTC"></i> 0.58647</td>
                                                <td>11900.12</td>
                                                <td>$ 6979.78</td>
                                                <td>0.2</td>
                                                <td>
                                                    <button class="btn btn-sm round btn-outline-danger"> Cancel</button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>2018-01-31 06:50:50</td>
                                                <td class="danger">Sell</td>
                                                <td><i class="cc BTC"></i> 1.38647</td>
                                                <td><i class="cc BTC"></i> 0.38647</td>
                                                <td>11905.09</td>
                                                <td>$ 4600.97</td>
                                                <td>0.2</td>
                                                <td>
                                                    <button class="btn btn-sm round btn-outline-danger"> Cancel</button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>2018-01-31 06:49:51</td>
                                                <td class="success">Buy</td>
                                                <td><i class="cc BTC"></i> 0.45879</td>
                                                <td><i class="cc BTC"></i> 0.45879</td>
                                                <td>11901.85</td>
                                                <td>$ 5460.44</td>
                                                <td>0.2</td>
                                                <td>
                                                    <button class="btn btn-sm round btn-outline-danger"> Cancel</button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>2018-01-31 06:51:51</td>
                                                <td class="success">Buy</td>
                                                <td><i class="cc BTC"></i> 0.89877</td>
                                                <td><i class="cc BTC"></i> 0.89877</td>
                                                <td>11899.25</td>
                                                <td>$ 10694.6</td>
                                                <td>0.2</td>
                                                <td>
                                                    <button class="btn btn-sm round btn-outline-danger"> Cancel</button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>2018-01-31 06:51:51</td>
                                                <td class="danger">Sell</td>
                                                <td><i class="cc BTC"></i> 0.45712</td>
                                                <td><i class="cc BTC"></i> 0.45712</td>
                                                <td>11908.58</td>
                                                <td>$ 5443.65</td>
                                                <td>0.2</td>
                                                <td>
                                                    <button class="btn btn-sm round btn-outline-danger"> Cancel</button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>2018-01-31 06:51:51</td>
                                                <td class="success">Buy</td>
                                                <td><i class="cc BTC"></i> 0.58647</td>
                                                <td><i class="cc BTC"></i> 0.58647</td>
                                                <td>11900.12</td>
                                                <td>$ 6979.78</td>
                                                <td>0.2</td>
                                                <td>
                                                    <button class="btn btn-sm round btn-outline-danger"> Cancel</button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 col-xl-6">
                        <div class="card">
                            <div class="card-title">
                                <h4>Sell Order</h4>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-de mb-0">
                                        <thead>
                                            <tr>
                                                <th>Price per BTC</th>
                                                <th>BTC Ammount</th>
                                                <th>Total($)</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>10583.4</td>
                                                <td><i class="cc BTC"></i> 0.45000000</td>
                                                <td>$ 4762.53</td>
                                            </tr>
                                            <tr>
                                                <td>10583.5</td>
                                                <td><i class="cc BTC"></i> 0.04000000</td>
                                                <td>$ 423.34</td>
                                            </tr>
                                            <tr>
                                                <td>10583.7</td>
                                                <td><i class="cc BTC"></i> 0.25100000</td>
                                                <td>$ 2656.51</td>
                                            </tr>
                                            <tr>
                                                <td>10583.8</td>
                                                <td><i class="cc BTC"></i> 0.35000000</td>
                                                <td>$ 3704.33</td>
                                            </tr>
                                            <tr>
                                                <td>10595.7</td>
                                                <td><i class="cc BTC"></i> 0.30000000</td>
                                                <td>$ 3178.71</td>
                                            </tr>
                                            <tr>
                                                <td>10599.5</td>
                                                <td><i class="cc BTC"></i> 0.02000000</td>
                                                <td>$ 211.99</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-xl-6">
                        <div class="card">
                            <div class="card-title">
                                <h4>Buy Order</h4>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-de mb-0">
                                        <thead>
                                            <tr>
                                                <th>Price per BTC</th>
                                                <th>BTC Ammount</th>
                                                <th>Total($)</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>10599.5</td>
                                                <td><i class="cc BTC"></i> 0.02000000</td>
                                                <td>$ 211.99</td>
                                            </tr>
                                            <tr>
                                                <td>10583.5</td>
                                                <td><i class="cc BTC"></i> 0.04000000</td>
                                                <td>$ 423.34</td>
                                            </tr>
                                            <tr>
                                                <td>10583.8</td>
                                                <td><i class="cc BTC"></i> 0.35000000</td>
                                                <td>$ 3704.33</td>
                                            </tr>
                                            <tr>
                                                <td>10595.7</td>
                                                <td><i class="cc BTC"></i> 0.30000000</td>
                                                <td>$ 3178.71</td>
                                            </tr>
                                            <tr>
                                                <td>10583.7</td>
                                                <td><i class="cc BTC"></i> 0.25100000</td>
                                                <td>$ 2656.51</td>
                                            </tr>
                                            <tr>
                                                <td>10595.8</td>
                                                <td><i class="cc BTC"></i> 0.29697926</td>
                                                <td>$ 3146.74</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End PAge Content -->
            </div>
            <!-- End Container fluid  -->
            <!-- footer -->
            <footer class="footer">Copyright &copy; 2018.Company name All rights reserved.<a target="_blank" href="http://www.51qianduan.com//moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></footer>
            <!-- End footer -->
        </div>
        <!-- End Page wrapper  -->
    </div>
    <!-- End Wrapper -->
    <!-- All Jquery -->
    <!-- Bootstrap tether Core JavaScript -->
    <!-- slimscrollbar scrollbar JavaScript -->
    <!--Menu sidebar -->
    <!--stickey kit -->
    <!--Custom JavaScript -->
    <!-- scripit init-->
</body>
</html>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

加群请备注:从官网了解到