12 changed files with 1391 additions and 516 deletions
@ -1,420 +1,446 @@ |
|||
<template> |
|||
<view class="transaction"> |
|||
<view class="tab" :class="type == 'buy' ? 'buy' : ''"> |
|||
<view class="buy" :class="type == 'buy' ? 'select' : ''" @click="onChangeType('buy')">{{ i18n.LONG }}</view> |
|||
<view class="sell" :class="type == 'sell' ? 'select' : ''" @click="onChangeType('sell')">{{ i18n.SHORT }} |
|||
</view> |
|||
</view> |
|||
<view class="priceSelectBody"> |
|||
<view class="priceTypeInput" @click="priceSelectListShow = true">{{ priceTypeList[priceTypeValue].text }} |
|||
</view> |
|||
<view class="shade" v-show="priceSelectListShow" @click="priceSelectListShow = false"></view> |
|||
<view class="priceTypeList" v-show="priceSelectListShow"> |
|||
<view class="selectItem" :class="{ select: priceTypeValue === index }" |
|||
v-for="(item, index) in priceTypeList" :key="index" @click="selectChange(index)"> |
|||
{{ item.text }} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="coinPrice"> |
|||
<view class="noInput" v-show="priceTypeValue === 0">{{ i18n.MarketOptimalPrice }}</view> |
|||
<u-input class="input" v-show="priceTypeValue !== 0" v-model="coinPrice" color="#A1A0A8" fontSize="20rpx" |
|||
border="none" :placeholder="i18n.enterAddressTips"> |
|||
</u-input> |
|||
<view class="currencyName">{{ currency }}</view> |
|||
</view> |
|||
|
|||
<view class="twoInput"> |
|||
<view class="leverageSelectBody"> |
|||
<view class="leverageInput" @click="leverageListShow = true">{{ leverageValue }}</view> |
|||
<view class="shade" v-show="leverageListShow" @click="leverageListShow = false"></view> |
|||
<view class="leverageList" v-show="leverageListShow"> |
|||
<view class="selectItem" :class="{ select: leverageValue === item }" |
|||
v-for="(item, index) in leverageList" :key="index" @click="leverageSelectChange(item)"> |
|||
{{ item }} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="coinAmount"> |
|||
<u-input class="input" v-model="coinAmount" color="#A1A0A8" fontSize="20rpx" border="none" |
|||
:placeholder="i18n.enterAddressTips"> |
|||
</u-input> |
|||
<view class="currencyName">{{ coin }}</view> |
|||
</view> |
|||
</view> |
|||
<!-- 可用 Usable--> |
|||
<key-value-row class="text" :keyName="i18n.Usable" :value="`${coinPrice * coinAmount}${currency}`" |
|||
lineHeight="30rpx" size="24rpx" rightColor="#A1A0A8"> |
|||
</key-value-row> |
|||
<!-- 总计 Total--> |
|||
<key-value-row class="text" :keyName="i18n.Total" :value="`${coinPrice * coinAmount}${currency}`" |
|||
lineHeight="30rpx" size="24rpx" rightColor="#A1A0A8"> |
|||
</key-value-row> |
|||
<!-- 债券 Bond--> |
|||
<key-value-row class="text" :keyName="i18n.Bond" :value="`${coinPrice * coinAmount}${currency}`" |
|||
lineHeight="30rpx" size="24rpx" rightColor="#A1A0A8"> |
|||
</key-value-row> |
|||
<!-- 手续费 --> |
|||
<key-value-row class="text" :keyName="i18n.Fee" :value="`${coinPrice * coinAmount}${currency}`" |
|||
lineHeight="30rpx" size="24rpx" rightColor="#A1A0A8"> |
|||
</key-value-row> |
|||
|
|||
<u-button class="button" :color="type == 'buy' ? '#00E8A2' : '#F4506A'" throttleTime="500" @click="btnClick"> |
|||
{{ type === 'buy' ? `${i18n.buyLong}${coin}` : `${i18n.sellSHORT}${coin}` }} |
|||
</u-button> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import KeyValueRow from '../KeyValueRow/KeyValueRow.vue' |
|||
const COMPONENT_NAME = 'transaction' |
|||
export default { |
|||
components: { KeyValueRow }, |
|||
name: COMPONENT_NAME, |
|||
props: { |
|||
coin: { // 数字货币名称 |
|||
type: String, |
|||
default() { |
|||
return 'BTC' |
|||
} |
|||
}, |
|||
currency: { // 货币名称 |
|||
type: String, |
|||
default() { |
|||
return 'USDT' |
|||
} |
|||
}, |
|||
type: { // 货币名称 |
|||
type: String, |
|||
default() { |
|||
return 'buy' |
|||
} |
|||
}, |
|||
coinPrice: { // 数字货币价格 |
|||
type: Number, |
|||
default() { |
|||
return 0 |
|||
} |
|||
}, |
|||
coinAmount: { // 货币数量 |
|||
type: Number, |
|||
default() { |
|||
return 1 |
|||
} |
|||
}, |
|||
bgTransparent: { // 背景是否透明 |
|||
type: Boolean, |
|||
default() { |
|||
return false |
|||
} |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
priceSelectListShow: false, |
|||
priceTypeValue: 0, |
|||
priceTypeList: [ |
|||
{ value: 0, text: this.$t("markets").MarketPrice }, |
|||
{ value: 1, text: this.$t("markets").LimitPrice }, |
|||
], |
|||
leverageListShow: false, |
|||
leverageValue: 10, |
|||
leverageList: [ |
|||
10, |
|||
20, |
|||
30, |
|||
50, |
|||
100, |
|||
], |
|||
} |
|||
}, |
|||
computed: { |
|||
i18n() { |
|||
return this.$t("markets"); |
|||
}, |
|||
}, |
|||
mounted() { |
|||
|
|||
}, |
|||
methods: { |
|||
onChangeType(type = 'buy') { |
|||
this.type = type |
|||
}, |
|||
selectChange(index) { |
|||
this.priceTypeValue = index; |
|||
this.priceSelectListShow = false; |
|||
console.log(e); |
|||
}, |
|||
leverageSelectChange(item) { |
|||
this.leverageValue = item; |
|||
this.leverageListShow = false; |
|||
console.log(e); |
|||
}, |
|||
btnClick(){ |
|||
|
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.transaction { |
|||
width: 444rpx; |
|||
|
|||
.tab { |
|||
display: flex; |
|||
border-radius: 16rpx; |
|||
background-color: rgba($color: #F4506A, $alpha: 0.1); |
|||
|
|||
&.buy { |
|||
background-color: rgba($color: #00E8A2, $alpha: 0.1); |
|||
} |
|||
|
|||
.buy { |
|||
flex: 1; |
|||
text-align: center; |
|||
height: 64rpx; |
|||
line-height: 64rpx; |
|||
font-size: 24rpx; |
|||
color: #F4506A; |
|||
border-radius: 16rpx; |
|||
|
|||
&.select { |
|||
color: #15141F; |
|||
background-color: #00E8A2; |
|||
} |
|||
} |
|||
|
|||
.sell { |
|||
flex: 1; |
|||
text-align: center; |
|||
height: 64rpx; |
|||
line-height: 64rpx; |
|||
font-size: 24rpx; |
|||
color: #00E8A2; |
|||
border-radius: 16rpx; |
|||
|
|||
&.select { |
|||
color: #15141F; |
|||
background: #F4506A; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
.priceSelectBody { |
|||
position: relative; |
|||
height: 64rpx; |
|||
margin-top: 24rpx; |
|||
background: #323045; |
|||
border-radius: 16rpx; |
|||
padding: 0 20rpx; |
|||
|
|||
.priceTypeInput { |
|||
position: relative; |
|||
height: 64rpx; |
|||
line-height: 64rpx; |
|||
font-size: 20rpx; |
|||
color: #A1A0A8; |
|||
|
|||
|
|||
&::after { |
|||
display: block; |
|||
position: absolute; |
|||
content: ''; |
|||
background-image: url(../../static/maskets/ic_ma_arrow_down.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 32rpx; |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
top: 16rpx; |
|||
right: 0rpx; |
|||
} |
|||
} |
|||
|
|||
.shade { |
|||
position: fixed; |
|||
top: 220rpx; |
|||
left: 0; |
|||
width: 750rpx; |
|||
height: 70vh; |
|||
background: transparent; |
|||
// background: #fff; |
|||
z-index: 0; |
|||
} |
|||
|
|||
.priceTypeList { |
|||
overflow: hidden; |
|||
position: absolute; |
|||
top: 60rpx; |
|||
left: 0rpx; |
|||
z-index: 2; |
|||
background: #15141F; |
|||
border-radius: 10rpx; |
|||
width: 100%; |
|||
|
|||
.selectItem { |
|||
height: 64rpx; |
|||
line-height: 64rpx; |
|||
font-size: 28rpx; |
|||
padding-left: 20rpx; |
|||
|
|||
&.select { |
|||
background: #3f3e48; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.coinPrice { |
|||
position: relative; |
|||
margin-top: 20rpx; |
|||
height: 64rpx; |
|||
|
|||
.noInput { |
|||
height: 64rpx; |
|||
background: #323045; |
|||
border-radius: 16rpx; |
|||
color: #A1A0A8; |
|||
line-height: 64rpx; |
|||
font-size: 24rpx; |
|||
padding-left: 20rpx; |
|||
} |
|||
|
|||
.input { |
|||
height: 64rpx; |
|||
background: #323045; |
|||
border-radius: 16rpx; |
|||
color: #A1A0A8; |
|||
line-height: 64rpx; |
|||
font-size: 24rpx; |
|||
padding-left: 20rpx !important; |
|||
} |
|||
|
|||
.currencyName { |
|||
position: absolute; |
|||
height: 32rpx; |
|||
top: 0rpx; |
|||
right: 20rpx; |
|||
color: #A1A0A8; |
|||
line-height: 64rpx; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
|
|||
.twoInput { |
|||
margin-top: 20rpx; |
|||
margin-bottom: 10rpx; |
|||
display: flex; |
|||
|
|||
.leverageSelectBody { |
|||
position: relative; |
|||
width: 212rpx; |
|||
height: 64rpx; |
|||
background: #323045; |
|||
border-radius: 16rpx; |
|||
padding: 0 20rpx; |
|||
|
|||
.leverageInput { |
|||
position: relative; |
|||
height: 64rpx; |
|||
line-height: 64rpx; |
|||
font-size: 20rpx; |
|||
color: #A1A0A8; |
|||
|
|||
|
|||
&::after { |
|||
display: block; |
|||
position: absolute; |
|||
content: ''; |
|||
background-image: url(../../static/maskets/ic_ma_arrow_down.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 32rpx; |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
top: 16rpx; |
|||
right: 0rpx; |
|||
} |
|||
} |
|||
|
|||
.shade { |
|||
position: fixed; |
|||
top: 220rpx; |
|||
left: 0; |
|||
width: 750rpx; |
|||
height: 70vh; |
|||
background: transparent; |
|||
// background: #fff; |
|||
z-index: 0; |
|||
} |
|||
|
|||
.leverageList { |
|||
overflow: hidden; |
|||
position: absolute; |
|||
top: 60rpx; |
|||
left: 0rpx; |
|||
z-index: 2; |
|||
background: #15141F; |
|||
border-radius: 10rpx; |
|||
width: 100%; |
|||
|
|||
.selectItem { |
|||
height: 64rpx; |
|||
line-height: 64rpx; |
|||
font-size: 28rpx; |
|||
padding-left: 20rpx; |
|||
|
|||
&.select { |
|||
background: #3f3e48; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.coinAmount { |
|||
position: relative; |
|||
height: 64rpx; |
|||
margin-left: 20rpx; |
|||
|
|||
.input { |
|||
height: 64rpx; |
|||
background: #323045; |
|||
border-radius: 16rpx; |
|||
color: #A1A0A8; |
|||
line-height: 64rpx; |
|||
font-size: 24rpx; |
|||
padding-left: 20rpx !important; |
|||
} |
|||
|
|||
.currencyName { |
|||
position: absolute; |
|||
height: 32rpx; |
|||
top: 0rpx; |
|||
right: 20rpx; |
|||
color: #A1A0A8; |
|||
line-height: 64rpx; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.text { |
|||
margin: 0; |
|||
} |
|||
|
|||
.button { |
|||
box-sizing: border-box; |
|||
height: 64rpx; |
|||
border-radius: 16rpx; |
|||
font-weight: 700; |
|||
font-size: 24rpx; |
|||
color: #15141F !important; |
|||
|
|||
} |
|||
} |
|||
<template> |
|||
<view class="transaction"> |
|||
<view class="tab" :class="type == 'buy' ? 'buy' : ''"> |
|||
<view class="buy" :class="type == 'buy' ? 'select' : ''" @click="onChangeType('buy')">{{ i18n.LONG }}</view> |
|||
<view class="sell" :class="type == 'sell' ? 'select' : ''" @click="onChangeType('sell')">{{ i18n.SHORT }} |
|||
</view> |
|||
</view> |
|||
<view class="priceSelectBody"> |
|||
<view class="priceTypeInput" @click="priceSelectListShow = true">{{ priceTypeList[priceTypeValue].text }} |
|||
</view> |
|||
<view class="shade" v-show="priceSelectListShow" @click="priceSelectListShow = false"></view> |
|||
<view class="priceTypeList" v-show="priceSelectListShow"> |
|||
<view class="selectItem" :class="{ select: priceTypeValue === index }" |
|||
v-for="(item, index) in priceTypeList" :key="index" @click="selectChange(index)"> |
|||
{{ item.text }} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="coinPrice"> |
|||
<view class="noInput" v-show="priceTypeValue === 0">{{ i18n.MarketOptimalPrice }}</view> |
|||
<u-input class="input" v-show="priceTypeValue !== 0" v-model="coinPrice" color="#A1A0A8" fontSize="20rpx" |
|||
border="none" :placeholder="i18n.enterAddressTips"> |
|||
</u-input> |
|||
<view class="currencyName">{{ symbol.baseSymbol }}</view> |
|||
</view> |
|||
|
|||
<view class="twoInput"> |
|||
<view class="leverageSelectBody"> |
|||
<view class="leverageInput" @click="leverageListShow = true">{{ leverageValue }}</view> |
|||
<view class="shade" v-show="leverageListShow" @click="leverageListShow = false"></view> |
|||
<view class="leverageList" v-show="leverageListShow"> |
|||
<view class="selectItem" :class="{ select: leverageValue === item }" |
|||
v-for="(item, index) in contractConfig.leverage" :key="index" |
|||
@click="leverageSelectChange(item)"> |
|||
{{ item }} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="coinAmount"> |
|||
<u-input class="input" v-model="coinAmount" color="#A1A0A8" fontSize="20rpx" border="none" |
|||
:placeholder="i18n.enterAddressTips"> |
|||
</u-input> |
|||
<view class="currencyName">{{ symbol.coinSymbol }}</view> |
|||
</view> |
|||
</view> |
|||
<!-- 可用 Usable--> |
|||
<key-value-row class="text" :keyName="i18n.Usable" :value="`${contractConfig.useCapital}${symbol.baseSymbol}`" |
|||
lineHeight="30rpx" size="24rpx" rightColor="#A1A0A8"> |
|||
</key-value-row> |
|||
<!-- 总计 Total--> |
|||
<key-value-row class="text" :keyName="i18n.Total" |
|||
:value="`${(priceTypeValue === 0?marketDetail.close*coinAmount:coinPrice*coinAmount).toFixed(4)}${symbol.baseSymbol}`" |
|||
lineHeight="30rpx" size="24rpx" rightColor="#A1A0A8"> |
|||
</key-value-row> |
|||
<!-- 债券 Bond--> |
|||
<key-value-row class="text" :keyName="i18n.Bond" |
|||
:value="`${(priceTypeValue === 0?marketDetail.close/leverageValue:coinPrice/leverageValue).toFixed(4)}${symbol.baseSymbol}`" |
|||
lineHeight="30rpx" size="24rpx" rightColor="#A1A0A8"> |
|||
</key-value-row> |
|||
<!-- 手续费 --> |
|||
<key-value-row class="text" :keyName="i18n.Fee" |
|||
:value="`${(priceTypeValue === 0?marketDetail.close/leverageValue*contractConfig.rate:coinPrice/leverageValue*contractConfig.rate).toFixed(4)}${symbol.baseSymbol}`" |
|||
lineHeight="30rpx" size="24rpx" rightColor="#A1A0A8"> |
|||
</key-value-row> |
|||
|
|||
<u-button class="button" :color="type == 'buy' ? '#00E8A2' : '#F4506A'" throttleTime="500" @click="contractOrder"> |
|||
{{ type === 'buy' ? `${i18n.buyLong}${symbol.coinSymbol}` : `${i18n.sellSHORT}${symbol.coinSymbol}` }} |
|||
</u-button> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import KeyValueRow from '../KeyValueRow/KeyValueRow.vue' |
|||
const COMPONENT_NAME = 'transaction' |
|||
export default { |
|||
components: { |
|||
KeyValueRow |
|||
}, |
|||
name: COMPONENT_NAME, |
|||
props: { |
|||
|
|||
type: { // 货币名称 |
|||
type: String, |
|||
default () { |
|||
return 'buy' |
|||
} |
|||
}, |
|||
contractConfig: { |
|||
type: Object, |
|||
default: () => { |
|||
leverage: [10] |
|||
} |
|||
}, |
|||
symbol: { |
|||
type: Object, |
|||
default () { |
|||
|
|||
} |
|||
}, |
|||
marketDetail: { // 数字货币价格 |
|||
type: Object, |
|||
default () { |
|||
|
|||
} |
|||
}, |
|||
bgTransparent: { // 背景是否透明 |
|||
type: Boolean, |
|||
default () { |
|||
return false |
|||
} |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
math:null, |
|||
priceSelectListShow: false, |
|||
priceTypeValue: 0, |
|||
priceTypeList: [{ |
|||
value: 0, |
|||
text: this.$t("markets").MarketPrice |
|||
}, |
|||
{ |
|||
value: 1, |
|||
text: this.$t("markets").LimitPrice |
|||
}, |
|||
], |
|||
leverageListShow: false, |
|||
leverageValue: 10, |
|||
coinPrice: 0, |
|||
coinAmount: 0 |
|||
} |
|||
}, |
|||
computed: { |
|||
i18n() { |
|||
return this.$t("markets"); |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.leverageValue = this.contractConfig.leverage[0]; |
|||
this.coinPrice = this.marketDetail.close |
|||
}, |
|||
methods: { |
|||
|
|||
onChangeType(type) { |
|||
this.$emit('onChangeType', type); |
|||
}, |
|||
selectChange(index) { |
|||
this.priceTypeValue = index; |
|||
this.priceSelectListShow = false; |
|||
this.coinPrice = this.marketDetail.low |
|||
}, |
|||
leverageSelectChange(item) { |
|||
this.leverageValue = item; |
|||
this.leverageListShow = false; |
|||
}, |
|||
contractOrder() { |
|||
var data={ |
|||
// direction:this.type==='buy'?'long':'short', |
|||
direction:this.type, |
|||
amount:this.coinAmount, |
|||
pair:this.symbol.pair, |
|||
leverage:this.leverageValue, |
|||
tradeModel:this.priceTypeValue===0?'market':'limit', |
|||
price:this.priceTypeValue===0?this.marketDetail.low:this.coinPrice, |
|||
remarks:'1' |
|||
} |
|||
// #ifdef H5 |
|||
data.source='H5' |
|||
// #endif |
|||
// #ifdef APP-PLUS |
|||
data.source='android' |
|||
// #endif |
|||
console.log(data); |
|||
const contractOrder = this.$api.contractOrder(data); |
|||
contractOrder.then(res => { |
|||
uni.showToast({ |
|||
title: this.$t("markets").Succeeded, |
|||
icon: 'success', |
|||
duration: 1500 |
|||
}) |
|||
}); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.transaction { |
|||
width: 444rpx; |
|||
|
|||
.tab { |
|||
display: flex; |
|||
border-radius: 16rpx; |
|||
background-color: rgba($color: #F4506A, $alpha: 0.1); |
|||
|
|||
&.buy { |
|||
background-color: rgba($color: #00E8A2, $alpha: 0.1); |
|||
} |
|||
|
|||
.buy { |
|||
flex: 1; |
|||
text-align: center; |
|||
height: 64rpx; |
|||
line-height: 64rpx; |
|||
font-size: 24rpx; |
|||
color: #F4506A; |
|||
border-radius: 16rpx; |
|||
|
|||
&.select { |
|||
color: #15141F; |
|||
background-color: #00E8A2; |
|||
} |
|||
} |
|||
|
|||
.sell { |
|||
flex: 1; |
|||
text-align: center; |
|||
height: 64rpx; |
|||
line-height: 64rpx; |
|||
font-size: 24rpx; |
|||
color: #00E8A2; |
|||
border-radius: 16rpx; |
|||
|
|||
&.select { |
|||
color: #15141F; |
|||
background: #F4506A; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
.priceSelectBody { |
|||
position: relative; |
|||
height: 64rpx; |
|||
margin-top: 24rpx; |
|||
background: #323045; |
|||
border-radius: 16rpx; |
|||
padding: 0 20rpx; |
|||
|
|||
.priceTypeInput { |
|||
position: relative; |
|||
height: 64rpx; |
|||
line-height: 64rpx; |
|||
font-size: 20rpx; |
|||
color: #A1A0A8; |
|||
|
|||
|
|||
&::after { |
|||
display: block; |
|||
position: absolute; |
|||
content: ''; |
|||
background-image: url(../../static/maskets/ic_ma_arrow_down.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 32rpx; |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
top: 16rpx; |
|||
right: 0rpx; |
|||
} |
|||
} |
|||
|
|||
.shade { |
|||
position: fixed; |
|||
top: 220rpx; |
|||
left: 0; |
|||
width: 750rpx; |
|||
height: 70vh; |
|||
background: transparent; |
|||
// background: #fff; |
|||
z-index: 0; |
|||
} |
|||
|
|||
.priceTypeList { |
|||
overflow: hidden; |
|||
position: absolute; |
|||
top: 60rpx; |
|||
left: 0rpx; |
|||
z-index: 2; |
|||
background: #15141F; |
|||
border-radius: 10rpx; |
|||
width: 100%; |
|||
|
|||
.selectItem { |
|||
height: 64rpx; |
|||
line-height: 64rpx; |
|||
font-size: 28rpx; |
|||
padding-left: 20rpx; |
|||
|
|||
&.select { |
|||
background: #3f3e48; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.coinPrice { |
|||
position: relative; |
|||
margin-top: 20rpx; |
|||
height: 64rpx; |
|||
|
|||
.noInput { |
|||
height: 64rpx; |
|||
background: #323045; |
|||
border-radius: 16rpx; |
|||
color: #A1A0A8; |
|||
line-height: 64rpx; |
|||
font-size: 24rpx; |
|||
padding-left: 20rpx; |
|||
} |
|||
|
|||
.input { |
|||
height: 64rpx; |
|||
background: #323045; |
|||
border-radius: 16rpx; |
|||
color: #A1A0A8; |
|||
line-height: 64rpx; |
|||
font-size: 24rpx; |
|||
padding-left: 20rpx !important; |
|||
} |
|||
|
|||
.currencyName { |
|||
position: absolute; |
|||
height: 32rpx; |
|||
top: 0rpx; |
|||
right: 20rpx; |
|||
color: #A1A0A8; |
|||
line-height: 64rpx; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
|
|||
.twoInput { |
|||
margin-top: 20rpx; |
|||
margin-bottom: 10rpx; |
|||
display: flex; |
|||
|
|||
.leverageSelectBody { |
|||
position: relative; |
|||
width: 212rpx; |
|||
height: 64rpx; |
|||
background: #323045; |
|||
border-radius: 16rpx; |
|||
padding: 0 20rpx; |
|||
|
|||
.leverageInput { |
|||
position: relative; |
|||
height: 64rpx; |
|||
line-height: 64rpx; |
|||
font-size: 20rpx; |
|||
color: #A1A0A8; |
|||
|
|||
|
|||
&::after { |
|||
display: block; |
|||
position: absolute; |
|||
content: ''; |
|||
background-image: url(../../static/maskets/ic_ma_arrow_down.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 32rpx; |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
top: 16rpx; |
|||
right: 0rpx; |
|||
} |
|||
} |
|||
|
|||
.shade { |
|||
position: fixed; |
|||
top: 220rpx; |
|||
left: 0; |
|||
width: 750rpx; |
|||
height: 70vh; |
|||
background: transparent; |
|||
// background: #fff; |
|||
z-index: 0; |
|||
} |
|||
|
|||
.leverageList { |
|||
overflow: hidden; |
|||
position: absolute; |
|||
top: 60rpx; |
|||
left: 0rpx; |
|||
z-index: 2; |
|||
background: #15141F; |
|||
border-radius: 10rpx; |
|||
width: 100%; |
|||
|
|||
.selectItem { |
|||
height: 64rpx; |
|||
line-height: 64rpx; |
|||
font-size: 28rpx; |
|||
padding-left: 20rpx; |
|||
|
|||
&.select { |
|||
background: #3f3e48; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.coinAmount { |
|||
position: relative; |
|||
height: 64rpx; |
|||
margin-left: 20rpx; |
|||
|
|||
.input { |
|||
height: 64rpx; |
|||
background: #323045; |
|||
border-radius: 16rpx; |
|||
color: #A1A0A8; |
|||
line-height: 64rpx; |
|||
font-size: 24rpx; |
|||
padding-left: 20rpx !important; |
|||
} |
|||
|
|||
.currencyName { |
|||
position: absolute; |
|||
height: 32rpx; |
|||
top: 0rpx; |
|||
right: 20rpx; |
|||
color: #A1A0A8; |
|||
line-height: 64rpx; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.text { |
|||
margin: 0; |
|||
} |
|||
|
|||
.button { |
|||
box-sizing: border-box; |
|||
height: 64rpx; |
|||
border-radius: 16rpx; |
|||
font-weight: 700; |
|||
font-size: 24rpx; |
|||
color: #15141F !important; |
|||
|
|||
} |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue