mirror of https://gitee.com/xiaonuobase/snowy
【更新】修复一个前端模块坞闪烁问题，优化css样式
小诺
俞宝山
parent
09c4fb24b5
commit
e97ea6b731
|
|
@ -124,7 +124,8 @@
|
|||
}
|
||||
.module-menu{
|
||||
line-height: 50px;
|
||||
border-bottom: 0px
|
||||
border-bottom: 0px;
|
||||
width: 105%;
|
||||
}
|
||||
.module-menu-color{
|
||||
color: white;
|
||||
|
|
|
|||
|
|
@ -7,9 +7,9 @@
|
|||
/* 全局 */
|
||||
/*
|
||||
#app, body, html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #f6f8f9;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #f6f8f9;
|
||||
}
|
||||
*/
|
||||
.body, html {
|
||||
|
|
@ -19,31 +19,31 @@
|
|||
}
|
||||
|
||||
a, button, input, textarea {
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
box-sizing: border-box;
|
||||
outline: none !important;
|
||||
-webkit-appearance: none;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
box-sizing: border-box;
|
||||
outline: none !important;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* 大布局样式 */
|
||||
.aminui {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.aminui-wrapper {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.adminui-main {
|
||||
|
|
@ -71,31 +71,31 @@ a, button, input, textarea {
|
|||
|
||||
/* 双排菜单布局 */
|
||||
.snowy-doublerow-layout-menu {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
line-height: 0;
|
||||
align-items: center;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
line-height: 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.snowy-doublerow-layout-menu-item-fort-div {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
opacity: 1;
|
||||
display: block;
|
||||
flex: auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
opacity: 1;
|
||||
display: block;
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
.snowy-doublerow-layout-menu-item-fort-div-span {
|
||||
font-size: 12px;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 12px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.snowy-doublerow-side-top {
|
||||
border-bottom: 1px solid var(--border-color-split);
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
padding-left: 20px;
|
||||
font-size: 12px
|
||||
border-bottom: 1px solid var(--border-color-split);
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
padding-left: 20px;
|
||||
font-size: 12px
|
||||
}
|
||||
|
||||
// 应用主题色
|
||||
|
|
@ -107,49 +107,49 @@ a, button, input, textarea {
|
|||
}
|
||||
|
||||
.snowy-title{
|
||||
color: var(--text-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
.ant-layout-sider-collapsed{
|
||||
.logo-bar>span{
|
||||
display: none;
|
||||
}
|
||||
.logo-bar>span{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.ant-layout-sider-dark{
|
||||
.snowy-header-logo{
|
||||
color: #fff;
|
||||
}
|
||||
.snowy-header-logo{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 设置抽屉样式 */
|
||||
.layout-setting {
|
||||
position: fixed;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 3px 0 0 3px;
|
||||
bottom: 50%;
|
||||
right: 0px;
|
||||
z-index: 100;
|
||||
background: @primary-color;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
position: fixed;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 3px 0 0 3px;
|
||||
bottom: 50%;
|
||||
right: 0px;
|
||||
z-index: 100;
|
||||
background: @primary-color;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.layout-setting i {
|
||||
color: #fff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 头部 */
|
||||
.snowy-header {
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--border-color-split);
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
|
||||
background-color: var(--body-background);
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--border-color-split);
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
|
||||
background-color: var(--body-background);
|
||||
}
|
||||
// 应用主题色
|
||||
.snowy-header-primary-color {
|
||||
|
|
@ -167,19 +167,19 @@ a, button, input, textarea {
|
|||
}
|
||||
|
||||
.ant-layout-sider-dark {
|
||||
.snowy-title{
|
||||
color: #fff;
|
||||
}
|
||||
.snowy-title{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.snowy-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.snowy-header-left .menu-unfold-outlined {
|
||||
padding: 0 12px
|
||||
padding: 0 12px
|
||||
}
|
||||
|
||||
.snowy-header-right {
|
||||
|
|
@ -200,101 +200,101 @@ a, button, input, textarea {
|
|||
}
|
||||
|
||||
.snowy-header-logo .logo-bar {
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.snowy-header-logo .logo-bar .logo {
|
||||
margin-right: 10px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
margin-right: 10px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
/* 面包屑 */
|
||||
.adminui-topbar {
|
||||
padding-left: 15px
|
||||
padding-left: 15px
|
||||
}
|
||||
|
||||
.adminui-topbar .left-panel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.adminui-topbar .right-panel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 多标签 */
|
||||
.snowy-tags {
|
||||
height: 40px;
|
||||
background: var(--component-background);
|
||||
height: 40px;
|
||||
background: var(--component-background);
|
||||
}
|
||||
|
||||
.snowy-tags ul {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
padding-left: 0;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.snowy-tags li {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
line-height: 39.5px;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
line-height: 39.5px;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.snowy-tags li::after {
|
||||
content: " ";
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
background-image: linear-gradient(#fff, #e6e6e6);
|
||||
content: " ";
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
background-image: linear-gradient(#fff, #e6e6e6);
|
||||
}
|
||||
|
||||
.snowy-tags li a {
|
||||
padding: 0 10px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.snowy-tags li i {
|
||||
margin-left: 10px;
|
||||
border-radius: 3px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 10px;
|
||||
border-radius: 3px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.snowy-tags li i:hover {
|
||||
background: rgba(0, 0, 0, .2);
|
||||
color: @body-background;
|
||||
background: rgba(0, 0, 0, .2);
|
||||
color: @body-background;
|
||||
}
|
||||
|
||||
.snowy-tags li:hover {
|
||||
background: @body-background;
|
||||
background: @body-background;
|
||||
}
|
||||
|
||||
.snowy-tags li.active {
|
||||
background: @primary-color;
|
||||
background: @primary-color;
|
||||
}
|
||||
|
||||
.snowy-tags li.active a {
|
||||
color: #fff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.snowy-tags li.sortable-ghost {
|
||||
opacity: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.snowy-header-tags-right {
|
||||
|
|
@ -344,38 +344,37 @@ a, button, input, textarea {
|
|||
|
||||
/*页面最大化*/
|
||||
.aminui.main-maximize {
|
||||
.main-maximize-exit {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ant-layout-sider, .ant-layout-sider-dark, .layout-setting, .snowy-header {
|
||||
display: none;
|
||||
}
|
||||
.main-maximize-exit {
|
||||
display: block;
|
||||
}
|
||||
.ant-layout-sider, .ant-layout-sider-dark, .layout-setting, .snowy-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 最大化后的退出按钮 */
|
||||
.main-maximize-exit {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 3000;
|
||||
top: -20px;
|
||||
padding-top: 18px;
|
||||
left: 50%;
|
||||
margin-left: -20px;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
text-align: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 3000;
|
||||
top: -20px;
|
||||
padding-top: 18px;
|
||||
left: 50%;
|
||||
margin-left: -20px;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.main-maximize-exit:hover {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.ant-layout-sider{
|
||||
overflow: auto;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* 重写antdv的一些样式，定义到全局 */
|
||||
|
|
@ -416,39 +415,39 @@ body,
|
|||
.gen-preview-content,
|
||||
|
||||
.adminui-main{
|
||||
&::-webkit-scrollbar {
|
||||
/*滚动条整体样式*/
|
||||
width : 0px; /*高宽分别对应横竖滚动条的尺寸*/
|
||||
height: 0px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
/*滚动条里面小方块*/
|
||||
border-radius : 10px;
|
||||
background-color: @component-background; // skyblue
|
||||
background-image: -webkit-linear-gradient(
|
||||
45deg,
|
||||
rgba(255, 255, 255, 0.2) 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
rgba(255, 255, 255, 0.2) 50%,
|
||||
rgba(255, 255, 255, 0.2) 75%,
|
||||
transparent 75%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
/*滚动条里面轨道*/
|
||||
box-shadow : inset 0 0 2px rgba(0, 0, 0, 0.2);
|
||||
background : @component-background;
|
||||
border-radius: 5px;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
/*滚动条整体样式*/
|
||||
width : 0px; /*高宽分别对应横竖滚动条的尺寸*/
|
||||
height: 0px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
/*滚动条里面小方块*/
|
||||
border-radius : 10px;
|
||||
background-color: @component-background; // skyblue
|
||||
background-image: -webkit-linear-gradient(
|
||||
45deg,
|
||||
rgba(255, 255, 255, 0.2) 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
rgba(255, 255, 255, 0.2) 50%,
|
||||
rgba(255, 255, 255, 0.2) 75%,
|
||||
transparent 75%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
/*滚动条里面轨道*/
|
||||
box-shadow : inset 0 0 2px rgba(0, 0, 0, 0.2);
|
||||
background : @component-background;
|
||||
border-radius: 5px;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.json-box-9136076486841527{
|
||||
overflow: hidden!important;;
|
||||
.CodeMirror-scrollbar-filler{
|
||||
display: none!important;
|
||||
}
|
||||
overflow: hidden!important;;
|
||||
.CodeMirror-scrollbar-filler{
|
||||
display: none!important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue