[liang]
3 years ago
11 changed files with 364 additions and 21 deletions
@ -0,0 +1,300 @@ |
|||
<template> |
|||
<view class="main"> |
|||
<!-- nav --> |
|||
<navigation>{{ 'BTC/USDT' }}</navigation> |
|||
<!-- 价格百分比 --> |
|||
<view class="header"> |
|||
<view class="top"> |
|||
<!-- 实时价格 --> |
|||
<text class="price">34985.93</text> |
|||
<!-- 百分比,根据数据正负判断颜色 --> |
|||
<text class="percent" :class="{ rise: false }">-15.30%</text> |
|||
</view> |
|||
<view class="bottom"> |
|||
<view class="left"> |
|||
<view class="title">{{ i18n.Highest }}</view> |
|||
<view class="value">45930.24</view> |
|||
</view> |
|||
<view class="center"> |
|||
<view class="title">{{ i18n.Lowest }}</view> |
|||
<view class="value">45930.24</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="title">{{ i18n.Amount }}</view> |
|||
<view class="value">28394893.30943094</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- K线图 --> |
|||
<view class="kline"> |
|||
</view> |
|||
<!-- 买卖挂牌表 --> |
|||
<view class="MarketTrades"> |
|||
<view class="headTitle">Market trades</view> |
|||
<view class="table"> |
|||
<view class="box"> |
|||
<view class="title"> |
|||
<view class="quantity">{{ i18n.Quantity }}</view> |
|||
<view class="price">{{ i18n.BuyingPrice }}</view> |
|||
</view> |
|||
<view class="list"> |
|||
<view class="item" v-for="(item, index) in buyList" :key="index"> |
|||
<text class="price">0.87897874</text> |
|||
<text class="num buy">{{ item }}</text> |
|||
<view class="buybg" :style="`width: ${20 * index}%;`"></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="box"> |
|||
<view class="title"> |
|||
<view class="quantity">{{ i18n.Quantity }}</view> |
|||
<view class="price">{{ i18n.SellPrice20 }}</view> |
|||
</view> |
|||
<view class="list"> |
|||
<view class="item" v-for="(item, index) in sellList" :key="index"> |
|||
<text class="price">0.87897874</text> |
|||
<text class="num sell">{{ item }}</text> |
|||
<view class="sellbg" :style="`width: ${20 * index}%;`"></view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="btn"> |
|||
<!-- open按钮 --> |
|||
<u-button class="button" color="#00E8A2" throttleTime="500" @click="openBtnClick"> |
|||
{{ i18n.open }} |
|||
</u-button> |
|||
<!-- close按钮 --> |
|||
<u-button class="button" color="#F4506A" throttleTime="500" @click="closeBtnClick"> |
|||
{{ i18n.close }} |
|||
</u-button> |
|||
</view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "trade", |
|||
data() { |
|||
return { |
|||
buyList: 7, |
|||
sellList: 9, |
|||
|
|||
}; |
|||
}, |
|||
computed: { |
|||
i18n() { |
|||
return this.$t("markets"); |
|||
}, |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
onShow() { }, |
|||
methods: { |
|||
depthChange(e) { |
|||
console.log(e); |
|||
}, |
|||
goto(page) { |
|||
let url = ''; |
|||
switch (page) { |
|||
case 'kLine': |
|||
url = '/pages/markets/kLine' |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
uni.navigateTo({ |
|||
url, |
|||
}); |
|||
} |
|||
|
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.main { |
|||
|
|||
.header { |
|||
background: #000000; |
|||
margin-top: 200rpx; |
|||
padding: 0 32rpx; |
|||
|
|||
|
|||
.top { |
|||
height: 80rpx; |
|||
border-bottom: 2rpx solid #A1A0A8; |
|||
|
|||
.price { |
|||
line-height: 80rpx; |
|||
font-size: 40rpx; |
|||
} |
|||
|
|||
.percent { |
|||
vertical-align: text-top; |
|||
margin-left: 20rpx; |
|||
padding: 8rpx 20rpx; |
|||
border-radius: 8rpx; |
|||
font-size: 24rpx; |
|||
background-color: rgba($color: #F26666, $alpha: 0.2); |
|||
color: #F26666; |
|||
|
|||
&.rise { |
|||
color: #00E8A2; |
|||
background-color: rgba($color: #00E8A2, $alpha: 0.2); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.bottom { |
|||
display: flex; |
|||
font-size: 24rpx; |
|||
|
|||
.title { |
|||
margin-top: 24rpx; |
|||
line-height: 32rpx; |
|||
} |
|||
|
|||
.value { |
|||
margin: 24rpx 0; |
|||
color: #A1A0A8; |
|||
} |
|||
|
|||
.left { |
|||
flex: 1; |
|||
text-align: left; |
|||
} |
|||
|
|||
.center { |
|||
flex: 1; |
|||
text-align: center; |
|||
} |
|||
|
|||
.right { |
|||
flex: 1; |
|||
text-align: right; |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.MarketTrades { |
|||
.headTitle { |
|||
padding-left: 32rpx; |
|||
font-size: 34rpx; |
|||
height: 80rpx; |
|||
line-height: 80rpx; |
|||
} |
|||
|
|||
.table { |
|||
display: flex; |
|||
font-size: 24rpx; |
|||
|
|||
.box { |
|||
flex: 1; |
|||
overflow: hidden; |
|||
height: 450rpx; |
|||
|
|||
.title { |
|||
display: flex; |
|||
margin-bottom: 16rpx; |
|||
color: #A1A0A8; |
|||
|
|||
.quantity { |
|||
flex: 1; |
|||
} |
|||
|
|||
.price { |
|||
flex: 1; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
.list { |
|||
overflow: hidden; |
|||
|
|||
.item { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 50rpx; |
|||
line-height: 50rpx; |
|||
display: flex; |
|||
|
|||
.price { |
|||
display: block; |
|||
width: 50%; |
|||
text-align: left; |
|||
z-index: 1; |
|||
|
|||
} |
|||
|
|||
.num { |
|||
display: block; |
|||
width: 50%; |
|||
text-align: right; |
|||
padding-right: 32rpx; |
|||
z-index: 1; |
|||
|
|||
&.buy { |
|||
color: #00E8A2; |
|||
} |
|||
|
|||
&.sell { |
|||
color: #F4506A; |
|||
} |
|||
} |
|||
|
|||
.buybg { |
|||
height: 100%; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
z-index: 0; |
|||
background: rgba($color: #00E8A2, $alpha: 0.1) |
|||
} |
|||
|
|||
.sellbg { |
|||
height: 100%; |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
z-index: 0; |
|||
background: rgba($color: #F4506A, $alpha: 0.1) |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
} |
|||
} |
|||
|
|||
.btn { |
|||
display: flex; |
|||
margin: 96rpx 32rpx; |
|||
|
|||
.button { |
|||
flex: 1; |
|||
box-sizing: border-box; |
|||
height: 96rpx; |
|||
border-radius: 16rpx; |
|||
font-weight: 700; |
|||
font-size: 28rpx; |
|||
color: #15141F !important; |
|||
|
|||
&:nth-child(2) { |
|||
margin-left: 14rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue