工单

src/components/imgPrev.vue

@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <!-- 图片预览 -->
+    <div id="modal" class="modal">
+        <span class="close" @click="close">&times;</span>
+        <img class="modal-content" :src="url">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    props:['url'],
+    methods:{
+        close(){
+            this.$emit('close')
+        },
+    }
+}
+</script>
+
+<style>
+ .zoomable {
+     width: 100%;
+     max-width: 300px;
+     cursor: pointer;
+ }
+
+ /* 模态框 */
+ .modal {
+     /* display: none; */
+     display: flex; align-items: center;
+     position: fixed;
+     /* 确保层级在上 */
+     z-index: 1;
+     padding-top: 100px;
+     left: 0;
+     top: 0;
+     width: 100%;
+     height: 100%;
+     overflow: auto;
+     background-color: rgba(0, 0, 0, 0.2);
+ }
+
+ .modal-content {
+     margin: auto;
+     display: block; background: #fff;
+     /* width: 80%; */
+     max-width: 700px;
+     max-height: 80vh;
+ }
+
+ .modal-content {
+     -webkit-animation-name: zoom;
+     -webkit-animation-duration: 0.6s;
+     animation-name: zoom;
+     animation-duration: 0.6s;
+ }
+
+ @-webkit-keyframes zoom {
+     from {
+         -webkit-transform: scale(0)
+     }
+
+     to {
+         -webkit-transform: scale(1)
+     }
+ }
+
+ @keyframes zoom {
+     from {
+         transform: scale(0)
+     }
+
+     to {
+         transform: scale(1)
+     }
+ }
+
+ /* 关闭按钮 */
+ .close {
+     position: absolute;
+     top: 15%;
+     right: 35px;
+     color: #fff;
+     font-size: 40px;
+     font-weight: bold;
+     transition: 0.3s;
+ }
+
+ .close:hover,
+ .close:focus {
+     color: #14b3e4;
+     text-decoration: none;
+     cursor: pointer;
+ }
+
+</style>