使用一下这个效果，谢谢分享
.el-image-viewer__wrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2147483649 !important;
}
.el-image-viewer__btn {
position: absolute;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
opacity: .8;
cursor: pointer;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.el-image-viewer__btn .el-icon {
font-size: inherit;
cursor: pointer
}
.el-image-viewer__close {
top: 60px;
right: 40px;
width: 40px;
height: 40px;
font-size: 40px
}
.el-image-viewer__canvas {
position: static;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.el-image-viewer__actions {
left: 50%;
bottom: 30px;
transform: translateX(-50%);
width: 282px;
height: 44px;
padding: 0 23px;
background-color: #333333;
border-color: #fff;
border-radius: 22px
}
.el-image-viewer__actions__inner {
width: 100%;
height: 100%;
text-align: justify;
cursor: default;
font-size: 23px;
color: #fff;
display: flex;
align-items: center;
justify-content: space-around
}
.el-image-viewer__actions__inner i:nth-child(3),
.el-image-viewer__actions__inner i:nth-child(4),
.el-image-viewer__actions__inner i:nth-child(5) {
display: none;
}
.el-image-viewer__prev {
top: 50%;
transform: translateY(-50%);
left: 40px;
width: 44px;
height: 44px;
font-size: 24px;
color: #fff;
background-color: #333333;
border-color: #fff
}
.el-image-viewer__next {
top: 50%;
transform: translateY(-50%);
right: 40px;
text-indent: 2px;
width: 44px;
height: 44px;
font-size: 24px;
color: #fff;
background-color: #333333;
border-color: #fff
}
.el-image-viewer__close {
width: 44px;
height: 44px;
font-size: 24px;
color: #fff;
background-color: #333333;
border-color: #fff
}
.el-image-viewer__mask {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: .5;
background: #000
}
.viewer-fade-enter-active {
-webkit-animation: viewer-fade-in var(--el-transition-duration);
animation: viewer-fade-in var(--el-transition-duration)
}
.viewer-fade-leave-active {
-webkit-animation: viewer-fade-out var(--el-transition-duration);
animation: viewer-fade-out var(--el-transition-duration)
}
@-webkit-keyframes viewer-fade-in {
0% {
transform: translate3d(0, -20px, 0);
opacity: 0
}
100% {
transform: translate3d(0, 0, 0);
opacity: 1
}
}
@keyframes viewer-fade-in {
0% {
transform: translate3d(0, -20px, 0);
opacity: 0
}
100% {
transform: translate3d(0, 0, 0);
opacity: 1
}
}
@-webkit-keyframes viewer-fade-out {
0% {
transform: translate3d(0, 0, 0);
opacity: 1
}
100% {
transform: translate3d(0, -20px, 0);
opacity: 0
}
}
@keyframes viewer-fade-out {
0% {
transform: translate3d(0, 0, 0);
opacity: 1
}
100% {
transform: translate3d(0, -20px, 0);
opacity: 0
}
}
.el-icon-loading {
-webkit-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite
}
.el-icon--right {
margin-left: 5px
}
.el-icon--left {
margin-right: 5px
}
@-webkit-keyframes rotating {
0% {
transform: rotateZ(0)
}
100% {
transform: rotateZ(360deg)
}
}
@keyframes rotating {
0% {
transform: rotateZ(0)
}
100% {
transform: rotateZ(360deg)
}
}
.el-icon {
--color: inherit;
height: 1em;
width: 1em;
line-height: 1em;
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
fill: currentColor;
color: var(--color);
font-size: inherit
}
.el-icon.is-loading {
-webkit-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite
}
.el-icon svg {
height: 1em;
width: 1em
}
