add: 需要自定义主题样式请自行修改scss中的变量颜色，然后通过gulpfile编译转换成css即可使用(需要自行按照gulp环境)
zhizous
parent
ae849fd7b4
commit
e9069f2a58
|
|
@ -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'));//存放编译之后的目录
|
||||
});
|
||||
|
|
@ -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 {
|
||||
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 {
|
||||
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; }
|
||||
|
|
|
|||
|
|
@ -1,119 +1,71 @@
|
|||
$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-header{
|
||||
.layui-nav-item a{
|
||||
color: $orange;
|
||||
}
|
||||
.layui-icon,.ok-icon{
|
||||
color: $orange;
|
||||
}
|
||||
.layui-nav {
|
||||
.layui-nav-mored{
|
||||
border-color: transparent transparent $orange;
|
||||
}
|
||||
.layui-nav-more{
|
||||
border-color: $orange transparent transparent;
|
||||
}
|
||||
.layui-nav-bar{
|
||||
background: $orange !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**左侧菜单*/
|
||||
.ok-left .okadmin-nav{
|
||||
.layui-nav-bar{
|
||||
background: $orange;
|
||||
}
|
||||
.layui-nav-item{
|
||||
&.layui-this{
|
||||
a{
|
||||
background: $orange;
|
||||
}
|
||||
}
|
||||
.layui-nav-child{
|
||||
.layui-this{
|
||||
a{
|
||||
background: $orange;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.okadmin {
|
||||
|
||||
@each $c in $name{
|
||||
$i:index($name,$c);
|
||||
&.#{$c}_theme{
|
||||
/**头部导航*/
|
||||
/* .okadmin-header {
|
||||
.layui-nav-item a {
|
||||
color: nth($color,$i);
|
||||
}
|
||||
.layui-icon, .ok-icon {
|
||||
color: nth($color,$i);
|
||||
}
|
||||
.layui-nav {
|
||||
.layui-nav-mored {
|
||||
border-color: transparent transparent nth($color,$i);
|
||||
}
|
||||
.layui-nav-more {
|
||||
border-color: nth($color,$i) transparent transparent;
|
||||
}
|
||||
.layui-nav-bar {
|
||||
background: nth($color,$i) !important;
|
||||
}
|
||||
}
|
||||
} */
|
||||
|
||||
/**左侧菜单*/
|
||||
.ok-left .okadmin-nav {
|
||||
.layui-nav-bar {
|
||||
background: nth($color,$i);
|
||||
}
|
||||
.layui-nav-item {
|
||||
&.layui-this {
|
||||
a {
|
||||
background: nth($color,$i);
|
||||
}
|
||||
}
|
||||
.layui-nav-child {
|
||||
.layui-this {
|
||||
a {
|
||||
background: nth($color,$i);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**tab栏*/
|
||||
.ok-tab {
|
||||
.okadmin-tabs-control:hover,
|
||||
.layui-tab-title li.layui-this {
|
||||
color: nth($color,$i);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**tab栏*/
|
||||
.ok-tab{
|
||||
.okadmin-tabs-control:hover,
|
||||
.layui-tab-title li.layui-this{
|
||||
color: $orange;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<link rel="stylesheet" href="../../nodejs/gulp_util/css/okadmin.theme.css">
|
||||
</head>
|
||||
<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">
|
||||
<ul class="layui-nav layui-layout-left">
|
||||
|
|
|
|||
Loading…
Reference in New Issue