vue 仿tx导航栏效果

66 阅读 0 评论 44 点赞

我是靠谱客的博主强健枕头，最近开发中收集的这篇文章主要介绍vue 仿tx导航栏效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

只需添加一张图片即可以看到效果

.tt {
position: absolute;
background-image: url("../assets/images/bann1.webp");
width: 100%;
height: 100%;
background-position: center 0;
background-repeat: no-repeat;
}

直接上代码

<div class="head" :class="{is_fixed:isFixed}">
<div class="container">
<div class="head_inner">
<div class="site_logo">
<a href="" class="link_logo">腾讯视频</a>
</div>
<div class="site_channel" v-show="isFixed">
<a href="" class="channer_nav current_nav">精选</a>
<a href="" class="channer_nav">电视剧</a>
<a href="" class="channer_nav">电影</a>
<a href="" class="channer_nav">综艺</a>
<a href="" class="channer_nav">动漫</a>
<a href="" class="channer_nav">少儿</a>
<a href="" class="channer_nav">纪录片</a>
<a href="" class="channer_nav">音乐</a>
<a href="" class="channer_nav">NBA</a>
</div>
<div class="mod_search">
<div style="position: relative;flex: 1;">
<input :placeholder="holerSearch" class="search_input" ref="inputsearch"
@focus="getFocu" @blur="loseFoce"/>
<div class="mod_startbox" v-show="isFouc">
<div class="sb_history">
<div class="sb_head">
<div class="sb_title">历史记录</div>
<div class="sb_tools">
<a href="javascript:;" title="清除记录">
<a href="javascript:;" class="sb_del">清除记录</a>
</a>
</div>
</div>
<div class="sb_body">
<div class="sb_item">
<a href="javascript:;">不良人</a>
</div>
<div class="sb_item">
<a href="javascript:;">斗罗大陆</a>
</div>
<div class="sb_item">
<a href="javascript:;">斗罗大陆</a>
</div>
<div class="sb_item">
<a href="javascript:;">斗罗大陆</a>
</div>
</div>
</div>
<div class="sb_hot">
<div class="sb_head pb-10">
<div class="sb_title">热门搜索</div>
<div class="sb_tools">
<a href="javascript:;" title="更多热搜">
<a href="javascript:;" class="sb_del">更多热搜</a>
</a>
</div>
</div>
<div class="sb_body">
<div class="sb_item">
<a href="javascript:;">
<span class="sb_num sb_item_1">1</span>
<span class="sb_name">依兰爱情故事</span>
</a>
</div>
<div class="sb_item">
<a href="javascript:;">
<span class="sb_num sb_item_2">2</span>
<span class="sb_name">王牌对王牌 第7季</span>
</a>
</div>
<div class="sb_item">
<a href="javascript:;">
<span class="sb_num sb_item_3">3</span>
<span class="sb_name">斗罗大陆</span>
</a>
</div>
<div class="sb_item">
<a href="javascript:;">
<span class="sb_num">4</span>
<span class="sb_name">且试天下</span>
</a>
</div>
<div class="sb_item">
<a href="javascript:;">
<span class="sb_num">5</span>
<span class="sb_name">长津湖之水门桥</span>
</a>
</div>
<div class="sb_item">
<a href="javascript:;">
<span class="sb_num">6</span>
<span class="sb_name">特战荣耀</span>
</a>
</div>
<div class="sb_item">
<a href="javascript:;">
<span class="sb_num">7</span>
<span class="sb_name">完美世界</span>
</a>
</div>
<div class="sb_item">
<a href="javascript:;">
<span class="sb_num">8</span>
<span class="sb_name">搞怪女厨</span>
</a>
</div>
<div class="sb_item">
<a href="javascript:;">
<span class="sb_num">9</span>
<span class="sb_name">反转人生</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div>
<a href="/#/test" style="color: #ff5c38">
<i class="iconfont icon-hotfill"></i>
hot
</a>
<button class="search_btn">
<span>全网搜</span>
</button>
</div>
</div>
<div class="mod_quick">
<div class="quick_vip">
<a href="javascript:;" title="vip">
<i class="iconfont icon-VIP quick_item"></i>
</a>
</div>
<div class="quick_history">
<a href="javascript:;">
<i class="iconfont icon-lishi quick_item" style="font-size: 26px;"></i>
</a>
<div class="mod_pop_history">
<div class="lable_his"></div>
<div class="quick_pop_tabs">
<button class="pop_tab"
v-for="(item,i) in tabList" :key="i" @click="hanleTab(i)"
:class="{tabCurrent: tableIndex === i}"
>{{item}}</button>
</div>
<div class="mod_quick_videolist" v-show="tableIndex === 0" _wind="看过层">
<div class="videolist_block videolist_block_timeline">
<div class="video_headline">今天</div>
<a href="javascript:;" class="video_itme">
<span class="video_figure">
<img src="https://puui.qpic.cn/vcover_hz_pic/0/mzc00200fd7r31n1617265664857/498" alt="" class="video_pic">
<div class="video_figure_caption"></div>
</span>
<span class="video_title">吐槽大会 第5季 第9期：决赛热身赛→蔡明潘长江PK，易立竞聊提词器 吐槽大会 第5季 第9期：决赛热身赛→蔡明潘长江PK，易立竞聊提词器</span>
<span class="video_progress">观看至92%</span>
</a>
<a href="javascript:;" class="video_itme">
<span class="video_figure">
<img src="https://puui.qpic.cn/vcover_hz_pic/0/mzc00200fd7r31n1617265664857/498" alt="" class="video_pic">
<div class="video_figure_caption"></div>
</span>
<span class="video_title">吐槽大会 第5季 第9期：决赛热身赛→蔡明潘长江PK，易立竞聊提词器 吐槽大会 第5季 第9期：决赛热身赛→蔡明潘长江PK，易立竞聊提词器</span>
<span class="video_progress">观看至92%</span>
</a>
<a href="javascript:;" class="video_itme">
<span class="video_figure">
<img src="https://puui.qpic.cn/vcover_hz_pic/0/mzc00200fd7r31n1617265664857/498" alt="" class="video_pic">
<div class="video_figure_caption"></div>
</span>
<span class="video_title">吐槽大会 第5季 第9期：决赛热身赛→蔡明潘长江PK，易立竞聊提词器 吐槽大会 第5季 第9期：决赛热身赛→蔡明潘长江PK，易立竞聊提词器</span>
<span class="video_progress">观看至92%</span>
</a>
<a href="javascript:;" class="video_itme">
<span class="video_figure">
<img src="https://puui.qpic.cn/vcover_hz_pic/0/mzc00200fd7r31n1617265664857/498" alt="" class="video_pic">
<div class="video_figure_caption"></div>
</span>
<span class="video_title">吐槽大会 第5季 第9期：决赛热身赛→蔡明潘长江PK，易立竞聊提词器 吐槽大会 第5季 第9期：决赛热身赛→蔡明潘长江PK，易立竞聊提词器</span>
<span class="video_progress">观看至92%</span>
</a>
<a href="javascript:;" class="video_itme">
<span class="video_figure">
<img src="https://puui.qpic.cn/vcover_hz_pic/0/mzc00200fd7r31n1617265664857/498" alt="" class="video_pic">
<div class="video_figure_caption"></div>
</span>
<span class="video_title">吐槽大会 第5季 第9期：决赛热身赛→蔡明潘长江PK，易立竞聊提词器 吐槽大会 第5季 第9期：决赛热身赛→蔡明潘长江PK，易立竞聊提词器</span>
<span class="video_progress">观看至92%</span>
</a>
<a href="javascript:;" class="video_itme">
<span class="video_figure">
<img src="https://puui.qpic.cn/vcover_hz_pic/0/mzc00200fd7r31n1617265664857/498" alt="" class="video_pic">
<div class="video_figure_caption"></div>
</span>
<span class="video_title">吐槽大会 第5季 第9期：决赛热身赛→蔡明潘长江PK，易立竞聊提词器 吐槽大会 第5季 第9期：决赛热身赛→蔡明潘长江PK，易立竞聊提词器</span>
<span class="video_progress">观看至92%</span>
</a>
<a href="javascript:;" class="video_itme">
<span class="video_figure">
<img src="https://puui.qpic.cn/vcover_hz_pic/0/mzc00200fd7r31n1617265664857/498" alt="" class="video_pic">
<div class="video_figure_caption"></div>
</span>
<span class="video_title">吐槽大会 第5季 第9期：决赛热身赛→蔡明潘长江PK，易立竞聊提词器 吐槽大会 第5季 第9期：决赛热身赛→蔡明潘长江PK，易立竞聊提词器</span>
<span class="video_progress">观看至92%</span>
</a>
<a href="javascript:;" class="video_itme">
<span class="video_figure">
<img src="https://puui.qpic.cn/vcover_hz_pic/0/mzc00200fd7r31n1617265664857/498" alt="" class="video_pic">
<div class="video_figure_caption"></div>
</span>
<span class="video_title">吐槽大会 第5季 第9期：决赛热身赛→蔡明潘长江PK，易立竞聊提词器 吐槽大会 第5季 第9期：决赛热身赛→蔡明潘长江PK，易立竞聊提词器</span>
<span class="video_progress">观看至92%</span>
</a>
</div>
<div class="videolist_block videolist_block_timeline">
<div class="video_headline">昨天</div>
<a href="javascript:;" class="video_itme">
<span class="video_figure">
<img src="https://puui.qpic.cn/vcover_hz_pic/0/mzc00200fd7r31n1617265664857/498" alt="" class="video_pic">
<div class="video_figure_caption"></div>
</span>
<span class="video_title">吐槽大会 第5季 第9期：决赛热身赛→蔡明潘长江PK，易立竞聊提词器 吐槽大会 第5季 第9期：决赛热身赛→蔡明潘长江PK，易立竞聊提词器</span>
<span class="video_progress">观看至92%</span>
</a>
<a href="javascript:;" class="video_itme">
<span class="video_figure">
<img src="https://puui.qpic.cn/vcover_hz_pic/0/mzc00200fd7r31n1617265664857/498" alt="" class="video_pic">
<div class="video_figure_caption"></div>
</span>
<span class="video_title">吐槽大会 第5季 第9期：决赛热身赛→蔡明潘长江PK，易立竞聊提词器 吐槽大会 第5季 第9期：决赛热身赛→蔡明潘长江PK，易立竞聊提词器</span>
<span class="video_progress">观看至92%</span>
</a>
<a href="javascript:;" class="video_itme">
<span class="video_figure">
<img src="https://puui.qpic.cn/vcover_hz_pic/0/mzc00200fd7r31n1617265664857/498" alt="" class="video_pic">
<div class="video_figure_caption"></div>
</span>
<span class="video_title">吐槽大会 第5季 第9期：决赛热身赛→蔡明潘长江PK，易立竞聊提词器 吐槽大会 第5季 第9期：决赛热身赛→蔡明潘长江PK，易立竞聊提词器</span>
<span class="video_progress">观看至92%</span>
</a>
<a href="javascript:;" class="video_itme">
<span class="video_figure">
<img src="https://puui.qpic.cn/vcover_hz_pic/0/mzc00200fd7r31n1617265664857/498" alt="" class="video_pic">
<div class="video_figure_caption"></div>
</span>
<span class="video_title">吐槽大会 第5季 第9期：决赛热身赛→蔡明潘长江PK，易立竞聊提词器 吐槽大会 第5季 第9期：决赛热身赛→蔡明潘长江PK，易立竞聊提词器</span>
<span class="video_progress">观看至92%</span>
</a>
<a href="javascript:;" class="video_itme">
<span class="video_figure">
<img src="https://puui.qpic.cn/vcover_hz_pic/0/mzc00200fd7r31n1617265664857/498" alt="" class="video_pic">
<div class="video_figure_caption"></div>
</span>
<span class="video_title">吐槽大会 第5季 第9期：决赛热身赛→蔡明潘长江PK，易立竞聊提词器 吐槽大会 第5季 第9期：决赛热身赛→蔡明潘长江PK，易立竞聊提词器</span>
<span class="video_progress">观看至92%</span>
</a>
<a href="javascript:;" class="video_itme">
<span class="video_figure">
<img src="https://puui.qpic.cn/vcover_hz_pic/0/mzc00200fd7r31n1617265664857/498" alt="" class="video_pic">
<div class="video_figure_caption"></div>
</span>
<span class="video_title">吐槽大会 第5季 第9期：决赛热身赛→蔡明潘长江PK，易立竞聊提词器 吐槽大会 第5季 第9期：决赛热身赛→蔡明潘长江PK，易立竞聊提词器</span>
<span class="video_progress">观看至92%</span>
</a>
<a href="javascript:;" class="video_itme">
<span class="video_figure">
<img src="https://puui.qpic.cn/vcover_hz_pic/0/mzc00200fd7r31n1617265664857/498" alt="" class="video_pic">
<div class="video_figure_caption"></div>
</span>
<span class="video_title">吐槽大会 第5季 第9期：决赛热身赛→蔡明潘长江PK，易立竞聊提词器 吐槽大会 第5季 第9期：决赛热身赛→蔡明潘长江PK，易立竞聊提词器</span>
<span class="video_progress">观看至92%</span>
</a>
<a href="javascript:;" class="video_itme">
<span class="video_figure">
<img src="https://puui.qpic.cn/vcover_hz_pic/0/mzc00200fd7r31n1617265664857/498" alt="" class="video_pic">
<div class="video_figure_caption"></div>
</span>
<span class="video_title">吐槽大会 第5季 第9期：决赛热身赛→蔡明潘长江PK，易立竞聊提词器 吐槽大会 第5季 第9期：决赛热身赛→蔡明潘长江PK，易立竞聊提词器</span>
<span class="video_progress">观看至92%</span>
</a>
</div>
</div>
<div class="mod_quick_videolist" v-show="tableIndex === 1" _wind="在追层">
<div class="videolist_block">
<a href="javascript:;" class="video_itme">
<span class="video_figure">
<img src="https://puui.qpic.cn/vcover_hz_pic/0/tfdih8i0jypj7da1519787068/0" alt="" class="video_pic">
<div class="video_figure_caption"></div>
</span>
<span class="video_title">太空旅客</span>
<span class="video_progress">“星爵&大表姐”上演太空绝恋</span>
<span class="video_progress"></span>
</a>
<a href="javascript:;" class="video_itme">
<span class="video_figure">
<img src="https://puui.qpic.cn/vcover_hz_pic/0/tfdih8i0jypj7da1519787068/0" alt="" class="video_pic">
<div class="video_figure_caption"></div>
</span>
<span class="video_title">太空旅客</span>
<span class="video_progress">“星爵&大表姐”上演太空绝恋</span>
<span class="video_progress"></span>
</a>
<a href="javascript:;" class="video_itme">
<span class="video_figure">
<img src="https://puui.qpic.cn/vcover_hz_pic/0/tfdih8i0jypj7da1519787068/0" alt="" class="video_pic">
<div class="video_figure_caption"></div>
</span>
<span class="video_title">太空旅客</span>
<span class="video_progress">“星爵&大表姐”上演太空绝恋</span>
<span class="video_progress"></span>
</a>
<a href="javascript:;" class="video_itme">
<span class="video_figure">
<img src="https://puui.qpic.cn/vcover_hz_pic/0/tfdih8i0jypj7da1519787068/0" alt="" class="video_pic">
<div class="video_figure_caption"></div>
</span>
<span class="video_title">太空旅客</span>
<span class="video_progress">“星爵&大表姐”上演太空绝恋</span>
<span class="video_progress"></span>
</a>
<a href="javascript:;" class="video_itme">
<span class="video_figure">
<img src="https://puui.qpic.cn/vcover_hz_pic/0/tfdih8i0jypj7da1519787068/0" alt="" class="video_pic">
<div class="video_figure_caption"></div>
</span>
<span class="video_title">太空旅客</span>
<span class="video_progress">“星爵&大表姐”上演太空绝恋</span>
<span class="video_progress"></span>
</a>
<a href="javascript:;" class="video_itme">
<span class="video_figure">
<img src="https://puui.qpic.cn/vcover_hz_pic/0/tfdih8i0jypj7da1519787068/0" alt="" class="video_pic">
<div class="video_figure_caption"></div>
</span>
<span class="video_title">太空旅客</span>
<span class="video_progress">“星爵&大表姐”上演太空绝恋</span>
<span class="video_progress"></span>
</a>
</div>
</div>
<div class="mod_quick_videolist" v-show="tableIndex === 2" _wind="关注层">
<div class="videolist_block">
<div class="video_head">
<a href="javascript:;" class="head_avater">
<img src="https://inews.gtimg.com/newsapp_ls/0/1455617288_200200/0" alt=""
class="avater_pic">
</a>
<a href="" class="head_title">34212435344564624626462</a>
<div class="head_desc"></div>
</div>
<a href="javascript:;" class="video_itme">
<span class="video_figure">
<img src="https://puui.qpic.cn/vpic_cover/j32590g51xn/j32590g51xn_hz.jpg/496" class="video_pic">
</span>
<span class="video_title">奇瑞SUV颜值终于上线，搭载华为智能系统，或售8-9万！</span>
</a>
<a href="javascript:;" class="video_itme">
<span class="video_figure">
<img src="https://puui.qpic.cn/vpic_cover/j32590g51xn/j32590g51xn_hz.jpg/496" class="video_pic">
</span>
<span class="video_title">奇瑞SUV颜值终于上线，搭载华为智能系统，或售8-9万！</span>
</a>
</div>
</div>
<a href="javascript:;" class="quick_pop_foot">
查看全部记录
</a>
</div>
</div>
<div class="quick_updoad">
<a href="">
<i class="iconfont icon-sheying quick_item"></i>
</a>
</div>
<div class="quick_user">
<a href="">
<img src="../assets/images/aqd_user.webp" class="user_img"/>
</a>
<div class="usertest">tstt</div>
</div>
</div>
</div>
</div>
</div>

