joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

iscs 系统滚动条样式调整

Browse Source
This commit is contained in:
joylink_cuiweidong 2020-01-21 09:28:14 +08:00
parent 17783e0147
commit 8b574e723f
2 changed files with 44 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/views/iscs/iscsSystem/config/pis/mainScreen.vue
View File

@ -236,6 +236,7 @@ border-top: 2px solid #8c8a89;border-left: 2px solid #8c8a89;border-right: 2px s
border-left: 2px solid #f6f8f8;
border-right: 2px solid #9e9e9e;
border-bottom: 2px solid #636667;
cursor: pointer;
}
.screen_station_name{
width: 120px;
@ -253,11 +254,11 @@ border-top: 2px solid #8c8a89;border-left: 2px solid #8c8a89;border-right: 2px s
position: relative;
}
.button_default{
border-top: 2px solid #f1f1f1;border-left: 2px solid #d0d8dd;border-right: 2px solid #959da0;border-bottom: 2px solid #90999d;
border-top: 2px solid #edf1f2;border-left: 2px solid #d0d8dd;border-right: 2px solid #8c8a88;border-bottom: 2px solid #8a8887;
}
.button_default:before{
content:'';
border-top: 2px solid #f1f1f1;border-left: 2px solid #d0d8dd;border-right: 2px solid #959da0;border-bottom: 2px solid #90999d;
border-top: 2px solid #d6d6d6;border-left: 2px solid #d0d8dd;border-right: 2px solid #a0a0a0;border-bottom: 2px solid #90999d;
min-width: 10px;
height: 10px;
display: inline-block;
@ -266,7 +267,7 @@ border-top: 2px solid #8c8a89;border-left: 2px solid #8c8a89;border-right: 2px s
}
.button_default::before{
content:'';
border-top: 2px solid #f1f1f1;border-left: 2px solid #d0d8dd;border-right: 2px solid #959da0;border-bottom: 2px solid #90999d;
border-top: 2px solid #d6d6d6;border-left: 2px solid #d0d8dd;border-right: 2px solid #a0a0a0;border-bottom: 2px solid #90999d;
min-width: 10px;
height: 10px;
display: inline-block;
@ -275,7 +276,7 @@ border-top: 2px solid #8c8a89;border-left: 2px solid #8c8a89;border-right: 2px s
}
.button_default:after{
content:'';
border-top: 2px solid #f4f4f4;border-left: 2px solid #efefef;border-right: 2px solid #727272;border-bottom: 2px solid #7f7f7f;
border-top: 2px solid #fdfdfd;border-left: 2px solid #efefef;border-right: 2px solid #606060;border-bottom: 2px solid #606060;
min-width: 10px;
height: 10px;
display: inline-block;
@ -287,7 +288,7 @@ border-top: 2px solid #8c8a89;border-left: 2px solid #8c8a89;border-right: 2px s
}
.button_default::after{
content:'';
border-top: 2px solid #f4f4f4;border-left: 2px solid #efefef;border-right: 2px solid #727272;border-bottom: 2px solid #7f7f7f;
border-top: 2px solid #fdfdfd;border-left: 2px solid #efefef;border-right: 2px solid #606060;border-bottom: 2px solid #606060;
min-width: 10px;
height: 10px;
display: inline-block;
@ -302,40 +303,4 @@ border-top: 2px solid #8c8a89;border-left: 2px solid #8c8a89;border-right: 2px s
display: flex;
-webkit-flex-flow: row nowrap;
}
// 谷歌、safari、qq浏览器、360浏览器滚动条样式
// 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
.screen_right_group::-webkit-scrollbar {
height: 6px;
// height: 110px;
background-color: transparent;
}
/*定义滚动条轨道 内阴影+圆角*/
.screen_right_group::-webkit-scrollbar-track {
// box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #FFFFFF;;
}
/*定义滑块 内阴影+圆角*/
.screen_right_group::-webkit-scrollbar-thumb {
border-radius: 10px;
// box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #eaeaea;
}
/*滑块效果*/
.screen_right_group::-webkit-scrollbar-thumb:hover {
border-radius: 5px;
// box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.4);
}
/*IE滚动条颜色*/
html {
scrollbar-face-color:#bfbfbf;/*滚动条颜色*/
scrollbar-highlight-color:#000;
scrollbar-3dlight-color:#000;
scrollbar-darkshadow-color:#000;
scrollbar-Shadow-color:#adadad;/*滑块边色*/
scrollbar-arrow-color:rgba(0,0,0,0.4);/*箭头颜色*/
scrollbar-track-color:#eeeeee;/*背景颜色*/
}
</style>

39
src/views/iscs/iscsSystem/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="iscs-system-box">
<top-nav @selectMode="selectMode" />
<div class="content-box">
<div class="content-box iscs_content_box">
<router-view />
</div>
<!-- <bottom /> -->
@ -39,4 +39,41 @@ export default {
padding: 34px 0 0;
background: #45607B;
}
// 谷歌、safari、qq浏览器、360浏览器滚动条样式
// 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
.iscs_content_box ::-webkit-scrollbar {
width: 6px;
height: 6px;
// height: 110px;
background-color: #FFFFFF;
}
/*定义滚动条轨道 内阴影+圆角*/
.iscs_content_box ::-webkit-scrollbar-track {
// box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #FFFFFF;;
}
/*定义滑块 内阴影+圆角*/
.iscs_content_box ::-webkit-scrollbar-thumb {
border-radius: 10px;
// box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #cacaca;
}
/*滑块效果*/
.iscs_content_box ::-webkit-scrollbar-thumb:hover {
border-radius: 5px;
// box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.4);
}
/*IE滚动条颜色*/
html {
scrollbar-face-color:#bfbfbf;/*滚动条颜色*/
scrollbar-highlight-color:#000;
scrollbar-3dlight-color:#000;
scrollbar-darkshadow-color:#000;
scrollbar-Shadow-color:#adadad;/*滑块边色*/
scrollbar-arrow-color:rgba(0,0,0,0.4);/*箭头颜色*/
scrollbar-track-color:#eeeeee;/*背景颜色*/
}
</style>