|
@ -1,7 +1,9 @@ |
|
|
<template> |
|
|
<template> |
|
|
<view class="main"> |
|
|
<view class="main"> |
|
|
<!-- nav --> |
|
|
<!-- nav --> |
|
|
<navigation>{{ 'BTC/USDT' }}<view slot="right" class="right" @click="goto('kLine')"></view> |
|
|
<navigation :showBack="false"> |
|
|
|
|
|
<view class="leftMenuBtn" @click="popupShow = true">{{ 'BTC/USDT' }}</view> |
|
|
|
|
|
<view slot="right" class="right" @click="goto('kLine')"></view> |
|
|
</navigation> |
|
|
</navigation> |
|
|
<view class="content"> |
|
|
<view class="content"> |
|
|
<view class="transactionSide"> |
|
|
<view class="transactionSide"> |
|
@ -11,9 +13,34 @@ |
|
|
<positionList v-on:depthChange="depthChange"></positionList> |
|
|
<positionList v-on:depthChange="depthChange"></positionList> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
<view class="gap"> |
|
|
<view class="orderList"> |
|
|
<entrustOrderList></entrustOrderList> |
|
|
<entrustOrderList></entrustOrderList> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<u-popup class="popup" :show="popupShow" mode="left" @close="popupShow = false" @open="popupShow = true" |
|
|
|
|
|
bgColor="#15141F"> |
|
|
|
|
|
<view class="popupContent"> |
|
|
|
|
|
<!-- nav --> |
|
|
|
|
|
<view class="head"> |
|
|
|
|
|
<text class="item">{{ i18n.TrandingPair }}</text> |
|
|
|
|
|
<text class="center">{{ i18n.LatestPrice }}</text> |
|
|
|
|
|
<text class="item">{{ i18n.RiseAndfall }}</text> |
|
|
|
|
|
</view> |
|
|
|
|
|
<!-- 列表 --> |
|
|
|
|
|
<view class="coinList"> |
|
|
|
|
|
<scroll-view scroll-y="true" style="height: 86vh;" scroll-with-animation="true" @touchmove.stop.prevent=""> |
|
|
|
|
|
<view class="coin" v-for="(item, index) in 20" :key="index" @click="goto(item)"> |
|
|
|
|
|
<view class="name">BTC/USDT</view> |
|
|
|
|
|
<view class="price">{{ 5145 * index * index * index }}</view> |
|
|
|
|
|
<view class="priceChange" :class="{ 'down': index % 2 === 0 }">500.30%</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</scroll-view> |
|
|
|
|
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</u-popup> |
|
|
|
|
|
<!-- tabBar --> |
|
|
|
|
|
<tab-bar :selectActive="2" :isTarde="true"></tab-bar> |
|
|
</view> |
|
|
</view> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
@ -22,7 +49,7 @@ export default { |
|
|
name: "trade", |
|
|
name: "trade", |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
|
|
|
popupShow: false, |
|
|
}; |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
computed: { |
|
|
computed: { |
|
@ -31,7 +58,6 @@ export default { |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
onLoad() { |
|
|
onLoad() { |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
onShow() { }, |
|
|
onShow() { }, |
|
|
methods: { |
|
|
methods: { |
|
@ -58,6 +84,21 @@ export default { |
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
<style lang="scss" scoped> |
|
|
.main { |
|
|
.main { |
|
|
|
|
|
padding-bottom: 198rpx; // 避免底部TabBar盖住内容 |
|
|
|
|
|
|
|
|
|
|
|
.leftMenuBtn { |
|
|
|
|
|
width: 48rpx; |
|
|
|
|
|
height: 48rpx; |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
left: 32rpx; |
|
|
|
|
|
font-size: 24rpx; |
|
|
|
|
|
background-image: url(../../static/maskets/menu.png); |
|
|
|
|
|
background-repeat: no-repeat; |
|
|
|
|
|
background-size: 48rpx; |
|
|
|
|
|
padding-left: 54rpx; |
|
|
|
|
|
font-size: 34rpx; |
|
|
|
|
|
font-weight: normal; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.right { |
|
|
.right { |
|
|
width: 48rpx; |
|
|
width: 48rpx; |
|
@ -93,6 +134,103 @@ export default { |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.orderList {} |
|
|
|
|
|
|
|
|
|
|
|
.popup { |
|
|
|
|
|
.popupContent { |
|
|
|
|
|
width: 586rpx; |
|
|
|
|
|
font-size: 24rpx; |
|
|
|
|
|
|
|
|
|
|
|
.head { |
|
|
|
|
|
margin-top: 108rpx; |
|
|
|
|
|
color: #818197; |
|
|
|
|
|
margin-left: 16rpx; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
|
|
|
|
.center { |
|
|
|
|
|
width: 190rpx; |
|
|
|
|
|
padding-left: 30rpx; |
|
|
|
|
|
font-size: 24rpx; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.item { |
|
|
|
|
|
font-size: 24rpx; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.coinList { |
|
|
|
|
|
margin: 0rpx 32rpx 0; |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
|
|
|
|
.coin { |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
position: relative; |
|
|
|
|
|
height: 64rpx; |
|
|
|
|
|
padding: 12rpx 0; |
|
|
|
|
|
font-size: 24rpx; |
|
|
|
|
|
|
|
|
|
|
|
.name { |
|
|
|
|
|
display: inline-block; |
|
|
|
|
|
width: 180rpx; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
line-height: 64rpx; |
|
|
|
|
|
font-size: 24rpx; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.price { |
|
|
|
|
|
display: inline-block; |
|
|
|
|
|
width: 180rpx; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
line-height: 64rpx; |
|
|
|
|
|
font-size: 24rpx; |
|
|
|
|
|
// text-align: center; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.priceChange { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
right: 0; |
|
|
|
|
|
display: inline-block; |
|
|
|
|
|
width: 164rpx; |
|
|
|
|
|
height: 64rpx; |
|
|
|
|
|
border-radius: 20rpx; |
|
|
|
|
|
line-height: 64rpx; |
|
|
|
|
|
background-color: $mainColor; |
|
|
|
|
|
font-size: 24rpx; |
|
|
|
|
|
text-align: right; |
|
|
|
|
|
padding-right: 16rpx; |
|
|
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
&::before { |
|
|
|
|
|
display: block; |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
content: ''; |
|
|
|
|
|
background-image: url(../../static/maskets/ic_arrow_up.png); |
|
|
|
|
|
background-repeat: no-repeat; |
|
|
|
|
|
background-size: contain; |
|
|
|
|
|
width: 28rpx; |
|
|
|
|
|
height: 28rpx; |
|
|
|
|
|
top: 18rpx; |
|
|
|
|
|
left: 16rpx; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
&.down { |
|
|
|
|
|
background-color: $assistRed; |
|
|
|
|
|
|
|
|
|
|
|
&::before { |
|
|
|
|
|
background-image: url(../../static/maskets/ic_arrow_down.png); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|