
  op-height = 40px
  textarea:disabled
    background-color #ffffff

  /* 路由内容 */
  .v-note-wrapper
    position relative
    min-width 300px
    min-height 300px
    display flex
    flex-direction column
    transition all 0.3s linear 0s
    background #fff
    z-index 1500
    &.fullscreen
      position fixed
      left 0
      right 0
      bottom 0
      top 0
      height auto
      z-index 1501
    .v-note-op
      width 100%
      display flex
      white-space pre-line
      flex none
      min-height op-height
      box-shadow: 0 0px 4px rgba(0, 0, 0, .156863), 0 0px 4px rgba(0, 0, 0, .227451)
      background #fff
      z-index 1
      .left, .right
        flex 1
        min-height op-height
        box-sizing border-box
        .op-icon-divider
          height op-height
          border-left 1px solid #e5e5e5
          margin 0 6px 0 4px
        .op-icon
          display inline-block
          cursor pointer
          height 28px
          width 28px
          margin 6px 0 5px 0px
          font-size 15px
          padding 4.5px 6px 5px 3.5px
          color #757575
          border-radius 5px
          text-align center
          background none
          border none
          outline none
          line-height 1
          &.selected
            color rgba(0, 0, 0, 0.8)
            background #eaeaea
          &:hover
            color rgba(0, 0, 0, 0.8)
            background #e5e5e5
      .right
        text-align right
        padding-right 6px
        max-width 30%
      .left
        text-align left
        padding-left 6px
    .v-note-panel
      position relative
      box-shadow: 0 0px 3px rgba(0, 0, 0, .156863), 0 0px 3px rgba(0, 0, 0, .227451)
      display flex
      flex 1
      width 100%
      box-sizing border-box
      overflow hidden
      .v-note-edit.divarea-wrapper
        flex 0 0 50%
        width 50%
        padding 0
        overflow-y scroll
        overflow-x hidden
        box-sizing border-box
        transition all 0.2s linear 0s
        scrollbar()
        &.single-edit
          width 100%
          flex 0 0 100%
          overflow-y auto
        &.single-show
          width 0
          flex 0 0 0
          display none
        .content-div
          width 100%
          padding 20px 25px
          box-sizing border-box
          outline 0 none
          border none !important
          color #2c3e50
          font-size 16px
        .content-input-wrapper
          width 100%
          padding 8px 25px 15px 25px
      .v-note-show
        flex 0 0 50%
        width 50%
        overflow-y auto
        padding 0 0
        transition all 0.2s linear 0s
        &.single-show
          flex 0 0 100%
          width 100%
        .v-show-content, .v-show-content-html
          width 100%
          height 100%
          padding 8px 25px 15px 25px
          overflow-y auto
          box-sizing border-box
          overflow-x hidden
          background #fbfbfb
          scrollbar()
      .v-note-navigation-wrapper
        position absolute
        width 250px
        right 0
        top 0px
        bottom 0
        display flex
        flex-direction column
        background rgba(255,255,255,0.98)
        box-shadow 0 0px 4px rgba(0, 0, 0, .156863), 0 0px 4px rgba(0, 0, 0, .227451)
        transition all 0.1s linear 0s
        @media only screen and (max-width 768px)
          width 50%
        &.slideTop-enter-active, &.slideTop-leave-active
          bottom 0
        &.slideTop-enter, &.slideTop-leave-active
          bottom 100%
        .v-note-navigation-title
          height 50px
          width 100%
          border-bottom 1px solid #eeece8
          flex none
          line-height @height
          font-size 18px
          font-weight 500
          box-sizing border-box
          padding 0 12px
          box-shadow 0 0px 1px rgba(0, 0, 0, .156863), 0 0px 1px rgba(0, 0, 0, .227451)
          .v-note-navigation-close
            float right
            color #757575
            font-size 20px
            cursor pointer
            &:hover
              color #696969
        .v-note-navigation-content
          overflow-y auto
          flex 1
          scrollbar()
          padding 8px 0
          h1, h2, h3, h4, h5, h6
            margin 2px 0
            font-weight 500
            font-size 17px
            color #2185d0
            cursor pointer
            line-height normal
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
            padding 0 12px
            border-bottom none
            &:hover
              color #483D8B
              text-decoration-line underline
          h2
            padding-left  27px
            font-size 17px
          h3
            padding-left  42px
            font-size 17px
          h4
            padding-left  58px
            font-size 15px
          h5
            padding-left  72px
            font-size 15px
          h6
            padding-left  87px
            font-size 15px
    .v-note-read-model
      position relative
      display none
      width 100%
      height 100%
      background #fbfbfb
      padding 30px 8% 50px 8%
      overflow-y auto
      scrollbar()
      box-sizing border-box
      &.show
        display block

.v-note-help-wrapper
  position fixed
  left 0
  right 0
  top 0
  bottom 0
  background rgba(0, 0, 0, 0.7)
  z-index 1600
  transition all 0.1s linear 0s
  &.fade-enter-active, &.fade-leave-active
    opacity 1
  &.fade-enter, &.fade-leave-active
    opacity 0
  .v-note-help-content
    position relative
    width 60%
    max-width 800px
    margin 30px auto
    height 90%
    min-width 320px
    transition all 0.1s linear 0s
    z-index 3
    box-shadow: 0 0px 5px rgba(0, 0, 0, .156863), 0 0px 5px rgba(0, 0, 0, .227451)
    i
      font-size 28px
      position absolute
      right 15px
      top 8px
      color rgba(0, 0, 0, 0.7)
      cursor pointer
      &:hover
        color rgba(0, 0, 0, 1)
    .v-note-help-show
      width 100%
      height 100%
      font-size 18px
      background #fbfbfb
      overflow-y auto
      padding 2% 6%
      scrollbar()
