diff --git a/snowy-admin-web/src/layout/components/moduleMenu.vue b/snowy-admin-web/src/layout/components/moduleMenu.vue index 7272e9fe..3891f1ba 100644 --- a/snowy-admin-web/src/layout/components/moduleMenu.vue +++ b/snowy-admin-web/src/layout/components/moduleMenu.vue @@ -124,7 +124,8 @@ } .module-menu{ line-height: 50px; - border-bottom: 0px + border-bottom: 0px; + width: 105%; } .module-menu-color{ color: white; diff --git a/snowy-admin-web/src/style/index.less b/snowy-admin-web/src/style/index.less index 6c1947e7..edd79e11 100644 --- a/snowy-admin-web/src/style/index.less +++ b/snowy-admin-web/src/style/index.less @@ -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; + } }