feat: place style

src/components/KlineTrade/Place.vue

@@ -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>

src/components/KlineTrade/Ticker.vue

@@ -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>

src/components/kline/datafeed.js

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

src/components/kline/index.vue

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

src/views/OsmosisTrade.vue

@@ -1,15 +1,41 @@
 <template>
-  <div class="container-md">
-    <Kline />
+  <div className="container-md">
+    <b-row>
+      <b-col
+        cols="8"
+        class="trade-left"
+      >
+        <Ticker />
+        <Kline />
+      </b-col>
+      <b-col cols="4">
+        <Place />
+      </b-col>
+    </b-row>
   </div>
 </template>
 
 <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 {
   components: {
+    BRow,
+    BCol,
     Kline,
+    Ticker,
+    Place,
   },
 }
 </script>
+
+<style scoped>
+.trade-left {
+  background: #283046;
+  border-radius: 0.428rem;
+  padding: 1rem 1.5rem 2rem 1.5rem;
+}
+</style>