add:加载载具图片页面

This commit is contained in:
zhangzq
2025-09-19 10:13:12 +08:00
parent 6c10720ea8
commit dd2263626b
2 changed files with 68 additions and 0 deletions

View File

@@ -0,0 +1,66 @@
<template>
<div class="image-modal" v-if="visible" @click.self="close">
<div class="demo-image">
<el-image
style="width: 500px; height: 500px"
:src="imageUrl"
></el-image>
</div>
</div>
</template>
<script>
export default {
name: 'ImageModal',
props: {
visible: Boolean,
imageUrl: String
},
methods: {
close() {
this.$emit('update:visible', false);
}
}
};
</script>
<style scoped>
.image-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal-content {
position: relative;
max-width: 90%;
max-height: 90%;
}
.modal-content img {
max-width: 100%;
max-height: 90vh;
object-fit: contain;
}
.close {
position: absolute;
top: -40px;
right: 0;
color: white;
font-size: 35px;
font-weight: bold;
cursor: pointer;
}
.close:hover {
color: #ccc;
}
</style>