首页楼层样式

src/App.vue

@@ -29,5 +29,7 @@
     image{
       /* 宽度等于父盒子的宽度, 才不会主动撑开 */
       Width:100%;
+      /* 移除图片标签默认的3px 间隙 */
+	    vertical-align: middle;
     }
 </style>

src/pages/index/index.vue

@@ -25,16 +25,15 @@
       <view class="floor_group" v-for="(item, index) in floordata" :key="index">
         <!-- 标题 -->
         <view class="floor_group_title">
-          <image :src="item.floor_title.image_src"></image>
+          <image :src="item.floor_title.image_src" mode="widthFix"></image>
         </view>
         <!-- 内容 -->
         <view class="floor_group_list">
           <navigator class="floor_item" v-for="item2 in item.product_list" :key="item2.name">
-            <image :src="item2.image_src"></image>
+            <image :src="item2.image_src" mode="scaleToFill"></image>
           </navigator>
         </view>
       </view>
-
     </view>
 
 	</view>
@@ -111,4 +110,39 @@
     }
   }
 
+/* 楼层 */
+.floor {
+  .floor_group_list {
+    /* 清除浮动 */
+    overflow: hidden;
+    .floor_item {
+      float: left;
+      image {
+        width: 250rpx; 
+        /* 
+          232px x 386 px
+          232/386 = 250 / ?
+        */
+        height: 207.9741379310345rpx;
+      }
+    }
+    .floor_item:nth-child(1) {
+      image {
+        height: 415.948275862069rpx;
+      }
+    }
+          /* 后四张图片加左边框 */
+    .floor_item:nth-last-child(-n + 4) {
+      image {
+        border-left: 4rpx solid #fff;
+      }
+    }
+    /* 后两张图片加上边框 */
+    .floor_item:nth-last-child(-n + 2) {
+      image {
+        border-top: 4rpx solid #fff;
+      }
+    }
+  }
+}
 </style>