| | |
| | | </div> |
| | | </van-row> |
| | | <van-row gutter="20" class="but-box"> |
| | | <van-col |
| | | span="8" |
| | | v-for="item in tabList1" |
| | | :key="item.id" |
| | | @click="routerList(item)" |
| | | > |
| | | <van-col span="8" v-for="item in tabList1" :key="item.id" @click="routerList(item)"> |
| | | <div class="but">{{ item.text }}</div> |
| | | </van-col> |
| | | </van-row> |
| | | </header> |
| | | <div class="tabs"> |
| | | <div class="tabs-box"> |
| | | <div |
| | | v-for="item in tabList" |
| | | :key="item.id" |
| | | :class="`${active === item.id ? 'active-tabls' : ''}`" |
| | | @click="activeCheng(item)" |
| | | > |
| | | <div v-for="item in tabList" :key="item.id" :class="`${active === item.id ? 'active-tabls' : ''}`" |
| | | @click="activeCheng(item)"> |
| | | {{ item.text }} |
| | | </div> |
| | | </div> |
| | |
| | | <template v-if="active === 1"> |
| | | <div class="px-32 py-13 flex"> |
| | | <div class="inputBoxbg h-60 w-full rounded-full flex items-center"> |
| | | <input |
| | | style="padding-left: 10px" |
| | | type="text" |
| | | v-model="keywords" |
| | | :placeholder="$t('搜索币种')" |
| | | class="h-full flex-1 search-input border-none bg-none" |
| | | @input="onInput" |
| | | /> |
| | | <img |
| | | src="@/assets/3x/资源 22@3x.png" |
| | | alt="logo" |
| | | class="w-32 h-32 mx-16" |
| | | /> |
| | | <input style="padding-left: 10px" type="text" v-model="keywords" :placeholder="$t('搜索币种')" |
| | | class="h-full flex-1 search-input border-none bg-none" @input="onInput" /> |
| | | <img src="@/assets/3x/资源 22@3x.png" alt="logo" class="w-32 h-32 mx-16" /> |
| | | </div> |
| | | </div> |
| | | <div class="item-box" v-for="(item, index) in funds" :key="index"> |
| | |
| | | <!--永续合约持有仓位--> |
| | | <div class="px-30"> |
| | | <template v-if="active === 4"> |
| | | <PerpetualPositionList |
| | | :list-data="funds" |
| | | @sell="onRecall" |
| | | ></PerpetualPositionList> |
| | | <PerpetualPositionList :list-data="funds" @sell="onRecall"></PerpetualPositionList> |
| | | </template> |
| | | <!--交割合约持有仓位--> |
| | | <template v-if="active === 2"> |
| | |
| | | this.loading = false; |
| | | let list = res.extends; |
| | | if (this.active === 1) { |
| | | let btcindex = list.findIndex(item => item.symbol == 'btc') |
| | | if (btcindex !== -1) { |
| | | let movedElement = list.splice(btcindex, 1); |
| | | list.unshift(movedElement[0]); |
| | | } |
| | | let ethindex = list.findIndex(item => item.symbol == 'eth') |
| | | if (ethindex !== -1) { |
| | | let movedElement = list.splice(ethindex, 1); |
| | | list.splice(1, 0, movedElement[0]); |
| | | } |
| | | this.funds = list; |
| | | this.fundsDatra = list; |
| | | } |
| | |
| | | header { |
| | | // padding: 100px 0 0px; |
| | | color: #817cf6; |
| | | |
| | | .title-box { |
| | | padding: 0 70px; |
| | | } |
| | | |
| | | .but-box { |
| | | padding: 30px; |
| | | } |
| | | |
| | | .title { |
| | | font-weight: bold; |
| | | } |
| | | |
| | | .pt { |
| | | margin-top: 15px; |
| | | } |
| | | |
| | | .but { |
| | | box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05); |
| | | line-height: 80px; |
| | |
| | | margin-bottom: 30px; |
| | | } |
| | | } |
| | | |
| | | .right { |
| | | text-align: right; |
| | | } |
| | |
| | | box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05); |
| | | margin: 0 15px; |
| | | padding: 30px 30px; |
| | | |
| | | .tabs-content { |
| | | margin-top: 40px; |
| | | color: #363636; |
| | | |
| | | .tabs-name { |
| | | margin-left: 10px; |
| | | // color: #dedbe2; |
| | | } |
| | | } |
| | | |
| | | .tabs-box { |
| | | display: flex; |
| | | // color: #dedbe2; |
| | |
| | | margin: 0 15px; |
| | | padding: 30px 30px; |
| | | margin-top: 40px; |
| | | |
| | | .title-main { |
| | | color: #807cf7; |
| | | font-weight: 900; |
| | | margin-bottom: 20px; |
| | | } |
| | | |
| | | .title { |
| | | // color: #dedbe2; |
| | | margin-bottom: 10px; |
| | | } |
| | | |
| | | .text { |
| | | font-weight: 900; |
| | | } |
| | | } |
| | | } |
| | | |
| | | ::v-deep .van-loading { |
| | | text-align: center; |
| | | margin: 30px 0; |