diff --git a/src/assets/styles/variable.styl b/src/assets/styles/variable.styl
index 627ba41..1937d3d 100644
--- a/src/assets/styles/variable.styl
+++ b/src/assets/styles/variable.styl
@@ -1 +1,2 @@
-$bgColor = #00bcd4
\ No newline at end of file
+$bgColor = #00bcd4
+$darkTextColor = #333333
\ No newline at end of file
diff --git a/src/pages/home/components/Icons.vue b/src/pages/home/components/Icons.vue
new file mode 100644
index 0000000..99a7577
--- /dev/null
+++ b/src/pages/home/components/Icons.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="icons">
+    <div class="icon">
+      <div class="icon-img">
+        <img
+          class="icon-img-content"
+          src="https://imgs.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png"
+        />
+      </div>
+      <p class="icon-desc">热门景点</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "HomeIcons"
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~styles/variable.styl'
+.icons
+  overflow hidden
+  height 0
+  padding-bottom 50%
+  .icon
+    position relative
+    overflow hidden
+    float left
+    width 25%
+    height 0
+    padding-bottom 25%
+    .icon-img
+      position absolute
+      top 0
+      right 0
+      bottom .44rem
+      left 0
+      box-sizing border-box
+      padding .1rem
+      .icon-img-content
+        display block
+        margin 0 auto
+        height 100%
+    .icon-desc
+      position absolute
+      left 0
+      right 0
+      bottom 0
+      height .44rem
+      line-height .44rem
+      color $darkTextColor
+      text-align center
+</style>
diff --git a/src/pages/home/home.vue b/src/pages/home/home.vue
index 0f59dbc..1acb7b7 100644
--- a/src/pages/home/home.vue
+++ b/src/pages/home/home.vue
@@ -2,6 +2,7 @@
   <div>
     <home-header></home-header>
     <home-swiper></home-swiper>
+    <home-icons></home-icons>
   </div>
 </template>
 
@@ -9,13 +10,15 @@
 // 组件引入
 import HomeHeader from "./components/Header";
 import HomeSwiper from "./components/Swiper";
+import HomeIcons from "./components/Icons"
 export default {
   //单页组件名
   name: "Home",
   // 组件注册
   components: {
     HomeHeader: HomeHeader,
-    HomeSwiper: HomeSwiper
+    HomeSwiper: HomeSwiper,
+    HomeIcons: HomeIcons
   }
 };
 </script>
diff --git a/src/router/index.js b/src/router/index.js
index ca258bd..5e64957 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,6 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
-import Home from "../pages/home/Home";
+import Home from "../pages/home/home";
 
 Vue.use(VueRouter);