| | |
|---|
| | | <template> |
|---|
| | | <div class="warehouse_page"> |
|---|
| | | <div class="content"> |
|---|
| | | <!-- <div class="search"> |
|---|
| | | <div class="search_content"> |
|---|
| | | <div class="left_search"> |
|---|
| | | <div class="search_img"> |
|---|
| | | <img src="../../assets/img/searchs.png" alt /> |
|---|
| | | </div> |
|---|
| | | <div class="search_input"> |
|---|
| | | <input type="text" class="searchs" :placeholder="$t('hj37')" ref="search" id="sousuo" v-model="gpcode" |
|---|
| | | @input="gpinput" /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> --> |
|---|
| | | <div style="width: 100%;height: 10px;"></div> |
|---|
| | | <div class="top_class"> |
|---|
| | | <div class="top_class_box"> |
|---|
| | | <div :class="typeindex==0?'top_class_box_left':'top_class_box_right'" @click="typeclick(0)"> |
|---|
| | | {{$t('ydgs')}} |
|---|
| | | </div> |
|---|
| | | <div :class="typeindex==1?'top_class_box_left':'top_class_box_right'" @click="typeclick(1)"> |
|---|
| | | {{$t('mggs')}} |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <!-- <div class="top_title" :class="titleDialog ? 'active' : ''" ref="topTitle"> |
|---|
| | | <div class="titles"> |
|---|
| | | <div class="left_title" @click="handleOpenDialog()"> |
|---|
| | | <div class="title"> |
|---|
| | | <span>{{ titleName }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="img"> |
|---|
| | | <img src="../../assets/img/xiala.png" alt /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="right_box"></div> |
|---|
| | | <div class="ware"> |
|---|
| | | <div style="padding: 0 0.4rem 0.4rem"> |
|---|
| | | <div class="tabs-box" onscroll="handleScroll"> |
|---|
| | | <div |
|---|
| | | v-for="(item, index) in tabsArr" |
|---|
| | | :key="index" |
|---|
| | | :class=" |
|---|
| | | item.name == active ? 'tabs-item-active tabs-item' : 'tabs-item' |
|---|
| | | " |
|---|
| | | @click="onClick(item)" |
|---|
| | | > |
|---|
| | | {{ item.title }} |
|---|
| | | </div> |
|---|
| | | <div class="overflow_box item" @click="SetTitleIndex(0)"> |
|---|
| | | <div class="left_titles"> |
|---|
| | | <span>{{ $t('hj114') }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="right_price"> |
|---|
| | | <span>{{ '' }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <template v-if="active === '1'"> |
|---|
| | | <div v-for="(item, index) in tabsArr" :key="index"> |
|---|
| | | <card :item="item" /> |
|---|
| | | </div> |
|---|
| | | <div class="overflow_box item" @click="SetTitleIndex(1)"> |
|---|
| | | <div class="left_titles"> |
|---|
| | | <span>{{ $t('hj115') }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="right_price"> |
|---|
| | | <span>{{ '' }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="overflow_box item" @click="SetTitleIndex(2)"> |
|---|
| | | <div class="left_titles"> |
|---|
| | | <span>{{ $t('hj116') }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="right_price"> |
|---|
| | | <span>{{ '' }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> --> |
|---|
| | | <div class="warehouse_card"> |
|---|
| | | <div class="top_card" v-if="typeindex == 0"> |
|---|
| | | <div class="card_content"> |
|---|
| | | <div class="t_title"> |
|---|
| | | <span>{{ $t('ihj49') }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="t_price"> |
|---|
| | | <p class="price">{{$store.state.userInfo.userAmt}}</p> |
|---|
| | | <img src="../../../static/img/ydgq.png" |
|---|
| | | style="width: 17px;height: 17px;border-radius: 25px;" /> |
|---|
| | | </div> |
|---|
| | | <div class="ydy_box">≈${{$store.state.userInfo.userAmtToUsdt}}</div> |
|---|
| | | <div class="balance"> |
|---|
| | | <div class="left_titles"> |
|---|
| | | {{ $t('disan') }} |
|---|
| | | </div> |
|---|
| | | <div class="right_titles"> |
|---|
| | | {{ $t('disana') }} |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="num"> |
|---|
| | | <div class="left_price"> |
|---|
| | | <span>${{$store.state.userInfo.enableAmt}}</span> |
|---|
| | | </div> |
|---|
| | | <div class="right_margin"> |
|---|
| | | <span>${{$store.state.userInfo.allFreezAmt}}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div style="width: 100%;display: flex;"> |
|---|
| | | <div class="ydy_box" style="width: 50%;">≈${{$store.state.userInfo.enableAmtToUsdt}}</div> |
|---|
| | | <div class="ydy_box" style="width: 50%;">≈${{$store.state.userInfo.allFreezAmtToUsdt}}</div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="margin"> |
|---|
| | | <div class="left_titles"> |
|---|
| | | {{ $t('aym') }} |
|---|
| | | </div> |
|---|
| | | <div class="right_titles"> |
|---|
| | | {{ $t('ysa') }} |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="prices"> |
|---|
| | | <div class="left_titles"> |
|---|
| | | <span class="numDemo">$0.00</span> |
|---|
| | | </div> |
|---|
| | | <div class="right_titles"> |
|---|
| | | <span>$0.00</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div style="width: 100%;display: flex;"> |
|---|
| | | <div class="ydy_box" style="width: 50%;">≈$0.00</div> |
|---|
| | | <div class="ydy_box" style="width: 50%;">≈$0.00</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="top_card" v-else> |
|---|
| | | <div class="card_content"> |
|---|
| | | <div class="t_title"> |
|---|
| | | <span>{{ $t('uszzcaa') }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="t_price"> |
|---|
| | | <p class="price">{{$store.state.userInfo.userIndexAmt}}</p> |
|---|
| | | <img src="../../../static/img/usgq.png" |
|---|
| | | style="width: 17px;height: 17px;border-radius: 25px;" /> |
|---|
| | | </div> |
|---|
| | | <div class="balance"> |
|---|
| | | <div class="left_titles"> |
|---|
| | | {{ $t('uszzc') }} |
|---|
| | | </div> |
|---|
| | | <div class="right_titles"> |
|---|
| | | {{ $t('djzjmg') }} |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="num"> |
|---|
| | | <div class="left_price"> |
|---|
| | | <span>{{$store.state.userInfo.enableIndexAmt}}</span> |
|---|
| | | </div> |
|---|
| | | <div class="right_margin"> |
|---|
| | | <span>{{ $store.state.userInfo.usAllFreezAmt }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | |
|---|
| | | <div class="margin"> |
|---|
| | | <div class="left_titles"> |
|---|
| | | {{ $t('accumbn') }} |
|---|
| | | </div> |
|---|
| | | <div class="right_titles"> |
|---|
| | | {{ $t('tolaszasdf') }} |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="prices"> |
|---|
| | | <div class="left_titles"> |
|---|
| | | <span>{{$store.state.userInfo.usAllProfitAndLose}}</span> |
|---|
| | | </div> |
|---|
| | | <div class="right_titles"> |
|---|
| | | <span class="numDemo">0.00</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="click_box"> |
|---|
| | | <div :class="zjtype==0?'click_box_left':'click_box_right'" @click="clickzj(0)">{{$t('nwetitle')}} |
|---|
| | | <div v-if="zjtype==0" class="click_box_g"></div> |
|---|
| | | </div> |
|---|
| | | <div :class="zjtype==1?'click_box_left':'click_box_right'" @click="clickzj(1)">{{$t('nwetitlea')}} |
|---|
| | | <div v-if="zjtype==1" class="click_box_g"></div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="tabs_card"> |
|---|
| | | <div class="tabs_card_content"> |
|---|
| | | <!-- 持仓 currentIndex: 0 --> |
|---|
| | | <div class="over"> |
|---|
| | | <van-list v-model="loading" :finished="finished" v-if="zjtype==0&&cclist.length" |
|---|
| | | :finished-text="$t('hj43')" @load="onLoad" > |
|---|
| | | <div v-if="cclist.length>0" class="tabs_o"> |
|---|
| | | <div class="tabs_o_items" v-for="(item) in cclist" |
|---|
| | | :key="item.buyOrderId"> |
|---|
| | | <div class="tabs_o_title"> |
|---|
| | | <div style="width: calc(100% - 3.5rem);display: flex;"> |
|---|
| | | <div> |
|---|
| | | <span |
|---|
| | | class="title">{{ item.stockName ? item.stockName : item.indexName }}</span> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div> |
|---|
| | | <div class="buy_to_sell" |
|---|
| | | :class="item.orderDirection == '买跌' ? 'maichu' : 'mairu'"> |
|---|
| | | {{ item.orderDirection == "买跌" ? $t('hj84') : $t('hj85') }} |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="right_btn pingbtn" @click="getpingcang(item.positionSn)"> |
|---|
| | | <span style="margin-right: 0;width: 110px;">{{ $t('hj121') }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="bottom_price_title"> |
|---|
| | | <div class="start_price"> |
|---|
| | | <span>P/L(INR)</span> |
|---|
| | | </div> |
|---|
| | | <div class="new_price"> |
|---|
| | | <span>{{ $t('shou') }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="center_price"> |
|---|
| | | <div class="start_price"> |
|---|
| | | <span |
|---|
| | | :style="item.profitAndLose>0?'color: rgb(3, 173, 143);':'color:rgb(208, 75, 100);'">{{ item.profitAndLose }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="new_price"> |
|---|
| | | <span>{{ item.orderNum }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="bottom_price_title"> |
|---|
| | | <div class="new_price"> |
|---|
| | | <span>{{$t('ssdd')}}</span> |
|---|
| | | </div> |
|---|
| | | <div class="start_price" style="width: 123px;"> |
|---|
| | | <span style="color: #000;">{{ item.buyOrderPrice }} |
|---|
| | | <span style="color: #bdbdbd;">/{{ item.now_price }}</span> |
|---|
| | | </span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="bottom_price_title"> |
|---|
| | | <div class="new_price"> |
|---|
| | | <span>{{$t('whpb')}}</span> |
|---|
| | | </div> |
|---|
| | | <div class="start_price"> |
|---|
| | | <span>{{ item.orderTotalPrice }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="bottom_price_title"> |
|---|
| | | <div class="new_price"> |
|---|
| | | <span>{{$t('gmsj')}}</span> |
|---|
| | | </div> |
|---|
| | | <div class="start_price"> |
|---|
| | | <span>{{ item.buyOrderTime | gettime }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </van-list> |
|---|
| | | |
|---|
| | | <van-list v-model="loading" v-if="zjtype==1" :finished="finished" |
|---|
| | | :finished-text="$t('hj43')" @load="onLoad" :immediate-check="immediate"> |
|---|
| | | <div class="tabs_o"> |
|---|
| | | <div class="tabs_o_items" v-if="cclist.length>0" v-for="(item) in cclist" |
|---|
| | | :key="item.buyOrderId"> |
|---|
| | | <div class="tabs_o_title"> |
|---|
| | | <div style="width: calc(100% - 3.5rem);display: flex;"> |
|---|
| | | <div> |
|---|
| | | <span |
|---|
| | | class="title">{{ item.stockName ? item.stockName : item.indexName }}</span> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div> |
|---|
| | | <div class="buy_to_sell" |
|---|
| | | :class="item.orderDirection == '买跌' ? 'maichu' : 'mairu'"> |
|---|
| | | {{ item.orderDirection == "买跌" ? $t('hj84') : $t('hj85') }} |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- <div class="right_btn pingbtn" @click="getpingcang(item.positionSn)"> |
|---|
| | | <span style="margin-right: 0;">{{ $t('hj121') }}</span> |
|---|
| | | </div> --> |
|---|
| | | </div> |
|---|
| | | <div class="bottom_price_title"> |
|---|
| | | <div class="start_price"> |
|---|
| | | <span>P/L(INR)</span> |
|---|
| | | </div> |
|---|
| | | <div class="new_price"> |
|---|
| | | <span>{{ $t('shou') }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="center_price"> |
|---|
| | | <div class="start_price"> |
|---|
| | | <span |
|---|
| | | :style="item.profitAndLose>0?'color: rgb(3, 173, 143);':'color:rgb(208, 75, 100);'">{{ item.profitAndLose }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="new_price"> |
|---|
| | | <span>{{ item.orderNum }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="bottom_price_title"> |
|---|
| | | <div class="new_price"> |
|---|
| | | <span>{{$t('ssdd')}}</span> |
|---|
| | | </div> |
|---|
| | | <div class="start_price"> |
|---|
| | | <span style="color: #000;">{{ item.buyOrderPrice }} |
|---|
| | | </span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="bottom_price_title"> |
|---|
| | | <div class="new_price"> |
|---|
| | | <span>{{$t('whpb')}}</span> |
|---|
| | | </div> |
|---|
| | | <div class="start_price"> |
|---|
| | | <span>{{ item.orderTotalPrice }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="bottom_price_title"> |
|---|
| | | <div class="new_price"> |
|---|
| | | <span>{{$t('whpb')}}</span> |
|---|
| | | </div> |
|---|
| | | <div class="start_price"> |
|---|
| | | <span>{{ item.sellOrderPrice }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="bottom_price_title"> |
|---|
| | | <div class="new_price"> |
|---|
| | | <span>{{$t('gmsj')}}</span> |
|---|
| | | </div> |
|---|
| | | <div class="start_price"> |
|---|
| | | <span>{{ item.buyOrderTime | gettime }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="bottom_price_title"> |
|---|
| | | <div class="new_price"> |
|---|
| | | <span>{{$t('gbsj')}}</span> |
|---|
| | | </div> |
|---|
| | | <div class="start_price"> |
|---|
| | | <span>{{ item.sellOrderTime | gettime }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </van-list> |
|---|
| | | <div class="waiting" v-if="total == 0 && tabsCurrentIndex === 0"> |
|---|
| | | <div class="waiting_box"> |
|---|
| | | <div class="img_cont"> |
|---|
| | | <img src="../../assets/img/zhaobudao.png" alt /> |
|---|
| | | <span class="gd">{{ $t('hj122') }}</span> |
|---|
| | | <div class="trading" @click="$router.push('/trading-list')"> |
|---|
| | | <span>{{ $t('hj123') }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- 挂单 --> |
|---|
| | | <div class="waiting" v-if="totalss == 0 && tabsCurrentIndex === 1"> |
|---|
| | | <div class="waiting_box"> |
|---|
| | | <div class="img_cont"> |
|---|
| | | <img src="../../assets/img/zhaobudao.png" alt /> |
|---|
| | | <span class="gd">{{ $t('hj124') }}</span> |
|---|
| | | <div class="trading" @click="$router.push('/trading-list')"> |
|---|
| | | <span>{{ $t('hj123') }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <van-list v-model="loadingss" :finished="finishedss" :finished-text="$t('hj43')" |
|---|
| | | v-if="tabsCurrentIndex === 1 && totalss != 0" :immediate-check="immediate"> |
|---|
| | | <div class="tabs_o"> |
|---|
| | | <div class="tabs_o_items" v-if="tabsOrderList.length>0" |
|---|
| | | v-for="(item) in tabsOrderList" :key="item.id"> |
|---|
| | | <div class="tabs_o_title"> |
|---|
| | | <div> |
|---|
| | | <span |
|---|
| | | class="title">{{ item.stockName ? item.stockName : item.indexName }}</span> |
|---|
| | | <span class="buy_to_sell" |
|---|
| | | :class="item.buyType == 1 ? 'maichu' : 'mairu'">{{ |
|---|
| | | item.buyType == 1 ? $t('hj84') : $t('hj85') |
|---|
| | | }}</span> |
|---|
| | | <span class="buy_to_sell" |
|---|
| | | :class="item.status == 1 ? 'mairu' : 'maichu'">{{ |
|---|
| | | item.status == 1 ? $t('hj254') : $t('hj255') |
|---|
| | | }}</span> |
|---|
| | | <span class="multiple">{{ item.lever }}X</span> |
|---|
| | | <span class="nums">{{ item.buyNum + $t('hj117') }}</span> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="right_btn pingbtn" @click="gdClose(item)"> |
|---|
| | | <span style="margin-right: 0;">{{ $t('hj126') }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="center_price"> |
|---|
| | | <div class="start_price jiantou"> |
|---|
| | | <span>{{ item.targetPrice }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="new_price"> |
|---|
| | | <span>{{ item.nowPrice }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="bottom_price_title"> |
|---|
| | | <div class="start_price"> |
|---|
| | | <span>{{ $t('hj125') }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="new_price"> |
|---|
| | | <span>{{ $t('hj120') }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </van-list> |
|---|
| | | |
|---|
| | | <!-- 平仓 --> |
|---|
| | | <div class="waiting" v-if="totals == 0 && tabsCurrentIndex === 2"> |
|---|
| | | <div class="waiting_box"> |
|---|
| | | <div class="img_cont"> |
|---|
| | | <img src="../../assets/img/zhaobudao.png" alt /> |
|---|
| | | <span class="gd">{{ $t('hj127') }}</span> |
|---|
| | | <div class="trading" @click="$router.push('/trading-list')"> |
|---|
| | | <span>{{ $t('hj123') }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <van-list v-model="loadings" :finished="finisheds" :finished-text="$t('hj43')" |
|---|
| | | @load="onLoads" :immediate-check="immediate" |
|---|
| | | v-if="tabsCurrentIndex === 2 && totals != 0"> |
|---|
| | | <div class="tabs_o"> |
|---|
| | | <div class="tabs_o_items oes" v-if="tabsPcArr.length>0" |
|---|
| | | v-for="(item, index) in tabsPcArr" :key="index"> |
|---|
| | | <div class="tabs_o_title"> |
|---|
| | | <div> |
|---|
| | | <span |
|---|
| | | class="title">{{ item.stockName ? item.stockName : item.indexName }}</span> |
|---|
| | | <span class="buy_to_sell" |
|---|
| | | :class="item.orderDirection == '买跌' ? 'maichu' : 'mairu'">{{ |
|---|
| | | item.orderDirection == "买跌" ? |
|---|
| | | $t('hj84') : $t('hj85') |
|---|
| | | }}</span> |
|---|
| | | <span class="multiple">{{ item.allProfitAndLose }}</span> |
|---|
| | | <span class="nums">{{ item.orderNum + $t('hj117') }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="right_count" |
|---|
| | | :class="item.profitAndLose > 0 ? 'red' : item.profitAndLose == 0 ? '' : 'green'"> |
|---|
| | | <span style="margin-right: 0;">{{ item.profitAndLose }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="bottom_price_title"> |
|---|
| | | <div class="profit_res"> |
|---|
| | | <span>{{ $t('hj128') }}: {{ item.buyOrderTime | gettime }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </van-list> |
|---|
| | | <!-- 新股 --> |
|---|
| | | <div class="waiting" v-if="xgTotal == 0 && tabsCurrentIndex === 3"> |
|---|
| | | <div class="waiting_box"> |
|---|
| | | <div class="img_cont"> |
|---|
| | | <img src="../../assets/img/zhaobudao.png" alt /> |
|---|
| | | <span class="gd">{{ $t('hj129') }}</span> |
|---|
| | | <div class="trading" |
|---|
| | | @click="$router.push({ path: '/trading-list', query: { listid: 5 } })"> |
|---|
| | | <span>{{ $t('hj123') }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <van-list v-model="loadingXg" :finished="finishedXg" :finished-text="$t('hj43')" |
|---|
| | | v-show="tabsCurrentIndex === 3 && xgTotal != 0" @load="onLoadXg" |
|---|
| | | :immediate-check="immediate"> |
|---|
| | | <div class="tabs_o"> |
|---|
| | | <div class="tabs_o_items" v-for="(item) in tabsXgArr" :key="item.id"> |
|---|
| | | <div class="tabs_o_title"> |
|---|
| | | <span class="title">{{ item.newName }}</span> |
|---|
| | | <span class="buy_to_sell" :class="item.type == 1 ? 'mairu' : 'maichu'">{{ |
|---|
| | | item.type == 1 ? $t('hj45') : $t('hj46') |
|---|
| | | }}</span> |
|---|
| | | <!-- <span class="multiple">{{ item.lever }}X</span> |
|---|
| | | <span class="nums">{{ item.buyNum / 100 + '手' }}</span> --> |
|---|
| | | </div> |
|---|
| | | <div style="display: flex;align-items: center;justify-content: space-between;"> |
|---|
| | | <div style="width: 100%;"> |
|---|
| | | <div class="center_price"> |
|---|
| | | <div class="start_price jiantou"> |
|---|
| | | <span>{{ item.buyPrice }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="new_price" v-if="item.status != 3"> |
|---|
| | | <span>{{ item.applyNums }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="new_price" v-else> |
|---|
| | | <span>{{ item.applyNumber }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="bottom_price_title"> |
|---|
| | | |
|---|
| | | <div class="start_price"> |
|---|
| | | <span>{{ $t('hj130') }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="new_price" v-if="item.status != 3"> |
|---|
| | | <span>{{ $t('hj57') }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="new_price" v-else> |
|---|
| | | <span>{{ $t('hj253') }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="right_btn" style="padding: 0 0.2rem;" @click="zcsg(item)" |
|---|
| | | :class="item.status == 1 ? 'pink' : item.status == 2 ? 'red' |
|---|
| | | : (item.status == 3 && item.type != 1) ? 'green' : item.status == 4 ? 'blue' : item.status == 5 ? 'purple' : ''" |
|---|
| | | v-if="!(item.type == 1 && item.status == 3)"> |
|---|
| | | <span>{{ item.status == 1 ? |
|---|
| | | $t('hj131') : item.status == 2 ? $t('hj132') |
|---|
| | | : (item.status == 3 && item.type != 1) ? $t('hj133') : item.status == 4 ? $t('hj134') : |
|---|
| | | item.status == 5 ? |
|---|
| | | $t('hj135') |
|---|
| | | : '' |
|---|
| | | }}</span> |
|---|
| | | </div> |
|---|
| | | <div v-if="item.type == 1 && item.status == 3" class="right_btn pingbtn" |
|---|
| | | style="width: 2rem !important;" @click="getrenjiao(item.id)"> |
|---|
| | | {{ $t('hj250') }} |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </van-list> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="dialog" v-if="titleDialog" @click="titleDialog = false"></div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | <template v-else> |
|---|
| | | <itemCard :activeObj="activeObj" /> |
|---|
| | | </template> |
|---|
| | | </div> |
|---|
| | | <dataList /> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { |
|---|
| | | Toast |
|---|
| | | } from 'vant' |
|---|
| | | import { |
|---|
| | | MessageBox |
|---|
| | | } from 'mint-ui' |
|---|
| | | import * as api from '@/axios/api' |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | zjtype: 0, |
|---|
| | | tabsArr: [this.$t('hj2'), this.$t('hj109'), this.$t('hj136'), this.$t('hj3')], |
|---|
| | | tabsCurrentIndex: 0, |
|---|
| | | titleName: this.$t('hj114'), |
|---|
| | | indexSettingInfo: {}, |
|---|
| | | futuresSettingInfo: {}, |
|---|
| | | tabsPositionNumArr: [], |
|---|
| | | titleIndex: 0, |
|---|
| | | settingInfo: {}, |
|---|
| | | tabsPcArr: [], |
|---|
| | | typeindex: 0, |
|---|
| | | titleDialog: false, |
|---|
| | | total: 0, |
|---|
| | | totals: 0, |
|---|
| | | totalss: 0, |
|---|
| | | loading: false, |
|---|
| | | finished: false, |
|---|
| | | finisheds: false, |
|---|
| | | finishedss: false, |
|---|
| | | page: 1, |
|---|
| | | pages: 1, |
|---|
| | | pagess: 1, |
|---|
| | | state: 0, |
|---|
| | | pageSize: 15, |
|---|
| | | pageNum: 1, |
|---|
| | | immediate: false, |
|---|
| | | loadings: false, |
|---|
| | | loadingss: false, |
|---|
| | | tabsOrderList: [], |
|---|
| | | xgTotal: 0, |
|---|
| | | tabsXgArr: [], |
|---|
| | | cclist: [], |
|---|
| | | loadingXg: false, |
|---|
| | | finishedXg: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.getListDetail() |
|---|
| | | this.getUserInfo() |
|---|
| | | this.getIndexSettingInfo() |
|---|
| | | this.getSettingInfo() |
|---|
| | | this.getFuturesSetting() |
|---|
| | | this.getListDetails() |
|---|
| | | this.getorderList() |
|---|
| | | this.getNewXg() |
|---|
| | | this.newchicang() |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | if (this.$route.query.index) { |
|---|
| | | this.tabsCurrentIndex = Number(this.$route.query.index) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | async newchicang() { |
|---|
| | | let opt = { |
|---|
| | | state: this.zjtype == 0 ? '0' : '1', |
|---|
| | | stockType: this.typeindex == 0 ? 'IN' : 'US', |
|---|
| | | pageNum: this.pageNum, |
|---|
| | | pageSize: this.pageSize |
|---|
| | | } |
|---|
| | | let data = await api.getchicang(opt) |
|---|
| | | if (data.status === 0) { |
|---|
| | | this.cclist = data.data.list |
|---|
| | | } else { |
|---|
| | | Toast(data.msg) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | getrenjiao(val) { |
|---|
| | | MessageBox.confirm(this.$t('hj251') + '?', this.$t('hj165'), { |
|---|
| | | confirmButtonText: this.$t('hj161'), |
|---|
| | | cancelButtonText: this.$t('hj106') |
|---|
| | | }).then(async () => { |
|---|
| | | let opt = { |
|---|
| | | id: val |
|---|
| | | } |
|---|
| | | let data = await api.submitSubscribe(opt) |
|---|
| | | if (data.status === 0) { |
|---|
| | | Toast(data.msg) |
|---|
| | | this.finishedXg = false |
|---|
| | | this.getNewXg() |
|---|
| | | this.getUserInfo() |
|---|
| | | } else { |
|---|
| | | Toast(data.msg) |
|---|
| | | } |
|---|
| | | }).catch(() => { |
|---|
| | | import card from "./Warehouse/card.vue"; |
|---|
| | | import itemCard from "./Warehouse/item.card.vue"; |
|---|
| | | import dataList from "./Warehouse/data.list.vue"; |
|---|
| | | |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | getpingcang(val) { |
|---|
| | | if (!this.$store.state.userInfo.idCard) { |
|---|
| | | Toast(this.$t('hj138')) |
|---|
| | | this.$router.push('/authentication') |
|---|
| | | return |
|---|
| | | } |
|---|
| | | if (this.titleIndex === 0) { |
|---|
| | | // 沪深京 |
|---|
| | | MessageBox.confirm(this.$t('hj139') + '?', this.$t('hj165'), { |
|---|
| | | confirmButtonText: this.$t('hj161'), |
|---|
| | | cancelButtonText: this.$t('hj106') |
|---|
| | | }).then(async () => { |
|---|
| | | let opt = { |
|---|
| | | positionSn: val |
|---|
| | | } |
|---|
| | | let data = await api.sell(opt) |
|---|
| | | if (data.status === 0) { |
|---|
| | | Toast(data.msg) |
|---|
| | | |
|---|
| | | // 沪深京持仓 |
|---|
| | | this.finished = false |
|---|
| | | this.getListDetail() |
|---|
| | | this.tabsPositionNumArr = [] |
|---|
| | | // 沪深京平仓 |
|---|
| | | this.finisheds = false |
|---|
| | | this.tabsPcArr = [] |
|---|
| | | this.getListDetails() |
|---|
| | | } else if (data.msg.indexOf('不在交易时段内') > -1) { |
|---|
| | | Toast(this.$t('hj140')) |
|---|
| | | } else { |
|---|
| | | Toast(data.msg) |
|---|
| | | } |
|---|
| | | }).catch(() => { |
|---|
| | | |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | // 指数 |
|---|
| | | MessageBox.confirm(this.$t('hj139') + '?', this.$t('hj165'), { |
|---|
| | | confirmButtonText: this.$t('hj161'), |
|---|
| | | cancelButtonText: this.$t('hj106') |
|---|
| | | }).then(async () => { |
|---|
| | | let opt = { |
|---|
| | | positionSn: val |
|---|
| | | } |
|---|
| | | let data = await api.sellIndex(opt) |
|---|
| | | if (data.status === 0) { |
|---|
| | | Toast(data.msg) |
|---|
| | | // 指数持仓 |
|---|
| | | this.finished = false |
|---|
| | | this.getzhishuListDetail() |
|---|
| | | this.tabsPositionNumArr = [] |
|---|
| | | // 指数平仓 |
|---|
| | | this.finisheds = false |
|---|
| | | this.tabsPcArr = [] |
|---|
| | | this.getzhishuListDetails() |
|---|
| | | } else if (data.msg.indexOf('不在交易时段内') > -1) { |
|---|
| | | Toast(this.$t('hj140')) |
|---|
| | | } else { |
|---|
| | | Toast(data.msg) |
|---|
| | | } |
|---|
| | | }).catch(() => { |
|---|
| | | |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onLoad() { |
|---|
| | | // 持仓 |
|---|
| | | this.page++ |
|---|
| | | switch (this.titleIndex) { |
|---|
| | | case 0: |
|---|
| | | // 沪深京持仓 |
|---|
| | | this.getListDetail() |
|---|
| | | break |
|---|
| | | case 1: |
|---|
| | | // 指数持仓 |
|---|
| | | this.getzhishuListDetail() |
|---|
| | | break |
|---|
| | | |
|---|
| | | default: |
|---|
| | | break |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onLoads() { |
|---|
| | | // 平仓 |
|---|
| | | this.pages++ |
|---|
| | | switch (this.titleIndex) { |
|---|
| | | case 0: |
|---|
| | | // 沪深京平仓 |
|---|
| | | this.getListDetails() |
|---|
| | | break |
|---|
| | | case 1: |
|---|
| | | // 指数平仓 |
|---|
| | | this.getzhishuListDetails() |
|---|
| | | break |
|---|
| | | default: |
|---|
| | | break |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onLoadss() { |
|---|
| | | this.pagess++ |
|---|
| | | switch (this.titleIndex) { |
|---|
| | | case 1: |
|---|
| | | this.getorderList() |
|---|
| | | break |
|---|
| | | default: |
|---|
| | | break |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onLoadXg() { |
|---|
| | | // this.getNewXg(); |
|---|
| | | }, |
|---|
| | | async gdClose(item) { |
|---|
| | | let opts = { |
|---|
| | | id: item.id |
|---|
| | | } |
|---|
| | | let data = await api.delGuaDan(opts) |
|---|
| | | if (data.status === 1) { |
|---|
| | | Toast(this.$t('hj137')) |
|---|
| | | this.page = 1 |
|---|
| | | this.pages = 1 |
|---|
| | | this.finished = false |
|---|
| | | this.finisheds = false |
|---|
| | | this.finishedss = false |
|---|
| | | this.tabsPositionNumArr = [] |
|---|
| | | this.tabsPcArr = [] |
|---|
| | | this.tabsOrderList = [] |
|---|
| | | switch (this.titleIndex) { |
|---|
| | | case 0: |
|---|
| | | this.titleName = this.$t('hj114') |
|---|
| | | this.getListDetail() |
|---|
| | | this.getListDetails() |
|---|
| | | this.getorderList() |
|---|
| | | break |
|---|
| | | case 1: |
|---|
| | | this.titleName = this.$t('hj115') |
|---|
| | | this.getzhishuListDetail() |
|---|
| | | this.getzhishuListDetails() |
|---|
| | | this.getorderList() |
|---|
| | | break |
|---|
| | | case 2: |
|---|
| | | this.titleName = this.$t('hj116') |
|---|
| | | |
|---|
| | | // this.getQhListDetail(); |
|---|
| | | // this.getQhListDetails(); |
|---|
| | | this.getorderList() |
|---|
| | | break |
|---|
| | | default: |
|---|
| | | break |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | Toast(data.msg) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | clickzj(e) { |
|---|
| | | console.log(e); |
|---|
| | | this.zjtype = e |
|---|
| | | this.newchicang() |
|---|
| | | }, |
|---|
| | | zcsg(item) { |
|---|
| | | this.$router.push({ |
|---|
| | | path: '/trading-list', |
|---|
| | | query: { |
|---|
| | | listid: 5 |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | SetTitleIndex(index) { |
|---|
| | | // 账户选项卡 |
|---|
| | | this.titleIndex = index |
|---|
| | | this.page = 1 |
|---|
| | | this.pages = 1 |
|---|
| | | this.finished = false |
|---|
| | | this.finisheds = false |
|---|
| | | this.finishedss = false |
|---|
| | | this.tabsPositionNumArr = [] |
|---|
| | | this.tabsPcArr = [] |
|---|
| | | this.tabsOrderList = [] |
|---|
| | | switch (index) { |
|---|
| | | case 0: |
|---|
| | | this.titleName = this.$t('hj114') |
|---|
| | | this.getListDetail() |
|---|
| | | this.getListDetails() |
|---|
| | | this.getorderList() |
|---|
| | | this.handleTabsClick('', 0) |
|---|
| | | break |
|---|
| | | case 1: |
|---|
| | | this.titleName = this.$t('hj115') |
|---|
| | | this.getzhishuListDetail() |
|---|
| | | this.getzhishuListDetails() |
|---|
| | | this.getorderList() |
|---|
| | | this.handleTabsClick('', 0) |
|---|
| | | break |
|---|
| | | case 2: |
|---|
| | | this.totalss = 0 |
|---|
| | | this.totals = 0 |
|---|
| | | this.total = 0 |
|---|
| | | this.titleName = this.$t('hj116') |
|---|
| | | this.handleTabsClick('', 3) |
|---|
| | | // this.getQhListDetail(); |
|---|
| | | // this.getQhListDetails(); |
|---|
| | | // this.getorderList(); |
|---|
| | | break |
|---|
| | | default: |
|---|
| | | break |
|---|
| | | } |
|---|
| | | this.titleDialog = false |
|---|
| | | if (navigator.vibrate) { |
|---|
| | | // 支持 |
|---|
| | | navigator.vibrate([55]) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | handleTabsClick(item, index) { |
|---|
| | | // 持仓已平仓选项卡 |
|---|
| | | this.tabsCurrentIndex = index |
|---|
| | | if (index === 3) { |
|---|
| | | this.finishedXg = false |
|---|
| | | this.getNewXg() |
|---|
| | | } |
|---|
| | | if (navigator.vibrate) { |
|---|
| | | // 支持 |
|---|
| | | navigator.vibrate([55]) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | handleOpenDialog() { |
|---|
| | | this.titleDialog = !this.titleDialog |
|---|
| | | }, |
|---|
| | | // 挂单 |
|---|
| | | async getorderList() { |
|---|
| | | let opts = {} |
|---|
| | | let data = await api.getorderList(opts) |
|---|
| | | this.loadingss = false |
|---|
| | | if (data.status === 0) { |
|---|
| | | data.data.forEach(element => { |
|---|
| | | this.tabsOrderList.push(element) |
|---|
| | | }) |
|---|
| | | this.totalss = data.data.length |
|---|
| | | this.finishedss = true // 只有一页，所以锁住翻页。有需要刷新数据的时候在调用方法前重新解锁 |
|---|
| | | } else { |
|---|
| | | Toast(data.msg) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | typeclick(e) { |
|---|
| | | console.log(e); |
|---|
| | | this.typeindex = e |
|---|
| | | this.newchicang() |
|---|
| | | }, |
|---|
| | | async getIndexSettingInfo() { |
|---|
| | | // 网站设置信息 指数 |
|---|
| | | let data = await api.getIndexSetting() |
|---|
| | | if (data.status === 0) { |
|---|
| | | // 成功 |
|---|
| | | this.indexSettingInfo = data.data |
|---|
| | | } else { |
|---|
| | | Toast(data.msg) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | async getFuturesSetting() { |
|---|
| | | // 网站设置信息 期货 |
|---|
| | | let data = await api.getFuturesSetting() |
|---|
| | | if (data.status === 0) { |
|---|
| | | // 成功 |
|---|
| | | this.futuresSettingInfo = data.data |
|---|
| | | } else { |
|---|
| | | Toast(data.msg) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | async getSettingInfo() { |
|---|
| | | let data = await api.getSetting() |
|---|
| | | if (data.status === 0) { |
|---|
| | | // 成功 |
|---|
| | | this.settingInfo = data.data |
|---|
| | | } else { |
|---|
| | | Toast(data.msg) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | async getUserInfo() { |
|---|
| | | // 获取用户信息 |
|---|
| | | // let showcookie = this.getCookie('USER_TOKEN'); |
|---|
| | | let data = await api.getUserInfo() |
|---|
| | | if (data.status === 0) { |
|---|
| | | // this.getProductSetting() |
|---|
| | | this.$store.state.userInfo = data.data |
|---|
| | | } else { |
|---|
| | | Toast(data.msg) |
|---|
| | | } |
|---|
| | | this.$store.state.user = this.user |
|---|
| | | }, |
|---|
| | | async getListDetail() { |
|---|
| | | // 获取沪深我的持仓列表 |
|---|
| | | this.loading = true |
|---|
| | | let opt = { |
|---|
| | | state: 0, |
|---|
| | | stockCode: '', // 代码 |
|---|
| | | stockSpell: '', // 简拼 |
|---|
| | | pageNum: this.page, |
|---|
| | | pageSize: 15 |
|---|
| | | } |
|---|
| | | let data = await api.getOrderList(opt) |
|---|
| | | this.loading = false |
|---|
| | | if (data.status === 0) { |
|---|
| | | if (data.data.list.length < 15) { |
|---|
| | | this.finished = true |
|---|
| | | } |
|---|
| | | data.data.list.forEach(element => { |
|---|
| | | this.tabsPositionNumArr.push(element) |
|---|
| | | }) |
|---|
| | | this.total = data.data.total |
|---|
| | | } else { |
|---|
| | | Toast(data.msg) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | async getzhishuListDetail() { |
|---|
| | | // 获取指数持仓 |
|---|
| | | this.loading = true |
|---|
| | | let opt = { |
|---|
| | | state: 0, |
|---|
| | | stockCode: '', // 代码 |
|---|
| | | stockSpell: '', // 简拼 |
|---|
| | | pageNum: this.pageNum, |
|---|
| | | pageSize: this.pageSize |
|---|
| | | } |
|---|
| | | let data = await api.getIndexOrderList(opt) |
|---|
| | | this.loading = false |
|---|
| | | if (data.status === 0) { |
|---|
| | | if (data.data.list.length < 15) { |
|---|
| | | this.finished = true |
|---|
| | | } |
|---|
| | | data.data.list.forEach(element => { |
|---|
| | | this.tabsPositionNumArr.push(element) |
|---|
| | | }) |
|---|
| | | this.total = data.data.total |
|---|
| | | } else { |
|---|
| | | Toast(data.msg) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | async getQhListDetail() { |
|---|
| | | // 获取期货持仓 |
|---|
| | | this.loading = true |
|---|
| | | let opt = { |
|---|
| | | state: 0, |
|---|
| | | fnCode: '', // 代码 |
|---|
| | | fnName: '', // 简拼 |
|---|
| | | pageNum: this.pageNum, |
|---|
| | | pageSize: this.pageSize |
|---|
| | | } |
|---|
| | | let data = await api.getFuturesOrderList(opt) |
|---|
| | | this.loading = false |
|---|
| | | if (data.status === 0) { |
|---|
| | | if (data.data.list.length < 15) { |
|---|
| | | this.finished = true |
|---|
| | | } |
|---|
| | | data.data.list.forEach(element => { |
|---|
| | | this.tabsPositionNumArr.push(element) |
|---|
| | | }) |
|---|
| | | this.total = data.data.total |
|---|
| | | } else { |
|---|
| | | Toast(data.msg) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | async getListDetails() { |
|---|
| | | // 获取沪深我的平仓列表 |
|---|
| | | this.loadings = true |
|---|
| | | let opt = { |
|---|
| | | state: 1, |
|---|
| | | stockCode: '', // 代码 |
|---|
| | | stockSpell: '', // 简拼 |
|---|
| | | pageNum: this.pages, |
|---|
| | | pageSize: 15 |
|---|
| | | } |
|---|
| | | let data = await api.getOrderList(opt) |
|---|
| | | this.loadings = false |
|---|
| | | if (data.status === 0) { |
|---|
| | | if (data.data.list.length < 15) { |
|---|
| | | this.finisheds = true |
|---|
| | | } |
|---|
| | | data.data.list.forEach(element => { |
|---|
| | | this.tabsPcArr.push(element) |
|---|
| | | }) |
|---|
| | | this.totals = data.data.total |
|---|
| | | } else { |
|---|
| | | Toast(data.msg) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | async getzhishuListDetails() { |
|---|
| | | // 获取指数平仓 |
|---|
| | | this.loadings = true |
|---|
| | | let opt = { |
|---|
| | | state: 1, |
|---|
| | | stockCode: '', // 代码 |
|---|
| | | stockSpell: '', // 简拼 |
|---|
| | | pageNum: this.pageNum, |
|---|
| | | pageSize: 15 |
|---|
| | | } |
|---|
| | | let data = await api.getIndexOrderList(opt) |
|---|
| | | this.loadings = false |
|---|
| | | if (data.data.list.length < 15) { |
|---|
| | | this.finisheds = true |
|---|
| | | } |
|---|
| | | if (data.status === 0) { |
|---|
| | | data.data.list.forEach(element => { |
|---|
| | | this.tabsPcArr.push(element) |
|---|
| | | }) |
|---|
| | | this.totals = data.data.total |
|---|
| | | } else { |
|---|
| | | Toast(data.msg) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | async getQhListDetails() { |
|---|
| | | // 获取期货平仓 |
|---|
| | | this.loadings = true |
|---|
| | | let opt = { |
|---|
| | | state: 1, |
|---|
| | | fnCode: '', // 代码 |
|---|
| | | fnName: '', // 简拼 |
|---|
| | | pageNum: this.pageNum, |
|---|
| | | pageSize: this.pageSize |
|---|
| | | } |
|---|
| | | let data = await api.getFuturesOrderList(opt) |
|---|
| | | this.loadings = false |
|---|
| | | if (data.status === 0) { |
|---|
| | | if (data.data.list.length < 15) { |
|---|
| | | this.finisheds = true |
|---|
| | | } |
|---|
| | | data.data.list.forEach(element => { |
|---|
| | | this.tabsPcArr.push(element) |
|---|
| | | }) |
|---|
| | | this.totals = data.data.total |
|---|
| | | } else { |
|---|
| | | Toast(data.msg) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | async getNewXg() { |
|---|
| | | // 获取新股 |
|---|
| | | this.loadingXg = true |
|---|
| | | let opt = {} |
|---|
| | | let data = await api.getUserNewGuList(opt) |
|---|
| | | this.loadingXg = false |
|---|
| | | if (data.status === 0) { |
|---|
| | | this.tabsXgArr = data.data |
|---|
| | | // data.data.list.forEach(element => { |
|---|
| | | // this.tabsXgArr.push(element) |
|---|
| | | // }) |
|---|
| | | this.xgTotal = data.data.length |
|---|
| | | this.finishedXg = true // 只有一页，所以锁住翻页。有需要刷新数据的时候在调用方法前重新解锁 |
|---|
| | | } else { |
|---|
| | | Toast(data.msg) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | filters: { |
|---|
| | | gettime(time) { |
|---|
| | | if (!time) { |
|---|
| | | return '' |
|---|
| | | } |
|---|
| | | var nd = new Date(time) |
|---|
| | | var y = nd.getFullYear() |
|---|
| | | var mm = nd.getMonth() + 1 |
|---|
| | | var d = nd.getDate() |
|---|
| | | var h = nd.getHours() |
|---|
| | | var m = nd.getMinutes() |
|---|
| | | var c = nd.getSeconds() |
|---|
| | | if (mm < 10) { |
|---|
| | | mm = '0' + mm |
|---|
| | | } |
|---|
| | | if (d < 10) { |
|---|
| | | d = '0' + d |
|---|
| | | } |
|---|
| | | if (h < 10) { |
|---|
| | | h = '0' + h |
|---|
| | | } |
|---|
| | | if (m < 10) { |
|---|
| | | m = '0' + m |
|---|
| | | } |
|---|
| | | if (c < 10) { |
|---|
| | | c = '0' + c |
|---|
| | | } |
|---|
| | | // 17:35:2922-06-2022 |
|---|
| | | // return y + '/' + mm + '/' + d + ' ' + h + ':' + m + ':' + c |
|---|
| | | return mm + '/' + d + '/' + y + ' ' + h + ':' + m + ':' + c |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | export default { |
|---|
| | | components: { card, itemCard, dataList }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | actives: "1", |
|---|
| | | active: "1", |
|---|
| | | activeObj: {}, |
|---|
| | | tabsArr: [ |
|---|
| | | { |
|---|
| | | title: "总资产", |
|---|
| | | name: "1", |
|---|
| | | bgc: "rgb(8, 82, 196)", |
|---|
| | | laber: "USD", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: this.$t("mggs"), |
|---|
| | | name: "2", |
|---|
| | | bgc: "rgb(12, 175, 226)", |
|---|
| | | laber: "USD", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: this.$t("ydgs"), |
|---|
| | | name: "3", |
|---|
| | | bgc: "rgb(255, 91, 150)", |
|---|
| | | laber: "THB", |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | onClick(e) { |
|---|
| | | console.log(e); |
|---|
| | | this.active = e.name; |
|---|
| | | this.activeObj = e; |
|---|
| | | // console.log(e); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped lang="less"> |
|---|
| | | /deep/ .mint-msgbox-title { |
|---|
| | | font-size: 0.4rem !important; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .pingbtn { |
|---|
| | | width: auto !important; |
|---|
| | | height: auto !important; |
|---|
| | | background: rgb(45, 106, 233); |
|---|
| | | color: rgb(255, 255, 255); |
|---|
| | | padding: 0.2rem 0.4rem; |
|---|
| | | border-radius: 0.2rem !important; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .pink { |
|---|
| | | color: #eb2f96; |
|---|
| | | background: #fff0f6; |
|---|
| | | border-color: #ffadd2; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .red { |
|---|
| | | color: #f5222d; |
|---|
| | | background: #fff1f0; |
|---|
| | | border-color: #ffa39e; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .blue { |
|---|
| | | color: #1890ff; |
|---|
| | | background: #e6f7ff; |
|---|
| | | border-color: #91d5ff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .green { |
|---|
| | | color: #52c41a; |
|---|
| | | background: #f6ffed; |
|---|
| | | border-color: #b7eb8f; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .purple { |
|---|
| | | color: #722ed1; |
|---|
| | | background: #f9f0ff; |
|---|
| | | border-color: #d3adf7; |
|---|
| | | } |
|---|
| | | |
|---|
| | | @boxCenter: { |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | ; |
|---|
| | | @topCardColor: #bdbdbd; |
|---|
| | | |
|---|
| | | .warehouse_page { |
|---|
| | | width: 100%; |
|---|
| | | height: calc(100% - 1.2974rem); |
|---|
| | | background: linear-gradient(to bottom, #3160FD, #ffffff); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .top_title.active { |
|---|
| | | height: 6.5rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .top_title { |
|---|
| | | width: 100%; |
|---|
| | | height: 0.9231rem; |
|---|
| | | position: absolute; |
|---|
| | | top: 0.6rem; |
|---|
| | | z-index: 10; |
|---|
| | | overflow: hidden; |
|---|
| | | transition: all 0.3s; |
|---|
| | | padding: 0 .3rem; |
|---|
| | | |
|---|
| | | .titles { |
|---|
| | | width: 100%; |
|---|
| | | height: 0.9231rem; |
|---|
| | | display: flex; |
|---|
| | | padding: 0 0.1rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .left_title, |
|---|
| | | .right_box { |
|---|
| | | // width: 50%; |
|---|
| | | height: 100%; |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title { |
|---|
| | | width: auto; |
|---|
| | | height: 100%; |
|---|
| | | font-size: 0.4897rem; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | |
|---|
| | | span { |
|---|
| | | font-size: 0.4897rem; |
|---|
| | | font-weight: 600; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .img { |
|---|
| | | // width: 40%; |
|---|
| | | height: 100%; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | |
|---|
| | | img { |
|---|
| | | width: 0.6rem; |
|---|
| | | height: 0.6rem; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .top_class_box_right { |
|---|
| | | font-size: 0.4rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .click_box_rightclick { |
|---|
| | | margin-right: 10px; |
|---|
| | | // font-size: 10px; |
|---|
| | | font-size: 0.4rem; |
|---|
| | | color: #409eff; |
|---|
| | | padding: 8px 12px; |
|---|
| | | border-radius: 12px; |
|---|
| | | border: 0.5px solid #409eff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .search { |
|---|
| | | width: 100%; |
|---|
| | | height: 1rem; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | padding: 0 0.3rem; |
|---|
| | | position: relative; |
|---|
| | | top: 10px; |
|---|
| | | background-color: #fff; |
|---|
| | | z-index: 3000; |
|---|
| | | |
|---|
| | | .search_content { |
|---|
| | | width: 100%; |
|---|
| | | height: 90%; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .left_search { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | background: #f6f6f6; |
|---|
| | | border-radius: 100px; |
|---|
| | | display: flex; |
|---|
| | | |
|---|
| | | .search_img { |
|---|
| | | width: 1rem; |
|---|
| | | height: 100%; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | |
|---|
| | | img { |
|---|
| | | width: 0.5rem; |
|---|
| | | height: 0.5rem; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .search_input { |
|---|
| | | width: 100%; |
|---|
| | | overflow: hidden; |
|---|
| | | height: 100%; |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .right_search_class { |
|---|
| | | width: 13%; |
|---|
| | | height: 100%; |
|---|
| | | display: flex; |
|---|
| | | justify-content: flex-end; |
|---|
| | | align-items: center; |
|---|
| | | |
|---|
| | | img { |
|---|
| | | width: 0.6rem; |
|---|
| | | height: 0.6rem; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .ydy_box { |
|---|
| | | margin-top: 5px; |
|---|
| | | font-size: 0.4rem; |
|---|
| | | color: #9ea3ae; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .warehouse_card { |
|---|
| | | width: 100%; |
|---|
| | | height: calc(100% - 1rem); |
|---|
| | | position: absolute; |
|---|
| | | top: 60px; |
|---|
| | | // top: 1.5231rem; |
|---|
| | | z-index: 100; |
|---|
| | | padding: 0 0.3333rem; |
|---|
| | | // background: rgb(242, 243, 247); |
|---|
| | | |
|---|
| | | .top_card { |
|---|
| | | width: 100%; |
|---|
| | | // height: 4.2308rem; |
|---|
| | | border-radius: 0.15rem; |
|---|
| | | margin-top: 0.3rem; |
|---|
| | | background: #fff; |
|---|
| | | |
|---|
| | | .card_content { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | padding: 0.4rem; |
|---|
| | | |
|---|
| | | .t_title { |
|---|
| | | width: 100%; |
|---|
| | | height: 0.5128rem; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | font-size: 0.4rem; |
|---|
| | | |
|---|
| | | span { |
|---|
| | | font-size: 0.4rem; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .t_price { |
|---|
| | | width: 100%; |
|---|
| | | height: 0.5128rem; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: space-between; |
|---|
| | | |
|---|
| | | .price { |
|---|
| | | font-weight: 600; |
|---|
| | | font-size: 0.4246rem; |
|---|
| | | margin-top: 0.07rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .profits { |
|---|
| | | font-weight: 800; |
|---|
| | | font-size: 0.4rem; |
|---|
| | | color: #dd2c34; |
|---|
| | | margin-top: 0.2rem; |
|---|
| | | margin-left: 0.2rem; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .balance { |
|---|
| | | width: 100%; |
|---|
| | | height: 0.3846rem; |
|---|
| | | margin-top: 0.428rem; |
|---|
| | | display: flex; |
|---|
| | | font-size: 0.4rem; |
|---|
| | | |
|---|
| | | >div { |
|---|
| | | width: 50%; |
|---|
| | | height: 100%; |
|---|
| | | color: @topCardColor; |
|---|
| | | font-size: 0.4rem; |
|---|
| | | |
|---|
| | | span { |
|---|
| | | font-weight: 600; |
|---|
| | | font-size: 0.4rem; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .num { |
|---|
| | | width: 100%; |
|---|
| | | height: 0.3846rem; |
|---|
| | | margin-top: 0.1rem; |
|---|
| | | display: flex; |
|---|
| | | |
|---|
| | | >div { |
|---|
| | | width: 50%; |
|---|
| | | height: 100%; |
|---|
| | | |
|---|
| | | span { |
|---|
| | | font-weight: 600; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .right_margin { |
|---|
| | | |
|---|
| | | span { |
|---|
| | | font-weight: normal !important; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .margin { |
|---|
| | | width: 100%; |
|---|
| | | height: 0.3846rem; |
|---|
| | | margin-top: 0.428rem; |
|---|
| | | display: flex; |
|---|
| | | |
|---|
| | | >div { |
|---|
| | | width: 50%; |
|---|
| | | height: 100%; |
|---|
| | | color: @topCardColor; |
|---|
| | | |
|---|
| | | span { |
|---|
| | | font-weight: 600; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .prices { |
|---|
| | | width: 100%; |
|---|
| | | height: 0.3846rem; |
|---|
| | | margin-top: 0.1rem; |
|---|
| | | display: flex; |
|---|
| | | |
|---|
| | | >div { |
|---|
| | | width: 50%; |
|---|
| | | height: 100%; |
|---|
| | | |
|---|
| | | span { |
|---|
| | | font-weight: 600; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .over { |
|---|
| | | width: 100%; |
|---|
| | | height: calc(100% - 0.7179rem); |
|---|
| | | overflow: auto; |
|---|
| | | padding: 0 0.3rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tabs_card { |
|---|
| | | width: 100%; |
|---|
| | | height: calc(100% - 4.24rem - 4rem - 0.6rem); |
|---|
| | | margin-top: 0.3rem; |
|---|
| | | background: #fff; |
|---|
| | | border-radius: 0.2rem; |
|---|
| | | padding-top: 0.15rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .over::-webkit-scrollbar { |
|---|
| | | display: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .click_box { |
|---|
| | | margin-top: 10px; |
|---|
| | | width: 100%; |
|---|
| | | border-radius: 0.15rem; |
|---|
| | | height: 60px; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | background-color: #fff; |
|---|
| | | font-size: 0.4rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .click_box_left { |
|---|
| | | width: 50%; |
|---|
| | | text-align: center; |
|---|
| | | color: rgb(64, 158, 255); |
|---|
| | | position: relative; |
|---|
| | | font-size: 0.4rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .click_box_g { |
|---|
| | | position: absolute; |
|---|
| | | width: 20px; |
|---|
| | | height: 4px; |
|---|
| | | left: 2.07037rem; |
|---|
| | | bottom: -10px; |
|---|
| | | background-color: #3460F6; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .click_box_right { |
|---|
| | | font-size: 0.4rem; |
|---|
| | | position: relative; |
|---|
| | | text-align: center; |
|---|
| | | width: 50%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tabs_card_content { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | |
|---|
| | | .tabs_top_title { |
|---|
| | | width: 100%; |
|---|
| | | height: 1rem; |
|---|
| | | border-bottom: 0.01rem solid #ececec; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | font-size: 0.4103rem; |
|---|
| | | padding: 0.2rem 0.3rem 0; |
|---|
| | | justify-content: space-between; |
|---|
| | | overflow-x: scroll; |
|---|
| | | background-color: #F2F3F7; |
|---|
| | | |
|---|
| | | &::-webkit-scrollbar { |
|---|
| | | display: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | >div { |
|---|
| | | // width: 20%; |
|---|
| | | height: 100%; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | white-space: nowrap; |
|---|
| | | padding: 0 0.3rem; |
|---|
| | | |
|---|
| | | span { |
|---|
| | | display: inline-block; |
|---|
| | | height: 100%; |
|---|
| | | font-weight: 550; |
|---|
| | | // line-height: 0.7179rem; |
|---|
| | | text-align: center; |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | span.active { |
|---|
| | | color: rgb(62, 121, 226); |
|---|
| | | text-align: center; |
|---|
| | | // border-bottom: 0.1rem solid rgb(62, 121, 226); |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | span.active::after { |
|---|
| | | content: ''; |
|---|
| | | width: 80%; |
|---|
| | | |
|---|
| | | height: 0.001rem; |
|---|
| | | display: block; |
|---|
| | | margin: 0 auto; |
|---|
| | | margin-top: 0.3rem; |
|---|
| | | border-bottom: 0.06rem solid rgb(62, 121, 226); |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tabs_o { |
|---|
| | | width: 100%; |
|---|
| | | margin-top: 0.3rem; |
|---|
| | | |
|---|
| | | >.tabs_o_items { |
|---|
| | | width: 100%; |
|---|
| | | // height: 2.2rem; |
|---|
| | | position: relative; |
|---|
| | | border-bottom: 0.01rem solid #ececec; |
|---|
| | | // margin-bottom: 0.1rem; |
|---|
| | | padding: 0.3rem 0; |
|---|
| | | |
|---|
| | | .tabs_o_title { |
|---|
| | | width: 100%; |
|---|
| | | // height: 0.7179rem; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: space-between; |
|---|
| | | |
|---|
| | | span { |
|---|
| | | display: inline-block; |
|---|
| | | margin-right: 0.2rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title { |
|---|
| | | font-weight: 600; |
|---|
| | | font-size: 0.4059rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .buy_to_sell { |
|---|
| | | |
|---|
| | | width: 80px; |
|---|
| | | text-align: center; |
|---|
| | | padding: 0.08rem 0.1rem; |
|---|
| | | |
|---|
| | | font-weight: 600; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .multiple { |
|---|
| | | padding: 0.08rem 0.1rem; |
|---|
| | | background: rgb(236, 243, 252); |
|---|
| | | color: rgb(42, 108, 230); |
|---|
| | | font-weight: 600; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .nums { |
|---|
| | | color: @topCardColor; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .center_price { |
|---|
| | | width: 100%; |
|---|
| | | // height: 0.3846rem; |
|---|
| | | justify-content: space-between; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | margin-top: 0.3rem; |
|---|
| | | |
|---|
| | | >div { |
|---|
| | | // width: 28%; |
|---|
| | | height: 100%; |
|---|
| | | |
|---|
| | | span { |
|---|
| | | font-weight: 600; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .profit .lv { |
|---|
| | | color: #27ab63; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .profit .red { |
|---|
| | | color: #ff0000; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .bottom_price_title { |
|---|
| | | width: 100%; |
|---|
| | | // height: 0.4rem; |
|---|
| | | margin-top: 0.2rem; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: space-between; |
|---|
| | | font-size: 0.4rem; |
|---|
| | | |
|---|
| | | >div { |
|---|
| | | height: 100%; |
|---|
| | | color: @topCardColor; |
|---|
| | | |
|---|
| | | span { |
|---|
| | | font-weight: 600; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .waiting { |
|---|
| | | width: 100%; |
|---|
| | | margin-top: 0.3rem; |
|---|
| | | position: relative; |
|---|
| | | |
|---|
| | | .waiting_box { |
|---|
| | | width: 100%; |
|---|
| | | height: 4rem; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | margin-top: 1rem; |
|---|
| | | |
|---|
| | | >div { |
|---|
| | | width: 60%; |
|---|
| | | height: 100%; |
|---|
| | | |
|---|
| | | img { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .gd { |
|---|
| | | display: inline-block; |
|---|
| | | width: 100%; |
|---|
| | | text-align: center; |
|---|
| | | color: rgb(133, 133, 133); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .trading { |
|---|
| | | width: 100%; |
|---|
| | | height: 2rem; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | |
|---|
| | | span { |
|---|
| | | display: inline-block; |
|---|
| | | width: 4.1026rem; |
|---|
| | | height: 1.0256rem; |
|---|
| | | background: #f7f7f7; |
|---|
| | | color: #3773dd; |
|---|
| | | font-weight: 600; |
|---|
| | | font-size: 0.4615rem; |
|---|
| | | text-align: center; |
|---|
| | | line-height: 1.0256rem; |
|---|
| | | border-radius: 0.2rem; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .right_btn { |
|---|
| | | width: 1.9949rem; |
|---|
| | | height: 0.6667rem; |
|---|
| | | // line-height: 0.6667rem; |
|---|
| | | // position: absolute; |
|---|
| | | right: 1%; |
|---|
| | | top: 27%; |
|---|
| | | // background: #f7f7f7; |
|---|
| | | // color: #3773dd; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | border-radius: 0.15rem; |
|---|
| | | |
|---|
| | | span { |
|---|
| | | font-weight: 600; |
|---|
| | | font-size: 0.4rem; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .right_count { |
|---|
| | | width: 1.7949rem; |
|---|
| | | height: 0.6667rem; |
|---|
| | | position: absolute; |
|---|
| | | right: 1%; |
|---|
| | | top: 20%; |
|---|
| | | |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | border-radius: 0.3rem; |
|---|
| | | |
|---|
| | | span { |
|---|
| | | font-weight: 600; |
|---|
| | | font-size: 0.4rem; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .profit_res { |
|---|
| | | width: 100% !important; |
|---|
| | | margin-top: .2rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .oes { |
|---|
| | | // height: 1.5rem !important; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dialog { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | position: absolute; |
|---|
| | | top: 0; |
|---|
| | | background: rgba(0, 0, 0, .5); |
|---|
| | | z-index: 9; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .overflow_box { |
|---|
| | | width: 100%; |
|---|
| | | height: 1.5rem; |
|---|
| | | border-radius: .2rem; |
|---|
| | | padding: 0 .3rem; |
|---|
| | | margin: .3rem 0; |
|---|
| | | background: #fff; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: space-between; |
|---|
| | | |
|---|
| | | >div { |
|---|
| | | height: 50%; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .left_titles { |
|---|
| | | color: rgb(129, 131, 133); |
|---|
| | | font-size: 0.4rem; |
|---|
| | | |
|---|
| | | span { |
|---|
| | | font-weight: normal !important; |
|---|
| | | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .right_price { |
|---|
| | | color: rgb(128, 135, 145); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .top_class_box_left { |
|---|
| | | color: #fff; |
|---|
| | | border-radius: 50px; |
|---|
| | | background: #409eff; |
|---|
| | | font-size: 0.4rem; |
|---|
| | | padding: 4px 12px; |
|---|
| | | height: 40px; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .kuan { |
|---|
| | | width: auto !important; |
|---|
| | | // padding-left: 0.5rem; |
|---|
| | | letter-spacing: 0.02rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .kuans { |
|---|
| | | width: auto !important; |
|---|
| | | padding-left: 0.5rem; |
|---|
| | | letter-spacing: 0.02rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .left_price { |
|---|
| | | font-weight: normal; |
|---|
| | | font-size: 0.4rem; |
|---|
| | | |
|---|
| | | span { |
|---|
| | | font-size: 0.4rem; |
|---|
| | | color: #000; |
|---|
| | | font-weight: 500 !important; |
|---|
| | | ; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .left_price { |
|---|
| | | font-weight: normal; |
|---|
| | | font-size: 0.4rem; |
|---|
| | | |
|---|
| | | span { |
|---|
| | | font-size: 0.4rem; |
|---|
| | | color: #000; |
|---|
| | | font-weight: 500 !important; |
|---|
| | | ; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .numDemo { |
|---|
| | | font-size: 0.3rem; |
|---|
| | | color: #000; |
|---|
| | | font-weight: 500 !important; |
|---|
| | | ; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .maichu { |
|---|
| | | color: rgb(225, 57, 65); |
|---|
| | | background: rgb(252, 238, 240); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .mairu { |
|---|
| | | color: rgb(109, 175, 125); |
|---|
| | | background: rgb(215, 243, 235); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .jiantou { |
|---|
| | | // position: relative; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .top_class_box { |
|---|
| | | padding: 0 0.3333rem; |
|---|
| | | background: #fff; |
|---|
| | | width: 100%; |
|---|
| | | height: 50px; |
|---|
| | | border-radius: 8px; |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-around; |
|---|
| | | align-items: center; |
|---|
| | | padding: 4px 0; |
|---|
| | | box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .2); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .top_class { |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | padding: 0 0.3333rem; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .jiantou::before { |
|---|
| | | content: ''; |
|---|
| | | background-image: url('../../assets/img/youyou.png'); |
|---|
| | | background-size: 100% 100%; |
|---|
| | | width: 0.6rem; |
|---|
| | | height: 0.2rem; |
|---|
| | | font-size: 0.8rem; |
|---|
| | | position: absolute; |
|---|
| | | right: 0.5rem; |
|---|
| | | top: calc(50% - 0.15rem); |
|---|
| | | } |
|---|
| | | <style lang="less" scoped> |
|---|
| | | .ware { |
|---|
| | | overflow: hidden; |
|---|
| | | min-height: 100vh; |
|---|
| | | // padding: 0 0.4rem 0.4rem; |
|---|
| | | background-color: #fff; |
|---|
| | | } |
|---|
| | | .tabs-box { |
|---|
| | | display: flex; |
|---|
| | | overflow-x: auto; |
|---|
| | | width: 100%; /* Ensures it takes full width of the container */ |
|---|
| | | white-space: nowrap; /* Prevents text wrapping */ |
|---|
| | | background: rgb(247, 247, 250); |
|---|
| | | margin-top: 20px; |
|---|
| | | border-radius: 20px; |
|---|
| | | padding-right: 20px; |
|---|
| | | } |
|---|
| | | .tabs-box::-webkit-scrollbar { |
|---|
| | | display: none; /* Chrome, Safari, Opera */ |
|---|
| | | } |
|---|
| | | .tabs-item { |
|---|
| | | cursor: pointer; |
|---|
| | | flex: 0 0 auto; /* Ensures items do not grow or shrink */ |
|---|
| | | padding: 15px; /* Adjust padding as needed */ |
|---|
| | | // border: 1px solid #ccc; /* Just for demonstration, you can style as needed */ |
|---|
| | | margin-right: 10px; /* Adjust margin as needed */ |
|---|
| | | min-width: 100px; /* Minimum width for each item */ |
|---|
| | | text-align: center; |
|---|
| | | color: rgb(140, 159, 173); |
|---|
| | | font-size: 16px; |
|---|
| | | // padding: 0.10667rem 0.34667rem; |
|---|
| | | } |
|---|
| | | .tabs-item-active { |
|---|
| | | border-radius: 20px; |
|---|
| | | background: #39a08e; |
|---|
| | | // padding: 0.10667rem 0.34667rem; |
|---|
| | | color: #fff; |
|---|
| | | } |
|---|
| | | </style> |
|---|
