From d2c1c3751ad352098ffe1f31e0b1977d02bc6762 Mon Sep 17 00:00:00 2001
From: testadmin <dev@example.com>
Date: Tue, 28 Apr 2026 20:33:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=90=88=E7=BA=A6=E4=BA=A4=E6=98=93?=
 =?UTF-8?q?=E6=94=B9=E9=80=A0=20=E2=80=94=20=E6=9D=A0=E6=9D=86=E9=BB=98?=
 =?UTF-8?q?=E8=AE=A410X+USDC=E9=87=91=E9=A2=9D=E4=B8=8B=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/view/lever/leverList.vue         |  614 +++++++
 src/view/lever/leverRecord.vue       |  110 ++
 src/view/lever/lever_entrust.vue     |  213 +++
 src/view/lever/lever_exchange.vue    |  393 +++++
 src/view/lever/lever_hisentrust.vue  |  168 ++
 src/view/lever/lever_market.vue      |  254 +++
 src/view/lever/lever_noticeList.vue  |  156 ++
 src/view/lever/lever_trade.vue       | 2372 ++++++++++++++++++++++++++
 src/view/lever/lever_transaction.vue |  224 +++
 src/view/lever/transferRecord.vue    |  109 ++
 10 files changed, 4613 insertions(+)
 create mode 100644 src/view/lever/leverList.vue
 create mode 100644 src/view/lever/leverRecord.vue
 create mode 100644 src/view/lever/lever_entrust.vue
 create mode 100644 src/view/lever/lever_exchange.vue
 create mode 100644 src/view/lever/lever_hisentrust.vue
 create mode 100644 src/view/lever/lever_market.vue
 create mode 100644 src/view/lever/lever_noticeList.vue
 create mode 100644 src/view/lever/lever_trade.vue
 create mode 100644 src/view/lever/lever_transaction.vue
 create mode 100644 src/view/lever/transferRecord.vue

