<template>
  <div class="Search">
    <div class="header">
      <dy-back mode="light" @click="$back" class="mr1r"></dy-back>
      <BSearch placeholder="搜索用户名字/抖音号"
               :isShowRightText="true"
               rightTextColor="white"
               @notice="$no"
      >
        <img class="scan" src="../../assets/img/icon/scan-gray.png" @click.stop="$nav('/scan')">
      </BSearch>
    </div>
    <div class="content">
      <div class="history">
        <div class="row" v-for="(item,index) in lHistory">
          <div class="left">
            <img src="../../assets/img/icon/home/time-white.png" alt="">
            <span> {{ item }}</span>
          </div>
          <dy-back img="close" mode="gray" @click="history.splice(index,1)" scale=".7"></dy-back>
        </div>
        <div v-if="history.length>2" class="history-expand" @click="toggle">
          {{ isExpand ? '清除全部搜索记录' : '展开全部' }}
        </div>
      </div>
      <div class="guess">
        <div class="title">
          <div class="left">猜你想搜</div>
          <div class="right">
            <img class="scan" src="../../assets/img/icon/home/refresh-gray.png" @click.stop="refresh">
            <span>换一换</span>
          </div>
        </div>
        <div class="keys">
          <div class="key" v-for="(item,index ) in randomGuess">
            <span class="desc">{{ item.name }}</span>
            <img v-if="item.type === 1" src="../../assets/img/icon/home/new.webp" alt="" class="type">
          </div>
        </div>
      </div>
      <div class="rank-list">
        <div class="indicator">
          <div class="tab" :class="{active:slideIndex === 0}" @click="slideIndex = 0">抖音热榜</div>
          <div class="tab" :class="{active:slideIndex === 1}" @click="slideIndex = 1">直播榜</div>
          <div class="tab" :class="{active:slideIndex === 2}" @click="slideIndex = 2">音乐榜</div>
          <div class="tab" :class="{active:slideIndex === 3}" @click="slideIndex = 3">品牌榜</div>
        </div>
        <!--        TODO 滚动到下面的时候，应该禁止slide-move，因为第个slideitem的高度不一样，高的切到矮的，会闪屏-->
        <SlideRowList v-model:active-index="slideIndex" :style="slideListHeight">
          <SlideItem>
            <div class="slide0" ref="slide0">
              <div class="l-row">
                <div class="rank-wrapper">
                  <img src="../../assets/img/icon/home/to-top-yellow.png" class="rank">
                </div>
                <div class="right">
                  <div class="center">
                    <div class="desc">专题：嘻嘻嘻哈哈瞄瞄嘻嘻嘻</div>
                  </div>
                </div>
              </div>
              <div class="l-row" v-for="(item,index) in hotRankList">
                <div class="rank-wrapper">
                  <img v-if="index === 0" src="../../assets/img/icon/home/hot1.webp" alt="" class="rank">
                  <img v-else-if="index === 1" src="../../assets/img/icon/home/hot2.webp" alt="" class="rank">
                  <img v-else-if="index === 2" src="../../assets/img/icon/home/hot3.webp" alt="" class="rank">
                  <div v-else class="rank">{{ index + 1 }}</div>
                </div>
                <div class="right">
                  <div class="center">
                    <div class="desc">{{ item.name }}</div>
                    <img v-if="item.type === 1" src="../../assets/img/icon/home/new.webp" alt="" class="type">
                    <img v-if="item.type === 0" src="../../assets/img/icon/home/hot.webp" alt="" class="type">
                  </div>
                  <div class="count">999w</div>
                </div>
              </div>
              <div class="more" @click="$no">查看完整热点榜 ></div>
            </div>
          </SlideItem>
          <SlideItem>
            <div class="slide1" ref="slide1">
              <div class="l-row" v-for="(item,index) in liveRankList">
                <div class="rank-wrapper">
                  <div class="rank" :class="{top:index<3}">{{ index + 1 }}</div>
                </div>
                <div class="right">
                  <div class="center">
                    <div class="avatar-wrapper">
                      <img src="../../assets/img/icon/avatar/1.png" alt="" class="avatar">
                    </div>
                    <div class="desc">{{ item.name }}</div>
                    <div v-if="item.type === 0" class="live-type">
                      <img class="type1" src="../../assets/img/icon/home/pk.webp">
                      <span>PK</span>
                    </div>
                    <div v-if="item.type === 1" class="live-type">
                      <img class="type2" src="../../assets/img/icon/home/redpack.png">
                      <span>红包</span>
                    </div>
                  </div>
                  <div class="count">999w人气</div>
                </div>
              </div>
              <div class="more" @click="$no">查看完整直播榜 ></div>
            </div>
          </SlideItem>
          <SlideItem>
            <div class="slide2" ref="slide2">
              <div class="l-row" v-for="(item,index) in musicRankList" @click="$nav('/home/music-rank-list')">
                <div class="rank-wrapper">
                  <div class="rank" :class="{top:index < 3}">{{ index + 1 }}</div>
                </div>
                <div class="right">
                  <div class="center">
                    <div class="avatar-wrapper">
                      <img v-lazy="$imgPreview(item.cover)" alt="" class="avatar">
                    </div>
                    <div class="desc">{{ item.name }}</div>
                  </div>
                  <div class="count">
                    <img src="../../assets/img/icon/home/hot-gray.png" alt="">
                    <span>{{ formatNumber(item.use_count) }}</span>
                  </div>
                </div>
              </div>
              <div class="more" @click="$nav('/home/music-rank-list')">查看完整音乐榜 ></div>
            </div>
          </SlideItem>
          <SlideItem>
            <div class="slide3" ref="slide3">
              <div class="slide4-wrapper">
                <div class="brands">
                  <div class="brand"
                       @click="toggleKey(key)"
                       :class="{active:key === selectBrandKey}"
                       v-for="key in Object.keys(brandRankList)">
                    {{ key }}
                  </div>
                </div>
                <div class="l-row" v-for="(item,index) in selectBrandList">
                  <div class="rank-wrapper">
                    <div class="rank" :class="{top:index < 3}">{{ index + 1 }}</div>
                  </div>
                  <div class="right">
                    <div class="center">
                      <div class="avatar-wrapper" :class="item.living ? 'living':''">
                        <div class="avatar-out-line"></div>
                        <img v-lazy="$imgPreview(item.logo)" alt="" class="avatar">
                        <!--                      <img :src="item.logo" class="avatar">-->
                      </div>
                      <div class="desc">{{ item.name }}</div>
                    </div>
                    <div class="count">
                      <img src="../../assets/img/icon/home/hot-gray.png" alt="">
                      <span>{{ formatNumber(item.hot_count) }}</span>
                    </div>
                  </div>
                </div>
                <div class="more" @click="$no">查看完整品牌榜 ></div>
              </div>

              <SlideRowList
                  :autoplay="true"
                  indicatorType="bullets"
              >
                <SlideItem>
                  <div class="ad">AD1</div>
                </SlideItem>
                <SlideItem>
                  <div class="ad">AD2</div>
                </SlideItem>
                <SlideItem>
                  <div class="ad">AD3</div>
                </SlideItem>
                <SlideItem>
                  <div class="ad">AD4</div>
                </SlideItem>
                <SlideItem>
                  <div class="ad">AD5</div>
                </SlideItem>
                <SlideItem>
                  <div class="ad">AD6</div>
                </SlideItem>
                <SlideItem>
                  <div class="ad">AD7</div>
                </SlideItem>
                <SlideItem>
                  <div class="ad">AD8</div>
                </SlideItem>
              </SlideRowList>
            </div>
          </SlideItem>
        </SlideRowList>
      </div>
    </div>
  </div>
