meri-design/dist/theme/FrameMenu.css

基于vue框架的ui库

/*!
 * @meri-design v2.2.19-beta10
 * (c) 2019-2022 YuShu-Web
 * Released under the MIT License.
 * 2025-01-14 15:25:40
 */.p-frame-menu-fixed{background-color:hsla(0,0%,100%,0);position:fixed;width:100%}.p-frame-menu,.p-frame-menu-fixed{height:100%;left:0;top:0;z-index:700}.p-frame-menu{background-color:#1034b2;box-shadow:20px 0 34px 0 rgba(0,16,34,.13);font-size:0;max-width:1230px;min-width:640px;outline:none;overflow:hidden;position:absolute}.p-frame-menu-text-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.p-frame-header{display:flex;height:48px;padding-left:16px;padding-right:16px;width:100%}.p-frame-header-btn{align-items:center;border-bottom:1px solid #1241bf;display:flex;height:100%;width:196px}.p-frame-header-btn .p-frame-icon-menu{cursor:pointer;font-size:0;height:24px;width:24px}.p-frame-header-btn .p-frame-icon-menu path{fill:#fff}.p-frame-header-btn .p-frame-system-name{color:#fff;font-size:16px;padding-left:12px;width:calc(100% - 24px)}.p-frame-header-search{border-bottom:1px solid #1241bf;flex:auto;height:100%}.p-frame-header-search,.p-frame-search-label{align-items:center;display:flex;position:relative}.p-frame-search-label{background-color:#1241bf;height:32px;padding-left:12px;padding-right:12px;width:100%}.p-frame-search-icon{font-size:0;height:20px;width:20px}.p-frame-search-icon path{fill:#fff;opacity:.5}.p-frame-search-clear{cursor:pointer;font-size:0;height:16px;position:absolute;right:12px;top:8px;width:16px;z-index:3}.p-frame-search-clear path{fill:#fff;opacity:.5;transition:opacity .3s}.p-frame-search-clear:hover path{opacity:1}.p-frame-search-input{background:none;border:0;border-radius:4px;outline:none;padding-left:8px;position:relative;z-index:2}.p-frame-search-input,.p-frame-search-placeholder{color:#fff;font-size:14px;height:100%;line-height:32px;width:100%}.p-frame-search-placeholder{left:0;opacity:.5;padding-left:40px;position:absolute;top:0;z-index:1}.p-frame-search-panel{background-color:#1241bf;border-radius:4px;box-shadow:0 2px 10px rgba(31,35,41,.1);left:0;max-height:480px;overflow-x:hidden;overflow-y:auto;padding-left:16px;padding-right:16px;position:absolute;top:44px;width:100%;z-index:10}.p-frame-search-panel::-webkit-scrollbar{height:6px;width:6px}.p-frame-search-panel::-webkit-scrollbar-thumb{background-color:#2481f2;border-radius:3px}.p-frame-search-panel::-webkit-scrollbar-thumb:hover{background-color:#246fe5}.p-frame-search-panel::-webkit-scrollbar-track{background-color:#1241bf}.p-frame-search-panel-item{cursor:pointer;height:72px;padding-bottom:16px;padding-top:16px;position:relative;transition:all .3s;width:100%}.p-frame-search-panel-item+.p-frame-search-panel-item{border-top:1px solid #1b4acc}.p-frame-search-panel-item:before{background-color:#215dd9;content:"";display:block;height:100%;left:-16px;opacity:0;position:absolute;top:0;transition:opacity .3s;width:calc(100% + 32px);z-index:-1}.p-frame-search-panel-item:hover{color:#fff}.p-frame-search-panel-item:hover:before{opacity:1}.p-frame-search-panel-item .p-frame-search-text-t{font-size:14px;line-height:20px}.p-frame-search-panel-item .p-frame-search-f-t{color:#fff}.p-frame-search-panel-item .p-frame-search-s-t{color:hsla(0,0%,100%,.8)}.p-frame-content{align-items:flex-start;display:flex;height:calc(100% - 48px);width:100%}.p-first-menu{border-right:1px solid #1241bf;height:100%;overflow-x:hidden;overflow-y:auto;padding-left:16px;padding-right:16px;width:212px}.p-first-menu-list{align-items:center;border-bottom:1px solid #1241bf;cursor:pointer;display:flex;height:55px;position:relative;transition:background-color .3s;width:100%}.p-first-menu-list:before{background-color:#246fe5;content:"";display:block;height:100%;left:-16px;opacity:0;position:absolute;top:0;transition:opacity .3s;width:calc(100% + 32px);z-index:-1}.p-first-menu-list:hover:before{opacity:1}.p-first-menu-list .p-first-menu-icon{height:16px;overflow:hidden;width:16px}.p-first-menu-list .p-first-menu-icon img{height:100%;width:100%}.p-first-menu-list .p-first-menu-name{color:#fff;font-size:16px;padding-left:12px;padding-right:32px;width:calc(100% - 16px)}.p-first-menu-list .p-first-menu-arrow{font-size:0;height:16px;position:absolute;right:8px;top:20px;width:16px}.p-first-menu-list .p-first-menu-arrow path{fill:#fff;opacity:.5}.p-first-menu-list-active:before{opacity:1}.p-second-menu{height:100%;max-width:1018px;min-width:428px;overflow-x:auto;overflow-y:scroll;padding-left:36px;padding-right:36px}.p-second-menu::-webkit-scrollbar-track{background-color:#1034b2}.p-second-menu::-webkit-scrollbar{height:6px;width:6px}.p-second-menu::-webkit-scrollbar-thumb{background-color:#2481f2;border-radius:3px}.p-second-menu::-webkit-scrollbar-thumb:hover{background-color:#246fe5}.p-second-menu-content{align-items:flex-start;display:flex;width:428px}.p-second-menu-lists{width:208px}.p-second-menu-box{display:inline-block;padding-right:36px;padding-top:16px;vertical-align:top;width:100%}.p-second-menu-title{border-bottom:1px solid #1241bf;height:38px;padding-top:8px;width:100%}.p-second-menu-title .p-second-menu-text{color:#fff;font-size:16px;line-height:20px;padding-left:8px}.p-second-menu-list{padding-bottom:16px;padding-top:16px;width:100%}.p-second-menu-list .p-second-menu-item{color:hsla(0,0%,100%,.8);cursor:pointer;font-size:14px;line-height:32px;padding-left:8px;padding-right:8px;transition:all .3s;width:100%}.p-second-menu-list .p-second-menu-item:hover{background-color:hsla(0,0%,100%,.1);color:#fff}.menuSlideLeftRight-enter-active{animation:menuSlideInLeft .2s ease-out}.menuSlideLeftRight-leave-active{animation:menuSlideOutLeft .2s ease-in}@-moz-keyframes menuSlideInLeft{0%{opacity:.5;transform:translate3d(-100%,0,0);visibility:visible}to{opacity:1;transform:translateZ(0)}}@-webkit-keyframes menuSlideInLeft{0%{opacity:.5;transform:translate3d(-100%,0,0);visibility:visible}to{opacity:1;transform:translateZ(0)}}@-o-keyframes menuSlideInLeft{0%{opacity:.5;transform:translate3d(-100%,0,0);visibility:visible}to{opacity:1;transform:translateZ(0)}}@keyframes menuSlideInLeft{0%{opacity:.5;transform:translate3d(-100%,0,0);visibility:visible}to{opacity:1;transform:translateZ(0)}}@-moz-keyframes menuSlideOutLeft{0%{opacity:1;transform:translateZ(0)}to{opacity:.5;transform:translate3d(-100%,0,0);visibility:hidden}}@-webkit-keyframes menuSlideOutLeft{0%{opacity:1;transform:translateZ(0)}to{opacity:.5;transform:translate3d(-100%,0,0);visibility:hidden}}@-o-keyframes menuSlideOutLeft{0%{opacity:1;transform:translateZ(0)}to{opacity:.5;transform:translate3d(-100%,0,0);visibility:hidden}}@keyframes menuSlideOutLeft{0%{opacity:1;transform:translateZ(0)}to{opacity:.5;transform:translate3d(-100%,0,0);visibility:hidden}}