首页

Author: heyushuo

.gitignore

@@ -11,3 +11,4 @@ yarn-error.log*
 *.ntvs*
 *.njsproj
 *.sln
+package-lock.json

project.config.json

@@ -10,7 +10,7 @@
 	"miniprogramRoot": "./dist/",
 	"compileType": "miniprogram",
 	"appid": "wx601ce71bde7b9add",
-	"projectname": "newmpvue",
+	"projectname": "mpvue-shop",
 	"condition": {
 		"search": {
 			"current": -1,

src/App.vue

@@ -21,9 +21,13 @@ export default {
   padding: 200rpx 0;
   box-sizing: border-box;
 }
+page{
+  background: #f4f4f4;
+}
 view,
 text {
   font-size: 28rpx;
+  color: #333;
 }
 
 /* this rule will be remove */

src/main.js

@@ -55,8 +55,6 @@ export default {
           "text": "我的"
         }
       ]
-    },
-    // debug: true
-
+    }
   }
 }

src/main.json

@@ -1,13 +1,46 @@
 {
-  "pages": [
-    "pages/index/main",
-    "pages/counter/main",
-    "pages/logs/main"
-  ],
-  "window": {
-    "backgroundTextStyle": "light",
-    "navigationBarBackgroundColor": "#fff",
-    "navigationBarTitleText": "WeChat",
-    "navigationBarTextStyle": "black"
-  }
+  "pages": [ "pages/index/main","pages/logs/main"],
+    "window": {
+      "backgroundTextStyle": "light",
+      "navigationBarBackgroundColor": "#fff",
+      "navigationBarTitleText": "网易严选",
+      "navigationBarTextStyle": "black"
+    },
+    "tabBar": {
+      "backgroundColor": "#fafafa",
+      "borderStyle": "white",
+      "selectedColor": "#b4282d",
+      "color": "#666",
+      "list": [{
+          "pagePath": "pages/index/main",
+          "iconPath": "static/images/ic_menu_choice_nor.png",
+          "selectedIconPath": "static/images/ic_menu_choice_pressed.png",
+          "text": "首页"
+        },
+        {
+          "pagePath": "pages/index/main",
+          "iconPath": "static/images/ic_menu_topic_nor.png",
+          "selectedIconPath": "static/images/ic_menu_topic_pressed.png",
+          "text": "专题"
+        },
+        {
+          "pagePath": "pages/index/main",
+          "iconPath": "static/images/ic_menu_sort_nor.png",
+          "selectedIconPath": "static/images/ic_menu_sort_pressed.png",
+          "text": "分类"
+        },
+        {
+          "pagePath": "pages/index/main",
+          "iconPath": "static/images/ic_menu_shoping_nor.png",
+          "selectedIconPath": "static/images/ic_menu_shoping_pressed.png",
+          "text": "购物车"
+        },
+        {
+          "pagePath": "pages/index/main",
+          "iconPath": "static/images/ic_menu_me_nor.png",
+          "selectedIconPath": "static/images/ic_menu_me_pressed.png",
+          "text": "我的"
+        }
+      ]
+    }
 }

src/pages/index/index.vue

@@ -15,6 +15,23 @@
         <p>{{item.name}}</p>
       </div>
     </div>
+    <div class="brand">
+      <div class="head">
+        品牌制造商直供
+      </div>
+      <div class="content">
+        <div v-for="(item, index) in brandList" :key="index">
+          <div>
+            <p>{{item.name}}</p>
+            <p>{{item.floor_price}}元起</p>
+          </div>
+          <img :src="item.new_pic_url" alt="">
+        </div>
+      </div>
+    </div>
+    <div class="newgoods">
+
+    </div>
   </div>
 </template>
 
@@ -24,7 +41,8 @@ export default {
   data() {
     return {
       banner: [],
-      channel: []
+      channel: [],
+      brandList: []
     };
   },
   components: {},
@@ -33,6 +51,7 @@ export default {
       var data = await get("/index/index");
       this.banner = data.banner;
       this.channel = data.channel;
+      this.brandList = data.brandList;
     }
   },
   created() {
@@ -44,4 +63,4 @@ export default {
 
 <style lang='scss' scoped>
 @import "./style.scss";
-</style>
+</style>

src/pages/index/style.scss

@@ -18,6 +18,8 @@
   }
   .channel {
     display: flex;
+    padding: 20rpx 0;
+    background: #ffffff;
     div {
       width: 25%;
       text-align: center;
@@ -28,4 +30,40 @@
       }
     }
   }
+  .brand {
+    width: 100%;
+    margin-top: 20rpx;
+    background: #ffffff;
+    .head{
+      text-align: center;
+      padding: 40rpx 0;
+
+    }
+    .content {
+      width: 97%;
+      margin: 0 auto;
+      // margin: 10rpx;
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      div {
+        width: 49%;
+        height: 235rpx;
+        position: relative;
+        div {
+          position: absolute;
+          top: 0;
+          left: 0;
+          padding: 10rpx;
+          p:nth-child(2) {
+            font-size: 24rpx;
+          }
+        }
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
 }