|
|
@@ -1,6 +1,219 @@
|
|
|
<template>
|
|
|
<view class="content">
|
|
|
-
|
|
|
+ <view class="usdtTitle flex">
|
|
|
+ <view class="left flex">
|
|
|
+ <image class="img margin-r-10" src="../../static/icon/hy02.png" mode="widthFix"></image>
|
|
|
+ <view class="margin-r-10">
|
|
|
+ BTC/USDT
|
|
|
+ </view>
|
|
|
+ <view class="font-color-green">
|
|
|
+ 10086
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="right">
|
|
|
+ <image class="img" src="../../static/icon/hy01.png" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="box flex padding-t-20 padding-b-30">
|
|
|
+ <view class="item">
|
|
|
+ <view class="itemTitle margin-b-20">
|
|
|
+ 交易方向
|
|
|
+ </view>
|
|
|
+ <view class="buttomBox flex">
|
|
|
+ <view @click="typeIndex=1" class="buttom " :class="{action:typeIndex==1}">
|
|
|
+ 上涨
|
|
|
+ </view>
|
|
|
+ <view @click="typeIndex=2" class="buttom " :class="{action:typeIndex==2,'bg-danger':typeIndex==2}">
|
|
|
+ 下跌
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tabType flex ">
|
|
|
+ <view class="tab" @click="jyType=1" :class="{action:jyType==1}">
|
|
|
+ 限价委托
|
|
|
+ </view>
|
|
|
+ <view class="tab" @click="jyType=2" :class="{action:jyType==2}">
|
|
|
+ 市价委托
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="inputBox margin-b-20" v-if="jyType==1">
|
|
|
+ <input v-model="xzMoney" class="input" placeholder="请输入价格" type="number">
|
|
|
+ </view>
|
|
|
+ <view class="itemTitle margin-b-20">
|
|
|
+ 交易个数
|
|
|
+ </view>
|
|
|
+ <view class="inputBox flex margin-b-20">
|
|
|
+ <input v-model="payNum" class="input" placeholder="请输入交易数量" type="number">
|
|
|
+ <view class="rightInputBox flex">
|
|
|
+ <image @click="payNum>0?payNum--:false" class="img" src="../../static/icon/hy04.png"
|
|
|
+ mode="scaleToFill"></image>
|
|
|
+ <view class="jg">
|
|
|
+ </view>
|
|
|
+ <image @click="payNum++" class="img" src="../../static/icon/hy03.png" mode="scaleToFill">
|
|
|
+ </image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="itemTitle margin-b-20">
|
|
|
+ 杠杆倍数
|
|
|
+ </view>
|
|
|
+ <view class="itemLeftList flex margin-b-20">
|
|
|
+ <view class="ll" @click="changeGG(ind,ls)" :class="{action:ind==ggIndex}"
|
|
|
+ v-for="(ls,ind) in ggList">
|
|
|
+ {{ls.num}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="inputBox flex margin-b-20">
|
|
|
+ <input v-model="ggBs" class="input" placeholder="请输入杠杆倍数" type="number">
|
|
|
+ </view>
|
|
|
+ <view class="flex margin-b-20">
|
|
|
+ <view class="itemTitle">
|
|
|
+ 止损价
|
|
|
+ </view>
|
|
|
+ <view class="inputBox flex">
|
|
|
+ <input v-model="zsMoney" placeholder="请输入止损价格" class="input" type="number">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex margin-b-20">
|
|
|
+ <view class="itemTitle">
|
|
|
+ 止盈价
|
|
|
+ </view>
|
|
|
+ <view class="inputBox flex">
|
|
|
+ <input v-model="zyMoney" placeholder="请输入止盈价格" class="input" type="number">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex margin-b-20">
|
|
|
+ <view class="itemTitle">
|
|
|
+ 保证金
|
|
|
+ </view>
|
|
|
+ <view class="itemTitle">
|
|
|
+ 0
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex margin-b-20">
|
|
|
+ <view class="itemTitle">
|
|
|
+ 可用合约余额
|
|
|
+ </view>
|
|
|
+ <view class="itemTitle">
|
|
|
+ 0
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex margin-b-20">
|
|
|
+ <view class="itemTitle">
|
|
|
+ 手续费
|
|
|
+ </view>
|
|
|
+ <view class="itemTitle">
|
|
|
+ 0
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="buttomSubmit" :class="{'bg-success':typeIndex==1,'bg-danger':typeIndex==2}">
|
|
|
+ {{typeIndex==1?'做多':'做空'}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item padding-l-20">
|
|
|
+ <view class="itemName flex">
|
|
|
+ <view class="itemMinName">
|
|
|
+ 价格
|
|
|
+ </view>
|
|
|
+ <view class="itemMinName">
|
|
|
+ 数量
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="itemList">
|
|
|
+ <view class="list flex font-color-green">
|
|
|
+ <view class="li top">
|
|
|
+ 166666
|
|
|
+ </view>
|
|
|
+ <view class="li top">
|
|
|
+ 0000.00
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="llMax font-color-green">
|
|
|
+ 10086
|
|
|
+ </view>
|
|
|
+ <view class="list flex font-color-red">
|
|
|
+ <view class="li bottom">
|
|
|
+ 166666
|
|
|
+ </view>
|
|
|
+ <view class="li bottom">
|
|
|
+ 0000.00
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="box margin-t-30 padding-t-30 padding-b-30">
|
|
|
+ <view class="flex listTitleBox">
|
|
|
+ <view class="leftBottom flex">
|
|
|
+ <view @click="ddTypeChage(1)" class="titleType margin-r-30" :class="{action:ddType==1}">
|
|
|
+ 限价委托
|
|
|
+ </view>
|
|
|
+ <view @click="ddTypeChage(2)" class="titleType" :class="{action:ddType==2}">
|
|
|
+ 持仓
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="rightBottom flex">
|
|
|
+ <image class="img" src="../../static/icon/hy02.png" mode="widthFix"></image>
|
|
|
+ <view class="more">
|
|
|
+ 全部订单
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="usdtList padding-t-30 padding-b-30">
|
|
|
+ <view class="flex">
|
|
|
+ <view class="name">
|
|
|
+ <text class="font-color-green">
|
|
|
+ 做多
|
|
|
+ </text>
|
|
|
+ <text>
|
|
|
+ BTC/USDT
|
|
|
+ </text>
|
|
|
+ <text class="font-color-green">
|
|
|
+ 0.00
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="usdtListButtom">
|
|
|
+ 一键平仓
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tip ">
|
|
|
+ 开仓时间：2022-11-23 19:10:11
|
|
|
+ </view>
|
|
|
+ <view class="flex">
|
|
|
+ <view class="tipList">
|
|
|
+ <view class="nameTip">
|
|
|
+ 开仓单价
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 1600000
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tipList">
|
|
|
+ <view class="nameTip">
|
|
|
+ 保证金
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 1600000
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tipList">
|
|
|
+ <view class="nameTip">
|
|
|
+ 交易个数
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 1600000
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tipList">
|
|
|
+ <view class="nameTip">
|
|
|
+ 杠杆倍数
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 1600000
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -8,7 +221,35 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+ // 当前选中的杠杆倍数
|
|
|
+ ggIndex: 0,
|
|
|
+ ggList: [{
|
|
|
+ num: 5
|
|
|
+ }, {
|
|
|
+ num: 10
|
|
|
+ }, {
|
|
|
+ num: 20
|
|
|
+ }, {
|
|
|
+ num: 50
|
|
|
+ }, {
|
|
|
+ num: 100
|
|
|
+ }],
|
|
|
+ //当前选中的交易类别
|
|
|
+ typeIndex: 1,
|
|
|
+ // 交易类型
|
|
|
+ jyType: 1,
|
|
|
+ //交易数量
|
|
|
+ payNum: 0,
|
|
|
+ // 杠杆倍数
|
|
|
+ ggBs: 0,
|
|
|
+ // 限价委托价格
|
|
|
+ xzMoney: 0,
|
|
|
+ // 止损价格
|
|
|
+ zsMoney: 0,
|
|
|
+ // 止盈价格
|
|
|
+ zyMoney: 0,
|
|
|
+ // 当前查看列表类型
|
|
|
+ ddType: 1
|
|
|
}
|
|
|
},
|
|
|
onLoad() {
|
|
|
@@ -24,10 +265,225 @@
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
-
|
|
|
+ // 修改杠杆倍数
|
|
|
+ changeGG(ind, item) {
|
|
|
+ this.ggBs = item.num
|
|
|
+ this.ggIndex = ind
|
|
|
+ },
|
|
|
+ // 查看列表切换类型
|
|
|
+ ddTypeChage(ind) {
|
|
|
+ this.ddType = ind
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
-</style>
|
|
|
+ .usdtTitle,
|
|
|
+ .box {
|
|
|
+ padding: 0 20rpx;
|
|
|
+ width: 750rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .usdtTitle {
|
|
|
+ border-bottom: 1px solid $border-color-light;
|
|
|
+ line-height: 1;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 36rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ .img {
|
|
|
+ width: 48rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .box {
|
|
|
+ line-height: 1;
|
|
|
+ align-items: flex-start;
|
|
|
+
|
|
|
+ .itemTitle {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: $font-sm;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ flex-grow: 1;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .buttomBox {
|
|
|
+ font-size: $font-sm;
|
|
|
+
|
|
|
+ .buttom {
|
|
|
+ width: 200rpx;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ background-color: #F5F5F5;
|
|
|
+
|
|
|
+ &.action {
|
|
|
+ color: #FFFFFF;
|
|
|
+ background-color: $color-green;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabType {
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ .tab {
|
|
|
+ padding-top: 30rpx;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ color: #545D6F;
|
|
|
+ font-size: $font-sm;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ &.action {
|
|
|
+ color: $uni-color-warning;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .inputBox {
|
|
|
+ height: 60rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border: 1px solid $border-color-light;
|
|
|
+
|
|
|
+ .input {
|
|
|
+ font-size: $font-sm;
|
|
|
+ flex-grow: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rightInputBox {
|
|
|
+ .jg {
|
|
|
+ border: 1px solid $border-color-light;
|
|
|
+ height: 50rpx;
|
|
|
+ margin: 0 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 28rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .itemLeftList {
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ .ll {
|
|
|
+ border: 1px solid $border-color-light;
|
|
|
+ width: 74rpx;
|
|
|
+ height: 54rpx;
|
|
|
+ line-height: 54rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: $font-sm;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ &.action {
|
|
|
+ background-color: #F5F5F5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .buttomSubmit {
|
|
|
+ color: #FFFFFF;
|
|
|
+ height: 64rpx;
|
|
|
+ line-height: 64rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: $font-sm;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .itemName {
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+
|
|
|
+ .itemMinName {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #5D6677;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .itemList {
|
|
|
+ .list {
|
|
|
+ font-size: 20rpx;
|
|
|
+ padding: 10rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .llMax {
|
|
|
+ padding: 30rpx 0;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: $font-lg;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .listTitleBox {
|
|
|
+ border-bottom: 1px solid $border-color-light;
|
|
|
+ align-items: flex-start;
|
|
|
+ .leftBottom {
|
|
|
+ flex-shrink: 0;
|
|
|
+ font-size: $font-lg;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ .action {
|
|
|
+ border-bottom: 2px solid $uni-color-warning;
|
|
|
+ }
|
|
|
+
|
|
|
+ .titleType {
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .rightBottom {
|
|
|
+ font-size: $font-base;
|
|
|
+ color: #707A8A;
|
|
|
+ flex-shrink: 0;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 36rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .usdtList{
|
|
|
+ color: #707A8A;
|
|
|
+ border-bottom: 1px solid $border-color-light;
|
|
|
+ .name{
|
|
|
+ font-size: $font-lg;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .usdtListButtom{
|
|
|
+ font-size: $font-base;
|
|
|
+ background-color:#F5F5F5 ;
|
|
|
+ color: $uni-color-warning;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ }
|
|
|
+ .tip{
|
|
|
+ padding-top: 10rpx;
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+ font-size: $font-base;
|
|
|
+ }
|
|
|
+ .tipList{
|
|
|
+ font-size: $font-sm;
|
|
|
+ .nameTip{
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
