elementui 左侧边栏折叠状态下样式修改

要修改Element UI的左侧边栏折叠状态下的样式，可以通过以下步骤进行：

首先，在你的项目中引入Element UI的样式文件。可以在你的项目入口文件（如main.js或app.js）中引入样式文件：

import 'element-ui/lib/theme-chalk/index.css';

然后，在你的组件中使用Element UI的左侧边栏组件（如el-menu）。

<template>
  <el-menu :collapse="isCollapse">
    <!-- 左侧边栏内容 -->
  </el-menu>
</template>

在你的组件中定义一个data属性，用于控制左侧边栏的折叠状态。

data() {
  return {
    isCollapse: false // 默认不折叠
  }
}

修改折叠状态下的样式。

Element UI的左侧边栏组件提供了一些样式类，你可以在这些样式类上添加自定义的样式。以下是一些常用的样式类：

.el-menu：左侧边栏整体样式。
.el-menu-item：左侧边栏每个菜单项的样式。
.el-submenu：左侧边栏子菜单的样式。
.el-icon-arrow-down：左侧边栏折叠状态下的箭头图标样式。

你可以通过添加自定义的样式来修改这些样式类的样式，例如：

.el-menu {
  background-color: #f0f0f0; // 修改左侧边栏的背景色
}

.el-menu-item {
  color: #333; // 修改菜单项的字体颜色
}

.el-submenu {
  border-top: 1px solid #ccc; // 修改子菜单的上边框样式
}

.el-icon-arrow-down {
  color: #999; // 修改折叠状态下的箭头图标颜色
}

通过以上步骤，你可以修改Element UI的左侧边栏折叠状态下的样式