meri-design-dev/custom/theme/FrameMenu.styl

基于vue框架的ui库

/*!
 * @meri-design-dev v0.0.13
 * (c) 2019-2020 wangyongcun
 * Released under the MIT License.
 * 2024-04-29 11:26:20
 */
.p-frame-menu-fixed
  position: fixed
  left: 0
  top: 0
  z-index: 700
  background-color: rgba(255,255,255,0)
  width: 100%
  height: 100%

.p-frame-menu
  position: absolute
  left: 0
  top: 0
  z-index: 700
  outline: none
  background-color: $blue-900
  box-shadow: 20px 0 34px 0 rgba(0,16,34,0.13)
  min-width: 640px
  max-width: 1230px
  height: 100%
  overflow: hidden
  font-size: 0

.p-frame-menu-text-overflow
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

.p-frame-header
  display: flex
  padding-left: 16px
  padding-right: 16px
  width: 100%
  height: 48px

.p-frame-header-btn
  display: flex
  align-items: center
  border-bottom: 1px solid $blue-800
  width: 196px
  height: 100%

.p-frame-header-btn .p-frame-icon-menu
  width: 24px
  height: 24px
  font-size: 0
  cursor: pointer

.p-frame-header-btn .p-frame-icon-menu path
  fill: $white

.p-frame-header-btn .p-frame-system-name
  padding-left: 12px
  width: calc(100% - 24px)
  color: $white
  font-size: 16px

.p-frame-header-search
  position: relative
  flex: auto
  display: flex
  align-items: center
  border-bottom: 1px solid $blue-800
  height: 100%

.p-frame-search-label
  position: relative
  display: flex
  align-items: center
  padding-left: 12px
  padding-right: 12px
  background-color: $blue-800
  width: 100%
  height: 32px

.p-frame-search-icon
  width: 20px
  height: 20px
  font-size: 0

.p-frame-search-icon path
  fill: $white
  opacity: .5

.p-frame-search-clear
  position: absolute
  right: 12px
  top: 8px
  z-index: 3
  width: 16px
  height: 16px
  cursor: pointer
  font-size: 0

.p-frame-search-clear path
  fill: $white
  opacity: .5
  transition: opacity .3s

.p-frame-search-clear:hover path
  opacity: 1

.p-frame-search-input
  position: relative
  z-index: 2
  outline: none
  background: none
  padding-left: 8px
  border: 0
  border-radius: 4px
  width: 100%
  height: 100%
  line-height: 32px
  font-size: 14px
  color: $white

.p-frame-search-placeholder
  position: absolute
  left: 0
  top: 0
  z-index: 1
  padding-left: 40px
  width: 100%
  height: 100%
  line-height: 32px
  font-size: 14px
  color: $white
  opacity: .5

.p-frame-search-panel
  position: absolute
  top: 44px
  left: 0
  z-index: 10
  padding-left: 16px
  padding-right: 16px
  background-color: $blue-800
  border-radius: 4px
  box-shadow: $box-shadow-bottom
  overflow-x: hidden
  overflow-y: auto
  width: 100%
  max-height: 480px

.p-frame-search-panel::-webkit-scrollbar
  width: 6px
  height: 6px

.p-frame-search-panel::-webkit-scrollbar-thumb
  background-color: $blue-400
  border-radius: 3px

.p-frame-search-panel::-webkit-scrollbar-thumb:hover
  background-color: $blue-500

.p-frame-search-panel::-webkit-scrollbar-track
  background-color: $blue-800

.p-frame-search-panel-item
  position: relative
  padding-top: 16px
  padding-bottom: 16px
  width: 100%
  height: 72px
  transition: all .3s
  cursor: pointer

.p-frame-search-panel-item + .p-frame-search-panel-item
  border-top: 1px solid $blue-700

.p-frame-search-panel-item::before
  position: absolute
  left: -16px
  top: 0
  z-index: -1
  width: calc(100% + 32px)
  height: 100%
  content: ''
  display: block
  background-color: $blue-600
  opacity: 0
  transition: opacity .3s

.p-frame-search-panel-item:hover
  color: $white

.p-frame-search-panel-item:hover::before
  opacity: 1

.p-frame-search-panel-item .p-frame-search-text-t
  line-height: 20px
  font-size: 14px

.p-frame-search-panel-item .p-frame-search-f-t
  color: $white

.p-frame-search-panel-item .p-frame-search-s-t
  color: rgba(255,255,255,0.8)

.p-frame-content
  display: flex
  align-items: flex-start
  width: 100%
  height: calc(100% - 48px)

