element-ui 组件样式修改

el-select 样式修改

原生

修改后

组件

<el-select
           v-model="czValue"
           default-first-option
           size="small"
           class="e-m-t-20 e-m-l-20"
           style="width: 100px"
           >
    <el-option
               v-for="item in czList"
               :key="item.code"
               :label="item.name"
               :value="item.code">
    </el-option>
</el-select>

修改样式代码

注意vue文件<style>修改为 <style scoped lang="scss">

/deep/ .el-input__inner {
  background: #ffeeee;
  border: none;
  font-size: 14px;
  opacity: 0.6;
}

/deep/.el-icon-arrow-up:before {
  content: '\e78f';
}

el-tabs 样式修改

原生

修改后

组件

<el-tabs tab-position="top" v-model="gjxxActive">
    <el-tab-pane label="饱和度" name="1">
        <span slot="label">
            <svg-icon :icon-class="gjxxActive === '1' ? 'gjxx-c-1' : 'gjxx-1'" class="e-m-r-15 e-m-l-10"/>
            饱和度
        </span>
        <div style="overflow:auto" class="gjj-div">
            <ul class="e-h-160">
                <li v-for="(item, index) in htxAlarmList" :key="index" class="gj-li e-flex infinite-list-item">
                    <img class="gj-li-img" :src="item.status === 1 ? warnSrc : alarmSrc">
                    <div class="c-gray e-font-14">{{ item.content }}</div>
                </li>
            </ul>
        </div>
    </el-tab-pane>
    <el-tab-pane label="污处异常" name="2">
        <span slot="label">
            <svg-icon :icon-class="gjxxActive === '2' ? 'gjxx-c-2' : 'gjxx-2'" class="e-m-r-15 e-m-l-10"/>
            污处异常
        </span>
        <div style="overflow:auto" class="gjj-div">
            <ul>
                <li v-for="(item, index) in wcAlarmList" :key="index" class="gj-li e-flex infinite-list-item">
                    <img class="gj-li-img" :src="item.status === 1 ? warnSrc : alarmSrc">
                    <div class="c-gray e-font-14">{{ item.content }}</div>
                </li>
            </ul>
        </div>
    </el-tab-pane>
</el-tabs>

修改样式代码

注意vue文件<style>修改为 <style scoped lang="scss">

/deep/ .el-tabs{
  .el-tabs__header{
    .el-tabs__nav-wrap{
      .el-tabs__nav-scroll{
        .el-tabs__nav{
          .el-tabs__active-bar{
            display: none;
          }
          .el-tabs__item{
            width: 120px;
            height: 30px;
            padding: 0;
            text-align: left;
            line-height: 30px;
            font-size: 12px;
            color: #666c80;
            border-radius: 6px;
            border: 0;
          }
          .el-tabs__item.is-active{
            color: #ffffff;
            background: #4887f6;
          }
        }
      }
    }
  }
  .el-tabs__nav-wrap::after{
    display: none;
  }
}