zx-image-view/src/style/image-preview.styl

Image view plugin

.zx-image-preview-wrapper
  i
    font-style normal !important;

.zx-image-preview-wrapper
  position fixed
  z-index 9999
  top 0
  left 0
  width 100%
  height 100%
  background-color rgba(0, 0, 0, .6)
  // text-align center
  &.on-error
    &:after
      content: '! 图片加载失败'
      position absolute
      z-index 1
      top: 50%;
      left: 50%;
      margin: -100px 0 0 -100px;
      width: 200px;
      height: 200px;
      border: 1px solid #f1f1f1;
      background-color: #eee;
      color: #666;
      text-align: center;
      line-height: 200px;
    img
      display: none;
  ._cur
    cursor pointer
  .zip-close
    position absolute
    z-index 2
    top 0
    right 0
    width 50px
    height 50px
    transform rotate(45deg)
    transition all .3s
    opacity .6
    &:before, &:after
      position absolute
      border-radius 1px
      background-color #fff
      content ''
    &:before
      top 24px
      left 10px
      width 30px
      height 2px
    &:after
      top 10px
      left 24px
      height 30px
      width 2px
    &:hover
      opacity .8
      transform rotate(215deg)
  // 左右切换
  .zip-arrow
    position absolute
    z-index: 3
    top: 50%
    margin-top: -51px;
    width 101px
    height: 101px
    opacity .6
    filter: unquote('Alpha(opacity=60)')
    cursor pointer
    background-color: rgba(0, 0, 0, .1);
    border-radius 50%
    &:after
      content ''
      position absolute
      top 35px
      width 20px
      height: 37px
      background-image: url('../img/icons.png')
      background-repeat: no-repeat
      transition all .3s
    &._prev-arrow
      left: -50px;
      &:after
        right 22px
        background-position: 0 0
    &._next-arrow
      right: -50px;
      &:after
        left: 22px;
        background-position: -20px 0
    &:hover
      opacity .9
      filter: unquote('Alpha(opacity=90)')
      background-color: rgba(0, 0, 0, .2);
      &._prev-arrow:after
        right 25px
      &._next-arrow:after
        left: 25px;
  .zip-tool-wrapper
    position absolute
    z-index 2
    left 50%
    bottom 30px
    transform translateX(-50%)
    white-space nowrap
    ._item
      position: relative;
      display: inline-block;
      margin: 0 2px;
      width: 40px;
      text-align: center;
      .zx
        display: inline-block;
        width 40px
        height: 40px;
        line-height: 40px;
        border-radius: 50%
        font-size: 18px;
        box-sizing: border-box;
        border: 1px solid rgba(255, 255, 255, .5);
        background-color: rgba(255, 255, 255, .3);
        overflow: hidden;
        cursor: pointer;
        &:hover
          background-color: rgba(255, 255, 255, .5);
  .zip-pagination-wrapper
    position: absolute;
    z-index: 2;
    left 50%
    bottom 20px
    transform translateX(-50%)
    height 2px
    width 60%
    text-align: center
    ._item
      display: inline-block;
      max-width 30px
      height 2px
      opacity .5
      border-left: 1px solid transparent
      border-right: 1px solid transparent
      box-sizing border-box
      vertical-align top
      &:after
        display: block
        content: ''
        width 100%
        height 2px
        background-color: #fff
      &._item-active
        opacity .9
  .zip-picture
    position absolute
    margin 0
    padding 0
    cursor move
    &.v-transition
      transition all .3s ease

@media screen and (max-width: 375px)
  .zx-image-preview-wrapper
    .zip-tool-wrapper
      bottom 20px
    .zip-pagination-wrapper
      bottom 10px