From e9069f2a58b3bbde7d6785de5f4410ffc137be67 Mon Sep 17 00:00:00 2001 From: zhizous Date: Fri, 1 Nov 2019 00:50:36 +0800 Subject: [PATCH] =?UTF-8?q?add:=20=E9=9C=80=E8=A6=81=E8=87=AA=E5=AE=9A?= =?UTF-8?q?=E4=B9=89=E4=B8=BB=E9=A2=98=E6=A0=B7=E5=BC=8F=E8=AF=B7=E8=87=AA?= =?UTF-8?q?=E8=A1=8C=E4=BF=AE=E6=94=B9scss=E4=B8=AD=E7=9A=84=E5=8F=98?= =?UTF-8?q?=E9=87=8F=E9=A2=9C=E8=89=B2=EF=BC=8C=E7=84=B6=E5=90=8E=E9=80=9A?= =?UTF-8?q?=E8=BF=87gulpfile=E7=BC=96=E8=AF=91=E8=BD=AC=E6=8D=A2=E6=88=90c?= =?UTF-8?q?ss=E5=8D=B3=E5=8F=AF=E4=BD=BF=E7=94=A8(=E9=9C=80=E8=A6=81?= =?UTF-8?q?=E8=87=AA=E8=A1=8C=E6=8C=89=E7=85=A7gulp=E7=8E=AF=E5=A2=83)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/gulpfile.js | 13 +++ css/okadmin.theme.css | 27 +++---- css/okadmin.theme.scss | 180 +++++++++++++++-------------------------- index.html | 2 +- 4 files changed, 92 insertions(+), 130 deletions(-) create mode 100644 css/gulpfile.js diff --git a/css/gulpfile.js b/css/gulpfile.js new file mode 100644 index 0000000..2aecb9d --- /dev/null +++ b/css/gulpfile.js @@ -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'));//存放编译之后的目录 +}); \ No newline at end of file diff --git a/css/okadmin.theme.css b/css/okadmin.theme.css index bf8e39a..14b5634 100644 --- a/css/okadmin.theme.css +++ b/css/okadmin.theme.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; } diff --git a/css/okadmin.theme.scss b/css/okadmin.theme.scss index 7931178..1edf060 100644 --- a/css/okadmin.theme.scss +++ b/css/okadmin.theme.scss @@ -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; - } - } + } } - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/index.html b/index.html index 54d3a42..4f1a60f 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ -
+