ui优化

src/view/NFT/Create/upload.vue

@@ -30,7 +30,7 @@
           :src="showUploadFile"
           alt=""
           class="mx-auto"
-          @click="showFullImg"
+          @click.stop="showFullImg"
         />
       </div>
 
@@ -75,6 +75,15 @@
       ></app-btn>
     </div>
 
+    <div class="fullImgBox" v-if="showFull" @click="showFull = !showFull">
+      <!-- <div class="fullImgCover"></div> -->
+      <img
+        :src="showUploadFile"
+        alt=""
+        class="mx-auto"
+      />
+    </div>
+
   </Layout-Child>
 </template>
 
@@ -105,6 +114,7 @@ export default Vue.extend({
       coverstatus: uploadStatus.NULL,
       // accept:
       show: false,
+      showFull: false,
       actions: [
         { name: '本地相册'},
         { name: '拍照'},    
@@ -231,7 +241,7 @@ export default Vue.extend({
       }
     },
     showFullImg(){
-      console.log('图片预览')
+      this.showFull = !this.showFull
     },
     clearUpload(){
       if(this.uploadType == '封面图片'){
@@ -290,4 +300,27 @@ export default Vue.extend({
 .hiddenBorder {
   border: none;
 }
+.fullImgBox {
+  position: fixed;
+  top:0;
+  left: 0;
+  height: calc(100vh);
+  width: calc(100vw);
+  background: black;
+  display: flex;
+  align-items: center;
+  z-index: 100;
+  // .fullImgCover {
+  //   display: fixed;
+  //   top:0;
+  //   right: 0;
+  //   left: 0;
+  //   right: 0;
+  // }
+  img {
+      max-height: 100%;
+      max-width: 100%;
+      display: block;
+  }
+}
 </style>
\ No newline at end of file