添加首页菜单模块

src/views/home/components/MenuModule.vue

+<template>
+  <section class="menu-module">
+    <div class="menu-module-item" v-for="(item, idx) in datas" :key="idx" @click="handleClickItem(item)">
+      <img v-if="item.icon" class="menu-icon" :src="item.icon">
+      <div v-else class="menu-icon"></div>
+      <span v-if="item.name" class="menu-name">{{item.name}}</span>
+      <div v-else class="menu-name white"></div>
+    </div>
+  </section>
+</template>
+
+
+<script>
+export default {
+  name: 'MenuModule',
+  props: {
+
+  },
+  data () {
+    return {
+      datas: [
+        { id: 1, name: '', icon: '', type: '' },
+        { id: 2, name: '', icon: '', type: '' },
+        { id: 3, name: '', icon: '', type: '' },
+        { id: 4, name: '', icon: '', type: '' },
+        { id: 5, name: '', icon: '', type: '' },
+        { id: 6, name: '', icon: '', type: '' },
+        { id: 7, name: '', icon: '', type: '' },
+        { id: 8, name: '', icon: '', type: '' },
+      ]
+    }
+  },
+  methods: {
+    handleClickItem (item) {
+
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.white {
+  background: #eee;
+}
+.menu-module {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  padding-top: 5px;
+  @ModulePaddingTop: 25px;
+  .menu-module-item {
+    padding-top: @ModulePaddingTop;
+    width: 25%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    @IconSize: 50px;
+    .menu-icon {
+      background: #eee;
+      height: @IconSize;
+      width: @IconSize;
+      border-radius: calc(@IconSize / 2);
+    }
+    .menu-name {
+      display: block;
+      margin-top: 10px;
+      line-height: 20px;
+      min-height: 20px;
+      min-width: 90%;
+      font-size: 14px;
+      text-align: center;
+      color: #444444;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/home/index.vue

@@ -12,14 +12,16 @@
     </nafm-header>
     </nafm-header>
     <main>
     <main>
       <HomeBanner />
       <HomeBanner />
+      <MenuModule />
     </main>
     </main>
   </div>
   </div>
 </template>
 </template>
 <script>
 <script>
 import HomeBanner from './components/HomeBanner'
 import HomeBanner from './components/HomeBanner'
+import MenuModule from './components/MenuModule'
 export default {
 export default {
   name: "Home",
   name: "Home",
-  components: { HomeBanner },
+  components: { HomeBanner, MenuModule },
   data () {
   data () {
     return {};
     return {};
   },
   },