29884

src/saas/AppCountryAlbum/Photo.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="photo">
-    <image mode="aspectFit" :src="img" @click="preview(img)" />
+    <div class="photo-wrapper">
+      <image mode="widthFix" :src="img" />
+    </div>
     <div class="photo-footer">
       <div class="item" @click="back">
         <image src="./images/fanhui.png" />
@@ -104,8 +106,24 @@
     position: relative;
     width: 100%;
     height: 100vh;
-    overflow: auto;
     background: #000;
+    overflow-y: auto;
+
+    * {
+      box-sizing: border-box;
+    }
+
+    .photo-wrapper {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      min-height: 100vh;
+      padding-bottom: 216px;
+
+      & > image {
+        width: 100%;
+      }
+    }
 
     .photo-footer {
       display: flex;
@@ -137,10 +155,5 @@
         }
       }
     }
-
-    & > image {
-      width: 100%;
-      min-height: calc(100% - 216px);
-    }
   }
 </style>