litong
/
jiaoyi_xtzcoins_web
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

2

master
luyisha 3 years ago
parent
f343f096d8
commit
063423b8e2
7 changed files with 217 additions and 78 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      dist.zip
  2. 150
      src/views/contract/exchange-store.vue
  3. 7
      src/views/contract/handicap.vue
  4. 72
      src/views/contract/index.vue
  5. 49
      src/views/exchange/make-deal.vue
  6. 17
      src/views/home/index.vue
  7. BIN
      static/images/lightImageUrl.png

BIN
dist.zip
View File

Binary file not shown.

150
src/views/contract/exchange-store.vue
View File

@ -1,6 +1,6 @@
<template> <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 }"> <div class="nav-item" :class="{ active: tab == 1 }">
<a class="nav-link" :class="{ active: tab == 1 }" @click="tab = 1">{{ <a class="nav-link" :class="{ active: tab == 1 }" @click="tab = 1">{{
$t("contract.d5") $t("contract.d5")
@ -11,7 +11,7 @@
$t("contract.d6") $t("contract.d6")
}}</a> }}</a>
</div> --> </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 <el-popover
placement="bottom" placement="bottom"
width="100" width="100"
@ -43,7 +43,7 @@
</el-popover> </el-popover>
</div> </div>
</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 v-if="type == 2" class="input-group my-4 input-group-sm">
<div class="input-group-prepend"> <div class="input-group-prepend">
<span class="input-group-text">{{ $t("contract.d7") }}</span> <span class="input-group-text">{{ $t("contract.d7") }}</span>
@ -53,33 +53,34 @@
<span class="input-group-text">USDT</span> <span class="input-group-text">USDT</span>
</div> </div>
</div> </div>
<div class="d-flex align-items-center" style="margin: 0.5rem 0;color: #666;"> <div>
<div class="nav nav-pills"> <div class="" style="color: #666;">
<div class="nav-item" :class="{ active: form.type == 1 }" @click="form.type = 1"> <div class="nav nav-pills">
<a style="display:block;padding:5px 0px;margin:0 15px 0 0;"> <div class="nav-item" :class="{ active: form.type == 1 }" @click="form.type = 1">
{{ $t("contract.e0") }} <a style="display:block;padding:5px 0px;margin:0 15px 0 0;">
</a> {{ $t("contract.e0") }}
</div> </a>
<div class="nav-item" :class="{ active: form.type == 2 }" @click="form.type = 2"> </div>
<a style="display:block;padding:5px 0px;margin:0 15px 0 0;"> <div class="nav-item" :class="{ active: form.type == 2 }" @click="form.type = 2">
{{ $t("contract.d9") }} <a style="display:block;padding:5px 0px;margin:0 15px 0 0;">
</a> {{ $t("contract.d9") }}
</a>
</div>
</div> </div>
</div> </div>
</div> <div class="" style="color: #666;white-space: nowrap;margin: 0px 0px 10px 0px;">
<div class="d-flex" style="color: #666;"> <span style="margin-right: 10px;">{{ $t("contract.a3") }}</span>
<div style="margin-right: 10px;">{{ $t("contract.a3") }}</div> <span> {{ accountInfo.usable_balance }} USDT
<div>
{{ accountInfo.usable_balance }} USDT
<i <i
class="el-icon-sort" class="el-icon-sort"
@click="$router.push('/wallet/assets/exchange')" @click="$router.push('/wallet/assets/exchange')"
></i> ></i>
</div> </span>
</div> </div>
<div class="d-flex my-3 align-items-center"> </div>
<div class="input-group input-group-sm"> <div class="d-flex align-items-center px-2">
<div class="input-group-prepend"> <div class="input-group-a">
<div class="input-group-append">
<span class="input-group-text">{{ $t("contract.d8") }}</span> <span class="input-group-text">{{ $t("contract.d8") }}</span>
</div> </div>
<template v-if="form.type == 1"> <template v-if="form.type == 1">
@ -110,8 +111,8 @@
{{ form.type == 1 ? $t("contract.e0") : $t("contract.d9") }} {{ form.type == 1 ? $t("contract.e0") : $t("contract.d9") }}
</button> --> </button> -->
</div> </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.e1") }}</span> -->
<span class="input-group-text">{{ $t("contract.l2") }}</span> <span class="input-group-text">{{ $t("contract.l2") }}</span>
</div> </div>
@ -126,70 +127,72 @@
<span class="input-group-text">{{ $t("contract.e2") }}</span> <span class="input-group-text">{{ $t("contract.e2") }}</span>
</div> --> </div> -->
</div> </div>
<div class="px-2 mb-3" v-if="this.tab == 1"> <div style="width:200px;margin:0px 12px;">
<el-slider <div class="px-2" v-if="this.tab == 1">
:value="activeStep" <el-slider
@input="sliderChange" :value="activeStep"
:format-tooltip="tooltip" @input="sliderChange"
:marks="marks" :format-tooltip="tooltip"
></el-slider> :marks="marks"
<!-- :step="25" --> ></el-slider>
</div> <!-- :step="25" -->
<!-- 开仓 -->
<div v-if="tab == 1" class="kaicang">
<div class="d-flex justify-content-between mb-3" style="color: #999;">
<div>{{ $t("contract.e1") }}：</div>
<!-- {{$t("contract.e2")}} -->
<div>{{ amount }}</div>
</div> </div>
<!-- <div class="d-flex justify-content-between mb-4"> <!-- 开仓 -->
<div>{{ $t("contract.a3") }}:</div> <div v-if="tab == 1" class="kaicang">
<div> <div class="d-flex justify-content-between mb-3" style="color: #999;">
{{ accountInfo.usable_balance }} USDT <div>{{ $t("contract.e1") }}：</div>
<i <!-- {{$t("contract.e2")}} -->
class="el-icon-sort" <div>{{ amount }}</div>
@click="$router.push('/wallet/assets/exchange')"
></i>
</div> </div>
</div> --> <!-- <div class="d-flex justify-content-between mb-4">
</div> <div>{{ $t("contract.a3") }}:</div>
<!-- 平仓 --> <div>
<div v-if="tab == 2"> {{ accountInfo.usable_balance }} USDT
<div class="d-flex justify-content-between"> <i
<div>{{ $t("contract.e4") }}：</div> class="el-icon-sort"
<div>{{ multiplePositions }} {{ $t("contract.e2") }}</div> @click="$router.push('/wallet/assets/exchange')"
></i>
</div>
</div> -->
</div> </div>
<div class="d-flex justify-content-between mb-4"> <!-- 平仓 -->
<div>{{ $t("contract.e5") }}:</div> <div v-if="tab == 2">
<div>{{ shortPosition }} {{ $t("contract.e2") }}</div> <div class="d-flex justify-content-between">
<div>{{ $t("contract.e4") }}：</div>
<div>{{ multiplePositions }} {{ $t("contract.e2") }}</div>
</div>
<div class="d-flex justify-content-between mb-4">
<div>{{ $t("contract.e5") }}:</div>
<div>{{ shortPosition }} {{ $t("contract.e2") }}</div>
</div>
</div> </div>
</div> </div>
<div class="exchange_button" v-if="tab == 1" style="color: #999;"> <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 <button
@click="ifOpenPosition(1)" @click="ifOpenPosition(1)"
type="button" 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") }} {{ $t("contract.d0") }}
<!-- <span class="fn-12"> （{{ $t("contract.e6") }}） </span> --> <!-- <span class="fn-12"> （{{ $t("contract.e6") }}） </span> -->
</button> </button>
<div class="text-left"> <div class="text-left" style="white-space: nowrap;">
{{ $t("contract.e7") }} {{ maxNum }} {{ $t("contract.e7") }} {{ maxNum }}
<!-- {{ $t("contract.e2") }} --> <!-- {{ $t("contract.e2") }} -->
</div> </div>
</div> </div>
<div class="px-1 flex-fill"> <div class="px-2 flex-fill">
<button <button
@click="ifOpenPosition(2)" @click="ifOpenPosition(2)"
type="button" 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") }} {{ $t("contract.d2") }}
<!-- <span class="fn-12"> （{{ $t("contract.e8") }}） </span> --> <!-- <span class="fn-12"> （{{ $t("contract.e8") }}） </span> -->
</button> </button>
<!-- <div class="text-center"> --> <!-- <div class="text-center"> -->
<div class="text-right"> <div class="text-right" style="white-space: nowrap;">
{{ $t("contract.e7") }} {{ maxNum }} {{ $t("contract.e7") }} {{ maxNum }}
<!-- {{ $t("contract.e2") }} --> <!-- {{ $t("contract.e2") }} -->
</div> </div>
@ -517,4 +520,21 @@ export default {
.markets-pair-list .nav-item.active a{ .markets-pair-list .nav-item.active a{
color: #F7D558 !important; 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> </style>

7
src/views/contract/handicap.vue
View File

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

72
src/views/contract/index.vue
View File

@ -8,12 +8,57 @@
<!-- </el-carousel>--> <!-- </el-carousel>-->
<!-- </div>--> <!-- </div>-->
<div class="page-top d-flex pt-2"> <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="kline-box flex-fill mr-2">
<div <div
class="coin-change d-flex align-items-center py-2 pl-4 heading justify-content-between" 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="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 <el-popover
placement="bottom" placement="bottom"
ref="popover" ref="popover"
@ -117,12 +162,24 @@
</div> </div>
<!-- <div><theme-change /></div> --> <!-- <div><theme-change /></div> -->
</div> </div>
<!-- K线图 -->
<kline <kline
:activeCoin="{ pair_name: activeContract.pair_name }" :activeCoin="{ pair_name: activeContract.pair_name }"
v-if="activeContract.pair_name" v-if="activeContract.pair_name"
:contract="true" :contract="true"
:wsUrl="wsUrl" :wsUrl="wsUrl"
/> />
<!-- 交易 -->
<exchange-store
:holdPositionList="holdPositionList"
:symbol="activeSymbol"
:defaultPrice="defaultPrice"
:newPriceObj="newPriceObj"
:contractOpen="contractOpen"
@accountInfo="accountInfo = $event"
@position="holdPosition"
@getSymbolDetail="symbolDetail=$event"
/>
</div> </div>
<!-- 盘口 --> <!-- 盘口 -->
<handicap <handicap
@ -134,8 +191,8 @@
class="mr-2" class="mr-2"
ref="handicap" ref="handicap"
/> />
<!-- 交易 --> <!-- 交易 改到k下面去了 -->
<exchange-store <exchange-store v-if="0"
:holdPositionList="holdPositionList" :holdPositionList="holdPositionList"
:symbol="activeSymbol" :symbol="activeSymbol"
:defaultPrice="defaultPrice" :defaultPrice="defaultPrice"
@ -388,4 +445,13 @@ export default {
.increase{ .increase{
color: #53b987; 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> </style>

49
src/views/exchange/make-deal.vue
View File

@ -58,6 +58,51 @@
</el-tooltip> </el-tooltip>
</div> </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线图 -->
<k-line :symbol="symbol" :socket="socket" :priceDecimals="priceDecimals"></k-line> <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'; let browser_Lang = navigator.language.includes('zh') ? 'zh' : 'en';
return localStorage.lang || browser_Lang; return localStorage.lang || browser_Lang;
}, },
activeContract(){
return {}
}
}, },
watch: { watch: {

17
src/views/home/index.vue
View File

@ -404,9 +404,10 @@
<div class="d-flex justify-content-between mb-4"> <div class="d-flex justify-content-between mb-4">
<div style="width:25%;"> <div style="width:25%;">
<div class="th">{{ $t("xtzcoins3.a9") }}</div> <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>
<div style="width:25%;"> <div style="width:25%;">
<div class="th">{{ $t("xtzcoins3.a10") }}</div> <div class="th">{{ $t("xtzcoins3.a10") }}</div>
@ -513,7 +514,7 @@
</div> </div>
</div> </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> <h1>{{ $t("xtzcoins3.a19") }}</h1>
<div style="font-size: 20px;margin-bottom: 3rem;color: #6A6E74;">{{ $t("xtzcoins3.a20") }}</div> <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" > <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/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/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/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> </div>
</div> </div>

BIN
static/images/lightImageUrl.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 456 KiB

After

Width:  |  Height:  |  Size: 268 KiB

Write Preview
Loading…
Cancel
Save