合约左侧新增滚动条，实时成交新增判断

src/api/server/index.js

@@ -90,6 +90,8 @@ let loading = null;
 server.interceptors.request.use(
 
     config => {
+		let token = localStorage.getItem("token");
+		config.headers["authorization"] = `bearer ${token}`
         // 剔除部分高频接口 主要是交易时的后台操作
         if (!exclude.find(item => config.url.includes(item))) {
             if (!config.config || config.config.loading) {

src/views/contract/handicap.vue

@@ -107,7 +107,7 @@
             {{ $t("contract.e1") }}({{ $t("contract.e2") }})
           </div>
         </div>
-        <div class="d-flex fn-14" v-for="(item, idx) in tradeList" :key="idx">
+        <div class="d-flex fn-14" v-for="(item, idx) in tradeList.slice(0,30)" :key="idx">
           <div class="w-10/24">
             {{ parseTime(item.ts, false, "{h}:{i}:{s}") }}
           </div>

src/views/contract/index.vue

@@ -77,35 +77,47 @@
           <template v-for="parent in contractListFilter">
             <table class="table" :key="parent.coin_name + 1">
               <thead>
-                <tr class="">
-                  <th class="w-9/24">{{ $t("contract.h5") }}</th>
-                  <th class="w-7/24 text-right">{{ $t("contract.g3") }}</th>
-                  <th class="w-8/24 text-right">
-                    {{ $t("contract.h6") }}
-                  </th>
-                </tr>
+                <th class="" style="display:block;width:100%">
+					<div class="width-32">{{ $t("contract.h5") }}</div>
+					<div class="text-right width-32">{{ $t("contract.g3") }}</div>
+					<div class="text-right width-32">{{ $t("contract.h6") }}</div>
+                </th>
               </thead>
-              <tbody>
+              <tbody  class="trade-list">
                 <tr
                   v-for="item in parent.marketInfoList"
                   :key="item.symbol"
                   :class="{ active: item.symbol == activeSymbol }"
                   @click="ispopover1(item.symbol)"
 				   v-show="isShow(item)"
+				   style="display:block"
                 >
-                  <td class="w-9/24 tr-text">
+                  <!-- <td class="width-32 tr-text">
                     {{ item.symbol }}/{{ parent.coin_name }}
                   </td>
-                  <td class="w-7/24 text-right" >
-                    <!-- :class="item.increase < 0 ? 'decreace' : 'increase'" -->
-                    {{ item.close }}
-                  </td>
-                  <td
-                    class="w-8/24 text-right"
+                  <td class="width-32 text-right" >
                     :class="item.increase < 0 ? 'decreace' : 'increase'"
-                  >
-                    {{ item.increaseStr }}
-                  </td>
+                    {{ item.close }}
+                  </td> 
+				  <td
+				    class="text-right"
+				    :class="item.increase < 0 ? 'decreace' : 'increase'"
+				  >
+				    {{ item.increaseStr }}
+				  </td>-->
+				  <td  style="display:block;width:100%;border:none;">
+					<div class="width-32">
+						<div>
+							<div style="margin-left: 10px;">{{ item.symbol }}/{{ parent.coin_name }}</div>
+						</div>
+					</div>
+					<div class="text-right width-32">
+						{{ item.close }}
+					</div>
+					<div class="text-right width-32" :class="item.increase < 0 ? 'decreace' : 'increase'">
+						{{ item.increaseStr }}
+					</div>
+				  </td>
                 </tr>
               </tbody>
             </table>
@@ -487,6 +499,12 @@ export default {
     .text-secondary{
       color: #636363 !important;
     }
+	.trade-list{
+		// width: 23vw;
+		height: 1110px;
+		overflow-y: auto;
+		display: block;
+	}
     .search_box{
       width: 95%;
       height: 40px;
@@ -514,4 +532,9 @@ export default {
     .min-width-B{
       min-width: 130px;
     }
+	.width-32{
+		display: inline-block !important;
+		vertical-align: top !important;
+		width: 32% !important;
+	}
 </style>