2

src/views/contract/exchange-store.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="markets-pair-list exchange-store bg-plain">
+  <div class="markets-pair-list exchange-store bg-plain ex-s-p-c">
-    <div class="nav nav-pills">
+    <div class="nav nav-pills" style="align-items: center;width:180px;">
       <div class="nav-item" :class="{ active: tab == 1 }">
         <a class="nav-link" :class="{ active: tab == 1 }" @click="tab = 1">{{
           $t("contract.d5")
@@ -11,7 +11,7 @@
           $t("contract.d6")
         }}</a>
       </div> -->
-      <div class="flex-fill px-3 justify-content-end d-flex align-items-center">
+      <div class="flex-fill d-flex align-items-center">
         <el-popover
           placement="bottom"
           width="100"
@@ -43,7 +43,7 @@
         </el-popover>
       </div>
     </div>
-    <div class="content-box px-3 ">
+    <div class="content-box">
       <div v-if="type == 2" class="input-group my-4 input-group-sm">
         <div class="input-group-prepend">
           <span class="input-group-text">{{ $t("contract.d7") }}</span>
@@ -53,7 +53,8 @@
           <span class="input-group-text">USDT</span>
         </div>
       </div>
-      <div class="d-flex align-items-center" style="margin: 0.5rem 0;color: #666;">
+      <div>
+        <div class="" style="color: #666;">
           <div class="nav nav-pills">
             <div class="nav-item" :class="{ active: form.type == 1 }" @click="form.type = 1">
               <a style="display:block;padding:5px 0px;margin:0 15px 0 0;">
@@ -67,19 +68,19 @@
             </div>
           </div>
         </div>
-      <div class="d-flex" style="color: #666;">
+        <div class="" style="color: #666;white-space: nowrap;margin: 0px 0px 10px 0px;">
-          <div style="margin-right: 10px;">{{ $t("contract.a3") }}</div>
+          <span style="margin-right: 10px;">{{ $t("contract.a3") }}</span>
-          <div>
+          <span> {{ accountInfo.usable_balance }} USDT
-            {{ accountInfo.usable_balance }} USDT
             <i
               class="el-icon-sort"
               @click="$router.push('/wallet/assets/exchange')"
             ></i>
+          </span>
         </div>
       </div>
-      <div class="d-flex my-3 align-items-center">
+      <div class="d-flex align-items-center px-2">
-        <div class="input-group input-group-sm">
+        <div class="input-group-a">
-          <div class="input-group-prepend">
+          <div class="input-group-append">
             <span class="input-group-text">{{ $t("contract.d8") }}</span>
           </div>
           <template v-if="form.type == 1">
@@ -110,8 +111,8 @@
           {{ form.type == 1 ? $t("contract.e0") : $t("contract.d9") }}
         </button> -->
       </div>
-      <div class="input-group mb-3 input-group-sm">
+      <div class="input-group-a align-items-center">
-        <div class="input-group-prepend">
+        <div class="">
           <!-- <span class="input-group-text">{{ $t("contract.e1") }}</span> -->
           <span class="input-group-text">{{ $t("contract.l2") }}</span>
         </div>
@@ -126,7 +127,8 @@
             <span class="input-group-text">{{ $t("contract.e2") }}</span>
         </div> -->
       </div>
-      <div class="px-2 mb-3" v-if="this.tab == 1">
+      <div style="width:200px;margin:0px 12px;">
+        <div class="px-2" v-if="this.tab == 1">
           <el-slider
               :value="activeStep"
               @input="sliderChange"
@@ -164,32 +166,33 @@
             <div>{{ shortPosition }} {{ $t("contract.e2") }}</div>
           </div>
         </div>
+      </div>
       <div class="exchange_button" v-if="tab == 1" style="color: #999;">
-        <div class="px-1 flex-fill mb-4">
+        <div class="px-2 flex-fill">
           <button
             @click="ifOpenPosition(1)"
             type="button"
-            class="sub w-24/24 btn-success btn btn-sm mb-3"
+            class="sub w-24/24 btn-success btn btn-sm mb-2"
           >
             {{ $t("contract.d0") }}
             <!-- <span class="fn-12"> （{{ $t("contract.e6") }}） </span> -->
           </button>
-          <div class="text-left">
+          <div class="text-left" style="white-space: nowrap;">
             {{ $t("contract.e7") }} {{ maxNum }}
             <!-- {{ $t("contract.e2") }} -->
           </div>
         </div>
-        <div class="px-1 flex-fill">
+        <div class="px-2 flex-fill">
           <button
             @click="ifOpenPosition(2)"
             type="button"
-            class="sub w-24/24 btn-danger btn btn-sm mb-3"
+            class="sub w-24/24 btn-danger btn btn-sm mb-2"
           >
             {{ $t("contract.d2") }}
             <!-- <span class="fn-12"> （{{ $t("contract.e8") }}） </span> -->
           </button>
           <!-- <div class="text-center"> -->
