495 lines
17 KiB
Vue
495 lines
17 KiB
Vue
|
<script>
|
||
|
|
import Layout from "../../layouts/main";
|
||
|
|
import PageHeader from "../../components/page-header";
|
||
|
|
import chartData from "./data-exchange";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
Layout,
|
||
|
|
PageHeader,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
title: "Exchange",
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
text: "Crypto",
|
||
|
|
href: "javascript:void(0)",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "Exchange",
|
||
|
|
active: true,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
chartData,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<Layout>
|
||
|
|
<PageHeader :title="title" :items="items" />
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-lg-12">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="media">
|
||
|
|
<div class="me-3">
|
||
|
|
<img
|
||
|
|
src="/images/users/avatar-1.jpg"
|
||
|
|
alt=""
|
||
|
|
class="avatar-md rounded-circle img-thumbnail"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="media-body align-self-center">
|
||
|
|
<div class="text-muted">
|
||
|
|
<h5>Henry wells</h5>
|
||
|
|
<p class="mb-1">henrywells@abc.com</p>
|
||
|
|
<p class="mb-0">Id no: #SK0234</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="dropdown">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-light dropdown-toggle"
|
||
|
|
data-toggle="dropdown"
|
||
|
|
aria-haspopup="true"
|
||
|
|
aria-expanded="false"
|
||
|
|
>
|
||
|
|
<i class="mdi mdi-wallet me-1"></i>
|
||
|
|
<span class="d-none d-sm-inline-block"
|
||
|
|
>Wallet Balance <i class="mdi mdi-chevron-down"></i
|
||
|
|
></span>
|
||
|
|
</button>
|
||
|
|
<div class="dropdown-menu dropdown-menu-right dropdown-menu-md">
|
||
|
|
<div class="dropdown-item-text">
|
||
|
|
<div>
|
||
|
|
<p class="text-muted mb-2">Available Balance</p>
|
||
|
|
<h5 class="mb-0">$ 9148.23</h5>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="dropdown-divider"></div>
|
||
|
|
|
||
|
|
<a class="dropdown-item" href="#">
|
||
|
|
BTC : <span class="float-end">1.02356</span>
|
||
|
|
</a>
|
||
|
|
<a class="dropdown-item" href="#">
|
||
|
|
ETH : <span class="float-end">0.04121</span>
|
||
|
|
</a>
|
||
|
|
<a class="dropdown-item" href="#">
|
||
|
|
LTC : <span class="float-end">0.00356</span>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<div class="dropdown-divider"></div>
|
||
|
|
|
||
|
|
<a class="dropdown-item text-primary text-center" href="#">
|
||
|
|
Learn more
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end row -->
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xl-8">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title mb-4">Price</h4>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xl-3 col-sm-4">
|
||
|
|
<div class="media">
|
||
|
|
<div class="avatar-sm me-3">
|
||
|
|
<span
|
||
|
|
class="avatar-title rounded-circle bg-soft bg-warning text-warning font-size-22"
|
||
|
|
>
|
||
|
|
<i class="mdi mdi-bitcoin"></i>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="media-body">
|
||
|
|
<p class="text-muted mb-2">Bitcoin</p>
|
||
|
|
<h5>1.02356 BTC</h5>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-xl-3 col-sm-4">
|
||
|
|
<div class="mt-4 mt-sm-0">
|
||
|
|
<p class="text-muted mb-2">In USD</p>
|
||
|
|
<h5>6310.22 USD</h5>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-xl-3 col-sm-4">
|
||
|
|
<div class="mt-4 mt-sm-0">
|
||
|
|
<p class="text-muted mb-2">Last 24 hrs</p>
|
||
|
|
<h5>0.24 % <i class="mdi mdi-arrow-up text-success"></i></h5>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mt-4">
|
||
|
|
<apexchart
|
||
|
|
class="apex-charts"
|
||
|
|
type="candlestick"
|
||
|
|
:height="310"
|
||
|
|
dir="ltr"
|
||
|
|
:series="chartData.series"
|
||
|
|
:options="chartData.chartOptions"
|
||
|
|
></apexchart>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-xl-4">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title mb-4">Buy / Sell</h4>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<p class="text-muted mb-2">
|
||
|
|
<i class="mdi mdi-wallet me-1"></i> Wallet Balance
|
||
|
|
</p>
|
||
|
|
<h5>$ 9148.23</h5>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mt-4">
|
||
|
|
<b-tabs nav-class="bg-light rounded" pills content-class="mt-4">
|
||
|
|
<b-tab title="Buy" active>
|
||
|
|
<h5 class="font-size-14 mb-4">Buy Coin</h5>
|
||
|
|
<div>
|
||
|
|
<div>
|
||
|
|
<label>Add Amount :</label>
|
||
|
|
<div class="input-group mb-3">
|
||
|
|
<label class="input-group-text">Amount</label>
|
||
|
|
<select class="form-select" style="max-width: 90px">
|
||
|
|
<option value="BT" selected="">BTC</option>
|
||
|
|
<option value="ET">ETH</option>
|
||
|
|
<option value="LT">LTC</option>
|
||
|
|
</select>
|
||
|
|
<input type="text" class="form-control" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="input-group mb-3">
|
||
|
|
<div class="input-group-prepend">
|
||
|
|
<label class="input-group-text">Price</label>
|
||
|
|
</div>
|
||
|
|
<input type="text" class="form-control" />
|
||
|
|
<div class="input-group-append">
|
||
|
|
<label class="input-group-text">$</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="input-group mb-3">
|
||
|
|
<div class="input-group-prepend">
|
||
|
|
<label class="input-group-text">Total</label>
|
||
|
|
</div>
|
||
|
|
<input type="text" class="form-control" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="text-center">
|
||
|
|
<button type="button" class="btn btn-success w-md">
|
||
|
|
Buy Coin
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</b-tab>
|
||
|
|
<b-tab title="Sell">
|
||
|
|
<h5 class="font-size-14 mb-4">Sell Coin</h5>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<div>
|
||
|
|
<label>Add Amount :</label>
|
||
|
|
<div class="input-group mb-3">
|
||
|
|
<label class="input-group-text">Amount</label>
|
||
|
|
<select class="form-select" style="max-width: 90px">
|
||
|
|
<option value="BT" selected="">BTC</option>
|
||
|
|
<option value="ET">ETH</option>
|
||
|
|
<option value="LT">LTC</option>
|
||
|
|
</select>
|
||
|
|
<input type="text" class="form-control" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="input-group mb-3">
|
||
|
|
<div class="input-group-prepend">
|
||
|
|
<label class="input-group-text">Price</label>
|
||
|
|
</div>
|
||
|
|
<input type="text" class="form-control" />
|
||
|
|
<div class="input-group-append">
|
||
|
|
<label class="input-group-text">$</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="input-group mb-3">
|
||
|
|
<div class="input-group-prepend">
|
||
|
|
<label class="input-group-text">Total</label>
|
||
|
|
</div>
|
||
|
|
<input type="text" class="form-control" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="text-center">
|
||
|
|
<button type="button" class="btn btn-danger w-md">
|
||
|
|
Sell Coin
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</b-tab>
|
||
|
|
</b-tabs>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end row -->
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xl-6">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title mb-4">Order book</h4>
|
||
|
|
|
||
|
|
<div class="table-responsive">
|
||
|
|
<table class="table table-bordered mb-0">
|
||
|
|
<thead>
|
||
|
|
<tr class="text-center">
|
||
|
|
<th colspan="3">Buy</th>
|
||
|
|
<th colspan="3">Sell</th>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th scope="col">Amount</th>
|
||
|
|
<th scope="col">Total</th>
|
||
|
|
<th scope="col">Price</th>
|
||
|
|
<th scope="col">Amount</th>
|
||
|
|
<th scope="col">Total</th>
|
||
|
|
<th scope="col">Price</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>0.0412</td>
|
||
|
|
<td>0.0412</td>
|
||
|
|
<td>256.18</td>
|
||
|
|
<td>0.0201</td>
|
||
|
|
<td>0.0201</td>
|
||
|
|
<td>124.98</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>0.0301</td>
|
||
|
|
<td>0.0301</td>
|
||
|
|
<td>187.16</td>
|
||
|
|
<td>0.0165</td>
|
||
|
|
<td>0.0165</td>
|
||
|
|
<td>102.60</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>0.0523</td>
|
||
|
|
<td>0.0523</td>
|
||
|
|
<td>325.21</td>
|
||
|
|
<td>0.0348</td>
|
||
|
|
<td>0.0348</td>
|
||
|
|
<td>216.39</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>0.0432</td>
|
||
|
|
<td>0.0432</td>
|
||
|
|
<td>268.62</td>
|
||
|
|
<td>0.0321</td>
|
||
|
|
<td>0.0321</td>
|
||
|
|
<td>199.60</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>0.0246</td>
|
||
|
|
<td>0.0246</td>
|
||
|
|
<td>152.96</td>
|
||
|
|
<td>0.0403</td>
|
||
|
|
<td>0.0403</td>
|
||
|
|
<td>250.59</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-xl-6">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title mb-4">Notifications</h4>
|
||
|
|
|
||
|
|
<div data-simplebar style="max-height: 310px">
|
||
|
|
<ul class="verti-timeline list-unstyled">
|
||
|
|
<li class="event-list">
|
||
|
|
<div class="event-timeline-dot">
|
||
|
|
<i class="bx bx-right-arrow-circle font-size-18"></i>
|
||
|
|
</div>
|
||
|
|
<div class="media">
|
||
|
|
<div class="me-3">
|
||
|
|
<h5 class="font-size-14">
|
||
|
|
15 Mor
|
||
|
|
<i
|
||
|
|
class="bx bx-right-arrow-alt font-size-16 text-primary align-middle ms-2"
|
||
|
|
></i>
|
||
|
|
</h5>
|
||
|
|
</div>
|
||
|
|
<div class="media-body">
|
||
|
|
<div>If several languages coalesce of the resulting.</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="event-list">
|
||
|
|
<div class="event-timeline-dot">
|
||
|
|
<i class="bx bx-right-arrow-circle font-size-18"></i>
|
||
|
|
</div>
|
||
|
|
<div class="media">
|
||
|
|
<div class="me-3">
|
||
|
|
<h5 class="font-size-14">
|
||
|
|
14 Mor
|
||
|
|
<i
|
||
|
|
class="bx bx-right-arrow-alt font-size-16 text-primary align-middle ms-2"
|
||
|
|
></i>
|
||
|
|
</h5>
|
||
|
|
</div>
|
||
|
|
<div class="media-body">
|
||
|
|
<div>
|
||
|
|
New common language will be more simple and regular than
|
||
|
|
the existing
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="event-list">
|
||
|
|
<div class="event-timeline-dot">
|
||
|
|
<i class="bx bx-right-arrow-circle font-size-18"></i>
|
||
|
|
</div>
|
||
|
|
<div class="media">
|
||
|
|
<div class="me-3">
|
||
|
|
<h5 class="font-size-14">
|
||
|
|
13 Mor
|
||
|
|
<i
|
||
|
|
class="bx bx-right-arrow-alt font-size-16 text-primary align-middle ms-2"
|
||
|
|
></i>
|
||
|
|
</h5>
|
||
|
|
</div>
|
||
|
|
<div class="media-body">
|
||
|
|
<div>
|
||
|
|
It will seem like simplified English as a skeptical
|
||
|
|
Cambridge
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="event-list">
|
||
|
|
<div class="event-timeline-dot">
|
||
|
|
<i class="bx bx-right-arrow-circle font-size-18"></i>
|
||
|
|
</div>
|
||
|
|
<div class="media">
|
||
|
|
<div class="me-3">
|
||
|
|
<h5 class="font-size-14">
|
||
|
|
13 Mor
|
||
|
|
<i
|
||
|
|
class="bx bx-right-arrow-alt font-size-16 text-primary align-middle ms-2"
|
||
|
|
></i>
|
||
|
|
</h5>
|
||
|
|
</div>
|
||
|
|
<div class="media-body">
|
||
|
|
<div>To achieve this, it would be necessary</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li class="event-list">
|
||
|
|
<div class="event-timeline-dot">
|
||
|
|
<i class="bx bx-right-arrow-circle font-size-18"></i>
|
||
|
|
</div>
|
||
|
|
<div class="media">
|
||
|
|
<div class="me-3">
|
||
|
|
<h5 class="font-size-14">
|
||
|
|
12 Mor
|
||
|
|
<i
|
||
|
|
class="bx bx-right-arrow-alt font-size-16 text-primary align-middle ms-2"
|
||
|
|
></i>
|
||
|
|
</h5>
|
||
|
|
</div>
|
||
|
|
<div class="media-body">
|
||
|
|
<div>Cum sociis natoque penatibus et magnis dis</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="event-list">
|
||
|
|
<div class="event-timeline-dot">
|
||
|
|
<i class="bx bx-right-arrow-circle font-size-18"></i>
|
||
|
|
</div>
|
||
|
|
<div class="media">
|
||
|
|
<div class="me-3">
|
||
|
|
<h5 class="font-size-14">
|
||
|
|
11 Mor
|
||
|
|
<i
|
||
|
|
class="bx bx-right-arrow-alt font-size-16 text-primary align-middle ms-2"
|
||
|
|
></i>
|
||
|
|
</h5>
|
||
|
|
</div>
|
||
|
|
<div class="media-body">
|
||
|
|
<div>
|
||
|
|
New common language will be more simple and regular than
|
||
|
|
the existing
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="event-list">
|
||
|
|
<div class="event-timeline-dot">
|
||
|
|
<i class="bx bx-right-arrow-circle font-size-18"></i>
|
||
|
|
</div>
|
||
|
|
<div class="media">
|
||
|
|
<div class="me-3">
|
||
|
|
<h5 class="font-size-14">
|
||
|
|
10 Mor
|
||
|
|
<i
|
||
|
|
class="bx bx-right-arrow-alt font-size-16 text-primary align-middle ms-2"
|
||
|
|
></i>
|
||
|
|
</h5>
|
||
|
|
</div>
|
||
|
|
<div class="media-body">
|
||
|
|
<div>
|
||
|
|
It will seem like simplified English as a skeptical
|
||
|
|
Cambridge
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="event-list">
|
||
|
|
<div class="event-timeline-dot">
|
||
|
|
<i class="bx bx-right-arrow-circle font-size-18"></i>
|
||
|
|
</div>
|
||
|
|
<div class="media">
|
||
|
|
<div class="me-3">
|
||
|
|
<h5 class="font-size-14">
|
||
|
|
09 Mor
|
||
|
|
<i
|
||
|
|
class="bx bx-right-arrow-alt font-size-16 text-primary align-middle ms-2"
|
||
|
|
></i>
|
||
|
|
</h5>
|
||
|
|
</div>
|
||
|
|
<div class="media-body">
|
||
|
|
<div>To achieve this, it would be necessary</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Layout>
|
||
|
|
</template>
|