one third of index

h5-channel-web/package.json

@@ -52,4 +52,4 @@
     "> 1%",
     "> 1%",
     "last 2 versions"
     "last 2 versions"
   ]
   ]
-}
+}
\ No newline at end of file

h5-channel-web/src/assets/styles/common.scss

@@ -3,6 +3,8 @@ body {
   height: 100%;
   height: 100%;
   // 颜色
   // 颜色
   color: rgb(32, 44, 219);
   color: rgb(32, 44, 219);
+  // 字体
+  font-family: PingFangSC;
 }
 }
 
 
 /* 实现移动端 1px , 根据不同 dpr 去缩放 */
 /* 实现移动端 1px , 根据不同 dpr 去缩放 */

h5-channel-web/src/router/index.js

@@ -13,7 +13,9 @@ const routes = [
     children: [
     children: [
       {
       {
         path: 'index',
         path: 'index',
-        component: () => import("@/views/pages/childone.vue")
+        // component: () => import("@/views/pages/childone.vue")
+        component: () => import("@/views/pages/home/HomeTab.vue")
+
       },
       },
       {
       {
         path: 'profile',
         path: 'profile',

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

@@ -6,8 +6,8 @@
     <nav>
     <nav>
       <!-- vant Tabbar标签栏组件 -->
       <!-- vant Tabbar标签栏组件 -->
       <van-tabbar v-model="active">
       <van-tabbar v-model="active">
-        <van-tabbar-item icon="home-o" @click="goToIndex">首页</van-tabbar-item>
-        <van-tabbar-item icon="friends-o" @click="goToProfile">我的</van-tabbar-item>
+        <van-tabbar-item icon="wap-home-o" @click="goToIndex">首页</van-tabbar-item>
+        <van-tabbar-item icon="contact" @click="goToProfile">我的</van-tabbar-item>
       </van-tabbar>
       </van-tabbar>
     </nav>
     </nav>
   </div>
   </div>

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

+<template>
+  <div class="home-tab">
+    <!-- 头部导航栏 -->
+    <van-nav-bar title="首页" left-text="关闭" left-arrow @click-left="onClickLeft" />
+    <!-- 中间banner图 -->
+    <div class="banner">
+      <img src="@/assets/images/home/banner.png" alt />
+    </div>
+    <!-- 商标注册服务标题 -->
+    <div class="title-wrap">
+      <i></i>
+      <span>商标注册服务</span>
+      <b></b>
+    </div>
+    <!-- 商标注册服务：自助注册 专家辅助 担保申请 -->
+    <div class="reg-classify">
+      <ul>
+        <li>
+          <h3>自助注册</h3>
+          <h4>适合熟知商标注册流程的企业用户</h4>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    onClickLeft() {
+      alert("go -1");
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.home-tab {
+  .banner {
+    height: 188px;
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .title-wrap {
+    width: 160px;
+    height: 57px;
+    margin: 0 auto;
+    line-height: 57px;
+    i {
+      display: inline-block;
+      width: 13px;
+      height: 10px;
+      background: url("../../../assets/images/home/icon11.png") no-repeat;
+      background-size: 100% 100%;
+      margin-right: 7px;
+      margin-top: 13px;
+    }
+    span {
+      display: inline-block;
+      width: 121px;
+      line-height: 28px;
+      color: #333333;
+      font-size: 20px;
+    }
+    b {
+      display: inline-block;
+      width: 11px;
+      height: 10px;
+      background: url("../../../assets/images/home/icon12.png") no-repeat;
+      background-size: 100% 100%;
+      margin-left: 7px;
+      margin-bottom: 6px;
+    }
+  }
+  .reg-classify {
+    ul {
+      width: 349px;
+      margin: 0 auto;
+      display: flex;
+      flex-direction: column;
+      li {
+        display: inline-block;
+        width: 349px;
+        height: 292px;
+        background: #578;
+        h3 {
+          color: #333333;
+          font-size: 19px;
+          line-height: 27px;
+          margin: 21px 0 6px 18px;
+        }
+        h4 {
+          color: #666666;
+          font-size: 14px;
+          line-height: 20px;
+          margin: 0 0 px 18px;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file