diff --git a/src/view/lever/leverList.vue b/src/view/lever/leverList.vue
new file mode 100644
index 0000000..b073ed7
--- /dev/null
+++ b/src/view/lever/leverList.vue
@@ -0,0 +1,614 @@
+<template>
+	<div class="wrap">
+		<div class="tab-header">
+        <span :class="[{'active':status == 1}]" @click="tabClick(1)">{{$t('lever.tdin')}}</span>
+        <span :class="[{'active':status == 0}]" @click="tabClick(0)">{{$t('lever.listin')}}</span>
+        <!-- <span :class="[{'active':status == 2}]" @click="tabClick(2)">平仓中</span> -->
+        <span :class="[{'active':status == 3}]" @click="tabClick(3)">{{$t('lever.closed')}}</span>
+        <span :class="[{'active':status == 4}]" @click="tabClick(4)">{{$t('lever.revoked')}}</span>
+      </div>
+
+      <ul class="list_head ft14">
+        <li class="flex">
+          <span class="width2">{{$t('lever.type')}}</span>
+          <span class="width1" v-if="status == 0 || status == 4">{{$t('lever.entrustPrice')}}</span>
+          <span class="width1" v-else>{{$t('lever.openPrice')}}</span>
+          <span class="width1">{{$t('lever.nowPrice')}}</span>
+          <span class="width1">{{$t('lever.styPrice')}}</span>
+          <span class="width1">{{$t('lever.stsPrice')}}</span>
+          <span class="width1">{{$t('lever.bail')}}</span>
+          <span class="width1">{{$t('lever.canBail')}}</span>
+          <span class="width2">{{$t('lever.openTime')}}</span>
+          <span class="width2" v-if="status == 3">{{$t('lever.closeTime')}}</span>
+          <span class="width1">{{$t('lever.rate')}}</span>
+          <span class="width1">{{$t('lever.nightFee')}}</span>
+          <span class="width1">{{$t('lever.loss')}}</span>
+          <!-- <span class="width1">{{$t('fat.status')}}</span> -->
+          <span class="width1" v-if="status == 0 || status == 1">{{$t('td.do')}}</span>
+        </li>
+      </ul>
+      <ul class="list_content ft12">
+        <li v-for="(item,index) in list_content" :key="index" class="flex alcenter center">
+          <span
+            class="width2"
+          >{{item.type == 1? $t('td.buyin'):$t('td.sellout')}} {{item.symbol}} x{{item.share}}(No.{{item.id}})</span>
+          <span
+            class="width1"
+            v-if="status == 0 || status == 4"
+          >{{item.origin_price || '0.00' | numFilters(4)}}</span>
+          <span class="width1" v-else>{{item.price || '0.00' | numFilters(4)}}</span>
+          <span class="width1">{{item.update_price || '0.00' | numFilters(4)}}</span>
+          <span class="width1">{{item.target_profit_price || '0.00' | numFilters(4)}}</span>
+          <span class="width1">{{item.stop_loss_price || '0.00' | numFilters(4)}}</span>
+          <span class="width1">{{item.origin_caution_money || '0.00' | numFilters(4)}}</span>
+          <span class="width1">{{item.caution_money || '0.00' | numFilters(4)}}</span>
+          <span class="width2">{{item.transaction_time}}</span>
+          <span class="width2" v-if="status == 3">{{item.handle_time}}</span>
+          <span class="width1">{{item.trade_fee || '0.00' | numFilters(4)}}</span>
+          <span class="width1">{{item.overnight_money || '0.00' | numFilters(4)}}</span>
+          <span
+            class="width1"
+            :class="item.profits > 0?'greenColor':'redColor'"
+          >{{item.profits || '0.00' | numFilters(4)}}</span>
+          <!-- <span class="width1">{{item.status_name}}</span> -->
+          <div class="width1 btns tr" v-if="status == 0 || status == 1">
+            <button type="button" v-if="status == 0" @click="cannelOrder(item.id)">{{$t('lever.revoke')}}</button>
+            <button type="button" v-if="status == 1" @click="closePosition(item.id)">{{$t('lever.ping')}}</button>
+          </div>
+        </li>
+      </ul>
+      <!-- <div class="mores" @click="load_more">
+        <img v-if="list_content.length == 0" src="../../assets/images/nodata.png" alt>
+        <span>{{more}}</span>
+      </div>-->
+      <!-- 分页 -->
+      <el-pagination
+        class="mores"
+        v-if="total>10"
+        layout="prev, pager, next"
+        :total="total"
+        @current-change="handleCurrentChange"
+      ></el-pagination>
+	</div>
+</template>
+<script>
+	export default {
+//components: { indexHeader, indexFooter },
+filters: {
+    numFilters: function (value) {
+      if (!value) {
+        return '0.0000'
+      }
+//    value = toString()
+      return value.slice(0) + ' '
+    }
+  },
+  data() {
+    return {
+      legal_id: "",
+      currency_id: "",
+      list_content: [],
+      page: 1,
+      more: "加载更多",
+      status: 1,
+      flag: true,
+      total: "",
+      skins: localStorage.getItem("skin") || "days"
+    };
+  },
+  created() {
+    let that = this;
+    // that.legal_id = localStorage.getItem("legal_id");
+    // that.currency_id = localStorage.getItem("currency_id");
+    that.init();
+    if (that.status == 0 || that.status == 1) {
+      that.polling();
+    }
+  },
+  beforeCreate() {
+    document
+      .querySelector("html")
+      .setAttribute("style", "background-color:#f7f7f7;");
+  },
+  beforeDestroy() {
+    document.querySelector("html").removeAttribute("style");
+  },
+  methods: {
+    init() {
+      let that = this;
+      that.more = that.$t('lever.loading');
+      if (that.flag) {
+        var i = layer.load();
+        this.$http({
+          url: "/api/" + "lever/my_trade",
+          method: "post",
+          data: {
+            status: that.status,
+            legal_id: that.legal_id,
+            currency_id: that.currency_id,
+            page: that.page
+          },
+          headers: { Authorization: localStorage.getItem("token") }
+        })
+          .then(res => {
+            layer.close(i);
+            that.flag = true;
+            if (res.data.type == "ok") {
+              that.more = that.$t('td.more');
+              // if (that.page == 1) {
+              that.list_content = res.data.message.message.data;
+              that.total = res.data.message.message.total;
+            } else {
+              // layer.msg(res.data.message);
+            }
+          })
+          .catch(error => {
+            console.log(error);
+          });
+      }
+    },
+
+    // 轮询数据
+    polling() {
+      let that = this;
+      that.$socket.emit("login", localStorage.getItem("user_id"));
+      that.$socket.on("lever_trade", msg => {
+        if (msg.type == "lever_trade") {
+          if (that.status == 0) {
+            var datas = JSON.parse(msg.trades_entrust);
+            that.list_content = datas;
+          } else if (that.status == 1) {
+            let datas = JSON.parse(msg.trades_all);
+            that.list_content = datas;
+          }
+        }
+      });
+    },
+    // // 加载更多
+    // load_more() {
+    //   this.page++;
+    //   this.init();
+    //   that.flag = false;
+    // },
+    // 分页
+    handleCurrentChange(val) {
+      var that = this;
+      that.page = val;
+      that.init();
+    },
+    // 状态切换
+    tabClick(type) {
+      let that = this;
+      that.status = type;
+      that.list_content = [];
+      that.page = 1;
+      that.init();
+      that.flag = false;
+      if (type == 0 || type == 1) {
+        that.polling();
+      }
+    },
+    // 平仓
+    closePosition(ids) {
+      let that = this;
+      this.$alert(that.$t('lever.sureping'), "", {
+        confirmButtonText: that.$t('cuy.confirm'),
+        customClass: "modalConfirm",
+        confirmButtonClass: "confirmBtn",
+        closeOnClickModal: true,
+        callback: action => {
+          if (action == "confirm") {
+            that
+              .$http({
+                url: "/api/" + "lever/close",
+                method: "post",
+                data: {
+                  id: ids
+                },
+                headers: { Authorization: localStorage.getItem("token") }
+              })
+              .then(res => {
+                if (res.data.type == "ok") {
+                  layer.msg(res.data.message);
+                  setTimeout(function() {
+                    location.reload();
+                  }, 1000);
+                } else {
+                  layer.msg(res.data.message);
+                }
+              })
+              .catch(error => {
+                console.log(error);
+              });
+          }
+        }
+      });
+      // layer.confirm("确定平仓？", function() {
+      //   var i = layer.load();
+      //   that
+      //     .$http({
+      //       url: "/api/" + "lever/close",
+      //       method: "post",
+      //       data: {
+      //         id: ids
+      //       },
+      //       headers: { Authorization: localStorage.getItem("token") }
+      //     })
+      //     .then(res => {
+      //       layer.close(i);
+      //       if (res.data.type == "ok") {
+      //         layer.msg(res.data.message);
+      //         setTimeout(function() {
+      //           that.tabClick(that.status);
+      //         }, 200);
+      //       } else {
+      //         layer.msg(res.data.message);
+      //       }
+      //     })
+      //     .catch(error => {
+      //       layer.close(i);
+      //       console.log(error);
+      //     });
+      // });
+    },
+    // 撤单
+    cannelOrder(ids) {
+      let that = this;
+      this.$alert(that.$t('lever.revokeOrder'), "", {
+        confirmButtonText: that.$t('cuy.confirm'),
+        customClass: "modalConfirm",
+        confirmButtonClass: "confirmBtn",
+        closeOnClickModal: true,
+        callback: action => {
+          if (action == "confirm") {
+            that
+              .$http({
+                url: "/api/" + "lever/cancel",
+                method: "post",
+                data: {
+                  id: ids
+                },
+                headers: { Authorization: localStorage.getItem("token") }
+              })
+              .then(res => {
+                layer.close(i);
+                if (res.data.type == "ok") {
+                  layer.msg(res.data.message);
+                  setTimeout(function() {
+                    that.tabClick(that.status);
+                  }, 200);
+                } else {
+                  layer.msg(res.data.message);
+                }
+              })
+              .catch(error => {
+                layer.close(i);
+                console.log(error);
+              });
+          }
+        }
+      });
+      // layer.confirm("确定撤消订单吗？", function() {
+      //   var i = layer.load();
+      //   that
+      //     .$http({
+      //       url: "/api/" + "lever/cancel",
+      //       method: "post",
+      //       data: {
+      //         id: ids
+      //       },
+      //       headers: { Authorization: localStorage.getItem("token") }
+      //     })
+      //     .then(res => {
+      //       layer.close(i);
+      //       if (res.data.type == "ok") {
+      //         layer.msg(res.data.message);
+      //         setTimeout(function() {
+      //           that.tabClick(that.status);
+      //         }, 200);
+      //       } else {
+      //         layer.msg(res.data.message);
+      //       }
+      //     })
+      //     .catch(error => {
+      //       layer.close(i);
+      //       console.log(error);
+      //     });
+      // });
+    }
+  }
+};
+</script>
+<style scoped>
+	.wrap {
+		min-height: 500px;
+		background: #181b2a;
+		width: 100%;
+		margin: auto;
+		padding: 90px 50px 30px 50px;
+	}
+
+	.tab-header {
+		margin-bottom: 30px;
+		color: #c7cce6;
+	}
+
+	.tab-header span {
+		padding-bottom: 10px;
+		margin-right: 20px;
+		cursor: pointer;
+	}
+
+	ul li {
+		padding: 8px 0;
+		line-height: 33px;
+	}
+
+	ul li span {
+		display: inline-block;
+	}
+
+	ul li div {
+		display: inline-block;
+	}
+
+	ul li div span {
+		border-radius: 3px;
+		color: white;
+		background-color: #638bd4;
+		cursor: pointer;
+		min-height: 33px;
+		min-width: 80px;
+		font-size: 14px;
+		border: none;
+		padding: 0 5px;
+		line-height: 33px;
+		text-align: center;
+	}
+
+	.list_head {
+		color: #637085;
+		border-bottom: 1px solid #2e333c;
+	}
+
+	.red {
+		color: #cc4951;
+		cursor: pointer;
+	}
+
+	.green {
+		color: #0d8551;
+	}
+
+	.stop-btn {
+		margin-right: 10px;
+	}
+
+	.mores {
+		color: #999;
+		font-size: 14px;
+		margin-top: 10px;
+		cursor: pointer;
+		text-align: center;
+	}
+
+	.mores img {
+		width: 120px;
+		height: 120px;
+		margin: 30px auto 0;
+	}
+
+	.mores span {
+		display: block;
+		text-align: center;
+	}
+
+	.width1 {
+		width: 9%;
+		text-align: center;
+	}
+
+	.width2 {
+		width: 13%;
+		text-align: center;
+	}
+
+	.width3 {
+		width: 20%;
+		text-align: center;
+	}
+
+	.loss-modal {
+		width: 100%;
+		height: 100%;
+		position: fixed;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(0, 0, 0, 0.7);
+		justify-content: center;
+		align-items: center;
+		color: #c7cce6;
+	}
+
+	.content {
+		width: 500px;
+		background-color: #262a42;
+		margin: 0 auto;
+		border-radius: 5px;
+	}
+
+	.loss-modal-header {
+		line-height: 40px;
+		text-align: center;
+		position: relative;
+	}
+
+	.loss-modal-header p {
+		position: absolute;
+		right: 10px;
+		top: 0;
+	}
+
+	.loss-madal-content {
+		margin: 0 15px;
+		padding-bottom: 10px;
+	}
+
+	.loss-madal-content div {
+		line-height: 40px;
+		margin-bottom: 10px;
+	}
+
+	.loss-madal-content div p {
+		display: inline-block;
+		border: 1px solid #2e333c;
+		border-radius: 3px;
+		height: 40px;
+		position: relative;
+	}
+
+	.loss-madal-content p span {
+		display: inline-block;
+		width: 60px;
+		text-align: center;
+		font-size: 30px;
+		position: relative;
+		top: -3px;
+	}
+
+	.loss-madal-content input {
+		background-color: rgba(0, 0, 0, 0);
+		border-left: 1px solid #2e333c;
+		border-right: 1px solid #2e333c;
+		line-height: 40px;
+		position: relative;
+		top: -8px;
+		color: #c7cce6;
+		text-align: center;
+	}
+
+	.modal-text {
+		width: 100%;
+		text-align: center;
+		line-height: 60px;
+	}
+
+	.modal-btn {
+		border-bottom-left-radius: 5px;
+		border-bottom-right-radius: 5px;
+		font-size: 0;
+	}
+
+	.modal-btn button {
+		width: 50%;
+		line-height: 50px;
+		border: none;
+		float: left;
+		font-size: 14px;
+		color: #fff;
+		background: #9db5c7;
+	}
+
+	.modal-btn button:last-child {
+		border-left: 1px solid #2e333c;
+		background: #689cf1;
+	}
+
+	.total-pro button {
+		border-radius: 3px;
+		color: white;
+		background-color: #638bd4;
+		cursor: pointer;
+		min-height: 33px;
+		min-width: 80px;
+		font-size: 14px;
+		border: none;
+		padding: 0 5px;
+		line-height: 33px;
+		text-align: center;
+	}
+
+	.stopModal {
+		margin: 20px 15px;
+		text-align: center;
+		padding-bottom: 20px;
+	}
+
+	.stopModal span {
+		padding: 6px 15px;
+		border-radius: 4px;
+	}
+
+	.stopall {
+		border: 1px solid #638bd4;
+		color: #638bd4;
+		margin-right: 10px;
+	}
+
+	.alls {
+		color: #fff;
+		background-color: #638bd4;
+	}
+
+	.stopbuy {
+		border: 1px solid #0d8551;
+		color: #0d8551;
+		margin-right: 10px;
+	}
+
+	.buys {
+		color: #fff;
+		background-color: #0d8551;
+	}
+
+	.stopsell {
+		border: 1px solid #cc4951;
+		color: #cc4951;
+	}
+
+	.sells {
+		color: #fff;
+		background-color: #cc4951;
+	}
+
+	.stop-modal-btns {
+		width: 100%;
+		font-size: 0;
+	}
+
+	.stop-modal-btns button {
+		width: 50%;
+		float: left;
+		font-size: 14px;
+		line-height: 40px;
+		background-color: #9db5c7;
+		border: none;
+		outline: none;
+		color: #fff;
+	}
+
+	.stop-modal-btns button:last-child {
+		background-color: #689cf1;
+	}
+
+	.btns button {
+		border-radius: 3px;
+		color: white;
+		background-color: #638bd4;
+		cursor: pointer;
+		min-height: 33px;
+		min-width: 80px;
+		font-size: 14px;
+		border: none;
+		padding: 0 5px;
+		line-height: 33px;
+		text-align: center;
+	}
+	.alcenter span{
+		color: #c7cce6;
+	}
+</style>
+
+<!--// WEBPACK FOOTER // // src/view/lever/leverList.vue-->
diff --git a/src/view/lever/leverRecord.vue b/src/view/lever/leverRecord.vue
new file mode 100644
index 0000000..e6fbe3d
--- /dev/null
+++ b/src/view/lever/leverRecord.vue
@@ -0,0 +1,110 @@
+<template>
+  <div id="lever-record">
+    <div class="title">
+      <span class="fl">USDC</span>
+      <span class="fr" @click="$router.go(-1)">{{$t('back')}}</span>
+    </div>
+    <div class="list">
+      <div class="list-title flex">
+        <span>{{$t('number')}}</span>
+        <span>{{$t('account.record')}}</span>
+        <span>{{$t('time')}}</span>
+      </div>
+      <ul>
+        <li v-for="(item,index) in log" :key="index">
+          <span>{{item.value}}</span>
+          <span>{{item.info}}</span>
+          <span>{{item.created_time}}</span>
+        </li>
+      </ul>
+    </div>
+    <div @click="getLog" class="loadmore">{{$t('more')}}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      log: [],
+      page: 1
+    }
+  },
+  created() {
+    this.getLog();
+  },
+  methods: {
+    getLog:function() {
+      var id = this.$route.query.id;
+      var token = window.localStorage.getItem("token");
+      this.$http({
+        url: "/api/wallet/legal_log",
+        method: "post",
+        headers: { Authorization: token },
+        data: {
+          type: "lever",
+          currency: id
+        }
+      }).then(res => {
+        if (res.data.type == "ok") {
+          let msg = res.data.message;
+          if (msg.list.length) {
+            this.log.concat(msg.list);
+            this.page += 1;
+          } else {
+            layer.msg(this.$t('nomore'));
+          }
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style lang='scss'>
+#lever-record {
+  width: 75rem;
+  margin: 0 auto;
+  color: #c7cce6;
+  .title {
+    height: 60px;
+    line-height: 60px;
+    padding: 0 30px;
+    margin: 20px 0;
+    font-size: 20px;
+    border-radius: 3px;
+    background-color: #181b2a;
+    span {
+      cursor: pointer;
+    }
+  }
+  .list {
+    min-height: 900px;
+    padding: 0 30px;
+    background: #181b2a;
+  }
+  .list-title,
+  li {
+    display: flex;
+    line-height: 40px;
+    justify-content: space-between;
+    span {
+      flex: 1;
+      text-align: center;
+    }
+  }
+  li {
+    border-top: 1px solid #202a4a;
+  }
+  .loadmore {
+    text-align: center;
+    padding: 20px;
+    cursor: pointer;
+  }
+}
+</style>
+
+
+
+// WEBPACK FOOTER //
+// src/view/lever/leverRecord.vue
\ No newline at end of file
diff --git a/src/view/lever/lever_entrust.vue b/src/view/lever/lever_entrust.vue
new file mode 100644
index 0000000..fd782c7
--- /dev/null
+++ b/src/view/lever/lever_entrust.vue
@@ -0,0 +1,213 @@
+<template>
+    <div class="entrust">
+        <div class="title fColor1 topshadow">
+            <div class="tab_title">
+                <span>{{$t('lever.nowentrust')}}</span>
+            </div>
+            <div class="tab_title fr ft12">
+                <span v-for="(way,index) in wayList" :class="{'active': index == isChoosed}" @click="wayChoose(index,way.url)">{{way.title}}</span>
+            </div>
+        </div>
+        <div class="content">
+            <ul class="list-title fColor2 ft12 clear">
+                <li class="fl w20">{{$t('time')}}</li>
+                <li class="fl w10">{{$t('center.pairs')}}</li>
+                <li class="fl w8">{{$t('center.direction')}}</li>
+                <li class="fl w8">{{$t('number')}}</li>
+                <li class="fl w8">{{$t('price')}}</li>
+                <li class="fl w8">{{$t('center.contran')}}</li>
+                <li class="fl w8">{{$t('lever.notdeal')}}</li>
+                <li class="fl w10">{{$t('center.dealtotal')}}</li>
+                <li class="fl w8 tr">{{$t('do')}}</li>
+            </ul>
+            <div class="containers scroll" v-if="inList.length>0">
+                <ul class="list-item fColor1 ft12">
+                    <li v-for="(item,index) in inList" class="clear">
+                        <span class="fl w20">{{item.create_time}}</span>
+                        <span class="fl w10">{{item.currency_name}}/{{item.legal_name}}</span>
+                        <span class="fl w8">{{type=='in'?$t('center.inbuy'):$t('center.outsell')}}</span>
+                        <span class="fl w8">{{item.total_number}}</span>
+                        <span class="fl w8">{{item.price}}</span>
+                        <span class="fl w8">{{item.complete_number}}</span>
+                        <span class="fl w8">{{item.number}}</span>
+                        <span class="fl w10">{{item.total_money}}</span>
+                        <span class="fl w8 tr curPer ceilColor" @click="revoke(index,item.id)">{{$t('revoke')}}</span>
+                    </li>
+                </ul>
+                <div class="getmore tc fColor1 ft14 mt10 curPer pdb20" @click="getMore" v-if="!loading && inList.length>8">{{more}}</div>
+                <div class="tc pdb20" v-if="loading">
+                    <img src="@/assets/images/loading.gif" alt=""  class="lodw20">
+                    <p class="ft12 baseColor">{{$t('loading')}}...</p>
+                </div>
+            </div>
+            <div class="no_data tc" v-if="inList.length<=0 && !loading">
+                <img src="@/assets/images/nodata.png" alt="">
+                <p class="fColor2 ft18">{{$t('nodata')}}</p> 
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+
+export default {
+    name:"entrust",
+    data (){
+        return{
+            isshow:false,
+            address:'',
+            isChoosed:0,
+            isUrl:0,
+            page:1,
+            url:"transaction_in",
+            type:'in',
+            more:this.$t('more'),
+            loading:false,
+            urlList:[{title:this.$t('lever.nowentrust')}],
+            wayList:[{title:this.$t('center.inbuy'),url:"transaction_in"},{title:this.$t('center.outsell'),url:"transaction_out"}],
+            inList:[]
+        }
+    },
+    created(){
+        this.token = localStorage.getItem('token') || '';
+    },
+    methods:{
+        // 类型切换
+        wayChoose(index,url){
+            var that=this;
+            // if(index ==2){
+            //     that.isshow = true; 
+            // }else{
+            //     that.isshow = false;
+            //     that.getData();
+            // }
+            // console.log(url)
+            that.inList='';
+            that.page=1;
+            that.url = url;
+            // console.log(that.url)
+            if(url=='transaction_in'){
+                that.type="in";
+            }else if(url == 'transaction_out'){
+                that.type="out";
+            }else{
+                that.type="all";
+            }
+            that.getData();
+            that.more=this.$t('more');
+            that.isChoosed=index;
+           
+        },
+        // 加载更多
+        getMore(){
+            this.page = ++this.page;
+            this.getData();
+        },
+        // 撤销
+        revoke(indexs,id){
+            var that =this;
+            var id = id;
+            var indexs = indexs;
+            var type = that.type;
+            layer.open({
+                content: this.$t('revokeOrder')
+                ,btn: [this.$t('confirm'), this.$t('legal.ceil')]
+                ,yes: function(index){
+                var i=layer.load();
+                that.$http({
+                    url: '/api/' + 'transaction_del',
+                    method:'post',
+                    data:{
+                        id:id,
+                        type:type
+                    },
+                    headers: {'Authorization':  that.token}
+                    }).then(res=>{
+                    // console.log(res)
+                        layer.close(i)
+                        if(res.data.type  =='ok'){
+                            that.inList.splice(indexs,1);
+                            // eventBus.$emit('tocel','celbuy');
+                            layer.msg(res.data.message)
+                        }else{
+                            layer.msg(res.message);
+                        }
+                    }).catch(error=>{
+                        console.log(error)
+                    })
+                }
+            });
+        },
+        getData(){
+            var that = this;
+            var url = that.url;
+            var page = that.page;
+            that.loading = true;
+            this.$http({
+                url: '/api/' + url,
+                method:'post',
+                data:{page:page},
+                headers: {'Authorization':  that.token}
+            }).then(res=>{
+                // console.log(res)
+                that.loading=false;
+                // console.log(url)
+                if(res.data.type == 'ok'){
+                        // console.log(res.data.message.list)
+                        var list=res.data.message.list;
+                        if(that.page==1){
+                            that.inList=list;
+                        }else{
+                            if(list.length<=0){
+                                    that.more=that.$t('td.nomore')+'...';
+                                    return;
+                                }else{
+                                    that.inList=that.inList.concat(list)
+                                }
+                            }
+                    }else{
+                        // layer.msg(res.message);
+                }
+            }).catch(error=>{
+                console.log(error)
+        }) 
+      },
+     
+    },
+    mounted(){
+        var that = this;
+        eventBus.$on('buyTrade', function (data) {
+            if(data){
+            that.getData();
+            }
+        });
+        that.getData();
+    }
+    
+}
+</script>
+<style scoped>
+.title{height: 48px;line-height: 46px;padding: 0 40px 0 30px;background-color: #181b2a;}
+.tab_title{display: inline-block;line-height: 46px;height: 46px;}
+.tab_title span{cursor: pointer;}
+.tab_title span:not(:last-child) {margin-right: 40px;}
+.content{padding: 0 40px 0 30px;height: 300px;}
+.list-title{line-height: 40px; border-bottom: 1px solid #303b4b;height: 40px;}
+.no_data{padding: 50px 0;}
+.containers{height: 260px;overflow: auto;}
+.list-item li{line-height: 30px;}
+.list-item li span{display: inline-block;float: left;}
+.list-item li span:nth-child(3){color:#cc4951;}
+.list-item li:hover{background-color: #2b3648}
+.list-item li span.green{color: #55a067}
+.pdb20{padding-bottom: 20px;}
+.containers span{
+    margin-left: 0;
+}
+</style>
+
+
+
+
+
+// WEBPACK FOOTER //
+// src/view/lever/lever_entrust.vue
\ No newline at end of file
diff --git a/src/view/lever/lever_exchange.vue b/src/view/lever/lever_exchange.vue
new file mode 100644
index 0000000..fa9c60f
--- /dev/null
+++ b/src/view/lever/lever_exchange.vue
@@ -0,0 +1,393 @@
+<template>
+	<div class="exchange" style="height:100%;width:100%;overflow:auto">
+		<!-- <div class="title fColor1">交易所</div> -->
+		<div class="content fColor1" style="padding: 1.5rem;">
+			<!-- <div class="new_price">
+        <span class="ft14">{{ $t('exchange.handicap') }}</span>
+      </div> -->
+			<div class="sas">
+				<div class="s-itx" :class="{siAs:sasIndex==index}" v-for="(item,index) in 3" @click="dwd(index)">
+					<img :src="require(`../../assets/p${index+1}.png`)" />
+				</div>
+
+			</div>
+			<div class="exchange_title ft12 clear tc" v-if="false">
+				<!--  <span>{{ $t('exchange.direction') }}</span> -->
+				<span style="text-align: left;">{{ $t('exchange.price') }}(USDC)</span>
+				<span>{{ $t('exchange.number') }}({{currency_name}})</span>
+				<span style="text-align: right;">{{$t('zjde82')}} (USDC)</span>
+			</div>
+		
+			<ul class="list-item ft12 tc">
+				<div v-if="sasIndex==0 || sasIndex==1">
+					<li class="curPer" v-for="(out,index) in outlist" :key="out.id" @click="price(out.price)"
+						v-show="sasIndex==0?(index<10):true ">
+						<!-- <span class="red">{{ $t('exchange.sellout') }} {{ outlist.length - index }}</span> -->
+						<!-- <span style="text-align: left; color: #00f0ff;">{{ out[0] | tofixedFour2 }}</span> -->
+						<span>{{ out[1] | tofixedFour }}</span>
+						<span style="text-align: right;color: #00f0ff;">{{ out[0]  | tofixedFour }}</span>
+
+						<!-- <span class="info-shadow selli" :style="{width:(out[1]/sellMaxValue-0)*100+'%'}"></span> -->
+					</li>
+				</div>
+				<div class="line green">
+					{{ newData|tofixedN(6) }}
+
+					<!-- <span
+            style="font-size: 12px; color:#a7a7a7;"> USDC</span> -->
+				</div>
+
+				<div v-if="sasIndex==0 || sasIndex==2">
+					<li class="curPer" v-for="(buy,index) in inlist" :key="index" @click="price(buy.price)"
+						v-show="sasIndex==2?true:(index<10) ">
+						<!-- <span class="green">{{ $t('exchange.buyin') }} {{ index + 1 }}</span> -->
+						<!-- <span style="text-align: left;color: #FF4834;">{{ buy[0] | tofixedFour2 }}</span> -->
+						<span>{{ buy[1] | tofixedFour }}</span>
+						<span style="text-align: right;color: #FF4834;">{{ buy[0]  | tofixedFour }}</span>
+						<!-- <span class="info-shadow" :style="{width:(buy[1]/inMaxValue-0)*100+'%'}"></span> -->
+					</li>
+				</div>
+			</ul>
+		</div>
+	</div>
+</template>
+
+<script>
+	let nameb = ''
+	export default {
+		name: "exchange",
+		data() {
+			return {
+				outlist: [],
+				inlist: [],
+				load: 1,
+				newData: 0,
+				rmbRate: '6',
+				currency_name: "",
+				legal_name: "",
+				currency_id: "",
+				legal_id: "",
+				sellMaxValue: 0,
+				inMaxValue: 0,
+				sasIndex: 0,
+
+			};
+		},
+		watch: {
+			rmbRate: val => {
+				eventBus.$emit('receiveRate', val);
+			}
+		},
+		filters: {
+			tofixed: function(val) {
+				val = Number(val);
+				return val.toFixed(2);
+			},
+			tofixedFour(val) {
+				val = Number(val);
+				// let n = 4
+				// if(nameb=='SHIB'){
+				// 	n = 8
+				// }
+				return val.toFixed(4);
+			},
+			tofixedFour2(val) {
+				val = Number(val);
+				let n = 4
+				if (nameb == 'SHIB') {
+					n = 8
+				} else if (nameb == 'PYPLC') {
+					n = 8
+				}
+				return val.toFixed(n);
+			},
+			tofixedN: function(val, n) {
+				val = Number(val);
+				return val.toFixed(n);
+			},
+		},
+		mounted: function() {
+			var that = this;
+		},
+		created: function() {
+			let that = this;
+			let local_lid = window.localStorage.getItem("lever_l_id"),
+				local_cid = window.localStorage.getItem("lever_c_id");
+			that.legal_id = localStorage.getItem("legal_id");
+			that.currency_id = localStorage.getItem("currency_id");
+			that.legal_name = localStorage.getItem("legal_name");
+			that.currency_name = localStorage.getItem("currency_name");
+			nameb = that.currency_name
+			that.buy_sell(that.legal_id, that.currency_id);
+			that.connect(that.legal_id, that.currency_id);
+			// that.upPrice(that.legal_id, that.currency_id);
+
+		},
+		methods: {
+			dwd(index) {
+				this.sasIndex = index
+			},
+			price(price) {
+				eventBus.$emit("toPrice", price);
+			},
+			// 第一次默认最新价数据
+			buy_sell(legals_id, currencys_id) {
+				let that = this;
+				this.$http({
+						url: "/api/" + "lever/deal",
+						method: "post",
+						data: {
+							legal_id: legals_id,
+							currency_id: currencys_id
+						},
+						headers: {
+							Authorization: localStorage.getItem("token")
+						}
+					}).then(res => {
+						if (res.data.type == "ok") {
+							that.inlist = res.data.message.lever_transaction.in;
+							that.outlist = res.data.message.lever_transaction.out;
+							that.newData = res.data.message.last_price;
+							that.rmbRate = res.data.message.ExRAte;
+							window.localStorage.setItem('lastPrice', that.newData);
+							that.buyInfo.buyPrice = 0;
+							that.buyInfo.buyNum = 0;
+							that.connect(
+								legals_id,
+								currencys_id
+							);
+						} else if (res.data.type == "999") {
+							this.$router.push("/components/login");
+						} else {
+							layer.msg(res.data.message);
+						}
+					})
+					.catch(error => {
+						// console.log(error)
+					});
+			},
+
+			connect(legal_id, currency_id) {
+
+				var that = this;
+				that.$socket.emit("login", localStorage.getItem("user_id"));
+				that.sockets.subscribe("market_depth", msg => {
+					if (msg.type == "market_depth") {
+						//组件间传值
+						let newPrice = {
+							newprice: msg.last_price,
+							newup: msg.proportion,
+							istoken: msg.token,
+							yesprice: msg.yesterday,
+							toprice: msg.today
+						};
+						// setTimeout(() => {
+						//   eventBus.$emit("toNew01", newPrice);
+						// }, 1000);
+						// console.log(msg);
+						let inData = msg.bids;
+						// .reverse()
+						let outData = msg.asks;
+						if (msg.currency_id == currency_id && msg.legal_id == legal_id) {
+
+
+
+
+							let [inlist, outList] = [inData, outData];
+
+							let [max, max1] = [0, 0];
+							for (let i in inData) {
+								inlist[i].price = inlist[i][0];
+								inlist[i].number = inlist[i][1];
+								max = inlist[i].number > max ? inlist[i].number : max;
+
+							}
+
+							that.inMaxValue = max;
+
+							that.inlist = inlist;
+
+							for (let i in outList) {
+								outList[i].price = outList[i][0];
+								outList[i].number = outList[i][1];
+								max1 = outList[i].number > max1 ? outList[i].number : max;
+								that.sellMaxValue = outList[i].number;
+
+							}
+							that.sellMaxValue = max1;
+							that.outlist = outList;
+						}
+					}
+				});
+				// new_kline
+				that.sockets.subscribe('kline', msg => {
+					if (msg.type == 'kline' && msg.period == '1min') {
+
+						// console.log('kline',msg.symbol,localStorage.getItem('symbol'))
+						// var symbols = $('.trade-name').text();
+
+						if (msg.symbol == localStorage.getItem('symbol')) {
+							// console.log(msg.symbol , msg)
+
+							// console.log(localStorage.getItem('symbol'),msg.close)
+							that.newData = msg.close;
+						}
+					}
+				})
+
+				that.sockets.subscribe('market_depth', msg => {
+					if (msg.symbol == localStorage.getItem('symbol')) {
+
+					}
+				});
+			},
+			// 更新最新价
+			upPrice(legal_id, currency_id) {
+				console.log('upPrice')
+				var that = this;
+				that.$socket.emit("login", localStorage.getItem("user_id"));
+				that.$socket.on("kline", msg => {
+					if (msg.type == "kline" && msg.period == '1min') {
+						if (msg.currency_id == currency_id && msg.legal_id == legal_id) {
+							that.newData = msg.close;
+							window.localStorage.setItem('lastPrice', that.newData);
+						}
+					}
+				});
+			},
+
+		},
+	};
+</script>
+
+<style lang="scss" scoped>
+	.title {
+		height: 48px;
+		line-height: 48px;
+		padding: 0 10px 0 30px;
+		// background-color: #181b2a;
+	}
+
+	.content {
+		padding: 0px;
+	}
+
+	.exchange {
+		width: 230px;
+		// background: #181d25;
+		height: 100%;
+	}
+
+	.new_price {
+		height: 40px;
+		line-height: 40px;
+		border-bottom: 1px solid #303b4b;
+		padding: 0 0 0 20px;
+		color: #00a4d8;
+	}
+
+	.exchange_title {
+		// line-height: 25px;
+		position: relative;
+		color: #637085;
+		margin-bottom: 0.8rem;
+		font-size: 0.875rem;
+		color: #333;
+	}
+
+	.list-item li {
+		// line-height: 25px;
+		overflow: hidden;
+		position: relative;
+
+		.info-shadow {
+			height: 100%;
+			background: rgba(53, 182, 90, .3);
+			position: absolute;
+			top: 0;
+			right: 0;
+			z-index: 0;
+			transition: 0.2s;
+		}
+
+		.info-shadow.selli {
+			height: 100%;
+			background: rgba(255, 73, 74, .3);
+			position: absolute;
+			top: 0;
+			right: 0;
+			z-index: 0;
+		}
+	}
+
+	.list-item li span,
+	.exchange_title span {
+		// width: 33.3%;
+		width: 50%;
+		display: block;
+		text-align: left;
+		float: left;
+		color: #fff;
+	}
+
+	.green {
+		color: #00f0ff !important;
+	}
+
+	.red {
+		color: #FF4834;
+	}
+
+	// .list-item li:hover {
+	//   background-color: #2b3648;
+	// }
+
+	.line {
+		line-height: 40px;
+		text-align: left;
+		// padding-left: 30px;
+		font-size: 16px;
+	}
+
+	.curPer {
+		margin-bottom: 1rem;
+		font-size: 14px;
+		color: #7e7e7e;
+	}
+
+	.day {
+		.exchange_title {
+			color: #7e7e7e;
+		}
+	}
+
+	.sas {
+		display: flex;
+		margin-bottom: 1rem;
+	}
+
+	.s-itx {
+		margin-right: 1rem;
+		cursor: pointer;
+	}
+
+	.sas img {
+		width: 2rem;
+		height: 2.15rem;
+
+	}
+
+	.siAs img {
+		border: 1px solid #fff;
+	}
+
+	@media screen and (max-width: 800px) {
+		.exchange_title {
+			font-size: 1rem;
+		}
+
+		.curPer {
+			font-size: 1rem;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/view/lever/lever_hisentrust.vue b/src/view/lever/lever_hisentrust.vue
new file mode 100644
index 0000000..bb02b1a
--- /dev/null
+++ b/src/view/lever/lever_hisentrust.vue
@@ -0,0 +1,168 @@
+<template>
+    <div class="entrust">
+        <div class="title fColor1 topshadow">
+            <div class="tab_title">
+                <span>{{$t('lever.hisentrust')}}</span>
+            </div>
+            <!-- <div class="tab_title fr ft12">
+                <span v-for="(way,index) in wayList" :class="{'active': index == isChoosed}" @click="wayChoose(index,way.url)">{{way.title}}</span>
+            </div> -->
+        </div>
+        <div class="content">
+            <ul class="list-title fColor2 ft12 clear">
+                <li class="fl w20">{{$t('time')}}</li>
+                <li class="fl w10">{{$t('center.pairs')}}</li>
+                <li class="fl w8">{{$t('number')}}</li>
+                <li class="fl w10">{{$t('price')}}</li>
+                <li class="fl w8">{{$t('center.dealtotal')}}</li>
+                <li class="fl w10">{{$t('center.tprice')}}</li>
+                <li class="fl w10">{{$t('status')}}</li>
+                <li class="fl w10">{{$t('rate')}}</li>
+                <li class="fl w8 tr">{{$t('center.direction')}}</li>
+            </ul>
+            <div class="containers scroll" v-if="comList.length>0">
+                <ul class="list-item fColor1 ft12">
+                    <li v-for="item in comList" class="clear">
+                        <span class="fl w20">{{item.time}}</span>
+                        <span class="fl w10">{{item.currency_name}}/{{item.legal_name}}</span>
+                        <span class="fl w8">{{item.number}}</span>
+                        <span class="fl w10">{{item.price}}</span>
+                        <span class="fl w8">{{(item.price * item.number) | numFilter}}</span>
+                        <span class="fl w10">{{item.price}}</span>
+                        <span class="fl w10">{{$t('dealed')}}</span>
+                        <span class="fl w10">{{item.type=='in'? item.in_fee:item.out_fee}}</span>
+                        <span class="fl w8 tr" :class="item.type=='out'?'redColor':''">{{item.type=='in'?$t('center.inbuy'):$t('center.outsell')}}</span>
+                    </li>
+                </ul>
+                <div class="getmore tc fColor1 ft14 mt10 curPer pdb20" @click="getMore" v-if="!loading && comList.length>8">{{more}}</div>
+                <div class="tc pdb20" v-if="loading">
+                    <img src="@/assets/images/loading.gif" alt=""  class="lodw20">
+                    <p class="ft12 baseColor">{{$t('loading')}}...</p>
+                </div>
+            </div>
+            <div class="no_data tc" v-if="comList.length<=0 && !loading">
+                <img src="@/assets/images/nodata.png" alt="">
+                <p class="fColor2 ft18">{{$t('nodata')}}</p> 
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+
+export default {
+    name:"hisentrust",
+    data (){
+        return{
+            address:'',
+            isChoosed:0,
+            isUrl:0,
+            page:1,
+            url:"transaction_in",
+            type:'in',
+            more:this.$t('more'),
+            loading:false,
+            wayList:[{title:this.$t('center.inbuy'),url:"transaction_in"},{title:this.$t('center.outsell'),url:"transaction_out"},{title:this.$t('center.all'),url:"transaction_all"}],
+            comList:[]
+        }
+    },
+    created(){
+        this.token = localStorage.getItem('token') || '';
+    },
+    wacth(){
+        eventBus.$on('buyTrade', function (data) {
+            if(data){
+                that.getData();
+            }
+        });
+    },
+    methods:{
+        // 类型切换
+        wayChoose(index,url){
+            var that=this;
+            that.comList='';
+            that.page=1;
+            that.url = url;
+            if(url=='transaction_in'){
+                that.type="in";
+            }else{
+                that.type="out";
+            }
+            that.more=that.$t('more');
+            that.isChoosed=index;
+            that.getData();
+        },
+        // 加载更多
+        getMore(){
+            this.page = ++this.page;
+            this.getData();
+        },
+        getData(){
+            var that = this;
+            var page = that.page;
+            that.loading = true;
+            this.$http({
+                url: '/api/' + 'transaction_complete',
+                method:'post',
+                data:{page:page},
+                headers: {'Authorization':  that.token}
+            }).then(res=>{
+                // console.log(res)
+                that.loading=false;
+                if(res.data.type == 'ok'){
+                        // console.log(res.data.message.list)
+                        var list=res.data.message.list;
+                        if(that.page==1){
+                            that.comList=list;
+                        }else{
+                            if(list.length<=0){
+                                    that.more=$t('td.nomore')+'...';
+                                    return;
+                                }else{
+                                    that.comList=that.comList.concat(list)
+                                }
+                            }
+                    }else{
+                        // layer.msg(res.message);
+                }
+            }).catch(error=>{
+                console.log(error)
+        })
+      },
+    },
+    mounted(){
+        var that = this;
+        eventBus.$on('buyTrade', function (data) {
+            if(data){
+                that.getData();
+            }
+        });
+        that.getData();
+    }
+}
+</script>
+<style scoped>
+.title{height: 48px;line-height: 46px;padding: 0 40px 0 30px;background-color: #181b2a;}
+.tab_title{display: inline-block;line-height: 46px;height: 46px;}
+.tab_title span{cursor: pointer;}
+.tab_title span:not(:last-child) {margin-right: 40px;}
+.content{padding: 0 40px 0 30px;height: 300px;}
+.list-title{line-height: 40px; border-bottom: 1px solid #303b4b;height: 40px;}
+.no_data{padding: 50px 0;}
+.containers{height: 260px;overflow: auto;}
+.list-item li{line-height: 30px;}
+.list-item li span{display: inline-block;float: left;height: 30px;}
+/* .list-item li span:nth-child(3){color:#cc4951;} */
+.list-item li:hover{background-color: #2b3648}
+.list-item li span.green{color: #55a067}
+.pdb20{padding-bottom: 20px;}
+.containers span{
+    margin-left: 0;
+}
+</style>
+
+
+
+
+
+// WEBPACK FOOTER //
+// src/view/lever/lever_hisentrust.vue
\ No newline at end of file
diff --git a/src/view/lever/lever_market.vue b/src/view/lever/lever_market.vue
new file mode 100644
index 0000000..8bf1e7c
--- /dev/null
+++ b/src/view/lever/lever_market.vue
@@ -0,0 +1,254 @@
+<template>
+    <div class="market" >
+		<div class="m_title  clear fColor1">
+            <span class="fff fl">{{$t('market.market')}}</span>
+            <div class="m_search fr">
+               <input type="text" class="fColor1">
+               <img src="../../assets/images/search.png" alt="">
+            </div>
+        </div>
+        <div class="m_filter">
+            <div class="tabtitle fColor1 ft14 curPer flex around">
+                <!-- <span class="active">JNB</span> -->
+
+                <!-- <span class="active">USDC</span>
+                <span>JNB</span>
+                <span>JNB</span> -->
+                <span v-for="(tab,index) in tabList " :key="index" :class="index==index1?'active':''"  @click="changeType(index,tab.name,tab.id)">{{tab.name}}</span>
+            </div>
+        </div>
+        <div class="coin-title clear">
+            <div>
+                <span>{{$t('market.currency')}}</span>
+                <img src="../../assets/images/select0.png" alt="">
+         </div>
+            <div>
+                <span>{{$t('market.lastprice')}}</span>
+                <img src="../../assets/images/select0.png" alt="">
+            </div>
+            <div>
+                 <span>{{$t('market.change')}}</span>
+                <img src="../../assets/images/select0.png" alt="">
+            </div>
+        </div>
+        <div class="line"></div>
+        <ul class="coin-wrap scroll">
+            <!-- <li>
+                <span v-for="item in newData">{{item}}</span>
+            </li> -->
+            <li class="currency_p" v-for="(market,index) in marketList "  :key="index" v-show="index1 == index" >
+              <p  v-for="(itm,idx) in market" :key="itm.id" :class="idx==index2?'active_p':''" :data-id='itm.id' :data-index='idx' @click="quota_shift(idx,itm.id,itm.name)">
+                <span>{{itm.name}}</span>
+                <span :data-name='tabList[index].name+"/"+itm.name'>${{itm.last_price}}</span>
+                <span :class="{'green':itm.proportion>=0}">{{itm.proportion>=0?('+'+(itm.proportion-0).toFixed(2)):(itm.proportion-0).toFixed(2)}}%</span>
+                </p>
+            </li>
+            
+        </ul>
+	</div>
+</template>
+
+<script>
+    export default {
+        name: "market",
+        data (){
+            return{
+                ids:0,
+                isShow:0,
+                tabList:[],
+                marketList:[],
+                newData:['MTS', "$0.076128",'-1.11%'],
+                legal_index:this.$route.params.legal_index,
+                currency_index:this.$route.params.currency_index,
+                tradeDatas:'',
+                index2:0,
+                index1:0,
+                legal_id:window.localStorage.getItem('legal_id'),
+                currency_id:window.localStorage.getItem('currency_id'),
+                selectedId:''
+            }
+        },
+        created:function(){
+                if(window.localStorage.getItem('index02')&&window.localStorage.getItem('index01')){
+                    this.index2= window.localStorage.getItem('index02');
+                    this.index1=window.localStorage.getItem('index01')
+                }
+        },
+        mounted(){
+            var that =this;
+            eventBus.$on('toNew01', function (data) {
+               if(data){
+                    var newprice=data.newprice;
+                    var cname=data.istoken;
+                    var newup=data.newup;
+                    if(newup>=0){
+                        newup="+"+Number(newup*100).toFixed(2)+'%';
+                        $("span[data-name='"+cname+"']").next().css('color','#55a067')
+                    }else{
+                        newup=newup+'%';
+                        $("span[data-name='"+cname+"']").next().css('color','#cc4951')
+                    }
+                    $("span[data-name='"+cname+"']").html('$'+newprice).next().html(newup);
+               }
+            }); 
+           
+
+        },
+        methods:{
+            changeType(index,currency,currency_id){
+                this.index1=index;
+                this.index2=null; 
+               $('.currency_p p').removeClass('active_p')
+               this.isShow=index;
+               this.ids = 'a';
+               this.currency_name = currency;
+               this.currency_id = currency_id;
+            },
+            getSymbols(callback){
+                if(this.address.length<=0){
+                    return false;
+                }
+                this.$http({
+                    url:'/api/'+'wallet/list?user_id='+this.address||'',
+                    type:'GET'
+                }).then(res=>{
+                    // console.log(res)
+                    if(res.data.type=='ok'){
+                        this.accountInfo=res.data.message;
+                        this.dataList=res.data.message.list;
+                        // console.log(this.dataList)
+                        callback && callback();
+                    }else{
+                        // console.log(123)
+                        // alert(res.message)
+                    }  
+                }).catch(error=>{
+                    return error
+                })
+            },
+            init(){
+                // var index=layer.load();
+                this.address = localStorage.getItem('address') || '';
+                this.$http({
+                    url: '/api/'+'quotation_new',
+                    method:'post',
+                    headers: {'Authorization':  localStorage.getItem('token')}, 
+                }).then(res=>{
+                    // layer.close(index);
+                    // console.log(res)
+                     if(res.data.type=="ok"){
+                         this.getSymbols(()=>{
+                            this.marketList=res.data.message.coin_list;
+                            // console.log(res.data.message.coin_list)
+                            for(var i in this.dataList){
+                                for(var j in this.marketList){
+                                    if(this.dataList[i].name == this.marketList[j].symbol){
+                                        // console.log(1)
+                                        this.marketList[j].type=this.marketList[j].type||1
+                                    }else{
+                                        this.marketList[j].type=this.marketList[j].type||0
+                                    }
+                                }
+                            }
+                         })
+                         
+                    }else{
+                        // layer.msg(res.data.message)
+                    }
+                    
+                }).catch(error=>{
+                    console.log(error)
+                })
+            
+            },
+            //币种切换
+            quota_shift(idx,id,legal_name){
+                window.localStorage.setItem('index01',this.index1);
+                window.localStorage.setItem('index02',idx);
+               this.ids = idx;
+               var tradeDatas = {
+                   currency_id:this.currency_id,
+                   legal_id:id,
+                   currency_name:this.currency_name,
+                   leg_name:legal_name
+               }
+               window.localStorage.setItem('lever_legal_id',id);
+               window.localStorage.setItem('lever_currency_id',this.currency_id);
+               window.localStorage.setItem('lever_legal_name',legal_name);
+               window.localStorage.setItem('lever_currency_name',this.currency_name);
+               location.reload()
+            },
+            //socket连接封装
+					socket(token) {
+						let that = this;
+						$.ajax({
+							url: _API + "user/info",
+							type: "GET",
+							dataType: "json",
+							async: true,
+							beforeSend: function beforeSend(request) {
+								request.setRequestHeader("Authorization", token);
+							},
+							success: function success(data) {
+								if (data.type == 'ok') {
+									var socket = io(socket_api);
+									socket.on('connect', function(datas) {
+										socket.emit('login', data.message.id);
+										// 后端推送来消息时
+										socket.on('daymarket', function(msg) {
+											if (msg.type == 'daymarket') {
+												if (that.selectId && (that.selectId == msg.legal_id)) {
+													// now_price
+													let lists = that.detailList.quotation;
+													for(i in lists){
+														if(lists[i].currency_id == msg.currency_id){
+															that.detailList.quotation[i].volume=msg.volume;
+															that.detailList.quotation[i].now_price=msg.now_price;
+															that.detailList.quotation[i].change=msg.change;
+														}
+													}
+												}
+											}
+										});
+									});
+								}
+							}
+						});
+					}
+            
+
+        },
+        
+    }
+</script>
+
+<style scoped>
+.m_title{height: 55px;padding: 15px 30px;line-height: 25px;}
+.m_search input{border-radius: 3px;background: transparent;border: 1px solid #52688c;line-height: 25px;}
+/* .m_search{position: absolute;width: 146px;right: 20px;top: -4px;height: 26px;border-radius: 3px;padding: 4px 8px 4px 0;} */
+/* .m_search input{position: absolute;left: 0;top: 10px;z-index: 2;width: 100%;padding: 5px 40px 5px 8px;height: 26px;border-radius: 3px;background: transparent;border: 1px solid #52688c;} */
+.m_search img{width: 16px;height: 15px;position: absolute;right: 35px;top: 20px;z-index: 123;}
+.m_filter{padding: 10px 0 15px;}
+.tabtitle span {text-align: center;padding: 0 10px;}
+.coin-title div{width: 33.3%;height: 36px;line-height: 36px;background-color: #181b2a;text-align: center;float: left;color: #637085;font-size:12px;}
+.coin-title img{vertical-align: middle;margin-top: -3px;}
+.line{width: 90%;margin: 0px auto;border-bottom: 1px solid rgb(48, 59, 75);}
+.coin-wrap{height: 395px;overflow: auto;background-color: #181b2a;}
+.coin-wrap li{height: 30px;line-height: 30px;cursor: pointer;font-size: 12px;color: #cdd6e4;}
+.coin-wrap li span{display: block;width: 33%;float: left;text-align: center;}
+.coin-wrap li span:last-child{color: #cc4951;}
+.coin-wrap li:nth-child(odd){background-color: #181b2a;}
+.coin-wrap li span.green{color: #55a067;}
+.coin-wrap li p{
+    overflow: hidden;
+}
+.active_p{
+    background-color: #2b3648;
+}
+.coin-wrap li p:hover{background-color: #2b3648;}
+</style>
+
+
+
+// WEBPACK FOOTER //
+// src/view/lever/lever_market.vue
\ No newline at end of file
diff --git a/src/view/lever/lever_noticeList.vue b/src/view/lever/lever_noticeList.vue
new file mode 100644
index 0000000..55ff6cc
--- /dev/null
+++ b/src/view/lever/lever_noticeList.vue
@@ -0,0 +1,156 @@
+<template>
+    <div class="notice">
+        <!-- <indexHeader></indexHeader> -->
+        <div class="account-wrap">
+            <div class="account" style="width:auto">
+                <div>
+                    <div class="back-nav fColor1 ft20 clear" style="padding:0 20px"> {{$t('notice')}}
+                        
+                    </div>
+                    
+                </div>
+                <div class="account-content">
+                    <div class="tc hide" style="padding-top: 150px;">
+                        <img src="../../assets/images/nodata.png" alt=""> 
+                        <p class="fColor2 ft18">{{$t('nodata')}}</p>
+                    </div>
+                    <div>
+                        <ul class="noticeList">
+                            <li class="clear curPer" v-for="item in newList" :key="item.id">
+                                <div class=""  @click="goDetail(item.id)">
+                                        <div class="">{{item.title}}</div>
+                                        <span class="fr">{{item.update_time}}</span>
+                                    
+                                </div>
+                            </li>
+                        </ul> 
+                    </div>
+                    <div class="tc" style="padding:15px">
+                        <!-- <div class="fColor1 ft14 mt10" @click="getMore">{{more}}</div> -->
+                        <!-- <div>
+                            <img src="@/assets/images/loading.gif" alt=""  class="lodw20">
+                            <p class="ft12 baseColor">{{$t('loading')}}...</p>
+                        </div> -->
+                    </div>
+                </div>
+             </div>
+        </div>
+    </div>
+</template>
+<script>
+import indexHeader from "@/view/indexHeader";
+export default {
+  name: "noticeList",
+  components: { indexHeader },
+  data() {
+    return {
+      more: this.$t('more')+"...",
+      newList: []
+    };
+  },
+  created() {
+    // this.$http({
+    //   url: '/api/' + "news/list",
+    //   method: "get",
+    //   data: {}
+    // })
+    //   .then(res => {
+    //     res = res.data;
+    //     if (res.type === "ok") {
+    //       console.log(res.message.list)
+    //       this.newList = res.message.list;
+    //     } else {
+    //       layer.msg(res.message);
+    //     }
+    //   })
+    //   .catch(error => {
+    //     console.log(error);
+    //   });
+  },
+  methods: {
+    getNotice(){
+      this.$http({
+        url:'/api/' + 'news/list',
+        method:'post',
+      }).then(res => {
+        // console.log(res);
+        this.newList=res.data.message.list
+        
+      })
+    },
+    goBefore() {
+      this.$router.back(-1);
+    },
+    getMore() {
+    },
+    goDetail(id) {
+      var id = id;
+      this.$router.push({
+        name: "noticeDetail",
+        query: { id: id }
+      });
+    }
+  },
+  mounted(){
+      var that = this;
+      that.getNotice();
+    }
+};
+</script>
+<style lang="scss" scoped>
+.notice {
+  .account-wrap {
+    // background: url(../assets/images/account_center_bg.jpg) no-repeat;
+    // background-size: cover;
+    .account {
+      // width: 1500px;
+      margin: 0 auto;
+      // padding-top: 30px;
+      overflow: hidden;
+      // min-height: 880px;
+      padding-top: 0;
+      .back-nav {
+        height: 40px;
+        font-size: 16px;
+        line-height: 40px;
+      }
+      .nav-after {
+        display: block;
+        height: 10px;
+        background-color: #262a42;
+      }
+      .account-content {
+        width: 100%;
+        min-height: 450px;
+        background-color: #181b2a;
+        ul {
+          padding: 0 20px;
+          font-size: 14px;
+          li {
+            border-bottom: 1px dashed #303b4b;
+            height: 72px;
+            padding: 10px 0 7px;
+            color: #cdd6e4;
+                font-size: 12px;
+            > div {
+              > div {
+                height: 36px;
+                line-height: 18px;
+              }
+              span{
+                  color: #61688a;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+
+
+
+
+// WEBPACK FOOTER //
+// src/view/lever/lever_noticeList.vue
\ No newline at end of file
diff --git a/src/view/lever/lever_trade.vue b/src/view/lever/lever_trade.vue
new file mode 100644
index 0000000..8bc3648
--- /dev/null
+++ b/src/view/lever/lever_trade.vue
@@ -0,0 +1,2372 @@
+<template>
+	<div class="trade trade_new">
+		<div class="tel-tb">
+			<div class="mi" style="width: 48%;  background: #00f0ff;color: #fff; border-radius: 50px;"
+				@click="telShow22=true">
+				買進(做多)
+			</div>
+			<div class="mi" style="width: 48%; background: #ff4834; color: #fff; border-radius: 50px;"
+				@click="telShow22=true">
+				賣出(做空)
+			</div>
+		</div>
+		<div class="sadada" v-if="telShow22">
+			<div class="sdsdsfs" style="text-align: right;padding-top: 10px;" @click="telShow22=false">
+				<i class="el-icon-circle-close"></i>
+			</div>
+			<div class="zjbzb">
+				<div class="top-area">
+					<div class="sdgfsdf" @click="jcShow=true"><span class="dsds">{{ cindex == "0" ? "逐倉" : "全倉" }}</span>
+						<i class="el-icon-caret-bottom
+			" style="color: #7a7a97;"></i>
+					</div>
+					<div class="sdgfsdf" @click="jcShow2=true">
+						<span class="dsds">{{value || 10}}x</span>
+						<i class="el-icon-caret-bottom
+							" style="color: #7a7a97;"></i>
+					</div>
+				</div>
+
+				<div class="tabs-list">
+					<div class="sdd" :class="{'sddAvtive':item.type==activeName}" @click="activeName=item.type"
+						v-for="(item,index) in tabsList">{{item.text}}</div>
+				</div>
+
+
+
+				<div class="xadxa">
+					<div class="zjbzb">
+						<div class="bi-input1" v-if="activeName=='first'">
+							<span class="bi-l">價格(USDC)</span>
+							<span class="bi-r">以當前市場最優價格下單</span>
+						</div>
+
+
+						<div class="shl" v-else>
+							<div class="bi-input33">
+								<span class="bi-kdk">價格(USDC)</span>
+								<input class="ccsd" type="number" :placeholder='$t("tv.price_input")' v-model="inputPrice" />
+
+							</div>
+							<div class="dsd-r">
+								<span class="adasda">對手價</span>
+							</div>
+						</div>
+
+
+						<div class="sl-input" v-else>
+							<input type="number" :placeholder='$t("tv.price_input")' v-model="inputPrice" />
+						</div>
+
+						<div class="shl">
+							<div class="bi-input33">
+								<span class="bi-kdk">{{$t('option.amount')}}(USDC)</span>
+								<input class="ccsd" :placeholder="$t('batchData.投入金額')" v-model="amountInput"
+									type="text" @input="onAmountChange" oninput="value=value.replace(/[^\d.]/g,'').replace(/(\..*)\./g, '$1')" />
+							</div>
+							<div class="dsd-r">
+								<span class="adasda">USDC</span>
+							</div>
+						</div>
+
+						<div class="slider-box">
+							<el-slider height="2px" v-model="sliderOut" :max='100' :step="1" :marks="marks"
+								@change="onSliderChange(sliderOut)"></el-slider>
+						</div>
+
+
+						<div class="hfgh">
+							<span class="f-l">{{$t('option.available')}}</span>
+							<span class="f-r">{{user_legal}} USDC</span>
+							<img src="@/assets/43.svg" />
+						</div>
+
+
+						<div class="checked-c">
+							<div class="cc-item">
+								<el-checkbox v-model="checked">止盈</el-checkbox>
+							</div>
+							<div class="cc-item">
+								<el-checkbox v-model="checked1">停損</el-checkbox>
+							</div>
+							<img class="cc-img" src="@/assets/44.svg" />
+
+						</div>
+
+
+						<div class="shl shl2" v-if="checked">
+							<div class="bi-input33">
+								<span class="bi-kdk">止盈觸發價</span>
+								<input class="ccsd" placeholder="请输入" v-model="target_profit_price" type="text"
+									oninput="value=value.replace(/^(0+)|[^\d]+/g,'')" />
+							</div>
+							<div class="dsd-r">
+
+								<input class="dr-input" placeholder="漲幅" v-model="increase" type="text" />
+								<span class="hgj">%</span>
+							</div>
+						</div>
+						<div class="shl shl2" v-if="checked1">
+							<div class="bi-input33">
+								<span class="bi-kdk">停損觸發價</span>
+								<input class="ccsd" placeholder="请输入" v-model="stop_loss_price" type="text"
+									oninput="value=value.replace(/^(0+)|[^\d]+/g,'')" />
+							</div>
+							<div class="dsd-r">
+
+								<input class="dr-input" placeholder="跌幅" v-model="increase1" type="text" />
+								<span class="hgj">%</span>
+							</div>
+						</div>
+						<div class="xdButt" @click="buyCoin">
+							{{$t("tv.buy_go_long")}}
+						</div>
+
+
+						<div class="daqdfqad">
+							<div class="xdButt" style="display: flex;" @click="buyCoin"> 買進(做多) </div>
+							<div class="xdButt"  @click="sellCoin" style="background: rgb(255, 72, 52); display: flex;"> 賣出(做空) </div>
+						</div>
+
+
+						<div class="dqye">
+							<span class="tjys">{{$t('option.available')}}</span>
+							<span class="">{{user_legal}} USDC</span>
+						</div>
+						<div class="dqye">
+							<span class="tjys">{{$t('zjde95')}}</span>
+							<span class="">{{ "≈ " + (bons|| 0) + ' USDC' }}</span>
+
+						</div>
+					</div>
+
+					<div class="zjbzb">
+						<div class="bi-input1" v-if="activeName=='first'">
+							<span class="bi-l">{{$t('option.price')}}(USDC)</span>
+							<span class="bi-r">以當前市場最優價格下單</span>
+						</div>
+
+
+						<div class="shl" v-else>
+							<div class="bi-input33">
+								<span class="bi-kdk">{{$t('option.price')}}(USDC)</span>
+								<input class="ccsd" type="number" :placeholder='$t("tv.price_input")' v-model="inputPrice" />
+
+							</div>
+							<div class="dsd-r">
+								<span class="adasda">對手價</span>
+							</div>
+						</div>
+
+
+						<div class="sl-input" v-else>
+							<input type="number" :placeholder='$t("tv.price_input")' v-model="inputPrice" />
+						</div>
+
+						<div class="shl">
+							<div class="bi-input33">
+								<span class="bi-kdk">{{$t('option.amount')}}(USDC)</span>
+								<input class="ccsd" :placeholder="$t('batchData.投入金額')" v-model="amountInput"
+									type="text" @input="onAmountChange" oninput="value=value.replace(/[^\d.]/g,'').replace(/(\..*)\./g, '$1')" />
+							</div>
+							<div class="dsd-r">
+								<span class="adasda">USDC</span>
+							</div>
+						</div>
+
+						<div class="slider-box">
+							<el-slider height="2px" v-model="sliderOut2" :max='100' :step="1" :marks="marks"
+								@change="onSliderChange(sliderOut2)"></el-slider>
+						</div>
+
+
+						<div class="hfgh">
+							<span class="f-l">{{$t('option.available')}}</span>
+							<span class="f-r">{{user_legal}} USDC</span>
+							<img src="@/assets/43.svg" />
+						</div>
+
+
+						<div class="checked-c">
+							<div class="cc-item">
+								<el-checkbox v-model="checked2">止盈</el-checkbox>
+							</div>
+							<div class="cc-item">
+								<el-checkbox v-model="checked3">停損</el-checkbox>
+							</div>
+							<img class="cc-img" src="@/assets/44.svg" />
+
+						</div>
+
+
+						<div class="shl shl2" v-if="checked2">
+							<div class="bi-input33">
+								<span class="bi-kdk">止盈觸發價</span>
+								<input class="ccsd" placeholder="请输入" v-model="target_profit_price" type="text"
+									oninput="value=value.replace(/^(0+)|[^\d]+/g,'')" />
+							</div>
+							<div class="dsd-r">
+
+								<input class="dr-input" placeholder="漲幅" v-model="increase2" type="text" @change="changeValue" />
+								<span class="hgj">%</span>
+							</div>
+						</div>
+						<div class="shl shl2" v-if="checked3">
+							<div class="bi-input33">
+								<span class="bi-kdk">停損觸發價</span>
+								<input class="ccsd" placeholder="请输入" v-model="stop_loss_price" type="text"
+									oninput="value=value.replace(/^(0+)|[^\d]+/g,'')" />
+							</div>
+							<div class="dsd-r">
+
+								<input class="dr-input" placeholder="跌幅" v-model="increase3" type="text" @change="changeValue" />
+								<span class="hgj">%</span>
+							</div>
+						</div>
+						<div class="xdButt" @click="sellCoin" style="background: #ff4834;">
+							{{$t("tv.sell_short")}}
+						</div>
+
+
+						<div class="dqye">
+							<span class="tjys">{{$t('option.available')}}</span>
+							<span class="">{{user_legal}} USDC</span>
+						</div>
+						<div class="dqye">
+							<span class="tjys">{{$t('zjde95')}}</span>
+							<span class="">{{ "≈ " + (bons || 0) + ' USDC' }}</span>
+
+						</div>
+
+					</div>
+				</div>
+
+			</div>
+
+			<div class="split-line"></div>
+
+			<div class="label">合約交易說明</div>
+			<p class="info">除進行幣幣/現貨交易賺取幣價上漲帶來收益外，投資者可以通過買入做多或賣出做空的合約交易，獲取“標的”價格漲跌所產生的收益。
+				例如，當看漲BTC並做多時，BTC價格上漲會帶來盈利，下跌會帶來虧損；反之，看跌BTC並做空時，BTC價格上漲反而會帶來虧損，下跌則會帶來盈利。
+				因此，比特幣下跌時也有獲得收益的機會，即通過合約交易賺取幣種漲跌帶來的收益。</p>
+		</div>
+
+
+		<div class="zc" v-if="telShow"></div>
+		<div class="tn-top" v-if="false">
+			<div class="tn-head">
+				<span>
+					{{$t('zjde91')}}
+				</span>
+				<i class="el-icon-close dsada" style="font-size: 20px;" @click="telShow=false"></i>
+
+			</div>
+			<div class="tn-cn">
+				<div class="tabs-h">
+					<div class="th-i" :style="{color:item.type==activeName?'#f0c163':'#666'}" v-for="(item,index) in tabsList"
+						@click="activeName=item.type">{{item.text}}</div>
+				</div>
+				<div class="kysl">
+					<span>{{$t('zjde92')}} </span>
+					<span class="kl-num">
+						{{user_legal + ' ' + legal_name}}
+					</span>
+				</div>
+				<div class="sl-input" v-if="activeName=='second'">
+					<input type="number" :placeholder='$t("tv.price_input")' v-model="inputPrice" />
+				</div>
+				<div class="sl-input">
+					<input v-model="sahre" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')" @input="changeValue" type="number"
+						:placeholder='$t("tv.input_buy_num")' />
+				</div>
+				<div class="bfb">
+					<div class="bfzds" v-for="(k,v) in marks" @click="changSahre(v)">{{k}}</div>
+				</div>
+				<div class="hp" style="color: #f0c163;">
+					<div class="hp-myg">{{$t('zjde93')}}</div>
+					<div class="hp-myg">{{(user_legal / 1030).toFixed(2)}} {{$t('zjde94')}} </div>
+				</div>
+
+				<div class="hp">
+					<div class="hp-myg">{{$t('zjde95')}}</div>
+					<!-- <div class="hp-myg">{{ "≈ " + (bons||"0.0000") + ' ' + legal_name }}</div> -->
+					<div class="hp-myg">{{ "≈ " + (sahre * 1000) + ' ' + legal_name }}</div>
+				</div>
+				<div class="hp">
+					<div class="hp-myg"> {{$t('zjde96')}}</div>
+					<!-- <div class="hp-myg">{{ "≈ " + (trandeFree||"0.0000") + ' ' + legal_name }}</div> -->
+					<div class="hp-myg">{{sahre * 30}} </div>
+				</div>
+				<div class="mm">
+					<div class="mi" @click="buyCoin">
+						{{$t("tv.buy_go_long")}}
+					</div>
+					<div class="mi" @click="sellCoin" style="background: #f36464;">
+						{{$t("tv.sell_short")}}
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- <div class="tel-tb">
+
+
+			<div class="mi" style="width: 48%; margin-top: 1rem; background: #00a870;color: #fff;"
+				@click="activeName='first',telShow=true">
+				{{ $t('dealTv.market_price')}}
+			</div>
+			<div class="mi" style="width: 48%; margin-top: 1rem; background: #f36464; color: #fff;"
+				@click="activeName='second',telShow=true">
+				{{$t('dealTv.price_limit')}}
+			</div>
+		</div>
+		<div class="tn-bott" v-if="false">
+			<div class="tb-h"> {{$t('zjde38')}}</div>
+			<div class="tb-i" @click="goPages('deposit')">{{$t('accountCenter.deposit')}}</div>
+			<div class="tb-i" @click="goPages('withdrawDeposit')">{{$t('other.withdraw_coins')}}</div>
+			<div class="tb-i" @click="setto(),dialogVisible=true">{{$t('trade.transfer')}}</div>
+		</div> -->
+
+
+
+
+
+
+		<!-- <el-dialog :title="$t('tv.transfer')" :visible.sync="dialogVisible" width="450px" :before-close="handleClose">
+			<div class="transfer-box">
+
+				<div class="zchz">
+					<div class="zz-l">
+						<div class="zl-y"></div>
+						<div class="zl-x"></div>
+						<img class="z-img" src="@/assets/hz.png" />
+						<div class="zl-x"></div>
+						<div class="zl-y" style="border: 0.125rem solid #f6465d;"></div>
+					</div>
+					<div class="zz-r">
+						<div class="z-t">{{$t('accountNewPage.from')}}</div>
+						<div class="as">
+							<el-select v-model="form.from_field" :placeholder="$t('tv.el_select_placeholder')" @change="setto">
+								<el-option v-for="item in hzList" :key="item.value" :label="item.tetx" :value="item.value">
+								</el-option>
+							</el-select>
+						</div>
+						<div class="z-t">{{$t('accountNewPage.reach')}}</div>
+						<el-select v-model="form.to_field" :placeholder="$t('tv.el_select_placeholder')">
+							<el-option v-for="item in hzList2" :key="item.value" :label="item.tetx" :value="item.value">
+							</el-option>
+						</el-select>
+					</div>
+				</div>
+				<div class="i-t">{{$t('accountNewPage.label_currency')}}</div>
+				<div class="i-i">
+					<el-select v-model="form.currency_id" :placeholder="$t('tv.el_select_placeholder')" @change="currencyChange">
+						<el-option v-for="item in AssetCurrencyList" :key="item.id" :label="item.currency_name"
+							:value="item.currency">
+						</el-option>
+					</el-select>
+				</div>
+				<div class="i-t">{{$t('change.transfer_amount')}}</div>
+				<div class="i-i">
+					<el-input v-model="form.number" :placeholder="$t('change.transfer_amount_input')"></el-input>
+				
+					<span class="all" @click.stop="form.number = change_balance">{{$t('complete.all')}}</span>
+				</div>
+				<div class="i-t">{{$t('secondContract.balance')}}：{{change_balance}}</div>
+				<div class="butt" @click="transferSubmis">
+					{{$t('secondContract.transfer')}}
+				</div>
+			</div>
+		</el-dialog> -->
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+		<!-- <div class="content padding20 scrolls" v-if="false">
+			<div style="display: flex; justify-content: space-between;">
+				<div>
+					<span class="fl text-color-normalColor">{{$t("tv.available")}}</span>  
+					<span>{{user_legal + ' ' + legal_name}}</span>
+				</div>
+				<div>
+					<span style="display: inline-block;"><a href="#/finance">
+							<div class="actions_headerRight__WdpFG">
+								<div class="actions_marginLink__MMXMy actions_margin___YAA_">
+									{{$t("tv.transfer")}}
+								</div>
+							</div>
+						</a></span>
+				</div>
+			</div>
+			<div>
+				<div class="input-item mt10" v-if="activeName == 'second'">
+					<label>{{$t("tv.price")}}</label>
+					<input type="number" class="bg-p23c bd input_color flex1" :placeholder='$t("tv.price_input")'
+						v-model="inputPrice" />
+				</div>
+				<div class="input-item mt10" v-if="activeName == 'second'">
+					<label style="width:40%">{{$t("tv.take_profit_price")}}</label>
+					<el-input-number v-model="target_profit_price" class="bg-p23c bd input_color flex1 new_input_num"
+						controls-position="right" :min="0.1" :step="0.1" :precision="4"></el-input-number>
+				</div>
+				<div class="input-item mt10" v-if="activeName == 'second'">
+					<label style="width:40%">{{$t("tv.stop_loss_price")}}</label>
+					<el-input-number v-model="stop_loss_price" class="bg-p23c bd input_color flex1 new_input_num"
+						controls-position="right" :min="0.1" :step="0.1" :precision="4"></el-input-number>
+				</div>
+				<div class="input-item mt10" v-if="activeName == 'first'">
+					<input type="text" class="" :value='$t("tv.best_price")' disabled="disabled"
+						style="text-align: left; text-indent: 0px; color: rgb(139, 142, 148);" />
+				</div>
+				<div class="inputtimes mt10">
+					<label>{{$t("tv.inputtimes")}}</label>
+					<el-select class="t_select" style="width: 240px;" :placeholder='$t("tv.el_select_placeholder")'
+						v-model="value" @change="selectMuit">
+						<el-option v-for="item in options" :key="item.value" :label="item.value + ' X'"
+							:value="item.value"></el-option>
+					</el-select>
+				</div>
+				<div class="shareNum" v-if="shareNum">
+					{{ " 1" + $t("tv.hand") + $t("tv.equal") + shareNum + legal_name + ' '}}
+				</div>
+				<div class="mt10 input-item">
+					<label style="color: rgb(139, 142, 148);">{{$t("tv.num")}}</label>
+					<div class="flex share-total flex1">
+						<input v-model="sahre" @input="changeValue" type="number" :placeholder='$t("tv.input_buy_num")'
+							class="share-input bg-part input_color" />
+					</div>
+				</div>
+				<div class="mt10 ml15 mr15">
+					<el-slider v-model="value1" :marks="marks" @change="changSahre">
+
+					</el-slider>
+				</div>
+				<div class="lever-total fColorcf">
+					<p class="mt15"><span>{{$t("tv.contract_market_capitalization")}}</span><br /><span
+							class="market-value">{{ "≈ " + (totalPrice||"0.0000") + ' ' + legal_name }}</span></p>
+					<p class="mt10"><span>{{$t("tv.deposit")}}</span> <br /><span
+							class="bond">{{ "≈ " + (bons||"0.0000") + ' ' + legal_name }}</span></p>
+					<p class="mt10"><span>{{$t("tv.transaction_service_fees")}}</span><br /><span
+							class="transaction-fee">{{ "≈ " + (trandeFree||"0.0000") + ' ' + legal_name }}</span></p>
+				</div>
+				<div class="spottrading">
+					<div class="spottrading-btn curPer mt40 tc greenBack white" @click="buyCoin">
+						{{$t("tv.buy_go_long")}}
+					</div>
+					<div class="spottrading-btn curPer mt40 tc redBack white" @click="sellCoin">
+						{{$t("tv.sell_short")}}
+					</div>
+				</div>
+			</div>
+		</div> -->
+		<!-- 买入卖出弹窗 -->
+		<div class="comfirm-modal flex" v-show="comfirmShow">
+			<div class="comfirm-modal-content">
+				<div class="loss-modal-header">
+					<h3>{{ $t('tv.sureOd') }}</h3>
+					<p @click="closeMosal()" class="curPer"><i class="el-icon-close"></i></p>
+				</div>
+				<ul>
+					<li class="flex">
+						<p>{{ currency_name }}/{{ legal_name }}</p>
+					</li>
+					<li class="flex">
+						<p>{{ $t('tv.type') }}：</p>
+						<p>{{ buyType == '1' ? $t('tv.buy_go_long') : $t('tv.sell_short') }}</p>
+					</li>
+					<li class="flex">
+						<p>{{ $t('tv.hands') }}：</p>
+						<p>{{ sahre }}</p>
+					</li>
+					<li class="flex">
+						<p>{{ $t('tv.timed') }}：</p>
+						<p>{{ value }}</p>
+					</li>
+					<li class="flex">
+						<p>{{ $t("tv.bail") }}：</p>
+						<p>{{ sahre * 1000 }}{{ legal_name }}</p>
+					</li>
+					<li class="flex">
+						<p>{{ $t("tv.charge") }}：</p>
+						<p>{{ trandeFree }}{{ legal_name }}</p>
+					</li>
+				</ul>
+				<div class="modal-btn" style="display: flex;">
+					<!-- <el-button-group style="width: 100%; height: 40px;"> -->
+					<el-button style="padding: 0;" @click="closeMosal()" size="medium" type="info">{{
+              $t('tv.canceil') }}
+					</el-button>
+					<el-button style="padding: 0; margin-left: 0;" @click="comfirm()" size="medium" type="primary">{{
+              $t('tv.confirm') }}
+					</el-button>
+					<!-- </el-button-group> -->
+					<!--          <el-button type="button" @click="closeMosal()">{{ $t('td.canceil') }}</el-button>-->
+					<!--          <el-button type="button" @click="comfirm()">{{ $t('td.confirm') }}</el-button>-->
+				</div>
+			</div>
+		</div>
+
+
+		<div class="jc-tc" v-if="jcShow">
+			<div class="tz-box">
+				<div class="sb-title">保證金模式 </div>
+				<div class="sx-colse" @click="jcShow =false">
+					<i class="el-icon-close sdsd"></i>
+				</div>
+				<div class="jt-cn">
+
+					<div class="top-btn-wrap">
+						<div class="btn" :class="{'active':item.type == cindex}" v-for="(item,index) in clist" :key="index"
+							@click="cindex = item.type">{{item.title}}</div>
+						<!-- <div class="btn">全倉</div> -->
+					</div>
+					<div class="content">
+						<div class="tip1">調整保證金模式僅對目前交易標的生效</div>
+						<div>什麼是全倉和逐倉保證金模式</div>
+						<div>
+							<p>全倉模式： </p>
+							<p>保證金資產相同的全倉位共享對應資產的全倉保證金，在強平事件中，交易者可能隨時全部對應保證金和對應保證金資產下的所有全倉位</p>
+						</div>
+						<div>
+							<p>逐倉模式：</p>
+							<p>下單成交後，所形成部位保證金及盈虧獨立核算，逐倉部位風險與全倉位隔離，在強平事件中，交易者只會損失該部位下的全部保證金</p>
+						</div>
+					</div>
+				</div>
+				<div class="confirm-btn" @click="confirmMarginMode">確認</div>
+			</div>
+		</div>
+		<div class="jc-tc" v-if="jcShow2">
+			<div class="tz-box">
+				<div class="sb-title">調整槓桿</div>
+				<div class="sx-colse" @click="jcShow2 =false">
+					<i class="el-icon-close sdsd"></i>
+				</div>
+				<div class="jt-cn">
+
+					<div class="info"><img class="logo" src="/uploads/d081c44d109042fcb7e47ce12ef21031.png"
+							alt=""><span class="h5Name">BTC/USDC</span><span class="tag">{{ cindex == "0" ? "逐倉" : "全倉" }}</span></div>
+					<div class="select-row">
+						<ul class="ul">
+							<li :class="{'active':value==item.value}" v-for="(item,index) in options" :key="index"
+								@click="value=item.value">{{item.value}}x</li>
+
+						</ul>
+					</div>
+
+					<div class="row"><span>當前最大槓桿倍數</span><span>{{value}}x</span></div>
+					<div class="row"><span>可用餘額</span><span>{{user_legal}} USDC</span></div>
+				</div>
+				<div class="confirm-btn" style="font-weight: bold;" @click="jcShow2 =false">確認</div>
+			</div>
+		</div>
+
+	</div>
+</template>
+
+<script>
+	export default {
+		name: "trade",
+		data() {
+			return {
+
+				sliderOut: 0,
+				sliderOut2: 0,
+
+				dialogVisible: false,
+				tabList: this.$t('zjde107'),
+				hzList: [],
+				hzList2: [],
+				form: {
+					currency_id: '',
+					number: '',
+					from_field: 'change',
+					to_field: ''
+
+				},
+
+
+				AssetCurrencyList: [],
+				change_balance: 0,
+				data: [],
+
+				bslist: [{
+						value: '50',
+						type: 1
+					},
+					{
+						value: '75',
+						type: 2
+					},
+					{
+						value: '100',
+						type: 3
+					},
+					{
+						value: '200',
+						type: 4
+					}
+				],
+				bsIndex: 1,
+
+				marks: {
+					0: "0%",
+					25: "25%",
+					50: "50%",
+					75: "75%",
+					100: "100%"
+				},
+				comfirmShow: !1,
+				stop_loss_price: 0,
+				target_profit_price: 0,
+				currency_name: "",
+				currency_id: "",
+				legal_name: "",
+				legal_id: "",
+				buyType: "",
+				sahre: "",
+				amountInput: "",
+				cachedShareValue: 0,
+				cachedLeverShareNum: 0,
+				bons: "",
+				inputPrice: 0,
+				trandeFree: "",
+				user_legal: "",
+				totalPrice: 0,
+				selectedStatus: 1,
+				newPrice: 0,
+				shareNum: "",
+				buyInfo: {
+					buy_selected: "",
+					buyNum: 0,
+					url: "lever/submit"
+				},
+				sellInfo: {
+					sell_selected: "",
+					sellNum: 0,
+					url: "lever/submit"
+				},
+				options: [],
+				value: "",
+				value1: 0,
+				widget: null,
+				symbolInfo: null,
+				tabsList: [{
+						text: "市價委託",
+						type: 'first'
+					},
+
+					{
+						text: "限價委託",
+						type: 'second'
+					}
+				],
+				activeName: "first",
+				feed: null,
+				wsEx: null,
+				ws: null,
+				lists: [],
+				newData: "",
+				symbol: "",
+				priceScale: 1e5,
+				histime: "",
+				leftName: "",
+				rightName: "",
+				lastPrice: "0.0000",
+				lastPrice2: "0.0000",
+				change: "0.00",
+				highPrice: "0.0000",
+				lowPrice: "0.0000",
+				volumn: "0.00",
+				rateNum: 1,
+				loadingK: !1,
+				showMarketlist: !1,
+				hd: !1,
+				currentPrice: 0,
+				telShow: true,
+				checked: false,
+				checked1: false,
+				checked2: false,
+				checked3: false,
+				checkedValue: "",
+				checkedValue1: "",
+				checkedValue2: "",
+				checkedValue3: "",
+
+				increase: "",
+				increase1: "",
+				increase2: "",
+				increase3: "",
+
+				jcShow: false,
+				clist: [{
+						title: "逐倉",
+						type: "0"
+					},
+					{
+						title: "全倉",
+						type: "1"
+					}
+				],
+				cindex: 0,
+				jcShow2: false,
+				telShow22: true,
+			};
+		},
+		created() {
+			this.hzList = this.tabList.filter((item, index) => index != 0)
+			var curScreenWidth = document.documentElement.clientWidth;
+			if (curScreenWidth < 800) {
+				this.telShow = false
+				this.telShow22 = false
+			}
+			this.symbol = window.localStorage.getItem("symbol"),
+				this.leftName = window.localStorage.getItem("legal_name") || "",
+				this.rightName = window.localStorage.getItem("currency_name") || "",
+				this.currencyId = window.localStorage.getItem("legal_id"),
+				this.legalId = window.localStorage.getItem("currency_id"),
+				this.downUp = window.localStorage.getItem("downUp")
+
+
+			this.sockets.subscribe('kline', msg => {
+				if (msg.type == 'kline') {
+					if (msg.symbol == localStorage.getItem('symbol')) {
+
+
+						// console.log('当前价',msg.close)
+						this.currentPrice = msg.close
+
+					}
+				}
+			})
+
+
+
+		},
+		filters: {
+			toFixedN(t, e) {
+				return (t - 0).toFixed(e)
+			}
+		},
+		updated() {
+			this.lastPrice2 = localStorage.getItem("BEF_NOW")
+		},
+		computed: {
+			listenState() {
+				return this.symbol
+			}
+		},
+		watch: {
+			listenState: function(t, e) {
+				t != e && "" != e && this.widget.setSymbol(t, localStorage.getItem("tim"), (function() {}))
+			}
+		},
+		mounted() {
+			let that = this;
+			that.address = localStorage.getItem("token") || "";
+			that.legal_id = localStorage.getItem("legal_id");
+			that.currency_id = localStorage.getItem("currency_id");
+			that.legal_name = localStorage.getItem("legal_name");
+			that.currency_name = localStorage.getItem("currency_name");
+			that.buy_sell(that.legal_id, that.currency_id);
+			that.init2()
+			// that.minFont = that.useMinFont();
+			eventBus.$on("tocel", function(datas) {
+				if (datas) {
+					that.buy_sell(that.legal_id, that.currency_id);
+				}
+			});
+
+
+			eventBus.$on('updateKLine', res => {
+				// console.log(res);
+				if (res.period === '1min') {
+
+					if (that.newPrice === 0) {
+						that.newPrice = (res.close - 0).toFixed(4);
+						that.inputPrice = that.newPrice;
+						that.sellInputValue = that.newPrice;
+					} else {
+						that.newPrice = (res.close - 0).toFixed(4);
+					}
+				}
+			});
+
+			// this.$http({
+			//   url: "/api/" + "currency/quotation_new",
+			//   method: "get",
+			//   data: {},
+			//   headers: {Authorization: localStorage.getItem("token")}
+			// }).then(res => {
+			//   that.spreadInfo = res.data.message[0].quotation;
+			//   let list = that.spreadInfo;
+			//   for (let i in list) {
+			//     if (that.currency_id == list[i].currency_id) {
+			//       this.currencyQInfo = list[i];
+			//     }
+			//   }
+			// });
+		},
+		methods: {
+
+			// 确认保证金模式
+			confirmMarginMode() {
+				// 保存选择的保证金模式
+				console.log('选择的保证金模式:', this.cindex); // 0: 逐仓, 1: 全仓
+				
+				// TODO: 这里可以添加保存到后端的API调用
+				// this.$http({
+				//   url: "/api/lever/set_margin_mode",
+				//   method: "post",
+				//   data: {
+				//     mode: this.cindex,
+				//     legal_id: this.legal_id,
+				//     currency_id: this.currency_id
+				//   },
+				//   headers: {
+				//     Authorization: localStorage.getItem("token")
+				//   }
+				// }).then(res => {
+				//   if (res.data.type == "ok") {
+				//     this.$message.success("保證金模式設置成功");
+				//     this.jcShow = false;
+				//   }
+				// }).catch(error => {
+				//   this.$message.error("設置失敗");
+				// });
+				
+				// 暂时只关闭对话框
+				this.$message.success("保證金模式已設置為: " + (this.cindex == "0" ? "逐倉" : "全倉"));
+				this.jcShow = false;
+			},
+
+
+			setto() {
+
+				let obj = this.hzList.filter(item => item.value == this.form.from_field)[0]
+
+				this.AssetCurrencyList = this.data[obj.type].balance || []
+				this.hzList2 = this.hzList.filter(item => item.value != this.form.from_field)
+				this.form.to_field = ''
+				this.form.currency_id = ''
+				this.change_balance = 0
+			},
+
+			currencyChange(e) {
+
+				if (this.form.from_field == 'change') {
+					this.change_balance = this.AssetCurrencyList[e - 1].change_balance
+				}
+				if (this.form.from_field == 'micro') {
+					this.change_balance = this.AssetCurrencyList[e - 1].micro_balance
+				}
+				if (this.form.from_field == 'lever') {
+					this.change_balance = this.AssetCurrencyList[e - 1].lever_balance
+				}
+				if (this.form.from_field == 'legal') {
+					this.change_balance = this.AssetCurrencyList[e - 1].legal_balance
+				}
+
+
+
+
+			},
+
+
+			transferSubmis() {
+				if (this.form.to_field == '') return this.$message.error(this.$t("change.please_select_an_account"))
+				if (this.form.number == '') return this.$message.error(this.$t("change.transfer_amount_input"))
+				if (this.form.currency_id == '') return this.$message.error(this.$t("change.please_select_currency"))
+				if (this.form.number * 1 > this.change_balance * 1) return this.$message.error(this.$t(
+					"accountNewPage.insufficient_balance"))
+				let loa = this.$loading({
+					lock: true,
+					text: 'Loading',
+
+				});
+				this.$http({
+					url: "/api/wallet/change",
+					method: "post",
+					data: this.form,
+					headers: {
+						Authorization: localStorage.getItem("token")
+					}
+				}).then(a => {
+					loa.close();
+					this.dialogVisible = false
+					this.form.currency_id = ''
+					this.form.number = ''
+					this.$message({
+						message: this.$t("czcc"),
+						type: 'success'
+					})
+					this.buy_sell(this.legal_id, this.currency_id);
+					this.init2()
+
+				})
+
+
+
+			},
+
+
+			init2() {
+
+
+
+				var that = this;
+				this.$http({
+						url: "/api/wallet/list",
+						method: "post",
+						data: {},
+						headers: {
+							Authorization: localStorage.getItem("token")
+						}
+					})
+					.then(res => {
+						if (res.data.type == "ok") {
+							this.data = res.data.message
+							// that.walletList = res.data.message.micro_wallet.balance;
+						} else {
+							return;
+						}
+					})
+					.catch(error => {
+						console.log(error);
+					});
+			},
+
+
+
+
+			goPages(name) {
+				this.$router.push({
+					name: name
+				});
+			},
+			changSahre(t) {
+				this.onSliderChange(t);
+			},
+
+			changSahre2(t) {
+				this.onSliderChange(t);
+			},
+
+			onSliderChange(t) {
+				var amount = (this.user_legal * t / 100).toFixed(2);
+				this.amountInput = amount > 0 ? amount : '';
+				this.convertAmountToShares();
+			},
+
+			onAmountChange() {
+				this.convertAmountToShares();
+			},
+
+			convertAmountToShares() {
+				if (!this.amountInput || parseFloat(this.amountInput) <= 0) {
+					this.sahre = '';
+					this.bons = '';
+					this.totalPrice = 0;
+					this.trandeFree = 0;
+					return;
+				}
+				if (this.cachedShareValue > 0) {
+					this.sahre = Math.floor(parseFloat(this.amountInput) / this.cachedShareValue);
+					if (this.sahre > 0) {
+						this.changeValue();
+					}
+				} else {
+					this.fetchShareInfo();
+				}
+			},
+
+			fetchShareInfo() {
+				var that = this;
+				this.$http({
+					url: "/api/currency/quotation_new",
+					method: "get",
+					data: {},
+					headers: { Authorization: localStorage.getItem("token") }
+				}).then(function(res) {
+					if (res.data.type == "ok") {
+						var quotation = res.data.message[0].quotation;
+						for (var i in quotation) {
+							if (that.currency_id == quotation[i].currency_id) {
+								that.cachedLeverShareNum = parseFloat(quotation[i].lever_share_num);
+								var nowPrice = parseFloat(quotation[i].now_price);
+								that.cachedShareValue = that.cachedLeverShareNum * nowPrice;
+								if (that.amountInput && parseFloat(that.amountInput) > 0) {
+									that.convertAmountToShares();
+								}
+								break;
+							}
+						}
+					}
+				});
+			},
+			changeValue() {
+				console.log('9999')
+				let t = this;
+				if (t.totalPriceBuy = 0,
+					t.trandeFreeBuy = 0,
+					t.bonsBuy = 0,
+					t.totalPrice = 0,
+					t.trandeFree = 0,
+					t.bons = 0,
+					t.type = "-1",
+					"" != t.sahre)
+					if (t.sahre < t.minShare)
+						layer.msg(this.$t("tv.lessnum") + (100 * t.minShare).toFixed(0) + "%");
+					else if (t.maxShare > 0 && t.sahre > t.maxShare)
+					layer.msg(this.$t("tv.morenum") + t.maxShare);
+				else if (0 != t.selectedStatus) {
+					t.types = "";
+					var e = parseFloat(localStorage.getItem("lastPrice")).toFixed(4),
+						a = parseFloat(t.value).toFixed(4),
+						s = parseFloat(t.sahre).toFixed(4);
+					t.pricesType(e, s, a)
+				} else
+					t.totalPriceBuy = 0,
+					t.trandeFreeBuy = 0,
+					t.bonsBuy = 0,
+					t.totalPrice = 0,
+					t.trandeFree = 0,
+					t.bons = 0
+			},
+			pricesType(t, e, a) {
+				let s = this;
+				// var i = layer.load(1);
+				this.$http({
+					url: "/api/currency/quotation_new",
+					method: "get",
+					data: {},
+					headers: {
+						Authorization: localStorage.getItem("token")
+					}
+				}).then(i => {
+					if ("ok" == i.data.type) {
+						var n = i.data.message[0].quotation;
+						for (let i in n)
+							if (s.currency_id == n[i].currency_id) {
+								var r = parseFloat(n[i].spread).toFixed(4),
+									o = parseFloat(n[i].lever_trade_fee).toFixed(4),
+									c = parseFloat(parseFloat(1 * t) * r / 100).toFixed(4),
+									l = 0;
+								l = parseFloat(parseFloat(1 * t) + (c - 0)).toFixed(4),
+									a = parseFloat(a).toFixed(4),
+									e = parseFloat(e).toFixed(4);
+								var d = parseFloat(n[i].lever_share_num).toFixed(4);
+								s.shareNum = (d * n[i].now_price).toFixed(4);
+								s.cachedLeverShareNum = parseFloat(d);
+								s.cachedShareValue = parseFloat(s.shareNum);
+								var u = parseFloat(l * e * d).toFixed(4),
+									p = parseFloat((u - 0) / (a - 0)).toFixed(4),
+									m = parseFloat(u * o / 100).toFixed(4);
+								s.totalPrice = (t * e * d).toFixed(4),
+									s.trandeFree = m,
+									s.bons = p
+							}
+					}
+				}).catch(t => {
+					console.log(t)
+				})
+				// ,
+				// setTimeout((function() {
+				// 	layer.close(i)
+				// }), 1500)
+			},
+			buy_sell(t, e) {
+				let a = this;
+				this.$http({
+					url: "/api/lever/deal",
+					method: "post",
+					data: {
+						legal_id: t,
+						currency_id: e,
+						lang: window.localStorage.getItem("lang")
+					},
+					headers: {
+						Authorization: localStorage.getItem("token")
+					}
+				}).then(t => {
+					if ("ok" == t.data.type) {
+						a.multiple = t.data.message.multiple.muit;
+						a.options = t.data.message.multiple.muit;
+						var idx10 = a.options.findIndex(function(item) { return item.value == 10; });
+						a.value = idx10 >= 0 ? a.options[idx10].value : a.options[0].value;
+						a.user_currency = t.data.message.all_levers;
+						a.user_legal = t.data.message.user_lever;
+						a.lastPrice = t.data.message.last_price;
+						a.shareList = t.data.message.multiple.share;
+						a.minShare = t.data.message.lever_share_limit.min;
+						a.maxShare = t.data.message.lever_share_limit.max;
+						a.buyInfo.buyPrice = 0;
+						a.buyInfo.buyNum = 0;
+						a.amountInput = '';
+						a.sahre = '';
+						a.fetchShareInfo();
+					}
+				}).catch(t => {})
+			},
+			selectMuit() {
+				let t = this;
+				if (0 != t.selectedStatus && 0 != t.sahre) {
+					var e = parseFloat(localStorage.getItem("lastPrice")).toFixed(4),
+						a = parseFloat(t.value).toFixed(4),
+						s = parseFloat(t.sahre).toFixed(4);
+					t.pricesType(e, s, a)
+				} else if ("sell" == type && "" != t.sellShare) {
+					if ("" != t.sellInputValue) {
+						e = parseFloat(t.sellInputValue).toFixed(4),
+							a = parseFloat(t.sellInfo.sell_selected).toFixed(4),
+							s = parseFloat(t.sellShare).toFixed(4);
+						t.pricesType(e, type, s, a)
+					}
+				} else if ("buy" == type && "" != t.sellShare) {
+					if ("" != t.inputPrice) {
+						e = parseFloat(t.inputPrice).toFixed(4),
+							a = parseFloat(t.buyInfo.buy_selected).toFixed(4),
+							s = parseFloat(t.buySahre).toFixed(4);
+						t.pricesType(e, type, s, a)
+					}
+				} else
+					t.totalPriceBuy = 0,
+					t.trandeFreeBuy = 0,
+					t.bonsBuy = 0
+			},
+			comfirm() {
+
+				let t, e = this;
+				console.log('e.checked', e.checked)
+				console.log('e.checked1', e.checked1)
+				var a = null,
+					s = null;
+				"second" == e.activeName && (s = e.stop_loss_price,
+						a = e.target_profit_price),
+					2 == e.buyType ? "" != e.legal_id && "" != e.currency_id ? t = {
+						legal_id: e.legal_id,
+						currency_id: e.currency_id,
+						multiple: e.sellInfo.sell_selected,
+						share: e.sellShare,
+						type: 2,
+						status: e.selectedStatus,
+						target_price: e.sellInputValue,
+						lang: window.localStorage.getItem("lang") || "en",
+						stop_loss_price: e.checked3 ? e.stop_loss_price : "",
+						target_profit_price: e.checked2 ? e.target_profit_price : ""
+					} : layer.msg(e.$t("tv.traedoff")) : "" != e.legal_id && "" != e.currency_id ? t = {
+						legal_id: e.legal_id,
+						currency_id: e.currency_id,
+						multiple: e.buyInfo.buy_selected,
+						share: e.sahre,
+						type: 1,
+						status: e.selectedStatus,
+						target_price: e.inputPrice,
+						lang: window.localStorage.getItem("lang") || "en",
+						stop_loss_price: e.checked1 ? e.stop_loss_price : "",
+						target_profit_price: e.checked ? e.target_profit_price : ""
+					} : layer.msg(e.$t("tv.traedoff"));
+				var i = layer.load(1);
+				t.status = this.activeName == "first" ? e.selectedStatus : 0
+				this.$http({
+					url: "/api/" + e.sellInfo.url,
+					method: "post",
+					data: t,
+					headers: {
+						Authorization: localStorage.getItem("token")
+					}
+				}).then(t => {
+					layer.close(i),
+						"ok" == t.data.type ? (2 == e.buyType ? (e.sellInfo.sellPrice = 0,
+								e.sellInfo.sellNum = 0) : (e.buyInfo.buyPrice = 0,
+								e.buyInfo.buyNum = 0),
+							eventBus.$emit("buyTrade", "tradebuy"),
+							eventBus.$emit("tocel", "updata"),
+							eventBus.$emit("to_leverExchange", "leverExchange"),
+							document.documentElement.clientWidth < 800 ? this.telShow22 = false : this.telShow22 = true,
+							layer.msg(t.data.message),
+							e.comfirmShow = !1,
+							setTimeout((function() {}), 500)) : (layer.msg(t.data.message),
+							e.comfirmShow = !1)
+				}).catch(t => {
+					console.log(t),
+						e.comfirmShow = !1
+				})
+			},
+			closeMosal() {
+				let t = this;
+				t.comfirmShow = !1
+			},
+			buyCoin() {
+				var t = this;
+				if (!t.amountInput || parseFloat(t.amountInput) <= 0) {
+					return layer.msg(t.$t("batchData.请输入正确的投入金額"));
+				}
+				if (parseFloat(t.amountInput) > parseFloat(t.user_legal)) {
+					return layer.msg(t.$t("batchData.余额不足"));
+				}
+				if (t.cachedShareValue > 0) {
+					t.sahre = Math.floor(parseFloat(t.amountInput) / t.cachedShareValue);
+				}
+				t.buySahre = t.sahre;
+				t.buyInfo.buy_selected = this.value;
+				if ("" == t.buyInfo.buy_selected) return layer.msg(t.$t("tv.ptimes"));
+				if (0 == t.selectedStatus && "" == t.inputPrice) return layer.msg(t.$t("tv.pprice"));
+				if (t.buySahre < t.minShare) return layer.msg(t.$t("tv.lessnum") + (t.minShare * t.cachedShareValue).toFixed(2) + ' USDC');
+				if (t.buySahre > t.maxShare) return layer.msg(t.$t("tv.morenum") + (t.maxShare * t.cachedShareValue).toFixed(2) + ' USDC');
+				t.buyType = 1;
+				t.qdtc();
+			},
+
+
+
+
+			sellCoin() {
+				var t = this;
+				if (!t.amountInput || parseFloat(t.amountInput) <= 0) {
+					return layer.msg(t.$t("batchData.请输入正确的投入金額"));
+				}
+				if (parseFloat(t.amountInput) > parseFloat(t.user_legal)) {
+					return layer.msg(t.$t("batchData.余额不足"));
+				}
+				if (t.cachedShareValue > 0) {
+					t.sahre = Math.floor(parseFloat(t.amountInput) / t.cachedShareValue);
+				}
+				t.sellShare = t.sahre;
+				t.sellInfo.sell_selected = this.value;
+				if ("" == this.sellInfo.sell_selected) return layer.msg(t.$t("tv.ptimes"));
+				if (0 == t.selectedStatus && "" == t.sellInputValue) return layer.msg(t.$t("tv.pprice"));
+				if (t.sellShare < t.minShare) return layer.msg(t.$t("tv.lessnum") + (t.minShare * t.cachedShareValue).toFixed(2) + ' USDC');
+				if (t.sellShare > t.maxShare) return layer.msg(t.$t("tv.morenum") + (t.maxShare * t.cachedShareValue).toFixed(2) + ' USDC');
+				t.buyType = 2;
+				t.qdtc();
+			},
+
+			qdtc() {
+
+				var curScreenWidth = document.documentElement.clientWidth;
+				if (curScreenWidth < 800) {
+					this.telShow = false
+				}
+
+
+				let text =
+					`${this.$t('earn.confirm_confirm_button')}${this.buyType== 1 ?this.$t('zjde83'):this.$t('zjde84')}?`
+				// console.log('1233',text)
+				if (this.activeName == "second") {
+					// 买入大于现价
+					if (this.buyType == 1 && this.inputPrice > this.currentPrice) {
+						text = this.$t('zjde218')
+
+					}
+					if (this.buyType == 2 && this.inputPrice < this.currentPrice) {
+
+
+						text = this.$t('zjde219')
+					}
+				}
+
+				this.$confirm(text, this.$t('earn.confirm_title'), {
+					confirmButtonText: this.$t('earn.confirm_confirm_button'),
+					cancelButtonText: this.$t('earn.confirm_cancel_button'),
+					type: 'warning'
+				}).then(() => {
+					this.comfirm()
+				}).catch(() => {
+
+				});
+			},
+			handleClick(t, e) {
+				this.activeName = t.name
+			},
+			showMarketList() {
+				this.showMarketlist = !0
+			},
+			closeMarketList() {
+				this.showMarketlist = !1
+			},
+			updateData(t) {
+				t && this.$emit("real-time", t)
+			},
+		},
+	};
+</script>
+
+<style lang="scss" scoped>
+	.trade .content {
+		height: calc(100% - 50px);
+		overflow: auto
+	}
+
+	.trade .inputtimes {
+		display: flex;
+		position: relative;
+		line-height: 40px;
+		background-color: #222934;
+		padding: 0 10px
+	}
+
+	.trade .inputtimes>label {
+		width: 20%;
+		font-size: 14px;
+		color: #8b8e94
+	}
+
+	.padding20 {
+		padding: 20px
+	}
+
+	.trade .el-tabs__header .el-tabs__nav {
+		width: 100% !important;
+		height: 50px !important;
+		display: flex !important;
+		align-items: center !important
+	}
+
+	.trade .el-tabs__header .el-tabs__active-bar {
+		top: 0 !important
+	}
+
+	.trade .el-tabs__header .el-tabs__item.is-active {
+		// color: #fff!important;
+		// background-color: #171c24!important
+	}
+
+	.el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
+	.el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
+	.el-tabs--top .el-tabs__item.is-top:nth-child(2),
+	.trade .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2) {
+		padding-left: 0 !important
+	}
+
+	.trade .el-tabs__header .el-tabs__item {
+		flex: 1 !important;
+		padding: 0 !important;
+		height: 50px !important;
+		line-height: 50px !important;
+		text-align: center !important;
+		color: #8b8e94 !important
+	}
+
+	.trade .el-tabs--border-card>.el-tabs__content {
+		padding: 0
+	}
+
+	.trade .inputtimes .el-input {
+		background-color: #222934;
+		display: flex;
+		align-items: center
+	}
+
+	.trade .inputtimes .el-input .el-input__inner {
+		text-align: right;
+		color: #fff;
+		border: none;
+		background-color: transparent !important
+	}
+
+	.darkSelect {
+		background-color: #20262f !important;
+		border-color: transparent !important
+	}
+
+	// .el-select-dropdown__item.hover,
+	// .el-select-dropdown__item.selected,
+	// .el-select-dropdown__item:hover {
+	// 	background: #303742 !important
+	// }
+
+	.input-item,
+	.inputtimes {
+		display: flex;
+		position: relative;
+		line-height: 40px;
+		background-color: #222934;
+		padding: 0 10px
+	}
+
+	.input-item .share-input {
+		border: 1px solid #222934;
+		background: #222934;
+		border-radius: 2px;
+		font-size: 14px;
+		color: #fff;
+		line-height: 26px;
+		width: 100%;
+		padding: 5px 10px;
+		height: auto;
+		float: none;
+		text-indent: 0;
+		text-align: right
+	}
+
+	._flex-wrap {
+		display: flex;
+		flex-wrap: wrap
+	}
+
+	._flex-sb {
+		justify-content: space-between
+	}
+
+	._flex,
+	._flex-sb {
+		display: flex
+	}
+
+	.spottrading {
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		grid-gap: 10px;
+		text-align: center
+	}
+
+	.greenBack {
+		background-color: #0ecb81
+	}
+
+	.spottrading-btn {
+		height: 40px;
+		border-radius: 3px;
+		line-height: 40px
+	}
+
+	.curPer,
+	.pointer {
+		cursor: pointer
+	}
+
+	.redBack {
+		background-color: #f7455b
+	}
+
+	.input-item input {
+		width: 100%;
+		border: 1px solid #222934;
+		height: 38px;
+		text-indent: 15px;
+		font-size: 14px;
+		color: #fff;
+		background-color: #222934;
+		line-height: 38px;
+		text-align: right
+	}
+
+	#showMaketList::-webkit-scrollbar {
+		width: 5px;
+		height: 13px;
+		border-radius: 5px
+	}
+
+	#showMaketList::-webkit-scrollbar-thumb {
+		background-color: rgba(231, 222, 222, .5);
+		background-clip: padding-box;
+		border-radius: 5px;
+		min-height: 28px
+	}
+
+	.input-item>label,
+	.inputtimes>label {
+		width: 20%;
+		font-size: 14px;
+		color: #8b8e94
+	}
+
+	#showMaketList::-webkit-scrollbar-thumb:hover {
+		background-color: rgba(231, 222, 222, .5);
+		border-radius: 5px
+	}
+
+	.info-wrap {
+		line-height: 50px;
+		padding-left: 20px;
+		display: flex;
+		font-size: 12px;
+		color: #c7cce6
+	}
+
+	.info-wrap div:first-child {
+		font-size: 16px;
+		color: #276dff
+	}
+
+	.info-wrap div {
+		padding: 0 15px;
+		text-align: center;
+		display: flex;
+		flex-direction: column;
+		justify-content: center
+	}
+
+	.info-wrap div span {
+		line-height: 20px
+	}
+
+	.comfirm-modal {
+		width: 100%;
+		height: 100%;
+		position: fixed;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(0, 0, 0, .7);
+		justify-content: center;
+		align-items: center;
+		color: #c7cce6
+	}
+
+	.comfirm-modal-content {
+		width: 500px;
+		background-color: #FFF;
+		color: #999;
+		margin: 0 auto;
+		border-radius: 5px
+	}
+
+	.loss-modal-header {
+		line-height: 40px;
+		text-align: center;
+		position: relative
+	}
+
+	.loss-modal-header p {
+		position: absolute;
+		right: 10px;
+		top: 0
+	}
+
+	.comfirm-modal-content li {
+		line-height: 40px;
+		margin: 0 20px
+	}
+
+	.modal-btn {
+		border-bottom-left-radius: 5px;
+		border-bottom-right-radius: 5px;
+		font-size: 0;
+		padding-top: 30px
+	}
+
+	.modal-btn button {
+		width: 50%;
+		line-height: 50px;
+		border: none;
+		float: left;
+		font-size: 14px;
+		color: #fff;
+		background: #f36464;
+	}
+
+	.modal-btn button:last-child {
+		border-left: 1px solid #2e333c;
+		background: #689cf1
+	}
+
+	.fColorcf {
+		color: #cfcfcf;
+	}
+
+	.trade_new {
+		color: #fff;
+		font-size: 14px;
+		display: flex;
+		flex-direction: column;
+		cursor: pointer;
+		border-left: 0.0625rem solid #e5e5e5;
+		padding: 0 10px;
+	}
+
+	// .trade_new {
+	// 	background: #f5f5f5;
+	// }
+
+	.tn-head {
+		padding: 1rem 1.25rem;
+		font-size: 1rem;
+		color: #333;
+		border-bottom: 0.0625rem solid #e5e5e5;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.dsada {
+		display: none;
+	}
+
+	.tabs-h {
+		color: #666;
+		display: flex;
+		cursor: pointer;
+	}
+
+	.tn-cn {
+		padding: 1.25rem;
+	}
+
+	.th-i {
+		margin-right: 1.25rem;
+	}
+
+	.kysl {
+		margin-top: 1.5rem;
+	}
+
+	.kl-num {
+		margin-left: 1.25rem;
+	}
+
+	.sl-input {
+		margin: 1rem 0;
+		background-color: #e5e5e5;
+		border: 0.0625rem solid #e5e5e5;
+		padding: 0.7rem 0.8rem;
+		border-radius: 6px;
+	}
+
+	.bfb {
+		display: flex;
+		justify-content: space-between;
+		cursor: pointer;
+	}
+
+	.bfzds {
+		width: 23%;
+		background-color: #e5e5e5;
+		text-align: center;
+		padding: 0.5rem;
+		border-radius: 6px;
+	}
+
+	.hp {
+		display: flex;
+		justify-content: space-between;
+		margin-top: 1rem;
+	}
+
+	.mm {
+		display: flex;
+		justify-content: space-between;
+		margin: 1.5625rem 0;
+
+	}
+
+	.mi {
+		width: 48%;
+		height: 3.2rem;
+		background-color: #00a870;
+		border-radius: 0.25rem;
+		color: #fff;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		cursor: pointer;
+	}
+
+	.tn-bott {
+		padding: 1.25rem 1.25rem 5rem;
+		background: #fff;
+		flex: 1;
+		padding-top: 8rem;
+
+	}
+
+	.tb-h {}
+
+	.tb-i {
+		background-color: #e5e5e5;
+		color: #666;
+		text-align: center;
+		padding: 0.625rem;
+		margin-top: 1.25rem;
+		border-radius: 0.3125rem;
+	}
+
+	.day {
+		.tn-bott {
+			background: #101621;
+		}
+
+		.trade_new3 {
+			background: #1e2329;
+			color: #fff;
+			border-left: 0.0625rem solid #2b3139;
+		}
+
+		.tn-head {
+			color: #fff;
+		}
+
+		.tn-top {
+			background: #1e2329;
+			color: #fff;
+		}
+
+		// .mi {
+		// 	background: #474d57;
+		// 	color: #fff;
+		// }
+
+		.kysl span:first-child {
+			color: #848e9c;
+		}
+
+		.sl-input {
+
+			background-color: #2b3139;
+			border: 0.0625rem solid #2b3139;
+
+		}
+
+		.sl-input input {
+			color: #fff;
+		}
+
+		.bfzds {
+			background-color: #2b3139;
+		}
+
+		.tb-i {
+			background-color: #2b3139;
+			color: #848e9c;
+
+		}
+
+		.tn-head {
+
+			border-bottom: 0.0625rem solid #2b3139;
+		}
+
+		.tb-h {
+			color: #fff;
+		}
+
+		.trade_new {
+
+			border-left: 0.0625rem solid #2b3139;
+		}
+
+
+	}
+
+	.btn {
+		cursor: pointer;
+	}
+
+	.day .xlk ::v-deep.el-input__inner {
+		border: none !important;
+		background-color: #2b3139 !important;
+		color: #fff !important;
+
+	}
+
+
+	.transfer-box {
+		color: #333;
+	}
+
+	.zz-l {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.zchz {
+		display: flex;
+		align-items: center;
+		margin-bottom: 3rem;
+
+	}
+
+	.zl-y {
+		width: 0.6rem;
+		height: 0.6rem;
+		border: 0.125rem solid #0ecb81;
+		border-radius: 50%;
+	}
+
+	.zl-x {
+		width: 1px;
+		height: 2.5rem;
+		background: #f5f5f5;
+	}
+
+	.z-img {
+		width: 2rem;
+		height: 2rem;
+		border-radius: 50%;
+	}
+
+	.zz-r {
+		flex: 1;
+		margin-left: 2rem;
+	}
+
+	.z-t {
+		font-size: 1rem;
+		margin-bottom: 0.5rem;
+		display: flex;
+		justify-content: space-between;
+
+	}
+
+	.as {
+		margin-bottom: 1rem;
+	}
+
+	.transfer-box .el-select {
+		width: 100%;
+	}
+
+	.transfer-box .el-input__inner {
+		color: #333;
+		border: 0.0625rem solid #e7e9ed !important;
+		width: 100% !important;
+		background-color: #FFF !important;
+		color: #333 !important;
+	}
+
+	.i-t {
+		margin-bottom: 0.7rem;
+	}
+
+	.i-i {
+		margin-bottom: 1rem;
+		position: relative;
+	}
+
+	.all {
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		right: 1rem;
+		color: #f0c163;
+		cursor: pointer;
+	}
+
+	.butt {
+
+		width: 100%;
+		height: 3rem;
+		background: #f0c163;
+		border-radius: 0.25rem;
+		font-size: 1rem;
+		font-weight: 400;
+		color: #fff;
+		text-align: center;
+		line-height: 3rem;
+		cursor: pointer;
+		// margin-top: 1.875rem;
+	}
+
+	.dsf {
+		margin-top: 1.875rem;
+		text-align: center;
+		font-size: 1rem;
+		color: #606266;
+	}
+
+
+	.dsfd {
+		margin-left: 4rem;
+	}
+
+	.tel-tb {
+		display: none;
+	}
+
+
+
+	.jc-tc {
+		position: fixed;
+		background: rgba(0, 0, 0, 0.4);
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		z-index: 99999;
+
+		.tz-box {
+			position: absolute;
+			left: 50%;
+			top: 50%;
+			transform: translate(-50%, -50%);
+			color: #fff;
+			width: 365px;
+			// height: 750px;
+			background-color: #000;
+			border-radius: 12px;
+			overflow: hidden;
+
+			.sb-title {
+				text-align: center;
+				font-size: 18px;
+				padding: 15px 0;
+				font-size: 16px;
+				background: #1A222B;
+
+			}
+
+			.sx-colse {
+				position: absolute;
+				right: 20px;
+				top: 10px;
+				font-size: 24px;
+				cursor: pointer;
+			}
+
+			.jt-cn {
+				max-height: 500px;
+				overflow-y: auto;
+				padding: 20px 40px;
+			}
+
+			.top-btn-wrap {
+				width: 100%;
+				margin: 0 auto;
+				padding: 0 10px;
+				display: flex;
+				flex-wrap: initial;
+				flex-direction: initial;
+				align-items: center;
+				justify-content: space-between;
+				cursor: pointer;
+			}
+
+			.top-btn-wrap .btn {
+				width: 40%;
+				height: 36px;
+				border-radius: 100px;
+				background: #3B3B45;
+				display: flex;
+				flex-wrap: initial;
+				flex-direction: initial;
+				align-items: center;
+				justify-content: center;
+				color: #fff;
+			}
+
+			.top-btn-wrap .active {
+				background: #00f0ff;
+			}
+
+			.content {
+
+				font-size: 12px;
+				color: #adadad;
+
+				div {
+					margin-top: 20px;
+				}
+			}
+
+			.confirm-btn {
+				display: flex;
+				width: 80%;
+				height: 50px;
+				padding: 18px 0 17px;
+				margin: 20px auto;
+				justify-content: center;
+				align-items: center;
+				border-radius: 100px;
+				background: #00f0ff;
+				color: #000;
+			}
+
+			.info {
+				height: 20px;
+				display: flex;
+				flex-wrap: initial;
+				flex-direction: initial;
+				align-items: center;
+				justify-content: center;
+				margin-bottom: 25px;
+			}
+
+			.info img {
+				width: 20px;
+				height: 20px;
+				border-radius: 50%;
+			}
+
+			.info .h5Name {
+				margin: 0 6px;
+				color: #fff;
+				height: 20px;
+				line-height: 20px;
+			}
+
+			.info .tag {
+				border-radius: 2px;
+				color: #fff;
+				background: #3B3B45;
+				text-align: center;
+				font-size: 12px;
+				padding: 0 4px;
+				height: 16px;
+				line-height: 16px;
+			}
+
+			.row {
+				width: 100%;
+				height: 20px;
+				line-height: 20px;
+				display: flex;
+				flex-wrap: initial;
+				flex-direction: initial;
+				align-items: center;
+				justify-content: initial;
+				margin: 0 auto 6px;
+			}
+
+			.select-row {
+				width: 100%;
+				position: relative;
+				display: block;
+				height: 50px;
+				padding: 4px 0;
+				margin: 0 auto 10px;
+				border-radius: 99px;
+				border: 1px solid #1a1b24;
+				background: #0a0a0f;
+				overflow: hidden;
+				margin-bottom: 20px;
+			}
+
+			.row span:nth-of-type(1) {
+				color: #adadad;
+				margin-right: 10px;
+			}
+
+			.select-row .ul {
+				display: flex;
+				overflow-y: auto;
+				padding: 0 20px;
+
+				&::-webkit-scrollbar {
+					height: 5px;
+					/* 对于水平滚动条，使用height */
+
+				}
+
+				&::-webkit-scrollbar-track {
+					background: #232437;
+					/* 轨道颜色 */
+				}
+
+				&::-webkit-scrollbar-thumb {
+					background: #888;
+					/* 滑块颜色 */
+					border-radius: 10px;
+					/* 滑块圆角 */
+				}
+			}
+
+			.select-row li {
+
+				width: 70px;
+				min-width: 70px;
+				height: 38px;
+				display: flex;
+				flex-wrap: initial;
+				flex-direction: initial;
+				align-items: center;
+				justify-content: center;
+				border-radius: 99px;
+				cursor: pointer;
+				color: #fff;
+			}
+
+			.select-row .active {
+				border: 1px solid #00f0ff;
+			}
+		}
+		
+		// 移动端响应式适配
+		@media screen and (max-width: 800px) {
+			width: 85vw !important;
+			max-width: 85vw !important;
+			min-width: auto;
+			margin: 0 auto;
+			
+			.sb-title {
+				padding: 12px 0;
+				font-size: 15px;
+			}
+			
+			.sx-colse {
+				right: 15px;
+				top: 8px;
+				font-size: 20px;
+			}
+			
+			.jt-cn {
+				max-height: 55vh;
+				padding: 15px;
+			}
+			
+			.top-btn-wrap {
+				padding: 0;
+				flex-wrap: wrap;
+				gap: 10px;
+			}
+			
+			.top-btn-wrap .btn {
+				width: 48%;
+				height: 40px;
+				font-size: 14px;
+			}
+			
+			.content {
+				font-size: 11px;
+				
+				div {
+					margin-top: 15px;
+				}
+				
+				p {
+					line-height: 1.5;
+				}
+			}
+			
+			.confirm-btn {
+				width: 85%;
+				height: 42px;
+				padding: 12px 0;
+				margin: 15px auto 20px;
+				font-size: 15px;
+			}
+			
+			.info {
+				margin-bottom: 20px;
+			}
+			
+			.info img {
+				width: 18px;
+				height: 18px;
+			}
+			
+			.info .h5Name {
+				font-size: 13px;
+			}
+			
+			.row {
+				font-size: 12px;
+			}
+			
+			.select-row {
+				height: 45px;
+				margin-bottom: 15px;
+			}
+			
+			.select-row .ul {
+				padding: 0 10px;
+			}
+			
+			.select-row li {
+				width: 60px;
+				min-width: 60px;
+				height: 35px;
+				font-size: 13px;
+			}
+		}
+		
+		// 超小屏幕适配 (<400px)
+		@media screen and (max-width: 400px) {
+			width: 92vw !important;
+			max-width: 92vw !important;
+			
+			.jt-cn {
+				padding: 10px;
+			}
+			
+			.content {
+				font-size: 10px;
+			}
+			
+			.confirm-btn {
+				width: 90%;
+				margin: 12px auto 15px;
+			}
+		}
+	}
+
+	.daqdfqad {
+		display: none;
+	}
+
+	@media screen and (max-width: 800px) {
+
+		.xdButt {
+			display: none;
+		}
+
+		.daqdfqad {
+			display: flex;
+			justify-content: space-between;
+			margin: 30px 0 10px;
+
+			.xdButt {
+				width: 48%;
+			}
+		}
+
+		.sadada {
+			position: fixed;
+			height: 90vh;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background: #1A1B24;
+			z-index: 99;
+			padding: 0 10px;
+			overflow-y: auto;
+		}
+
+		.ccsd {
+			text-align: right;
+			color: #fff;
+			width: 100px;
+		}
+
+		.dsd-r {
+
+			height: 44px;
+			width: 100px;
+			display: flex;
+			justify-content: center;
+		}
+
+		.pc-item {
+			margin-right: 2rem;
+			padding: 1rem 0;
+
+		}
+
+		.dsada {
+			display: block;
+		}
+
+		.dsfd {
+			margin-left: 0rem;
+		}
+
+		.money2 {
+			font-size: 1rem;
+		}
+
+		.top-model {
+			flex-direction: column;
+			align-items: flex-start;
+		}
+
+		.tn-bott {
+			display: none;
+		}
+
+		.tel-tb {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			background: #fff;
+			padding: 1rem;
+			font-size: 1.2rem;
+			z-index: 99;
+		}
+
+		.zc {
+			position: fixed;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			top: 0;
+			background: rgba(0, 0, 0, .5);
+			z-index: 888;
+		}
+
+		.tn-top {
+			position: fixed;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			z-index: 999;
+			background: #fff;
+		}
+
+		.trade_new {
+			font-size: 1.2rem;
+		}
+
+	}
+
+	.un-butt {
+		margin-left: 0;
+		margin-top: 1rem;
+	}
+
+	.un-item {
+		width: 6rem;
+		height: 3rem;
+		font-size: 1rem;
+
+		line-height: 3rem;
+
+		margin-right: 0.625rem;
+	}
+
+	.day {
+		.py-head {
+			background: #090d13;
+		}
+
+		.pc-iActive {
+			color: #FFF;
+
+		}
+
+		.bilb .bb-top {
+			// display: flex;
+			// color: #909399;
+
+			background: #1c222c;
+
+		}
+
+		.bc-i {
+			color: #fff;
+		}
+
+		.bc-i:hover {
+			background: #141a28;
+			// color: #fff;
+		}
+
+		.tel-tb {
+			background: #141a28;
+		}
+
+	}
+</style>
\ No newline at end of file
diff --git a/src/view/lever/lever_transaction.vue b/src/view/lever/lever_transaction.vue
new file mode 100644
index 0000000..8477e1f
--- /dev/null
+++ b/src/view/lever/lever_transaction.vue
@@ -0,0 +1,224 @@
+<template>
+  <div class="wrap">
+    <div class="detail">
+      <div class="title fColor1 topshadow">
+        <div class="inblock">
+          <a class="curPer" onclick="javascript:history.back(-1);"><span>{{ $t('back') }}</span></a>
+        </div>
+        <div class="inblock fr">
+          <!--         <span class="all" @click="links">合约持仓</span>-->
+          <span class="all" @click="all">{{ $t('lever.all') }}</span>
+          <span class="all" @click="recordList">{{ $t('lever.tdrecord') }}</span>
+        </div>
+      </div>
+      <div class="content">
+        <ul class="list-title fColor2 ft12 clear">
+          <li class="fl w12">{{ $t('time') }}</li>
+          <li class="fl w12">{{ $t('price') }}</li>
+          <li class="fl w8">{{ $t('home.volume') }}</li>
+        </ul>
+        <div class="containers scroll" v-if="deList.length>0">
+          <ul v-for="(itm,index) in deList" :key="index" class="list-item fColor1 ft12">
+            <li class="clear">
+              <span class="fl w12">{{ itm.time }}</span>
+              <span class="fl w12">{{ itm.price | tofixedFour }}</span>
+              <span class="fl w8">{{ itm.number | tofixed }}</span>
+            </li>
+          </ul>
+        </div>
+        <div class="no_data tc" v-if="deList.length<=0">
+          <img src="../../assets/images/nodata.png" alt="">
+          <p class="fColor2 ft18">{{ $t('nodata') }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "leverTransaction",
+  data() {
+    return {
+      address: '',
+      isChoosed: 2,
+      new: false,
+      wayList: [this.$t('center.inbuy'), this.$t('center.outsell'), this.$t('center.all')],
+      deList: [],
+      legal_id: '',
+      currency_id: ''
+    }
+  },
+  filters: {
+    numFilters: function (value) {
+      if (!value) return ''
+      value = value.toString()
+      return value.slice(0) + ' '
+    }
+    ,
+    tofixed: function (val) {
+      val = Number(val);
+      return val.toFixed(2);
+    },
+    tofixedFour: function (val) {
+      val = Number(val);
+      return val.toFixed(4);
+    },
+  },
+  created() {
+    this.address = localStorage.getItem('address') || '';
+    this.legal_id = localStorage.getItem('legal_id');
+    this.currency_id = localStorage.getItem('currency_id');
+    var that = this;
+    that.complete(this.legal_id, this.currency_id);
+    eventBus.$on('to_leverExchange', function (data) {
+      if (data) {
+        that.complete(localStorage.getItem('legal_id'), localStorage.getItem('currency_id'));
+      }
+    })
+  },
+  methods: {
+    wayChoosed(index) {
+      this.isChoosed = index;
+    },
+    //我的交易记录
+    complete(legals_id, currencys_id) {
+      this.$http({
+        url: '/api/' + 'lever/deal',
+        method: 'post',
+        data: {
+          legal_id: legals_id,
+          currency_id: currencys_id
+        },
+        headers: {'Authorization': localStorage.getItem('token')},
+      }).then(res => {
+        // layer.close(i);
+        if (res.data.type == "ok") {
+          this.deList = res.data.message.my_transaction;
+          //    this.connect();
+        } else {
+          // layer.msg(res.data.message)
+        }
+      }).catch(error => {
+        // console.log(error)
+      })
+    },
+
+    all() {
+      this.$router.push({name: 'allTransaction'})
+    },
+    // 合约持仓
+    links() {
+      this.$router.push({name: 'leverTransactions'})
+    },
+    // 跳转交易记录
+    recordList() {
+      this.$router.push({name: 'leverList'})
+    }
+
+  },
+  mounted() {
+    var that = this;
+
+    eventBus.$on('buyTrade', function (data) {
+      // that.connect();
+    });
+
+  }
+
+
+}
+</script>
+<style lang="scss" scoped>
+.wrap{
+  background: #181d25;
+}
+.detail {
+  min-height: 500px;
+  background: #000000;
+  width: 75rem;
+  margin: 0px auto;
+  padding: 0;
+}
+
+.red {
+  color: #cc4951;
+  cursor: pointer;
+}
+
+.title {
+  height: 60px;
+  line-height: 60px;
+  padding: 0;
+  font-size: 18px;
+  background-color: #181b2a;
+}
+
+.tab_title {
+  display: inline-block;
+  line-height: 46px;
+  height: 46px;
+}
+
+.tab_title span {
+  cursor: pointer;
+}
+
+.tab_title span:not(:last-child) {
+  margin-right: 40px;
+}
+
+.content {
+  //padding: 0 40px 0 30px;
+  height: 330px;
+}
+
+.list-title {
+  line-height: 40px;
+  border-bottom: 1px solid #303b4b;
+  height: 40px;
+}
+
+.list-title li {
+  width: 33.3%;
+  text-align: center;
+}
+
+.no_data {
+  padding: 50px 0;
+}
+
+.containers {
+  height: 260px;
+  overflow: auto;
+  float: left;
+  width: 100%;
+}
+
+.list-item li {
+  line-height: 45px;
+  display: flex;
+}
+
+.list-item li span {
+  display: block;
+  float: left;
+  width: 33.3%;
+  text-align: center;
+}
+
+.list-item li:hover {
+  cursor: pointer;
+  background-color: #181d25
+}
+
+.list-item li span.green {
+  color: #55a067
+}
+
+.all {
+  font-size: 14px;
+  cursor: pointer;
+  color: #00a4d8;
+  margin-left: 10px;
+}
+</style>
diff --git a/src/view/lever/transferRecord.vue b/src/view/lever/transferRecord.vue
new file mode 100644
index 0000000..61db6da
--- /dev/null
+++ b/src/view/lever/transferRecord.vue
@@ -0,0 +1,109 @@
+<template>
+  <div id="lever-record">
+    <div class="title">
+      <span class="fl">USDC</span>
+      <span class="fr" @click="$router.go(-1)">{{$t('back')}}</span>
+    </div>
+    <div class="list">
+      <div class="list-title flex">
+        <span>{{$t('c2c.type')}}</span>
+        <span>{{$t('number')}}</span>
+        <span>{{$t('time')}}</span>
+      </div>
+      <ul>
+        <li v-for="(item,index) in log" :key="index">
+          <span>{{item.type}}</span>
+          <span>{{item.number || '0.00' | toFixeds}}</span>
+          <span>{{item.add_time}}</span>
+        </li>
+      </ul>
+    </div>
+    
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      log: [],
+      page: 1
+    }
+  },
+  created() {
+    this.getLog();
+  },
+  filters: {
+    toFixeds: function(value) {
+      value = Number(value);
+      return value.toFixed(2);
+    }
+  },
+  methods: {
+    getLog:function() {
+      let that = this;
+      var token = window.localStorage.getItem("token");
+      this.$http({
+        url: "/api/wallet/hzhistory",
+        method: "post",
+        headers: { Authorization: token },
+        data: {
+        }
+      }).then(res => {
+        if (res.data.type == "ok") {
+          let msg = res.data.data;
+          that.log = msg;
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style lang='scss'>
+#lever-record {
+  width: 75rem;
+  margin: 0 auto;
+  color: #c7cce6;
+  .title {
+    height: 60px;
+    line-height: 60px;
+    padding: 0 30px;
+    margin: 20px 0;
+    font-size: 20px;
+    border-radius: 3px;
+    background-color: #181b2a;
+    span {
+      cursor: pointer;
+    }
+  }
+  .list {
+    min-height: 900px;
+    padding: 0 30px;
+    background: #181b2a;
+  }
+  .list-title,
+  li {
+    display: flex;
+    line-height: 40px;
+    justify-content: space-between;
+    span {
+      flex: 1;
+      text-align: center;
+    }
+  }
+  li {
+    border-top: 1px solid #202a4a;
+  }
+  .loadmore {
+    text-align: center;
+    padding: 20px;
+    cursor: pointer;
+  }
+}
+</style>
+
+
+
+// WEBPACK FOOTER //
+// src/view/lever/transferRecord.vue
\ No newline at end of file