'修改路由'

src/pages/productQuery/product-detailed.vue

+<!--
+   * @Descrip: 查询首页
+ * @Author: your name
+ * @Date: 2019-10-15 14:30:00
+ * @LastEditTime: 2019-10-16 09:26:38
+ * @LastEditors: Please set LastEditors
+   -->
+<template>
+  <h-view id="query" class="public-style" title="产品查询">
+    <h-header :proportion="[5,1,1]" class="bar-custom">
+      <div slot="left" class="h-header-btn">
+        <img src="@/assets/userBind/arrow.png" @click="$routeGo()">
+        <span>产品明细</span>
+      </div>
+    </h-header>
+    <Tab @getTabNum="getTabNum" />
+    <h-content/>
+  </h-view>
+</template>
+
+<script>
+import Tab from './tab'
+export default {
+  name: 'ProDetailed',
+  components: {
+    Tab,
+  },
+  data () {
+    return {
+      tabNum: 0,
+    }
+  },
+  computed: {},
+  watch: {},
+  methods:
+ {
+   getTabNum (i) {
+     console.log(i)
+     this.tabNum = i
+   },
+ },
+}
+</script>
+<style lang='less' scoped>
+#query {
+    .h-header-btn {
+      img {
+        width: 16px;
+        height: 16px;
+        margin-left: 4px;
+      }
+
+      span {
+        font-family: PingFangSC-Semibold;
+        margin-left: 16px;
+        font-size: 17px;
+        letter-spacing: 0.61px;
+        line-height: 24px;
+      }
+    }
+    .hinput {
+      position: relative;
+      z-index: 50;
+      width: 100%;
+      height: 50px;
+      //border-bottom: 1px solid #cccccc70;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: #fff;
+      .search-box {
+        width: 93.6%;
+        height: 36px;
+        font-size: 14px;
+        color: #B4B4B5;
+        letter-spacing: 0;
+        font-family: PingFangSC-Regular;
+        border: 1px solid rgba(56, 63, 69, 0.60);
+        border-radius: 4px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+
+        input {
+          width: 90%;
+          height: 100%;
+          opacity: 0.4;
+          border: none;
+          line-height: 34px;
+        }
+      }
+    }
+    .box {
+        position: relative;
+        width: 100%;
+        height: 79px;
+        background: #fff;
+        border-top: 1px solid #cccccc70;
+        margin-bottom: 8px;
+        .first {
+            height: 20px;
+            width: 100%;
+            display: flex;
+            flex-direction: row;
+            margin-top: 16px;
+            img {
+                width: 16px;
+                height: 16px;
+                margin-left: 16px;
+            }
+            .product-class {
+                font-family: PingFangSC-Regular;
+                font-size: 14px;
+                color: rgba(56,63,69,0.60);
+                margin-left: 8px;
+            }
+            .product {
+                font-family: PingFangSC-Regular;
+                font-size: 14px;
+                color: #383F45;
+                margin-left: 16px
+            }
+        }
+        .second {
+            height: 20px;
+            width: 100%;
+            display: flex;
+            flex-direction: row;
+            margin-top: 7px;
+            .product-class {
+                font-family: PingFangSC-Regular;
+                font-size: 14px;
+                color: rgba(56,63,69,0.60);
+                margin-left: 54px;
+            }
+            .product {
+                font-family: PingFangSC-Regular;
+                font-size: 14px;
+                color: #383F45;
+                margin-left: 16px
+            }
+            img {
+                width: 16px;
+                height: 16px;
+                margin-left: 9px;
+            }
+        }
+        .arrow {
+            position: absolute;
+            top: 50%;
+            margin-top: -8px;
+            right: 20px;
+            height: 16px;
+            width: 16px;
+        }
+    }
+}
+</style>

src/pages/productQuery/query-home.vue

@@ -2,7 +2,7 @@
    * @Descrip: 查询首页
  * @Author: your name
  * @Date: 2019-10-15 14:30:00
- * @LastEditTime: 2019-10-15 15:54:08
+ * @LastEditTime: 2019-10-16 09:30:10
  * @LastEditors: Please set LastEditors
    -->
 <template>
