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

1
css/sub-page.css
View File

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

2
pages/echarts/mapchina.html
View File

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

2
pages/echarts/mapchina2.html
View File

@ -20,7 +20,7 @@
} }
</style> </style>
</head> </head>
<body class="childrenBody home"> <body class="childrenBody home ok-body-scroll">
<div class="layui-row layui-col-space15"> <div class="layui-row layui-col-space15">
<div class="layui-col-md6"> <div class="layui-col-md6">
<div class="layui-card"> <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/echarts.theme.js"></script>
<script type="text/javascript" src="../lib/echarts/world/js/china.js"></script> <script type="text/javascript" src="../lib/echarts/world/js/china.js"></script>
</head> </head>
<body class="childrenBody home"> <body class="childrenBody home ok-body-scroll">
<div class="layui-row layui-col-space15"> <div class="layui-row layui-col-space15">
<div class="layui-col-xs6 layui-col-md3"> <div class="layui-col-xs6 layui-col-md3">
<div class="layui-card"> <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.min.js"></script>
<script type="text/javascript" src="../lib/echarts/echarts.themez.js"></script> <script type="text/javascript" src="../lib/echarts/echarts.themez.js"></script>
</head> </head>
<body class="childrenBody home"> <body class="childrenBody home ok-body-scroll">
<div class="layui-row layui-col-space15"> <div class="layui-row layui-col-space15">
<div class="layui-col-xs6 layui-col-md3"> <div class="layui-col-xs6 layui-col-md3">
<div class="ok-card layui-card"> <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"> <link rel="stylesheet" href="../../css/sub-page.css">
</head> </head>
<body> <body>
<div class="ok-body"> <div class="ok-body ok-body-scroll">
<!--面包屑导航区域--> <!--面包屑导航区域-->
<div class="ok-body-breadcrumb"> <div class="ok-body-breadcrumb">
<span class="layui-breadcrumb"> <span class="layui-breadcrumb">

3
pages/other/okfont.html
View File

@ -5,9 +5,10 @@
<title>IcoMoon Demo</title> <title>IcoMoon Demo</title>
<meta name="description" content="An Icon Font Generated By IcoMoon.io"> <meta name="description" content="An Icon Font Generated By IcoMoon.io">
<meta name="viewport" content="width=device-width, initial-scale=1"> <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/okfont.css">
<link rel="stylesheet" href="../../lib/fonts/okfdemo.css"></head> <link rel="stylesheet" href="../../lib/fonts/okfdemo.css"></head>
<body> <body class="ok-body-scroll">
<div class="bgc1 clearfix"> <div class="bgc1 clearfix">
<h1 class="mhmm mvm"> <h1 class="mhmm mvm">
<span class="fgc1">Font Name:</span> okicomoon <small class="fgc1">(Glyphs:&nbsp;171)</small> <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> <title>权限列表</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <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="../../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/sub-page.css">
<link rel="stylesheet" href="../../css/common.css">
<link rel="stylesheet" href="../../lib/nprogress/nprogress.css"> <link rel="stylesheet" href="../../lib/nprogress/nprogress.css">
</head> </head>
<body> <body class="ok-body-scroll">
<div class="ok-body"> <div class="ok-body">
<!--面包屑导航区域--> <!--面包屑导航区域-->
<div class="ok-body-breadcrumb"> <div class="ok-body-breadcrumb">
@ -162,7 +163,7 @@
}); });
} }
}); });
}) });
$("#addPermission").click(function () { $("#addPermission").click(function () {
layer.open({ layer.open({
@ -185,8 +186,8 @@
</script> </script>
<!--模板--> <!--模板-->
<script type="text/html" id="operationTpl"> <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="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="del"><i class="layui-icon">&#xe640;</i></a>
</script> </script>
</body> </body>
</html> </html>

3
pages/tripartite/countup.html
View File

@ -5,6 +5,7 @@
<title>让数字动起来</title> <title>让数字动起来</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <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="../../lib/layui/css/layui.css">
<link rel="stylesheet" href="../../css/common.css">
<style> <style>
.ok-body { .ok-body {
padding: 20px; padding: 20px;
@ -24,7 +25,7 @@
} }
</style> </style>
</head> </head>
<body> <body class="ok-body-scroll">
<div class="ok-body"> <div class="ok-body">
<blockquote class="layui-elem-quote"> <blockquote class="layui-elem-quote">
<p>让数字动起来 countUp</p> <p>让数字动起来 countUp</p>

3
pages/tripartite/cropper.html
View File

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