From bb2b60d40c5c69681cd1c5971d6bdf26a931969f Mon Sep 17 00:00:00 2001
From: "jqtmviyu@gmail.com" <jqtmviyu@gmail.com>
Date: Sun, 21 Feb 2021 23:24:52 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E6=A5=BC=E5=B1=82=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue               |  2 ++
 src/pages/index/index.vue | 40 ++++++++++++++++++++++++++++++++++++---
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e327764..4043e42 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -29,5 +29,7 @@
     image{
       /* 宽度等于父盒子的宽度, 才不会主动撑开 */
       Width:100%;
+      /* 移除图片标签默认的3px 间隙 */
+	    vertical-align: middle;
     }
 </style>
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 52a75a7..f96412c 100644
--- a/src/pages/index/index.vue
+++ b/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>