feat: place style

This commit is contained in:
ding 2021-11-21 11:30:03 +08:00
parent 1db7d8f03d
commit 10eb6276ac
5 changed files with 218 additions and 9 deletions

View File

@ -0,0 +1,124 @@
<template>
<div class="ticker-place">
<div class="place-market">
<div>Limit</div>
<div>Market</div>
</div>
<div class="place-able">
<div>Available:</div>
<div>-- USDT</div>
</div>
<div class="place-input">
<div class="place-input-title">Price</div>
<b-form-input type="text" />
<div class="place-input-unit">USDT</div>
</div>
<div class="place-input">
<div class="place-input-title">Amount</div>
<b-form-input type="text" />
<div class="place-input-unit">BTC</div>
</div>
<div class="place-percent">
<div>25%</div>
<div>50%</div>
<div>75%</div>
<div>100%</div>
</div>
<div class="place-btn">
<BButton variant="success">
BUY
</BButton>
</div>
<div class="place-btn">
<BButton variant="danger">
SELL
</BButton>
</div>
</div>
</template>
<script>
import { BFormInput, BButton } from 'bootstrap-vue'
export default {
components: {
BButton,
BFormInput,
},
}
</script>
<style lang="scss" scoped>
.ticker-place {
background: #283046;
border-radius: 0.428rem;
padding: 1rem 1.5rem 1.5rem 1.5rem;
min-height: 50rem;
}
.place-percent {
display: flex;
margin-bottom: 2rem;
margin-top: 1rem;
div {
flex: 1;
text-align: center;
border: 1px solid #404656;
margin-right: 5px;
border-radius: 2px;
cursor: pointer;
&:last-child {
margin-right: 0;
}
}
}
.place-btn {
margin-bottom: 1rem;
button {
width: 100%;
}
}
.place-market {
display: flex;
height: 3rem;
align-items: center;
div {
margin-right: 2rem;
font-weight: bold;
color: #999;
}
div:first-of-type {
color: #fff;
}
}
.place-able {
display: flex;
height: 3rem;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
.place-input {
display: flex;
align-items: center;
margin-bottom: 2rem;
border: 1px solid #404656;
border-radius: 0.3rem;
padding: 0 1rem;
&:focus-within {
border-color: #fff;
}
.place-input-title {
width: 7rem;
}
.place-input-unit {
width: 5rem;
text-align: right;
}
.form-control {
border-color: #2A3044 !important;
font-size: 20px;
font-weight: bold;
}
}
</style>

View File

@ -0,0 +1,51 @@
<template>
<div class="ticker-bar">
<div class="ticker-name">
BTC / USDT
</div>
<div class="ticker-price">
59300
</div>
<div class="ticker-item">
<div>24h Change</div>
<div>460 +0.78%</div>
</div>
<div class="ticker-item">
<div>24h High</div>
<div>59000</div>
</div>
<div class="ticker-item">
<div>24h Low</div>
<div>58000</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.ticker-bar {
height: 5rem;
display: flex;
align-items: center;
.ticker-name {
font-size: 20px;
font-weight: bold;
margin-right: 2rem;
}
.ticker-price {
font-size: 24px;
font-weight: bold;
color: rgb(65, 242, 173);
margin-right: 2rem;
}
.ticker-item {
margin-right: 2rem;
div:first-of-type {
font-size: 12px;
color: #999;
}
div:last-child {
font-size: 14px;
}
}
}
</style>

View File

@ -1,6 +1,7 @@
/* eslint-disable */ /* eslint-disable */
const resolutionFormat = (resolution, name, to) => { const resolutionFormat = (resolution, name, to) => {
name = name.toLocaleLowerCase()
let req = `market.${name}.kline.${resolution}min` let req = `market.${name}.kline.${resolution}min`
let minutes = resolution let minutes = resolution

View File

@ -1,7 +1,8 @@
<template> <template>
<div className="container"> <div
<div id="chart-container-id" /> id="chart-container-id"
</div> class="kline-chart"
/>
</template> </template>
<script> <script>
@ -53,7 +54,6 @@ export default {
} }
if (res.tick) { if (res.tick) {
console.log(res)
const data = res.tick const data = res.tick
store.onRealTimeCallback({ store.onRealTimeCallback({
@ -71,8 +71,8 @@ export default {
} }
const tv = new widget({ const tv = new widget({
debug: true, debug: false,
symbol: 'btcusdt', symbol: 'BTCUSDT',
timezone: 'Asia/Shanghai', timezone: 'Asia/Shanghai',
fullscreen: true, fullscreen: true,
interval: '5', interval: '5',
@ -130,3 +130,10 @@ export default {
}, },
} }
</script> </script>
<style scoped>
.kline-chart {
border-radius: 0.428rem;
overflow: hidden;
}
</style>

View File

@ -1,15 +1,41 @@
<template> <template>
<div class="container-md"> <div className="container-md">
<b-row>
<b-col
cols="8"
class="trade-left"
>
<Ticker />
<Kline /> <Kline />
</b-col>
<b-col cols="4">
<Place />
</b-col>
</b-row>
</div> </div>
</template> </template>
<script> <script>
import Kline from '../components/kline/index.vue' import { BRow, BCol } from 'bootstrap-vue'
import Ticker from '@/components/KlineTrade/Ticker.vue'
import Place from '@/components/KlineTrade/Place.vue'
import Kline from '@/components/kline/index.vue'
export default { export default {
components: { components: {
BRow,
BCol,
Kline, Kline,
Ticker,
Place,
}, },
} }
</script> </script>
<style scoped>
.trade-left {
background: #283046;
border-radius: 0.428rem;
padding: 1rem 1.5rem 2rem 1.5rem;
}
</style>