ipmr:净化css
bobi
parent
7c0982e7fc
commit
b0a90028c0
272
css/common.css
272
css/common.css
|
|
@ -1,12 +1,10 @@
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* (*^__^*) 子页面公共样式 (*^__^*) *
|
* (*^__^*) 子页面公共样式 (*^__^*) *
|
||||||
* 但行好事，莫问前程 *
|
* 但行好事，莫问前程 *
|
||||||
*********************************************/
|
*********************************************/
|
||||||
[v-cloak] {
|
[v-cloak]{display:none!important}
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
.ok-body{padding:10px}
|
.ok-body{padding:10px}
|
||||||
|
|
||||||
/*面包屑导航*/
|
/*面包屑导航*/
|
||||||
.ok-body-breadcrumb{position:relative;line-height:39px;height:32px;border-bottom:1px solid #e5e5e5}
|
.ok-body-breadcrumb{position:relative;line-height:39px;height:32px;border-bottom:1px solid #e5e5e5}
|
||||||
.ok-body-breadcrumb .layui-btn{line-height:2.4em;margin-top:3px;float:right}
|
.ok-body-breadcrumb .layui-btn{line-height:2.4em;margin-top:3px;float:right}
|
||||||
|
|
@ -25,7 +23,7 @@
|
||||||
/*表单*/
|
/*表单*/
|
||||||
.ok-form{margin-top:10px}
|
.ok-form{margin-top:10px}
|
||||||
|
|
||||||
/*滚动条*/
|
/*滚动条样式一*/
|
||||||
::-webkit-scrollbar{width: 8px; height: 8px;}
|
::-webkit-scrollbar{width: 8px; height: 8px;}
|
||||||
::-webkit-scrollbar-button:vertical{display: none;}
|
::-webkit-scrollbar-button:vertical{display: none;}
|
||||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner{background-color: #e2e2e2;}
|
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner{background-color: #e2e2e2;}
|
||||||
|
|
@ -33,242 +31,68 @@
|
||||||
::-webkit-scrollbar-thumb:vertical:hover{background-color: rgba(0,0,0,.35);}
|
::-webkit-scrollbar-thumb:vertical:hover{background-color: rgba(0,0,0,.35);}
|
||||||
::-webkit-scrollbar-thumb:vertical:active{background-color: rgba(0,0,0,.38);}
|
::-webkit-scrollbar-thumb:vertical:active{background-color: rgba(0,0,0,.38);}
|
||||||
|
|
||||||
|
/*滚动条样式二*/
|
||||||
|
/*
|
||||||
|
.not-scroll::-webkit-scrollbar{height:0;width:0;background:0 0;display:none}
|
||||||
|
.scrollBody::-webkit-scrollbar{display:none}
|
||||||
|
.scrollBody::-webkit-scrollbar,::-webkit-scrollbar{width:8px;height:8px;background-color:#f5f5f5}
|
||||||
|
.scrollBody::-webkit-scrollbar-track,::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.1);background-color:#fff}
|
||||||
|
.scrollBody::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#a8a8a8}
|
||||||
|
.ok-body-scroll::-webkit-scrollbar,::-webkit-scrollbar{width:8px;height:8px;background-color:#fff}
|
||||||
|
.ok-body-scroll::-webkit-scrollbar-track,::-webkit-scrollbar-track{background-color:#fff;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.2)}
|
||||||
|
.ok-body-scroll::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.1);background-color:#dadada}
|
||||||
|
*/
|
||||||
|
|
||||||
/**占满屏幕**/
|
/**占满屏幕**/
|
||||||
.page-fill {
|
.page-fill{width:100%;height:100%;display:block;box-sizing:border-box}
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: block;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**card**/
|
/**card**/
|
||||||
.ok-card-body {
|
.ok-card-body{padding:20px;position:relative;width:100%;box-sizing:border-box}
|
||||||
padding: 20px;
|
.ok-card-body-tb{padding:20px 0;position:relative;width:100%;box-sizing:border-box}
|
||||||
position: relative;
|
.ok-card-title{color:#212529;font-size:16px;padding-bottom:20px;font-weight:bolder}
|
||||||
width: 100%;
|
.ok-card{-webkit-box-shadow:0 0 20px rgba(0,0,0,.08);box-shadow:0 0 20px rgba(0,0,0,.08);border-radius:5px}
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ok-card-body-tb {
|
|
||||||
padding: 20px 0;
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.ok-card-title {
|
|
||||||
color: #212529;
|
|
||||||
font-size: 16px;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
.ok-card {
|
|
||||||
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .08);
|
|
||||||
box-shadow: 0 0 20px rgba(0, 0, 0, .08);
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**断行**/
|
/**断行**/
|
||||||
.wp1 {
|
.wp1{word-break:break-all}
|
||||||
word-break: break-all;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*只对英文起作用，以字母作为换行依据*/
|
/*只对英文起作用，以字母作为换行依据*/
|
||||||
.wp2 {
|
.wp2{word-wrap:break-word}
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--只对英文起作用，以单词作为换行依据*/
|
/*只对英文起作用，以单词作为换行依据*/
|
||||||
.wp3 {
|
.wp3{white-space:pre-wrap}
|
||||||
white-space: pre-wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*只对中文起作用，强制换行*/
|
/*只对中文起作用，强制换行*/
|
||||||
.wp4 {
|
.wp4{white-space:nowrap}
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**边距**/
|
/**边距**/
|
||||||
.p0 {
|
.p0{padding:0!important}
|
||||||
padding: 0 !important;
|
.ptb0{padding-top:0!important;padding-bottom:0!important}
|
||||||
}
|
.plr0{padding-left:0!important;padding-right:0!important}
|
||||||
|
.ptb20{padding-top:20px!important;padding-bottom:20px!important}
|
||||||
.ptb0 {
|
.plr20{padding-left:20px!important;padding-right:20px!important}
|
||||||
padding-top: 0 !important;
|
.pl20{padding-left:20px!important}
|
||||||
padding-bottom: 0 !important;
|
.pr20{padding-right:20px!important}
|
||||||
}
|
|
||||||
|
|
||||||
.plr0 {
|
|
||||||
padding-left: 0 !important;
|
|
||||||
padding-right: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ptb20 {
|
|
||||||
padding-top: 20px !important;
|
|
||||||
padding-bottom: 20px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.plr20 {
|
|
||||||
padding-left: 20px !important;
|
|
||||||
padding-right: 20px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pl20 {
|
|
||||||
padding-left: 20px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pr20 {
|
|
||||||
padding-right: 20px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**浮动**/
|
/**浮动**/
|
||||||
.f-left {
|
.f-left{float:left}
|
||||||
float: left;
|
.f-right{float:right}
|
||||||
}
|
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
|
||||||
|
|
||||||
.f-right {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.clearfix:after {
|
|
||||||
content: ".";
|
|
||||||
display: block;
|
|
||||||
height: 0;
|
|
||||||
clear: both;
|
|
||||||
visibility: hidden
|
|
||||||
}
|
|
||||||
|
|
||||||
/**卡片样式**/
|
/**卡片样式**/
|
||||||
.my-cart {
|
.my-cart{-webkit-box-shadow:0 0 20px rgba(0,0,0,.08);box-shadow:0 0 20px rgba(0,0,0,.08);border-radius:5px}
|
||||||
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .08);
|
|
||||||
box-shadow: 0 0 20px rgba(0, 0, 0, .08);
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**颜色**/
|
/**颜色**/
|
||||||
.bg-white {
|
.bg-white{background:#fff!important}
|
||||||
background: white !important;
|
.col-white{color:#fff!important}
|
||||||
}
|
.childrenBody{padding:15px;background-color:#f1f2f7}
|
||||||
|
.ok-card-list{padding:15px}
|
||||||
.col-white {
|
.ok-card-list .ok-big-font{font-size:36px;color:#666;line-height:36px;padding:5px 0 10px;overflow:hidden;text-overflow:ellipsis;word-break:break-all;white-space:nowrap}
|
||||||
color: white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.childrenBody {
|
|
||||||
padding: 15px;
|
|
||||||
background-color: #f1f2f7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ok-card-list {
|
|
||||||
padding: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ok-card-list .ok-big-font {
|
|
||||||
font-size: 36px;
|
|
||||||
color: #666;
|
|
||||||
line-height: 36px;
|
|
||||||
padding: 5px 0 10px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
word-break: break-all;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*********************美化滚动条样式*********************/
|
|
||||||
|
|
||||||
.not-scroll::-webkit-scrollbar { /*不显示滚动条*/
|
|
||||||
height: 0;
|
|
||||||
width: 0;
|
|
||||||
background: transparent;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scrollBody::-webkit-scrollbar { /*不显示滚动条*/
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar,
|
|
||||||
.scrollBody::-webkit-scrollbar {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
background-color: #F5F5F5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*定义滚动条轨道 内阴影+圆角*/
|
|
||||||
::-webkit-scrollbar-track,
|
|
||||||
.scrollBody::-webkit-scrollbar-track {
|
|
||||||
/*border-radius: 10px;*/
|
|
||||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*定义滑块 内阴影+圆角*/
|
|
||||||
::-webkit-scrollbar-thumb,
|
|
||||||
.scrollBody::-webkit-scrollbar-thumb {
|
|
||||||
/*border-radius: 10px;*/
|
|
||||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
|
|
||||||
background-color: #A8A8A8;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**内页body滚动条样式**/
|
|
||||||
::-webkit-scrollbar,
|
|
||||||
.ok-body-scroll::-webkit-scrollbar {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track,
|
|
||||||
.ok-body-scroll::-webkit-scrollbar-track { /*定义滚动条轨道 内阴影+圆角*/
|
|
||||||
/*border-radius: 10px;*/
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb,
|
|
||||||
.ok-body-scroll::-webkit-scrollbar-thumb { /*定义滑块 内阴影+圆角*/
|
|
||||||
border-radius: 10px;
|
|
||||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
|
|
||||||
background-color: #dadada;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*进度条颜色*/
|
/*进度条颜色*/
|
||||||
.per-bg-a {
|
.per-bg-a{background:#00c292!important}
|
||||||
background: #00c292 !important;
|
.per-bg-b{background:#9a66e4!important}
|
||||||
}
|
.per-bg-c{background:#03a9f3!important}
|
||||||
.per-bg-b {
|
.per-bg-d{background:#fb9678!important}
|
||||||
background: #9a66e4 !important;
|
.per-bg-e{background:#ed4014!important}
|
||||||
}
|
.per-bg-f{background:#ab8ce4!important}
|
||||||
.per-bg-c {
|
.per-bg-g{background:#e46cbb!important}
|
||||||
background: #03a9f3 !important;
|
|
||||||
}
|
|
||||||
.per-bg-d {
|
|
||||||
background: #fb9678 !important;
|
|
||||||
}
|
|
||||||
.per-bg-e {
|
|
||||||
background: #ed4014 !important;
|
|
||||||
}
|
|
||||||
.per-bg-f {
|
|
||||||
background: #ab8ce4 !important;
|
|
||||||
}
|
|
||||||
.per-bg-g {
|
|
||||||
background: #e46cbb !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue