You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1245 lines
38 KiB
1245 lines
38 KiB
<template> |
|
<div class="Search"> |
|
<div class="header"> |
|
<back mode="light" @click="$back" class="mr1r"></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> |
|
<back img="close" mode="gray" @click="history.splice(index,1)" scale=".7"></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>{{ $likeNum(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>{{ $likeNum(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: require('../../assets/img/music-cover/1.png'), |
|
author: '周杰伦', |
|
duration: 99, |
|
use_count: 37441000, |
|
is_collect: false, |
|
is_play: false, |
|
}, |
|
{ |
|
name: '爱在西元前', |
|
mp3: 'https://m3.8js.net:99/1916/501204165042405.mp3', |
|
cover: require('../../assets/img/music-cover/2.png'), |
|
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: require('../../assets/img/music-cover/3.png'), |
|
author: '周杰伦', |
|
duration: 60, |
|
use_count: 37441000, |
|
is_collect: false, |
|
is_play: false, |
|
}, |
|
{ |
|
name: '半岛铁盒', |
|
mp3: 'https://m3.8js.net:99/2016n/46/94745.mp3', |
|
cover: require('../../assets/img/music-cover/4.png'), |
|
author: '周杰伦', |
|
duration: 60, |
|
use_count: 37441000, |
|
is_collect: false, |
|
is_play: false, |
|
}, |
|
{ |
|
name: '轨迹', |
|
mp3: 'https://m3.8js.net:99/1832/411204324135934.mp3', |
|
cover: require('../../assets/img/music-cover/5.png'), |
|
author: '周杰伦', |
|
duration: 60, |
|
use_count: 37441000, |
|
is_collect: false, |
|
is_play: false, |
|
}, |
|
{ |
|
name: '七里香', |
|
mp3: 'https://m3.8js.net:99/2016n/14/53717.mp3', |
|
cover: require('../../assets/img/music-cover/6.png'), |
|
author: '周杰伦', |
|
duration: 60, |
|
use_count: 37441000, |
|
is_collect: false, |
|
is_play: false, |
|
}, |
|
{ |
|
name: '发如雪', |
|
mp3: 'https://m3.8js.net:99/2014/211204142150965.mp3', |
|
cover: require('../../assets/img/music-cover/7.png'), |
|
author: '周杰伦', |
|
duration: 60, |
|
use_count: 37441000, |
|
is_collect: false, |
|
is_play: false, |
|
}, |
|
{ |
|
name: '霍元甲', |
|
mp3: 'https://m3.8js.net:99/1921/261204212643140.mp3', |
|
cover: require('../../assets/img/music-cover/8.png'), |
|
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: require('../../assets/img/music-cover/9.png'), |
|
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: require('../../assets/img/music-cover/10.png'), |
|
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: require('../../assets/img/music-cover/11.png'), |
|
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: require('../../assets/img/music-cover/12.png'), |
|
author: '周杰伦', |
|
duration: 60, |
|
use_count: 37441000, |
|
is_collect: false, |
|
is_play: false, |
|
}, |
|
{ |
|
name: '给我一首歌的时间', |
|
mp3: 'https://m3.8js.net:99/1938/041204380445445.mp3', |
|
cover: require('../../assets/img/music-cover/13.jpg'), |
|
author: '周杰伦', |
|
duration: 60, |
|
use_count: 37441000, |
|
is_collect: false, |
|
is_play: false, |
|
}, |
|
{ |
|
name: '烟花易冷', |
|
mp3: 'https://m3.8js.net:99/1828/051204280535192.mp3', |
|
cover: require('../../assets/img/music-cover/14.jpg'), |
|
author: '周杰伦', |
|
duration: 60, |
|
use_count: 37441000, |
|
is_collect: false, |
|
is_play: false, |
|
}, |
|
{ |
|
name: '惊叹号', |
|
mp3: 'https://m3.8js.net:99/20111103/150.mp3', |
|
cover: require('../../assets/img/music-cover/15.jpg'), |
|
author: '周杰伦', |
|
duration: 60, |
|
use_count: 37441000, |
|
is_collect: false, |
|
is_play: false, |
|
}, |
|
{ |
|
name: '明明就', |
|
mp3: 'https://m3.8js.net:99/2016n/27/96537.mp3', |
|
cover: require('../../assets/img/music-cover/16.jpg'), |
|
author: '周杰伦', |
|
duration: 60, |
|
use_count: 37441000, |
|
is_collect: false, |
|
is_play: false, |
|
}, |
|
{ |
|
name: '算什么男人', |
|
mp3: 'https://m3.8js.net:99/20150107/429.mp3', |
|
cover: require('../../assets/img/music-cover/17.jpg'), |
|
author: '周杰伦', |
|
duration: 60, |
|
use_count: 37441000, |
|
is_collect: false, |
|
is_play: false, |
|
}, |
|
{ |
|
name: '告白气球', |
|
mp3: 'https://m3.8js.net:99/20161016/481.mp3', |
|
cover: require('../../assets/img/music-cover/18.jpg'), |
|
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: 1.4rem; |
|
|
|
.type { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
height: 1.6rem; |
|
width: 1.6rem; |
|
font-size: 1.2rem; |
|
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: 6rem; |
|
font-size: 1.4rem; |
|
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: 1rem; |
|
width: 1rem; |
|
} |
|
} |
|
|
|
.content { |
|
padding-top: 6rem; |
|
|
|
.history { |
|
.row { |
|
min-height: 4rem; |
|
} |
|
|
|
.history-expand { |
|
text-align: center; |
|
padding: 1rem; |
|
color: @second-text-color; |
|
} |
|
} |
|
|
|
.guess { |
|
padding: 0 @padding-page; |
|
|
|
.title { |
|
font-size: 1.4rem; |
|
padding: 1rem 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: 1.3rem; |
|
height: 1.3rem; |
|
} |
|
} |
|
} |
|
|
|
.keys { |
|
font-size: 1.6rem; |
|
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: 1.4rem; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
overflow: hidden; |
|
} |
|
|
|
} |
|
} |
|
} |
|
|
|
.rank-list { |
|
.indicator { |
|
padding: 1.5rem; |
|
display: flex; |
|
align-items: center; |
|
font-size: 1.4rem; |
|
|
|
.tab { |
|
color: @second-text-color; |
|
margin-right: 2rem; |
|
|
|
&.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 5rem @padding-page; |
|
background: linear-gradient(to right, rgb(32, 29, 36), rgb(50, 29, 38)); |
|
padding: @padding-page; |
|
border-radius: 1rem; |
|
|
|
.l-row { |
|
font-size: 1.4rem; |
|
display: flex; |
|
margin-bottom: 1.6rem; |
|
align-items: center; |
|
color: @second-text-color; |
|
|
|
.rank-wrapper { |
|
display: flex; |
|
align-items: center; |
|
|
|
.rank { |
|
width: 1.8rem; |
|
height: 1.8rem; |
|
line-height: 1.8rem; |
|
text-align: center; |
|
margin-right: 1.5rem; |
|
} |
|
} |
|
|
|
.right { |
|
flex: 1; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
|
|
.center { |
|
width: calc(100vw - 14rem); |
|
box-sizing: border-box; |
|
//padding: 0 1rem; |
|
//flex: 1; |
|
display: flex; |
|
align-items: center; |
|
font-size: 1.4rem; |
|
color: white; |
|
|
|
.desc { |
|
max-width: 85%; |
|
font-size: 1.4rem; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
overflow: hidden; |
|
} |
|
} |
|
|
|
.count { |
|
font-size: 1.2rem; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.slide1 { |
|
box-sizing: border-box; |
|
margin: 0 @padding-page 5rem @padding-page; |
|
background: rgb(20, 22, 34); |
|
border: 1px solid rgba(31, 34, 52, 0.5); |
|
padding: @padding-page; |
|
border-radius: 1rem; |
|
|
|
.l-row { |
|
font-size: 1.4rem; |
|
display: flex; |
|
margin-bottom: 1rem; |
|
align-items: center; |
|
color: @second-text-color; |
|
|
|
&:active { |
|
opacity: .5; |
|
} |
|
|
|
.rank-wrapper { |
|
display: flex; |
|
align-items: center; |
|
|
|
.rank { |
|
width: 1.8rem; |
|
height: 1.8rem; |
|
line-height: 1.8rem; |
|
text-align: center; |
|
margin-right: 1.5rem; |
|
|
|
&.top { |
|
color: yellow; |
|
} |
|
} |
|
} |
|
|
|
.right { |
|
flex: 1; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
|
|
.center { |
|
width: calc(100vw - 16rem); |
|
box-sizing: border-box; |
|
//padding: 0 1rem; |
|
//flex: 1; |
|
display: flex; |
|
align-items: center; |
|
font-size: 1.4rem; |
|
color: white; |
|
|
|
.avatar-wrapper { |
|
@width: 3.5rem; |
|
margin-right: 1rem; |
|
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: 1.4rem; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
overflow: hidden; |
|
} |
|
|
|
.live-type { |
|
height: 2.2rem; |
|
padding: 0 .5rem; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
font-size: 1rem; |
|
color: @second-text-color; |
|
margin-left: .5rem; |
|
border-radius: .2rem; |
|
background: @second-btn-color-tran; |
|
|
|
.type2 { |
|
margin-right: .2rem; |
|
width: 1rem; |
|
height: 1rem; |
|
} |
|
|
|
.type1 { |
|
margin-right: .2rem; |
|
width: 1.5rem; |
|
height: 1rem; |
|
} |
|
|
|
} |
|
} |
|
|
|
.count { |
|
font-size: 1.2rem; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.slide2 { |
|
box-sizing: border-box; |
|
margin: 0 @padding-page 5rem @padding-page; |
|
background: rgb(20, 22, 34); |
|
border: 1px solid rgba(31, 34, 52, 0.5); |
|
padding: @padding-page; |
|
border-radius: 1rem; |
|
|
|
.l-row { |
|
font-size: 1.4rem; |
|
display: flex; |
|
margin-bottom: 1rem; |
|
align-items: center; |
|
color: @second-text-color; |
|
|
|
&:active { |
|
opacity: .5; |
|
} |
|
|
|
.rank-wrapper { |
|
display: flex; |
|
align-items: center; |
|
|
|
.rank { |
|
width: 1.8rem; |
|
height: 1.8rem; |
|
line-height: 1.8rem; |
|
text-align: center; |
|
margin-right: 1.5rem; |
|
|
|
&.top { |
|
color: yellow; |
|
} |
|
} |
|
} |
|
|
|
.right { |
|
flex: 1; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
|
|
.center { |
|
width: calc(100vw - 15rem); |
|
box-sizing: border-box; |
|
//padding: 0 1rem; |
|
//flex: 1; |
|
display: flex; |
|
align-items: center; |
|
font-size: 1.4rem; |
|
color: white; |
|
|
|
.avatar-wrapper { |
|
margin-right: 1rem; |
|
|
|
.avatar { |
|
width: 3rem; |
|
height: 3rem; |
|
border-radius: .2rem; |
|
} |
|
} |
|
|
|
.desc { |
|
max-width: 95%; |
|
font-size: 1.4rem; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
overflow: hidden; |
|
} |
|
|
|
} |
|
|
|
.count { |
|
display: flex; |
|
align-items: center; |
|
font-size: 1.2rem; |
|
|
|
img { |
|
margin-right: .2rem; |
|
width: 1.5rem; |
|
height: 1.5rem; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.slide3 { |
|
box-sizing: border-box; |
|
margin: 0 @padding-page 5rem @padding-page; |
|
border-radius: 1rem; |
|
|
|
.slide4-wrapper { |
|
padding: .5rem @padding-page; |
|
|
|
.brands { |
|
color: @second-text-color; |
|
font-size: 1.2rem; |
|
margin-bottom: 1.5rem; |
|
display: flex; |
|
|
|
.brand { |
|
border-radius: .2rem; |
|
margin-right: 1rem; |
|
padding: .5rem 1rem; |
|
background: @second-btn-color-tran; |
|
|
|
&.active { |
|
color: white; |
|
background: @second-btn-color; |
|
} |
|
} |
|
} |
|
|
|
.l-row { |
|
font-size: 1.4rem; |
|
display: flex; |
|
margin-bottom: 1rem; |
|
align-items: center; |
|
color: @second-text-color; |
|
|
|
&:active { |
|
opacity: .5; |
|
} |
|
|
|
.rank-wrapper { |
|
display: flex; |
|
align-items: center; |
|
|
|
.rank { |
|
width: 1.8rem; |
|
height: 1.8rem; |
|
line-height: 1.8rem; |
|
text-align: center; |
|
margin-right: 1.5rem; |
|
|
|
&.top { |
|
color: yellow; |
|
} |
|
} |
|
} |
|
|
|
.right { |
|
flex: 1; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
|
|
.center { |
|
width: calc(100vw - 15rem); |
|
box-sizing: border-box; |
|
//padding: 0 1rem; |
|
//flex: 1; |
|
display: flex; |
|
align-items: center; |
|
font-size: 1.4rem; |
|
color: white; |
|
|
|
.avatar-wrapper { |
|
@width: 3.5rem; |
|
margin-right: 1rem; |
|
|
|
&.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: 1.4rem; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
overflow: hidden; |
|
} |
|
|
|
} |
|
|
|
.count { |
|
display: flex; |
|
align-items: center; |
|
font-size: 1.2rem; |
|
|
|
img { |
|
margin-right: .2rem; |
|
width: 1.5rem; |
|
height: 1.5rem; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
|
|
.ad { |
|
background: @second-btn-color-tran; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
height: 10rem; |
|
} |
|
} |
|
|
|
.more { |
|
margin-bottom: 2rem; |
|
font-size: 1.2rem; |
|
padding: 1rem 1rem 0 1rem; |
|
text-align: center; |
|
color: yellow; |
|
} |
|
} |
|
} |
|
} |
|
</style>
|
|
|