.p-first-menu
  padding-left: 16px
  padding-right: 16px
  border-right: 1px solid $blue-800
  width: 212px
  height: 100%
  overflow-x: hidden
  overflow-y: auto

.p-first-menu-list
  position: relative
  display: flex
  align-items: center
  border-bottom: 1px solid $blue-800
  width: 100%
  height: 55px
  cursor: pointer
  transition: background-color .3s

.p-first-menu-list::before
  position: absolute
  left: -16px
  top: 0
  z-index: -1
  content: ''
  display: block
  background-color: $blue-500
  width: calc(100% + 32px)
  height: 100%
  opacity: 0
  transition: opacity .3s

.p-first-menu-list:hover::before
  opacity: 1

.p-first-menu-list .p-first-menu-icon
  width: 16px
  height: 16px
  overflow: hidden

.p-first-menu-list .p-first-menu-icon img
  width: 100%
  height: 100%

.p-first-menu-list .p-first-menu-name
  padding-left: 12px
  padding-right: 32px
  width: calc(100% - 16px)
  font-size: 16px
  color: $white

.p-first-menu-list .p-first-menu-arrow
  position: absolute
  right: 8px
  top: 20px
  width: 16px
  height: 16px
  font-size: 0

.p-first-menu-list .p-first-menu-arrow path
  fill: $white
  opacity: .5

.p-first-menu-list-active::before
  opacity: 1

.p-second-menu
  padding-left: 36px
  padding-right: 36px
  max-width: 1018px
  min-width: 428px
  height: 100%
  overflow-x: auto
  overflow-y: scroll

.p-second-menu::-webkit-scrollbar-track
  background-color: $blue-900

.p-second-menu::-webkit-scrollbar
  width: 6px
  height: 6px

.p-second-menu::-webkit-scrollbar-thumb
  background-color: $blue-400
  border-radius: 3px

.p-second-menu::-webkit-scrollbar-thumb:hover
  background-color: $blue-500

.p-second-menu-content
  display: flex
  align-items: flex-start
  width: 428px

.p-second-menu-lists
  width: 208px

.p-second-menu-box
  display: inline-block
  vertical-align: top
  padding-right: 36px
  padding-top: 16px
  width: 100%

.p-second-menu-title
  padding-top: 8px
  border-bottom: 1px solid $blue-800
  width: 100%
  height: 38px

.p-second-menu-title .p-second-menu-text
  padding-left: 8px
  color: $white
  font-size: 16px
  line-height: 20px

.p-second-menu-list
  padding-top: 16px
  padding-bottom: 16px
  width: 100%

.p-second-menu-list .p-second-menu-item
  padding-left: 8px
  padding-right: 8px
  width: 100%
  line-height: 32px
  color: rgba(255,255,255,0.8)
  font-size: 14px
  cursor: pointer
  transition: all .3s

.p-second-menu-list .p-second-menu-item:hover
  color: $white
  background-color: rgba(255,255,255,0.1)

.menuSlideLeftRight-enter-active
  animation: menuSlideInLeft .2s ease-out

.menuSlideLeftRight-leave-active
  animation: menuSlideOutLeft .2s ease-in

@keyframes menuSlideInLeft
  from
    opacity: .5
    transform: translate3d(-100%,0,0)
    visibility: visible
  to
    opacity: 1
    transform: translate3d(0,0,0)
@keyframes menuSlideInLeft
  from
    opacity: .5
    transform: translate3d(-100%,0,0)
    visibility: visible
  to
    opacity: 1
    transform: translate3d(0,0,0)
@keyframes menuSlideInLeft
  from
    opacity: .5
    transform: translate3d(-100%,0,0)
    visibility: visible
  to
    opacity: 1
    transform: translate3d(0,0,0)
@keyframes menuSlideInLeft
  from
    opacity: .5
    transform: translate3d(-100%,0,0)
    visibility: visible
  to
    opacity: 1
    transform: translate3d(0,0,0)
@keyframes menuSlideOutLeft
  from
    opacity: 1
    transform: translate3d(0,0,0)
  to
    opacity: .5
    visibility: hidden
    transform: translate3d(-100%,0,0)
@keyframes menuSlideOutLeft
  from
    opacity: 1
    transform: translate3d(0,0,0)
  to
    opacity: .5
    visibility: hidden
    transform: translate3d(-100%,0,0)
@keyframes menuSlideOutLeft
  from
    opacity: 1
    transform: translate3d(0,0,0)
  to
    opacity: .5
    visibility: hidden
    transform: translate3d(-100%,0,0)
@keyframes menuSlideOutLeft
  from
    opacity: 1
    transform: translate3d(0,0,0)
  to
    opacity: .5
    visibility: hidden
    transform: translate3d(-100%,0,0)