一、底部导航的编写

image.png

被点击当前路由颜色改变

  1. #app #nav .router-link-active{
  2.   color: red;
  3. }
  1. <template>
  2.   <div id="app">
  3.     <div id="nav">
  4.       <router-link class="taber" to="/music">
  5.       <i class="iconfont logo">&#xe680;</i>
  6.       音乐
  7.       </router-link>
  8.       <router-link class="taber" to="/mv">
  9.       <i class="iconfont logo">&#xe609;</i>
  10.       mv</router-link>
  11.     </div>
  12.    <router-view></router-view>
  13.   </div>
  14. </template>
  16. #app {
  17.   width:10rem;
  18.   margin-left:auto;
  19.   margin-right:auto;
  20.   position: relative;
  21.   background: linear-gradient(pink,white);
  22.   position: relative;
  23. }
  24. #nav{
  25.   position: fixed;
  26.   top:955px;
  27.   background: #fff;
  28.   width: 100%;
  29.   height: 100px;
  30.   z-index: 900;
  31. }
  32. .icon{
  33.   width: 30px;
  34.   height: 30px;
  35.   display: block;
  36. }
  37. .taber{
  38.   width: 400px;
  39.   display: inline-block;
  40.   text-align: center;
  41.   text-decoration: none;
  42.   color: gray;
  43.   font-size: 25px;
  44.   line-height: 40px;
  45. }
  46. .logo{
  47.   display: block;
  48.   font-size: 35px;
  49.   margin-top: 20px;
  50. }