diff --git a/package.json b/package.json
index 9ab9667442c0307e3d9977748d9ebe18d2de3564..2574b782762e464cd864fb31232171b0bd873ab2 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "mint-ui": "^2.2.13",
+    "swiper": "^4.4.6",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1"
   },
diff --git a/src/img/banner.png b/src/img/banner.png
new file mode 100644
index 0000000000000000000000000000000000000000..47d9f943733cdb301d5482ac02088335e4042008
Binary files /dev/null and b/src/img/banner.png differ
diff --git a/src/img/title.png b/src/img/title.png
new file mode 100644
index 0000000000000000000000000000000000000000..c373f0ebe4178888b908aefeec4a785a88007f76
Binary files /dev/null and b/src/img/title.png differ
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index e160065a05262f5dd64c6e86371f5cc6e2b980bd..94688be602c2a29b6432008edc358e97184fb26f 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -1,15 +1,539 @@
 <template>
-    <div class="home">
-        home <mt-button type="primary">按钮</mt-button>
+  <div class="home">
+    <div class="header">
+      <ul class="ul">
+        <li>首页</li>
+        <li>服装</li>
+        <li>图书</li>
+        <li>童书</li>
+        <li>电子书</li>
+        <li>超市</li>
+        <li>电器</li>
+        <li>文具</li>
+        <li>优品</li>
+        <!-- <li>小说</li>
+        <li>绘本</li>
+        <li>拍卖</li> -->
+      </ul>
+      <div class="jiantou">></div>
     </div>
+    <div class="swiper-container">
+      <div class="swiper-wrapper">
+        <div class="swiper-slide">Slide 1</div>
+        <div class="swiper-slide">Slide 2</div>
+        <div class="swiper-slide">Slide 3</div>
+      </div>
+      <!-- 如果需要分页器 -->
+      <div class="swiper-pagination"></div>
+
+      <!-- 如果需要导航按钮 -->
+      <div class="swiper-button-prev"></div>
+      <div class="swiper-button-next"></div>
+
+      <!-- 如果需要滚动条 -->
+      <!-- <div class="swiper-scrollbar"></div> -->
+    </div>
+    <div class="banner"><img src="../img/banner.png" /></div>
+    <div class="main1">
+      <ul class="ul1">
+        <li>
+          <div class="img"></div>
+          <span>dddd</span>
+        </li>
+        <li>
+          <div class="img"></div>
+          <span>ddd</span>
+        </li>
+        <li>
+          <div class="img"></div>
+          <span>ddd</span>
+        </li>
+        <li>
+          <div class="img"></div>
+          <span>ddd</span>
+        </li>
+        <li>
+          <div class="img"></div>
+          <span>ddd</span>
+        </li>
+        <li>
+          <div class="img"></div>
+          <span>ddd</span>
+        </li>
+        <li>
+          <div class="img"></div>
+          <span>dddd</span>
+        </li>
+        <li>
+          <div class="img"></div>
+          <span>dddd</span>
+        </li>
+        <li>
+          <div class="img"></div>
+          <span>dd</span>
+        </li>
+        <li>
+          <div class="img"></div>
+          <span>ddddd</span>
+        </li>
+      </ul>
+    </div>
+    <div class="main2">
+      <div class="center">
+        <div class="rm">热卖</div>
+        <div class="text">妖精的口袋大牌日</div>
+      </div>
+      <div class="right">更多</div>
+    </div>
+    <div class="main3">
+      <div class="top"><img src='../img/title.png' /></div>
+
+      <div class='bottom'>
+        <div class="swiper-container">
+          <div class="swiper-wrapper">
+            <div class="swiper-slide">Slide 1</div>
+            <div class="swiper-slide">Slide 2</div>
+            <div class="swiper-slide">Slide 3</div>
+          </div>
+          <!-- 如果需要分页器 -->
+          <div class="swiper-pagination"></div>
+
+          <!-- 如果需要导航按钮 -->
+          <div class="swiper-button-prev"></div>
+          <div class="swiper-button-next"></div>
+
+          <!-- 如果需要滚动条 -->
+          <!-- <div class="swiper-scrollbar"></div> -->
+        </div>
+      </div>
+    </div>
+    <div class="main4">
+      <ul class="ul2">
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+        <li>
+          <div class="book"></div>
+          <p class="title">ddddddd</p>
+          <div class="price">$24.55</div>
+        </li>
+      </ul>
+    </div>
+  </div>
 </template>
 
 <script>
+import Swiper from 'swiper'
 export default {
-  name: 'home'
+  name: 'home',
+  // data是一个方法，要return一个object
+  data () {
+    return {
+      swiper: []
+    }
+  },
+  created () {
+    this.$http.getSwiper()
+      .then(resp => {
+        console.log(resp)
+      })
+  },
+  mounted () {
+    this.$mySwiper = new Swiper('.swiper-container', {
+
+      loop: true, // 循环模式选项
+
+      // 如果需要分页器
+      pagination: {
+        el: '.swiper-pagination'
+      },
+
+      // 如果需要前进后退按钮
+      navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev'
+      }
+
+      // 如果需要滚动条
+      // scrollbar: {
+      //   el: '.swiper-scrollbar'
+      // }
+    })
+  }
+
 }
