search

src/router/index.js

@@ -11,6 +11,7 @@ import GroupsAdd from  '@/views/groups/add.vue'
 import DeviceDetail from  '@/views/device/detail.vue'
 import DeviceDetail from  '@/views/device/detail.vue'
 import DeviceAdd from  '@/views/device/add.vue'
 import DeviceAdd from  '@/views/device/add.vue'
 import Tempaltes from  '@/views/tempaltes/index.vue'
 import Tempaltes from  '@/views/tempaltes/index.vue'
+import Search from  '@/views/tempaltes/search.vue'
 import TempaltesAll from  '@/views/tempaltes/all.vue'
 import TempaltesAll from  '@/views/tempaltes/all.vue'
 import TempalteEdit from  '@/views/tempaltes/edit.vue'
 import TempalteEdit from  '@/views/tempaltes/edit.vue'
 import TempaltePreview from  '@/views/tempaltes/preview.vue'
 import TempaltePreview from  '@/views/tempaltes/preview.vue'
@@ -31,6 +32,7 @@ const router =  new Router({
         { path: '/tempaltes/all', name: 'TempaltesAll', component: TempaltesAll, meta: { keepAlive: true } },
         { path: '/tempaltes/all', name: 'TempaltesAll', component: TempaltesAll, meta: { keepAlive: true } },
         { path: '/tempaltes/edit', name: 'TempaltesEdit', component: TempalteEdit, meta: { keepAlive: false } },
         { path: '/tempaltes/edit', name: 'TempaltesEdit', component: TempalteEdit, meta: { keepAlive: false } },
         { path: '/tempaltes/detial', name: 'TempalteDetail', component: TempalteDetail, meta: { keepAlive: false } },
         { path: '/tempaltes/detial', name: 'TempalteDetail', component: TempalteDetail, meta: { keepAlive: false } },
+        { path: '/tempaltes/search', name: 'Search', component: Search, meta: { keepAlive: false } },
         { path: '/groups', name: 'Groups', component: Groups, meta: { keepAlive: true } },
         { path: '/groups', name: 'Groups', component: Groups, meta: { keepAlive: true } },
         { path: '/groups/add', name: 'GroupsAdd', component: GroupsAdd, meta: { keepAlive: false } },
         { path: '/groups/add', name: 'GroupsAdd', component: GroupsAdd, meta: { keepAlive: false } },
         { path: '/device', name: 'Device', component: Device, meta: { keepAlive: true } },
         { path: '/device', name: 'Device', component: Device, meta: { keepAlive: true } },

src/views/tempaltes/all.vue

@@ -30,7 +30,7 @@
         </div>
         </div>
         <div class="sort-item active">
         <div class="sort-item active">
           <!-- <span>搜索</span> -->
           <!-- <span>搜索</span> -->
-          <van-icon name="search"></van-icon>
+          <van-icon name="search" @click="goSearch"></van-icon>
         </div>
         </div>
       </div>
       </div>
     </div>
     </div>
@@ -103,6 +103,11 @@ export default {
           templateId: item.templateId
           templateId: item.templateId
         }
         }
       });
       });
+    },
+    goSearch() {
+      this.$router.push({
+        path: "/tempaltes/search"
+      });
     }
     }
   },
   },
   components: {
   components: {

src/views/tempaltes/index.vue

@@ -30,7 +30,7 @@
         </div>
         </div>
         <div class="sort-item active">
         <div class="sort-item active">
           <!-- <span>搜索</span> -->
           <!-- <span>搜索</span> -->
-          <van-icon name="search"></van-icon>
+          <van-icon name="search" @click="goSearch"></van-icon>
         </div>
         </div>
       </div>
       </div>
     </div>
     </div>
@@ -292,6 +292,11 @@ export default {
         }
         }
       });
       });
     },
     },
+    goSearch() {
+      this.$router.push({
+        path: "/tempaltes/search"
+      });
+    },
     showCustom() {
     showCustom() {
       this.show = true;
       this.show = true;
     }
     }

src/views/tempaltes/search.vue

+<template>
+  <div class="help">
+    <NavBar title="搜索" left-arrow></NavBar>
+    <div class="content">
+      <div class="search-content">
+          <van-icon  name="search"></van-icon>
+          <input type="text">
+          <div class="search-btn">搜索</div>
+      </div>
+      <div class="result">
+        <!-- <div class="result-item" v-for="(item, index) in list" :key="index">
+          <div class="question">
+            Q:{{item.q}}
+          </div>
+          <div class="answer">
+            A:{{item.a}}
+          </div>
+        </div> -->
+      </div>
+      <!-- <img src="../../../public/img/ps/helpbg.png" alt=""> -->
+    </div>
+  </div>
+</template>
+
+<script>
+import NavBar from '@/views/layout/navbar'
+export default {
+  name: 'help',
+  components:{
+    NavBar
+  },
+  data() {
+    return {
+      list: [
+        {
+          q: '此处是问题此处是问题此处是问题？',
+          a: '此处是答案此处是答案此处是答案此处是答案此处是答案此处是答案此处是'
+        },
+        {
+          q: '此处是问题？',
+          a: '此处是答案'
+        }
+      ]
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .help {
+    .content {
+      padding-top: 65px;
+      padding-bottom: 35px;
+      text-align: center;
+      width:618px;
+      margin: 0 auto;
+      img {
+        width: 50%;
+      }
+      .search-content {
+        width: 618px;
+        height:53px;
+        border:1px solid rgba(132,132,132,1);
+        padding-left: 17px;
+        border-radius:3px;
+        font-size: 25px;
+        display: flex;
+        align-items: center;
+        input {
+          padding: 0 10px;
+          font-size: 21px;
+          border: none;
+          outline: none;
+          flex: 1;
+        }
+        .search-btn {
+          width:151px;
+          height:55px;
+          font-size: 22px;
+          background:rgba(110,140,249,1);
+           color: white;
+           line-height: 55px;
+          // border-radius:3px;
+        }
+        
+      }
+      .result {
+        .result-item {
+          padding-top: 84px;
+          font-size:21px;
+          line-height: 35px;
+          .question {
+            padding-bottom: 20px;
+          }
+          .answer {
+
+          }
+        }
+        text-align: left;
+      }
+    }
+  }
+</style>
+