12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 |
- <template>
- <transition name="msgbox-fade">
- <div class="preview-mask pub-scroll-box" v-if="visible">
- <i class="el-icon-close" @click="visible = false"></i>
- <img class="img" :src="imgUrl" alt="">
- </div>
- </transition>
- </template>
- <script>
- export default {
- name: 'imgPreview'
- }
- </script>
- <style lang="scss" scoped>
- .preview-mask{
- position: fixed;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- z-index: 999;
- background-color: rgba($color: #000000, $alpha: .8);
- text-align: center;
- overflow: auto;
- &::after{
- content: '';
- display: inline-block;
- height: 100%;
- vertical-align: middle;
- }
- }
- .img{
- max-width: 100%;
- max-height: 100%;
- vertical-align: middle;
- }
- .el-icon-close{
- position: absolute;
- right: 6px;
- top: 6px;
- font-size: 30px;
- cursor: pointer;
- z-index: 1000;
- color: #ffffff;
- }
- </style>
|