+
 </script>
 
-<style>
+<style lang="scss">
+@import 'swiper/dist/css/swiper.css';
+.home {
+  width: 100%;
+  height: 100%;
+  & .header {
+    width: 100%;
+    height: 30px;
+    background: pink;
+    // position: relative;
+    & .ul {
+      width: 100%;
+      height: 30px;
+      & li {
+        width: 40px;
+        height: 30px;
+        float: left;
+        font-size: 12px;
+        text-align: center;
+        line-height: 30px;
+      }
+    }
+    & .jiantou {
+      width: 20px;
+      height: 30px;
+      right: 0;
+      top: 44px;
+      float: right;
+      border: 1px solid;
+      line-height: 30px;
+      margin-top: -30px;
+      text-align: center;
+      // position: fixed;
+    }
+  }
+  & .swiper-container {
+    width: 100%;
+    height: 100px;
+  }
+  & .banner {
+    width: 100%;
+    height: 100px;
+    & img {
+      width: 100%;
+      height: 100px;
+    }
+  }
+  & .main1 {
+    width: 100%;
+    height: 120px;
+    background: pink;
+    & .ul1 {
+      width: 90%;
+      height: 120px;
+      margin-left: 30px;
+      border-top: 1px solid;
+      border-left: 1px solid;
+      & li {
+        width: 18%;
+        height: 58px;
+        float: left;
+        border-right: 1px solid;
+        border-bottom: 1px solid;
+        & .img {
+          width: 30px;
+          height: 30px;
+          margin: 0 auto;
+          margin-top: 10px;
+          border: 1px solid;
+        }
+        & img {
+          width: 30px;
+          height: 30px;
+        }
+        & span {
+          width: 100%;
+          height: 20px;
+          font-size: 12px;
+          text-align: center;
+          line-height: 20px;
+          background: yellow;
+          display: inline-block;
+        }
+      }
+    }
+  }
+  & .main2 {
+    width: 100%;
+    height: 30px;
+    overflow: hidden;
+    // background: yellow;
+    & .center {
+      width: 150px;
+      height: 20px;
+      float: left;
+      margin-top: 5px;
+      margin-left: 90px;
+      display: inline-block;
+      // border: 1px solid;
+      overflow: hidden;
+      & .rm {
+        width: 30px;
+        height: 15px;
+        color: red;
+        float: left;
+        border: 1px solid red;
+        font-size: 12px;
+        margin-top: 2px;
+        text-align: center;
+        line-height: 15px;
+        border-radius: 3px;
+      }
+      & .text {
+        width: 100px;
+        height: 18px;
+        float: right;
+        // border: 1px solid;
+        font-size: 12px;
+        text-align: center;
+        line-height: 18px;
+      }
+    }
+    & .right {
+      width: 40px;
+      height: 20px;
+      float: right;
+      font-size: 12px;
+      margin-top: 5px;
+      text-align: center;
+      line-height: 20px;
+      // border: 1px solid;
+    }
+  }
+  & .main3 {
+    width: 100%;
+    height: 130px;
+    background: pink;
+    & .top {
+      width: 100%;
+      height: 25px;
+      border: 1px solid;
+      & img {
+        width: 120px;
+        height: 25px;
+        // border: 1px solid;
+        margin-left: 120px;
+      }
+    }
+    & .bottom {
+      width: 100%;
+      height: 105px;
+      background: yellow;
+    }
+  }
+  & .main4 {
+    width: 100%;
+    height: auto;
+    overflow-y: srcoll;
 
+    & .ul2 {
+      width: 98%;
+      height: auto;
+      margin-left: 20px;
+      border-top: 1px solid;
+      border-left: 1px solid;
+      & li {
+        width: 45%;
+        height: 180px;
+        float: left;
+        border-bottom: 1px solid;
+        border-right: 1px solid;
+        & .book {
+          width: 90px;
+          height: 120px;
+          margin: 0 auto;
+          border: 1px solid;
+        }
+        & .title {
+          width: 120px;
+          height: 20px;
+          margin: 0 auto;
+          font-size: 12px;
+          margin-top: 5px;
+          line-height: 20px;
+          border: 1px solid;
+        }
+        & .price {
+          width: 80px;
+          height: 20px;
+          color: red;
+          font-size: 12px;
+          border: 1px solid;
+          margin-top: 8px;
+          line-height: 20px;
+        }
+      }
+    }
+  }
+}
 </style>
diff --git a/src/request/index.js b/src/request/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391