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