You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
753 lines
20 KiB
753 lines
20 KiB
<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>
|
|
|