root
/
ok-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add: 需要自定义主题样式请自行修改scss中的变量颜色，然后通过gulpfile编译转换成css即可使用(需要自行按照gulp环境)

master
zhizous 2019-11-01 00:50:36 +08:00
parent ae849fd7b4
commit e9069f2a58
4 changed files with 92 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
css/gulpfile.js Normal file
View File

@ -0,0 +1,13 @@
let gulp = require('gulp'),
sass = require('gulp-sass'),//sass转css插件
auto = require('gulp-autoprefixer');//解决浏览器兼容问题的插件
gulp.task('default', function(){
return gulp.src('sass/*')//需要编译的文件目录
.pipe(sass({outputStyle:'compressed'}).on('error',sass.logError))
.pipe(auto({//处理兼容
browsers:['last 2 version'],
cascade:false
}))
.pipe(sass())//开始编译
.pipe(gulp.dest('css'));//存放编译之后的目录
});

27
css/okadmin.theme.css
View File

@ -1,18 +1,3 @@
.okadmin.orange_theme .okadmin-header .layui-nav-item a {
color: #FF4806; }
.okadmin.orange_theme .okadmin-header .layui-icon, .okadmin.orange_theme .okadmin-header .ok-icon {
color: #FF4806; }
.okadmin.orange_theme .okadmin-header .layui-nav .layui-nav-mored {
border-color: transparent transparent #FF4806; }
.okadmin.orange_theme .okadmin-header .layui-nav .layui-nav-more {
border-color: #FF4806 transparent transparent; }
.okadmin.orange_theme .okadmin-header .layui-nav .layui-nav-bar {
background: #FF4806 !important; }
.okadmin.orange_theme .ok-left .okadmin-nav .layui-nav-bar { .okadmin.orange_theme .ok-left .okadmin-nav .layui-nav-bar {
background: #FF4806; } background: #FF4806; }
@ -24,3 +9,15 @@
.okadmin.orange_theme .ok-tab .okadmin-tabs-control:hover, .okadmin.orange_theme .ok-tab .layui-tab-title li.layui-this { .okadmin.orange_theme .ok-tab .okadmin-tabs-control:hover, .okadmin.orange_theme .ok-tab .layui-tab-title li.layui-this {
color: #FF4806; } color: #FF4806; }
.okadmin.blue_theme .ok-left .okadmin-nav .layui-nav-bar {
background: #2D8CF0; }
.okadmin.blue_theme .ok-left .okadmin-nav .layui-nav-item.layui-this a {
background: #2D8CF0; }
.okadmin.blue_theme .ok-left .okadmin-nav .layui-nav-item .layui-nav-child .layui-this a {
background: #2D8CF0; }
.okadmin.blue_theme .ok-tab .okadmin-tabs-control:hover, .okadmin.blue_theme .ok-tab .layui-tab-title li.layui-this {
color: #2D8CF0; }

106
css/okadmin.theme.scss
View File

@ -1,42 +1,56 @@
$orange: #FF4806; $name: orange, blue;
$color: #FF4806, #2D8CF0;
/* .test{
@each $c in $name{
$i:index($name,$c);
&:nth-child(#{$i+1}){
background: nth($name,$i);
width: nth($name,$i);
}
}
} */
.okadmin.orange_theme{ .okadmin {
@each $c in $name{
$i:index($name,$c);
&.#{$c}_theme{
/**头部导航*/ /**头部导航*/
.okadmin-header{ /* .okadmin-header {
.layui-nav-item a { .layui-nav-item a {
color: $orange; color: nth($color,$i);
} }
.layui-icon, .ok-icon { .layui-icon, .ok-icon {
color: $orange; color: nth($color,$i);
} }
.layui-nav { .layui-nav {
.layui-nav-mored { .layui-nav-mored {
border-color: transparent transparent $orange; border-color: transparent transparent nth($color,$i);
} }
.layui-nav-more { .layui-nav-more {
border-color: $orange transparent transparent; border-color: nth($color,$i) transparent transparent;
} }
.layui-nav-bar { .layui-nav-bar {
background: $orange !important; background: nth($color,$i) !important;
}
} }
} }
} */
/**左侧菜单*/ /**左侧菜单*/
.ok-left .okadmin-nav { .ok-left .okadmin-nav {
.layui-nav-bar { .layui-nav-bar {
background: $orange; background: nth($color,$i);
} }
.layui-nav-item { .layui-nav-item {
&.layui-this { &.layui-this {
a { a {
background: $orange; background: nth($color,$i);
} }
} }
.layui-nav-child { .layui-nav-child {
.layui-this { .layui-this {
a { a {
background: $orange; background: nth($color,$i);
} }
} }
} }
@ -47,73 +61,11 @@ $orange: #FF4806;
.ok-tab { .ok-tab {
.okadmin-tabs-control:hover, .okadmin-tabs-control:hover,
.layui-tab-title li.layui-this { .layui-tab-title li.layui-this {
color: $orange; color: nth($color,$i);
} }
} }
} }
}
}

2
index.html
View File

@ -11,7 +11,7 @@
<link rel="stylesheet" href="../../nodejs/gulp_util/css/okadmin.theme.css"> <link rel="stylesheet" href="../../nodejs/gulp_util/css/okadmin.theme.css">
</head> </head>
<body class="layui-layout-body"> <body class="layui-layout-body">
<div class="layui-layout layui-layout-admin okadmin"><!-- 主题在此加 例子orange_theme --> <div class="layui-layout layui-layout-admin okadmin blue_theme"><!-- 主题在此加 例子orange_theme -->
<!--头部导航--> <!--头部导航-->
<div class="layui-header okadmin-header"> <div class="layui-header okadmin-header">
<ul class="layui-nav layui-layout-left"> <ul class="layui-nav layui-layout-left">