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

fixed: 优化内页滚动条 .ok-body-scroll

master
zhizou 2019-08-08 10:10:25 +08:00
parent 7773b705d7
commit c9fe1daf3c
11 changed files with 44 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
css/common.css
View File

@ -107,28 +107,44 @@
display: none;
}
.scrollBody::-webkit-scrollbar
{
.scrollBody::-webkit-scrollbar{
width: 8px;
height: 8px;
background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
.scrollBody::-webkit-scrollbar-track
{
.scrollBody::-webkit-scrollbar-track {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F1F1F1;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
background-color: #FFFFFF;
}
/*定义滑块 内阴影+圆角*/
.scrollBody::-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滚动条样式**/
.ok-body-scroll::-webkit-scrollbar{
width: 8px;
height: 8px;
background-color: #FFFFFF;
}
.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);
}
.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{
background:#00c292 !important;

1
css/sub-page.css
View File

@ -1,3 +1,4 @@
@import "./common.css";
/*主体内容样式*/
.ok-body {
padding: 10px

2
pages/echarts/mapchina.html
View File

@ -23,7 +23,7 @@
}
</style>
</head>
<body class="childrenBody home">
<body class="childrenBody home ok-body-scroll">
<div class="layui-row layui-col-space15">
<div class="layui-col-md6">
<div class="layui-card">

2
pages/echarts/mapchina2.html
View File

@ -20,7 +20,7 @@
}
</style>
</head>
<body class="childrenBody home">
<body class="childrenBody home ok-body-scroll">
<div class="layui-row layui-col-space15">
<div class="layui-col-md6">
<div class="layui-card">

2
pages/home.html
View File

@ -16,7 +16,7 @@
<script type="text/javascript" src="../lib/echarts/echarts.theme.js"></script>
<script type="text/javascript" src="../lib/echarts/world/js/china.js"></script>
</head>
<body class="childrenBody home">
<body class="childrenBody home ok-body-scroll">
<div class="layui-row layui-col-space15">
<div class="layui-col-xs6 layui-col-md3">
<div class="layui-card">

2
pages/home2.html
View File

@ -15,7 +15,7 @@
<script type="text/javascript" src="../lib/echarts/echarts.min.js"></script>
<script type="text/javascript" src="../lib/echarts/echarts.themez.js"></script>
</head>
<body class="childrenBody home">
<body class="childrenBody home ok-body-scroll">
<div class="layui-row layui-col-space15">
<div class="layui-col-xs6 layui-col-md3">
<div class="ok-card layui-card">

2
pages/other/donate.html
View File

@ -9,7 +9,7 @@
<link rel="stylesheet" href="../../css/sub-page.css">
</head>
<body>
<div class="ok-body">
<div class="ok-body ok-body-scroll">
<!--面包屑导航区域-->
<div class="ok-body-breadcrumb">
<span class="layui-breadcrumb">

3
pages/other/okfont.html
View File

@ -5,9 +5,10 @@
<title>IcoMoon Demo</title>
<meta name="description" content="An Icon Font Generated By IcoMoon.io">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../css/common.css">
<link rel="stylesheet" href="../../lib/fonts/okfont.css">
<link rel="stylesheet" href="../../lib/fonts/okfdemo.css"></head>
<body>
<body class="ok-body-scroll">
<div class="bgc1 clearfix">
<h1 class="mhmm mvm">
<span class="fgc1">Font Name:</span> okicomoon <small class="fgc1">(Glyphs:&nbsp;171)</small>

11
pages/permission/permission.html
View File

@ -5,11 +5,12 @@
<title>权限列表</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../lib/layui/css/layui.css">
<link rel="stylesheet" href="../../css/scroll-bar.css">
<!--<link rel="stylesheet" href="../../css/scroll-bar.css">-->
<link rel="stylesheet" href="../../css/sub-page.css">
<link rel="stylesheet" href="../../css/common.css">
<link rel="stylesheet" href="../../lib/nprogress/nprogress.css">
</head>
<body>
<body class="ok-body-scroll">
<div class="ok-body">
<!--面包屑导航区域-->
<div class="ok-body-breadcrumb">
@ -162,7 +163,7 @@
});
}
});
})
});
$("#addPermission").click(function () {
layer.open({
@ -185,8 +186,8 @@
</script>
<!--模板-->
<script type="text/html" id="operationTpl">
<a href="javascript:;" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
<a href="javascript:;" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
<a href="javascript:" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
<a href="javascript:" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
</script>
</body>
</html>

5
pages/tripartite/countup.html
View File

@ -5,6 +5,7 @@
<title>让数字动起来</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../lib/layui/css/layui.css">
<link rel="stylesheet" href="../../css/common.css">
<style>
.ok-body {
padding: 20px;
@ -24,13 +25,13 @@
}
</style>
</head>
<body>
<body class="ok-body-scroll">
<div class="ok-body">
<blockquote class="layui-elem-quote">
<p>让数字动起来 countUp</p>
<p>1. 创建对象</p>
<p>2. 调用对象的start方法执行</p>
</blockquote>
</blockquote>
<pre lay-title="JavaScript">
layui.use('countUp', function () {
var countUp = layui.countUp;

5
pages/tripartite/cropper.html
View File

@ -5,6 +5,7 @@
<title>图片裁剪工具</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../lib/layui/css/layui.css">
<link rel="stylesheet" href="../../css/common.css">
<style>
.ok-body {
padding: 20px;
@ -16,14 +17,14 @@
</style>
</head>
<body>
<div class="ok-body">
<div class="ok-body ok-body-scroll">
<blockquote class="layui-elem-quote">
<p>图片裁剪工具</p>
<p><a target="_blank" href="http://fengyuanchen.github.io/cropper/">cropper</a>
</p>
</blockquote>
<pre lay-title="JavaScript">
</pre>
</div>