</template>
<script>
import Search from "../../components/Search";
import _ from 'lodash'
import Dom from "../../utils/dom";
import {nextTick} from "vue";

export default {
  name: "SearchPage",
  components: {
    'BSearch': Search
  },
  data() {
    return {
      isExpand: false,
      history: [
        '历史记录1',
        '历史记录2',
        '历史记录3',
        '历史记录4',
        '历史记录5',
        '历史记录6',
        '历史记录7',
        '历史记录8',
        '历史记录9',
        '历史记录10',
      ],
      guess: [
        {name: '少年透明人', type: -1},
        {name: '花呗分批次接入征信', type: -1},
        {name: '新娘婚礼上跪求悔婚', type: -1},
        {name: '当你想换iPhone13时', type: -1},
        {name: 'Ling OS灵犀系统', type: -1},
        {name: '桑塔纳2022款', type: -1},
        {name: '透明人', type: -1},
        {name: '恒大集团凌晨发公告', type: 0},
        {name: '2022款日产GT-R', type: 1},
        {name: '四川双一流大学名单', type: -1},
        {name: '一公司放假通知走红', type: -1},
        {name: '成都新全优教育倒闭', type: -1},
        {name: '当代女生社交现状', type: -1},
        {name: '恒大集团凌晨发公告', type: -1},
      ],
      randomGuess: [],
      hotRankList: [
        {name: '国内手机厂商最大的软肋就是 android 系统！', type: 0},
        {name: '大家的官网订单现在什么状态', type: -1},
        {name: '库克不愧是供应链管理大师， A15 一鱼三吃', type: -1},
        {name: '找到了 iOS 被怀疑淘宝窃听的可能原因', type: 1},
        {name: 'rebase 还是 merge？', type: -1},
        {name: '十一出游西安，西安的大佬们能给些建议吗？', type: 0},
        {name: '领克 01，燃油还是 phev？', type: 1},
        {name: '为什么要抢购新手机呢？', type: -1},
        {name: '拼多多官方处理问题跟京东真的没法比', type: -1},
        {name: '百度输入法 VS 搜狗输入法', type: -1},
        {name: '关于 ios 上 app 检测代理', type: 0},
        {name: 'iPadmini6 到货以后，要不要换路由器', type: 1},
        {name: '现在有推荐的同步盘么？', type: -1},
        {name: '大哥们， mac 电池鼓包你们都咋修的。。', type: -1},
        {name: '发现一个特别赞的同步盘方案 Resilio Sync', type: -1},
        {name: '得鼻炎了, 说下症状和应对吧', type: 1},
        {name: '打翻了一瓶矿泉水在 MacBook Pro 上，赶紧用鼠标关机了，等多久可以尝试开机？', type: 0},
        {name: '筋膜枪哪个牌子好啊？', type: -1},
        {name: '最近在学理财小白基础知识，然后请教大家办哪个证券账户比较好呀', type: -1},
        {name: '有没有长期使用 sidecar 功能的 V 友，这个东西长期的稳定性如何？', type: 0},
        {name: '犹豫是否要年年焕新', type: -1},
        {name: '请问如何在国内给 AppStore HK/TW 区充值.', type: 0},
        {name: '最近感觉一个妹子不错，不过我比她大 5 岁', type: 1},
        {name: '12mini 1 月 20 号购入，现在电池健康 92%，正常现象？', type: -1},
        {name: '现在新 iphone12/128 啥价格比较合适啊？', type: -1},
        {name: 'iOS 15 不改地区就能看到全球所有交通卡', type: -1},
        {name: '求推荐拼车/打车软件', type: 1},
        {name: '如何比较方便的杀死 nohup 起的进程及其所有子进程?', type: 0},
        {name: '换了新工作，好像又掉坑里了。', type: 0},
        {name: '有没有这样一款记账软件？', type: 1},
      ],
      liveRankList: [
        {name: '毛三岁（收女徒弟）', type: 0},
        {name: '广州表哥', type: -1},
        {name: '一只扬儿', type: -1},
        {name: '沈酒', type: -1},
        {name: '客家婷子', type: 1},
        {name: '三斤.（9237）', type: -1},
        {name: '虎哥说车', type: -1},
        {name: '爆笑三江锅（永不言败）', type: -1},
        {name: '子豪(尊师胜仔）5点扛把子', type: 1},
        {name: '琪琪', type: -1},
        {name: '战神土牛（征战全网）', type: 0},
        {name: '小鲁班下午5点直播', type: -1},
        {name: '惠子ssica', type: -1},
        {name: '大狼狗郑建鹏&言真夫妇', type: -1},
        {name: '一条小团团', type: -1},
        {name: '高火火', type: -1},
        {name: '郭聪明', type: -1},
        {name: '罗永浩', type: 1},
        {name: '陈赫', type: 0},
        {name: '摩登兄弟', type: -1},
        {name: '浪老师', type: -1},
        {name: '陈死狗cnh', type: -1},
        {name: '杨驴驴y', type: -1},
        {name: 'imxiaoxin', type: 0},
        {name: '丶才子欧巴', type: -1},
        {name: '旭旭宝宝', type: -1},
        {name: 'pigff', type: -1},
        {name: '正经人令北', type: -1},
        {name: '雨神丶', type: -1},
        {name: '智勋勋勋勋', type: 0},
      ],
      musicRankList: [
        {
          name: '龙卷风',
          "mp3": "http://im5.tongbu.com/rings/singerring/zt_uunGo_1/5605.mp3",
          cover: new URL('../../assets/img/music-cover/1.png', import.meta.url).href,
          author: '周杰伦',
          duration: 99,
          use_count: 37441000,
          is_collect: false,
          is_play: false,
        },
        {
          name: '爱在西元前',
          mp3: 'https://m3.8js.net:99/1916/501204165042405.mp3',
          cover: new URL('../../assets/img/music-cover/2.png', import.meta.url).href,
          author: '周杰伦',
          duration: 60,
          use_count: 37441000,
          is_collect: false,
          is_play: false,
        },
        {
          name: '蜗牛',
          mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/3684.mp3',
          cover: new URL('../../assets/img/music-cover/3.png', import.meta.url).href,
          author: '周杰伦',
          duration: 60,
          use_count: 37441000,
          is_collect: false,
          is_play: false,
        },
        {
          name: '半岛铁盒',
          mp3: 'https://m3.8js.net:99/2016n/46/94745.mp3',
          cover: new URL('../../assets/img/music-cover/4.png', import.meta.url).href,
          author: '周杰伦',
          duration: 60,
          use_count: 37441000,
          is_collect: false,
          is_play: false,
        },
        {
          name: '轨迹',
          mp3: 'https://m3.8js.net:99/1832/411204324135934.mp3',
          cover: new URL('../../assets/img/music-cover/5.png', import.meta.url).href,
          author: '周杰伦',
          duration: 60,
          use_count: 37441000,
          is_collect: false,
          is_play: false,
        },
        {
          name: '七里香',
          mp3: 'https://m3.8js.net:99/2016n/14/53717.mp3',
          cover: new URL('../../assets/img/music-cover/6.png', import.meta.url).href,
          author: '周杰伦',
          duration: 60,
          use_count: 37441000,
          is_collect: false,
          is_play: false,
        },
        {
          name: '发如雪',
          mp3: 'https://m3.8js.net:99/2014/211204142150965.mp3',
          cover: new URL('../../assets/img/music-cover/7.png', import.meta.url).href,
          author: '周杰伦',
          duration: 60,
          use_count: 37441000,
          is_collect: false,
          is_play: false,
        },
        {
          name: '霍元甲',
          mp3: 'https://m3.8js.net:99/1921/261204212643140.mp3',
          cover: new URL('../../assets/img/music-cover/8.png', import.meta.url).href,
          author: '周杰伦',
          duration: 60,
          use_count: 37441000,
          is_collect: false,
          is_play: false,
        },
        {
          name: '千里之外(周杰伦/费玉清)',
          mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/121.mp3',
          cover: new URL('../../assets/img/music-cover/9.png', import.meta.url).href,
          author: '周杰伦',
          duration: 60,
          use_count: 37441000,
          is_collect: false,
          is_play: false,
        },
        {
          name: '菊花台',
          mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/2022.mp3',
          cover: new URL('../../assets/img/music-cover/10.png', import.meta.url).href,
          author: '周杰伦',
          duration: 60,
          use_count: 37441000,
          is_collect: false,
          is_play: false,
        },
        {
          name: '不能说的秘密',
          mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/165.mp3',
          cover: new URL('../../assets/img/music-cover/11.png', import.meta.url).href,
          author: '周杰伦',
          duration: 60,
          use_count: 37441000,
          is_collect: false,
          is_play: false,
        },
        {
          name: '牛仔很忙',
          mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/219.mp3',
          cover: new URL('../../assets/img/music-cover/12.png', import.meta.url).href,
          author: '周杰伦',
          duration: 60,
          use_count: 37441000,
          is_collect: false,
          is_play: false,
        },
        {
          name: '给我一首歌的时间',
          mp3: 'https://m3.8js.net:99/1938/041204380445445.mp3',
          cover: new URL('../../assets/img/music-cover/13.jpg', import.meta.url).href,
          author: '周杰伦',
          duration: 60,
          use_count: 37441000,
          is_collect: false,
          is_play: false,
        },
        {
          name: '烟花易冷',
          mp3: 'https://m3.8js.net:99/1828/051204280535192.mp3',
          cover: new URL('../../assets/img/music-cover/14.jpg', import.meta.url).href,
          author: '周杰伦',
          duration: 60,
          use_count: 37441000,
          is_collect: false,
          is_play: false,
        },
        {
          name: '惊叹号',
          mp3: 'https://m3.8js.net:99/20111103/150.mp3',
          cover: new URL('../../assets/img/music-cover/15.jpg', import.meta.url).href,
          author: '周杰伦',
          duration: 60,
          use_count: 37441000,
          is_collect: false,
          is_play: false,
        },
        {
          name: '明明就',
          mp3: 'https://m3.8js.net:99/2016n/27/96537.mp3',
          cover: new URL('../../assets/img/music-cover/16.jpg', import.meta.url).href,
          author: '周杰伦',
          duration: 60,
          use_count: 37441000,
          is_collect: false,
          is_play: false,
        },
        {
          name: '算什么男人',
          mp3: 'https://m3.8js.net:99/20150107/429.mp3',
          cover: new URL('../../assets/img/music-cover/17.jpg', import.meta.url).href,
          author: '周杰伦',
          duration: 60,
          use_count: 37441000,
          is_collect: false,
          is_play: false,
        },
        {
          name: '告白气球',
          mp3: 'https://m3.8js.net:99/20161016/481.mp3',
          cover: new URL('../../assets/img/music-cover/18.jpg', import.meta.url).href,
          author: '周杰伦',
          duration: 60,
          use_count: 37441000,
          is_collect: false,
          is_play: false,
        },
      ],
      brandRankList: {
        '汽车': [
          {
            name: '五菱汽车',
            logo: 'https://www.wuling.com/favicon.ico',
            hot_count: 1395,
            living: false
          },
          {
            name: '宝马',
            logo: 'https://www.bmw.com.cn/etc/clientlibs/digitals2/clientlib/media/img/BMW_Grey_Logo.svg',
            hot_count: 1395,
            living: true
          },
          {
            name: '吉利汽车',
            logo: 'http://www.cargc.com/uploads/allimg/200828/1401364511-2.jpg',
            hot_count: 1395,
            living: false
          },
          {
            name: '一汽大众-奥迪',
            logo: 'https://www.audi.cn/bin/nemo.static.20210916063431/cms4i-nemo/assets/icons/favicon/favicon-v4.ico',
            hot_count: 1395,
            living: false
          },
          {
            name: '一汽-大众',
            logo: 'https://www.vw.com.cn/favicon.ico',
            hot_count: 1395,
            living: false
          },
        ],
        '手机': [
          {
            name: '华为',
            logo: 'https://isesglobal.com/wp-content/uploads/2021/01/Huawei.jpg',
            hot_count: 1395,
            living: false
          },
          {
            name: '小米',
            logo: 'https://s01.mifile.cn/favicon.ico',
            hot_count: 1395,
            living: true
          },
          {
            name: 'vivo',
            logo: 'http://wwwstatic.vivo.com.cn/vivoportal/web/dist/img/common/favicon_ecf768e.ico',
            hot_count: 1395,
            living: false
          },
          {
            name: 'oppo',
            logo: 'https://code.oppo.com/etc.clientlibs/global-site/clientlibs/clientlib-design/resources/icons/favicon.ico',
            hot_count: 1395,
            living: false
          },
          {
            name: '三星',
            logo: 'https://www.samsung.com/etc.clientlibs/samsung/clientlibs/consumer/global/clientlib-common/resources/images/Favicon.png',
            hot_count: 1395,
            living: false
          },
        ],
        '美妆': [
          {
            name: '巴黎欧莱雅',
            logo: 'https://oap-cn-prd-cd.e-loreal.cn/-/media/project/loreal/brand-sites/oap/apac/cn/identity/image-2020-06-19-20-48-00-996.png',
            hot_count: 1395,
            living: false
          },
          {
            name: '花西子',
            logo: 'https://www.haoyunbb.com/img/allimg/210607/001I43462-0.png',
            hot_count: 1395,
            living: false
          },
          {
            name: '完美日记',
            logo: 'http://5b0988e595225.cdn.sohucs.com/images/20200412/9c6caafca79e438f98d98d3986ebce4d.png',
            hot_count: 1395,
            living: false
          },
          {
            name: '雅诗兰黛',
            logo: 'https://vipyidiancom.oss-cn-beijing.aliyuncs.com/vipyidian.com/article/1_150918143107_1.png',
            hot_count: 1395,
            living: false
          },
          {
            name: 'COLORKEY珂拉琪',
            logo: 'https://www.80wzbk.com/uploads/logo/20210129/20210129104015_541.jpg',
            hot_count: 1395,
            living: false
          },
        ]
      },
      selectBrandKey: '汽车',
      selectBrandKeyIndex: 0,
      slideIndex: 0,
      timer: null,
      slideItemHeight: null
    }
  },
  computed: {
    lHistory() {
      if (this.isExpand) {
        if (this.history.length > 10) return this.history.slice(0, 10)
        return this.history
      } else {
        if (this.history.length > 2) return this.history.slice(0, 2)
        return this.history
      }
    },
    selectBrandList() {
      return this.brandRankList[this.selectBrandKey]
    },
    brandListKeys() {
      return Object.keys(this.brandRankList)
    },
    slideListHeight() {
      return {height: this.slideItemHeight ? (this.slideItemHeight + 'px') : '100%'}
    }
  },
  watch: {
    slideIndex: {
      handler(newVal) {
        nextTick(() => {
          // console.log(this.$refs[`slide${newVal}`])
          this.slideItemHeight = new Dom(`.slide${newVal}`).css('height')
          // console.log(this.slideItemHeight)
          this.slideItemHeight = parseFloat(this.slideItemHeight) + 50
        })
        if (newVal === 3) {
          this.timer = setInterval(() => {
            if (this.selectBrandKeyIndex === this.brandListKeys.length - 1) {
              this.selectBrandKeyIndex = 0
            } else {
              this.selectBrandKeyIndex++
            }
            this.selectBrandKey = this.brandListKeys[this.selectBrandKeyIndex]
          }, 3000)
        } else {
          clearInterval(this.timer)
        }
      },
      immediate: true
    }
  },
  created() {
    this.history = this.history.reverse()
    this.refresh()
  },
  methods: {
    toggleKey(key) {
      this.selectBrandKey = key
      clearInterval(this.timer)
    },
    refresh() {
      this.randomGuess = _.sampleSize(this.guess, 6)
    },
    toggle() {
      if (this.isExpand) {
        this.$showSimpleConfirmDialog('是否清空历史记录？', () => {
          this.history = []
        }, null, '确定', '取消')
      } else {
        this.isExpand = true
      }
    }
  }
}
</script>

