添加首页banner相关布局

src/views/home/components/HomeBanner.vue

+<template>
+  <section class="home-banner">
+    <van-swipe class="banner-swiper" :autoplay="autoplay" lazy-render @change="handleChange">
+      <van-swipe-item class="swiper-item" v-for="(item, idx) in banners" :key="idx">
+        <img v-if="item.imgUrl" class="banner-img" :src="item.imgUrl" @click="handleItem(item)" />
+        <div v-else class="banner-img white">
+          <div class="banner-img skeleton"></div>
+        </div>
+      </van-swipe-item>
+
+      <template #indicator>
+        <div class="nafmii-indicator">
+          <span class="indicator-item" :class="{'indicator-active': active == idx}" v-for="(item, idx) in banners" :key="idx" />
+        </div>
+      </template>
+    </van-swipe>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'HomeBanner',
+  props: {
+  },
+  data () {
+    return {
+      autoplay: 5000,
+      active: 0,
+      banners: [
+        {},
+        {}
+      ]
+    }
+  },
+  methods: {
+    handleItem (banner) {
+
+    },
+    handleChange (index) {
+      this.active = index
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.white {
+  background: #eee;
+}
+@PaddingSize: 15;
+.home-banner {
+  margin-top: @PaddingSize;
+  .banner-swiper {
+    .banner-img {
+      height: 145px;
+      border-radius: 5px;
+      width: 100%;
+    }
+    @PointSize: 5px;
+    .nafmii-indicator {
+      position: absolute;
+      left: 0;
+      bottom: 10px;
+      right: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: @PointSize;
+      .indicator-item {
+        background: rgba(255, 255, 255, 0.4);
+        width: @PointSize;
+        height: @PointSize;
+        border-radius: calc(@PointSize / 2);
+        margin: 0 4px;
+
+        &.indicator-active {
+          background: white;
+          width: 21.5px;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/home/index.vue

 <template>
 <template>
-  <div>
-    <nafm-header :leftArrow="false">
+  <div class="home nafmii-head-bg1">
+    <nafm-header :leftArrow="false" navClass="nafmii-head-bg1">
       <div class="head-custom-container">
       <div class="head-custom-container">
         <div class="search-input-box" @click="handleSearch">
         <div class="search-input-box" @click="handleSearch">
           <div src="" alt="" class="search-icon" />
           <div src="" alt="" class="search-icon" />
@@ -10,43 +10,56 @@
         </div>
         </div>
       </div>
       </div>
     </nafm-header>
     </nafm-header>
-    <span @click="jumpLogin">跳转登录页面</span>
-    <FooterBottom />
+    <main>
+      <HomeBanner />
+    </main>
   </div>
   </div>
 </template>
 </template>
 <script>
 <script>
+import HomeBanner from './components/HomeBanner'
 export default {
 export default {
   name: "Home",
   name: "Home",
-  components: {},
-  data() {
+  components: { HomeBanner },
+  data () {
     return {};
     return {};
   },
   },
   methods: {
   methods: {
-    jumpLogin() {
+    jumpLogin () {
       this.$router.push({
       this.$router.push({
         name: "Login",
         name: "Login",
       });
       });
     },
     },
 
 
-    handleSearch() {},
+    handleSearch () { },
   },
   },
 };
 };
 </script>
 </script>
 
 
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>
+.home {
+  @PaddingSize: 15px;
+
+  main {
+    padding: 0 @PaddingSize;
+    height: 1000px;
+    overflow-y: scroll;
+  }
+}
+
 @PaddingSize: 15px;
 @PaddingSize: 15px;
-@HeadHeight: 33px;
+@HeadHeight: 50px;
 .head-custom-container {
 .head-custom-container {
   width: 100%;
   width: 100%;
   height: @HeadHeight;
   height: @HeadHeight;
-  padding: 0 @PaddingSize;
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
+
+  @InputHeight: 33px;
   .search-input-box {
   .search-input-box {
     width: 100%;
     width: 100%;
-    height: 100%;
-    border-radius: calc(@HeadHeight / 2);
+    height: @InputHeight;
+    border-radius: calc(@InputHeight / 2);
     background-color: rgba(255, 255, 255, 0.2);
     background-color: rgba(255, 255, 255, 0.2);
     padding: 0 @PaddingSize;
     padding: 0 @PaddingSize;
     display: flex;
     display: flex;