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

type="card"

html 复制代码
<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

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>
html 复制代码
 //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;
      }
  }
相关推荐
烛阴5 分钟前
JavaScript 的 8 大“阴间陷阱”,你绝对踩过!99% 程序员崩溃瞬间
前端·javascript·面试
lh_125436 分钟前
ECharts 地图开发入门
前端·javascript·echarts
jjw_zyfx38 分钟前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
周之鸥1 小时前
使用 Electron 打包可执行文件和资源:完整实战教程
前端·javascript·electron
我爱吃朱肉1 小时前
HTMLCSS模板实现水滴动画效果
前端·css·css3
前端snow2 小时前
前端全栈第二课:用typeorm向数据库添加数据---一对多关系
前端·javascript
全栈老李技术面试2 小时前
【高频考点精讲】async/await原理剖析:Generator和Promise的完美结合
前端·javascript·css·vue·html·react·面试题
kadog2 小时前
PubMed PDF下载 cloudpmc-viewer-pow逆向
前端·javascript·人工智能·爬虫·pdf
我爱吃朱肉3 小时前
HTMLcss实现网站抽奖
css·html
乌夷3 小时前
使用spring boot vue 上传mp4转码为dash并播放
vue.js·spring boot·dash