From b0a90028c0a87383878d89b945d9ab046aca0bf6 Mon Sep 17 00:00:00 2001 From: bobi Date: Wed, 28 Aug 2019 10:12:15 +0800 Subject: [PATCH] =?UTF-8?q?ipmr:=E5=87=80=E5=8C=96css?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/common.css | 272 +++++++++---------------------------------------- 1 file changed, 48 insertions(+), 224 deletions(-) diff --git a/css/common.css b/css/common.css index 9c03761..f6dc77a 100644 --- a/css/common.css +++ b/css/common.css @@ -1,12 +1,10 @@ - /********************************************* * (*^__^*) 子页面公共样式 (*^__^*) * * 但行好事，莫问前程 * *********************************************/ -[v-cloak] { - display: none !important; -} +[v-cloak]{display:none!important} .ok-body{padding:10px} + /*面包屑导航*/ .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} @@ -25,7 +23,7 @@ /*表单*/ .ok-form{margin-top:10px} -/*滚动条*/ +/*滚动条样式一*/ ::-webkit-scrollbar{width: 8px; height: 8px;} ::-webkit-scrollbar-button:vertical{display: none;} ::-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: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 { - width: 100%; - height: 100%; - display: block; - box-sizing: border-box; -} +.page-fill{width:100%;height:100%;display:block;box-sizing:border-box} /**card**/ -.ok-card-body { - padding: 20px; - position: relative; - width: 100%; - 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; -} +.ok-card-body{padding:20px;position:relative;width:100%;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 { - word-break: break-all; -} +.wp1{word-break:break-all} /*只对英文起作用，以字母作为换行依据*/ -.wp2 { - word-wrap: break-word; -} +.wp2{word-wrap:break-word} -/*--只对英文起作用，以单词作为换行依据*/ -.wp3 { - white-space: pre-wrap; -} +/*只对英文起作用，以单词作为换行依据*/ +.wp3{white-space:pre-wrap} /*只对中文起作用，强制换行*/ -.wp4 { - white-space: nowrap; -} +.wp4{white-space:nowrap} /**边距**/ -.p0 { - 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; -} - -.plr20 { - padding-left: 20px !important; - padding-right: 20px !important; -} - -.pl20 { - padding-left: 20px !important; -} - -.pr20 { - padding-right: 20px !important; -} +.p0{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} +.plr20{padding-left:20px!important;padding-right:20px!important} +.pl20{padding-left:20px!important} +.pr20{padding-right:20px!important} /**浮动**/ -.f-left { - float: left; -} - -.f-right { - float: right; -} - -.clearfix:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden -} +.f-left{float:left} +.f-right{float:right} +.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden} /**卡片样式**/ -.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; -} +.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} /**颜色**/ -.bg-white { - background: white !important; -} - -.col-white { - 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; -} - +.bg-white{background:#fff!important} +.col-white{color:#fff!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} /*进度条颜色*/ -.per-bg-a { - background: #00c292 !important; -} -.per-bg-b { - background: #9a66e4 !important; -} -.per-bg-c { - 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; -} - - - - - - - - - - - - - - - - - +.per-bg-a{background:#00c292!important} +.per-bg-b{background:#9a66e4!important} +.per-bg-c{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}