@ -1,11 +1,32 @@
< template >
< v -page >
< view class = "d-flex p-x-md fa p-y-md justify-between align-center fn-18 bg-panel-3 color-light flex-wrap border-b" >
< v -header class = "nav-tab" :left-arrow ="false" style = "background-color: #121212;" >
< template # left >
<!-- < van -icon name = "user-circle-o" class = "fn-25 color-theme-1" style = "color: #D0712F;" / > -- >
< image src = "@/assets/img/home/top.png" mode = "aspectFit" style = "width: 36rpx;height: 36rpx;" > < / image >
< / template >
< template # title >
< view style = "color: #ffffff; font-size: 30rpx;" > { { $t ( "base.d0" ) } } < / view >
< / template >
< template # right >
< view class = "per-bot p-y-md p-x-sm d-flex align-center" >
<!-- < img :src ="$localImgUrl('Page6.png')" alt = "" class = "h-20 m-r-xs" / > -- >
< span class = "color-light" >
< v -lang @ change = " marketList = [ ] ;
indexData ( ) ; getHelpList ( ) ; " > < / v - l a n g >
< i class = "iconfont m-l-xs fn-sm" > & # xe6e9 ; < / i >
< / span >
< / view >
< / template >
< / v - h e a d e r >
< view class = "d-flex p-x-md p-y-md justify-between align-center fn-18 color-light flex-wrap border-b" style = "background-color: #121212;" >
< view class = "w-max" style = "height: var(--status-bar-height)" > < / view >
< view @click ="$emit('symbol')" class = "d-flex align-center" >
< i class = "iconfont color-light fn-bold fn-18" > & # xe655 ; < / i >
<!-- < i class = "iconfont color-light fn-bold fn-18" > & # xe655 ; < / i > -- >
< text class = "fn-bold" > { { symbol } } < / text >
< text class = "fn-10 m-l-xs p-y-2" : class = "increase.increase < 0 ? 'color-sell bg-sell-transparent' : 'color-buy bg-buy-transparent'" > { { increase . increaseStr } } < / text >
< i class = "iconfont" style = "margin-left: 5px;" > & # xe6e9 ; < / i >
<!-- < text class = "fn-10 m-l-xs p-y-2" : class = "increase.increase < 0 ? 'color-sell bg-sell-transparent' : 'color-buy bg-buy-transparent'" > { { increase . increaseStr } } < / text > -- >
< / view >
< view class = "d-flex fn-20 color-theme-1" >
< view class = "m-r-xs" @click ="$emit('option')" >
@ -23,12 +44,12 @@
< / view >
< view class = "w-max" style = "height: var(--status-bar-height)" > < / view >
<!-- # ifdef H5 -- >
< view class = "h-70 w-max" > < / view >
<!-- < view class = "h-70 w-max" > < / view > -- >
<!-- # endif -- >
<!-- # ifdef APP - PLUS -- >
< view class = "h-35" > < / view >
<!-- < view class = "h-35" > < / view > -- >
<!-- # endif -- >
< view class = "layout-main" >
< view class = "layout-main" style = "background-color: #121212;" >
< scroll -view
@ refresherrefresh = "onRefresh"
: refresher - enabled = "refresherEnabled&&scrollTop<50"
@ -42,9 +63,7 @@
< view class = "tixing1 bg-form-panel-4" : class = "{' bg-green': form.direction == 'buy'}" > < / view >
< view class = "tixing2 bg-form-panel-4 " : class = "{'bg-red ': form.direction == 'sell'}"
style = "position: absolute;right: 0px;top: 0px;" > < / view >
< view
class = "d-flex fn-center justify-between rounded-xs overflow-hidden tixingtxt"
>
< view class = "d-flex fn-center justify-between rounded-xs overflow-hidden tixingtxt" >
< view
class = "w-6/12 h-34 d-flex justify-center align-center t-left"
: class = " {
@ -52,7 +71,7 @@
} "
@ click = "changeDirection('buy')"
> { { $t ( "exchange.c3" ) } } < / view >
< view
< view
class = "color-gray w-6/12 h-34 d-flex justify-center align-center"
: class = " {
' color-plain' : form . direction == 'sell' ,
@ -64,28 +83,40 @@
{ { activeType . label } }
< i class = "iconfont" style = "margin-left: 5px;" > & # xe6e9 ; < / i >
< / v - p i c k e r > - - >
< v -dropdwon class = "w-50 m-r-xs p-y-xxs" :list ="typeList" @onClick ="dropDownChange" >
< / v - d r o p d w o n >
< template v-if ="form.type == 0" >
< view class = "" style = "display: flex;margin: 5px 0px;" >
< v -dropdwon class = "m-r-xs dropdwon" :list ="typeList" @onClick ="dropDownChange" >
< / v - d r o p d w o n >
< van -icon name = "warning-o" / >
< / view >
< template v-if ="form.type == 0" >
< view >
< van -stepper
<!-- < van -stepper
: min = "0"
: value = "form.entrust_price"
@ change = "form.entrust_price=$event.detail"
input - width = "61%"
step = "0.01"
/ >
< view class = "tips fn-xs m-t-xs" > ≈ ￥ { { omitTo ( form . entrust_price * price_cny , 2 ) } } < / view >
/ > - - >
< view class = "" style = "border: 1px solid #202020;height: 40px;padding-left: 10px;" >
< view style = "font-size: 20rpx;" > 价格 ( USDT ) < / view >
<!-- < v -input
v - model = "form.entrust_price"
@ input = "sliderActive=-1"
: placeholder = "$t('exchange.c5')" style = "height: 20px;" >
< / v - i n p u t > - - >
< input type = "text" v-model ="form.entrust_price" :placeholder="$t('exchange.c5')" >
<!-- < view class = "col-fff" > { { form . entrust_price } } < / view > -- >
< / view >
<!-- < el -input -number controls -position = " right " @change ="handleChange" :min ="1" :max ="10" > < / e l - i n p u t - n u m b e r > - - >
< view class = "tips fn-xs m-t-xs" > 估值 $ { { omitTo ( form . entrust_price * price_cny , 2 ) } } < / view >
< / view >
< view class = "m-t-ms" >
< v -input
< v -input
v - model = "form.amount"
@ input = "sliderActive=-1"
class = "h-30 p-x-sm rounded p-y-xxs color-light bg-form-panel-3"
: placeholder = "$t('exchange.c5')"
>
: placeholder = "$t('exchange.c5')" style = "border: 1px solid #202020;" >
< template # right >
< view class = "color-default fn-bold color-light" > { {
< view class = "color-default fn-bold color-light" style = "margin-right: 10px;" > { {
activeCoin . coin_name
} } < / view >
< / template >
@ -96,7 +127,7 @@
< view >
< v -input
disabled
class = "h-30 p-x-sm rounded p-y-xxs fn-center color-light bg-form-panel-3 "
class = "p-x-sm p-y-xxs fn-center color-light" style = "border: 1px solid #202020; "
: placeholder = "$t('exchange.c6')"
> < / v - i n p u t >
< / view >
@ -105,11 +136,10 @@
< v -input
@ input = "sliderActive=-1"
v - model = "form.amount"
class = "h-30 p-x-sm rounded p-y-xxs color-light bg-form-panel-3 "
class = "p-x-sm rounded p-y-xxs color-light"
: placeholder = "
form . direction == 'buy' ? $t ( 'exchange.c7' ) : $t ( 'exchange.c5' )
"
>
form . direction == 'buy' ? $t ( 'exchange.c7' ) : $t ( 'exchange.c5' ) "
style = "border: 1px solid #202020;border-radius: 0px;" >
< template # right >
< view class = "color-default fn-bold color-light" v-show ="form.direction == 'sell'" > {{ currentCoin }} < / view >
< view class = "color-default fn-bold color-light" v-show ="form.direction == 'buy'" > {{ targetCoin }} < / view >
@ -118,14 +148,14 @@
< / view >
< / template >
< view >
< view class = "tips fn-10 m-y-ms d-flex justify-between" >
<!-- < view class = "tips fn-10 m-y-ms d-flex justify-between" >
< view class = "" >
{ { $t ( "exchange.c8" ) } } ：
< / view >
< view class = "" >
{ { usable } } { { usableUnit } }
< / view >
< / view >
< / view > -- >
< / view >
< view >
< view class = "m-t-xs" >
@ -133,25 +163,60 @@
< text > 0 % < / text >
< text > 100 % < / text >
< / view > -- >
< view class = "d-flex justify-between" >
< view class = "d-flex justify-between" style = "margin-top: 20px;" >
< view class = "borders w-23 rounded-3 fn-center p-y-xs fn-12" v-for ="(item,index) in progress" @click="sliderChange(item,index)" :class="sliderActive==index?'color-theme-1 active':''" >
{ { item } } %
< / view >
<!-- < bing -progress activeColor = "#60c08c" barBorderRadius = "20px" handleWidth = "12px" handleHeight = "12px" handleColor = "#60c08c" borderRadius = "20px" width = "150px" :showInfo ="false" strokeWidth = "2px" noActiveColor = "#484859" @dragging ="sliderChange" :value ="activeStep" / > -- >
< / view >
< / view >
< view class = "" style = "margin: 20px 0px;" >
< v -input v -if = " form.type = = 1 & & form.direction = = ' sell ' "
v - model = "totalMoney"
@ input = "sliderActive=-1"
placeholder = "金额" style = "border: 1px solid #202020;"
>
< template # right >
< view class = "color-default fn-bold color-light" style = "margin-right: 10px;font-size: 20rpx;" > { {
currentCoin
} } < / view >
< / template >
< / v - i n p u t >
< v -input v -else
v - model = "totalMoney"
@ input = "sliderActive=-1"
placeholder = "金额" style = "border: 1px solid #202020;"
>
< template # right >
< view class = "color-default fn-bold color-light" style = "margin-right: 10px;font-size: 20rpx;" > { {
targetCoin
} } < / view >
< / template >
< / v - i n p u t >
< / view >
< view class = "" style = "margin-bottom: 20px;" >
< view class = "" style = "font-size: 20rpx;line-height: 30px;display: flex;justify-content: space-between;" >
< view >
可用 < text class = "col-fff" style = "margin-left: 5px;" > { { usable } } { { usableUnit } } < / text >
< / view >
< img :src ="$localImgUrl('antOutline.png')" alt = "" class = "h-18" style = "position: relative;top: 5px;" / >
< / view >
< view class = "" style = "font-size: 20rpx;" >
可买 < text class = "col-fff" style = "margin-left: 5px;" > { { form . amount } } < / text >
< / view >
< / view >
< / view >
< view class = "d-flex fn-sm m-y-ms color-light justify-between" >
<!-- < view class = "d-flex fn-sm m-y-ms color-light justify-between" >
< span > { { $t ( "exchange.c9" ) } } ： < / span >
< span v -if = " form.type = = 1 & & form.direction = = ' sell ' "
> { { totalMoney } } { { currentCoin } } < / s p a n
>
< span v-else > {{ totalMoney }} {{ targetCoin }} < / span >
< / view >
< / view > -- >
< template v-if ="isLogin" >
< v -button
<!-- < v -button
size = "small"
: type = "form.direction == 'buy' ? 'green' : 'red'"
: color = "form.direction == 'buy' ? '#25A74F' : '#CA3F66 '"
class = "w-max rounded-md"
block
@ click = "storeEntrust"
@ -162,7 +227,13 @@
: this . $t ( "exchange.c4" )
} }
{ { activeCoin . coin_name } } < / v - b u t t o n
>
> -- >
< button style = "height: 40px;line-height: 40px;color: white;font-size: 30rpx;" class = "w-max rounded-md" : style = "{backgroundColor:form.direction == 'buy' ? '#25A74F' : '#CA3F66'}" @click ="storeEntrust" >
{ {
form . direction == "buy"
? this . $t ( "exchange.c3" )
: this . $t ( "exchange.c4" )
} } { { activeCoin . coin_name } } < / button >
< / template >
< template v-else >
< v -button
@ -175,7 +246,7 @@
>
< / template >
< v -link
<!-- < v -link
: to = "{ path: '/pages/exchange/index', query: { code: symbol} }"
class = " d-block m-t-md"
>
@ -189,14 +260,14 @@
: tradeList = "tradeList"
> < / t i m e - s h a r i n g >
< / view >
< / v - l i n k >
< / v - l i n k > - - >
< / view >
<!-- 深度列表 -- >
< view class = "w-6/12 p-l-md d-flex flex-col dep-list" >
< sell -and -buy :buyList ="buyList" :max ="symbol=='GITP/USDT'?11:8" :sellList ="sellList" :symbol ="symbol" v -on :price ="getPrice($event)" :contract ="0" >
< view
class = "fn-lg row fn-bold"
: class = "newPrice.increase < 0 ? 'color-sell ' : 'color-buy'"
: class = "newPrice.increase < 0 ? 'col-fff ' : 'color-buy'"
>
{ { newPrice . price } }
< / view >
@ -249,13 +320,25 @@
< / tbody >
< / table >
< / view > -- >
< view class = "m-t-xs bg-panel-3 " >
< view class = "border-t-original d-flex justify-between align-center p-x-md p-t-lg" >
< text class = "fn-16 fn-bold color-light" > { { $t ( "exchange.a4" ) } } < / text >
< v -link tag = "div" to = "/pages/exchange/exchangeHis" class = "d-flex align-center" >
< view class = "m-t-xs" style = "background-color: #121212; " >
< view class = "border-t-original d-flex justify-between align-center p-x-md p-t-lg" style = "border-bottom: 1px solid #ccc;padding-bottom: 15px;" >
<!-- < text class = "fn-16 fn-bold color-light" > { { $t ( "exchange.a4" ) } } < / text > -- >
<!-- < v -link tag = "div" to = "/pages/exchange/exchangeHis" class = "d-flex align-center" >
< van -icon name = "orders-o" class = "fn-14" style = "font-size: 16px;" / >
< span class = "fn-12 " style = "font-size: 16px;" > { { $t ( "purchase.a9" ) } } < / span >
< / v - l i n k >
< / v - l i n k > - - >
< view class = "" >
委托 ( 0 )
< / view >
< view class = "" >
仓位 ( 0 )
< / view >
< view class = "" >
资产
< / view >
< view class = "" >
策略 ( 0 )
< / view >
< / view >
< van -empty v -if = " ! Object.values ( list ) .length " description = "" / >
< view v-for ="item in (list)" class="item border-b fn-14" :key="item.order_no" >
@ -848,11 +931,6 @@ export default {
/deep/ . van - stepper {
display : flex ;
justify - content : space - between ;
. minus - class ,
. input - class ,
. plus - class {
background : $form - panel - 4 ;
}
}
. dep - list {
/ / h e i g h t : 4 4 0 p x ;
@ -935,10 +1013,10 @@ export default {
padding : 7 px 0 ;
}
. bg - green {
background - color : $green ;
background - color : # 25 A74F ;
}
. bg - red {
background - color : $red ;
background - color : # CA3F66 ;
}
. bor5 {
border - top : 5 px solid $border - color ;
@ -957,33 +1035,35 @@ export default {
box - sizing : border - box ;
}
. tixing1 {
width : 49 % ;
height : 35 px ; /* 宽高 */
width : 47 % ;
height : 30 px ; /* 宽高 */
/ / b a c k g r o u n d - c o l o r : b r o w n ; / * 颜 色 * /
border - radius : 6 px ; /* 设置圆角 */
transform : perspective ( 12 px ) scale ( 1.1 , 1.3 ) rotateX ( - 5 deg ) ;
border - radius : 17 px 0 px 0 px 20 px ; /* 设置圆角 */
transform : perspective ( 10 px ) scale ( 1.1 , 1.2 ) rotateX ( - 3 deg ) ;
/* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴旋转-5度 */
transform - origin : top left ;
/* top left = left top = 0 0中心点偏移量*/
/ / b o r d e r : 1 p x s o l i d # f f 9 9 0 0 ;
box - shadow : inset - 2 px - 3 px 6 px - 4 px # 000 ;
margin - top : 10 px ;
}
. tixing2 {
width : 49 % ;
height : 35 px ; /* 宽高 */
width : 47 % ;
height : 30 px ; /* 宽高 */
/ / b a c k g r o u n d - c o l o r : b r o w n ; / * 颜 色 * /
border - radius : 6 px ; /* 设置圆角 */
transform : perspective ( 12 px ) scale ( 1.1 , 1.3 ) rotateX ( 5 deg ) ;
border - radius : 0 px 20 px 20 px 0 px ; /* 设置圆角 */
transform : perspective ( 16 px ) scale ( 1.1 , 1.2 ) rotateX ( 5 deg ) ;
/* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴旋转5度 */
transform - origin : bottom right ;
/* bottom left = left bottom = 0 100% 中心点偏移量*/
/* 边框 */
box - shadow : inset 2 px 2 px 5 px - 4 px # 000 ;
margin - top : 10 px ;
}
. tixingtxt {
position : absolute ;
right : 0 px ;
top : 0 px ;
top : 5 px ;
z - index : 1 ;
width : 100 % ;
}
@ -1001,4 +1081,21 @@ export default {
. h - 25 {
height : 25 px ;
}
. dropdwon {
border : 1 px solid # 202020 ;
width : 260 rpx ;
margin : 10 px 0 px ;
}
/ d e e p / u n i - i n p u t {
background - color : # 121212 ;
}
. col - fff {
color : white ;
}
. lvs {
color : # 25 A74F ;
}
. reda {
color : # CA3F66 ;
}
< / style >
‘daijinzheng@xingtongworld.com’
2 years ago
