UNPKG

ten-design-vue

Version:

ten-vue

270 lines (234 loc) 5.34 kB
/* dependencies icon */ @import "../vars.less"; @header-height: 40px; @footer-height: 48px; .ten-image-viewer { position: fixed; top: 0; right: 0; bottom: 0; left: 0; &__mask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .37) } &__header { position: absolute; z-index: 1; top: 0; width: 100%; height: @header-height; text-align: center; background: rgba(0, 0, 0, .37); &-indexes { font-size: 16px; line-height: 40px; color: #fff; } &-close { display: inline-block; position: absolute; top: 8px; right: 24px; color: #fff; font-size: 0; cursor: pointer; .ten-icon { font-size: 18px; } } } &__btn { position: absolute; z-index: 1; top: 50%; margin-top: -20px; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(0, 0, 0, .24); font-size: 24px; color: #C0C0C0; cursor: pointer; &.ten-image-viewer__btn-prev { left: 24px; } &.ten-image-viewer__btn-next { right: 24px; } &:hover { color: #FFFFFF; } &--disabled { background: rgba(0, 0, 0, .14); cursor: default; &:hover { color: #C0C0C0; } } } &__image { position: absolute; top: 0; bottom: 0; // top: @header-height; // bottom: @footer-height; left: 0; right: 0; transition: bottom 0.3s; overflow: hidden; display: flex; justify-content: center; align-items: center; img { cursor: grab; } } &__footer { position: absolute; z-index: 2; bottom: 0; width: 100%; height: 48px; background: rgba(0, 0, 0, .37); transition: height 0.3s; &-actions { width: 100%; height: 48px; display: flex; justify-content: center; align-items: center; .ten-image-viewer__action { position: relative; color: #FFFFFF; opacity: .6; font-size: 14px; line-height: 28px; margin-right: 20px; cursor: pointer; &:hover { opacity: 1; } &:last-child { margin-right: 0; } &--divided { padding-left: 24px; &:after { content: ''; position: absolute; left: 0; top: 8px; width: 1px; height: 12px; background-color: #D8D8D8; } } .ten-icon { vertical-align: middle; font-size: 20px; } a { text-decoration: none; color: inherit; } } } &-thumbs { // width: 720px; margin: 0 auto; height: 44px; overflow: hidden; ul { height: 32px; display: flex; justify-content: center; align-items: center; transition: all 0.3s; } &-item { // width: 58px; // margin-right: 8px; flex-shrink:0; height: 32px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.05); // TODO: opacity 值待与设计确认 opacity: .5; cursor: pointer; transition: all 0.2s; &:last-child { margin-right: 0; } &--active { border: 1px solid #0052D9; opacity: .8; } img { width: 100%; height: 100%; object-fit: cover; } } } } } .ten-image-viewer__slide-up-enter-active { animation: ten-image-viewer__slide-up-in .3s; } .ten-image-viewer__slide-up-leave-active { animation: ten-image-viewer__slide-up-out .3s; } @keyframes ten-image-viewer__slide-up-in { 0% { transform: translate3d(0, 20px, 0); opacity: 0; } 100% { transform: translate3d(0, 0px, 0); opacity: 1; } } @keyframes ten-image-viewer__slide-up-out { 0% { transform: translate3d(0, 0, 0); opacity: 1; } 100% { transform: translate3d(0, 20px, 0); opacity: 0; } } .ten-image-viewer__slide-down-enter-active { animation: ten-image-viewer__slide-down-in .3s; } .ten-image-viewer__slide-down-leave-active { animation: ten-image-viewer__slide-down-out .3s; } @keyframes ten-image-viewer__slide-down-in { 0% { transform: translate3d(0, -20px, 0); opacity: 0; } 100% { transform: translate3d(0, 0px, 0); opacity: 1; } } @keyframes ten-image-viewer__slide-down-out { 0% { transform: translate3d(0, 0, 0); opacity: 1; } 100% { transform: translate3d(0, -20px, 0); opacity: 0; } }