element-admin/若依主题风格设计

一个赏心悦目的主题风格，可以增强客户的体验感，让使用者心情愉悦。
若依/element-admin的侧边栏都是灰色/黑色的。个人感觉有点不符合自己的审美，下面几种主题风格（更多风格将持续更新~~~）：
主题一
1.紫色：

2.白色，咱也不知道为啥，一般政府人员喜欢用白色的，，

代码如下：（1）将公共样式styles-variables.scss文件中背景色，hover，title更改即可。各种不同的侧边栏背景色如下：

主题1：灰色  主题2是完整的代码
// $menuBg:#304156;//灰色
// $menuBg:#1d4169;//侧边栏背景-深蓝1Sidebar-主题2：蓝紫色
$menuText:#bfcbd9; //菜单栏字体默认颜色 / 选中后字体颜色 / 选中父级字体颜色
$menuActiveText:#409EFF;
$subMenuActiveText:#f4f4f5;$menuBg:#022e68;//侧边栏背景/ hover / 标题颜色 -高亮深紫蓝
$menuHover:#083f88;
$sidebarTitle: #ffffff;$subMenuBg:#1f2d3d;//展开里面整体背景色 / 单个hover颜色
$subMenuHover:#001528;主题3：白。 最终实现效果是上面那张图，但是需要更改下源码。差一行代码未渲染，有空弄------你们谁研究出来可以发布在评论区哦
$menuText:#000000;  //菜单栏字体默认颜色 / 选中后字体颜色 / 选中父级字体颜色
$menuActiveText:#ffffff;
$subMenuActiveText:#000000;
$menuBg:#ffffff; //侧边栏背景/ hover / 标题颜色
$menuHover:#ffffff;
$sidebarTitle: #ffffff;
$subMenuBg:#ffffff;//展开里面整体背景色  单个hover颜色
$subMenuHover:#3C86FE;

（2）头部logo标题，styles/sidebar中添加这句代码：

 .sidebar-logo-container{ //logo背景色，侧边栏同步background:#022e68;}

（3）侧边栏宽度调整

主题二
下面的theme，本人会抽时间自己实验一下
vue更改element-ui的主题色

element-admin/若依主题风格设计相关推荐

Vue Element Admin 使用mock模块模拟数据
Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发更加独立自主,不会被服务端的开发所阻塞. vue-elem ...
vue+element+admin（初始化项目）
2022.10.17我接触到了vue+element+admin的使用,首先要安装node.jshttps://nodejs.org/zh-cn/download/.和githttps://git-s ...
vue element admin登录方式切换（密码登录或短信登录）
显示结果: 具体代码可以根据vue element admin源码进行更改,下面是页面代码 <el-form ref="loginForm" :model="log ...
element admin跨域问题解决
我们用element admin开发, 往往使用它的官方模板vue-admin-template, 如果要解决开发环境跨域问题, 官方给出的前端解决方案如下: 在 dev 开发模式下可以下使用 web ...
在vue项目中引入element，并改变主题色
写项目提高开发效率是最重要的,引入UI框架就是提高开发效率的有效途径. 这里就说一下自己是如何引入UI框架的--vue中引入elementUI.(项目其实早已经开发完了,只是回过头来回顾一下自己当时是 ...
element如何动态切换主题(vite+vue+ts+elementPlus)
前言提示:动态切换主题使用的是css3的var函数现实示例:切换--main-bg-color的值,使用<div style="--main-bg-color:red"& ...
后端使用SpringBoot和Jwt工具与Redis数据库+前端Vue Element Admin实现用户携带token的登录功能案例
登录功能描述: 前端输入对应的用户信息 ,在用户输入邮箱后点击发送按钮给邮箱发送验证码,拿取到验证填完之后,点击登录按钮给后端发送请求 ,后端接收到请求之后 ,第一步校验验证码,第二步校验用户名和密 ...
Vue Element Admin 添加侧边栏以及他的页面
1. 在 /src/views/ 下添加需要的页面 2. 配置路由器 router 中的路由表 routes,分为 constantRoutes 和 asyncRoutes. 将路由的配置信息添加进路 ...
DIYGW-UI-PHP是一款基于thinkphp framework和 element admin开发而成的前后端分离系统
Vue Element Admin 用mock模块模拟数据
步骤简单一在 src/api/charts 中添加接口 , 方法名为 getindexMock import request from '@/utils/request'export func ...

element-admin/若依主题风格设计

element-admin/若依主题风格设计相关推荐

最新文章

热门文章