diff --git a/dist.zip b/dist.zip
deleted file mode 100644
index f82a147..0000000
Binary files a/dist.zip and /dev/null differ
diff --git a/src/assets/scss/module/_contract.scss b/src/assets/scss/module/_contract.scss
index dd7235c..191bf2b 100644
--- a/src/assets/scss/module/_contract.scss
+++ b/src/assets/scss/module/_contract.scss
@@ -7,10 +7,57 @@
     }
 
     .page-top {
-        padding-top: 1px;
+        padding-left: 1rem;
+        padding-right: 0.5rem;
+        padding-bottom: 1rem;
         background-color: #f5f5f5;
-        border-bottom: 1px solid #ebebeb;
+        // border-bottom: 1px solid #ebebeb;
 
+        .left-box-A{
+            padding-right: 1rem;
+        }
+        .top-box-A{
+            color: #000;
+            background-color: #fff;
+            padding: 1rem;
+            margin-bottom: 1rem;
+
+            .min-width-A{
+                min-width: 120px;
+            }
+            .min-width-B{
+                min-width: 160px;
+            }
+            .fn-28{
+                font-weight: bold;
+                padding-right: 1rem;
+            }
+            .p-l-A{
+                padding-left: 2rem!important;
+            }
+        }
+        .bottom-box-left{
+            width: 400px;
+            flex-shrink: 0;
+            background-color: #fff;
+            margin-right: 1rem;
+
+            .table td{
+                border-top: 1px solid #eee;
+            }
+            .table tr.active{
+                background-color: #F8F8FD;
+            }
+            // .table tr.active td.tr-text{
+            //     color: #4387F7 !important;
+            // }
+            // td.tr-text{
+            //     color: #578F45 !important;
+            // }
+            .table tbody tr{
+                cursor: pointer;
+            }
+        }
         .kline-box {
             // background: $cls-white;
             background: #fff;
@@ -59,7 +106,8 @@
 
         .handicap {
             // width: 200px;
-            width: 250px;
+            width: 370px;
+            font-size: 16px;
 
             .handicap-body {
                 .item {
@@ -76,7 +124,7 @@
                 .sell,
                 .buy {
                     // height: 310px;
-                    height: 230px;
+                    height: 265px;
                     overflow: auto;
                 }
 
diff --git a/src/assets/scss/module/_market-book.scss b/src/assets/scss/module/_market-book.scss
index dbd8f02..b798f09 100644
--- a/src/assets/scss/module/_market-book.scss
+++ b/src/assets/scss/module/_market-book.scss
@@ -4,6 +4,7 @@
 .order-book th {
   width: 100%;
   table-layout: fixed;
+  font-size: 16px;
 }
 .order-book tr {
   float: left;
@@ -12,7 +13,7 @@
 }
 .order-book .table thead th {
   font-weight: 400;
-  font-size: 12px;
+  font-size: 14px;
 }
 .order-book thead tr {
   border-bottom: 1px solid #FFFFFF;
@@ -121,7 +122,7 @@
 .ob-heading span {
   color: #4a4a4a;
   display: block;
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 400;
 }
 
diff --git a/src/assets/scss/module/_market-history.scss b/src/assets/scss/module/_market-history.scss
index ea07d78..38c1ad6 100644
--- a/src/assets/scss/module/_market-history.scss
+++ b/src/assets/scss/module/_market-history.scss
@@ -1,3 +1,7 @@
+.market-history{
+  font-size: 16px;
+  height: 100%;
+}
 .market-history .nav {
   background: #F5F9FC;
 }
@@ -38,3 +42,6 @@
   border: 1px solid #ebebeb;
   border-radius: 2px;
 }
+.table td{
+  font-size: 16px;
+}
\ No newline at end of file
diff --git a/src/assets/scss/module/_market-pairs.scss b/src/assets/scss/module/_market-pairs.scss
index 8fbe192..face53c 100644
--- a/src/assets/scss/module/_market-pairs.scss
+++ b/src/assets/scss/module/_market-pairs.scss
@@ -1,6 +1,5 @@
 .market-pairs {
 	border: 1px solid #ebebeb;
-	padding-top: 14px;
 	border-radius: 2px;
 }
 
@@ -24,7 +23,7 @@
 }
 
 .market-pairs .nav {
-	margin-top: 14px;
+	// margin-top: 14px;
 	background: #f5f9fc;
 }
 
diff --git a/src/assets/scss/module/_market-trade.scss b/src/assets/scss/module/_market-trade.scss
index 1fa94b9..045b562 100644
--- a/src/assets/scss/module/_market-trade.scss
+++ b/src/assets/scss/module/_market-trade.scss
@@ -80,18 +80,18 @@
 
 .market-trade button.buy,
 .market-trade button.sell {
-	background: #26de81;
+	background: #6CD98A;
 	color: #fff;
 	text-transform: uppercase;
 	padding: 10px;
 	margin-top: 30px;
 	width: 100%;
-	box-shadow: 0px 0px 15px 0px #26de81ad;
+	// box-shadow: 0px 0px 15px 0px #26de81ad;
 }
 
 .market-trade button.sell {
-	background: #ff231f;
-	box-shadow: 0px 0px 15px 0px #ff231fad;
+	background: #EC4030;
+	// box-shadow: 0px 0px 15px 0px #ff231fad;
 }
 
 .market-trade p {
diff --git a/src/components/KLine.vue b/src/components/KLine.vue
index 69dc8f9..bf49642 100644
--- a/src/components/KLine.vue
+++ b/src/components/KLine.vue
@@ -394,7 +394,7 @@ export default {
 
 <style lang="scss">
 #tradingview_lautin {
-  height: 550px;
+  height: 610px;//币币页面K线图的宽高设置
 }
 
 // 分时按钮
diff --git a/src/views/contract/exchange-store.vue b/src/views/contract/exchange-store.vue
index 5d8e1a4..1ca8330 100644
--- a/src/views/contract/exchange-store.vue
+++ b/src/views/contract/exchange-store.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="markets-pair-list exchange-store bg-plain ex-s-p-c">
+  <div class="markets-pair-list exchange-store bg-plain">
     <div class="nav nav-pills" style="align-items: center;width:180px;" v-if="0">
       <div class="nav-item" :class="{ active: tab == 1 }">
         <a class="nav-link" :class="{ active: tab == 1 }" @click="tab = 1">{{
@@ -43,13 +43,21 @@
         </el-popover>
       </div>
     </div>
+
     <div class="content-box">
-      <div class="nav-item" :class="{ active: tab == 1 }" style="flex-shrink:0;">
-        <a class="nav-link" :class="{ active: tab == 1 }" @click="tab = 1">{{
-          $t("contract.d5")
-        }}</a>
+      <div class="nav nav-pills">
+        <div class="nav-item" :class="{ active: form.type == 2 }" @click="form.type = 2">
+          <a style="display:block;padding:5px 0px;">
+            {{ $t("contract.d9") }}
+          </a>
+        </div>
+        <div class="nav-item" :class="{ active: form.type == 1 }" @click="form.type = 1">
+          <a style="display:block;padding:5px 0px;">
+            {{ $t("contract.e0") }}
+          </a>
+        </div>
       </div>
-      <div class="d-flex align-items-center" style="flex-shrink:0;">
+      <div class="d-flex align-items-center" style="flex-shrink:0;margin-left:20px;">
         <el-popover
           placement="bottom"
           width="100"
@@ -80,134 +88,112 @@
           </div>
         </el-popover>
       </div>
-      <div class="line-A"></div>
-      <div v-if="type == 2" class="input-group my-4 input-group-sm">
-        <div class="input-group-prepend">
-          <span class="input-group-text">{{ $t("contract.d7") }}</span>
-        </div>
-        <input type="number" class="form-control" placeholder="" />
-        <div class="input-group-append">
-          <span class="input-group-text">USDT</span>
-        </div>
-      </div>
-      <div>
-        <div class="" style="color: #666;">
-          <div class="nav nav-pills">
-            <div class="nav-item" :class="{ active: form.type == 1 }" @click="form.type = 1">
-              <a style="display:block;padding:5px 0px;margin:0 15px 0 0;">
-                {{ $t("contract.e0") }}
-              </a>
-            </div>
-            <div class="nav-item" :class="{ active: form.type == 2 }" @click="form.type = 2">
-              <a style="display:block;padding:5px 0px;margin:0 15px 0 0;">
-                {{ $t("contract.d9") }}
-              </a>
-            </div>
-          </div>
-        </div>
-        <div class="" style="color: #666;white-space: nowrap;margin: 0px 0px 10px 0px;">
-          <span style="margin-right: 10px;">{{ $t("contract.a3") }}</span>
-          <span> {{ accountInfo.usable_balance }} USDT
+    </div>
+    <div class="ex-s-p-c">
+      <!-- 买入 -->
+      <div style="width:47%;">
+        <div class="usable-box-A">
+          <span>{{ $t("contract.a3") }}</span>
+          <span style="color: #444;"> {{ accountInfo.usable_balance }} USDT
             <i
               class="el-icon-sort"
               @click="$router.push('/wallet/assets/exchange')"
             ></i>
           </span>
         </div>
-      </div>
-      <div class="line-A"></div>
-      <div class="d-flex align-items-center px-2">
         <div class="input-group-a">
-          <div class="input-group-append">
-            <span class="input-group-text">{{ $t("contract.d8") }}</span>
-          </div>
           <template v-if="form.type == 1">
+            <div class="form-control-A">{{ $t('contract.d8') }}</div>
             <input
               type="number"
-              v-model="form.entrust_price"
+              v-model="form.entrust_price_buy"
               class="form-control"
-              placeholder=""
+              :placeholder="$t('contract.d8')"
             />
-            <div class="input-group-append">
-              <span class="input-group-text">USDT</span>
-            </div>
+            <div class="form-control-B">USDT</div>
           </template>
           <template v-if="form.type == 2">
+            <div class="form-control-A">{{ $t('contract.d8') }}</div>
             <input
               type="text"
               disabled
               :value="$t('contract.d9')"
               class="form-control"
-              :placeholder="$t('contract.d9')"
+              placeholder=""
             />
           </template>
         </div>
-        <!-- <button
-          @click="form.type == 1 ? (form.type = 2) : (form.type = 1)"
-          class="btn btn-sm btn-outline-primary ml-2 text-nowrap"
-        >
-          {{ form.type == 1 ? $t("contract.e0") : $t("contract.d9") }}
-        </button> -->
-      </div>
-      <div class="input-group-a align-items-center">
-        <div class="">
-          <!-- <span class="input-group-text">{{ $t("contract.e1") }}</span> -->
-          <span class="input-group-text">{{ $t("contract.l2") }}</span>
-        </div>
-
-        <input
-            type="number"
-            class="form-control"
-            v-model="margin"
-            :placeholder="tips"
-        />
-        <!-- <div class="input-group-append">
-            <span class="input-group-text">{{ $t("contract.e2") }}</span>
-        </div> -->
-      </div>
-      <div class="line-A"></div>
-      <div style="width:200px;margin:0px 12px;">
-        <div class="px-2" v-if="this.tab == 1">
-          <el-slider
-              :value="activeStep"
-              @input="sliderChange"
-              :format-tooltip="tooltip"
-              :marks="marks"
-          ></el-slider>
-          <!-- :step="25" -->
+        <div class="input-group-a">
+          <div class="form-control-A">{{ $t("contract.l2") }}</div>
+          <input
+              type="number"
+              class="form-control"
+              v-model="margin_buy"
+              :placeholder="tips"
+          />
         </div>
-        <!-- 开仓 -->
-        <div v-if="tab == 1" class="kaicang">
-          <div class="d-flex justify-content-between mb-3" style="color: #999;">
-              <div>{{ $t("contract.e1") }}：</div>
-              <!-- {{$t("contract.e2")}} -->
-              <div>{{ amount }}</div>
+        <div>
+          <div class="px-2" v-if="this.tab == 1">
+            <el-slider
+                :value="activeStep_buy"
+                @input="sliderChange($event, 'buy')"
+                :format-tooltip="tooltip"
+                :marks="marks"
+            ></el-slider>
+            <!-- :step="25" -->
           </div>
-          <!-- <div class="d-flex justify-content-between mb-4">
-            <div>{{ $t("contract.a3") }}:</div>
-            <div>
-              {{ accountInfo.usable_balance }} USDT
-              <i
-                class="el-icon-sort"
-                @click="$router.push('/wallet/assets/exchange')"
-              ></i>
+          <!-- 开仓 -->
+          <div v-if="tab == 1" class="kaicang">
+            <div class="d-flex justify-content-between mb-3" style="color: #999;">
+                <div>{{ $t("contract.e1") }}：</div>
+                <!-- {{$t("contract.e2")}} -->
+                <div>{{ amount_buy }}</div>
+            </div>
+            <!-- <div class="d-flex justify-content-between mb-4">
+              <div>{{ $t("contract.a3") }}:</div>
+              <div>
+                {{ accountInfo.usable_balance }} USDT
+                <i
+                  class="el-icon-sort"
+                  @click="$router.push('/wallet/assets/exchange')"
+                ></i>
+              </div>
+            </div> -->
+          </div>
+          <!-- 平仓 -->
+          <div v-if="tab == 2">
+            <div class="d-flex justify-content-between">
+              <div>{{ $t("contract.e4") }}：</div>
+              <div>{{ multiplePositions }} {{ $t("contract.e2") }}</div>
+            </div>
+            <div class="d-flex justify-content-between mb-4">
+              <div>{{ $t("contract.e5") }}:</div>
+              <div>{{ shortPosition }} {{ $t("contract.e2") }}</div>
             </div>
-          </div> -->
+          </div>
         </div>
-        <!-- 平仓 -->
-        <div v-if="tab == 2">
-          <div class="d-flex justify-content-between">
-            <div>{{ $t("contract.e4") }}：</div>
-            <div>{{ multiplePositions }} {{ $t("contract.e2") }}</div>
+        <div class="d-flex justify-content-between">
+          <div class="input-group-a" style="width:49%;">
+            <input
+                type="number"
+                class="form-control"
+                v-model="form.sl_trigger_price_buy"
+                :placeholder="$t('contract.i7')"
+                style="text-align:left;"
+            />
+            <div class="form-control-B">USDT</div>
           </div>
-          <div class="d-flex justify-content-between mb-4">
-            <div>{{ $t("contract.e5") }}:</div>
-            <div>{{ shortPosition }} {{ $t("contract.e2") }}</div>
+          <div class="input-group-a" style="width:49%;">
+            <input
+                type="number"
+                class="form-control"
+                v-model="form.tp_trigger_price_buy"
+                :placeholder="$t('contract.i8')"
+                style="text-align:left;"
+            />
+            <div class="form-control-B">USDT</div>
           </div>
         </div>
-      </div>
-      <div class="line-A"></div>
-      <div class="exchange_button" v-if="tab == 1" style="color: #999;">
         <div class="px-2 flex-fill">
           <button
             @click="ifOpenPosition(1)"
@@ -217,11 +203,116 @@
             {{ $t("contract.d0") }}
             <!-- <span class="fn-12"> （{{ $t("contract.e6") }}） </span> -->
           </button>
-          <div class="text-left" style="white-space: nowrap;">
+          <div class="text-left" style="white-space: nowrap; color: #999;">
             {{ $t("contract.e7") }} {{ maxNum }}
             <!-- {{ $t("contract.e2") }} -->
           </div>
         </div>
+      </div>
+      <!-- 卖出 -->
+      <div style="width:47%;">
+        <div class="usable-box-A">
+          <span>{{ $t("contract.a3") }}</span>
+          <span style="color: #444;"> {{ accountInfo.usable_balance }} USDT
+            <i
+              class="el-icon-sort"
+              @click="$router.push('/wallet/assets/exchange')"
+            ></i>
+          </span>
+        </div>
+        <div class="input-group-a">
+          <template v-if="form.type == 1">
+            <div class="form-control-A">{{ $t('contract.d8') }}</div>
+            <input
+              type="number"
+              v-model="form.entrust_price_sell"
+              class="form-control"
+              :placeholder="$t('contract.d8')"
+            />
+            <div class="form-control-B">USDT</div>
+          </template>
+          <template v-if="form.type == 2">
+            <div class="form-control-A">{{ $t('contract.d8') }}</div>
+            <input
+              type="text"
+              disabled
+              :value="$t('contract.d9')"
+              class="form-control"
+              placeholder=""
+            />
+          </template>
+        </div>
+        <div class="input-group-a">
+          <div class="form-control-A">{{ $t("contract.l2") }}</div>
+          <input
+              type="number"
+              class="form-control"
+              v-model="margin_sell"
+              :placeholder="tips"
+          />
+        </div>
+        <div>
+          <div class="px-2" v-if="this.tab == 1">
+            <el-slider
+                :value="activeStep_sell"
+                @input="sliderChange($event, 'sell')"
+                :format-tooltip="tooltip"
+                :marks="marks"
+            ></el-slider>
+            <!-- :step="25" -->
+          </div>
+          <!-- 开仓 -->
+          <div v-if="tab == 1" class="kaicang">
+            <div class="d-flex justify-content-between mb-3" style="color: #999;">
+                <div>{{ $t("contract.e1") }}：</div>
+                <!-- {{$t("contract.e2")}} -->
+                <div>{{ amount_sell }}</div>
+            </div>
+            <!-- <div class="d-flex justify-content-between mb-4">
+              <div>{{ $t("contract.a3") }}:</div>
+              <div>
+                {{ accountInfo.usable_balance }} USDT
+                <i
+                  class="el-icon-sort"
+                  @click="$router.push('/wallet/assets/exchange')"
+                ></i>
+              </div>
+            </div> -->
+          </div>
+          <!-- 平仓 -->
+          <div v-if="tab == 2">
+            <div class="d-flex justify-content-between">
+              <div>{{ $t("contract.e4") }}：</div>
+              <div>{{ multiplePositions }} {{ $t("contract.e2") }}</div>
+            </div>
+            <div class="d-flex justify-content-between mb-4">
+              <div>{{ $t("contract.e5") }}:</div>
+              <div>{{ shortPosition }} {{ $t("contract.e2") }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="d-flex justify-content-between">
+          <div class="input-group-a" style="width:49%;">
+            <input
+                type="number"
+                class="form-control"
+                v-model="form.sl_trigger_price_sell"
+                :placeholder="$t('contract.i7')"
+                style="text-align:left;"
+            />
+            <div class="form-control-B">USDT</div>
+          </div>
+          <div class="input-group-a" style="width:49%;">
+            <input
+                type="number"
+                class="form-control"
+                v-model="form.tp_trigger_price_sell"
+                :placeholder="$t('contract.i8')"
+                style="text-align:left;"
+            />
+            <div class="form-control-B">USDT</div>
+          </div>
+        </div>
         <div class="px-2 flex-fill">
           <button
             @click="ifOpenPosition(2)"
@@ -232,12 +323,39 @@
             <!-- <span class="fn-12"> （{{ $t("contract.e8") }}） </span> -->
           </button>
           <!-- <div class="text-center"> -->
-          <div class="text-right" style="white-space: nowrap;">
+          <div class="text-left" style="white-space: nowrap; color: #999;">
             {{ $t("contract.e7") }} {{ maxNum }}
             <!-- {{ $t("contract.e2") }} -->
           </div>
         </div>
       </div>
+    </div>
+
+    <div class="content-box" v-if="0">
+      
+      <div class="line-A"></div>
+      <div v-if="type == 2" class="input-group my-4 input-group-sm">
+        <div class="input-group-prepend">
+          <span class="input-group-text">{{ $t("contract.d7") }}</span>
+        </div>
+        <input type="number" class="form-control" placeholder="" />
+        <div class="input-group-append">
+          <span class="input-group-text">USDT</span>
+        </div>
+      </div>
+      <div>
+        
+        
+      </div>
+      <div class="line-A"></div>
+      
+      <div class="line-A"></div>
+      
+      <div class="line-A"></div>
+      <div class="exchange_button" v-if="tab == 1" style="color: #999;">
+        
+        
+      </div>
       <div class="" v-if="tab == 2">
         <div class="px-2 flex-fill mb-4">
           <button
@@ -281,8 +399,16 @@ export default {
         // 1:限价 2:市价
         type: 2,
         entrust_price: undefined,
+        entrust_price_buy: undefined,
+        entrust_price_sell: undefined,
         amount:"",
-        lever_rate: ""
+        amount_buy:"",
+        amount_sell:"",
+        lever_rate: "",
+        sl_trigger_price_sell:'',//止盈
+        sl_trigger_price_buy:'',//止盈
+        tp_trigger_price_sell:'',//止损
+        tp_trigger_price_buy:'',//止损
       },
         // 最多可开张数
         maxNum: 0,
@@ -296,6 +422,8 @@ export default {
             75:''
         },
         margin:0,
+        margin_buy:0,
+        margin_sell:0,
     };
   },
   props: {
@@ -324,15 +452,22 @@ export default {
   watch: {
     symbol() {
       this.form.entrust_price = undefined;
+      this.form.entrust_price_sell = undefined;
+      this.form.entrust_price_buy = undefined;
       this.contractAccount();
       this.getSymbolDetail();
     },
     defaultPrice(n) {
       this.form.entrust_price = n;
+      this.form.entrust_price_sell = n;
+      this.form.entrust_price_buy = n;
     },
     newPriceObj(n) {
-      if (n && this.form.entrust_price === undefined) {
-        this.form.entrust_price = n.price;
+      if (n && this.form.entrust_price_sell === undefined) {
+        this.form.entrust_price_sell = n.price;
+      }
+      if (n && this.form.entrust_price_buy === undefined) {
+        this.form.entrust_price_buy = n.price;
       }
     },
     contractOpen(n, o) {
@@ -390,9 +525,14 @@ export default {
       if (!item) return 0;
       return item.avail_position;
     },
-    activeStep() {
-      if (!this.form.amount || !this.maxNum) return 0;
-      let num = (this.form.amount / this.maxNum) * 100;
+    activeStep_buy() {
+      if (!this.form.amount_buy || !this.maxNum) return 0;
+      let num = (this.form.amount_buy / this.maxNum) * 100;
+      return num;
+    },
+    activeStep_sell() {
+      if (!this.form.amount_sell || !this.maxNum) return 0;
+      let num = (this.form.amount_sell / this.maxNum) * 100;
       return num;
     },
     // 保证金
@@ -400,13 +540,22 @@ export default {
     //     if (!this.form.lever_rate) return '';
     //     return math.omitTo(this.form.amount*this.unit_amount / this.form.lever_rate, 4);
     // },
-    amount(){
+    amount_buy(){
         console.info(this.form.lever_rate)
-        console.info(this.margin)
-        if (!this.form.lever_rate || !this.margin) return 0;
-        let p=this.margin*this.form.lever_rate;
+        console.info(this.margin_buy)
+        if (!this.form.lever_rate || !this.margin_buy) return 0;
+        let p=this.margin_buy*this.form.lever_rate;
 
-        this.form.amount=p;
+        this.form.amount_buy=p;
+        return p
+    },
+    amount_sell(){
+        console.info(this.form.lever_rate)
+        console.info(this.margin_sell)
+        if (!this.form.lever_rate || !this.margin_sell) return 0;
+        let p=this.margin_sell*this.form.lever_rate;
+
+        this.form.amount_sell=p;
         return p
     }
   },
@@ -455,10 +604,17 @@ export default {
       });
     },
     // 设置数量
-    sliderChange($ev) {
-      this.form.amount = Math.round((this.maxNum * $ev) / 100)||'';
-      console.info(this.form)
-      this.margin=this.form.amount/this.form.lever_rate || 0
+    sliderChange($ev, operate) {
+      
+      if(operate=='sell'){
+        this.form.amount_sell = Math.round((this.maxNum * $ev) / 100)||'';
+        console.info(this.form)
+        this.margin_sell=this.form.amount_sell/this.form.lever_rate || 0
+      }else if (operate == 'buy'){
+        this.form.amount_buy = Math.round((this.maxNum * $ev) / 100)||'';
+        console.info(this.form)
+        this.margin_buy=this.form.amount_buy/this.form.lever_rate || 0
+      }
     },
     // 选择杠杆
     selectLever(idx) {
@@ -508,21 +664,56 @@ export default {
     },
     // 开仓
     openPosition(side) {
+      // side ,1--buy,2--sell
       let data = {
-        side,
-        symbol: this.symbol,
-        ...this.form
+        // side,
+        // symbol: this.symbol,
+        // ...this.form
       };
+      if(side==1){
+        data = {
+          amount: this.form.amount_buy,
+          entrust_price: this.form.entrust_price_buy,
+          lever_rate: this.form.lever_rate,
+          side: 1,
+          symbol: this.symbol,
+          type: this.form.type,
+          sl_trigger_price: this.form.sl_trigger_price_buy,//止盈
+          tp_trigger_price: this.form.tp_trigger_price_buy,//止损
+        }
+      }else if(side==2){
+        data = {
+          amount: this.form.amount_sell,
+          entrust_price: this.form.entrust_price_sell,
+          lever_rate: this.form.lever_rate,
+          side: 2,
+          symbol: this.symbol,
+          type: this.form.type,
+          sl_trigger_price: this.form.sl_trigger_price_sell,//止盈
+          tp_trigger_price: this.form.tp_trigger_price_sell,//止损
+        }
+      }
       if(this.form.type==2){
         // data.entrust_price = this.margin;
         data.entrust_price = this.newPriceObj.price;
-        data.amount = this.amount;
+        if(side==1){
+          data.amount = this.amount_buy;
+        }else if(side==2){
+          data.amount = this.amount_sell;
+        }
+        
       }
       console.log(this.margin, '保证金')
       console.log(data, 111111, this.newPriceObj.price);
       Contract.openPosition(data).then(() => {
         this.contractAccount();
         this.form.amount = 0;
+        this.form.amount_buy = 0;
+        this.form.amount_sell = 0;
+        this.form.sl_trigger_price_sell = 0;//止盈
+        this.form.sl_trigger_price_buy = 0;//止盈
+        this.form.tp_trigger_price_sell = 0;//止损
+        this.form.tp_trigger_price_buy = 0;
         this.$message.success(this.$t("contract.f5"));
         this.$emit("position");
       });
@@ -557,26 +748,76 @@ export default {
     /* /deep/ .el-slider__stop{
         background-color: ;
     } */
-    .markets-pair-list .nav-item.active a{
-      color: #F7D558 !important;
+    .markets-pair-list{
+      padding: 5px 12px;
+    }
+    .content-box{
+      display: flex;
+      align-items: center;
+    }
+    .nav-item{
+      padding: 4px 19px;
+      text-align-last: center;
+      background-color: #FFF;
+      border-radius: 3px;
+      margin-right: 10px;
+      cursor: pointer;
+    }
+    .nav-item.active{
+      background-color: #F7D558;
+    }
+    .nav-item a{
+      color: #333 !important;
     }
     .ex-s-p-c{
       display: flex;
       justify-content: space-between;
       align-items: center;
-      border-top: 1px solid;
       padding: 10px 0px;
     }
-    .ex-s-p-c .content-box{
+    .usable-box-A{
+      color: #666;
+      white-space: nowrap;
+      margin-bottom: 10px;
       display: flex;
-      align-items: center;
+      justify-content: space-between;
     }
     .ex-s-p-c .input-group-a {
       position: relative;
       display: -ms-flexbox;
       display: flex;
-      -ms-flex-align: stretch;
-      align-items: stretch;
+      -ms-flex-align: center;
+      align-items: center;
+      justify-content: space-between;
+      background-color: #fafafa;
+      margin-bottom: 10px;
+    }
+    .form-control{
+      border: none;
+      font-size: 14px;
+      text-align: right;
+      flex: 1;
+      color: #000;
+    }
+    .form-control-A{
+      color: #666;
+      text-align: center;
+      padding: 0px 10px;
+    }
+    .form-control-B{
+      color: #000;
+      text-align: center;
+      padding: 0px 10px;
+    }
+    .btn-success{
+      background-color: #9ED889;
+      background-image: none;
+      padding: 10px;
+    }
+    .btn-danger{
+      background-color: #D5444E;
+      background-image: none;
+      padding: 10px;
     }
     .line-A{
       width: 1px;
diff --git a/src/views/contract/handicap.vue b/src/views/contract/handicap.vue
index 789b6b2..3d61f97 100644
--- a/src/views/contract/handicap.vue
+++ b/src/views/contract/handicap.vue
@@ -2,7 +2,7 @@
   <div class="markets-pair-list handicap bg-plain">
     <div class="nav nav-pills">
       <div class="nav-item" :class="{ active: tab == 1 }">
-        <a class="nav-link" :class="{ active: tab == 1 }" @click="tab = 1">{{
+        <a class="nav-link" @click="tab = 1">{{
           $t("contract.f7")
         }}</a>
       </div>
@@ -32,7 +32,7 @@
             <i class="el-icon-arrow-down"></i>
           </div>
         </div>
-        <div class="label-group d-flex text-secondary fn-12 py-2">
+        <div class="label-group d-flex text-secondary py-2">
           <div class="w-10/24">
             {{ $t("contract.d8") }}
           </div>
@@ -67,8 +67,8 @@
           class="current-nav d-flex border-top align-items-center"
          >
           <div class="w-10/24">
-            <div class="name text-secondary fn-12">{{ $t("contract.g3") }}</div>
-            <div class="num fn-20 increase">
+            <div class="name text-secondary">{{ $t("contract.g3") }}</div>
+            <div class="num fn-28 increase">
               {{ newPriceObj.price }}
               <!-- 最新价 -->
             </div>
@@ -98,9 +98,9 @@
         </div>
       </div>
       <!-- 实时成交 -->
-      <div class="real-time p-3" v-if="tab == 2 || 1" style="height: 235px;overflow: hidden;color: #666;">
+      <div class="real-time p-3" v-if="tab == 2 || 1" style="height: 308px;overflow: hidden;color: #666;">
         <div class="nav-item">{{ $t("contract.f8") }}</div>
-        <div class="d-flex text-secondary fn-12">
+        <div class="d-flex text-secondary">
           <div class="w-10/24">
             {{ $t("contract.b1") }}
           </div>
@@ -109,7 +109,7 @@
             {{ $t("contract.e1") }}({{ $t("contract.e2") }})
           </div>
         </div>
-        <div class="d-flex fn-12" v-for="(item, idx) in tradeList" :key="idx">
+        <div class="d-flex" v-for="(item, idx) in tradeList" :key="idx">
           <div class="w-10/24">
             {{ parseTime(item.ts, false, "{h}:{i}:{s}") }}
           </div>
@@ -268,7 +268,7 @@ export default {
             } else if (sub == this.msg.trade) {
             this.tradeList.unshift(data);
             this.tradeList.pop();
-            console.info(this.tradeList, 2222222)
+            // console.info(this.tradeList, 2222222)
             // this.newPriceObj = data;
             // this.$emit("input", this.newPriceObj);
             } else if (type == "ping" ||cmd == "ping") {
@@ -302,6 +302,6 @@ export default {
 </script>
 <style scoped>
 .nav-item.active a{
-      color: #F7D558 !important;
-    }
+  color: #EBBA65 !important;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/contract/index.vue b/src/views/contract/index.vue
index c10697b..cd75d8e 100644
--- a/src/views/contract/index.vue
+++ b/src/views/contract/index.vue
@@ -7,13 +7,136 @@
 <!--          </el-carousel-item>-->
 <!--        </el-carousel>-->
 <!--    </div>-->
-    <div class="page-top d-flex pt-2">
+    <div class="page-top d-flex pt-3">
       
-      <div class="flex-fill">
+      <div class="flex-fill left-box-A">
         <!-- 左边盒子顶部 -->
+        <div class="top-box-A">
+          <div class="d-flex align-items-center">
+            <div class="coin d-flex align-items-center" v-if="0">
+              <el-popover
+                placement="bottom"
+                ref="popover"
+                width="400"
+                trigger="click"
+              >
+                <div slot="reference">
+                  {{ activeContract.pair_name }}
+                  <el-button size="mini">
+                    <i class="el-icon-arrow-down"></i>
+                  </el-button>
+                </div>
+                <div
+                  class="markets-pair-list"
+                  style="max-height:300px;overflow:auto;"
+                >
+                  <template v-for="parent in contractList">
+                    <div class="px-3 text-primary" :key="parent.coin_name">
+                      {{ parent.coin_name }}
+                    </div>
+                    <table class="table" :key="parent.coin_name + 1">
+                      <thead>
+                        <tr class="text-secondary">
+                          <th class="w-10/24 tr-text">{{ $t("contract.h5") }}</th>
+                          <th class="w-7/24 tr-text">{{ $t("contract.g3") }}</th>
+                          <th class="w-7/24 text-right tr-text">
+                            {{ $t("contract.h6") }}
+                          </th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                          <!-- @click="activeSymbol = item.symbol" -->
+                        <tr
+                          v-for="item in parent.marketInfoList"
+                          :key="item.symbol"
+                          :class="{ active: item.symbol == activeSymbol }"
+                          @click="ispopover1(item.symbol)"
+                        >
+                          <td class="w-10/24 tr-text">
+                            {{ item.symbol }}/{{ parent.coin_name }}
+                          </td>
+                          <td
+                            class="w-7/24 "
+                            :class="item.increase < 0 ? 'decreace' : 'increase'"
+                          >
+                            {{ item.price }}
+                          </td>
+                          <td
+                            class="w-7/24"
+                            :class="item.increase < 0 ? 'decreace' : 'increase'"
+                          >
+                            {{ item.increaseStr }}
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </template>
+                </div>
+              </el-popover>
+            </div>
+            <div class="price px-3 border-right">
+              <div class="item fn-28">{{ activeContract.pair_name }}</div>
+            </div>
+            <div class="d-flex fn-16 px-3 p-l-A align-items-center">
+              <div class="item px-3 min-width-B">
+                <div class="title mb-1" :class="{
+                    decreace: activeContract.increase < 0,
+                    increase: activeContract.increase >= 0
+                  }">
+                  {{ activeContract.price }}
+                </div>
+                <!-- <div>
+                  ${{ activeContract.price }}
+                </div> -->
+              </div>
+              <div class="item px-2 min-width-A">
+                <div class="title mb-1 text-secondary">
+                  {{ $t("contract.h6") }}
+                </div>
+                <div :class="{
+                    decreace: activeContract.increase < 0,
+                    increase: activeContract.increase >= 0
+                  }">
+                  {{ activeContract.increaseStr }}
+                </div>
+              </div>
+            </div>
+            <!-- 币种价值数据 -->
+            <div class="d-flex fn-16">
+              <div class="item px-2 min-width-B">
+                <div class="title mb-1 text-secondary">
+                  24h {{ $t("contract.h7") }}
+                </div>
+                <div>
+                  {{ activeContract.high }}
+                </div>
+              </div>
+              <div class="item px-2 min-width-B">
+                <div class="title mb-1 text-secondary">
+                  24h {{ $t("contract.h8") }}
+                </div>
+                <div>
+                  {{ activeContract.low }}
+                </div>
+              </div>
+              <div class="item px-2 min-width-B">
+                <div class="title mb-1 text-secondary">
+                  24h {{ $t("contract.h9") }}
+          <!-- （{{ $t("contract.e2") }}） -->
+          (USDT)
+                </div>
+                <div>
+                  {{ activeContract.vol }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- <div><theme-change /></div> -->
+        </div>
+        <!-- 左边盒子底部 -->
         <div class="d-flex">
           <!-- 左侧边栏 -->
-          <div>
+          <div class="bottom-box-left">
             <template v-for="parent in contractList">
               <!-- <div class="px-3 text-primary" :key="parent.coin_name">
                 {{ parent.coin_name }}
@@ -21,9 +144,9 @@
               <table class="table" :key="parent.coin_name + 1">
                 <thead>
                   <tr class="text-secondary">
-                    <th class="w-10/24 tr-text">{{ $t("xtzcoins3.c4") }}</th>
-                    <th class="w-7/24 tr-text">{{ $t("contract.g3") }}</th>
-                    <th class="w-7/24 text-right tr-text">
+                    <th class="w-10/24">{{ $t("xtzcoins3.c4") }}</th>
+                    <th class="w-7/24">{{ $t("contract.g3") }}</th>
+                    <th class="w-7/24 text-right">
                       {{ $t("contract.h6") }}
                     </th>
                   </tr>
@@ -46,7 +169,7 @@
                       {{ item.price }}
                     </td>
                     <td
-                      class="w-7/24"
+                      class="w-7/24 text-right"
                       :class="item.increase < 0 ? 'decreace' : 'increase'"
                     >
                       {{ item.increaseStr }}
@@ -57,117 +180,8 @@
             </template>
           </div>
 
-          <!--  -->
-          <div class="kline-box flex-fill mr-2">
-            <!-- K线图上面 -->
-            <div
-              class="coin-change d-flex align-items-center py-2 pl-4 heading justify-content-between"
-            >
-              <div class="d-flex align-items-center">
-                <div class="coin d-flex align-items-center" v-if="0">
-                  <el-popover
-                    placement="bottom"
-                    ref="popover"
-                    width="400"
-                    trigger="click"
-                  >
-                    <div slot="reference">
-                      {{ activeContract.pair_name }}
-                      <el-button size="mini">
-                        <i class="el-icon-arrow-down"></i>
-                      </el-button>
-                    </div>
-                    <div
-                      class="markets-pair-list"
-                      style="max-height:300px;overflow:auto;"
-                    >
-                      <template v-for="parent in contractList">
-                        <div class="px-3 text-primary" :key="parent.coin_name">
-                          {{ parent.coin_name }}
-                        </div>
-                        <table class="table" :key="parent.coin_name + 1">
-                          <thead>
-                            <tr class="text-secondary">
-                              <th class="w-10/24 tr-text">{{ $t("contract.h5") }}</th>
-                              <th class="w-7/24 tr-text">{{ $t("contract.g3") }}</th>
-                              <th class="w-7/24 text-right tr-text">
-                                {{ $t("contract.h6") }}
-                              </th>
-                            </tr>
-                          </thead>
-                          <tbody>
-                              <!-- @click="activeSymbol = item.symbol" -->
-                            <tr
-                              v-for="item in parent.marketInfoList"
-                              :key="item.symbol"
-                              :class="{ active: item.symbol == activeSymbol }"
-                              @click="ispopover1(item.symbol)"
-                            >
-                              <td class="w-10/24 tr-text">
-                                {{ item.symbol }}/{{ parent.coin_name }}
-                              </td>
-                              <td
-                                class="w-7/24 "
-                                :class="item.increase < 0 ? 'decreace' : 'increase'"
-                              >
-                                {{ item.price }}
-                              </td>
-                              <td
-                                class="w-7/24"
-                                :class="item.increase < 0 ? 'decreace' : 'increase'"
-                              >
-                                {{ item.increaseStr }}
-                              </td>
-                            </tr>
-                          </tbody>
-                        </table>
-                      </template>
-                    </div>
-                  </el-popover>
-                </div>
-                <div
-                  class="price px-3 border-right"
-                  :class="{
-                    decreace: activeContract.increase < 0,
-                    increase: activeContract.increase >= 0
-                  }"
-                >
-                  <span class="current">{{ activeContract.price }}$</span>
-                  &nbsp;
-                  <span class="zf">{{ activeContract.increaseStr }}</span>
-                </div>
-                <!-- 币种价值数据 -->
-                <div class="d-flex fn-12">
-                  <div class="item px-2">
-                    <div class="title mb-1 text-secondary">
-                      24h {{ $t("contract.h7") }}
-                    </div>
-                    <div>
-                      {{ activeContract.high }}
-                    </div>
-                  </div>
-                  <div class="item px-2">
-                    <div class="title mb-1 text-secondary">
-                      24h {{ $t("contract.h8") }}
-                    </div>
-                    <div>
-                      {{ activeContract.low }}
-                    </div>
-                  </div>
-                  <div class="item px-2">
-                    <div class="title mb-1 text-secondary">
-                      24h {{ $t("contract.h9") }}
-              <!-- （{{ $t("contract.e2") }}） -->
-              (USDT)
-                    </div>
-                    <div>
-                      {{ activeContract.vol }}
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <!-- <div><theme-change /></div> -->
-            </div>
+          <!-- 右侧图&交易 -->
+          <div class="kline-box flex-fill">
             <!-- K线图 -->
             <kline
               :activeCoin="{ pair_name: activeContract.pair_name }"
@@ -175,20 +189,20 @@
               :contract="true"
               :wsUrl="wsUrl"
             />
-            
+            <!-- 交易 -->
+            <exchange-store
+              :holdPositionList="holdPositionList"
+              :symbol="activeSymbol"
+              :defaultPrice="defaultPrice"
+              :newPriceObj="newPriceObj"
+              :contractOpen="contractOpen"
+              @accountInfo="accountInfo = $event"
+              @position="holdPosition"
+              @getSymbolDetail="symbolDetail=$event"
+            />
           </div>
         </div>
-        <!-- 左边盒子底部交易 -->
-        <exchange-store
-          :holdPositionList="holdPositionList"
-          :symbol="activeSymbol"
-          :defaultPrice="defaultPrice"
-          :newPriceObj="newPriceObj"
-          :contractOpen="contractOpen"
-          @accountInfo="accountInfo = $event"
-          @position="holdPosition"
-          @getSymbolDetail="symbolDetail=$event"
-        />
+        
       </div>
       
       <!-- 盘口 -->
@@ -298,7 +312,7 @@ export default {
             if(val.price){
                 delete contractList.price
             }
-        console.log(contractList, 'co-activeContract----------------')
+        // console.log(contractList, 'co-activeContract----------------')
         return contractList;
     },
     isLogin() {
@@ -445,16 +459,5 @@ export default {
     .increase{
         color: #53b987;
     }
-    .table td{
-      border-top: 1px solid #e7e7e7;
-    }
-    .table tr.active td.tr-text{
-      color: #4387F7 !important;
-    }
-    td.tr-text{
-      color: #578F45 !important;
-    }
-    .table tbody tr{
-      cursor: pointer;
-    }
+    
 </style>
diff --git a/src/views/exchange/book-trades.vue b/src/views/exchange/book-trades.vue
index 858ed1c..2916bc1 100644
--- a/src/views/exchange/book-trades.vue
+++ b/src/views/exchange/book-trades.vue
@@ -1,126 +1,131 @@
 <template>
-<div class="col-md-3">
-    <div class="order-book mb15">
-        <h2 class="heading">{{ $t("exchange.order-book") }}</h2>
-        <table class="table">
-            <thead>
-                <tr style="display:block;">
-                    <th class="w-33">{{ $t("exchange.price") }}({{pair.to}})</th>
-                    <th class="w-33 text-right">{{ $t("exchange.amount") }}
-                        <!-- ({{pair.from}}) -->
-                        ({{pair.to}})
-                    </th>
-                    <th class="w-33 text-right">{{ $t("exchange.total") }}({{pair.from}})</th>
-                </tr>
-            </thead>
-
-            <tbody class="sell-orders" v-if="symbol!='gitpusdt'">
-                <div class="order-item" v-for="item in sellList" :key="item.id">
-                    <el-progress class="progress" type="line" :stroke-width="39" :percentage="getValue(item.amount)" :show-text="false" color="rgba(216,43,43,0.15)" define-back-color="#222e3d">
-                    </el-progress>
-                    <!-- 卖单 使用弹性盒子倒序排列 -->
-                    <tr style="display:block;" class="tb-cells" @click.stop="handleOrder(item.price)">
-                        <td class="w-33 red" title="pick this price to sell">{{ item.price|omitTo(priceDecimals) }}</td>
-                        <td class="w-33 text-right">{{ item.amount|omitTo(qtyDecimals) }}</td>
-                        <td class="w-33 text-right">{{ item.price|multiple(item.amount, priceDecimals) }}</td>
+<div class="col-md-3" style="margin-left: -15px;">
+    <div style="display: flex;flex-direction: column;align-items: end;height: 100%;">
+        <div class="order-book mb15" style="width: 95%;background-color: #fff;">
+            <h2 class="heading">{{ $t("exchange.order-book") }}</h2>
+            <table class="table">
+                <thead>
+                    <tr style="display:block;">
+                        <th class="w-33">{{ $t("exchange.price") }}({{pair.to}})</th>
+                        <th class="w-33 text-right">{{ $t("exchange.amount") }}
+                            <!-- ({{pair.from}}) -->
+                            ({{pair.to}})
+                        </th>
+                        <th class="w-33 text-right">{{ $t("exchange.total") }}({{pair.from}})</th>
                     </tr>
-                </div>
-            </tbody>
-
-            <tbody class="ob-heading">
-                <!-- 最新价 -->
-                <tr style="display:block;" v-if="newTrade">
-                    <td class="w-33">
-                        <span>{{ $t("exchange.last-price") }}</span>
-                        <i :class="newTrade.changeRate > 0 ? 'tri-inc' : 'tri-dec'"></i>
-                        <b :class="newTrade.changeRate > 0 ? 'increase' : 'decreace'">{{ newTrade.price}}</b>
-                    </td>
-                    <td class="w-33 text-right">
-                        <span v-if="langs=='cn'">CNY</span>
-                        <span v-else>$</span>
-                        <!-- ≈ {{omitTo(newTrade.price*price_cny)}} -->
-                        <span v-if="langs=='cn'">≈ {{newTrade.price*priceCny|omitTo(2)}}</span>
-                        <span v-else>≈ {{newTrade.price|omitTo(2)}}</span>
-                    </td>
-                    <td class="w-33 text-right" :class="changeRate.startsWith('+') ? 'increase' : 'decreace'">
-                        <span>{{ $t("exchange.change") }}</span>
-                        {{ changeRate }}
-                    </td>
-                </tr>
-                <tr style="display:block;" v-else>
-                    <td class="w-33"><span>{{ $t("exchange.last-price") }}</span> -</td>
-                    <td class="w-33 text-right">
-                        <span>CNY</span> -
-                    </td>
-                    <td class="w-33 text-right"><span>{{ $t("exchange.change") }}</span> -</td>
-                </tr>
-            </tbody>
-
-            <tbody class="buy-orders"  :style="[{'height':symbol!='gitpusdt'?'':'470px!important'}]">
-                <!-- 买单 反序数值 -->
-                <div class="order-item" v-for="item in reversed" :key="item.id">
-                    <el-progress class="progress" type="line" :stroke-width="39" :percentage="getValue(item.amount)" :show-text="false" color="rgba(37, 188, 103, 0.15)" define-back-color="#222e3d">
-                    </el-progress>
-                    <!-- 卖单 使用弹性盒子倒序排列 -->
-                    <tr style="display:block;" class="tb-cells" @click.stop="handleOrder(item.price)">
-                        <td class="w-33 green" title="pick this price to buy">{{ item.price|omitTo(priceDecimals) }}</td>
-                        <td class="w-33 text-right">{{ item.amount|omitTo(qtyDecimals) }}</td>
-                        <td class="w-33 text-right">{{ item.price|multiple(item.amount, priceDecimals) }}</td>
-                    </tr>
-                </div>
-
-            </tbody>
-        </table>
-    </div>
-    <div class="market-history">
-        <ul class="nav nav-pills" role="tablist">
-            <li class="nav-item">
-                <a class="nav-link active" data-toggle="pill" href="#recent-trades" role="tab" aria-selected="true">
-                    {{ $t("exchange.recent-trades") }}
-                </a>
-            </li>
-            <!-- <li class="nav-item">
-                <a class="nav-link" data-toggle="pill" href="#market-depth" role="tab" aria-selected="false">Market
-                    Depth</a>
-            </li> -->
-        </ul>
-        <div class="tab-content">
-            <div class="tab-pane fade show active" id="recent-trades" role="tabpanel">
-                <table class="table trade-list">
-                    <thead>
-                        <tr>
-                            <th style="display:block;width:100%">
-                                <div class="w-33">
-                                    {{ $t("exchange.price") }}({{pair.to}})
-                                </div>
-                                <div class="w-33 text-right">
-                                    {{ $t("exchange.amount") }}({{pair.from}})
-                                </div>
-                                <div class="w-33 text-right">
-                                    {{ $t("exchange.time") }}
-                                </div>
-                            </th>
+                </thead>
+
+                <tbody class="sell-orders" v-if="symbol!='gitpusdt'">
+                    <div class="order-item" v-for="item in sellList" :key="item.id">
+                        <el-progress class="progress" type="line" :stroke-width="39" :percentage="getValue(item.amount)" :show-text="false" color="rgba(216,43,43,0.15)" define-back-color="#222e3d">
+                        </el-progress>
+                        <!-- 卖单 使用弹性盒子倒序排列 -->
+                        <tr style="display:block;" class="tb-cells" @click.stop="handleOrder(item.price)">
+                            <td class="w-33 red" title="pick this price to sell">{{ item.price|omitTo(priceDecimals) }}</td>
+                            <td class="w-33 text-right">{{ item.amount|omitTo(qtyDecimals) }}</td>
+                            <td class="w-33 text-right">{{ item.price|multiple(item.amount, priceDecimals) }}</td>
                         </tr>
-                    </thead>
-                    <tbody>
-                        <tr v-for="(item, index) in tradeList" :key="index">
-                            <td style="display:block;width:100%">
-                                <div class="w-33" :style="{color : item.color}">{{ item.price }}</div>
-                                <div class="w-33 text-right" style="color: #666;">{{ item.amount }}</div>
-                                <div class="w-33 text-right" style="color: #666;">{{ item.time }}</div>
-                            </td>
+                    </div>
+                </tbody>
+
+                <tbody class="ob-heading">
+                    <!-- 最新价 -->
+                    <tr style="display:block;" v-if="newTrade">
+                        <td class="w-33">
+                            <span>{{ $t("exchange.last-price") }}</span>
+                            <i :class="activeContract.increase > 0 ? 'tri-inc' : 'tri-dec'"></i>
+                            <b :class="activeContract.increase > 0 ? 'increase' : 'decreace'">
+                                <!-- {{ newTrade.price}} -->
+                                {{ activeContract.price }}
+                            </b>
+                        </td>
+                        <td class="w-33 text-right">
+                            <span v-if="langs=='cn'">CNY</span>
+                            <span v-else>$</span>
+                            <!-- ≈ {{omitTo(newTrade.price*price_cny)}} -->
+                            <span v-if="langs=='cn'">≈ {{activeContract.price*priceCny|omitTo(2)}}</span>
+                            <span v-else>≈ {{ activeContract.price|omitTo(2) }}</span>
+                        </td>
+                        <td class="w-33 text-right" :class="activeContract.increaseStr.startsWith('+') ? 'increase' : 'decreace'">
+                            <span>{{ $t("exchange.change") }}</span>
+                            {{ activeContract.increaseStr }}
+                        </td>
+                    </tr>
+                    <tr style="display:block;" v-else>
+                        <td class="w-33"><span>{{ $t("exchange.last-price") }}</span> -</td>
+                        <td class="w-33 text-right">
+                            <span>CNY</span> -
+                        </td>
+                        <td class="w-33 text-right"><span>{{ $t("exchange.change") }}</span> -</td>
+                    </tr>
+                </tbody>
+
+                <tbody class="buy-orders"  :style="[{'height':symbol!='gitpusdt'?'':'470px!important'}]">
+                    <!-- 买单 反序数值 -->
+                    <div class="order-item" v-for="item in reversed" :key="item.id">
+                        <el-progress class="progress" type="line" :stroke-width="39" :percentage="getValue(item.amount)" :show-text="false" color="rgba(37, 188, 103, 0.15)" define-back-color="#222e3d">
+                        </el-progress>
+                        <!-- 卖单 使用弹性盒子倒序排列 -->
+                        <tr style="display:block;" class="tb-cells" @click.stop="handleOrder(item.price)">
+                            <td class="w-33 green" title="pick this price to buy">{{ item.price|omitTo(priceDecimals) }}</td>
+                            <td class="w-33 text-right">{{ item.amount|omitTo(qtyDecimals) }}</td>
+                            <td class="w-33 text-right">{{ item.price|multiple(item.amount, priceDecimals) }}</td>
                         </tr>
-
-                    </tbody>
-                </table>
-            </div>
-            <!-- <div class="tab-pane fade" id="market-depth" role="tabpanel">
-                <div class="depth-chart-container">
-                    <div class="depth-chart-inner">
-                        <div id="lightDepthChart"></div>
                     </div>
+
+                </tbody>
+            </table>
+        </div>
+        <div class="market-history" style="width: 95%;background-color: #fff;">
+            <ul class="nav nav-pills" role="tablist">
+                <li class="nav-item">
+                    <a class="nav-link active" data-toggle="pill" href="#recent-trades" role="tab" aria-selected="true">
+                        {{ $t("exchange.recent-trades") }}
+                    </a>
+                </li>
+                <!-- <li class="nav-item">
+                    <a class="nav-link" data-toggle="pill" href="#market-depth" role="tab" aria-selected="false">Market
+                        Depth</a>
+                </li> -->
+            </ul>
+            <div class="tab-content">
+                <div class="tab-pane fade show active" id="recent-trades" role="tabpanel">
+                    <table class="table trade-list">
+                        <thead>
+                            <tr>
+                                <th style="display:block;width:100%">
+                                    <div class="w-33">
+                                        {{ $t("exchange.price") }}({{pair.to}})
+                                    </div>
+                                    <div class="w-33 text-right">
+                                        {{ $t("exchange.amount") }}({{pair.from}})
+                                    </div>
+                                    <div class="w-33 text-right">
+                                        {{ $t("exchange.time") }}
+                                    </div>
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr v-for="(item, index) in tradeList" :key="index">
+                                <td style="display:block;width:100%">
+                                    <div class="w-33" :style="{color : item.color}">{{ item.price }}</div>
+                                    <div class="w-33 text-right" style="color: #666;">{{ item.amount }}</div>
+                                    <div class="w-33 text-right" style="color: #666;">{{ item.time }}</div>
+                                </td>
+                            </tr>
+
+                        </tbody>
+                    </table>
                 </div>
-            </div> -->
+                <!-- <div class="tab-pane fade" id="market-depth" role="tabpanel">
+                    <div class="depth-chart-container">
+                        <div class="depth-chart-inner">
+                            <div id="lightDepthChart"></div>
+                        </div>
+                    </div>
+                </div> -->
+            </div>
         </div>
     </div>
 </div>
@@ -134,7 +139,7 @@ export default {
 
     // props : ["priceDecimals", "qtyDecimals"],
     props:[
-        'priceCny'
+        'priceCny','activeContract'
     ],
     data() {
         return this.$parent;
@@ -365,7 +370,7 @@ export default {
 
 .trade-list {
     tbody {
-        height: 279px;
+        height: 365px;
 
         tr {
 
@@ -398,13 +403,13 @@ export default {
 }
 .order-item{
     color: #666;
-    background-color: #f5f5f5!important;
+    background-color: #fff!important;
 }
 .order-item tr{
-    background-color: #f5f5f5!important;
+    background-color: #fff!important;
 }
 .order-item tr td{
-    background-color: #f5f5f5!important;
+    background-color: #fff!important;
 }
 .ob-heading{
     border: 1px solid #e0e0e0;
diff --git a/src/views/exchange/index.vue b/src/views/exchange/index.vue
index e78e579..60c8b71 100644
--- a/src/views/exchange/index.vue
+++ b/src/views/exchange/index.vue
@@ -7,17 +7,83 @@
 <!--          </el-carousel-item>-->
 <!--        </el-carousel>-->
 <!--    </div>-->
-    <div class="container-fluid no-fluid" style="background-color: #f5f5f5;padding: 15px 0px;">
+    <div class="container-fluid no-fluid" style="background-color: #f5f5f5;padding: 15px 15px;">
         <div class="row sm-gutters">
 
-            <!-- symbols -->
-            <symbols :marketList="marketList" :marketId="marketId" :isLogin="isLogin" :symbol.sync="symbol"></symbols>
-
-            <!-- kline  -->
-            <make-deal :isLogin="isLogin" :pair="pair" :socket="ws.socket" :symbol="symbol" :buyorder="buyorder" :sellorder="sellorder" :fromBalance="fromBalance" :toBalance="toBalance" :newTrade="newTrade" :minQty="minQty" :minTotal="minTotal" :priceDecimals="priceDecimals" :qtyDecimals="qtyDecimals" @update="update"></make-deal>
+            <div class="col-md-9" style="padding-right:0px!important;margin-right: 15px;">
+                <div class="row">
+                    <div class="col-md-12" style="padding-right: 0px!important;">
+                        <div class="px-4 py-3 heading">
+                            <div class="d-flex align-items-center">
+                                <div class="price px-3 border-right">
+                                    <div class="item fn-28">{{ activeContract.pair_name }}</div>
+                                </div>
+                                <div class="d-flex fn-16 px-3 p-l-A align-items-center">
+                                    <div class="item px-3 min-width-B">
+                                        <div class="title mb-1" :class="{
+                                            decreace: activeContract.increase < 0,
+                                            increase: activeContract.increase >= 0
+                                        }">
+                                        {{ activeContract.price }}
+                                        </div>
+                                        <!-- <div>
+                                        ${{ activeContract.price }}
+                                        </div> -->
+                                    </div>
+                                    <div class="item px-2 min-width-A">
+                                        <div class="title mb-1 text-secondary">
+                                        {{ $t("contract.h6") }}
+                                        </div>
+                                        <div :class="{
+                                            decreace: activeContract.increase < 0,
+                                            increase: activeContract.increase >= 0
+                                        }">
+                                        {{ activeContract.increaseStr }}
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- 币种价值数据 -->
+                                <div class="d-flex fn-16">
+                                    <div class="item px-2 min-width-B">
+                                        <div class="title mb-1 text-secondary">
+                                        24h {{ $t("contract.h7") }}
+                                        </div>
+                                        <div>
+                                        {{ activeContract.high }}
+                                        </div>
+                                    </div>
+                                    <div class="item px-2 min-width-B">
+                                        <div class="title mb-1 text-secondary">
+                                        24h {{ $t("contract.h8") }}
+                                        </div>
+                                        <div>
+                                        {{ activeContract.low }}
+                                        </div>
+                                    </div>
+                                    <div class="item px-2 min-width-B">
+                                        <div class="title mb-1 text-secondary">
+                                        24h {{ $t("contract.h9") }}
+                                        <!-- （{{ $t("contract.e2") }}） -->
+                                        (USDT)
+                                        </div>
+                                        <div>
+                                        {{ activeContract.vol }}
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- symbols -->
+                    <symbols :marketList="marketList" :marketId="marketId" :isLogin="isLogin" :symbol.sync="symbol"></symbols>
+
+                    <!-- kline  -->
+                    <make-deal :isLogin="isLogin" :pair="pair" :socket="ws.socket" :symbol="symbol" :buyorder="buyorder" :sellorder="sellorder" :fromBalance="fromBalance" :toBalance="toBalance" :newTrade="newTrade" :minQty="minQty" :minTotal="minTotal" :priceDecimals="priceDecimals" :qtyDecimals="qtyDecimals" @update="update"></make-deal>
+                </div>
+            </div>
 
             <!-- order book -->
-            <book-trades :priceCny="price_cny"></book-trades>
+            <book-trades :priceCny="price_cny" :activeContract="activeContract"></book-trades>
 
             <!-- market news  -->
             <!-- <market-news></market-news> -->
@@ -125,7 +191,9 @@ export default {
             transPwdEnabled: false,
 
             currentTab: "opens", // orders显示的tab
-            price_cny:0
+            price_cny:0,
+            activeContract:{},
+            ws: new Socket(this.Globals.Server.Path.WS1),
         }
 
     },
@@ -247,6 +315,9 @@ export default {
             }, {
                 cmd: 'sub',
                 msg: `tradeList_${this.symbol}`
+            }, {
+                cmd: 'sub',
+                msg: `swapMarketList`
             }]);
 
         },
@@ -266,6 +337,9 @@ export default {
             }, {
                 cmd: 'unsub',
                 msg: `tradeList_${symbol}`
+            }, {
+                cmd: 'sub',
+                msg: `swapMarketList`
             }]);
 
         },
@@ -291,6 +365,7 @@ export default {
 
                         // 创建marketId
                         this.marketId = market.pair_id;
+                        // console.log(this.marketId, 'marketId-p--------')
 
                         // 写入market信息
                         this.marketInfo = market;
@@ -422,6 +497,7 @@ export default {
                 this.initMarket();
                 // 如果指定了id 订阅该行情的所有其他信息
                 if (this.symbol) this.addSub();
+                // this.getSwapMarketList();
             })
 
             this.ws.on("message", (response) => {
@@ -438,11 +514,10 @@ export default {
                 if (type == "ping") this.ws.send({
                     type: "pong"
                 });
-
                 switch (sub) {
 
                     case "exchangeMarketList":
-
+                        console.log(data,'----000---')
                         this.marketList = data;
                         // console.log(this.marketList[0].marketInfoList[0].close, '0000------------')
 
@@ -452,6 +527,13 @@ export default {
                             this.findMarketBySymbol();
                         }
 
+                        this.activeContract = data
+                        .map(item => item.marketInfoList)
+                        .flat()
+                        .find(item => {
+                            return item.pair_name.replace('/', '').toLowerCase() == this.symbol
+                        });
+                        console.log(this.activeContract, this.activeContract.close, '122222--------', this.symbol+'symbol')
                         break;
 
                     case `buyList_${this.symbol}`:
@@ -474,6 +556,19 @@ export default {
                         this.newTrade = _.nth(this.trade);
                         if (this.newTrade && this.newTrade.buy_user_id === this.userInfo.user_id || this.newTrade.sell_user_id == this.userInfo.user_id) this.update();
                         break;
+                    case `swapMarketList`:
+                        // 这个读不到
+                        if( data.symbol=='BTC' )(data.price).toFixed(1)
+                        let listA = data;
+                        let listB = listA
+                        .map(item => item.marketInfoList)
+                        .flat()
+                        .find(item => {
+                            return item.pair_name.replace('/', '').toLowerCase() == this.symbol
+                        });
+                        this.activeContract = listB || {};
+                        console.log(this.symbol, this.activeContract, 'ex-activeContract----------------')
+                        break;
                 }
             });
 
@@ -489,6 +584,38 @@ export default {
                 // this.indexList()
 
             });
+        },
+        getSwapMarketList(){
+            let msg = "swapMarketList";
+            this.ws.send({
+                cmd: "sub",
+                msg: msg
+            });
+            this.ws.on("message", res => {
+                let { data, sub,cmd } = res;
+                console.log(data, sub,cmd, '000000000000000')
+                if (sub == msg) {
+                    if( data.symbol=='BTC' )(data.price).toFixed(1)
+                    let listA = data;
+                    let listB = listA
+                    .map(item => item.marketInfoList)
+                    .flat()
+                    .find(item => {
+                        return item.pair_name.replace('/', '').toLowerCase() == this.symbol
+                    });
+                    this.activeContract = listB || {};
+                    console.log(this.symbol, this.activeContract, 'ex-activeContract----------------')
+                }else if (cmd == "ping") {
+                this.ws.send({
+                    cmd: "pong"
+                });
+                }
+            });
+            this.ws.on('close',()=>{
+                this.ws= new Socket(this.Globals.Server.Path.WS1),
+                console.log('链接关闭');
+                this.wsOpen();
+            })
         }
     },
 
@@ -506,6 +633,25 @@ export default {
 }
 </script>
 
-<style>
-
+<style scoped>
+.heading{
+    color: #333;
+    border: 1px solid #e5e5e5;
+    margin-bottom:10px;
+    background-color:#fff;
+}
+.p-l-A{
+    padding-left: 2rem!important;
+}
+.fn-28{
+    font-weight: bold;
+    padding-right: 1rem;
+    color: #444;
+}
+.min-width-A{
+    min-width: 120px;
+}
+.min-width-B{
+    min-width: 160px;
+}
 </style>
diff --git a/src/views/exchange/make-deal.vue b/src/views/exchange/make-deal.vue
index 7dc27c7..6aca7d4 100644
--- a/src/views/exchange/make-deal.vue
+++ b/src/views/exchange/make-deal.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="col-md-6">
+<div class="col-md-8" style="background-color: #fff;padding:0px !important;">
     <div class="px-4 py-2 heading">
          <!-- <theme-change/> -->
          <el-tooltip placement="bottom" effect="light">
@@ -58,50 +58,7 @@
         </el-tooltip>
 
     </div>
-    <div class="px-4 py-2 heading" style="border: 1px solid #e5e5e5;margin-bottom:10px;">
-        <div class="coin-change d-flex align-items-center py-2 pl-4 heading justify-content-between">
-          <div class="d-flex align-items-center">
-            <!-- <div
-              class="price px-3 border-right"
-              :class="{
-                decreace: activeContract.increase < 0,
-                increase: activeContract.increase >= 0
-              }"
-            >
-              <span class="current">{{ activeContract.price }}$</span>
-              &nbsp;
-              <span class="zf">{{ activeContract.increaseStr }}</span>
-            </div> -->
-            <!-- 币种价值数据 -->
-            <div class="d-flex fn-12">
-                <div class="title mb-1 text-secondary px-2">
-                  <!-- 24h {{ $t("contract.h7") }} -->
-                  24h {{ $t("option.zf") }}
-                </div>
-                <div class="px-3" :class="{
-                    decreace: activeContract.increase < 0,
-                    increase: activeContract.increase >= 0
-                    }">
-                   <!-- {{ activeContract.high }} -->
-                   {{ activeContract.increaseStr }}
-                </div>
-                <div class="title mb-1 text-secondary px-2">
-                    24h {{ $t("contract.h8") }}
-                </div>
-                <div class="px-3">
-                    {{ activeContract.low }}
-                </div>
-                <div class="title mb-1 text-secondary px-2">
-                  24h {{ $t("contract.h9") }}
-				  (USDT)
-                </div>
-                <div class="decreace px-3">
-                  {{ activeContract.vol }}
-                </div>
-            </div>
-          </div>
-        </div>
-    </div>
+    
     <!-- 生成K线图 -->
     <k-line :symbol="symbol" :socket="socket" :priceDecimals="priceDecimals"></k-line>
 
@@ -383,8 +340,6 @@ export default {
             //
             buyPercentIndex: null,
             sellPercentIndex: null,
-            activeContract:{},
-            ws: new Socket(this.Globals.Server.Path.WS1),
         }
     },
 
@@ -753,46 +708,12 @@ export default {
             // 返回验证结果
             return flag;
         },
-        getSwapMarketList(){
-            let msg = "swapMarketList";
-            this.ws.send({
-                cmd: "sub",
-                msg: msg
-            });
-            this.ws.on("message", res => {
-                let { data, sub,cmd } = res;
-                if (sub == msg) {
-                    if( data.symbol=='BTC' )(data.price).toFixed(1)
-                    let listA = data;
-                    let listB = listA
-                    .map(item => item.marketInfoList)
-                    .flat()
-                    .find(item => {
-                        return item.pair_name.replace('/', '').toLowerCase() == this.symbol
-                    });
-                    this.activeContract = listB || {};
-                    // console.log(this.symbol, this.activeContract, 'ex-activeContract----------------')
-                }else if (cmd == "ping") {
-                this.ws.send({
-                    cmd: "pong"
-                });
-                }
-            });
-            this.ws.on('close',()=>{
-                this.ws= new Socket(this.Globals.Server.Path.WS1),
-                console.log('链接关闭');
-                this.wsOpen();
-            })
-        }
+        
     },
 
     created() {
         this.getCoinInfo()
         this.reset();
-        this.ws.on("open", () => {
-            this.getSwapMarketList();
-        });
-        // this.getSwapMarketList();
     },
 
 }
diff --git a/src/views/exchange/order-list.vue b/src/views/exchange/order-list.vue
index 3212778..51efe31 100644
--- a/src/views/exchange/order-list.vue
+++ b/src/views/exchange/order-list.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="col-md-9">
+<div class="col-md-12">
     <div class="exchange-history order-history market-order mt15">
         <ul class="nav nav-pills" role="tablist">
             <li class="nav-item" @click="toggle('opens')">
@@ -279,8 +279,9 @@ export default {
 
 <style lang="scss">
 .exchange-history {
+    background-color: #fff;
     .nav {
-        background: #f5f9fc;
+        // background: #f5f9fc;
     }
 
     .nav-link.active {
diff --git a/src/views/exchange/symbols.vue b/src/views/exchange/symbols.vue
index bb5eb32..ff45a5c 100644
--- a/src/views/exchange/symbols.vue
+++ b/src/views/exchange/symbols.vue
@@ -1,9 +1,9 @@
 <template>
-<div class="col-md-3">
+<div class="col-md-4">
     <div class="market-pairs">
 
         <!-- 搜索框区域 -->
-        <div class="input-group">
+        <div class="input-group" v-if="0">
             <div class="input-group-prepend">
                 <span class="input-group-text" id="inputGroup-sizing-sm">
                     <i class="icon ion-md-search"></i>
@@ -44,7 +44,7 @@
 
                     <tbody>
                         <tr style="display:block" :class="{highlight : item.pair_id == marketId}" @click="$emit('update:symbol', item.symbol)" v-for="(item, key) in coin.marketInfoList" :key="key" v-show="isShow(item)">
-                            <td class="w-33" style="white-space:nowrap">
+                            <td class="w-33" style="white-space:nowrap;color: #000;">
                                 <i class="icon ion-md-star h6" :class="{ active: isCoolect(item) }" @click.self="handleFav(item)"></i>
                                 {{ coin.coin_name == 'fav' ? item.pair_name : item.coin_name + '/' + coin.coin_name}}
                             </td>
@@ -90,7 +90,7 @@ export default {
             default: false,
         },
 
-        marketId: {
+        marketId: {// 对子的id
             type: Number,
             default: null,
         },
@@ -231,13 +231,16 @@ export default {
 </script>
 
 <style lang="scss">
+.market-pairs{
+    background-color: #fff;
+    height: 100%;
+}
 .highlight {
-    background: #f6f8f9;
-    background: #F8F8FF;
+    background: #F8F8FD;
 
-    td:first-child {
-        color: #007bff !important;
-    }
+    // td:first-child {
+    //     color: #007bff !important;
+    // }
 }
 
 .w-33 {
@@ -255,6 +258,9 @@ tbody tr{
     color: green;
 }
 .table td, .table th {
-    border-top: 1px solid #e0e0e0;
+    border-top: 1px solid #eee;
+}
+.table tr.active{
+    background-color: #F8F8FD;
 }
 </style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index c1b6814..e6c5558 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -465,7 +465,7 @@
           </div>
         </div>
         <div style="width:25%;text-align: right;">
-          <div class="th">{{ $t("xtzcoins3.a12") }}</div>
+          <div class="th">{{ $t("xtzcoins3.c3") }}</div>
           <div class="td" v-for="(item, index) in brokenLine" :key="index">{{item.vol}}</div>
         </div>
       </div>
diff --git a/src/views/option/kline.vue b/src/views/option/kline.vue
index b7c48d9..9a51e98 100644
--- a/src/views/option/kline.vue
+++ b/src/views/option/kline.vue
@@ -322,8 +322,7 @@ methods: {
         let Tdata = new VDatafeed(this);
         let widget=(_this.TView = new TradingView.widget({
             width: "100%",
-            // height: 590,
-            height: 800,
+            height: 610,//合约页面K线图的宽高设置
             interval: _this.timer,
             // timezone: "Asia/Shanghai",
             timezone: "America/Toronto",