From d26424c2df924fcd7c7ee7dc00119a4ba6b9ee92 Mon Sep 17 00:00:00 2001
From: ding <vimdingyiming@qq.com>
Date: Sun, 21 Nov 2021 16:33:10 +0800
Subject: [PATCH] feat: tabs

---
 src/components/KlineTrade/Place.vue | 49 ++++++++++++++++++-----------
 1 file changed, 31 insertions(+), 18 deletions(-)

diff --git a/src/components/KlineTrade/Place.vue b/src/components/KlineTrade/Place.vue
index 9fb2d26e..b52b4928 100644
--- a/src/components/KlineTrade/Place.vue
+++ b/src/components/KlineTrade/Place.vue
@@ -1,49 +1,62 @@
 <template>
   <div class="ticker-place">
-    <div class="place-market">
-      <div>Limit</div>
-      <div>Market</div>
-    </div>
+    <b-tabs small class="nav-fill">
+      <b-tab title="BUY">
+        BUY
+      </b-tab>
+      <b-tab title="SELL">
+        SELL
+      </b-tab>
+    </b-tabs>
     <div class="place-able">
       <div>Available:</div>
       <div>-- USDT</div>
     </div>
     <div class="place-input">
-      <div class="place-input-title">Price</div>
+      <div class="place-input-title">
+        Price
+      </div>
       <b-form-input type="text" />
-      <div class="place-input-unit">USDT</div>
+      <div class="place-input-unit">
+        USDT
+      </div>
     </div>
     <div class="place-input">
-      <div class="place-input-title">Amount</div>
+      <div class="place-input-title">
+        Amount
+      </div>
       <b-form-input type="text" />
-      <div class="place-input-unit">BTC</div>
+      <div class="place-input-unit">
+        BTC
+      </div>
+    </div>
+    <div>
+      Slippage tolerance
     </div>
     <div class="place-percent">
-      <div>25%</div>
-      <div>50%</div>
-      <div>75%</div>
-      <div>100%</div>
+      <div>1%</div>
+      <div>3%</div>
+      <div>5%</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'
+import {
+  BFormInput, BButton, BTabs, BTab,
+} from 'bootstrap-vue'
 
 export default {
   components: {
     BButton,
     BFormInput,
+    BTab,
+    BTabs,
   },
 }
 </script>