修改合约的左边交易添加滚动条

src/views/contract/index.vue

@@ -77,38 +77,50 @@
           <template v-for="parent in contractListFilter">
             <table class="table" :key="parent.coin_name + 1">
               <thead>
-                <tr class="">
+                <tr>
-                  <th class="w-9/24">{{ $t("contract.h5") }}</th>
+                  <th class="" style="display:block;width:100%">
-                  <th class="w-7/24 text-right">{{ $t("contract.g3") }}</th>
+					<!-- {{ $t("contract.h5") }} -->
-                  <th class="w-8/24 text-right">
+					<div class="width-32">{{ $t("contract.h5") }}</div>
-                    {{ $t("contract.h6") }}
+					<div class="text-right width-32">{{ $t("contract.g3") }}</div>
-                  </th>
+					<div class="text-right width-32">{{ $t("contract.h6") }}</div>
+				  </th>
+				  <!-- <th>{{ $t("contract.g3") }}</th>
+				  <th>{{ $t("contract.h6") }}</th> -->
                 </tr>
               </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)"
+				  v-show="isShow(item)"
+				  style="display:block"
                 >
-                  <td class="d-flex">
+                  <td  style="display:block;width:100%;border:none;">
-					  <div v-for="items in Liste" :key="items.symbol">
+					<div class="width-32">
-					  	<img :src="items.icon" width="20" height="20" v-if="items.symbol==item.symbol" />
+						<div class="d-flex">
-					  </div>
+							<div v-for="items in Liste" :key="items.symbol">
-                      <div style="margin-left: 10px;">{{ item.symbol }}/{{ parent.coin_name }}</div>
+								<img :src="items.icon" width="20" height="20" v-if="items.symbol==item.symbol" />
+							</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>
-                  <td class="w-7/24 text-right" >
+                  <!-- <td class="text-right"  style="">
-                    <!-- :class="item.increase < 0 ? 'decreace' : 'increase'" -->
+                    :class="item.increase < 0 ? 'decreace' : 'increase'"
                     {{ item.close }}
                   </td>
-                  <td
+                  <td class="text-right" :class="item.increase < 0 ? 'decreace' : 'increase'" 
-                    class="w-8/24 text-right"
+				  style="">
-                    :class="item.increase < 0 ? 'decreace' : 'increase'"
-                  >
                     {{ item.increaseStr }}
-                  </td>
+                  </td> -->
                 </tr>
               </tbody>
             </table>
@@ -439,9 +451,9 @@ export default {
     indexList() {
         Home.indexList().then((res) => {
             this.pcBannerList = res.pcBannerList
-            setTimeout(() => {
+            // setTimeout(() => {
-                this.skroll();
+            //     this.skroll();
-            }, 100);
+            // }, 100);
         }).catch((res) => {});
     },
     //获取某一个持仓订单的数据
@@ -474,6 +486,12 @@ export default {
     thead th, table td{
       font-size: 14px;
     }
+	.trade-list{
+		// width: 23vw;
+		height: 1110px;
+		overflow-y: auto;
+		display: block;
+	}
     tbody tr{
       cursor: pointer;
     }
@@ -533,4 +551,9 @@ export default {
     .min-width-B{
       min-width: 130px;
     }
+	.width-32{
+		display: inline-block !important;
+		vertical-align: top !important;
+		width: 32% !important;
+	}
 </style>