.studio-drawer { position: absolute; left: 0px; top: 0px; height: 100vh; width: 100vw; z-index: 100; transition: all 0.5s; // 滚动条宽度 ::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; } // 滚动槽 ::-webkit-scrollbar-track { border-radius: 0; box-shadow: none; border: 0; } // 滚动条滑块 ::-webkit-scrollbar-thumb { border-radius: 0; box-shadow: none; border: 0; background-color: var(--app-background-color-light); } //火狐浏览器滚动条样式 scrollbar-color: var(--app-background-color-scrollbar) #ffffff; /* 滑块颜色 滚动条背景颜色 */ scrollbar-width: thin; /* 滚动条宽度有三种:thin、auto、none */ > .studio-drawer-header { height: 36px; color: var(--app-header-color-bright); background: #ddd; > .studio-drawer-breadcrumb { position: relative; height: 100%; vertical-align: 10px; padding: 6px; font-size: 16px; font-weight: 700; padding-left: 55px; width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; .studio-drawer-back { position: absolute; cursor: pointer; top: 6px; left: 0; } .studio-drawer-back:hover { color: var(--app-font-color-active); } > span { > .studio-drawer-breadcrumb-item-separator { padding: 0px 5px; } > .text { cursor: pointer; border-bottom: 1px solid transparent; } > .text:hover { color: var(--app-font-color-active); border-bottom-color: var(--app-font-color-active); } > .text.active:hover { color: unset; border-bottom-color: transparent; } } } > .close { cursor: pointer; position: absolute; top: 1px; right: 10px; font-size: 20px; } } > .studio-drawer-content { display: flex; height: calc(100% - 36px); transform: translateX(0%) translateZ(0px); transition: transform 0.3s ease-in-out; > .studio-drawer-item { background: var(--view-background-color); flex-shrink: 0; height: 100%; width: 100vw; z-index: 1; } } } .dialogContainer { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0); margin: 0; }