-          <div class="text-right">
+          <div class="text-right" style="white-space: nowrap;">
             {{ $t("contract.e7") }} {{ maxNum }}
             <!-- {{ $t("contract.e2") }} -->
           </div>
@@ -517,4 +520,21 @@ export default {
     .markets-pair-list .nav-item.active a{
       color: #F7D558 !important;
     }
+    .ex-s-p-c{
+      display: flex;
+      justify-content: space-between;
+      border-top: 1px solid;
+      padding: 10px 0px;
+    }
+    .ex-s-p-c .content-box{
+      display: flex;
+      align-items: center;
+    }
+    .ex-s-p-c .input-group-a {
+      position: relative;
+      display: -ms-flexbox;
+      display: flex;
+      -ms-flex-align: stretch;
+      align-items: stretch;
+    }
 </style>

src/views/contract/handicap.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="markets-pair-list handicap bg-plain">
     <div class="nav nav-pills">
-      <div class="nav-item">
+      <div class="nav-item" :class="{ active: tab == 1 }">
         <a class="nav-link" :class="{ active: tab == 1 }" @click="tab = 1">{{
           $t("contract.f7")
         }}</a>
@@ -300,3 +300,8 @@ export default {
   }
 };
 </script>
+<style scoped>
+.nav-item.active a{
+      color: #F7D558 !important;
+    }
+</style>

src/views/contract/index.vue

@@ -8,12 +8,57 @@
 <!--        </el-carousel>-->
 <!--    </div>-->
     <div class="page-top d-flex pt-2">
+      <!-- 左边侧边栏 -->
+      <div>
+        <template v-for="parent in contractList">
+          <!-- <div class="px-3 text-primary" :key="parent.coin_name">
+            {{ parent.coin_name }}
+          </div> -->
+          <table class="table" :key="parent.coin_name + 1">
+            <thead>
+              <tr class="text-secondary">
+                <th class="w-10/24 tr-text">{{ $t("contract.h5") }}</th>
+                <!-- <th class="w-7/24 tr-text">{{ $t("contract.g3") }}</th> -->
+                <!-- <th class="w-7/24 text-right tr-text">
+                  {{ $t("contract.h6") }}
+                </th> -->
+              </tr>
+            </thead>
+            <tbody>
+                <!-- @click="activeSymbol = item.symbol" -->
+              <tr
+                v-for="item in parent.marketInfoList"
+                :key="item.symbol"
+                :class="{ active: item.symbol == activeSymbol }"
+                @click="ispopover1(item.symbol)"
+              >
+                <td class="w-10/24 tr-text">
+                  {{ item.symbol }}/{{ parent.coin_name }}
+                </td>
+                <!-- <td
+                  class="w-7/24 "
+                  :class="item.increase < 0 ? 'decreace' : 'increase'"
+                >
+                  {{ item.price }}
+                </td>
+                <td
+                  class="w-7/24"
+                  :class="item.increase < 0 ? 'decreace' : 'increase'"
+                >
+                  {{ item.increaseStr }}
+                </td> -->
+              </tr>
+            </tbody>
+          </table>
+        </template>
+      </div>
+      <!-- K线图上面 -->
       <div class="kline-box flex-fill mr-2">
         <div
           class="coin-change d-flex align-items-center py-2 pl-4 heading justify-content-between"
         >
           <div class="d-flex align-items-center">
-            <div class="coin d-flex align-items-center">
+            <div class="coin d-flex align-items-center" v-if="0">
               <el-popover
                 placement="bottom"
                 ref="popover"
@@ -117,12 +162,24 @@
           </div>
           <!-- <div><theme-change /></div> -->
         </div>
+        <!-- K线图 -->
         <kline
           :activeCoin="{ pair_name: activeContract.pair_name }"
           v-if="activeContract.pair_name"
           :contract="true"
           :wsUrl="wsUrl"
         />
+        <!-- 交易 -->
+        <exchange-store
+        :holdPositionList="holdPositionList"
+        :symbol="activeSymbol"
+        :defaultPrice="defaultPrice"
+        :newPriceObj="newPriceObj"
+        :contractOpen="contractOpen"
+        @accountInfo="accountInfo = $event"
+        @position="holdPosition"
+        @getSymbolDetail="symbolDetail=$event"
+      />
       </div>
       <!-- 盘口 -->
       <handicap
@@ -134,8 +191,8 @@
         class="mr-2"
         ref="handicap"
       />
-      <!-- 交易 -->
+      <!-- 交易 改到k下面去了 -->
-      <exchange-store
+      <exchange-store v-if="0"
         :holdPositionList="holdPositionList"
         :symbol="activeSymbol"
         :defaultPrice="defaultPrice"