@@ -20,7 +20,7 @@
           <img src="@/assets/distributorSign/search.png" alt="">
         </div>
       </div>
-      <div class="box">
+      <div class="box" @click="goDetailed">
         <div class="first">
           <img src="@/assets/productQuery/product-query.png" alt="">
           <p class="product-class">产品类别</p>
@@ -77,7 +77,11 @@ export default {
   watch: {},
   methods:
  {
-
+   goDetailed () {
+     this.$router.push({
+       name: 'ProDetailed',
+     })
+   },
  },
 }
 </script>

src/pages/productQuery/tab.vue

+<!--
+ * @Description: 详情tab
+ * @Author: your name
+ * @Date: 2019-09-25 19:47:59
+ * @LastEditTime: 2019-10-16 09:29:53
+ * @LastEditors: Please set LastEditors
+ -->
+<template>
+  <div class="tab-style">
+    <span @click="tabNum = 0;sendTabNum()"><img :src="tabNum == 0?check1:uncheck1"></span>
+    <span @click="tabNum = 1;sendTabNum()"><img :src="tabNum == 1?check2:uncheck2" ></span>
+    <span @click="tabNum = 2;sendTabNum()"><img :src="tabNum == 2?check3:uncheck3"></span>
+  </div>
+</template>
+<script>
+import check1 from '@/assets/distributorSign/check1.png'
+import check2 from '@/assets/distributorSign/check2.png'
+import check3 from '@/assets/distributorSign/guaranteed.png'
+import uncheck1 from '@/assets/distributorSign/uncheck1.png'
+import uncheck2 from '@/assets/distributorSign/uncheck2.png'
+import uncheck3 from '@/assets/distributorSign/guarantee.png'
+export default {
+  data () {
+    return {
+      tabNum: 0,
+      check1: check1,
+      check2: check2,
+      check3: check3,
+      uncheck1: uncheck1,
+      uncheck2: uncheck2,
+      uncheck3: uncheck3,
+    }
+  },
+  methods: {
+    sendTabNum () {
+      this.$emit('getTabNum', this.tabNum)
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+.tab-style{
+    position: relative;
+    z-index: 50;
+    background-color: #fff;
+    display:flex;
+    justify-content: center;
+    padding-top:12px;
+    padding-bottom: 8px;
+    align-items: center;
+    box-shadow:0 2px 3px 0  rgba(220,220,221,0.50);
+    span{
+        display: block;
+        width:112px;
+        height: 32px;
+        border-radius:16px;
+    }
+    img{
+        width:112px;
+        height: 32px;
+        margin-right:5.7px;
+    }
+    span:nth-of-type(2){
+        margin:0 10px;
+    }
+}
+</style>

src/router/index.js

@@ -2,7 +2,7 @@
  * @Description: In User Settings Edit
  * @Author: your name
  * @Date: 2019-09-24 12:34:06
- * @LastEditTime: 2019-10-15 14:37:42
+ * @LastEditTime: 2019-10-16 09:29:11
  * @LastEditors: Please set LastEditors
  */
 import Vue from 'vue'
@@ -60,6 +60,7 @@ import MarginFirstPay from '../pages/pay/marginPay/first-pay'
 import MarginPayEntry from '../pages/pay/marginPay/pay-entry'
 // 产品查询
 import QueryHome from '@/pages/productQuery/query-home'
+import ProDetailed from '@/pages/productQuery/product-detailed'
 Vue.use(Router)
 
 export default new Router({
@@ -168,6 +169,7 @@ export default new Router({
     {path: '/margin-pay-entry', component: MarginPayEntry, name: 'MarginPayEntry', meta: {keepAlive: true}},
     // 产品查询
     {path: '/query-home', component: QueryHome, name: 'QueryHome', meta: {keepAlive: true}},
+    {path: '/product-detailed', component: ProDetailed, name: 'ProDetailed', meta: {keepAlive: true}},
   ],
   scrollBehavior (to, from, savedPosition) {
     if (to.hash) {