finish static layout of index

h5-channel-web/src/views/Home.vue

@@ -41,3 +41,14 @@ export default {
   }
 };
 </script>
+
+<style lang="scss" >
+.home {
+  main {
+    height: 617px;
+  }
+  nav {
+    height: 50px;
+  }
+}
+</style>

h5-channel-web/src/views/pages/home/HomeTab.vue

@@ -2,6 +2,7 @@
   <div class="home-tab">
     <!-- 头部导航栏 -->
     <van-nav-bar title="首页" left-text="关闭" left-arrow @click-left="onClickLeft" />
+    <div class="content">
       <!-- 中间banner图 -->
       <div class="banner">
         <img src="@/assets/images/home/banner.png" alt />
@@ -91,6 +92,32 @@
           </li>
         </ul>
       </div>
+      <!-- 图文说明：注册流程 服务优势 常见问题 增值服务 -->
+      <div class="pic-wrap pic-one">
+        <h2>注册流程</h2>
+        <h3>轻松掌握注册流程</h3>
+        <div class="short-line"></div>
+        <b></b>
+      </div>
+      <div class="pic-wrap pic-two">
+        <h2>服务优势</h2>
+        <h3>金牌服务让您省心</h3>
+        <div class="short-line"></div>
+        <b></b>
+      </div>
+      <div class="pic-wrap pic-three">
+        <h2>常见问题</h2>
+        <h3>疑难解答在这里</h3>
+        <div class="short-line"></div>
+        <b></b>
+      </div>
+      <div class="pic-wrap pic-four">
+        <h2>增值服务</h2>
+        <h3>免费为您开启</h3>
+        <div class="short-line"></div>
+        <b></b>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -114,7 +141,15 @@ export default {
 
 <style lang="scss" scoped>
 .home-tab {
+  height: 100%;
   background: #fbf8fb;
+  .van-nav-bar {
+    height: 46px;
+  }
+  .content {
+    height: 571px;
+    overflow-y: scroll;
+  }
   .banner {
     height: 188px;
     img {
@@ -240,5 +275,107 @@ export default {
       }
     }
   }
+  .pic-wrap {
+    display: inline-block;
+    width: 170px;
+    height: 92px;
+    position: relative;
+    h2 {
+      width: 80px;
+      line-height: 25px;
+      font-size: 18px;
+      padding: 16px 0 4px 20px;
+    }
+    h3 {
+      width: 100px;
+      line-height: 17px;
+      font-size: 12px;
+      padding-left: 20px;
+      position: absolute;
+      z-index: 2;
+    }
+    .short-line {
+      width: 10px;
+      height: 2px;
+      position: absolute;
+      top: 68px;
+      left: 21px;
+    }
+    b {
+      display: inline-block;
+      width: 71px;
+      height: 61px;
+      background-size: 100% 100%;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      z-index: 1;
+    }
+  }
+  .pic-one {
+    margin: 0 9px 9px 13px;
+    background: #ece8f0;
+    h2 {
+      color: #7963ad;
+      padding: 16px 0 4px 20px;
+    }
+    h3 {
+      color: #7963ad;
+      padding-left: 20px;
+    }
+    .short-line {
+      background: #7963ad;
+    }
+    b {
+      background: url("../../../assets/images/home/zclc.png") no-repeat;
+    }
+  }
+  .pic-two {
+    background: #fff0dc;
+    h2 {
+      color: #a37d50;
+    }
+    h3 {
+      color: #a37d50;
+    }
+    .short-line {
+      background: #a37d50;
+    }
+    b {
+      background: url("../../../assets/images/home/fwys.png") no-repeat;
+    }
+  }
+  .pic-three {
+    background: #dbeafc;
+    margin: 0 9px 13px 13px;
+    h2 {
+      color: #5e718c;
+    }
+    h3 {
+      color: #5e718c;
+    }
+    .short-line {
+      background: #5e718c;
+    }
+    b {
+      background: url("../../../assets/images/home/cjwt.png") no-repeat;
+    }
+  }
+  .pic-four {
+    margin-bottom: 13px;
+    background: #f7eae7;
+    h2 {
+      color: #9d664f;
+    }
+    h3 {
+      color: #9d664f;
+    }
+    .short-line {
+      background: #9d664f;
+    }
+    b {
+      background: url("../../../assets/images/home/zzfw.png") no-repeat;
+    }
+  }
 }
 </style>
\ No newline at end of file