vueelementui+tabs选项卡样式更改-内容待递增-Toy模板网

这篇具有很好参考价值的文章主要介绍了vueelementui+tabs选项卡样式更改-内容待递增。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

type="card"

<div class="echartsTabs">
          <div class="echartsTabs-left">
            <el-tabs v-model="activeNameEchar" type="card" @tab-click="handleClick" tab-class="my-custom-tab">
              <el-tab-pane label="下单统计" name="first"></el-tab-pane>
              <el-tab-pane label="支付统计" name="second"></el-tab-pane>
              <el-tab-pane label="退款统计" name="third"></el-tab-pane>
              <el-tab-pane label="佣金统计" name="fourth"></el-tab-pane>
            </el-tabs>
          </div>
          <div class="echartsTabs-right">
            <el-date-picker v-model="time" @change="updateChartData" end-placeholder="结束日期" range-separator="至"
              start-placeholder="开始日期" type="daterange" value-format="yyyy-MM-dd" />
          </div>
        </div>

  //echarts--选项卡和日期筛选
  .echartsTabs {
    display: flex;
    justify-content: space-between;
    align-items: center;

    /* 鼠标选中时样式 */
    ::v-deep .echartsTabs-left .el-tabs__item.is-active {
      background-color: gray !important;
    }

    /*未选中时字体颜色*/
    ::v-deep .echartsTabs-left .el-tabs__item {
      color: #000 !important;
      background-color: #fff !important;
    }

    .echartsTabs-left {}
  }

普通tabs 文章来源地址https://www.toymoban.com/news/detail-856096.html

<div class="tabs">
          <el-card class="tabs-card" shadow="hover">
            <el-tabs v-model="activeName">
              <el-tab-pane label="分销商" name="first">
                <div class="thirdTabs">
                  <!-- 第一行 -->
                  <el-row :gutter="0" class="thirdTabs-row-1">
                    <el-col :span="4" class="thirdTabs-col-1">下单统计</el-col>
                    <el-col :span="5" class="thirdTabs-col">
                      <div class="infoCloumn">
                        <span>下单人数</span>
                        <span class="infoCloumnSize">0</span>
                        <span class="nameGray">
                          较昨日:
                          <vab-icon icon="arrow-up-line" class="iconSizeUp" />
                          10%
                        </span>
                      </div>
                    </el-col>
                    <el-col :span="5" class="thirdTabs-col">
                      <div class="infoCloumn">
                        <span>下单订单数</span>
                        <span class="infoCloumnSize">0</span>
                        <span class="nameGray">
                          较昨日:
                          <vab-icon icon="arrow-up-line" class="iconSizeUp" />
                          10%
                        </span>
                      </div>
                    </el-col>
                    <el-col :span="10" class="thirdTabs-col">
                      <div class="infoCloumn">
                        <span>下单总金额</span>
                        <span class="infoCloumnSize">0</span>
                        <span class="nameGray">
                          较昨日:
                          <vab-icon icon="arrow-up-line" class="iconSizeUp" />
                          10%
                        </span>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-tab-pane>
              <el-tab-pane label="用户" name="second">
                我和前面一样哦~
              </el-tab-pane>
              <el-tab-pane label="高级代理商" name="third">
                期待一下吧~~~
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </div>

 //tabs
  .tabs {
    //下划线颜色
      ::v-deep .el-tabs__active-bar {
        background-color: #13ce66 !important;
      }
      ::v-deep .el-tabs__item.is-active {
        color: #000;//选中
        opacity: 1;
        // font-size: 16px;
      }

      ::v-deep .el-tabs__item:hover {
        color: #000;//悬浮
        cursor: pointer;
        opacity: 1;
      }
  }

到了这里，关于vueelementui+tabs选项卡样式更改-内容待递增的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！