展览详情页：第一张图片展满宽度

src/views/ExhibitionDetail.vue

@@ -155,19 +155,27 @@
 
     <div
       v-show="curTabIdx === 2"
+      ref="image-wrap"
       class="image-wrap"
     >
+      <img
+        v-if="choosenExhibition.imageNumber > 0"
+        class="first-image"
+        :src="imageList[0]"
+        alt=""
+      >
       <waterfall
-        v-if="choosenExhibition.imageNumber !== 0"
+        v-if="choosenExhibition.imageNumber > 1"
         :col="2"
         :width="waterfallImgWidth"
         :gutter-width="gutterWidth"
+        :data="[]"
       >
         <template>
           <div
-            v-for="(item, index) in imageList"
+            v-for="(item, index) in imageList.slice(1, imageList.length)"
             :key="index"
-            class="cell-item"
+            class="waterfall-item"
             :style="{marginBottom: gutterWidth - 3 + 'px'}"
           >
             <img
@@ -212,7 +220,6 @@ export default {
       imageSrc: null,
       linkSrc: null,
       curTabIdx: 0,
-
     }
   },
   computed: {
@@ -289,6 +296,8 @@ export default {
 </script>
 
 <style lang="less" scoped>
+::-webkit-scrollbar { width: 0; height: 0; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+
 .exhibition-list-page {
   height: 100%;
   box-sizing: border-box;
@@ -479,7 +488,12 @@ export default {
   > .image-wrap {
     flex: 1 1 auto;
     overflow: auto;
-    .cell-item {
+    .first-image {
+      width: 100%;
+      border-radius: 0.47rem;
+      margin-bottom: 0.7rem;
+    }
+    .waterfall-item {
       > img {
         width: 100%;
         border-radius: 0.47rem;