export default {
name: "head-search",
mounted() {
window.addEventListener('scroll', this.initHeight)
},
unmounted() {
window.removeEventListener('scroll', this.initHeight, false)
},
methods: {
hanleTab(i) {
this.tableIndex = i
},
getFocu() {
this.isFouc = true
// this.$refs.inputsearch.placeholder = ''
this.holerSearch = ''
},
loseFoce() {
this.isFouc = false
this.holerSearch = 'seach'
},
initHeight () {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
if (scrollTop > 68) {
this.isFixed = true
} else {
this.isFixed = false
}
}
},
data() {
return {
isFouc: false,
tableIndex: 0,
holerSearch: 'seach',
isFixed: false,
tabList: [
'看过','在追','订阅'
]
}
}
}

.head {
background: rgba(255,255,255,.14);
backdrop-filter: blur(1px);
position: absolute;
top: 0;
width: 100%;
z-index: 100;
height: 68px;
&.is_fixed {
position: fixed;
box-shadow: 0 28px 50px rgb(25 24 40 / 35%);
background-color: rgba(255,255,255,.95);
.mod_search {
border-color: #ff5c38 !important;
width: 310px !important;
}
.link_logo {
background-position-y: -36px !important;
}
.quick_item {
color: #999999 !important;
&:hover {
color: #666666 !important;
}
}
.search_input {
color: #999999 !important;
&::-webkit-input-placeholder {
color: #999999 !important;
}
}
}
.none {
display: none;
}
.tabCurrent {
color: #ff5c38 !important;
}
.head_inner {
display: flex;
justify-content: space-between;
align-items: center;
height: 68px;
.site_logo {
.link_logo {
display: block;
width: 135px;
height: 36px;
background: url("../assets/images/head_logo.svg") 0 0 no-repeat;
text-indent: -300px;
}
}
.site_channel {
font-size: 0;
letter-spacing: -3px;
line-height: 26px;
.channer_nav {
display: inline-block;
position: relative;
margin-right: 20px;
color: #111;
font-size: 15px;
letter-spacing: normal;
vertical-align: top;
&:hover {
color: #ff5c38;
}
}
.current_nav {
adding-left: 24px;
color: #ff5c38;
font-size: 18px;
font-weight: 700;
}
}
.mod_search {
border: 1px solid transparent;
background: rgba(255,255,255,.2);
box-shadow: 0 4px 18px rgb(17 18 38 / 7%);
height: 38px;
border-radius: 20px;
display: flex;
justify-content: space-between;
align-items: center;
width: 380px;
.search_input {
background: transparent;
border: none;
color: white;
outline: none;
padding-left: 20px;
width: 90%;
}
.mod_startbox {
position: absolute;
top: 30px;
left: 15px;
background: rgba(255,255,255,.98);
box-shadow: 0 28px 50px rgb(25 24 40 / 35%);
z-index: 10;
border-radius: 4px;
width: 354px;
.sb_head {
display: flex;
justify-content: space-between;
margin: 10px 10px 5px;
font-size: 14px;
color: #999;
.sb_del {
color: #999;
&:hover {
color: #111;
}
}
}
.sb_history {
.sb_body {
display: flex;
margin: 0 5px;
flex-wrap: wrap;
.sb_item {
width: 50%;
a {
display: block;
margin: 4px;
padding: 0 10px;
border-radius: 2px;
background-color: #f8f8f8;
color: #111;
line-height: 32px;
text-overflow: ellipsis;
font-size: 12px;
overflow: hidden;
&:hover {
background-color: #eee;
}
}
}
}
}
.sb_hot {
padding-bottom: 10px;
.sb_body {
margin: 0 5px;
.sb_item {
a {
display: block;
padding: 5px;
border-radius: 2px;
background-color: #f8f8f8;
color: #111;
line-height: 22px;
text-overflow: ellipsis;
font-size: 14px;
overflow: hidden;
&:hover {
background-color: #eee;
}
}
}
}
.sb_num {
display: inline-block;
width: 22px;
height: 22px;
margin-right: 4px;
border-radius: 4px;
background-color: #7f7f8c;
color: #fff;
font-size: 12px;
text-align: center;
vertical-align: top;
}
.sb_name {
display: inline-block;
width: 80%;
margin-left: 3px;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top;
white-space: nowrap;
}
.sb_item_1 {
background-color: #ff183e;
}
.sb_item_2 {
background-color: #ff5c38;
}
.sb_item_3 {
background-color: #ffb821;
}
}
}
.search_btn {
width: 90px;
height: 38px;
border-radius: 0 20px 20px 0;
outline: 0;
background-color: #ff5c38;
color: white;
border: none;
cursor: pointer;
&:hover {
background-color: #ff1831;
}
}
}
.mod_quick {
display: flex;
align-items: center;
.quick_history {
&:hover .mod_pop_history {
display: block;
}
}
.mod_pop_history {
display: none;
position: absolute;
top: 68px;
right: -45px;
width: 310px;
user-select: none;
z-index: 10;
border-radius: 4px;
background-color: white;
box-shadow: 0 28px 50px rgb(25 24 40 / 35%);
.lable_his {
position: absolute;
top: -28px;
left: 138px;
width: 0;
height: 0;
border: 14px solid transparent;
border-bottom-color: #f8f8f8;
}
.quick_pop_tabs {
display: flex;
height: 50px;
border-radius: 4px 4px 0 0;
background-color: #f8f8f8;
justify-content: space-between;
.current {
color: #ff5c38;
}
.pop_tab {
display: inline-block;
width: 32%;
padding: 0;
border: none;
outline: 0 none;
background: 0 0;
color: #111;
font-size: 14px;
line-height: 50px;
vertical-align: top;
cursor: pointer;
&:hover {
color: #ff5c38;
}
}
}
.mod_quick_videolist {
position: relative;
height: 345px;
padding: 15px 0 0 ;
overflow: auto;
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
border-radius: 3px;
height: 100px;
/* 滚动条滑块长度 */
background-color: #ccc;
}
.videolist_block {
position: relative;
margin-bottom: 20px;
.video_headline {
position: relative;
padding-left: 20px;
color: #999999;
font-size: 14px;
&:before {
position: absolute;
top: 5px;
left: 5px;
width: 5px;
height: 5px;
border: 3px solid #ffffff;
border-radius: 100%;
background-color: #eeeeee;
content: '';
}
}
.video_itme {
display: block;
position: relative;
height: 56px;
margin: 5px 15px;
padding: 5px 5px 5px 115px;
&:hover {
background-color: #f8f8f8;
}
.video_figure {
display: block;
position: absolute;
top: 5px;
left: 5px;
width: 100px;
height: 56px;
overflow: hidden;
border-radius: 4px;
.video_pic {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 4px;
}
.video_figure_caption {
position: absolute;
right: 0;
left: 0;
bottom: 0;
padding: 10px 10px 0;
border-radius: 0 0 4px 4px;
background: linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.3) 25.5%,rgba(0,0,0,.08) 70%,rgba(0,0,0,0));
color: #ffffff;
font-size: 12px;
}
}
.video_title {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
height: 36px;
overflow: hidden;
color: #111;
font-size: 13px;
line-height: 18px;
&:hover {
color: #ff5c38;
}
}
.video_progress {
display: block;
margin-top: 7px;
overflow: hidden;
color: #999;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
}
}
}
.videolist_block_timeline {
margin-bottom: 5px;
&:before {
position: absolute;
top: 5px;
bottom: 0;
left: 10px;
width: 1px;
background-color: #eeeeee;
content: '';
}
}
.video_head {
position: relative;
height: 36px;
margin: 0 20px;
padding-left: 44px;
.head_avater {
position: absolute;
top: 0;
left: 0;
width: 34px;
height: 34px;
.avater_pic {
display: block;
width: 100%;
height: 100%;
mask: url("https://vfiles.gtimg.cn/vupload/20210322/d9a91e1616381718823.png");
-webkit-mask-size: 100% 100%;
}
}
.head_title {
display: block;
padding-top: 11px;
overflow: hidden;
color: #111111;
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
&:hover {
color: #ff5c38;
}
}
.head_desc {
overflow: hidden;
color: #999;
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.quick_pop_foot {
display: block;
color: #666;
font-size: 12px;
line-height: 50px;
text-align: center;
&:hover {
color: #ff5c38;
}
}
}
.quick_item {
display: inline-block;
font-size: 36px;
margin: 0 10px;
color: rgba(255,255,255,.8);
&:hover {
color: #ffffff;
}
}
.quick_user {
position: relative;
&:hover .usertest{
display: block;
background: red;
}
.usertest {
position: absolute;
top: 55px;
left: 0;
width: 50px;
height: 30px;
background: teal;
display: none;
}
.user_img {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: #7f7f8c;
}
}
}
}
}

tips：

进来由于依赖组件过多，导致基础薄弱，决定全手写，也是前端的多变性的保证，本次采用vue3+sass 实现仿造效果，基本完成，