index-icon #1

src/assets/styles/variable.styl

@@ -1 +1,2 @@
-$bgColor = #00bcd4
+$bgColor = #00bcd4
+$darkTextColor = #333333

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>

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>

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);