<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();
    ">
            &lt;
          </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>
