From de5da13063fb3e917870649a5970465948aba873 Mon Sep 17 00:00:00 2001
From: ewall <1054064180@qq.com>
Date: Wed, 27 Jun 2018 16:25:57 +0800
Subject: [PATCH] 'add'

---
 README.md                         |   2 +-
 src/components/classification.vue |  68 ++++++++++++++++
 src/components/myHeader.vue       |   1 +
 src/components/recommend.vue      |   0
 src/view/Home.vue                 | 124 ++++++++++++++++++++++++++++--
 5 files changed, 189 insertions(+), 6 deletions(-)
 create mode 100644 src/components/classification.vue
 create mode 100644 src/components/recommend.vue

diff --git a/README.md b/README.md
index 02054c5..be5afc0 100644
--- a/README.md
+++ b/README.md
@@ -1 +1 @@
-优化轮播图组件与vue深度处理器
\ No newline at end of file
+商品推荐等模块及flex布局
\ No newline at end of file
diff --git a/src/components/classification.vue b/src/components/classification.vue
new file mode 100644
index 0000000..f7e5b31
--- /dev/null
+++ b/src/components/classification.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="classification">
+    <!-- 首页分类运营模块 -->
+    <div class="class_top">
+      <div class="item">
+        <img src="https://a4.vimage1.com/upload/flow/2018/05/29/106/15275616596915.jpg" alt="">
+      </div>
+      <div class="item">
+        <img src="https://a2.vimage1.com/upload/flow/2018/05/22/138/15269786875124.jpg" alt="">
+      </div>
+      <div class="item">
+        <img src="https://a4.vimage1.com/upload/flow/2018/05/29/100/15275815231657.jpg" alt="">
+      </div>
+      <div class="item">
+        <img src="https://a4.vimage1.com/upload/flow/2018/05/22/190/15269788745661.jpg" alt="">
+      </div>
+      <div class="item">
+        <img src="https://a4.vimage1.com/upload/flow/2018/05/22/110/15269789816830.jpg" alt="">
+      </div>
+    </div>
+    <div class="class_bottom">
+      <div class="item">
+        <img src="https://a3.vimage1.com/upload/flow/2018/05/29/40/15275616172415.jpg" alt="">
+      </div>
+      <div class="item">
+        <img src="https://a2.vimage1.com/upload/flow/2018/05/29/139/15275815452999.jpg" alt="">
+      </div>
+      <div class="item">
+        <img src="https://a3.vimage1.com/upload/flow/2018/05/22/163/15269793276446.jpg" alt="">
+      </div>
+      <div class="item">
+        <img src="https://a4.vimage1.com/upload/flow/2018/05/22/172/15269794028123.jpg" alt="">
+      </div>
+      <div class="item">
+        <img src="https://a4.vimage1.com/upload/flow/2018/05/22/21/15269794589634.jpg" alt="">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "classification",
+  data() {
+    return {
+      msg: "Welcome to Your Vue.js App"
+    };
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.classification {
+  .class_top,
+  .class_bottom {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    .item {
+      img {
+        display: block;
+        width: 2rem;
+        height: 2.346667rem;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/myHeader.vue b/src/components/myHeader.vue
index 811b355..b154b96 100644
--- a/src/components/myHeader.vue
+++ b/src/components/myHeader.vue
@@ -29,6 +29,7 @@ export default {
   align-items: center;
   height: 1.066667rem;
   padding: 0 .133333rem;
+  background: #fff;
   .left {
     display: flex;
     flex-direction: row;
diff --git a/src/components/recommend.vue b/src/components/recommend.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/view/Home.vue b/src/view/Home.vue
index ef979f7..938bb43 100644
--- a/src/view/Home.vue
+++ b/src/view/Home.vue
@@ -1,18 +1,87 @@
 <template>
-	<div class="home">
-		<my-header></my-header>
+  <div class="home">
+    <my-header></my-header>
     <carousel></carousel>
-	</div>
+    <!-- 分类 -->
+    <div class="classification">
+      <div class="class_top">
+        <div class="item">
+          <img src="https://a4.vimage1.com/upload/flow/2018/05/29/106/15275616596915.jpg" alt="">
+        </div>
+        <div class="item">
+          <img src="https://a2.vimage1.com/upload/flow/2018/05/22/138/15269786875124.jpg" alt="">
+        </div>
+        <div class="item">
+          <img src="https://a4.vimage1.com/upload/flow/2018/05/29/100/15275815231657.jpg" alt="">
+        </div>
+        <div class="item">
+          <img src="https://a4.vimage1.com/upload/flow/2018/05/22/190/15269788745661.jpg" alt="">
+        </div>
+        <div class="item">
+          <img src="https://a4.vimage1.com/upload/flow/2018/05/22/110/15269789816830.jpg" alt="">
+        </div>
+      </div>
+      <div class="class_bottom">
+        <div class="item">
+          <img src="https://a3.vimage1.com/upload/flow/2018/05/29/40/15275616172415.jpg" alt="">
+        </div>
+        <div class="item">
+          <img src="https://a2.vimage1.com/upload/flow/2018/05/29/139/15275815452999.jpg" alt="">
+        </div>
+        <div class="item">
+          <img src="https://a3.vimage1.com/upload/flow/2018/05/22/163/15269793276446.jpg" alt="">
+        </div>
+        <div class="item">
+          <img src="https://a4.vimage1.com/upload/flow/2018/05/22/172/15269794028123.jpg" alt="">
+        </div>
+        <div class="item">
+          <img src="https://a4.vimage1.com/upload/flow/2018/05/22/21/15269794589634.jpg" alt="">
+        </div>
+      </div>
+    </div>
+    <!-- 推荐 -->
+    <div class="recommend">
+      <div class="title">今日推荐</div>
+      <div class="content">
+        <div class="item">
+          <img src="https://b.vimage1.com/upload/mst/2018/06/27/14/9b74b67ad8d6049035e8178f6c17ab70_604x290_80.jpg" alt="">
+          <div class="item_text">
+            <span>运动潮人录取线
+            </span>
+            <span>剩 2 天</span>
+          </div>
+        </div>
+        <div class="item">
+          <img src="https://b.vimage1.com/upload/mst/2018/06/26/189/f43d77bad367edf2cd9721601f90df1a_604x290_80.jpg" alt="">
+          <div class="item_text">
+            <span>国潮攻心计
+            </span>
+            <span>剩 1 天</span>
+          </div>
+        </div>
+        <div class="item">
+          <img src="https://a.vimage1.com/upcb/2018/06/05/132/ias_152816727785388_604x290_80.jpg" alt="">
+          <div class="item_text">
+            <span>欧美品牌女装与美泽美
+            </span>
+            <span>剩 2 天</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
 import MyHeader from "@/components/myHeader";
 import Carousel from "@/components/carousel";
+import Classification from "@/components/classification";
 
 export default {
   name: "home",
   components: {
     MyHeader,
-    Carousel
+    Carousel,
+    Classification
   },
   data() {
     return {};
@@ -25,6 +94,51 @@ export default {
 @import "~styles/variables.less";
 
 .home {
-//   background: @bgColor;
+  background: #f3f4f5;
+  // 分类
+  .classification {
+    .class_top,
+    .class_bottom {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
+      .item {
+        img {
+          display: block;
+          width: 2rem;
+          height: 2.346667rem;
+        }
+      }
+    }
+  }
+  // 推荐
+  .recommend {
+    .title {
+      text-align: center;
+      font-size: 0.373333rem;
+      padding: 0.266667rem;
+      background: #fff;
+      margin: 0.133333rem 0;
+    }
+    .content {
+      .item {
+        background: #fff;
+        margin-bottom: .133333rem;
+        img {
+          width: 100%;
+          height: 4.8rem;
+          display: block;
+        }
+        .item_text {
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          padding: 0.133333rem;
+          font-size: 0.32rem;
+        }
+      }
+    }
+  }
 }
 </style>
\ No newline at end of file