vue 仿tx导航栏效果

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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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=".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=".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() {veEventListener('scroll', this.initHeight, false)},methods: {hanleTab(i) {this.tableIndex = i},getFocu() {this.isFouc = true// this.$refs.inputsearch.placeholder = ''this.holerSearch = ''},loseFoce() {this.isFouc = falsethis.holerSearch = 'seach'},initHeight () {const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTopif (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(".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 实现仿造效果，基本完成，