暗黑模式中,一旦混入非深色样式,就会非常难看刺眼,一些自定义样式的暗黑模式适配是少不了的 1、深色样式 element-plus定义了一些暗黑模式下的变量,满足其自身样式的暗黑模式适配 项目中设定了颜色的样式是无法自动适配的,需要我们手动写一套深色样式来覆盖 html.dark{.my-dialog{background-color:#304156;color:#bfcb...
element-plus定义了一些暗黑模式下的变量,满足其自身样式的暗黑模式适配 项目中设定了颜色的样式是无法自动适配的,需要我们手动写一套深色样式来覆盖 html.dark { .my-dialog { background-color: #304156; color: #bfcbd9; } } 2、变量覆盖 一些反复使用的样式可以定义成变量重用,这样,就可以通过简单的变量覆盖...
// styles/element/index.scss/* 只需要重写你需要的即可 */@forward'element-plus/theme-chalk/src/common/var.scss'with($colors:('primary':('base':green,),),); 首先我们需要在src/assets/style/element里新建一个index.scss,因为我们后续还要覆盖暗黑模式的变量,所以我们要在同级目录新建一个light.scss...
页面比较简单,主要分为左侧的菜单栏,顶部的导航栏(折叠左侧菜单,切换暗黑模式,员工账号名,退出登录),再下面的标签栏,之后就是主页面显示区域。 我们在layout目录下创建一个index.vue来作为我们的入口文件 代码语言:javascript 复制 <template><!--左侧menu--><sidebar id="guide-sidebar"class="sidebar":class="{...
高度可配置的主题以及暗黑主题适配,并且提供左侧、顶部、综合这三种菜单布局模式 5. Admin Work Pro Admin Work X,漂亮、强大、完善。采用 Vue3 Webpack Typescript ElementPlus编写的中后台框架。全面的系统配置,优质模板,常用组件,真正一站式开箱即用。
特性 ⚡️Vue 3,Vite 2,pnpm 预配置 UI 框架 Element Plus- Vue3 UI 组件库 UnoCSS- 高性能且极具灵活性的即时原子化 CSS 引擎 Icons Iconify- 使用任意的图标集,浏览:🔍Icônes UnoCSS 的纯 CSS 图标方案 插件 Vue Router vite-plugin-pages- 以文件系统为基础的路由 ...
高度可配置的主题以及暗黑主题适配,并且提供左侧、顶部、综合这三种菜单布局模式 5. Admin Work Pro Admin Work X,漂亮、强大、完善。采用 Vue3 Webpack Typescript ElementPlus编写的中后台框架。全面的系统配置,优质模板,常用组件,真正一站式开箱即用。
高度可配置的主题以及暗黑主题适配,并且提供左侧、顶部、综合这三种菜单布局模式 5. Admin Work Pro Admin Work X,漂亮、强大、完善。采用 Vue3 Webpack Typescript ElementPlus编写的中后台框架。全面的系统配置,优质模板,常用组件,真正一站式开箱即用。
基于vite、vue3 集成vue-router、vueuse、pinia、typescript、mock等前端前沿技术。集成ESlint、Prettie、Stylelint等代码规范工具,集成vue-i18n国际化、Element-Plus 及暗黑模式切换功能 - sssx-li/vue-sy-admin
高度可配置的主题以及暗黑主题适配,并且提供左侧、顶部、综合这三种菜单布局模式。 5、Admin Work Pro Admin Work X,漂亮、强大、完善。采用 Vue3 Webpack Typescript ElementPlus编写的中后台框架。全面的系统配置,优质模板,常用组件,真正一站式开箱即用。