index page fix

08.src/Xingxi-mp/pages/index/index.wxml

@@ -47,21 +47,22 @@
     </view>
   </view>
   <view class="goods">
-    <view wx:for="{{goodsList}}" wx:key="index" class="goods-item">
-      <view class="goods-image">
-        <!-- <image src="{{item.imageUrl}}" class="goods-image"></image> -->
-      </view>
-      <view class="goods-info">
-        <text class="goods-name">{{item.name}}</text>
-        <text class="goods-price">{{item.price}}</text>
-      </view>
-      <view class="goods-action">
-        <view class="favorite">
-          <!-- <image src="{{item.favoriteIcon}}" class="favorite-icon"></image> -->
-          fav
+    <view class="goods-row" wx:for="{{goodsList}}" wx:key="index" wx:for-item="row">
+      <view class="goods-item" wx:for="{{row}}" wx:key="itemIndex">
+        <view class="goods-image">
+          <image src="{{item.imageUrl}}" class="goods-image-inner"></image>
+        </view>
+        <view class="goods-info">
+          <text class="goods-name">{{item.name}}</text>
+          <text class="goods-price">￥{{item.price}}</text>
+        </view>
+        <view class="goods-action">
+          <view class="favorite">
+            <image src="/images/index/fav.png" class="favorite-icon"></image>
+          </view>
+          <button class="add-to-cart">加入购物车</button>
+          <button class="buy-now">立即购买</button>
         </view>
-        <button class="add-to-cart">Add to Cart</button>
-        <button class="buy-now">Buy Now</button>
       </view>
     </view>
   </view>

08.src/Xingxi-mp/pages/index/index.wxss

@@ -127,6 +127,95 @@ page {
   height: 100%;
 }
 .goods {
-  min-height: 800rpx;
-  
+  display: flex;
+  flex-direction: column;
+  padding: 21rpx 21rpx 0 21rpx;
+}
+
+.goods-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  margin-bottom: 21rpx;
+}
+
+.goods-item {
+  width: 326rpx; /* 313*1.0417 */
+  background: #fff;
+  border-radius: 21rpx; /* 20*1.0417 */
+  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.goods-image {
+  width: 326rpx;
+  height: 326rpx;
+  margin: 0;
+  border-top-left-radius: 21rpx;
+  border-top-right-radius: 21rpx;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  overflow: hidden;
+  background: #f7f7f7;
+}
+.goods-image-inner {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.goods-info {
+  padding: 16rpx 21rpx 0 21rpx;
+}
+.goods-name {
+  font-size: 18rpx;
+  color: #333;
+  display: block;
+  margin-bottom: 8rpx;
+  font-weight: bold;
+}
+.goods-price {
+  font-size: 20rpx;
+  color: #e4393c;
+  font-weight: bold;
+}
+.goods-action {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 16rpx 21rpx 21rpx 21rpx;
+}
+.favorite {
+  width: 32rpx;
+  height: 32rpx;
+}
+.favorite-icon {
+  width: 100%;
+  height: 100%;
+}
+.add-to-cart,
+.buy-now {
+  width: 105rpx;
+  height: 36rpx;
+  line-height: 36rpx;
+  font-size: 16rpx;
+  border-radius: 6rpx;
+  margin-left: 8rpx;
+  padding: 0;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+.add-to-cart {
+  background: #fff;
+  color: #7AC7B5;
+  border: 2rpx solid #7AC7B5;
+}
+.buy-now {
+  background: #7AC7B5;
+  color: #fff;
+  border: none;
 }