bonus
/
bonus-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

框架样式顶部固定

This commit is contained in:
zzyuan 2025-06-10 09:49:36 +08:00
parent 5f48ceb3c3
commit 5e10fcecf0
2 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/assets/styles/sidebar.scss
View File

@ -1,13 +1,13 @@
#app { #app {
.main-container { .main-container {
height: calc(100%-80px); height: 90%;
// width: calc(100%-240px); // overflow-y: auto;
width: -webkit-fill-available; width: -webkit-fill-available;
transition: margin-left .28s; transition: margin-left .28s;
margin-left: $base-sidebar-width; margin-left: $base-sidebar-width;
position: absolute; // position: absolute;
top: 84px; // top: 84px;
} }
.sidebarHide { .sidebarHide {
@ -19,16 +19,16 @@
transition: width 0.28s; transition: width 0.28s;
width: $base-sidebar-width !important; width: $base-sidebar-width !important;
background-color: $base-menu-background; background-color: $base-menu-background;
height: inherit; height: 90%;
position: absolute; position: absolute;
font-size: 0px; font-size: 0px;
top: 84px; top: 84px;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 1001; z-index: 1001;
overflow: hidden; // overflow: hidden;
// -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35); -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
// box-shadow: 2px 0 6px rgba(0,21,41,.35); box-shadow: 2px 0 6px rgba(0,21,41,.35);
// reset element-ui css // reset element-ui css
.horizontal-collapse-transition { .horizontal-collapse-transition {

6
src/layout/components/AppMain.vue
View File

@ -29,7 +29,8 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.app-main { .app-main {
/* 50= navbar 50 */ /* 50= navbar 50 */
min-height: calc(100vh - 50px); height: 85vh;
overflow-y: auto;
width: 100%; width: 100%;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -42,7 +43,8 @@ export default {
.hasTagsView { .hasTagsView {
.app-main { .app-main {
/* 84 = navbar + tags-view = 50 + 34 */ /* 84 = navbar + tags-view = 50 + 34 */
min-height: calc(100vh - 84px); height: 85vh;
overflow-y: auto;
} }
.fixed-header + .app-main { .fixed-header + .app-main {