mes-dacheng-admin-backend-ui/src/App.vue

<template>
  <div id="app">
    <el-config-provider :locale="zhCn">
      <router-view />
    </el-config-provider>
  </div>
</template>

<script setup>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
// element 2.3.8之前使用下面的语句
// import zhCn from 'element-plus/lib/locale/lang/zh-cn'

defineOptions({
  name: 'App'
})

</script>
<style lang="scss">
@tailwind base;
@tailwind components;
@tailwind utilities;
// 引入初始化样式
#app {
  background: #eee;
  height: 100vh;
  overflow: hidden;
  font-weight: 400 !important;
}
.el-button{
  font-weight: 400 !important;
}
.el-main{
  --el-main-padding: 0 20px !important;
}

.el-sub-menu,.gva-menu-item{
.el-icon{
  font-size: 11px!important;
  margin-right: 0!important;
}
}
.gva-menu-item  {
.gva-menu-item-title{

}
}
.el-sub-menu__title{
  .gva-subMenu{
    font-size: 12px!important;
  }
}
.el-menu-item.is-active ,.el-menu-item {
.gva-menu-item{
  font-size: 11px!important;
}
}

/* 保证滚动条一直显示 */
// .el-scrollbar__wrap {
//   // overflow-x: scroll !important;
//   // overflow-y: scroll !important;
//   scrollbar-color: #c1c1c1 #f1f1f1 !important; /* 滑块和轨道颜色 */
//   scrollbar-width: thin !important; /* 标准属性，Firefox支持 */
// }

/* 水平滚动条轨道 */
.el-scrollbar__bar.is-horizontal {
  height: 10px !important;
  bottom: 2px !important;
  background-color: #f1f1f1 !important;
  border-radius: 4px !important;
}

/* 水平滚动条滑块 */
.el-scrollbar__bar.is-horizontal > div {
  height: 10px !important;
  background-color: #c1c1c1 !important;
  border-radius: 4px !important;
  transition: background-color 0.2s !important;
}

/* 水平滚动条悬停效果 */
.el-scrollbar__bar.is-horizontal > div:hover {
  background-color: #110000 !important;
}

/* 垂直滚动条轨道 */
.el-scrollbar__bar.is-vertical {
  width: 10px !important;
  right: 2px !important;
  background-color: #f1f1f1 !important;
  border-radius: 4px !important;
}

/* 垂直滚动条滑块 */
.el-scrollbar__bar.is-vertical > div {
  width: 10px !important;
  background-color: #c1c1c1 !important;
  border-radius: 4px !important;
  transition: background-color 0.2s !important;
}

/* 垂直滚动条悬停效果 */
.el-scrollbar__bar.is-vertical > div:hover {
  background-color: #110000 !important;
}
// /* 保证水平滚动条一直显示 */
// .el-scrollbar__wrap {
//   overflow-x: scroll !important; /* 确保水平滚动条始终显示 */
// }

// /* 水平滚动条的样式 */
// .el-scrollbar__bar.is-horizontal {
//   height: 15px; /* 设置滚动条的高度 */
//   background-color: #d3d3d3; /* 默认灰色背景 */
// }

// /* 保证垂直滚动条也始终显示 */
// .el-scrollbar__wrap {
//   overflow-y: scroll; /* 确保垂直滚动条始终显示 */
// }

// /* 垂直滚动条的样式 */
// .el-scrollbar__bar.is-vertical {
//   width: 20px; /* 设置滚动条的宽度 */
//   background-color: #d3d3d3; /* 默认灰色背景 */
// }
</style>