5. Use of ly tab plug-in of header component

components Under the new home Folder

add to header.vue Components

<template>
  <header>
    <h1> Tea seven nets </h1>
    <div class="search">
      <i class="iconfont icon-RectangleCopy"></i>
      <span> Guess you like </span>
    </div>
    <div class="kufu">
      <i class="iconfont icon-yonghu"></i>
    </div>
  </header>
</template>

<script>
export default {};
</script>

<style scoped>
header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;

  top: 0;
  left: 0;
  width: 100%;
  height: 1.2267rem;
  background-color: #4ac23f;
}
header h1 {
  display: flex;
  font-size: 0.6267rem;
  color: #fff;
  padding: 0 0.1rem;
  align-items: center;

  height: 1.173333rem;
}
header h1 img {
  width: 100%;
  height: 100%;
}
.search {
  display: flex;
  align-items: center;
  width: 6.56rem;
  height: 0.8rem;
  background-color: #fff;
  border-radius: 12px;
}
.search i {
  padding: 0 0.16rem;
  color: #ccc;
  font-size: 0.7533rem;
}
.search span {
  padding: 0 0.06rem;
  color: #ccc;
  font-size: 0.4533rem;
}
.kufu i {
  font-size: 0.76rem;
  color: #fff;
}
</style>

Ly-tab

 A touchable slide for the mobile end has a rebound effect and can be reused Vue Components 
 install 
npm i ly-tab -S

introduce

import Vue from 'vue'
import LyTab from 'ly-tab'

Vue.use(LyTab)
//  Then it can be used globally 

stay home Page usage

<template>
  <div class="home">
    <Tabbar />
    <Header />
    <ly-tab v-model="selectedId" :items="items" :options="options"> </ly-tab>
  </div>
</template>

<script>
import Tabbar from "@/components/common/Tabbar.vue";
import Header from "@/components/home/Header.vue";
export default {
  components: {
    Tabbar,
    Header,
  },
  name: "Home",
  data() {
    return {
      selectedId: 0,
      items: [
        { label: " home page " },
        { label: " recommend " },
        { label: "Android" },
        { label: " front end " },
        { label: " Back end " },
        { label: "iOS" },
        { label: " product " },
        { label: " Artificial intelligence " },
        { label: " Design " },
      ],
      options: {
        activeColor: "#4ac23f",
        //  You can specify here labelKey For the field corresponding to the text in your data 
      },
    };
  },
};
</script>

<style scoped>
.ly-tab {
  position: fixed;
  top: 1.2rem;
  left: 0;
}
::v-deep .ly-tab {
  box-shadow: none;
  border-bottom: none;
}
</style>

effect ：