Vue Element-ui中el-tabs，el-tab-pane切换改变字体颜色，自定义颜色等_

Element-ui中el-tabs，el-tab-pane切换改变字体颜色，以及自定义下方条状的颜色等

样式效果

代码结构

<template>
  <div class="main">
    <el-tabs v-model="activeName" class="box">
      <el-tab-pane label="视频" name="video">
        <CourseVideo></CourseVideo>
      </el-tab-pane>
      <el-tab-pane label="课件" name="courseWare">
        <CourseWare></CourseWare>
      </el-tab-pane>
      <el-tab-pane label="试卷" name="testPaper">
        <testPaper></testPaper>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<style>
  /*导航条下方边框*/
   .main /deep/ .el-tabs__nav-scroll{
      border-bottom: 1px solid #000000;
      box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
  }
  /* 导航条下方边框阴影*/
  .main /deep/ .el-tabs__nav-wrap {
     box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15) ;
  }
  /*切换项下面的长条，控制其长度*/
   /deep/.box .el-tabs__active-bar.is-top{
     text-align: center;
      width: 0px !important;      /* 不加important  不会生效，important会覆盖行内样式权限级别*/
      padding: 0 50px !important; /* 控制位置*/
      left:8.5%;                  /* 根据实际情设置，尽量居中就行*/
      box-sizing: border-box;
      background-clip: content-box;

   }
   .main /deep/ .el-tabs__item.is-active{    //切换活动项的文字颜色
       color:#000000 !important;
   }
   .main /deep/ .el-tabs__active-bar{
          background-color: #229922 !important;   //切换活动项的长条颜色
   }
   /deep/ #tab-first,
   /deep/ #tab-video,
   /deep/ #tab-courseWare,
   /deep/ #tab-testPaper{
      background-color: #fff;      //设置修改默认蚊子颜色，背景颜色，等
      font-weight: 550;
      font-size: 20px;
      opacity: 1;
      box-shadow: 0 0 0 0;
    }


  /deep/ .box > div:first-child {
    position: fixed;
    top: 120px;
    right: 0;
    left: 0;
    z-index: 99;
    width: 88%;
    height: 60px;
    margin-right: auto;
    margin-left: auto;
  }

  /deep/ .box > div:first-child > div > div > div {
    display: flex;
    width: 100%;
    width: 100%;
  }

  /deep/ #tab-first,
  /deep/ #tab-video,
  /deep/ #tab-courseWare,
  /deep/ #tab-testPaper {
    flex: 1;
    height: 60px;
    padding: 0 20px;
    font-size: 24px;
    line-height: 60px;
    color: rgba(51, 51, 51, 0.8);
    text-align: center;
    background: rgba(0, 0, 0, 0.15);
    border-right: 1px solid rgba(255, 255, 255, 1) !important;
    border-left: 1px solid rgba(255, 255, 255, 1) !important;
    box-shadow: 0px 2px 12px 0px rgba(45, 88, 0, 0.1);
    opacity: 0.51;
  }

  /deep/ #tab-first {
    border-left: 0;
  }
  /deep/ #tab-testPaper {
    border-right: 0;
  }


  // /deep/ #tab-first:hover,
  // /deep/ #tab-video:hover,
  // /deep/ #tab-courseWare:hover,
  // /deep/ #tab-testPaper:hover {
  //   /*flex: 1.3;*/
  //   font-size: 23px;
  //   font-weight: 500;
  //   color: rgba(51, 51, 51, 1);
  // }

  /deep/ .box > div:first-child > div > div > div > div:first-child {
    /*flex: 1;*/
    height: 4px;
    margin: 0 auto;
    background: #84a0ea;
    box-shadow: 0 -1px 8px 0 rgba(100, 137, 237, 0.14);
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

完毕