12 changed files with 807 additions and 11 deletions
@ -0,0 +1,753 @@ |
|||
<template> |
|||
<view class="entrustOrderList"> |
|||
<navigation>{{ i18n.contractOrder }}</navigation> |
|||
<!-- 四个tab --> |
|||
<view class="tab"> |
|||
|
|||
<view class="item" :class="{ select: type === 1 }" @click="onChangeType(1)">{{ i18n.Position }} |
|||
</view> |
|||
<view class="item" :class="{ select: type === 2 }" @click="onChangeType(2)">{{ i18n.Closed }} |
|||
</view> |
|||
<view class="item" :class="{ select: type === 0 }" @click="onChangeType(0)">{{ i18n.CurrentEntrust }} |
|||
</view> |
|||
<view class="item" :class="{ select: type === 3 }" @click="onChangeType(3)">{{ i18n.Revoked }} |
|||
</view> |
|||
</view> |
|||
<!-- 卡片列表 --> |
|||
<view class="content" v-if="list.length"> |
|||
<view class="card" v-for="(item, index) in list" :key="index"> |
|||
<view class="header"> |
|||
<text :class="item.direction">{{item.direction}}</text> |
|||
<text class="time">{{item.timestr}}</text> |
|||
<text class="closeTimeTitle" v-show="type === 2">{{ i18n.CloseTime }}</text> |
|||
<text class="closeTime" v-show="type === 2">{{item.timestr2}}</text> |
|||
<view class="closeBtn" v-show="type === 0" @click="closeItem(item,index)">{{ |
|||
i18n.close |
|||
}}</view> |
|||
|
|||
</view> |
|||
|
|||
<view class="infoBody"> |
|||
<view class="item"> |
|||
<!-- 公共的 --> |
|||
<view class="left"> |
|||
<view class="title">{{ item.pair }}</view> |
|||
<view class="value">{{item.openedPrice}}</view> |
|||
<view class="title">{{ i18n.Bond }}</view> |
|||
<view class="value">{{item.bondAmount}}</view> |
|||
<view class="title" v-show="type == 1||type == 2">{{ i18n.StyPrice }}</view> |
|||
<view class="value" v-show="type ==1||type == 2">{{item.winStopPrice}}</view> |
|||
<view class="closeBtn" v-show="type === 1" @click="Margincall(item)"> |
|||
{{ i18n.Margincall }} |
|||
</view> |
|||
</view> |
|||
<!-- 公共的 --> |
|||
<view class="center"> |
|||
<view class="title">{{ i18n.AmountLeverage }}</view> |
|||
<view class="value">{{item.hand}} * {{item.leverage}}</view> |
|||
<view class="title">{{ i18n.Fee }}</view> |
|||
<view class="value">{{item.fee}}</view> |
|||
<view class="title" v-show="type == 1||type == 2">{{ i18n.StsPrice }}</view> |
|||
<view class="value" v-show="type == 1||type == 2">{{item.lossStopPrice}}</view> |
|||
|
|||
<!-- <view class="title" v-show="type === 1">{{ i18n.do }}</view> --> |
|||
<view class="closeBtn" v-show="type === 1" @click="getStopLimit(item)"> |
|||
{{ i18n.StopLimit }} |
|||
</view> |
|||
|
|||
</view> |
|||
<!-- Current Entrust 和 Position--> |
|||
<view class="right" v-show="type === 0 || type === 1"> |
|||
<view class="title">{{ i18n.CurrentPrice }}</view> |
|||
<view class="value" style="color:#F4506A;">{{latest[item.pair]}}</view> |
|||
<!-- <view class="title" v-show="type === 0">{{ i18n.status }}</view> |
|||
<view class="value" v-show="type === 0"> |
|||
{{item.status=='undone'?i18n.undone:item.status=='opened'?i18n.opened:item.status=='revoked'?i18n.revoked:i18n.closed}} |
|||
</view> --> |
|||
<view class="title" v-show="type === 1">{{ i18n.ROE }}</view> |
|||
<view class="value" v-show="type === 1" :style=" |
|||
getValue(item.direction=='buy' |
|||
?(latest[item.pair]-item.openedPrice)*item.hand/item.bondAmount:(item.openedPrice-latest[item.pair])*item.hand/item.bondAmount)>=0?'color:#00E8A2;':'color:#F4506A'"> |
|||
<!-- {{getValue(item.profitAmount/item.bondAmount)}}% --> |
|||
{{getValue(item.direction=='buy'?(latest[item.pair]-item.openedPrice)*item.hand/item.bondAmount:(item.openedPrice-latest[item.pair])*item.hand/item.bondAmount)}}% |
|||
</view> |
|||
|
|||
<view class="title" v-show="type === 1||type === 2">{{ i18n.ExpectProfit }}</view> |
|||
<view class="value" v-show="type === 1" |
|||
:style="parseFloat(getItem(item.direction=='buy'?(latest[item.pair]-item.openedPrice)*item.hand:(item.openedPrice-latest[item.pair])*item.hand))>=0?'color:#00E8A2':'color:#F4506A'"> |
|||
{{getItem(item.direction=='buy'?(latest[item.pair]-item.openedPrice)*item.hand:(item.openedPrice-latest[item.pair])*item.hand)}} |
|||
</view> |
|||
<view class="value" style="color:#00E8A2;" v-show="type === 2">0</view> |
|||
|
|||
<!-- <view class="title" v-show="type === 1">{{ i18n.do }}</view> --> |
|||
<view class="closeBtn" v-show="type === 1" @click="closeItem(item,index)">{{ |
|||
i18n.close |
|||
}}</view> |
|||
|
|||
</view> |
|||
<!-- Closed --> |
|||
<view class="right" v-show="type === 2"> |
|||
<view class="title">{{ i18n.ClosePrice }}</view> |
|||
<view class="value" style="color:#00E8A2;">{{item.closedPrice}}</view> |
|||
<view class="title">{{ i18n.ROE }}</view> |
|||
<view class="value"> |
|||
<!-- {{item.status=='undone'?i18n.undone:item.status=='opened'?i18n.opened:item.status=='revoked'?i18n.revoked:i18n.closed}} --> |
|||
<view class="value" :style="(item.profitAmount/item.bondAmount)*100>=0?'color:#00E8A2;':'color:#F4506A'"> |
|||
{{getValue(item.profitAmount/item.bondAmount)}}% |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="title">{{ i18n.PL }}</view> |
|||
<!-- <view class="value" :style="item.profitAmount-item.fee>=0?'color:#00E8A2;':'color:#F4506A'"> |
|||
{{item.profitAmount-item.fee}}</view> --> |
|||
<view class="value" :style="item.profitAmount>=0?'color:#00E8A2;':'color:#F4506A'"> |
|||
{{getPrice(item.profitAmount)}} |
|||
</view> |
|||
</view> |
|||
<!-- Revoked --> |
|||
<view class="right" v-show="type === 3"> |
|||
<!-- <view class="title">{{ i18n.status }}</view> |
|||
<view class="value" style="color:#F4506A;"> |
|||
{{item.status=='undone'?i18n.undone:item.status=='opened'?i18n.opened:item.status=='revoked'?i18n.revoked:i18n.closed}} |
|||
</view> --> |
|||
<view class="title">{{ i18n.PL }}</view> |
|||
<view class="value" style="color:#00E8A2;"> |
|||
0 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<!-- close确认框 --> |
|||
<u-modal :show="closeModalShow" :confirmText="i18n.Confirm" :cancelText="i18n.Cancel" :showCancelButton="true" |
|||
:title="i18n.WarmTips" :content='i18n.WarmTipsText' @confirm="closeConfirm" @cancel="closeModalShow = false" |
|||
confirmColor="#00E8A2" cancelColor="#96959E"> |
|||
</u-modal> |
|||
|
|||
<!-- stop确认框 --> |
|||
<u-modal :show="stopModalShow" :confirmText="i18n.Confirm" :cancelText="i18n.Cancel" :showCancelButton="true" |
|||
:title="i18n.StopLimit" :content='i18n.WarmTipsText' @confirm="stopConfirm" @cancel="stopModalShow = false" |
|||
confirmColor="#00E8A2" cancelColor="#96959E"> |
|||
<view class="stopModel"> |
|||
<view class="title"> |
|||
<text class="left">{{ i18n.StyPrice }}</text> |
|||
<text class="right">{{ i18n.ExpectProfit }} {{ profit }}</text> |
|||
</view> |
|||
<view class="numberInput"> |
|||
<button class="btn sub" :class="{ disabled: stySubBtnDisabled || styValue <= 0 }" |
|||
:disabled="stySubBtnDisabled" @click="styValueChange('sub')"></button> |
|||
<input class="number" type="number" v-model="styValue" @input="stopModalChange" /> |
|||
<button class="btn add" @click="styValueChange('add')"></button> |
|||
</view> |
|||
<view class="title"> |
|||
<text class="left">{{ i18n.StsPrice }}</text> |
|||
<text class="right">{{ i18n.ExpectLoss }} {{ loss }}</text> |
|||
</view> |
|||
<view class="numberInput"> |
|||
<button class="btn sub" :class="{ disabled: stsSubBtnDisabled || stsValue <= 0 }" |
|||
:disabled="stsSubBtnDisabled" @click="stsValueChange('sub')"></button> |
|||
<input class="number" type="number" v-model="stsValue" @input="stopModalChange" /> |
|||
<button class="btn add" @click="stsValueChange('add')"></button> |
|||
</view> |
|||
</view> |
|||
</u-modal> |
|||
|
|||
|
|||
|
|||
<!-- 追加保证金 --> |
|||
<u-modal :show="stopModalShowZui" :confirmText="i18n.Confirm" :cancelText="i18n.Cancel" :showCancelButton="true" |
|||
:title="i18n.Margincall" :content='i18n.WarmTipsText' @confirm="stopConfirm" @cancel="stopModalShowZui = false" |
|||
confirmColor="#00E8A2" cancelColor="#96959E"> |
|||
<view class="stopModel"> |
|||
<view class="title"> |
|||
<text class="left">{{ i18n.AmountTrue }}</text> |
|||
<!-- <text class="right">{{ i18n.ExpectProfit }} {{ profit }}</text> --> |
|||
</view> |
|||
<view class="numberInput"> |
|||
<button class="btn sub" :class="{ disabled: stySubBtnDisabled || styValue <= 0 }" |
|||
:disabled="stySubBtnDisabled" @click="styValueChange('sub')"></button> |
|||
<input class="number" type="number" v-model="styValue" @input="stopModalChange" /> |
|||
<button class="btn add" @click="styValueChange('add')"></button> |
|||
</view> |
|||
</view> |
|||
</u-modal> |
|||
|
|||
|
|||
<u-empty :text="i18n.Dataisempty" mode="data" v-if="!list.length"></u-empty> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
const COMPONENT_NAME = 'transaction' |
|||
let timer1 = null; |
|||
let timer2 = null; |
|||
export default { |
|||
|
|||
name: COMPONENT_NAME, |
|||
|
|||
data() { |
|||
return { |
|||
list: [], |
|||
latest:{}, |
|||
status: 'opened', |
|||
closeModalShow: false, |
|||
stopModalShow: false, |
|||
type: 1, |
|||
stopModalShowZui:false, |
|||
test: 0, |
|||
dealList: [{ |
|||
dealType: 'long' |
|||
}, |
|||
{ |
|||
dealType: 'long' |
|||
}, |
|||
], |
|||
styValue: 0, |
|||
stsValue: 0, |
|||
stySubBtnDisabled: false, |
|||
stsSubBtnDisabled: false, |
|||
// 撤销订单数据 |
|||
itemData: {}, |
|||
// 设置止盈数据 |
|||
stopLimitData: {}, |
|||
profit: 0, |
|||
loss: 0 |
|||
} |
|||
}, |
|||
computed: { |
|||
i18n() { |
|||
return this.$t("markets"); |
|||
}, |
|||
}, |
|||
watch: { |
|||
deep: true, |
|||
symbol: { |
|||
handler: function() { |
|||
this.getContractOrderList() |
|||
} |
|||
}, |
|||
|
|||
}, |
|||
mounted() { |
|||
this.initWebSocket(); |
|||
this.getContractOrderList() |
|||
|
|||
}, |
|||
//全局事件在组件实例创建完成定义 |
|||
created() { |
|||
uni.$on('upData', num => { |
|||
if (num) { |
|||
this.getContractOrderList() |
|||
} |
|||
}) |
|||
}, |
|||
onHide() { |
|||
clearTimeout(timer2); |
|||
clearInterval(timer2); |
|||
timer1 = null; |
|||
timer2 = null; |
|||
}, |
|||
methods: { |
|||
initWebSocket() { |
|||
|
|||
|
|||
this.websock = new this.$websocket(this.$constant.WSSURL) // xxx 表示接口地址URL |
|||
|
|||
|
|||
var that = this |
|||
this.websock.getWebSocketMsg(data => { |
|||
|
|||
if (data.channel === 'conn') { |
|||
that.websock.id = data.data |
|||
that.websock.subLatest(); |
|||
|
|||
// that.websock.subKHistory(that.type, that.symbol.symbol) |
|||
// that.websock.subKline(that.type, that.symbol.symbol) |
|||
|
|||
} else if (data.channel === 'market.latest') { |
|||
that.latest = data.data; |
|||
} |
|||
}); |
|||
}, |
|||
// 获取百分比位数 |
|||
getValue(e){ |
|||
let data = e*100 |
|||
data = parseFloat(data.toPrecision(10)) |
|||
data = String(data) |
|||
return data.substring(0, data.indexOf(".") + 3); |
|||
}, |
|||
// 获取位数 |
|||
getPrice(s) { |
|||
var i=s; |
|||
/* |
|||
js 数字精度问题 |
|||
*/ |
|||
i = parseFloat(i.toPrecision(10)) |
|||
i = String(i) |
|||
return i.substring(0, i.indexOf(".") + 5); |
|||
}, |
|||
|
|||
stopModalChange() { |
|||
if (this.stopLimitData.direction === 'buy') { |
|||
if (this.styValue) |
|||
this.profit = this.getItem((this.styValue - this.stopLimitData.openedPrice) * this.stopLimitData |
|||
.hand) |
|||
if (this.stsValue) |
|||
this.loss = this.getItem((this.stsValue - this.stopLimitData.openedPrice) * this.stopLimitData |
|||
.hand) |
|||
|
|||
} else { |
|||
if (this.styValue) |
|||
this.profit = this.getItem((this.stopLimitData.openedPrice - this.styValue) * this.stopLimitData |
|||
.hand) |
|||
if (this.stsValue) |
|||
this.loss = this.getItem((this.stopLimitData.openedPrice - this.stsValue) * this.stopLimitData |
|||
.hand) |
|||
} |
|||
}, |
|||
getItem(i) { |
|||
i = parseFloat(i.toPrecision(10)) |
|||
i = String(i) |
|||
return i.substring(0, i.indexOf(".") + 9); |
|||
}, |
|||
// 获取设置止盈数据 |
|||
getStopLimit(i) { |
|||
this.stopLimitData = i |
|||
this.stopModalShow = true |
|||
this.styValue = 0; |
|||
this.stsValue = 0; |
|||
this.profit = 0 |
|||
this.loss = 0 |
|||
}, |
|||
// 设置保证金 |
|||
Margincall(i){ |
|||
this.stopLimitData = i |
|||
this.stopModalShowZui=true |
|||
this.styValue = 0; |
|||
this.stsValue = 0; |
|||
this.profit = 0 |
|||
this.loss = 0 |
|||
}, |
|||
// 获取撤销订单 |
|||
closeItem(item, i) { |
|||
this.itemData = item |
|||
this.closeModalShow = true |
|||
}, |
|||
// 合约订单列表 |
|||
getContractOrderList() { |
|||
const orderList = this.$api.contractOrderList({ |
|||
"status": this.status, |
|||
}); |
|||
orderList.then(res => { |
|||
this.list = res.data |
|||
for (var i = 0; i < this.list.length; i++) { |
|||
if (this.list[i].addTime) { |
|||
this.list[i].timestr = this.$index.formatmmddhhmmss(this.list[ |
|||
i].addTime) |
|||
} |
|||
if (this.list[i].closedTime) { |
|||
this.list[i].timestr2 = this.$index.formatmmddhhmmss(this.list[ |
|||
i].closedTime) |
|||
} |
|||
|
|||
} |
|||
}); |
|||
}, |
|||
/** |
|||
* 类型改变 |
|||
* @param {*} type |
|||
*/ |
|||
onChangeType(type = 0) { |
|||
this.type = type |
|||
if (this.type == 0) { |
|||
this.status = 'undone' |
|||
} |
|||
if (this.type == 1) { |
|||
this.status = 'opened' |
|||
} |
|||
if (this.type == 2) { |
|||
this.status = 'closed' |
|||
} |
|||
if (this.type == 3) { |
|||
this.status = 'revoked' |
|||
} |
|||
this.getContractOrderList() |
|||
}, |
|||
/** |
|||
* close确认弹窗 |
|||
*/ |
|||
closeConfirm() { |
|||
// 类型是undo调用 订单撤销 |
|||
if (this.type == 0) { |
|||
const orderList = this.$api.contractCancel({ |
|||
"orderNo": this.itemData.orderNo, |
|||
}); |
|||
orderList.then(res => { |
|||
uni.$u.toast(this.$t("markets").Succeeded) |
|||
this.closeModalShow = false |
|||
this.getContractOrderList() |
|||
}); |
|||
} |
|||
// 类型是opened 调用 合约订单平仓 |
|||
if (this.type == 1) { |
|||
const orderList = this.$api.contractClosed({ |
|||
"orderNo": this.itemData.orderNo, |
|||
}); |
|||
orderList.then(res => { |
|||
uni.$u.toast(this.$t("markets").Succeeded) |
|||
this.closeModalShow = false |
|||
setTimeout(() => { |
|||
this.getContractOrderList() |
|||
}, 600) |
|||
}); |
|||
} |
|||
}, |
|||
/** |
|||
* stop确认弹窗 |
|||
*/ |
|||
stopConfirm() { |
|||
if(this.stopModalShow){ |
|||
if (this.styValue < 0 || this.stsValue < 0) { |
|||
uni.showToast({ |
|||
title: this.i18n.lessThan, |
|||
icon: 'none', |
|||
duration: 2000 //持续时间为 |
|||
}) |
|||
return; |
|||
} |
|||
const orderList = this.$api.setWinOrLossStopPrice({ |
|||
"orderNo": this.stopLimitData.orderNo, |
|||
"winStopPrice": this.styValue, |
|||
"lossStopPrice": this.stsValue, |
|||
}); |
|||
orderList.then(res => { |
|||
uni.$u.toast(this.$t("markets").Succeeded) |
|||
this.stopModalShow = false |
|||
setTimeout(() => { |
|||
this.getContractOrderList() |
|||
}, 800) |
|||
}); |
|||
} |
|||
|
|||
if(this.stopModalShowZui){ |
|||
if (this.styValue < 0) { |
|||
uni.showToast({ |
|||
title: this.i18n.lessThan, |
|||
icon: 'none', |
|||
duration: 2000 //持续时间为 |
|||
}) |
|||
return; |
|||
} |
|||
const orderList = this.$api.addBond({ |
|||
"orderNo": this.stopLimitData.orderNo, |
|||
"amount": this.styValue, |
|||
}); |
|||
orderList.then(res => { |
|||
uni.$u.toast(this.$t("markets").Succeeded) |
|||
this.stopModalShowZui = false |
|||
setTimeout(() => { |
|||
this.getContractOrderList() |
|||
}, 800) |
|||
}); |
|||
|
|||
} |
|||
|
|||
}, |
|||
/** |
|||
* styValue值变化 |
|||
*/ |
|||
styValueChange(type = 'sub') { |
|||
if (type === 'sub') { // 减操作 |
|||
this.styValue = parseInt(this.styValue) // 取整 |
|||
this.styValue -= 1; |
|||
if (this.styValue <= 0) { |
|||
this.stySubBtnDisabled = true; |
|||
this.styValue = 0 |
|||
} else { |
|||
this.stySubBtnDisabled = false; |
|||
} |
|||
} else { // 加操作 |
|||
this.styValue = parseInt(this.styValue) // 取整 |
|||
this.styValue += 1; |
|||
if (this.styValue <= 0) { |
|||
this.stySubBtnDisabled = true; |
|||
this.styValue = 0 |
|||
} else { |
|||
this.stySubBtnDisabled = false; |
|||
} |
|||
} |
|||
}, |
|||
/** |
|||
* stsValue值变化 |
|||
*/ |
|||
stsValueChange(type = 'sub') { |
|||
if (type === 'sub') { // 减操作 |
|||
this.stsValue = parseInt(this.stsValue) // 取整 |
|||
this.stsValue -= 1; |
|||
if (this.stsValue <= 0) { |
|||
this.stsSubBtnDisabled = true; |
|||
this.stsValue = 0 |
|||
} else { |
|||
this.stsSubBtnDisabled = false; |
|||
} |
|||
} else { // 加操作 |
|||
this.stsValue = parseInt(this.stsValue) // 取整 |
|||
this.stsValue += 1; |
|||
if (this.stsValue <= 0) { |
|||
this.stsSubBtnDisabled = true; |
|||
this.stsValue = 0 |
|||
} else { |
|||
this.stsSubBtnDisabled = false; |
|||
} |
|||
} |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.righttype3{ |
|||
position: absolute; |
|||
right: 115rpx; |
|||
} |
|||
.closeBtn { |
|||
display: inline-block; |
|||
// width: 98rpx; |
|||
padding: 0 12rpx; |
|||
height: 48rpx; |
|||
border-radius: 8rpx; |
|||
line-height: 48rpx; |
|||
background-color: rgba($color: rgb(0, 232, 162), $alpha: 0.1); |
|||
font-size: 24rpx; |
|||
text-align: center; |
|||
color: rgb(0, 232, 162); |
|||
margin-top: 22rpx; |
|||
} |
|||
/deep/ .u-empty { |
|||
top: 500% !important; |
|||
} |
|||
|
|||
/deep/ .u-modal__content__text { |
|||
color: #96959E !important; |
|||
} |
|||
|
|||
.entrustOrderList { |
|||
position: relative; |
|||
|
|||
.tab { |
|||
display: flex; |
|||
background: #211F32; |
|||
margin-top: 120rpx; |
|||
|
|||
.item { |
|||
height: 64rpx; |
|||
line-height: 64rpx; |
|||
flex: 1; |
|||
font-size: 24rpx; |
|||
text-align: center; |
|||
|
|||
&.select { |
|||
background: #323045; |
|||
color: #00E8A2; |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
.content { |
|||
padding: 32rpx; |
|||
|
|||
.card { |
|||
position: relative; |
|||
font-size: 24rpx; |
|||
color: #A1A0A8; |
|||
background: #211F32; |
|||
border-radius: 20rpx; |
|||
padding: 24rpx 32rpx; |
|||
margin-bottom: 30rpx; |
|||
|
|||
.header { |
|||
.buy { |
|||
color: #00E8A2; |
|||
margin-right: 28rpx; |
|||
} |
|||
|
|||
.sell { |
|||
color: #F4506A; |
|||
margin-right: 28rpx; |
|||
} |
|||
|
|||
.time { |
|||
margin-right: 16rpx; |
|||
} |
|||
|
|||
.closeTimeTitle { |
|||
margin-right: 16rpx; |
|||
} |
|||
|
|||
.closeBtn { |
|||
position: absolute; |
|||
right: 32rpx; |
|||
top: 20rpx; |
|||
display: inline-block; |
|||
width: 98rpx; |
|||
height: 48rpx; |
|||
border-radius: 8rpx; |
|||
line-height: 48rpx; |
|||
background-color: rgba($color: #F4506A, $alpha: 0.1); |
|||
font-size: 24rpx; |
|||
text-align: center; |
|||
color: #F4506A; |
|||
margin-top: 0; |
|||
} |
|||
} |
|||
|
|||
.infoBody { |
|||
.item { |
|||
display: flex; |
|||
|
|||
.title { |
|||
margin-top: 30rpx; |
|||
line-height: 32rpx; |
|||
} |
|||
|
|||
.value { |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.left { |
|||
flex: 1; |
|||
text-align: left; |
|||
} |
|||
|
|||
.center { |
|||
// flex: 1; |
|||
text-align: center; |
|||
} |
|||
|
|||
.right { |
|||
flex: 1; |
|||
text-align: right; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
} |
|||
|
|||
/deep/.u-popup__content { |
|||
background: #323045; |
|||
|
|||
.u-modal__title { |
|||
color: #fff; |
|||
} |
|||
|
|||
.u-modal__content__text { |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
.stopModel { |
|||
width: 560rpx; |
|||
font-size: 24rpx; |
|||
|
|||
.title { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
width: 560rpx; |
|||
margin: 24rpx 0; |
|||
|
|||
.left {} |
|||
|
|||
.right { |
|||
color: #A1A0A8; |
|||
} |
|||
} |
|||
|
|||
.numberInput { |
|||
display: flex; |
|||
height: 88rpx; |
|||
background: #211F32; |
|||
border-radius: 32rpx; |
|||
overflow: hidden; |
|||
|
|||
.btn { |
|||
width: 80rpx; |
|||
|
|||
background: #16141f; |
|||
padding: 0; |
|||
border-radius: 0; |
|||
|
|||
&.sub { |
|||
background-image: url(../../static/maskets/sub.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 32rpx; |
|||
background-position: 24rpx 28rpx; |
|||
} |
|||
|
|||
&.add { |
|||
background-image: url(../../static/maskets/add.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 32rpx; |
|||
background-position: 24rpx 28rpx; |
|||
} |
|||
|
|||
&.button-hover { |
|||
background: #211F32; |
|||
|
|||
&.sub::after { |
|||
background-image: url(../../static/maskets/sub.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 64rpx; |
|||
background-position: 46rpx 56rpx; |
|||
|
|||
} |
|||
|
|||
&.add::after { |
|||
background-image: url(../../static/maskets/add.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 64rpx; |
|||
background-position: 46rpx 56rpx; |
|||
|
|||
} |
|||
} |
|||
|
|||
&.disabled { |
|||
background: #211F32; |
|||
|
|||
&.sub::after { |
|||
background-image: url(../../static/maskets/sub.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 64rpx; |
|||
background-position: 46rpx 56rpx; |
|||
|
|||
} |
|||
} |
|||
} |
|||
|
|||
.number { |
|||
flex: 1; |
|||
border-left: 2rpx solid #323045; |
|||
border-right: 2rpx solid #323045; |
|||
text-align: center; |
|||
height: 88rpx; |
|||
; |
|||
line-height: 88rpx; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
} |
|||
</style> |
|||
|
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 9.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 9.7 KiB After Width: | Height: | Size: 2.4 KiB |
Loading…
Reference in new issue