vue 仿tx导航栏效果

最新推荐文章于 2024-07-17 15:26:15 发布

xiaodunmeng

最新推荐文章于 2024-07-17 15:26:15 发布

阅读量591

点赞数

文章标签： javascript vue.js

xiaodunemng

本文链接：https://blog.csdn.net/qq_35886411/article/details/124665913

版权

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

.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 实现仿造效果，基本完成，