@@ -388,4 +445,13 @@ export default {
     .increase{
         color: #53b987;
     }
+    .table td{
+      border-top: 1px solid #e7e7e7;
+    }
+    .table tr.active td.tr-text{
+      color: #4387F7 !important;
+    }
+    td.tr-text{
+      color: #578F45 !important;
+    }
 </style>

src/views/exchange/make-deal.vue

@@ -58,6 +58,51 @@
         </el-tooltip>
 
     </div>
+    <div class="px-4 py-2 heading">
+        <div class="coin-change d-flex align-items-center py-2 pl-4 heading justify-content-between">
+          <div class="d-flex align-items-center">
+            <div
+              class="price px-3 border-right"
+              :class="{
+                decreace: activeContract.increase < 0,
+                increase: activeContract.increase >= 0
+              }"
+            >
+              <span class="current">{{ activeContract.price }}$</span>
+              &nbsp;
+              <span class="zf">{{ activeContract.increaseStr }}</span>
+            </div>
+            <!-- 币种价值数据 -->
+            <div class="d-flex fn-12">
+              <div class="item px-2">
+                <div class="title mb-1 text-secondary">
+                  24h {{ $t("contract.h7") }}
+                </div>
+                <div>
+                   {{ activeContract.high }}
+                </div>
+              </div>
+              <div class="item px-2">
+                <div class="title mb-1 text-secondary">
+                  24h {{ $t("contract.h8") }}
+                </div>
+                <div>
+                  {{ activeContract.low }}
+                </div>
+              </div>
+              <div class="item px-2">
+                <div class="title mb-1 text-secondary">
+                  24h {{ $t("contract.h9") }}
+				  (USDT)
+                </div>
+                <div>
+                  {{ activeContract.vol }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+    </div>
     <!-- 生成K线图 -->
     <k-line :symbol="symbol" :socket="socket" :priceDecimals="priceDecimals"></k-line>
 
@@ -385,7 +430,9 @@ export default {
             let browser_Lang = navigator.language.includes('zh') ? 'zh' : 'en';
             return localStorage.lang || browser_Lang;
         },
-
+        activeContract(){
+            return {}
+        }
     },
 
     watch: {

src/views/home/index.vue

@@ -404,9 +404,10 @@
       <div class="d-flex justify-content-between mb-4">
         <div style="width:25%;">
           <div class="th">{{ $t("xtzcoins3.a9") }}</div>
-          <div class="td">{{brokenLine[0].coin_name}}<span>{{brokenLine[0].coin_name}}</span></div>
+          <div class="td" v-for="(item, index) in brokenLine" :key="index">
-          <div class="td">{{brokenLine[1].coin_name}}<span>{{brokenLine[1].coin_name}}</span></div>
+            <img :src="item.coin_icon" style="width:30px;height:30px;" />
-          <div class="td">{{brokenLine[2].coin_name}}<span>{{brokenLine[2].coin_name}}</span></div>
+            <span>{{item.coin_name}}</span>
+          </div>
         </div>
         <div style="width:25%;">
           <div class="th">{{ $t("xtzcoins3.a10") }}</div>
@@ -513,7 +514,7 @@
           </div>
       </div>
     </div>
-    <div class="section-block section-block-8" v-if="!isLogin">
+    <div class="section-block section-block-8" v-if="!isLogin && 0">
       <h1>{{ $t("xtzcoins3.a19") }}</h1>
       <div style="font-size: 20px;margin-bottom: 3rem;color: #6A6E74;">{{ $t("xtzcoins3.a20") }}</div>
       <div class="d-flex justify-content-between" style="flex-wrap:wrap;" v-for="(parentItem, index11) in marketList" :key="index11" >
@@ -586,10 +587,10 @@
             <div class="icon-box"><img src="../../../static/images/icon/ios.png" alt=""><div>APP Store</div></div>
             <div class="icon-box"><img src="../../../static/images/icon/andriod.png" alt=""><div>Android APK</div></div>
             <div class="icon-box"><img src="../../../static/images/icon/google-play.png" alt=""><div>Google Play</div></div>
-            <div class="icon-box"><img src="../../../static/images/icon/imac.png" alt=""><div>MacOS</div></div>
+            <!-- <div class="icon-box"><img src="../../../static/images/icon/imac.png" alt=""><div>MacOS</div></div> -->
-            <div class="icon-box"><img src="../../../static/images/icon/windows.png" alt=""><div>Windows</div></div>
+            <!-- <div class="icon-box"><img src="../../../static/images/icon/windows.png" alt=""><div>Windows</div></div> -->
-            <div class="icon-box"><img src="../../../static/images/icon/linux.png" alt=""><div>Linux</div></div>
+            <!-- <div class="icon-box"><img src="../../../static/images/icon/linux.png" alt=""><div>Linux</div></div> -->
-            <div class="icon-box"><img src="../../../static/images/icon/api.png" alt=""><div>API</div></div>
+            <!-- <div class="icon-box"><img src="../../../static/images/icon/api.png" alt=""><div>API</div></div> -->
           </div>
         </div>
       </div>