update: menu菜单样式修改

examples/App.vue

  { label: '个人中心', commond: 'user' },
  { label: '退出登录', commond: 'logout' }
]);
const asideWidth = ref<any>('260px');
const asideWidth = ref<any>('240px');
const isCollapse = ref<any>(false);
function handleChangeCollapse(collapse: any) {
  if (isCollapse.value) {
    asideWidth.value = '70px';
  } else {
    asideWidth.value = '260px';
    asideWidth.value = '240px';
  }
}
</script>

package.json

{
  "name": "common-module-ui",
  "version": "0.0.16",
  "version": "0.0.17",
  "author": "devin liu",
  "license": "ISC",
  "private": false,
    "prettier": "^2.7.1",
    "sass": "^1.57.1",
    "vite-plugin-eslint": "^1.8.1",
    "vue": "^3.2.44",
    "vite-plugin-svg-icons": "^2.0.1",
    "vue-clipboard2": "^0.3.3",
    "vue-router": "^4.1.6"

packages/assets/css/element.scss

  }
}
// radio
.el-radio {
  .el-radio__input {

packages/container/CommonContainer.vue

defineProps({
  asideWidth: {
    type: String,
    default: () => '260px'
    default: () => '240px'
  },
  isCollapse: {
    type: Boolean,

packages/layer/CommonLayer.vue

  },
  asideWidth: {
    type: String,
    default: () => '260px'
    default: () => '240px'
  }
});
const emits = defineEmits(['handleChangeCollapse']);

packages/layer/Header.vue

  justify-content: space-between;
  align-items: center;
  .h-l {
    min-width: 260px;
    min-width: 240px;
    color: #fff;
    display: flex;
    .__header-info-logo {

packages/layer/Menu.vue

    :collapse="isCollapse"
    router
    :unique-opened="true"
    background-color="#191a20"
    text-color="#fff"
    active-text-color="#fff"
    background-color="#fff"
    text-color="#455A74"
    active-text-color="#169BFA"
    @open="handleOpen"
    @select="handleSelect"
    @close="handleClose"
<style scoped>
.el-menu {
  height: 100%;
  border-right: 0;
  user-select: none;
  height: 100%;
}
:deep(.el-sub-menu .is-active) {
  color: #169bfa;
  background: rgba(22, 155, 250, 0.1) !important;
}
:deep(.el-sub-menu, .el-sub-menu__title) {
  color: rgba(255, 255, 255, 0.6) !important;
  color: #455a74 !important;
  height: 40px;
}
:deep(.el-menu-item) {
  color: rgba(255, 255, 255, 0.6) !important;
}
:deep(.el-sub-menu__title) {
  color: rgba(255, 255, 255, 0.6) !important;
  color: #455a74 !important;
  height: 40px !important;
  line-height: 40px !important;
}
:deep(.is-active) {
  color: #fff !important;
  background: #169bfa;
.el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container)
  .el-menu-item,
.el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container)
  .el-menu-item-group__title,
.el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container)
  .el-sub-menu__title {
  /* color: #455a74 !important; */
  height: 40px !important;
}
</style>

packages/layer/MenuItem.vue

</script>
<style laneg="scss" scoped>
.el-menu-item {
/* .el-menu-item {
  color: rgba(255, 255, 255, 0.6);
} */
.mr-10 {
  margin-right: 10px;
}
.el-menu-item {
  color: #455a74;
  height: 40px !important;
  line-height: 40px !important;
}
.menu-icon {
  margin-right: 10px;
}
.mr-10 {
  margin-right: 10px;
}
.menu-icon {
  margin-right: 5px;
  margin-top: -2px;
}
</style>

packages/panel/Panel.vue

  transition: width 0.2s ease-in-out;
}
.collapse-right {
  width: 260px;
  width: 240px;
  opacity: 1;
  -webkit-transition: width 0.2s ease-in-out;
  -moz-transition: width 0.2s ease-in-out;

packages/table/CommonTable.vue

  }
});
function getIcon(name: any) {
  return new URL(`../../assets/images/${name}.svg`, import.meta.url).href;
  return new URL(`../assets/images/${name}.svg`, import.meta.url).href;
}
const emits = defineEmits([
  'changeEvent',