static home done

fore-end/components/avatar/avatar.js

@@ -0,0 +1,24 @@
+// components/avatar/avatar.js
+Component({
+
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+
+    }
+})

fore-end/components/avatar/avatar.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

fore-end/components/avatar/avatar.wxml

@@ -0,0 +1,7 @@
+<!--components/avatar/avatar.wxml-->
+<view class="seller">
+    <view class="avatar_pic">
+        <image src="/assets/home_img/head_portrait.jpg" mode=""/>
+    </view>
+    <view class="seller_name">deter</view>
+</view>

fore-end/components/avatar/avatar.wxss

@@ -0,0 +1,20 @@
+/* components/avatar/avatar.wxss */
+.seller {
+    position: absolute;
+    top: 980rpx;
+    left: 36rpx;
+}
+
+.seller view {
+    float: left;
+}
+
+.avatar_pic image{
+    width: 45rpx !important;
+    height: 45rpx !important;
+}
+
+.seller_name {
+    margin-left: 10rpx;
+    font-weight: 300;
+}

fore-end/components/commodity_card/commodity_card.js

@@ -0,0 +1,24 @@
+// components/commodity_card/commodity_card.js
+Component({
+
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+
+    }
+})

fore-end/components/commodity_card/commodity_card.json

@@ -0,0 +1,6 @@
+{
+    "component": true,
+    "usingComponents": {
+        "avatar": "/components/avatar/avatar"
+    }
+}

fore-end/components/commodity_card/commodity_card.wxml

@@ -0,0 +1,15 @@
+<!--components/commodity_card/commodity_card.wxml-->
+<view class="commodity">
+    <view class="commodity_show">
+        <image src="/assets/recommend_img/recom_1.jpg" alt=""/>
+        <text class="commodity_name">产品名称</text>
+        <text class="price">￥49.9</text>
+        <avatar></avatar>
+    </view>
+    <view class="commodity_show">
+        <image src="/assets/recommend_img/recom_2.jpg" mode=""/>
+    </view>
+    <view class="commodity_show">
+        <image src="/assets/recommend_img/recom_3.jpg" mode=""/>
+    </view>
+</view>

fore-end/components/commodity_card/commodity_card.wxss

@@ -0,0 +1,35 @@
+/* components/commodity_card/commodity_card.wxss */
+.commodity {
+    display: flex;
+    flex-wrap: wrap; /*自动换行*/
+    margin-top: 10rpx;
+}
+
+.commodity_show {
+    display: flex;
+    width: 48%;
+    height: 500rpx;
+    padding: 7rpx;
+    justify-content: center;
+    /* background-color: skyblue; */
+}
+
+.commodity_show image {
+    width: 340rpx;
+    height: 340rpx;
+    border-radius: 20rpx;
+}
+
+.commodity_name {
+    position: absolute;
+    top: 885rpx;
+    left: 20px;
+}
+
+.price {
+    position: absolute;
+    top: 930rpx;
+    left: 32rpx;
+    color: #a08016;
+    font-weight: 600;
+}

fore-end/pages/home/home.js

@@ -62,7 +62,7 @@ Page({
      */
     onShareAppMessage() {
 
-    }
+    },
 })
 
 

fore-end/pages/home/home.json

@@ -1,5 +1,6 @@
 {
     "usingComponents": {
-        "categories_card": "/components/categories_card/categories_card"
+        "categories_card": "/components/categories_card/categories_card",
+        "commodity_card": "/components/commodity_card/commodity_card"
     }
 }

fore-end/pages/home/home.wxml

@@ -47,8 +47,4 @@
 </view>
 
 <!-- 商品卡片 -->
-<view class="commodity">
-    <view class="commodity_show"></view>
-    <view class="commodity_show"></view>
-    <view class="commodity_show"></view>
-</view>
+<commodity_card></commodity_card>

fore-end/pages/home/home.wxss

@@ -90,20 +90,4 @@ button[plain]{ border:0 }
     top: 32rpx
 }
 
-.commodity {
-    display: flex;
-    flex-wrap: wrap;
-    margin-top: 10rpx;
-    width: 100%;
-    height: 1400rpx;
-    background-color: pink;
-    justify-content: flex-start;
-}
-
-.commodity_show {
-    flex: 1;
-    width: 320rpx;
-    height: 400rpx;
-    background-color: skyblue;
-}
 /* ------------------------------ */