el-tabs样式修改

<template>
  <div class="main">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
      <template v-for="item in list" :key="item.name">
        <el-tab-pane :label="item.label" :name="item.name">{{ item.name }}
          <component :is="item.name" :ref="item.name + 'Ref'" :activeName='activeName'></component>
        </el-tab-pane>
      </template>
    </el-tabs>
  </div>


</template>
<script>
import { ref, toRefs, onMounted, onUnmounted, nextTick, watch, reactive, defineComponent } from 'vue'
import Quality from './ceshi/HeatingQuality.vue'
import Forecast from './ceshi/HeatSupplyForecast.vue'
export default defineComponent({
  components: {
    Quality,
    Forecast
  },
  emits: ['ActiveNameChange'],
  setup(props, { emit }) {
    const state = reactive({
      list: [
        { label: 'xxxx', name: 'Quality' },
        { label: 'xxxx', name: 'Forecast' },
        { label: 'xxxx', name: 'Energy' },
        { label: 'xxxx', name: 'Leak' },
        { label: 'xxxx', name: 'Patrol' },
      ],
      activeName: 'Quality',
      QualityRef: null,
      ForecastRef: null,
    })

    const methods = {
      handleClick(tab) {
        console.log(tab)
      }
    }
    onMounted(() => {
    })
    onUnmounted(() => {
    });
    return {
      ...toRefs(state),
      ...methods,
    }
  }
})
</script>



<style scoped lang="less">
.main {
  margin: 20px;
}
.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

:deep(.el-tabs__header) {
  width: fit-content;
}

:deep(.el-tabs) {
  --el-tabs-header-height: 37px;
}

// 隐藏底部横线
:deep(.el-tabs__nav-wrap:after) {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px; // 改为0
  background-color: var(--el-border-color-light);
  z-index: var(--el-index-normal);
}

:deep(.el-tabs__nav) {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, .1), -5px -5px 10px rgba(0, 0, 0, .1);
  border-radius: 5px;
  background-color: #fff;
  padding: 0 15px;
}

:deep(.el-tabs__active-bar) {
  border-radius: 5px;
  color: #fff;
  padding: 0 12px;
  background-color: #0C52C3;
  bottom: 3px;
  height: 30px;
  left: -12px;
  // list-style: none;
  // position: absolute;
  transition: width var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier), transform var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier);
  z-index: 0;
}

:deep(.el-tabs__item.is-active) {
  color: #fff;
}

:deep(.el-tabs__item:hover) {
  // color: #fff;
  cursor: pointer;
}

:deep(.el-tabs__item) {
  padding: 0px 18px;
}
</style>