<style scoped lang="less">
@import "../../assets/less/index";

.Search {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  overflow: auto;
  color: white;
  font-size: 14rem;

  .type {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 16rem;
    width: 16rem;
    font-size: 12rem;
    margin-left: 5rem;
    border-radius: 2rem;

    &.hot {
      background: @primary-btn-color;
    }

    &.new {
      background: rgb(186, 51, 226);
    }
  }

  .header {
    z-index: 4;
    background: @main-bg;
    height: 60rem;
    font-size: 14rem;
    padding: 0 @padding-page;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid @line-color;
    position: fixed;
    width: 100vw;
    box-sizing: border-box;
    top: 0;

    .search-ctn {
      flex: 1;
    }

    .scan {
      transform: scale(2);
      height: 10rem;
      width: 10rem;
    }
  }

  .content {
    padding-top: 60rem;

    .history {
      .row {
        min-height: 40rem;
      }

      .history-expand {
        text-align: center;
        padding: 10rem;
        color: @second-text-color;
      }
    }

    .guess {
      padding: 0 @padding-page;

      .title {
        font-size: 14rem;
        padding: 10rem 0;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .right {
          color: @second-text-color;
          display: flex;
          align-items: center;

          img {
            margin-right: 5rem;
            width: 13rem;
            height: 13rem;
          }
        }
      }

      .keys {
        font-size: 16rem;
        display: flex;
        flex-wrap: wrap;

        .key {
          box-sizing: border-box;
          padding: 8rem 0;
          width: 49%;
          display: flex;
          align-items: center;

          .desc {
            max-width: 80%;
            font-size: 14rem;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }

        }
      }
    }

    .rank-list {
      .indicator {
        padding: 15rem;
        display: flex;
        align-items: center;
        font-size: 14rem;

        .tab {
          color: @second-text-color;
          margin-right: 20rem;

          &.active {
            transform: scale(1.2);
            color: white;
          }

          &:nth-child(1) {
            &.active {
              font-weight: bold;
              background: linear-gradient(to right, rgb(255, 165, 71), rgb(218, 77, 115));
              -webkit-background-clip: text;
              color: transparent;
            }
          }
        }
      }

      .slide0 {
        box-sizing: border-box;
        margin: 0 @padding-page 50rem @padding-page;
        background: linear-gradient(to right, rgb(32, 29, 36), rgb(50, 29, 38));
        padding: @padding-page;
        border-radius: 10rem;

        .l-row {
          font-size: 14rem;
          display: flex;
          margin-bottom: 16rem;
          align-items: center;
          color: @second-text-color;

          .rank-wrapper {
            display: flex;
            align-items: center;

            .rank {
              width: 18rem;
              height: 18rem;
              line-height: 18rem;
              text-align: center;
              margin-right: 15rem;
            }
          }

          .right {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .center {
              width: calc(100vw - 140rem);
              box-sizing: border-box;
              //padding: 0 1rem;
              //flex: 1;
              display: flex;
              align-items: center;
              font-size: 14rem;
              color: white;

              .desc {
                max-width: 85%;
                font-size: 14rem;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
            }

            .count {
              font-size: 12rem;
            }
          }
        }
      }

      .slide1 {
        box-sizing: border-box;
        margin: 0 @padding-page 50rem @padding-page;
        background: rgb(20, 22, 34);
        border: 1px solid rgba(31, 34, 52, 0.5);
        padding: @padding-page;
        border-radius: 10rem;

        .l-row {
          font-size: 14rem;
          display: flex;
          margin-bottom: 10rem;
          align-items: center;
          color: @second-text-color;

          &:active {
            opacity: .5;
          }

          .rank-wrapper {
            display: flex;
            align-items: center;

            .rank {
              width: 18rem;
              height: 18rem;
              line-height: 18rem;
              text-align: center;
              margin-right: 15rem;

              &.top {
                color: yellow;
              }
            }
          }

          .right {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .center {
              width: calc(100vw - 160rem);
              box-sizing: border-box;
              //padding: 0 1rem;
              //flex: 1;
              display: flex;
              align-items: center;
              font-size: 14rem;
              color: white;

              .avatar-wrapper {
                @width: 35rem;
                margin-right: 10rem;
                display: flex;
                align-items: center;
                justify-content: center;
                width: @width;
                height: @width;
                border-radius: 50%;
                background: @primary-btn-color;

                .avatar {
                  width: @width - 0.3;
                  border-radius: 50%;
                  padding: 1rem;
                  background: black;
                }
              }

              .desc {
                max-width: 55%;
                font-size: 14rem;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }

              .live-type {
                height: 22rem;
                padding: 0 5rem;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 10rem;
                color: @second-text-color;
                margin-left: 5rem;
                border-radius: 2rem;
                background: @second-btn-color-tran;

                .type2 {
                  margin-right: 2rem;
                  width: 10rem;
                  height: 10rem;
                }

                .type1 {
                  margin-right: 2rem;
                  width: 15rem;
                  height: 10rem;
                }

              }
            }

            .count {
              font-size: 12rem;
            }
          }
        }
      }

      .slide2 {
        box-sizing: border-box;
        margin: 0 @padding-page 50rem @padding-page;
        background: rgb(20, 22, 34);
        border: 1px solid rgba(31, 34, 52, 0.5);
        padding: @padding-page;
        border-radius: 10rem;

        .l-row {
          font-size: 14rem;
          display: flex;
          margin-bottom: 10rem;
          align-items: center;
          color: @second-text-color;

          &:active {
            opacity: .5;
          }

          .rank-wrapper {
            display: flex;
            align-items: center;

            .rank {
              width: 18rem;
              height: 18rem;
              line-height: 18rem;
              text-align: center;
              margin-right: 15rem;

              &.top {
                color: yellow;
              }
            }
          }

          .right {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .center {
              width: calc(100vw - 150rem);
              box-sizing: border-box;
              //padding: 0 1rem;
              //flex: 1;
              display: flex;
              align-items: center;
              font-size: 14rem;
              color: white;

              .avatar-wrapper {
                margin-right: 10rem;

                .avatar {
                  width: 30rem;
                  height: 30rem;
                  border-radius: 2rem;
                }
              }

              .desc {
                max-width: 95%;
                font-size: 14rem;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }

            }

            .count {
              display: flex;
              align-items: center;
              font-size: 12rem;

              img {
                margin-right: 2rem;
                width: 15rem;
                height: 15rem;
              }
            }
          }
        }
      }

      .slide3 {
        box-sizing: border-box;
        margin: 0 @padding-page 50rem @padding-page;
        border-radius: 10rem;

        .slide4-wrapper {
          padding: 5rem @padding-page;

          .brands {
            color: @second-text-color;
            font-size: 12rem;
            margin-bottom: 15rem;
            display: flex;

            .brand {
              border-radius: 2rem;
              margin-right: 10rem;
              padding: 5rem 10rem;
              background: @second-btn-color-tran;

              &.active {
                color: white;
                background: @second-btn-color;
              }
            }
          }

          .l-row {
            font-size: 14rem;
            display: flex;
            margin-bottom: 10rem;
            align-items: center;
            color: @second-text-color;

            &:active {
              opacity: .5;
            }

            .rank-wrapper {
              display: flex;
              align-items: center;

              .rank {
                width: 18rem;
                height: 18rem;
                line-height: 18rem;
                text-align: center;
                margin-right: 15rem;

                &.top {
                  color: yellow;
                }
              }
            }

            .right {
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: space-between;

              .center {
                width: calc(100vw - 150rem);
                box-sizing: border-box;
                //padding: 0 1rem;
                //flex: 1;
                display: flex;
                align-items: center;
                font-size: 14rem;
                color: white;

                .avatar-wrapper {
                  @width: 35rem;
                  margin-right: 10rem;

                  &.living {
                    position: relative;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: @width;
                    height: @width;
                    border-radius: 50%;
                    background: @primary-btn-color;

                    .avatar-out-line {
                      width: @width;
                      height: @width;
                      position: absolute;
                      background: transparent;
                      border-radius: 50%;
                      border: 2rem solid @primary-btn-color;
                      animation: avatar-out-line 1s infinite;

                      @keyframes avatar-out-line {
                        from {
                          padding: 0;
                        }
                        to {
                          opacity: 0;
                          padding: 2rem;
                        }
                      }
                    }

                    .avatar {
                      padding: 1rem;
                      animation: avatar 1s infinite alternate;
                    }
                  }

                  .avatar {
                    position: relative;
                    z-index: 2;
                    width: @width - 0.3;
                    height: @width - 0.3;
                    border-radius: 50%;
                    background: black;
                    box-sizing: border-box;

                    @keyframes avatar {
                      from {
                        padding: 1rem;
                      }
                      to {
                        padding: 2rem;
                      }
                    }
                  }
                }

                .desc {
                  max-width: 95%;
                  font-size: 14rem;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
                }

              }

              .count {
                display: flex;
                align-items: center;
                font-size: 12rem;

                img {
                  margin-right: 2rem;
                  width: 15rem;
                  height: 15rem;
                }
              }
            }
          }
        }

        .ad {
          background: @second-btn-color-tran;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100rem;
        }
      }

      .more {
        margin-bottom: 20rem;
        font-size: 12rem;
        padding: 10rem 10rem 0 10rem;
        text-align: center;
        color: yellow;
      }
    }
  }
}
</style>
