li
5f40e4e1b5
- 移除秒合约页面及UI - 合约页Tab改为Position Held/Transaction Record - 存款/提款/转账页增加BTC/ETH - 资产页重构(用户信息+盈亏+多语言) - 注册页改版(匹配新设计稿) - 日文全面翻译+首页菜单多语言 - 代理专属注册链接支持(?code=) - 10个locale文件同步更新
1136 lines
38 KiB
Vue
1136 lines
38 KiB
Vue
<template>
|
||
<view class="">
|
||
<z-paging ref="paging" refresher-only @onRefresh="onRefresh"
|
||
:style="'background-color: '+theme.bg+';color: '+theme.text">
|
||
<custom-refresher slot="refresher" slot-scope="{refresherStatus}" :status="refresherStatus">
|
||
</custom-refresher>
|
||
<!-- 顶部标题 -->
|
||
<view slot="top" class="width-100b flex align-center justify-between padding-w-30"
|
||
:style="{height: `calc(${statusBar}px + 100rpx)`,paddingTop:`${statusBar}px`,background:theme.bg}">
|
||
<view class="flex align-center">
|
||
<view @click="leftshow = true" class="width-360 flex align-center">
|
||
<image class="width-48 height-48" :src="theme.imgs+'/left6@2x.png'" mode=""></image>
|
||
<text class="font-36 numbold-font margin-w-10">{{coinInfo.coinname}}</text>
|
||
<view :class="zhangdie>0?'limitBox_up':'limitBox_down'">{{zhangdie}}%</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex align-center justify-end">
|
||
<!-- #ifdef H5 -->
|
||
<image @click="router.push('/pages/tradingView/h5?title='+(coinInfo.coinname)+'&bb_type='+coinInfo.bb_type+'&symbol='+coinInfo.symbol)" class="width-56 height-56" :src="theme.imgs+'/tubiao@2x.png'" mode=""></image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP-PLUS -->
|
||
<image @click="router.push('/pages/tradingView/index?title='+(coinInfo.coinname)+'&bb_type='+coinInfo.bb_type+'&symbol='+coinInfo.symbol+'&close='+lastData.close)" class="width-56 height-56" :src="theme.imgs+'/tubiao@2x.png'" mode=""></image>
|
||
<!-- #endif -->
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 合约/现货切换 - 铺满宽度 -->
|
||
<view class="width-100b flex justify-center padding-w-30" :style="'background-color: '+theme.bg">
|
||
<view class="topSwitchFull">
|
||
<view class="topSwitchItem active" @tap="onSwitchMarket('contract')">{{i18n.trade.contract}}</view>
|
||
<view class="topSwitchItem" @tap="onSwitchMarket('spot')">{{i18n.trade.spot}}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="relative" :style="'background-color: '+theme.bg">
|
||
<view class="width-100b height-680 margin-c-10 padding-w-30 flex align-center justify-between">
|
||
<!-- 左侧 -->
|
||
<view class="flex-1 height-100b" style="padding: 20rpx 10rpx 20rpx 0;">
|
||
<!-- 合约交易部分 -->
|
||
<!-- 买入 卖出 -->
|
||
<view class="width-388 margin-0-auto height-66 flex align-center justify-between">
|
||
<view @click="buyType='more'" :class="buyType=='more'?'leftbox':'triangle-left'" :style="'color: '+theme.text">{{i18n.cycle.buyIn}}</view>
|
||
<view @click="buyType='free'" :class="buyType=='free'?'rightbox':'triangle-right'" :style="'color: '+theme.text">{{i18n.cycle.sellout}}</view>
|
||
</view>
|
||
<!-- 市场交易 -->
|
||
<view class="width-388 height-64 margin-16-auto relative">
|
||
<view @click="marketState=!marketState" class="xialabox" :style="marketState?'z-index:10100;':'z-index:10000;'"
|
||
:class="marketState?'height-184':'height-64'">
|
||
<view class="width-100b height-64 flex align-center justify-between padding-w-15">
|
||
<text class="font-24">{{marketType=='market'?i18n.cycle.Market:i18n.cycle.LIMIT}}</text>
|
||
<i class="cuIcon-unfold"></i>
|
||
</view>
|
||
<view class="width-100b padding-w-15" :style="'background-color: '+theme.bg+';color: '+theme.text">
|
||
<view @click.stop="marketType = 'market',marketState=!marketState ,inputPirce=''" class="height-60 line-height-60 font-24">{{i18n.cycle.Market}}</view>
|
||
<view @click.stop="marketType = 'limit',marketState=!marketState" class="height-60 line-height-60 font-24">{{i18n.cycle.LIMIT}}</view>
|
||
</view>
|
||
</view>
|
||
<view @click="marketState=!marketState" v-if="marketState" class="maskBox"></view>
|
||
</view>
|
||
|
||
<!-- 当前最优价格 -->
|
||
<view class="width-388 height-64 margin-16-auto radiu-4 padding-w-15 flex align-center justify-between"
|
||
style="border: 1px solid rgba(171, 171, 171, 0.2);">
|
||
<text class="font-24 color-C3C3C3 medium-font">{{i18n.cycle.price}}</text>
|
||
<input class="flex-1 font-24 nummedium-font padding-w-20" type="number" maxlength="14" :disabled="marketType=='market'?true:false" v-model="inputPirce" :placeholder="marketType=='market'?i18n.cycle.tag:i18n.cycle.tag1" placeholder-style="color:#999999;font-size:24rpx;"/>
|
||
<text class="font-24 nummedium-font">USDT</text>
|
||
</view>
|
||
<!-- 数量 -->
|
||
<view class="width-388 height-64 margin-16-auto radiu-4 padding-w-15 flex align-center justify-between"
|
||
style="border: 1px solid rgba(171, 171, 171, 0.2);">
|
||
<text class="font-24 color-C3C3C3 medium-font">{{i18n.cycle.num}}</text>
|
||
<input class="flex-1 font-24 nummedium-font padding-w-20" type="number" maxlength="13" v-model="inputHans" placeholder="0" placeholder-style="color:#999999;font-size:24rpx;"/>
|
||
<text class="font-24 medium-font">{{i18n.cycle.hands}}</text>
|
||
</view>
|
||
<!-- 倍数 -->
|
||
<view class="width-388 height-64 margin-16-auto relative">
|
||
<view @click="doubleState=!doubleState" class="xialabox1" :style="doubleState?'z-index:10100;':'z-index:10000;'"
|
||
:class="doubleState?'':'height-64'">
|
||
<view class="width-388 height-64 flex align-center justify-between padding-w-15">
|
||
<text class="font-24 color-C3C3C3 medium-font margin-r-20">{{i18n.cycle.multiple}}</text>
|
||
<text :class="multiple==0?'color-999999':''" class="flex-1 font-24 nummedium-font">{{multiple}}</text>
|
||
<i class="cuIcon-unfold"></i>
|
||
</view>
|
||
<view class="padding-w-15"
|
||
:style="'background-color: '+theme.bg+';color: '+theme.text">
|
||
<view @click.stop="multiple = ite,doubleState=!doubleState" class="height-64 line-height-64 font-24 nummedium-font" v-for="(ite,idx) in setting.buy_num" :key="idx">{{ite}}</view>
|
||
</view>
|
||
</view>
|
||
<view @click="doubleState=!doubleState" v-if="doubleState" class="maskBox"></view>
|
||
</view>
|
||
|
||
<view class="width-388 margin-c-36">
|
||
<view class="height-42 flex align-center justify-between">
|
||
<text class="font-24 nummedium-font">1{{i18n.cycle.hands}}≈</text>
|
||
<text class="font-24 nummedium-font">{{(lastData.close||0).toFixed(coinInfo.price_jd)}} USDT</text>
|
||
</view>
|
||
<view class="height-42 flex align-center justify-between">
|
||
<text class="font-24 nummedium-font">{{i18n.cycle.available}}</text>
|
||
<text class="font-24 nummedium-font">{{Number(count_xh_usdt||0).toFixed(2)}} USDT</text>
|
||
</view>
|
||
</view>
|
||
<view class="width-388 margin-0-auto">
|
||
<button @click="tanView()" v-if="buyType=='more'" class="cu-btn loginBtn bj-00C481">{{i18n.cycle.long}}</button>
|
||
<button @click="tanView()" v-if="buyType=='free'" class="cu-btn loginBtn bj-FF4040">{{i18n.cycle.short}}</button>
|
||
</view>
|
||
</view>
|
||
<!-- 右侧 -->
|
||
<view class="flex-1 height-100b" style="padding: 20rpx 0 20rpx 10rpx;">
|
||
<view class="width-272 margin-0-auto flex align-center justify-between">
|
||
<view class="flex-1 font-24 color-C3C3C3 text-left">{{i18n.cycle.price}}</view>
|
||
<view class="flex-1 font-24 color-C3C3C3 text-right">{{i18n.cycle.volume}}</view>
|
||
</view>
|
||
<view class="width-272 height-260 margin-10-auto flex" style="flex-direction: column-reverse;">
|
||
<view v-if="index<5" class="height-52 flex align-center nummedium-font relative"
|
||
v-for="(item,index) in tick.asks">
|
||
<view class="flex-1 font-22 color-FF4040 text-left hidden-nowrap-ellipsis-1">
|
||
{{Number(item[0]).toFixed(coinInfo.price_jd)}}</view>
|
||
<view class="flex-1 font-22 color-C3C3C3 text-right hidden-nowrap-ellipsis-1">
|
||
{{item[1] | numFilter}}</view>
|
||
<view class="progress bj-FFEBEB" :style="'width:'+ dethWidth(index,item[1],tick.asks) +'%;'"></view>
|
||
</view>
|
||
</view>
|
||
<view v-if="lastData.close" class="width-272 margin-10-auto text-right">
|
||
<text class="font-28 nummedium-font color-FF4040">{{Number(lastData.close).toFixed(coinInfo.price_jd)}}</text>
|
||
<text class="font-26 numbold-font margin-l-10">USDT</text>
|
||
</view>
|
||
<view class="width-272 margin-10-auto">
|
||
<view v-if="index<5" class="height-52 flex align-center nummedium-font relative"
|
||
v-for="(item,index) in tick.bids">
|
||
<view class="flex-1 font-22 color-00C481 text-left hidden-nowrap-ellipsis-1">
|
||
{{Number(item[0]).toFixed(coinInfo.price_jd)}}</view>
|
||
<view class="flex-1 font-22 color-C3C3C3 text-right hidden-nowrap-ellipsis-1">
|
||
{{item[1] | numFilter}}</view>
|
||
<view class="progress bj-E5F9F2" :style="'width:'+ dethWidth(index,item[1],tick.bids) +'%;'"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 合约交易tab选择 -->
|
||
<view class="width-100b height-72 padding-w-40 flex align-center justify-between">
|
||
<view @click="tabsChange1(index)" class="flex-1 height-46 flex direction-column align-center justify-between" v-for="(item,index) in tablist1" :key="index">
|
||
<text :class="current1==index?theme.selectcolor:theme.color" class="font-28">{{item}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 合约交易列表 -->
|
||
<!-- swiper必须设置flex:1，因为swiper有默认的高度，只有设置flex:1才可以铺满页面 -->
|
||
<swiper :class="contractOrderList.length>2?'swiper':'swiper_no'" :current="current1" @animationfinish="animationfinish1"
|
||
@change="onswiperchange1">
|
||
<swiper-item v-for="(item,index) in tablist1" class="swiper-item" style="height: 100%;">
|
||
<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="pullTorefresh">
|
||
<contractListItem @setCheck="setCheck" @revocation="revocation" @closeOut="closeOut" :price_jd="coinInfo.price_jd"
|
||
:loading="loading" :currentIndex="getContractViewIndex()" :list="contractOrderList" :nowPrice="lastData.close" :shizhi="Number(setting.shizhi)"
|
||
:color="theme.text" :background="theme.bg" :fu_color="theme.fu_color"></contractListItem>
|
||
</scroll-view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</z-paging>
|
||
<!-- 左侧弹出 -->
|
||
<u-popup v-model="leftshow" mode="left" border-radius="30">
|
||
<view class="width-600"
|
||
:style="'background-color: '+theme.bg+';color: '+theme.text"
|
||
style="padding: 70rpx 0rpx;height:100%;display: flex;flex-direction: column;">
|
||
<view class="height-110 flex align-center padding-w-30">
|
||
<text class="font-32 bold-font">{{i18n.newWord.Trading}}</text>
|
||
</view>
|
||
<view class="width-550 height-70 margin-12-auto radiu-36 flex align-center padding-w-22"
|
||
style="border: 1px solid rgba(191, 195, 199, 0.2);">
|
||
<u-icon name="search" color="#C3C3C3" size="28"></u-icon>
|
||
<input @input="searchCion" confirm-type="search"
|
||
class="padding-l-13 flex-1 font-26 line-height-70" type="text"
|
||
:placeholder="i18n.index.tos1" v-model="searchVal" placeholder-style="font-size:26rpx;"/>
|
||
</view>
|
||
<view class="height-78 padding-w-30 flex align-center justify-between">
|
||
<view @click="leftcurrent=1,setTimeLeft()" class="flex-1 height-60 flex direction-column align-center justify-center">
|
||
<text :class="leftcurrent==1?'':'color-C3C3C3'" class="font-30">{{i18n.newWord.all}}</text>
|
||
<view :style="leftcurrent==1?'':'visibility: hidden;'" class="heng"></view>
|
||
</view>
|
||
<view @click="leftcurrent=2,setTimeLeft()" class="flex-1 height-60 flex direction-column align-center justify-center">
|
||
<text :class="leftcurrent==2?'':'color-C3C3C3'" class="font-30">{{i18n.newWord.self}}</text>
|
||
<view :style="leftcurrent==2?'':'visibility: hidden;'" class="heng"></view>
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-y="true" style="overflow: scroll;flex: 1;">
|
||
<view v-if="leftcurrent==1" class="padding-w-30">
|
||
<view @click="changeCoin(index,1)" class="width-100b height-78 flex align-center justify-between" v-for="(item,index) in midList" :key="index" style="border-bottom: 1rpx solid rgba(191, 195, 199, 0.2);">
|
||
<view class="flex align-center">
|
||
<view @click.stop="collectCoin(item.symbol,index,1)" class="height-78 flex align-center justify-center">
|
||
<image class="width-24 height-23" :src="item.is_sc?'/static/imgs/transaction/star_on@2x.png':'/static/imgs/transaction/star_off@2x.png'" mode=""></image>
|
||
<image class="width-36 height-36 margin-w-10" :src="item.logo_image" mode=""></image>
|
||
</view>
|
||
<text class="font-28 nummedium-font">{{item.name}}<span class="font-26 color-C3C3C3 nummedium-font">/USD{{item.symbol == 'xauusd'? '':'T'}}</span></text>
|
||
</view>
|
||
<text class="font-28 nummedium-font">
|
||
{{coinInfo.name==item.name&&lastData.close? (Number(lastData.close||0).toFixed(item.price_jd)) : Number(item.close).toFixed(item.price_jd)}}</text>
|
||
<text v-if="coinInfo.name==item.name&&lastData.close" class="font-28 nummedium-font"
|
||
:class="zhangdie>=0?'color-00C481':'color-FF4040'">{{zhangdie}}%</text>
|
||
<text v-else class="font-28 nummedium-font"
|
||
:class="item.increase>0?'color-00C481':'color-FF4040'">{{Number(item.increase*100).toFixed(2)}}%</text>
|
||
</view>
|
||
</view>
|
||
<view v-if="leftcurrent==2" class="padding-w-30">
|
||
<view @click="changeCoin(index,2)" class="width-100b height-78 flex align-center justify-between" v-for="(item,index) in myCoinList" :key="index" style="border-bottom: 1rpx solid rgba(191, 195, 199, 0.2);">
|
||
<view class="flex align-center">
|
||
<view @click.stop="collectCoin(item.symbol,index,2)" class="height-78 flex align-center justify-center">
|
||
<image class="width-24 height-23" src="/static/imgs/transaction/star_on@2x.png" mode=""></image>
|
||
<image class="width-36 height-36 margin-w-10" :src="item.logo_image" mode=""></image>
|
||
</view>
|
||
<text class="font-28 nummedium-font">{{item.name}}<span class="font-26 color-C3C3C3 nummedium-font">/USDT</span></text>
|
||
</view>
|
||
<text class="font-28 nummedium-font">
|
||
{{coinInfo.name==item.name&&lastData.close? (Number(lastData.close||0).toFixed(item.price_jd)) : Number(item.close).toFixed(item.price_jd)}}</text>
|
||
<text v-if="coinInfo.name==item.name&&lastData.close" class="font-28 nummedium-font"
|
||
:class="zhangdie>=0?'color-00C481':'color-FF4040'">{{zhangdie}}%</text>
|
||
<text v-else class="font-28 nummedium-font"
|
||
:class="item.increase>0?'color-00C481':'color-FF4040'">{{Number(item.increase*100).toFixed(2)}}%</text>
|
||
</view>
|
||
<view v-if="myCoinList.length==0"
|
||
class="width-100b padding-c-50 flex direction-column align-center justify-center">
|
||
<text class="font-28 nummedium-font color-C3C3C3">{{i18n.lever.nodata}}</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</u-popup>
|
||
|
||
<!-- 中间弹窗 -->
|
||
<u-popup v-model="centerShow" mode="center" border-radius="20">
|
||
<view class="width-600" :style="'background-color: '+theme.bg+';color: '+theme.text">
|
||
<view class="height-100 flex align-center justify-center">
|
||
<text class="font-32 bold-font">{{i18n.cycle.set}}</text>
|
||
</view>
|
||
<view class="padding-w-20">
|
||
<view class="height-96 line-height-96 padding-w-32">
|
||
<text class="font-30 bold-font">{{i18n.cycle.surplus}}</text>
|
||
</view>
|
||
<input class="inputbox" :style="'background-color: '+theme.fu_bg+';color: '+theme.text"
|
||
type="number" v-model="zy_price" :placeholder="i18n.cycle.setProfit"/>
|
||
</view>
|
||
<view class="padding-w-20">
|
||
<view class="height-96 line-height-96 padding-w-32">
|
||
<text class="font-30 bold-font">{{i18n.cycle.loss}}</text>
|
||
</view>
|
||
<input class="inputbox" :style="'background-color: '+theme.fu_bg+';color: '+theme.text"
|
||
type="number" v-model="zs_price" :placeholder="i18n.cycle.setLoss"/>
|
||
</view>
|
||
<view class="width-100b height-96 margin-t-50 line-height-96 font-30 flex align-center justify-between">
|
||
<view @click="centerShow=false" class="flex-1 color-white text-center" style="background-color: #D1D3D8;border-radius: 0rpx 0rpx 0rpx 20rpx;">
|
||
{{i18n.cycle.quxiao}}</view>
|
||
<view @click="set_contract()" class="flex-1 color-white text-center bj-0165EE" style="border-radius: 0rpx 0rpx 20rpx 0rpx;">
|
||
{{i18n.cycle.queding}}</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
|
||
<!-- 实名认证弹窗 -->
|
||
<u-popup style="z-index: 10100;" border-radius="18" mode="center" v-model="TSShow">
|
||
<view class="width-600 padding-b-20"
|
||
:style="'background-color: '+theme.bg+';color: '+theme.text">
|
||
<view class="width-100b height-220 padding-w-30 padding-c-40 flex direction-column align-center justify-between">
|
||
<image class="width-64 height-64" src="/static/imgs/quantify/tongzhi@2x.png" mode=""></image>
|
||
<view class="font-28 bold-font text-center padding-w-20">{{shimingTitle}}</view>
|
||
</view>
|
||
<view class="width-100b height-90 flex align-center justify-center">
|
||
<view @click="router.push('/pages/my/safety/real')" class="qcbtn3">{{i18n.cycle.shiming}}</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
|
||
<u-popup style="z-index: 10100;" border-radius="10" mode="center" v-model="showView">
|
||
<view class="width-540 padding-40"
|
||
:style="'background-color: '+theme.bg+';color: '+theme.text">
|
||
<view class="padding-c-30">
|
||
<view class="height-60 flex align-center justify-between">
|
||
<text class="font-28 color-C3C3C3 nummedium-font">{{i18n.cycle.jiaoyi}}:</text>
|
||
<text class="font-28 nummedium-font">{{(lastData.close * inputHans) | numFilter}} USDT</text>
|
||
</view>
|
||
<view class="height-60 flex align-center justify-between">
|
||
<text class="font-28 color-C3C3C3 nummedium-font">{{i18n.cycle.margin}}:</text>
|
||
<view v-if="marketType=='market'&&lastData.close" class="font-28 nummedium-font">{{(setting.promise_price * lastData.close * 100 * inputHans / (multiple||1)) | numFilter}} USDT</view>
|
||
<view v-if="marketType=='limit'" class="font-28 nummedium-font">{{(setting.promise_price * inputPirce) | numFilter}} USDT</view>
|
||
</view>
|
||
<view class="height-60 flex align-center justify-between">
|
||
<text class="font-28 color-C3C3C3 nummedium-font">{{i18n.cycle.service}}:</text>
|
||
<view v-if="marketType=='market'&&lastData.close" class="font-28 nummedium-font">{{(setting.contract_fee * setting.promise_price * lastData.close * 100 * inputHans / (multiple||1)) | numFilter}} USDT</view>
|
||
<view v-if="marketType=='limit'" class="font-28 nummedium-font">{{(setting.contract_fee * setting.promise_price * inputPirce) | numFilter}} USDT</view>
|
||
</view>
|
||
</view>
|
||
<view class="width-466 margin-0-auto flex align-center justify-center">
|
||
<button @click="buy_contract()" class="cu-btn loginBtn bj-0165EE" style="width: 466rpx;border-radius: 10rpx;height: 86rpx;">{{i18n.cycle.confirm}}</button>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import contractListItem from './components/contract_list_item.vue'
|
||
export default {
|
||
components: {
|
||
contractListItem,
|
||
},
|
||
data() {
|
||
return {
|
||
count_xh_usdt:0, //合约可用剩余usdt
|
||
midList:[], //左侧币种列表
|
||
midList_copy:[],
|
||
coinInfo:{}, //选中的当前币种信息
|
||
setting:[], //保证金 手续费 倍数 余额 相关设置
|
||
|
||
buyType:'more', //买涨买跌类型
|
||
marketState: false,
|
||
marketType:'market', //交易类型 market=市场交易 limit=限价交易
|
||
|
||
doubleState:false,
|
||
multiple:0,//倍数
|
||
|
||
inputPirce:'',//当前最优价格
|
||
inputHans:'',//数量 手
|
||
|
||
statusBar: uni.getSystemInfoSync().statusBarHeight,
|
||
leftshow:false, //左侧弹窗开关
|
||
centerShow:false, //止盈止损弹窗开关
|
||
zy_price:'',//止盈价格
|
||
zs_price:'',//止损价格
|
||
|
||
tablist1:['Position Held','Transaction Record'],
|
||
current1:0,
|
||
|
||
contract_id:'',//选中的合约订单ID
|
||
contractOrderList:[], //合约交易订单列表
|
||
state:'more',
|
||
page:1,
|
||
loading:true,
|
||
|
||
BtnFlag:true, //按钮防重复点击
|
||
TSShow:false,
|
||
shimingTitle:'请先完成实名认证',
|
||
|
||
// socket
|
||
lastData:'',
|
||
tick:"",
|
||
|
||
leftcurrent:1,
|
||
searchVal:'',
|
||
myCoinList:[],
|
||
myCoinList_copy:[],
|
||
showView:false,
|
||
|
||
theme: '',
|
||
unsettledTimer:null,
|
||
|
||
}
|
||
},
|
||
computed: {
|
||
i18n() {
|
||
return this.$t('message');
|
||
},
|
||
zhangdie() {
|
||
if (this.lastData.close) {
|
||
let increase = Number(this.lastData.close) - Number(this.coinInfo.open)
|
||
return Number(increase / Number(this.coinInfo.open) * 100).toFixed(2)
|
||
} else {
|
||
return 0
|
||
}
|
||
},
|
||
},
|
||
watch:{
|
||
current1(oldValue,newValue){
|
||
if(oldValue != newValue){
|
||
this.refresh_list()
|
||
}
|
||
},
|
||
leftshow(item){
|
||
if(item==false){
|
||
this.searchVal = ''
|
||
clearInterval(this.lefttiming)
|
||
}else{
|
||
this.setTimeLeft()
|
||
}
|
||
}
|
||
},
|
||
filters:{
|
||
//过滤数字位数
|
||
numFilter(item){
|
||
if (item == undefined || item == null) {
|
||
return 0;
|
||
} else {
|
||
if(Number(item) < 10){
|
||
return Number(item).toFixed(6);
|
||
}else{
|
||
return Number(item).toFixed(4);
|
||
}
|
||
}
|
||
},
|
||
},
|
||
onLoad(e){
|
||
const symbol = (e && e.symbol) ? e.symbol : (getApp().globalData.symbol || '')
|
||
if (symbol) {
|
||
getApp().globalData.symbol = symbol
|
||
this.getLeft(symbol)
|
||
} else {
|
||
this.getLeft()
|
||
}
|
||
},
|
||
onShow() {
|
||
if (uni.getStorageSync("theme") == "dark") {
|
||
this.theme = this.$store.state.darkTheme
|
||
} else {
|
||
this.theme = this.$store.state.lightTheme
|
||
}
|
||
if(this.current1==0){
|
||
this.unsettledTimer = setInterval(()=>{
|
||
if(this.coinInfo.symbol == undefined) return
|
||
this.page = 1
|
||
this.unsettledOrder()
|
||
},1500)
|
||
}
|
||
if(getApp().globalData.symbol == ''){
|
||
getApp().globalData.symbol = this.coinInfo.symbol
|
||
console.log(getApp().globalData.symbol )
|
||
}
|
||
this.onSocketMessage()
|
||
this.linkSocket() //链接socket订阅
|
||
this.tablist1 = this.i18n.cycle.tablist1
|
||
|
||
this.TSShow = false
|
||
this.getWallet()
|
||
|
||
uni.$on('reConnect', (res) => {
|
||
console.log("重连WebSocket")
|
||
this.onSocketMessage()
|
||
})
|
||
},
|
||
onHide :function(){
|
||
getApp().globalData.symbol = ""
|
||
uni.$off('reConnect')
|
||
this.cancelSocket() //取消socket订阅
|
||
},
|
||
methods: {
|
||
onSwitchMarket(type) {
|
||
if (type === 'contract') return
|
||
if (type === 'spot') {
|
||
getApp().globalData.symbol = this.coinInfo.symbol || ''
|
||
uni.redirectTo({
|
||
url: '/pages/transaction/index?symbol=' + (this.coinInfo.symbol || '')
|
||
})
|
||
}
|
||
},
|
||
// 收藏币种
|
||
collectCoin(symbol,index,type){
|
||
this.post('/my/collect_rate',{
|
||
symbol:symbol
|
||
}).then((res) => {
|
||
console.log('收藏成功',res)
|
||
if (res.code == 1) {
|
||
if(type==1){
|
||
this.midList[index].is_sc = !this.midList[index].is_sc
|
||
}
|
||
if(type==2){
|
||
this.myCoinList.splice(index,1)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
getContractStatus(){
|
||
if(this.current1 === 0) return 1 // Position Held
|
||
return 'all' // Transaction Record
|
||
},
|
||
getContractViewIndex(){
|
||
if(this.current1 === 0) return 1
|
||
return 0
|
||
},
|
||
setTimeLeft(){
|
||
this.getLeft(this.coinInfo.symbol)
|
||
this.getmy_coinList()
|
||
clearInterval(this.lefttiming)
|
||
if(this.leftcurrent==1){
|
||
this.lefttiming = setInterval(()=>{
|
||
this.getLeft(this.coinInfo.symbol)
|
||
},3000)
|
||
}
|
||
if(this.leftcurrent==2){
|
||
this.lefttiming = setInterval(()=>{
|
||
this.getmy_coinList()
|
||
},3000)
|
||
}
|
||
},
|
||
searchCion(){
|
||
if(this.leftcurrent==1){
|
||
if(this.searchVal==''){
|
||
this.getLeft(this.coinInfo.symbol)
|
||
}
|
||
let arrtemp = []
|
||
this.midList_copy.forEach((item)=>{
|
||
if(item.name.indexOf(this.searchVal.toUpperCase()) != '-1'){
|
||
arrtemp.push(item)
|
||
}
|
||
})
|
||
this.midList = arrtemp
|
||
}
|
||
if(this.leftcurrent==2){
|
||
if(this.searchVal==''){
|
||
this.getmy_coinList()
|
||
}
|
||
let arrtemp = []
|
||
this.myCoinList_copy.forEach((item)=>{
|
||
if(item.name.indexOf(this.searchVal.toUpperCase()) != '-1'){
|
||
arrtemp.push(item)
|
||
}
|
||
})
|
||
this.myCoinList = arrtemp
|
||
}
|
||
},
|
||
onRefresh() {
|
||
console.log('下拉刷新');
|
||
this.getLeft(this.coinInfo.symbol)
|
||
this.getWallet()
|
||
setTimeout(()=>{
|
||
this.$refs.paging.complete();
|
||
}, 1500);
|
||
},
|
||
getWallet(){
|
||
// 刷新合约账户余额
|
||
this.post('/contract/get_coin').then(res => {
|
||
if (res.code == 1) {
|
||
this.setting = res.data.setting
|
||
this.count_xh_usdt = res.data.setting.balance_contract || 0
|
||
}
|
||
})
|
||
},
|
||
// 下拉加载更多
|
||
pullTorefresh(){
|
||
if (this.state == 'over') return
|
||
if (this.loading == true) return
|
||
console.log('下拉加载更多')
|
||
this.page++
|
||
this.get_contract()
|
||
},
|
||
// 刷新重置订单列表
|
||
refresh_list(){
|
||
this.contractOrderList = []
|
||
this.page = 1
|
||
this.state = 'more'
|
||
this.get_contract()
|
||
},
|
||
// 获取合约持仓列表
|
||
unsettledOrder(){
|
||
this.post('/contract/get_contract', {
|
||
page: 1,
|
||
size: this.page * 10,
|
||
symbol: this.coinInfo.symbol,
|
||
status: this.getContractStatus()
|
||
}).then(res => {
|
||
console.log(this.coinInfo.symbol+'合约持仓 size'+ this.page * 10, res.data.data)
|
||
if (res.code == 1) {
|
||
this.loading = false
|
||
if(this.contractOrderList.length != 0&&(this.contractOrderList.length > res.data.data.length)){
|
||
this.current1=2
|
||
}else{
|
||
this.contractOrderList = res.data.data
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 获取合约交易订单列表
|
||
get_contract(){
|
||
if(this.current1==0){
|
||
clearInterval(this.unsettledTimer)
|
||
this.unsettledOrder()
|
||
this.unsettledTimer = setInterval(()=>{
|
||
this.unsettledOrder()
|
||
},3000)
|
||
}else{
|
||
clearInterval(this.unsettledTimer)
|
||
if (this.state == 'over') return
|
||
this.loading = true
|
||
this.state = 'loading'
|
||
let obj = {}
|
||
if(this.current1==1){
|
||
obj = {
|
||
page: this.page,
|
||
status:'all'
|
||
}
|
||
} else {
|
||
obj = {
|
||
page: this.page,
|
||
symbol:this.coinInfo.symbol,
|
||
status:this.getContractStatus()
|
||
}
|
||
}
|
||
this.post('/contract/get_contract', obj).then(res => {
|
||
console.log('合约交易订单列表',res)
|
||
if (res.code == 1) {
|
||
this.loading = false
|
||
this.contractOrderList = this.contractOrderList.concat(res.data.data)
|
||
if (this.page >= res.data.last_page) {
|
||
this.state = 'over'
|
||
}
|
||
}
|
||
})
|
||
}
|
||
},
|
||
dethWidth(index,item,list) {
|
||
var temp = 0
|
||
let num = list.length
|
||
if(num==0) return
|
||
if(num>5){
|
||
num = 5
|
||
}
|
||
for (var i = 0; i < num; i++) {
|
||
temp += Number(list[i][1])
|
||
}
|
||
return (item / temp).toFixed(2) * 100
|
||
},
|
||
// tabs通知swiper切换
|
||
tabsChange1(index) {
|
||
this.current1 = index;
|
||
},
|
||
onswiperchange1(e) {
|
||
// #ifndef APP-PLUS || H5 || MP-WEIXIN || MP-QQ
|
||
let index = e.target.current || e.detail.current;
|
||
this.tabsChange1(index);
|
||
// #endif
|
||
},
|
||
animationfinish1(e) {
|
||
let current = e.detail.current;
|
||
this.current1 = current;
|
||
},
|
||
|
||
// 平仓
|
||
closeOut(id){
|
||
if(!this.BtnFlag) return
|
||
this.BtnFlag = false
|
||
this.post('/contract/pingcang',{
|
||
contract_id: id,
|
||
},true).then((res) => {
|
||
console.log('撤销合约订单',res)
|
||
this.BtnFlag = true
|
||
if (res.code == 1) {
|
||
this.current1 = 2
|
||
this.getWallet()
|
||
this.tos(res.msg)
|
||
}
|
||
})
|
||
},
|
||
// 撤销
|
||
revocation(id){
|
||
if(!this.BtnFlag) return
|
||
this.BtnFlag = false
|
||
this.post('/contract/cancel_cang',{
|
||
contract_id: id,
|
||
},true).then((res) => {
|
||
console.log('撤销合约订单',res)
|
||
this.BtnFlag = true
|
||
if (res.code == 1) {
|
||
this.current1 = 3
|
||
this.getWallet()
|
||
this.tos(res.msg)
|
||
}
|
||
})
|
||
},
|
||
// 止盈止损弹出
|
||
setCheck(id,zy_price,zs_price){
|
||
console.log('合约订单ID',id)
|
||
console.log('止盈价格',zy_price)
|
||
console.log('止损价格',zs_price)
|
||
this.contract_id = id
|
||
this.zy_price = zy_price
|
||
this.zs_price = zs_price
|
||
this.centerShow = true
|
||
},
|
||
// 设置止盈止损比例
|
||
set_contract(){
|
||
if(!this.BtnFlag) return
|
||
if(this.zy_price==0){
|
||
this.tos(this.i18n.cycle.setProfit)
|
||
return
|
||
}
|
||
if(this.zs_price==0){
|
||
this.tos(this.i18n.cycle.setLoss)
|
||
return
|
||
}
|
||
this.BtnFlag = false
|
||
this.post('/contract/set_contract',{
|
||
zy_price: this.zy_price,
|
||
zs_price: this.zs_price,
|
||
contract_id: this.contract_id,
|
||
},true).then((res) => {
|
||
console.log('设置止盈止损比例',res)
|
||
this.BtnFlag = true
|
||
if (res.code == 1) {
|
||
this.tos(res.msg)
|
||
this.centerShow = false
|
||
this.refresh_list()
|
||
}
|
||
})
|
||
},
|
||
tanView(){
|
||
if(this.marketType=='limit'){
|
||
if(this.inputPirce==''){
|
||
this.tos(this.i18n.cycle.tag1)
|
||
return
|
||
}
|
||
}
|
||
if(this.inputHans==''){
|
||
this.tos(this.i18n.cycle.numInput)
|
||
return
|
||
}
|
||
if(this.multiple==0){
|
||
this.tos(this.i18n.cycle.multipleInput)
|
||
return
|
||
}
|
||
this.showView = true
|
||
},
|
||
// 合约下单
|
||
buy_contract(){
|
||
if(!this.BtnFlag) return
|
||
this.BtnFlag = false
|
||
this.post('/contract/buy_contract',{
|
||
cart: this.marketType,
|
||
type: this.buyType,
|
||
num: this.inputHans,
|
||
price: this.marketType=='limit'?this.inputPirce : this.lastData.close,
|
||
coin_id:this.coinInfo.id,
|
||
multiple:this.multiple,
|
||
},true).then((res) => {
|
||
console.log('合约下单',res)
|
||
this.BtnFlag = true
|
||
this.showView = false
|
||
if (res.code == 1) {
|
||
this.inputHans=''
|
||
this.inputPirce=''
|
||
this.multiple=0
|
||
this.tos(res.msg)
|
||
this.getWallet()
|
||
if(this.marketType=='limit'){
|
||
if(this.current1 == 1){
|
||
this.refresh_list()
|
||
}else{
|
||
this.current1 = 1
|
||
}
|
||
}else{
|
||
if(this.current1 == 0){
|
||
this.refresh_list()
|
||
}else{
|
||
this.current1 = 0
|
||
}
|
||
}
|
||
}else{
|
||
if(res.data.jump == 1){
|
||
this.shimingTitle = res.msg
|
||
this.TSShow = true
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 我的收藏币种列表
|
||
getmy_coinList(){
|
||
this.post('/my/collect_list',{
|
||
type:'1'
|
||
}).then((res) => {
|
||
console.log('我的收藏',res)
|
||
if (res.code == 1) {
|
||
if(this.leftshow){
|
||
if(this.searchVal){
|
||
let arrtemp = []
|
||
res.data.coin.forEach((item)=>{
|
||
if(item.name.indexOf(this.searchVal.toUpperCase()) != '-1'){
|
||
arrtemp.push(item)
|
||
}
|
||
})
|
||
console.log(arrtemp)
|
||
this.myCoinList = arrtemp
|
||
}else{
|
||
this.myCoinList = res.data.coin
|
||
this.myCoinList_copy = res.data.coin
|
||
}
|
||
}else{
|
||
this.myCoinList = res.data.coin
|
||
this.myCoinList_copy = res.data.coin
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 获取合约交易币种列表
|
||
getLeft(symbol){
|
||
this.post('/contract/get_coin').then(res => {
|
||
if (res.code == 1) {
|
||
console.log('合约交易币种列表',res)
|
||
if (symbol == undefined) {
|
||
this.cancelSocket() //取消socket订阅
|
||
}
|
||
this.setting = res.data.setting
|
||
// 使用合约账户余额
|
||
this.count_xh_usdt = res.data.setting.balance_contract || 0
|
||
if(this.leftshow){
|
||
if(this.searchVal){
|
||
let arrtemp = []
|
||
res.data.coin.forEach((item)=>{
|
||
if(item.name.indexOf(this.searchVal.toUpperCase()) != '-1'){
|
||
arrtemp.push(item)
|
||
}
|
||
})
|
||
console.log(arrtemp)
|
||
this.midList = arrtemp
|
||
}else{
|
||
this.midList = res.data.coin
|
||
this.midList_copy = res.data.coin
|
||
}
|
||
}else{
|
||
this.midList = res.data.coin
|
||
this.midList_copy = res.data.coin
|
||
if (symbol) {
|
||
this.midList.forEach((item, index) => {
|
||
if (item.symbol == symbol) {
|
||
this.coinInfo = item
|
||
}
|
||
})
|
||
} else {
|
||
this.coinInfo = this.midList[0]
|
||
}
|
||
}
|
||
if (!this.leftshow) {
|
||
this.refresh_list()
|
||
}
|
||
getApp().globalData.symbol = this.coinInfo.symbol
|
||
// this.onSocketMessage()
|
||
if (symbol == undefined) {
|
||
this.linkSocket() //链接socket订阅
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 选中币种
|
||
changeCoin(index,type){
|
||
this.cancelSocket() //取消socket订阅
|
||
if(type==1){
|
||
this.coinInfo = this.midList[index]
|
||
}
|
||
if(type==2){
|
||
this.coinInfo = this.myCoinList[index]
|
||
}
|
||
this.refresh_list()
|
||
getApp().globalData.symbol = this.coinInfo.symbol
|
||
this.linkSocket() //链接socket订阅
|
||
if(this.lastData.close){
|
||
this.lastData.close = Number(this.coinInfo.close)
|
||
}
|
||
this.leftshow = false
|
||
},
|
||
// 取消socket订阅
|
||
cancelSocket(){
|
||
this.sendSocketMessage({
|
||
'subs':'depth',
|
||
"user_id":uni.getStorageSync("user_id"),
|
||
"unsub":"market."+this.coinInfo.symbol+".depth.step0",
|
||
"id":"BTC",
|
||
})
|
||
this.sendSocketMessage({
|
||
'subs':'tradenow',
|
||
"user_id":uni.getStorageSync("user_id"),
|
||
"unsub":"market."+this.coinInfo.symbol+".kline.1min",
|
||
"id":"BTC",
|
||
})
|
||
},
|
||
// 链接socket订阅
|
||
linkSocket(){
|
||
this.sendSocketMessage({
|
||
'subs':'depth',
|
||
"user_id":uni.getStorageSync("user_id"),
|
||
"sub":"market."+this.coinInfo.symbol+".depth.step0",
|
||
"id":"BTC",
|
||
})
|
||
this.sendSocketMessage({
|
||
'subs':'tradenow',
|
||
"user_id":uni.getStorageSync("user_id"),
|
||
"sub":"market."+this.coinInfo.symbol+".kline.1min",
|
||
"id":"BTC",
|
||
})
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.topSwitch {
|
||
width: 360rpx;
|
||
height: 60rpx;
|
||
border: 2rpx solid #10C7A0;
|
||
border-radius: 12rpx;
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.topSwitchFull {
|
||
width: 100%;
|
||
height: 60rpx;
|
||
border: 2rpx solid #10C7A0;
|
||
border-radius: 12rpx;
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.topSwitchItem {
|
||
flex: 1;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
color: #111111;
|
||
}
|
||
.topSwitchItem.active {
|
||
background: #10C7A0;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.toptitle_active{
|
||
flex: 2;
|
||
font-size: 36rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: bold;
|
||
color: #000000;
|
||
text-align: center;
|
||
transition: all 0.5s;
|
||
}
|
||
.toptitle{
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #8B99A2;
|
||
transition: all 0.5s;
|
||
}
|
||
.fixed1 {
|
||
width: 100%;
|
||
position: fixed;
|
||
top: 0;
|
||
z-index: 10010;
|
||
background-color: #F6F8FB;
|
||
}
|
||
.exchangeBox{
|
||
// width: 200rpx;
|
||
padding: 0 18rpx;
|
||
height: 48rpx;
|
||
// background: rgba(195, 195, 195, 0.39);
|
||
background: rgba(249,249,249,0.2);
|
||
margin-right: 30rpx;
|
||
border-radius: 10rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.limitBox_up {
|
||
// width: 116rpx;
|
||
height: 46rpx;
|
||
padding: 0 14rpx;
|
||
background: rgba(6,195,141,0.2);
|
||
border-radius: 4rpx;
|
||
font-size: 28rpx;
|
||
line-height: 46rpx;
|
||
color: #06C38D;
|
||
font-family: "Medium" !important;
|
||
}
|
||
|
||
.limitBox_down {
|
||
// width: 116rpx;
|
||
height: 46rpx;
|
||
padding: 0 14rpx;
|
||
background: rgba(220,75,67,0.2);
|
||
border-radius: 4rpx;
|
||
font-size: 28rpx;
|
||
line-height: 46rpx;
|
||
color: #DC4B43;
|
||
font-family: "Medium" !important;
|
||
}
|
||
.maskBox {
|
||
width: 100vh;
|
||
height: 100vh;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
background-color: rgba(0, 0, 0, 0);
|
||
z-index: 10000;
|
||
}
|
||
.xialabox {
|
||
width: 388rpx;
|
||
// background: #FFFFFF;
|
||
border: 1px solid rgba(171, 171, 171, 0.2);
|
||
border-radius: 4rpx;
|
||
overflow: hidden;
|
||
transition: 0.3s;
|
||
position: absolute;
|
||
top: 0rpx;
|
||
z-index: 10100;
|
||
}
|
||
.xialabox1 {
|
||
width: 388rpx;
|
||
// background: #FFFFFF;
|
||
border: 1px solid rgba(171, 171, 171, 0.2);
|
||
border-radius: 4rpx;
|
||
overflow: hidden;
|
||
transition: 0.3s;
|
||
position: absolute;
|
||
top: 0rpx;
|
||
z-index: 10100;
|
||
}
|
||
.heng{
|
||
width: 48rpx;
|
||
height: 4rpx;
|
||
margin: 10 auto;
|
||
background: linear-gradient(180deg, #52F3C9 0%, #3ECEB2 100%);
|
||
}
|
||
.swiper {
|
||
/* #ifndef H5 */
|
||
// 除了 H5 平台，其它平台均存在的代码
|
||
height: calc(100vh - 676rpx - var(--status-bar-height));
|
||
// height: calc(100vh - 882rpx - var(--status-bar-height));
|
||
/* #endif */
|
||
|
||
/* #ifdef H5 */
|
||
// 只会出现在h5上
|
||
height: calc(100vh - 676rpx - 104rpx);
|
||
// height: calc(100vh - 882rpx - 104rpx);
|
||
/* #endif */
|
||
}
|
||
.swiper_no {
|
||
/* #ifndef H5 */
|
||
// 除了 H5 平台，其它平台均存在的代码
|
||
height: calc(100vh - 862rpx - var(--status-bar-height));
|
||
// height: calc(100vh - 882rpx - var(--status-bar-height));
|
||
/* #endif */
|
||
|
||
/* #ifdef H5 */
|
||
// 只会出现在h5上
|
||
height: calc(100vh - 862rpx - 104rpx);
|
||
// height: calc(100vh - 882rpx - 104rpx);
|
||
/* #endif */
|
||
}
|
||
.progress{
|
||
height: 100%;
|
||
max-width: 272rpx;
|
||
border-top-left-radius: 10rpx;
|
||
border-bottom-left-radius: 10rpx;
|
||
position: absolute;
|
||
top: 0rpx;
|
||
right: 0rpx;
|
||
transition: all 0.3s;
|
||
}
|
||
.loginBtn{
|
||
width: 378rpx;
|
||
height: 74rpx;
|
||
box-shadow: 0rpx 6rpx 10rpx rgba(16, 194, 168, 0.18);
|
||
border-radius: 4rpx;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
.inputbox{
|
||
width: 560rpx;
|
||
height: 96rpx;
|
||
padding: 0 32rpx;
|
||
// background: #F6F8FB;
|
||
border-radius: 12rpx;
|
||
font-size: 30rpx;
|
||
font-family: "Bold" !important;
|
||
font-style: normal;
|
||
}
|
||
|
||
.leftbox {
|
||
width: 190rpx;
|
||
height: 66rpx;
|
||
border-radius: 8rpx 0rpx 0rpx 8rpx;
|
||
background: linear-gradient(106deg, #06C38D 183rpx, transparent 10rpx);
|
||
font-size: 28rpx;
|
||
color: #FFFFFF !important;
|
||
line-height: 66rpx;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
}
|
||
.triangle-left {
|
||
width: 190rpx;
|
||
height: 66rpx;
|
||
border-radius: 8rpx 0rpx 0rpx 8rpx;
|
||
background: linear-gradient(106deg, rgba(217,217,217,0.4) 183rpx, transparent 10rpx);
|
||
font-size: 28rpx;
|
||
color: #020202;
|
||
line-height: 66rpx;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
}
|
||
.rightbox {
|
||
width: 190rpx;
|
||
height: 66rpx;
|
||
border-radius: 0rpx 8rpx 8rpx 0rpx;
|
||
background: linear-gradient(-74deg, #DC4B43 183rpx, transparent 10rpx);
|
||
font-size: 28rpx;
|
||
color: #FFFFFF !important;
|
||
line-height: 66rpx;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.triangle-right {
|
||
width: 190rpx;
|
||
height: 66rpx;
|
||
border-radius: 0rpx 8rpx 8rpx 0rpx;
|
||
background: linear-gradient(-74deg, rgba(217,217,217,0.4) 183rpx, transparent 10rpx);
|
||
font-size: 28rpx;
|
||
color: #020202;
|
||
line-height: 66rpx;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
}
|
||
|
||
|
||
.qcbtn3 {
|
||
width: 320rpx;
|
||
height: 86rpx;
|
||
background: #0165EE;
|
||
border-radius: 20rpx;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
</style>
|