ten-design-vue
Version:
ten-vue
270 lines (234 loc) • 5.34 kB
text/less
/* 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;
}
}