1813 lines
60 KiB
Vue
1813 lines
60 KiB
Vue
<template>
|
||
<div class="home">
|
||
<div>福利中心</div>
|
||
<div class="mian rank" @click="
|
||
handlerank(0);
|
||
playAudio();
|
||
">
|
||
<div class="space_between mian_i">
|
||
<svg t="1708065586429" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||
p-id="3486">
|
||
<path
|
||
d="M698.508154 874.744377a39.372042 39.372042 0 0 0-37.989669-27.391473h-83.556792v-135.421393a395.768381 395.768381 0 0 1-130.019897 0v135.421393H363.513002a39.269644 39.269644 0 0 0-37.938469 27.391473l-29.669829 101.630044a36.146504 36.146504 0 0 0 6.579073 32.767369 40.49842 40.49842 0 0 0 31.359397 14.847714h356.754732a38.527258 38.527258 0 0 0 39.346443-37.631275 34.30334 34.30334 0 0 0-3.020742-14.335724l-28.313055-97.278128z m213.653487-736.241827a138.672531 138.672531 0 0 0-48.178273-3.071941V35.336536A36.172104 36.172104 0 0 0 827.01768 0.009216H197.116206a36.325701 36.325701 0 0 0-37.093686 35.32732v100.094073a138.493334 138.493334 0 0 0-48.152673 3.071941C25.47151 160.518126-20.582004 264.19613 9.036626 370.17809c25.932301 92.926211 101.066854 156.668984 177.276587 156.668984 3.865526 0 7.679852-0.51199 11.596577-0.767985 2.841545 5.887887 5.862287 11.519778 8.985427 17.15167l1.715167 3.071941c4.633511 8.191842 9.548616 15.871694 14.719717 23.551546l1.817565 2.559951q8.089444 11.903771 17.049272 23.039557l0.537589 0.51199a346.668527 346.668527 0 0 0 41.317605 42.751177l0.767985 0.767985c7.321459 6.399877 14.950112 12.543759 22.834761 18.17565l1.049579 0.767985a347.564509 347.564509 0 0 0 107.978722 53.50297h0.358393c9.88141 2.815946 19.788419 5.119901 29.900224 7.167862q15.718097 3.071941 31.820188 4.607912l0.767985 0.255995a340.166252 340.166252 0 0 0 64.792353 0l0.793585-0.255995q16.050891-1.53597 31.743388-4.607912h0.204797a342.393409 342.393409 0 0 0 138.237338-60.670832l1.07518-0.767985c7.859049-5.631892 15.487702-11.775773 22.86036-18.17565l0.742385-0.767985a355.986747 355.986747 0 0 0 58.878867-66.302724l1.766366-2.559951a367.096933 367.096933 0 0 0 25.420311-43.775157c3.865526 0.255995 7.679852 0.767985 11.596576 0.767985 76.209733 0 151.395486-63.742773 177.276588-156.668984 29.746627-105.98196-16.358085-209.659964-102.756422-231.67554z m-842.223787 216.315836c-20.300409-72.7026 6.374277-145.149206 58.18768-158.204955a70.859436 70.859436 0 0 1 31.948185-0.51199v166.652792c0 10.239803 0.51199 20.223611 1.331174 30.207418l0.281595 4.095922c0.844784 9.471818 2.09916 18.68764 3.686329 27.903463l0.844783 4.863906c1.663968 9.215823 3.66073 18.431645 5.990285 27.135478l1.126378 4.095921 1.254376 4.607911c-44.69674-6.911867-88.3183-52.222995-104.753183-110.845866z m634.534985-68.350685l-104.548388 74.750562 38.040868 118.269723a11.289383 11.289383 0 0 1-4.377516 12.543758 12.543759 12.543759 0 0 1-13.644537 0.255995L511.990144 421.377104l-107.876323 70.65464a12.210965 12.210965 0 0 1-13.721336 0 11.161385 11.161385 0 0 1-4.275118-12.543758l37.93847-118.269723-104.522788-74.750562a11.058987 11.058987 0 0 1-4.198319-12.543758 11.698975 11.698975 0 0 1 11.033387-7.679852l131.351072-2.559951 43.160769-116.989748a12.057368 12.057368 0 0 1 22.245972 0l43.160769 116.989748 131.274273 2.559951a11.545378 11.545378 0 0 1 15.974092 2.559951 11.007788 11.007788 0 0 1-2.55995 15.615699 11.724574 11.724574 0 0 1-6.604673 2.04796z m249.774392 68.350685c-16.434884 58.622872-60.005245 103.933999-104.701985 110.845866a41.138408 41.138408 0 0 0 1.254376-4.607911l1.177577-4.095921a393.336428 393.336428 0 0 0 10.521398-59.902847l0.281594-4.095922c0.819184-9.983808 1.305575-19.967616 1.305575-30.207418V196.101441a70.757038 70.757038 0 0 1 31.922586 0.51199c51.762204 13.055749 78.43689 85.502354 58.136481 158.204955z"
|
||
fill="#25F484" p-id="3487" />
|
||
</svg>
|
||
金榜题名
|
||
</div>
|
||
</div>
|
||
<div class="mian tuiguang" @click="
|
||
handlerank(1);
|
||
playAudio();
|
||
">
|
||
<div class="space_between mian_i">
|
||
<svg t="1708574010538" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||
p-id="3479">
|
||
<path
|
||
d="M859.562667 180.8a73.216 73.216 0 0 1 28.245333 96.917333l-2.026667 3.648-323.562666 546.752a94.570667 94.570667 0 0 1-19.925334 23.701334 95.424 95.424 0 0 1-130.709333-6.4l-3.285333-3.605334-29.141334-33.664-38.314666 35.946667a74.112 74.112 0 0 1-46.016 19.882667l-4.693334 0.149333c-39.466667 0-71.68-30.72-73.813333-69.418667l-0.106667-4.032v-97.642666l312.746667-253.717334a10.666667 10.666667 0 0 0-11.562667-17.770666l-337.493333 172.416-31.936-35.904-0.064-0.213334-39.381333-45.226666a94.272 94.272 0 0 1-19.413334-35.52c-14.165333-48.64 12.757333-99.413333 60.416-115.626667l4.394667-1.365333 647.594667-186.538667c19.52-5.632 40.533333-2.986667 58.026666 7.253333z"
|
||
fill="#3A97E4" p-id="3480" />
|
||
</svg>
|
||
推广福利
|
||
</div>
|
||
</div>
|
||
<!-- <div class="mian goods" @click="
|
||
handlerank(2);
|
||
playAudio();
|
||
">
|
||
|
||
</div> -->
|
||
<div class="out center" v-if="isranklist">
|
||
<div class="out_i animate__animated animate__fadeInUp" ref="outelement">
|
||
<div class="close" @click="
|
||
handleclose();
|
||
playAudio();
|
||
">
|
||
<svg t="1708136166985" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||
p-id="3537">
|
||
<path
|
||
d="M898.844444 830.577778c22.755556 17.066667 22.755556 51.2 0 73.955555s-51.2 22.755556-73.955555 0L512 591.644444l-312.888889 312.888889c-11.377778 11.377778-22.755556 17.066667-39.822222 17.066667-11.377778 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-22.755556-51.2 0-73.955555l312.888889-312.888889-307.2-318.577778c-11.377778-5.688889-17.066667-22.755556-17.066667-34.133333 0-11.377778 5.688889-28.444444 17.066667-34.133334 22.755556-22.755556 51.2-22.755556 73.955555 0L512 443.733333l312.888889-312.888889c22.755556-22.755556 51.2-22.755556 73.955555 0s22.755556 51.2 0 73.955556l-312.888888 312.888889 312.888888 312.888889z"
|
||
fill="#727477" p-id="3538" />
|
||
</svg>
|
||
</div>
|
||
<div class="out_i_t">
|
||
<div class="out_i_p">消费排行榜</div>
|
||
</div>
|
||
<!-- tab -->
|
||
<div class="out_tab2 space_around">
|
||
<div class="center btn" @click="
|
||
handletype(0);
|
||
playAudio();
|
||
" :class="type == 0 ? 'active' : ''">
|
||
今天
|
||
</div>
|
||
<div class="center btn" @click="
|
||
handletype(1);
|
||
playAudio();
|
||
" :class="type == 1 ? 'active' : ''">
|
||
昨天
|
||
</div>
|
||
<!-- <div
|
||
class="center btn"
|
||
@click="handletype(2)"
|
||
:class="type == 2 ? 'active' : ''"
|
||
>
|
||
近七日
|
||
</div> -->
|
||
<div class="center btn" @click="
|
||
handletype(2);
|
||
playAudio();
|
||
" :class="type == 2 ? 'active' : ''">
|
||
说明
|
||
</div>
|
||
<div class="cover2" :style="{ left: left + 'px' }" ref="cover"></div>
|
||
</div>
|
||
<div v-if="type == 2" class="explainbox">
|
||
<div class="explainbox_i">排行榜奖励说明</div>
|
||
<div class="space_between explainbox_ii">
|
||
<div class="mc">名次</div>
|
||
<div class="jl">奖励</div>
|
||
</div>
|
||
<div v-for="(item, index) in shuolist" :key="index">
|
||
<div class="space_between explainbox_iii">
|
||
<div class="mc">{{ item.name }}</div>
|
||
<div class="jl money-money gold_color">
|
||
<integral class="integral"></integral>
|
||
{{ item.reward }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="explainbox_iiii">
|
||
<p>当日消费奖励排名前10名玩家，次日【00：00】</p>
|
||
系统自动发送消费奖励到玩家账户。
|
||
</div>
|
||
</div>
|
||
<div class="out_list" v-else>
|
||
<div class="space_between out_list_line t">
|
||
<div class="p">排名</div>
|
||
<div class="n">玩家</div>
|
||
<div class="c">消费O币</div>
|
||
<div class="j">消费G币</div>
|
||
<div class="j">总和</div>
|
||
</div>
|
||
<div class="out_list_bg">
|
||
<div class="out_list_line space_between l" v-for="(item, index) in list" :key="index">
|
||
<div class="p">
|
||
<!-- beRank -->
|
||
<div v-if="item.ranking == 1">
|
||
<svg t="1708136543236" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="3690">
|
||
<path
|
||
d="M224 979.616a32 32 0 0 0 42.112 30.336L512 928l245.888 81.952A32 32 0 0 0 800 979.616V672H224v307.616z"
|
||
fill="#EAB449" p-id="3691" />
|
||
<path
|
||
d="M512 0l387.968 224v448L512 896 124.032 672V224L512 0z m0 110.848l291.968 168.576v337.152L512 785.152l-291.968-168.576V279.424L512 110.848z"
|
||
fill="#FFE07A" p-id="3692" />
|
||
<path
|
||
d="M512 102.4l304.832 176v352L512 806.4l-304.832-176v-352L512 102.4z m0 36.96l272.832 157.504v315.072L512 769.44l-272.832-157.504V296.864L512 139.36z"
|
||
fill="#EBC441" p-id="3693" />
|
||
<path d="M512 139.52l273.92 157.76v317.12L512 768l-273.6-153.6 0.32-317.12L512 139.52z"
|
||
fill="#FFEDB1" p-id="3694" />
|
||
<path d="M550.4 608h-127.52l42.272-247.584-52.352 6.08 10.08-57.504L604.8 288l-54.4 320z"
|
||
fill="#AD8D23" p-id="3695" />
|
||
</svg>
|
||
</div>
|
||
<div v-else-if="item.ranking == 2">
|
||
<svg t="1708136683367" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="3843">
|
||
<path
|
||
d="M224 979.616a32 32 0 0 0 42.112 30.336L512 928l245.888 81.952A32 32 0 0 0 800 979.616V672H224v307.616z"
|
||
fill="#9CA9B2" p-id="3844" />
|
||
<path d="M512 0l387.968 224v448L512 896 124.032 672V224L512 0z" fill="#E1E4E7" p-id="3845" />
|
||
<path
|
||
d="M512 0l387.968 224v448L512 896 124.032 672V224L512 0z m0 110.848l291.968 168.576v337.152L512 785.152l-291.968-168.576V279.424L512 110.848z"
|
||
fill="#DCDFE1" p-id="3846" />
|
||
<path
|
||
d="M512 102.4l304.832 176v352L512 806.4l-304.832-176v-352L512 102.4z m0 36.96l272.832 157.504v315.072L512 769.44l-272.832-157.504V296.864L512 139.36z"
|
||
fill="#BBC0C4" p-id="3847" />
|
||
<path d="M512.48 139.52L786.24 297.6v316.096l-273.76 158.048-273.76-158.08V297.6l273.76-158.048z"
|
||
fill="#E6E9EB" p-id="3848" />
|
||
<path
|
||
d="M570.624 341.344h-95.36L470.72 384H375.84l12-96H672l-24 192h-199.232l-8.992 74.656h180.288l21.472-21.312L632.032 608H381.856q-14.496 0-22.976-10.944-8.512-10.944-6.496-27.232l17.984-143.168h189.28l10.976-85.312z"
|
||
fill="#808B92" p-id="3849" />
|
||
</svg>
|
||
</div>
|
||
<div v-else-if="item.ranking == 3">
|
||
<svg t="1708136703928" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="3997">
|
||
<path
|
||
d="M224 979.616a32 32 0 0 0 42.112 30.336L512 928l245.888 81.952A32 32 0 0 0 800 979.616V672H224v307.616z"
|
||
fill="#E29369" p-id="3998" />
|
||
<path
|
||
d="M512 0l387.968 224v448L512 896 124.032 672V224L512 0z m0 110.848l291.968 168.576v337.152L512 785.152l-291.968-168.576V279.424L512 110.848z"
|
||
fill="#F4C592" p-id="3999" />
|
||
<path
|
||
d="M512 102.4l304.832 176v352L512 806.4l-304.832-176v-352L512 102.4z m0 36.96l272.832 157.504v315.072L512 769.44l-272.832-157.504V296.864L512 139.36z"
|
||
fill="#DFA257" p-id="4000" />
|
||
<path d="M512.48 139.52L786.24 297.6v316.096l-273.76 158.048-273.76-158.08V297.6l273.76-158.048z"
|
||
fill="#F6D7B0" p-id="4001" />
|
||
<path
|
||
d="M556.32 469.12h-168.384l6.4-53.44h168.384l9.344-74.816H384.96L391.36 288H672l-34.944 281.76q-1.984 16.32-13.056 27.264-11.072 10.976-24.864 10.976H352l6.88-53.44h186.592l10.848-85.44z"
|
||
fill="#C18B49" p-id="4002" />
|
||
</svg>
|
||
</div>
|
||
<div v-else>{{ item.ranking }}</div>
|
||
</div>
|
||
<div class="n space_around">
|
||
<div class="img center">
|
||
<img :src="item.avatar|fullPath" alt />
|
||
</div>
|
||
<div class="name textover-f">{{ item.nickName }}</div>
|
||
</div>
|
||
<div class="c money-money">{{ Math.abs(item.amount) || 0 }}</div>
|
||
<div class="j money-money">{{ Math.abs(item.credits) || 0 }}</div>
|
||
<div class="j money-money">{{ Math.abs(item.totalRecharge) || 0 }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="out_bottom space_between z">
|
||
<div style="width: 100%">
|
||
<div v-if="!flag" style="text-align: center">您还未上榜</div>
|
||
<div v-else>
|
||
<div style="text-align: center">您的的排名</div>
|
||
<div class="space_between out_list_line t">
|
||
<div class="p">排名</div>
|
||
<div class="n">玩家</div>
|
||
<div class="c textover-f">消费O币</div>
|
||
<div class="j textover-f">消费G币</div>
|
||
<div class="j textover-f">总和</div>
|
||
</div>
|
||
<div class="out_list_line space_between l">
|
||
<div class="p">
|
||
<div v-if="flag.beRank == 1">
|
||
<svg t="1708136543236" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="3690">
|
||
<path
|
||
d="M224 979.616a32 32 0 0 0 42.112 30.336L512 928l245.888 81.952A32 32 0 0 0 800 979.616V672H224v307.616z"
|
||
fill="#EAB449" p-id="3691" />
|
||
<path
|
||
d="M512 0l387.968 224v448L512 896 124.032 672V224L512 0z m0 110.848l291.968 168.576v337.152L512 785.152l-291.968-168.576V279.424L512 110.848z"
|
||
fill="#FFE07A" p-id="3692" />
|
||
<path
|
||
d="M512 102.4l304.832 176v352L512 806.4l-304.832-176v-352L512 102.4z m0 36.96l272.832 157.504v315.072L512 769.44l-272.832-157.504V296.864L512 139.36z"
|
||
fill="#EBC441" p-id="3693" />
|
||
<path d="M512 139.52l273.92 157.76v317.12L512 768l-273.6-153.6 0.32-317.12L512 139.52z"
|
||
fill="#FFEDB1" p-id="3694" />
|
||
<path d="M550.4 608h-127.52l42.272-247.584-52.352 6.08 10.08-57.504L604.8 288l-54.4 320z"
|
||
fill="#AD8D23" p-id="3695" />
|
||
</svg>
|
||
</div>
|
||
<div v-else-if="flag.beRank == 2">
|
||
<svg t="1708136683367" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="3843">
|
||
<path
|
||
d="M224 979.616a32 32 0 0 0 42.112 30.336L512 928l245.888 81.952A32 32 0 0 0 800 979.616V672H224v307.616z"
|
||
fill="#9CA9B2" p-id="3844" />
|
||
<path d="M512 0l387.968 224v448L512 896 124.032 672V224L512 0z" fill="#E1E4E7" p-id="3845" />
|
||
<path
|
||
d="M512 0l387.968 224v448L512 896 124.032 672V224L512 0z m0 110.848l291.968 168.576v337.152L512 785.152l-291.968-168.576V279.424L512 110.848z"
|
||
fill="#DCDFE1" p-id="3846" />
|
||
<path
|
||
d="M512 102.4l304.832 176v352L512 806.4l-304.832-176v-352L512 102.4z m0 36.96l272.832 157.504v315.072L512 769.44l-272.832-157.504V296.864L512 139.36z"
|
||
fill="#BBC0C4" p-id="3847" />
|
||
<path
|
||
d="M512.48 139.52L786.24 297.6v316.096l-273.76 158.048-273.76-158.08V297.6l273.76-158.048z"
|
||
fill="#E6E9EB" p-id="3848" />
|
||
<path
|
||
d="M570.624 341.344h-95.36L470.72 384H375.84l12-96H672l-24 192h-199.232l-8.992 74.656h180.288l21.472-21.312L632.032 608H381.856q-14.496 0-22.976-10.944-8.512-10.944-6.496-27.232l17.984-143.168h189.28l10.976-85.312z"
|
||
fill="#808B92" p-id="3849" />
|
||
</svg>
|
||
</div>
|
||
<div v-else-if="flag.beRank == 3">
|
||
<svg t="1708136703928" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="3997">
|
||
<path
|
||
d="M224 979.616a32 32 0 0 0 42.112 30.336L512 928l245.888 81.952A32 32 0 0 0 800 979.616V672H224v307.616z"
|
||
fill="#E29369" p-id="3998" />
|
||
<path
|
||
d="M512 0l387.968 224v448L512 896 124.032 672V224L512 0z m0 110.848l291.968 168.576v337.152L512 785.152l-291.968-168.576V279.424L512 110.848z"
|
||
fill="#F4C592" p-id="3999" />
|
||
<path
|
||
d="M512 102.4l304.832 176v352L512 806.4l-304.832-176v-352L512 102.4z m0 36.96l272.832 157.504v315.072L512 769.44l-272.832-157.504V296.864L512 139.36z"
|
||
fill="#DFA257" p-id="4000" />
|
||
<path
|
||
d="M512.48 139.52L786.24 297.6v316.096l-273.76 158.048-273.76-158.08V297.6l273.76-158.048z"
|
||
fill="#F6D7B0" p-id="4001" />
|
||
<path
|
||
d="M556.32 469.12h-168.384l6.4-53.44h168.384l9.344-74.816H384.96L391.36 288H672l-34.944 281.76q-1.984 16.32-13.056 27.264-11.072 10.976-24.864 10.976H352l6.88-53.44h186.592l10.848-85.44z"
|
||
fill="#C18B49" p-id="4002" />
|
||
</svg>
|
||
</div>
|
||
<div v-else>{{ flag.beRank }}</div>
|
||
</div>
|
||
<div class="n space_around">
|
||
<div class="img center">
|
||
<img :src="flag.avatar|fullPath" alt />
|
||
</div>
|
||
<div class="name textover-f">{{ flag.nickName }}</div>
|
||
</div>
|
||
<div class="c money-money textover-f">
|
||
{{ Math.abs(flag.amount) || 0 }}
|
||
</div>
|
||
<div class="j money-money textover-f">
|
||
{{ Math.abs(flag.credits) || 0 }}
|
||
</div>
|
||
<div class="j money-money textover-f">
|
||
{{ Math.abs(flag.total) || 0 }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="n space_between">
|
||
<div class="img center">
|
||
<img :src="detiallist.userdata.avatar" alt />
|
||
</div>
|
||
<div class="name">{{ detiallist.userdata.name }}</div>
|
||
</div>
|
||
<div class="c">
|
||
<span>{{ detiallist.userdata.const }}</span>
|
||
距10差
|
||
<span>{{ detiallist.userdata.gap }}</span>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="out center" v-if="isgoods">
|
||
<div class="out_i animate__animated animate__fadeInUp" ref="outelement">
|
||
<div class="close" @click="
|
||
handleclose();
|
||
playAudio();
|
||
">
|
||
<svg t="1708136166985" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||
p-id="3537">
|
||
<path
|
||
d="M898.844444 830.577778c22.755556 17.066667 22.755556 51.2 0 73.955555s-51.2 22.755556-73.955555 0L512 591.644444l-312.888889 312.888889c-11.377778 11.377778-22.755556 17.066667-39.822222 17.066667-11.377778 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-22.755556-51.2 0-73.955555l312.888889-312.888889-307.2-318.577778c-11.377778-5.688889-17.066667-22.755556-17.066667-34.133333 0-11.377778 5.688889-28.444444 17.066667-34.133334 22.755556-22.755556 51.2-22.755556 73.955555 0L512 443.733333l312.888889-312.888889c22.755556-22.755556 51.2-22.755556 73.955555 0s22.755556 51.2 0 73.955556l-312.888888 312.888889 312.888888 312.888889z"
|
||
fill="#727477" p-id="3538" />
|
||
</svg>
|
||
</div>
|
||
<div class="out_i_t">
|
||
<div class="out_i_p">出货排行榜</div>
|
||
</div>
|
||
|
||
<div class="out_list">
|
||
<div class="space_between out_list_line t">
|
||
<div class="goodsRank" style="margin-left: 8px">排名</div>
|
||
<div class="n">玩家</div>
|
||
<div class="imgbox">物品图片</div>
|
||
<div class="j">物品名称</div>
|
||
<div class="j">物品价值</div>
|
||
</div>
|
||
<div class="out_list_bg">
|
||
<div class="out_list_line space_between l" v-for="(item, index) in goods" :key="index">
|
||
<div class="goodsRank">
|
||
<div v-if="item.priceRank == 1">
|
||
<svg t="1708136543236" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="3690">
|
||
<path
|
||
d="M224 979.616a32 32 0 0 0 42.112 30.336L512 928l245.888 81.952A32 32 0 0 0 800 979.616V672H224v307.616z"
|
||
fill="#EAB449" p-id="3691" />
|
||
<path
|
||
d="M512 0l387.968 224v448L512 896 124.032 672V224L512 0z m0 110.848l291.968 168.576v337.152L512 785.152l-291.968-168.576V279.424L512 110.848z"
|
||
fill="#FFE07A" p-id="3692" />
|
||
<path
|
||
d="M512 102.4l304.832 176v352L512 806.4l-304.832-176v-352L512 102.4z m0 36.96l272.832 157.504v315.072L512 769.44l-272.832-157.504V296.864L512 139.36z"
|
||
fill="#EBC441" p-id="3693" />
|
||
<path d="M512 139.52l273.92 157.76v317.12L512 768l-273.6-153.6 0.32-317.12L512 139.52z"
|
||
fill="#FFEDB1" p-id="3694" />
|
||
<path d="M550.4 608h-127.52l42.272-247.584-52.352 6.08 10.08-57.504L604.8 288l-54.4 320z"
|
||
fill="#AD8D23" p-id="3695" />
|
||
</svg>
|
||
</div>
|
||
<div v-else-if="item.priceRank == 2">
|
||
<svg t="1708136683367" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="3843">
|
||
<path
|
||
d="M224 979.616a32 32 0 0 0 42.112 30.336L512 928l245.888 81.952A32 32 0 0 0 800 979.616V672H224v307.616z"
|
||
fill="#9CA9B2" p-id="3844" />
|
||
<path d="M512 0l387.968 224v448L512 896 124.032 672V224L512 0z" fill="#E1E4E7" p-id="3845" />
|
||
<path
|
||
d="M512 0l387.968 224v448L512 896 124.032 672V224L512 0z m0 110.848l291.968 168.576v337.152L512 785.152l-291.968-168.576V279.424L512 110.848z"
|
||
fill="#DCDFE1" p-id="3846" />
|
||
<path
|
||
d="M512 102.4l304.832 176v352L512 806.4l-304.832-176v-352L512 102.4z m0 36.96l272.832 157.504v315.072L512 769.44l-272.832-157.504V296.864L512 139.36z"
|
||
fill="#BBC0C4" p-id="3847" />
|
||
<path d="M512.48 139.52L786.24 297.6v316.096l-273.76 158.048-273.76-158.08V297.6l273.76-158.048z"
|
||
fill="#E6E9EB" p-id="3848" />
|
||
<path
|
||
d="M570.624 341.344h-95.36L470.72 384H375.84l12-96H672l-24 192h-199.232l-8.992 74.656h180.288l21.472-21.312L632.032 608H381.856q-14.496 0-22.976-10.944-8.512-10.944-6.496-27.232l17.984-143.168h189.28l10.976-85.312z"
|
||
fill="#808B92" p-id="3849" />
|
||
</svg>
|
||
</div>
|
||
<div v-else-if="item.priceRank == 3">
|
||
<svg t="1708136703928" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="3997">
|
||
<path
|
||
d="M224 979.616a32 32 0 0 0 42.112 30.336L512 928l245.888 81.952A32 32 0 0 0 800 979.616V672H224v307.616z"
|
||
fill="#E29369" p-id="3998" />
|
||
<path
|
||
d="M512 0l387.968 224v448L512 896 124.032 672V224L512 0z m0 110.848l291.968 168.576v337.152L512 785.152l-291.968-168.576V279.424L512 110.848z"
|
||
fill="#F4C592" p-id="3999" />
|
||
<path
|
||
d="M512 102.4l304.832 176v352L512 806.4l-304.832-176v-352L512 102.4z m0 36.96l272.832 157.504v315.072L512 769.44l-272.832-157.504V296.864L512 139.36z"
|
||
fill="#DFA257" p-id="4000" />
|
||
<path d="M512.48 139.52L786.24 297.6v316.096l-273.76 158.048-273.76-158.08V297.6l273.76-158.048z"
|
||
fill="#F6D7B0" p-id="4001" />
|
||
<path
|
||
d="M556.32 469.12h-168.384l6.4-53.44h168.384l9.344-74.816H384.96L391.36 288H672l-34.944 281.76q-1.984 16.32-13.056 27.264-11.072 10.976-24.864 10.976H352l6.88-53.44h186.592l10.848-85.44z"
|
||
fill="#C18B49" p-id="4002" />
|
||
</svg>
|
||
</div>
|
||
<div v-else>{{ item.priceRank }}</div>
|
||
</div>
|
||
<div class="n space_around">
|
||
<div class="img center">
|
||
<img :src="item.avatar|fullPath" alt />
|
||
</div>
|
||
<div class="name textover-f">{{ item.nickName }}</div>
|
||
</div>
|
||
<!-- <div class="">{{ item.imageUrl || null }}</div> -->
|
||
<div class="imgbox">
|
||
<img :src="item.imageUrl |fullPath" alt="" />
|
||
</div>
|
||
<div class="j money-money textover-f">{{ item.ornamentName || 0 }}</div>
|
||
<div class="j money-money textover-f">{{ item.ornamentsPrice || 0 }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="out_bottom space_between z">
|
||
<div style="width: 100%">
|
||
<div v-if="!goodsFlag" style="text-align: center">您还未上榜</div>
|
||
<div v-else>
|
||
<div style="text-align: center">您的的排名</div>
|
||
<div class="space_between out_list_line t">
|
||
<div class="goodsRank">排名</div>
|
||
<div class="n">玩家</div>
|
||
<div class="c">物品图片</div>
|
||
<div class="j">物品名称</div>
|
||
<div class="j">物品价值</div>
|
||
</div>
|
||
<div class="out_list_line space_between l">
|
||
<div class="goodsRank">
|
||
<div v-if="goodsFlag.priceRank == 1">
|
||
<svg t="1708136543236" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="3690">
|
||
<path
|
||
d="M224 979.616a32 32 0 0 0 42.112 30.336L512 928l245.888 81.952A32 32 0 0 0 800 979.616V672H224v307.616z"
|
||
fill="#EAB449" p-id="3691" />
|
||
<path
|
||
d="M512 0l387.968 224v448L512 896 124.032 672V224L512 0z m0 110.848l291.968 168.576v337.152L512 785.152l-291.968-168.576V279.424L512 110.848z"
|
||
fill="#FFE07A" p-id="3692" />
|
||
<path
|
||
d="M512 102.4l304.832 176v352L512 806.4l-304.832-176v-352L512 102.4z m0 36.96l272.832 157.504v315.072L512 769.44l-272.832-157.504V296.864L512 139.36z"
|
||
fill="#EBC441" p-id="3693" />
|
||
<path d="M512 139.52l273.92 157.76v317.12L512 768l-273.6-153.6 0.32-317.12L512 139.52z"
|
||
fill="#FFEDB1" p-id="3694" />
|
||
<path d="M550.4 608h-127.52l42.272-247.584-52.352 6.08 10.08-57.504L604.8 288l-54.4 320z"
|
||
fill="#AD8D23" p-id="3695" />
|
||
</svg>
|
||
</div>
|
||
<div v-else-if="goodsFlag.priceRank == 2">
|
||
<svg t="1708136683367" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="3843">
|
||
<path
|
||
d="M224 979.616a32 32 0 0 0 42.112 30.336L512 928l245.888 81.952A32 32 0 0 0 800 979.616V672H224v307.616z"
|
||
fill="#9CA9B2" p-id="3844" />
|
||
<path d="M512 0l387.968 224v448L512 896 124.032 672V224L512 0z" fill="#E1E4E7" p-id="3845" />
|
||
<path
|
||
d="M512 0l387.968 224v448L512 896 124.032 672V224L512 0z m0 110.848l291.968 168.576v337.152L512 785.152l-291.968-168.576V279.424L512 110.848z"
|
||
fill="#DCDFE1" p-id="3846" />
|
||
<path
|
||
d="M512 102.4l304.832 176v352L512 806.4l-304.832-176v-352L512 102.4z m0 36.96l272.832 157.504v315.072L512 769.44l-272.832-157.504V296.864L512 139.36z"
|
||
fill="#BBC0C4" p-id="3847" />
|
||
<path
|
||
d="M512.48 139.52L786.24 297.6v316.096l-273.76 158.048-273.76-158.08V297.6l273.76-158.048z"
|
||
fill="#E6E9EB" p-id="3848" />
|
||
<path
|
||
d="M570.624 341.344h-95.36L470.72 384H375.84l12-96H672l-24 192h-199.232l-8.992 74.656h180.288l21.472-21.312L632.032 608H381.856q-14.496 0-22.976-10.944-8.512-10.944-6.496-27.232l17.984-143.168h189.28l10.976-85.312z"
|
||
fill="#808B92" p-id="3849" />
|
||
</svg>
|
||
</div>
|
||
<div v-else-if="goodsFlag.priceRank == 3">
|
||
<svg t="1708136703928" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="3997">
|
||
<path
|
||
d="M224 979.616a32 32 0 0 0 42.112 30.336L512 928l245.888 81.952A32 32 0 0 0 800 979.616V672H224v307.616z"
|
||
fill="#E29369" p-id="3998" />
|
||
<path
|
||
d="M512 0l387.968 224v448L512 896 124.032 672V224L512 0z m0 110.848l291.968 168.576v337.152L512 785.152l-291.968-168.576V279.424L512 110.848z"
|
||
fill="#F4C592" p-id="3999" />
|
||
<path
|
||
d="M512 102.4l304.832 176v352L512 806.4l-304.832-176v-352L512 102.4z m0 36.96l272.832 157.504v315.072L512 769.44l-272.832-157.504V296.864L512 139.36z"
|
||
fill="#DFA257" p-id="4000" />
|
||
<path
|
||
d="M512.48 139.52L786.24 297.6v316.096l-273.76 158.048-273.76-158.08V297.6l273.76-158.048z"
|
||
fill="#F6D7B0" p-id="4001" />
|
||
<path
|
||
d="M556.32 469.12h-168.384l6.4-53.44h168.384l9.344-74.816H384.96L391.36 288H672l-34.944 281.76q-1.984 16.32-13.056 27.264-11.072 10.976-24.864 10.976H352l6.88-53.44h186.592l10.848-85.44z"
|
||
fill="#C18B49" p-id="4002" />
|
||
</svg>
|
||
</div>
|
||
<div v-else>{{ goodsFlag.priceRank }}</div>
|
||
</div>
|
||
<div class="n space_around">
|
||
<div class="img center">
|
||
<img :src="goodsFlag.avatar|fullPath" alt />
|
||
</div>
|
||
<div class="name textover-f">{{ goodsFlag.nickName }}</div>
|
||
</div>
|
||
<div class="imgbox">
|
||
<img :src="goodsFlag.imageUrl|fullPath" alt="" />
|
||
</div>
|
||
<div class="j money-money textover-f">
|
||
{{ goodsFlag.ornamentName || 0 }}
|
||
</div>
|
||
<div class="j money-money textover-f">
|
||
{{ goodsFlag.ornamentsPrice || 0 }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="n space_between">
|
||
<div class="img center">
|
||
<img :src="detiallist.userdata.avatar" alt />
|
||
</div>
|
||
<div class="name">{{ detiallist.userdata.name }}</div>
|
||
</div>
|
||
<div class="c">
|
||
<span>{{ detiallist.userdata.const }}</span>
|
||
距10差
|
||
<span>{{ detiallist.userdata.gap }}</span>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="out center" v-if="isgeneralization">
|
||
<div class="out_i animate__animated animate__fadeInUp" ref="outelement">
|
||
<div class="close" @click="
|
||
handleclose();
|
||
playAudio();
|
||
">
|
||
<svg t="1708136166985" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||
p-id="3537">
|
||
<path
|
||
d="M898.844444 830.577778c22.755556 17.066667 22.755556 51.2 0 73.955555s-51.2 22.755556-73.955555 0L512 591.644444l-312.888889 312.888889c-11.377778 11.377778-22.755556 17.066667-39.822222 17.066667-11.377778 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-22.755556-51.2 0-73.955555l312.888889-312.888889-307.2-318.577778c-11.377778-5.688889-17.066667-22.755556-17.066667-34.133333 0-11.377778 5.688889-28.444444 17.066667-34.133334 22.755556-22.755556 51.2-22.755556 73.955555 0L512 443.733333l312.888889-312.888889c22.755556-22.755556 51.2-22.755556 73.955555 0s22.755556 51.2 0 73.955556l-312.888888 312.888889 312.888888 312.888889z"
|
||
fill="#727477" p-id="3538" />
|
||
</svg>
|
||
</div>
|
||
<div class="out_i_p_t">推广收益</div>
|
||
<div class="shouyi">
|
||
<div class="center shouyi_list ">
|
||
<div>明日预计：{{ subRechaneg }}</div>
|
||
<div style="padding-left: 20px;"></div>
|
||
<div>
|
||
我的团队：{{ subordinateNumber }}
|
||
<span class="lookx" @click="
|
||
handlook();
|
||
playAudio();
|
||
">查看</span>
|
||
</div>
|
||
</div>
|
||
<div class="center shouyi_list">
|
||
|
||
<div>我的邀请码：{{ mycode }}</div>
|
||
<div style="padding-left: 20px;"></div>
|
||
<div>我的邀请者：{{ facode == '206604' ? 'f2cs2' : facode }}</div>
|
||
</div>
|
||
</div>
|
||
<!-- tab -->
|
||
<div class="out_tab">
|
||
<!-- <div
|
||
class="center btn"
|
||
@click="
|
||
handletypet(0);
|
||
playAudio();
|
||
"
|
||
:class="typet == 0 ? 'active' : ''"
|
||
>
|
||
今天
|
||
</div> -->
|
||
<div class="center btn active cover" @click="
|
||
handletypet(1);
|
||
playAudio();
|
||
">
|
||
收益明细
|
||
</div>
|
||
<!-- <div
|
||
class="center btn"
|
||
@click="
|
||
handletypet(2);
|
||
playAudio();
|
||
"
|
||
:class="typet == 2 ? 'active' : ''"
|
||
>
|
||
近七日
|
||
</div> -->
|
||
<!-- <div class="cover" :style="{ left: left + 'px' }" ref="cover"></div> -->
|
||
</div>
|
||
|
||
<div class="out_list_t">
|
||
<div class="space_between out_list_line t">
|
||
<div class="tg">时间</div>
|
||
<div class="tg">类型</div>
|
||
<!-- <div class="tg">金额</div> -->
|
||
<div class="tg">收益</div>
|
||
</div>
|
||
<div class="out_list_bg sylist_box" @scroll="sylistScroll">
|
||
<div class="out_list_line space_between l" v-for="(item, index) in sylist" :key="index">
|
||
<div class="n tgl space_around">
|
||
<div class="name textover-f">
|
||
{{ item.createTime.split("T")[0] }}
|
||
</div>
|
||
</div>
|
||
<div class="c tgl money-money ">{{ item.remark }}</div>
|
||
<!-- <div class="c tgl money-money">{{ item.pwChildAccount }}</div> -->
|
||
<div class="c tgl money-money">{{ item.credits }}</div>
|
||
</div>
|
||
<div style="text-align: center; margin-top: 10px">
|
||
{{ sylistIsOver }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="wode" v-if="islook">
|
||
<div class="back" @click="
|
||
islook = false;
|
||
team = [];
|
||
teamPage.page = 1;
|
||
playAudio();
|
||
">
|
||
<
|
||
</div>
|
||
<div class="center wode_top">
|
||
<div class="wode_top_l" :class="wode_type == 1 ? 'wode_active' : ''" @click="
|
||
handle_woe(1);
|
||
playAudio();
|
||
">
|
||
今日
|
||
</div>
|
||
<div class="wode_top_l" :class="wode_type == 2 ? 'wode_active' : ''" @click="
|
||
handle_woe(2);
|
||
playAudio();
|
||
">
|
||
昨日
|
||
</div>
|
||
<div class="close"></div>
|
||
</div>
|
||
<div class="wode_list_top space_around">
|
||
<div>昵称</div>
|
||
<!-- <div :class="teamPage.orderByFie == 1 ? 'xf select' : 'xf'" @click="
|
||
rotateArrow('cz');
|
||
playAudio();
|
||
">
|
||
{{ wode_type == 1 ? "今日充值" : "昨日充值" }}
|
||
<i class="el-icon-bottom arrow" :class="{ rotated: isRotatedcz }"></i>
|
||
</div> -->
|
||
<div :class="teamPage.orderByFie == 2 ? 'cz select' : 'cz'" @click="
|
||
rotateArrow('xf');
|
||
playAudio();
|
||
">
|
||
{{ wode_type == 1 ? "今日消费" : "昨日消费" }}
|
||
<i class="el-icon-bottom arrow" :class="{ rotated: isRotatedxf }"></i>
|
||
</div>
|
||
</div>
|
||
<div class="out_list_bg team_box" @scroll="teamScroll">
|
||
<div class="out_list_line space_between l" v-for="(item, index) in team" :key="index">
|
||
<div class="n tgl space_around">
|
||
<div class="name textover-f">{{ item.nickName }}</div>
|
||
</div>
|
||
<!-- <div class="c tgl money-money">{{ item.recharge || 0 }}</div> -->
|
||
<div class="c tgl money-money">
|
||
{{ Math.abs(item.beConsume) || 0 }}
|
||
</div>
|
||
</div>
|
||
<div style="text-align: center; margin-top: 10px">
|
||
{{ teamIsOver }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
// creditsRank,
|
||
// getUserSubRechange,
|
||
// getUserSubusser,
|
||
userCreditsRecords,
|
||
getUserInfo,
|
||
getdiaoluo,
|
||
teamUsers,
|
||
rechargeRanking,
|
||
rechargeRankingRewardsIntroduction
|
||
} from "@/api/index";
|
||
export default {
|
||
data() {
|
||
return {
|
||
subordinateNumber:0,
|
||
mycode: null,
|
||
facode: null,
|
||
subRechaneg: null,
|
||
subuser: null,
|
||
type: 0,
|
||
typet: 0,
|
||
left: 0,
|
||
list: [],
|
||
shuolist: [],
|
||
sylist: [],
|
||
team: [],
|
||
goods: [],
|
||
isRotatedcz: false,
|
||
isRotatedxf: false,
|
||
wode_type: 1,
|
||
islook: false,
|
||
isranklist: false,
|
||
isgeneralization: false,
|
||
isgoods: false,
|
||
queryParams: {
|
||
page: 1,
|
||
size: 10,
|
||
},
|
||
detiallist: {
|
||
data: [
|
||
{
|
||
p: 1,
|
||
name: "8a9d",
|
||
const: 8888,
|
||
avatar: "www.baicu.com",
|
||
prize: 888,
|
||
},
|
||
{
|
||
p: 2,
|
||
name: "11231",
|
||
const: 7777,
|
||
prize: 388,
|
||
},
|
||
{
|
||
p: 3,
|
||
name: "dadaa",
|
||
const: 6666,
|
||
prize: 288,
|
||
},
|
||
{
|
||
p: 4,
|
||
name: "阿德撒旦",
|
||
const: 5555,
|
||
prize: 188,
|
||
},
|
||
{
|
||
p: 5,
|
||
name: "大大王",
|
||
const: 4444,
|
||
prize: 88,
|
||
},
|
||
{
|
||
p: 6,
|
||
name: "钱钱钱钱钱钱钱钱钱",
|
||
const: 3333,
|
||
prize: 78,
|
||
},
|
||
{
|
||
p: 7,
|
||
name: "aa",
|
||
const: 2222,
|
||
prize: 68,
|
||
},
|
||
{
|
||
p: 8,
|
||
name: "aa",
|
||
const: 1111,
|
||
prize: 58,
|
||
},
|
||
{
|
||
p: 9,
|
||
name: "aa",
|
||
const: 999,
|
||
prize: 48,
|
||
},
|
||
{
|
||
p: 10,
|
||
name: "aa",
|
||
const: 888,
|
||
prize: 38,
|
||
},
|
||
{
|
||
p: 11,
|
||
name: "aa",
|
||
const: 777,
|
||
},
|
||
{
|
||
p: 12,
|
||
name: "aa",
|
||
const: 666,
|
||
},
|
||
{
|
||
p: 13,
|
||
name: "aa",
|
||
const: 555,
|
||
},
|
||
{
|
||
p: 14,
|
||
name: "aa",
|
||
const: 444,
|
||
},
|
||
],
|
||
userdata: {
|
||
p: 16,
|
||
name: "8a9d",
|
||
const: 20,
|
||
gap: 10,
|
||
avatar:
|
||
"https://img1.baidu.com/it/u=558479174,2502495081&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200",
|
||
},
|
||
},
|
||
sylistPage: {
|
||
page: 1,
|
||
size: 20,
|
||
},
|
||
teamPage: {
|
||
orderByFie: 1,
|
||
orderType: 1,
|
||
page: 1,
|
||
size: 15,
|
||
beginTime:
|
||
new Date().toLocaleDateString().replaceAll("/", "-") + " 00:00:00",
|
||
endTime: new Date().toLocaleString().replaceAll("/", "-"),
|
||
},
|
||
sylistIsOver: "加载中",
|
||
teamIsOver: "加载中",
|
||
rechargelist: [],
|
||
};
|
||
},
|
||
mounted() {
|
||
window.addEventListener("popstate", () => {
|
||
if (this.isranklist) {
|
||
// console.log(1);
|
||
this.isranklist = false;
|
||
this.islook = false;
|
||
} else if (this.isgeneralization) {
|
||
// console.log(2);
|
||
this.isgeneralization = false;
|
||
this.islook = false;
|
||
} else if (this.isgoods) {
|
||
this.isgoods = false;
|
||
}
|
||
});
|
||
},
|
||
computed: {
|
||
flag() {
|
||
let i = this.list.findIndex((item) => {
|
||
return item.userId == this.$store.state.USER_INFO.userId;
|
||
});
|
||
if (i == -1) {
|
||
return false;
|
||
} else {
|
||
return this.list[i];
|
||
}
|
||
},
|
||
goodsFlag() {
|
||
let i = this.goods.findIndex((item) => {
|
||
return item.holderUserId == this.$store.state.USER_INFO.userId;
|
||
});
|
||
if (i == -1) {
|
||
return false;
|
||
} else {
|
||
return this.goods[i];
|
||
}
|
||
},
|
||
},
|
||
watch: {
|
||
isranklist: {
|
||
handler(newValue) {
|
||
if (newValue) {
|
||
const state = { title: "title", url: "#" };
|
||
window.history.pushState(state, state.title, state.url);
|
||
}
|
||
},
|
||
},
|
||
isgoods: {
|
||
handler(newValue) {
|
||
if (newValue) {
|
||
const state = { title: "title", url: "#" };
|
||
window.history.pushState(state, state.title, state.url);
|
||
}
|
||
},
|
||
},
|
||
isgeneralization: {
|
||
handler(newValue) {
|
||
if (newValue) {
|
||
const state = { title: "title", url: "#" };
|
||
window.history.pushState(state, state.title, state.url);
|
||
}
|
||
},
|
||
},
|
||
},
|
||
methods: {
|
||
playAudio() {
|
||
this.$store.commit("playAudio");
|
||
},
|
||
sylistScroll(e) {
|
||
this.event = e;
|
||
// return e;
|
||
if (
|
||
e.srcElement.scrollTop + e.srcElement.clientHeight >=
|
||
e.srcElement.scrollHeight
|
||
) {
|
||
// console.log(11);
|
||
|
||
if (this.sylistIsOver == "加载中") {
|
||
this.sylistPage.page++;
|
||
setTimeout(() => {
|
||
this.getUserCreditsRecords();
|
||
}, 5);
|
||
}
|
||
}
|
||
},
|
||
teamScroll(e) {
|
||
this.event = e;
|
||
// return e;
|
||
if (
|
||
e.srcElement.scrollTop + e.srcElement.clientHeight >=
|
||
e.srcElement.scrollHeight
|
||
) {
|
||
// console.log(11);
|
||
|
||
if (this.teamIsOver == "加载中") {
|
||
this.teamPage.page++;
|
||
setTimeout(() => {
|
||
this.getTeam();
|
||
}, 5);
|
||
}
|
||
}
|
||
},
|
||
getTeam() {
|
||
teamUsers(this.teamPage).then((res) => {
|
||
console.log("teamUsers", res);
|
||
this.team.push(...res.data.data);
|
||
console.log('我的团队', this.team);
|
||
if (res.data.data.length < this.teamPage.size) {
|
||
this.teamIsOver = "暂无更多";
|
||
}
|
||
});
|
||
},
|
||
handlook() {
|
||
this.islook = true;
|
||
this.team = [];
|
||
this.teamPage.page = 1;
|
||
this.getTeam();
|
||
},
|
||
handle_woe(res) {
|
||
this.wode_type = res;
|
||
this.teamPage.page = 1;
|
||
this.team = [];
|
||
|
||
if (res == 1) {
|
||
(this.teamPage.beginTime =
|
||
new Date().toLocaleDateString().replaceAll("/", "-") + " 00:00:00"),
|
||
(this.teamPage.endTime = new Date()
|
||
.toLocaleString()
|
||
.replaceAll("/", "-"));
|
||
} else {
|
||
let time = new Date();
|
||
// console.log((new Date()-86400000).toLocaleDateString());
|
||
// console.log(new Date(time.valueOf()-86400000).toLocaleDateString());
|
||
this.teamPage.beginTime =
|
||
new Date(time.valueOf() - 86400000)
|
||
.toLocaleDateString()
|
||
.replaceAll("/", "-") + " 00:00:00";
|
||
this.teamPage.endTime =
|
||
new Date().toLocaleDateString().replaceAll("/", "-") + " 00:00:00";
|
||
}
|
||
this.getTeam();
|
||
},
|
||
rotateArrow(res) {
|
||
this.team = [];
|
||
if (res == "xf") {
|
||
this.isRotatedxf = !this.isRotatedxf;
|
||
this.teamPage.orderByFie = 2;
|
||
this.teamPage.orderType = this.isRotatedxf ? 2 : 1;
|
||
} else if (res == "cz") {
|
||
this.isRotatedcz = !this.isRotatedcz;
|
||
this.teamPage.orderByFie = 1;
|
||
this.teamPage.orderType = this.isRotatedcz ? 2 : 1;
|
||
}
|
||
this.teamPage.page = 1;
|
||
this.team = [];
|
||
this.getTeam();
|
||
},
|
||
|
||
getlist() {
|
||
rechargeRanking().then(
|
||
(res) => {
|
||
if (res.data.code == 200) {
|
||
this.isranklist = true;
|
||
if (this.type == 0) {
|
||
this.list = res.data.data.todayFightRanking;
|
||
} if (this.type == 1) {
|
||
this.list = res.data.data.yesterdayFightRanking;
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
);
|
||
},
|
||
handlerank(res) {
|
||
if (res == 0) {
|
||
this.getlist();
|
||
} else if (res == 1) {
|
||
userCreditsRecords(this.sylistPage.page, this.sylistPage.size).then(
|
||
(res) => {
|
||
if (res.data.code == 200) {
|
||
this.isgeneralization = true;
|
||
this.sylist = [];
|
||
this.sylistPage.page = 1;
|
||
console.log("userCreditsRecords", res);
|
||
// if()
|
||
this.sylist = res.data.data.details.records;
|
||
this.subRechaneg = res.data.data.todayPredict;
|
||
this.sylist.forEach((item) => {
|
||
const shotTime = item.createTime.split(" ")[0];
|
||
item.createTime =
|
||
shotTime.split("-")[1] + "-" + shotTime.split("-")[2];
|
||
});
|
||
if (res.data.data.details.records.length < this.sylistPage.size) {
|
||
this.sylistIsOver = "暂无更多";
|
||
}
|
||
}
|
||
}
|
||
);
|
||
getUserInfo().then((res) => {
|
||
this.mycode = res.data.data.invitationCode;
|
||
this.facode = res.data.data.parentInvitationCode;
|
||
this.subordinateNumber=res.data.data.subordinateNumber
|
||
});
|
||
} else if (res == 2) {
|
||
getdiaoluo().then((res) => {
|
||
if (res.data.code == 200) {
|
||
console.log("getdiaoluo", res);
|
||
this.isgoods = true;
|
||
this.goods = res.data.data;
|
||
}
|
||
});
|
||
}
|
||
},
|
||
handleclose() {
|
||
const element = this.$refs.outelement;
|
||
element.classList += " animate__fadeOutDown";
|
||
|
||
setTimeout(() => {
|
||
this.isgoods = false;
|
||
this.isranklist = false;
|
||
this.isgeneralization = false;
|
||
this.islook = false;
|
||
this.$router.back();
|
||
this.type = 0;
|
||
this.typet = 0;
|
||
this.left = 2;
|
||
}, 350);
|
||
},
|
||
handletype(res) {
|
||
this.type = res;
|
||
this.left = res * this.$refs.cover.offsetWidth + 2;
|
||
console.log("按钮", this.left);
|
||
if (res == 2) {
|
||
rechargeRankingRewardsIntroduction().then(res => {
|
||
this.shuolist = res.data.data
|
||
console.log(res, "rechargeRankingRewardsIntroduction")
|
||
})
|
||
|
||
return false;
|
||
}
|
||
this.getlist();
|
||
},
|
||
getUserCreditsRecords() {
|
||
// console.log(1);
|
||
userCreditsRecords(this.sylistPage.page, this.sylistPage.size).then(
|
||
(res) => {
|
||
if (this.sylistIsOver == "加载中") {
|
||
let arr = res.data.data.details.records;
|
||
// this.sylist.push(...res.data.data.details.records);
|
||
// console.log('this.sylist',this.sylist);
|
||
this.subRechaneg = res.data.data.todayPredict;
|
||
arr.forEach((item) => {
|
||
const shotTime = item.createTime.split(" ")[0];
|
||
// console.log('shotTime',shotTime);
|
||
item.createTime =
|
||
shotTime.split("-")[1] + "-" + shotTime.split("-")[2];
|
||
});
|
||
this.sylist.push(...arr);
|
||
if (res.data.data.details.records.length < this.sylistPage.size) {
|
||
this.sylistIsOver = "暂无更多";
|
||
}
|
||
}
|
||
}
|
||
);
|
||
},
|
||
handletypet(res) {
|
||
this.typet = res;
|
||
this.sylist = [];
|
||
this.sylistIsOver = "加载中";
|
||
this.sylistPage.page = 1;
|
||
// pwChildName 用户名 credits 收益 下级消费pwChildAccount
|
||
// const type = 0;
|
||
// let type = 0;
|
||
|
||
this.getUserCreditsRecords();
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.txt {}
|
||
|
||
.goodsRank {
|
||
width: 17%;
|
||
|
||
.icon {
|
||
width: 39px;
|
||
height: 39px;
|
||
|
||
@media (max-width: 550px) {
|
||
width: 28px;
|
||
height: 28px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.imgbox {
|
||
width: 93px;
|
||
|
||
// height: 39px;
|
||
@media (max-width: 550px) {
|
||
// height: 29px;
|
||
width: 75px;
|
||
}
|
||
|
||
img {
|
||
width: 37px;
|
||
height: 37px;
|
||
|
||
@media (max-width: 550px) {
|
||
height: 27px;
|
||
width: 27px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.goods {
|
||
background-image: url("../../assets/1.png");
|
||
background-size: 111%;
|
||
}
|
||
|
||
.team_box {
|
||
height: 300px;
|
||
overflow-y: auto;
|
||
|
||
&::-webkit-scrollbar {
|
||
width: 2px;
|
||
}
|
||
|
||
&::-webkit-scrollbar-thumb {
|
||
background: #3fa2c7;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
@media (max-width: 550px) {
|
||
&::-webkit-scrollbar {
|
||
width: 2px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.sylist_box {
|
||
height: 400px;
|
||
overflow-y: auto;
|
||
|
||
&::-webkit-scrollbar {
|
||
width: 2px;
|
||
}
|
||
|
||
&::-webkit-scrollbar-thumb {
|
||
background: #3fa2c7;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
@media (max-width: 550px) {
|
||
&::-webkit-scrollbar {
|
||
width: 2px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tuiguang {
|
||
background-image: url("../../assets/tuiguangbg.png");
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.rank {
|
||
background-image: url("../../assets/rankbg.png");
|
||
// width: 100%;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.home {
|
||
width: 95%;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.mian {
|
||
width: 100%;
|
||
margin-top: 28px;
|
||
height: 182px;
|
||
border-radius: 14px;
|
||
border: 1px solid white;
|
||
// background: red;
|
||
position: relative;
|
||
transition: all 0.3s ease-in-out;
|
||
|
||
@media (max-width: 550px) {
|
||
height: 130px;
|
||
}
|
||
|
||
.mian_i {
|
||
width: 140px;
|
||
height: 35px;
|
||
padding: 0 22px;
|
||
background: rgba(16, 17, 21, 0.5);
|
||
box-shadow: 0px 0 11px 0px rgba(0, 0, 0, 0.25);
|
||
border-radius: 70px 70px 70px 70px;
|
||
opacity: 1;
|
||
position: absolute;
|
||
left: 14px;
|
||
bottom: 7px;
|
||
transition: all 0.3s ease;
|
||
|
||
@media (max-width: 550px) {
|
||
left: 10px;
|
||
bottom: 10px;
|
||
width: 100px;
|
||
height: 25px;
|
||
padding: 0 17px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.icon {
|
||
margin: 0;
|
||
width: 21px;
|
||
height: 21px;
|
||
|
||
@media (max-width: 550px) {
|
||
height: 15px;
|
||
width: 15px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.out {
|
||
width: 525px;
|
||
height: 100vh;
|
||
transform: translateX(-50%);
|
||
position: fixed;
|
||
left: 50%;
|
||
top: 0;
|
||
background: rgba(0, 0, 0, 0.85);
|
||
z-index: 2;
|
||
|
||
@media (max-width: 550px) {
|
||
width: 100%;
|
||
}
|
||
|
||
.out_i {
|
||
will-change: transform, opacity;
|
||
width: 93%;
|
||
height: 760px;
|
||
background: #101115;
|
||
border-radius: 23px 23px 23px 23px;
|
||
opacity: 1;
|
||
position: relative;
|
||
|
||
// overflow: hidden;
|
||
@media (max-width: 550px) {
|
||
height: 585px;
|
||
}
|
||
}
|
||
|
||
.out_i::before {
|
||
content: "";
|
||
/*必须设置content属性*/
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 278px;
|
||
background: linear-gradient(-204deg,
|
||
#1f3a58 0%,
|
||
rgba(32, 29, 48, 0) 40%,
|
||
rgba(248, 125, 81, 0) 100%);
|
||
border-radius: 23px;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
}
|
||
|
||
.out_i_t {
|
||
width: 270px;
|
||
height: 134px;
|
||
background-image: url("../../assets/Ranking.png");
|
||
background-size: 100% 100%;
|
||
// position: absolute;
|
||
position: relative;
|
||
margin: 0 auto;
|
||
padding: 21px 0 0 0;
|
||
margin-top: -17px;
|
||
|
||
font-weight: 400;
|
||
|
||
@media (max-width: 550px) {
|
||
width: 193px;
|
||
height: 96px;
|
||
margin-top: -11px;
|
||
padding: 17px 0 0 0;
|
||
}
|
||
}
|
||
|
||
.out_tab {
|
||
width: 112px;
|
||
height: 39px;
|
||
background: #323436;
|
||
border-radius: 77px 77px 77px 77px;
|
||
opacity: 1;
|
||
margin: 0 auto;
|
||
margin-top: 39px;
|
||
display: flex;
|
||
justify-content: center;
|
||
color: #727477;
|
||
position: relative;
|
||
transition: all 0.2s ease-in-out;
|
||
|
||
@media (max-width: 550px) {
|
||
margin-top: 28px;
|
||
width: 79px;
|
||
font-size: 11px;
|
||
height: 28px;
|
||
}
|
||
}
|
||
|
||
.out_tab2 {
|
||
position: relative;
|
||
width: 234px;
|
||
height: 39px;
|
||
background: #323436;
|
||
border-radius: 77px 77px 77px 77px;
|
||
opacity: 1;
|
||
margin: 0 auto;
|
||
margin-top: 39px;
|
||
display: flex;
|
||
justify-content: center;
|
||
color: #727477;
|
||
position: relative;
|
||
transition: all 0.2s ease-in-out;
|
||
|
||
@media (max-width: 550px) {
|
||
margin-top: 28px;
|
||
width: 196px;
|
||
font-size: 11px;
|
||
height: 28px;
|
||
}
|
||
}
|
||
|
||
.out_list {
|
||
.l:nth-child(2n-1) {
|
||
background: #323436;
|
||
}
|
||
|
||
.t {
|
||
color: #727477;
|
||
|
||
@media (max-width: 550px) {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
.l {
|
||
@media (max-width: 550px) {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
.out_list_line {
|
||
width: 100%;
|
||
height: 46px;
|
||
|
||
@media (max-width: 550px) {
|
||
height: 33px;
|
||
}
|
||
|
||
.n,
|
||
.j {
|
||
width: 20%;
|
||
}
|
||
|
||
.p,
|
||
.c {
|
||
width: 21%;
|
||
}
|
||
|
||
.p {
|
||
.icon {
|
||
width: 39px;
|
||
height: 39px;
|
||
|
||
@media (max-width: 550px) {
|
||
width: 28px;
|
||
height: 28px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.n {
|
||
.img {
|
||
// width: 25%;
|
||
width: 39px;
|
||
height: 39px;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
background-color: #3fa2c7;
|
||
|
||
@media (max-width: 550px) {
|
||
width: 28px;
|
||
height: 28px;
|
||
}
|
||
|
||
img {
|
||
width: 39px;
|
||
height: 39px;
|
||
border-radius: 50%;
|
||
|
||
@media (max-width: 550px) {
|
||
width: 27px;
|
||
height: 27px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.name {
|
||
width: 60%;
|
||
text-align: left;
|
||
}
|
||
}
|
||
}
|
||
|
||
.out_list_bg {
|
||
width: 100%;
|
||
height: 460px;
|
||
// overflow-y: scroll;
|
||
overflow: hidden;
|
||
|
||
@media (max-width: 550px) {
|
||
height: 330px;
|
||
}
|
||
}
|
||
|
||
.out_list_bg::-webkit-scrollbar {
|
||
width: 10px;
|
||
}
|
||
|
||
.out_list_bg::-webkit-scrollbar-track {
|
||
background: #f1f1f1;
|
||
/* 滚动条轨道的背景色 */
|
||
border-radius: 10px;
|
||
display: none;
|
||
}
|
||
|
||
.out_list_bg::-webkit-scrollbar-thumb {
|
||
border-radius: 10px;
|
||
|
||
background: #323436;
|
||
}
|
||
}
|
||
|
||
.out_bottom {
|
||
width: 100%;
|
||
height: 77px;
|
||
background: rgba(50, 52, 54, 0.2);
|
||
border-radius: 0px 0px 0px 0px;
|
||
opacity: 1;
|
||
|
||
@media (max-width: 550px) {
|
||
height: 55px;
|
||
|
||
font-size: 11px;
|
||
}
|
||
|
||
.p,
|
||
.n,
|
||
.c {
|
||
width: 21%;
|
||
}
|
||
|
||
.n {
|
||
.img {
|
||
// width: 25%;
|
||
width: 39px;
|
||
height: 39px;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
background-color: #3fa2c7;
|
||
|
||
@media (max-width: 550px) {
|
||
height: 29px;
|
||
width: 29px;
|
||
}
|
||
|
||
img {
|
||
width: 37px;
|
||
height: 37px;
|
||
border-radius: 50%;
|
||
|
||
@media (max-width: 550px) {
|
||
height: 27px;
|
||
width: 27px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.name {
|
||
width: 70%;
|
||
text-align: left;
|
||
}
|
||
}
|
||
}
|
||
|
||
.cover {
|
||
width: 108px;
|
||
height: 39px;
|
||
background: linear-gradient(-270deg, #3fa2c7 0%, #3a97e4 100%);
|
||
transition: left 0.2s ease-in-out;
|
||
z-index: 1;
|
||
border-radius: 77px;
|
||
|
||
@media (max-width: 550px) {
|
||
height: 28px;
|
||
width: 77px;
|
||
}
|
||
}
|
||
|
||
.cover2 {
|
||
position: absolute;
|
||
width: 77px;
|
||
height: 39px;
|
||
background: linear-gradient(-270deg, #3fa2c7 0%, #3a97e4 100%);
|
||
transition: left 0.2s ease-in-out;
|
||
z-index: 1;
|
||
border-radius: 77px;
|
||
|
||
@media (max-width: 550px) {
|
||
height: 28px;
|
||
width: 64px;
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
width: 108px;
|
||
height: 39px;
|
||
z-index: 2;
|
||
|
||
@media (max-width: 550px) {
|
||
height: 28px;
|
||
}
|
||
}
|
||
|
||
.active {
|
||
border-radius: 77px 77px 77px 77px;
|
||
opacity: 1;
|
||
color: #fff;
|
||
transition: all 0.3s ease;
|
||
}
|
||
}
|
||
|
||
@font-face {
|
||
font-family: ysb;
|
||
src: url("../../assets/font/YouSheBiaoTiHei-2.ttf");
|
||
}
|
||
|
||
.explainbox {
|
||
margin: 0 auto;
|
||
margin-top: 15px;
|
||
width: 100%;
|
||
font-size: 15px;
|
||
|
||
color: #d1d1d1;
|
||
|
||
@media (max-width: 550px) {
|
||
font-size: 11px;
|
||
}
|
||
}
|
||
|
||
.explainbox_i {
|
||
width: 100%;
|
||
|
||
@media (max-width: 550px) {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
.explainbox_ii {
|
||
margin: 0 auto;
|
||
margin-top: 15px;
|
||
width: 100%;
|
||
height: 46px;
|
||
background: #323436;
|
||
|
||
@media (max-width: 550px) {
|
||
margin-top: 9px;
|
||
|
||
font-size: 11px;
|
||
height: 33px;
|
||
}
|
||
}
|
||
|
||
.explainbox_iii {
|
||
margin: 0 auto;
|
||
width: 90%;
|
||
height: 38px;
|
||
border-bottom: 1px solid #323436;
|
||
|
||
@media (max-width: 550px) {
|
||
font-size: 11px;
|
||
height: 33px;
|
||
}
|
||
}
|
||
|
||
.explainbox_iiii {
|
||
color: #727477;
|
||
font-size: 19px;
|
||
margin: 0 auto;
|
||
margin-top: 39px;
|
||
|
||
line-height: 2;
|
||
width: 100%;
|
||
|
||
@media (max-width: 550px) {
|
||
font-size: 13px;
|
||
margin-top: 5px;
|
||
line-height: 1;
|
||
}
|
||
}
|
||
|
||
.mc {
|
||
width: 49%;
|
||
}
|
||
|
||
.jl {
|
||
width: 49%;
|
||
}
|
||
|
||
.gold_color {
|
||
color: #dbab55 !important;
|
||
}
|
||
|
||
.close {
|
||
position: absolute;
|
||
right: 0px;
|
||
top: -35px;
|
||
width: 25px;
|
||
height: 25px;
|
||
|
||
.icon {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.animate__animated.animate__fadeInUp {
|
||
--animate-duration: 0.5s;
|
||
}
|
||
|
||
.out_i_p {
|
||
font-family: ysb !important;
|
||
font-size: 39px;
|
||
|
||
font-style: italic;
|
||
|
||
@media (max-width: 550px) {
|
||
font-size: 28px;
|
||
}
|
||
}
|
||
|
||
.out_i_p_t {
|
||
font-family: ysb !important;
|
||
|
||
font-size: 39px;
|
||
|
||
@media (max-width: 550px) {
|
||
font-size: 28px;
|
||
}
|
||
}
|
||
|
||
.tg,
|
||
.tgl {
|
||
width: 25.5%;
|
||
}
|
||
|
||
.tgl {
|
||
font-size: 15px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.shouyi {
|
||
margin: 0 auto;
|
||
width: 93%;
|
||
height: 136px;
|
||
// background: #101115;
|
||
border-radius: 14px 14px 14px 14px;
|
||
position: relative;
|
||
z-index: 2;
|
||
overflow: hidden;
|
||
padding: 0 5px;
|
||
|
||
@media (max-width: 550px) {
|
||
height: 99px;
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
|
||
.shouyi_list {
|
||
width: 100%;
|
||
height: 69px;
|
||
border-bottom: 1px solid #323436;
|
||
|
||
div {
|
||
// margin: 0 10px;
|
||
}
|
||
|
||
@media (max-width: 550px) {
|
||
height: 50px;
|
||
}
|
||
}
|
||
|
||
.out_list_t {
|
||
width: 93%;
|
||
margin: 0 auto;
|
||
|
||
.t {
|
||
height: 46px;
|
||
// background: #323436;
|
||
color: #727477;
|
||
|
||
@media (max-width: 550px) {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
.out_list_bg {
|
||
@media (max-width: 550px) {
|
||
font-size: 11px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.wode {
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 93%;
|
||
height: 700px;
|
||
|
||
@media (max-width: 550px) {
|
||
height: 525px;
|
||
}
|
||
|
||
background: #101115;
|
||
z-index: 3;
|
||
top: 50px;
|
||
border-radius: 15px;
|
||
border: 1px solid #0b0c0c;
|
||
|
||
.back {
|
||
position: absolute;
|
||
top: 22px;
|
||
left: 17px;
|
||
font-size: 20px;
|
||
color: #3fa2c7;
|
||
}
|
||
}
|
||
|
||
.wode_top {
|
||
width: 97%;
|
||
margin: 0 auto;
|
||
height: 69px;
|
||
color: #727477;
|
||
|
||
.wode_top_l {
|
||
width: 25%;
|
||
margin: 0 11px;
|
||
}
|
||
}
|
||
|
||
.wode_list_top {
|
||
width: 97%;
|
||
margin: 0 auto;
|
||
height: 69px;
|
||
color: #727477;
|
||
|
||
div {
|
||
width: 24.5%;
|
||
}
|
||
|
||
.xf {
|
||
//color: #d1d1d1;
|
||
}
|
||
|
||
.cz {
|
||
//color: #d1d1d1;
|
||
}
|
||
|
||
.select {
|
||
color: #d1d1d1;
|
||
}
|
||
}
|
||
|
||
.arrow {
|
||
/* 这里的样式取决于你的箭头图标是如何定义的 */
|
||
/* 例如，如果你的箭头是一个SVG或字体图标，你可能需要设置其宽度、高度、颜色等 */
|
||
transition: transform 0.3s ease;
|
||
/* 添加过渡效果，使旋转更平滑 */
|
||
}
|
||
|
||
.rotated {
|
||
color: #d1d1d1;
|
||
|
||
transform: rotate(180deg);
|
||
/* 旋转180度，使箭头朝下 */
|
||
}
|
||
|
||
.wode_active {
|
||
color: #fff;
|
||
}
|
||
|
||
.lookx {
|
||
color: #3fa2c7;
|
||
margin-left:10px ;
|
||
}
|
||
</style>
|