diff --git a/package-lock.json b/package-lock.json
index 433d45f..352b6eb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6018,14 +6018,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -6040,20 +6038,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -6170,8 +6165,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -6183,7 +6177,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -6198,7 +6191,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -6206,14 +6198,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -6232,7 +6222,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -6313,8 +6302,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -6326,7 +6314,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -6448,7 +6435,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -15180,6 +15166,30 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "vant": {
+      "version": "1.3.0",
+      "resolved": "http://r.cnpmjs.org/vant/download/vant-1.3.0.tgz",
+      "integrity": "sha1-Q0lU6s7N/cJRLvnDYgF2hnqZmtU=",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "vue-lazyload": "1.2.3"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.0.0",
+          "resolved": "http://r.cnpmjs.org/@babel/runtime/download/@babel/runtime-7.0.0.tgz",
+          "integrity": "sha1-ret4/t/IVaoFvAQWQPP2+Y6FQkw=",
+          "requires": {
+            "regenerator-runtime": "^0.12.0"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "http://r.cnpmjs.org/regenerator-runtime/download/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha1-+hpxVEdkwDb4xJsToIsllMn4oN4="
+        }
+      }
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "http://r.cnpmjs.org/vary/download/vary-1.1.2.tgz",
@@ -15260,6 +15270,11 @@
         "vue-template-es2015-compiler": "^1.6.0"
       }
     },
+    "vue-lazyload": {
+      "version": "1.2.3",
+      "resolved": "http://r.cnpmjs.org/vue-lazyload/download/vue-lazyload-1.2.3.tgz",
+      "integrity": "sha1-kB+ewVx+bKeHgaK65KNDaGve2yw="
+    },
     "vue-loader": {
       "version": "15.4.1",
       "resolved": "http://r.cnpmjs.org/vue-loader/download/vue-loader-15.4.1.tgz",
diff --git a/package.json b/package.json
index 1a51fa4..65c4451 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
+    "vant": "^1.3.0",
     "vue": "^2.5.17",
     "vue-class-component": "^6.0.0",
     "vue-property-decorator": "^7.0.0",
@@ -24,7 +25,7 @@
     "@vue/eslint-config-prettier": "^3.0.1",
     "@vue/eslint-config-typescript": "^3.0.1",
     "@vue/test-utils": "^1.0.0-beta.20",
-    "babel-core": "7.0.0-bridge.0",
+    "babel-core": "^7.0.0-bridge.0",
     "node-sass": "^4.9.0",
     "sass-loader": "^7.0.1",
     "ts-jest": "^23.0.0",
diff --git a/src/App.vue b/src/App.vue
index 430206f..6228a04 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,29 +1,16 @@
 <template>
-  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view/>
+  <div id="app" ref="app">
+
+    <router-view></router-view>
+
   </div>
 </template>
 
+<script lang="ts">
+import Vue from "vue";
+
+export default Vue.extend({});
+</script>
+
 <style lang="scss">
-#app {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-#nav {
-  padding: 30px;
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
-}
 </style>
diff --git a/src/assets/bg-img.jpg b/src/assets/bg-img.jpg
new file mode 100644
index 0000000..de47a63
Binary files /dev/null and b/src/assets/bg-img.jpg differ
diff --git a/src/assets/data.js b/src/assets/data.js
new file mode 100644
index 0000000..0cebc88
--- /dev/null
+++ b/src/assets/data.js
@@ -0,0 +1,80 @@
+var infos = [
+  {
+    name: "工序",
+    categories: [
+      {
+        proccessing: "开料",
+        orders: [
+          {
+            orderNo: "开料订单1",
+            bancai: [
+              { id: "开料订单板材A123", completed: true },
+              { id: "开料订单板材A456", completed: false },
+              { id: "开料订单板材A789", completed: true },
+              { id: "开料订单板材A1010", completed: false }
+            ]
+          },
+          {
+            orderNo: "开料订单2",
+            bancai: [
+              { id: "开料订单板材B123", completed: false },
+              { id: "开料订单板材B456", completed: false },
+              { id: "开料订单板材B789", completed: false },
+              { id: "开料订单板材B1010", completed: false }
+            ]
+          },
+          {
+            orderNo: "开料订单3",
+            bancai: [
+              { id: "开料订单板材C123", completed: false },
+              { id: "开料订单板材C456", completed: false },
+              { id: "开料订单板材C789", completed: false },
+              { id: "开料订单板材C1010", completed: false }
+            ]
+          }
+        ]
+      },
+      {
+        proccessing: "封边",
+        orders: [
+          {
+            orderNo: "封边订单1",
+            bancai: [
+              { id: "A123", completed: false },
+              { id: "A456", completed: false },
+              { id: "A789", completed: false },
+              { id: "A1010", completed: false }
+            ]
+          },
+          {
+            orderNo: "封边订单2",
+            bancai: []
+          },
+          {
+            orderNo: "封边订单3",
+            bancai: [
+              { id: "C123" },
+              { id: "C456" },
+              { id: "C789" },
+              { id: "C1010" }
+            ]
+          }
+        ]
+      },
+      {
+        proccessing: "侧孔",
+        orders: []
+      },
+      {
+        proccessing: "五面钻",
+        orders: []
+      },
+      {
+        proccessing: "组件加工",
+        orders: []
+      }
+    ]
+  }
+];
+
+export default infos;
diff --git a/src/components/Bancai.vue b/src/components/Bancai.vue
new file mode 100644
index 0000000..f4a5641
--- /dev/null
+++ b/src/components/Bancai.vue
@@ -0,0 +1,127 @@
+<template>
+  <div class='bancai'>
+
+    <van-cell-group v-if="filtered.length!=0">
+
+      <van-cell title="板材加工">
+        <van-button size="medium" type="primary" @click="allGoProccessing">全部加工</van-button>
+      </van-cell>
+    </van-cell-group>
+    <van-cell-group v-else>
+
+      <van-cell title="没有需要加工的板材">
+      </van-cell>
+    </van-cell-group>
+
+    <van-cell-group>
+
+      <van-cell v-for="bancai of filtered" :title='bancai.id'>
+        <van-button size="small" @click="show">查看</van-button>
+        <van-button size="small" type="primary" @click="goProccessing(bancai)">加工</van-button>
+      </van-cell>
+    </van-cell-group>
+    <van-dialog v-model="showDialog" :show-cancel-button='isCancelButton' :show-confirm-button='isConfirmButton' :before-close="beforeClose">
+      <van-cell-group>
+
+        <van-cell title="同意加工全部板材">
+          <van-checkbox v-model="doubleChecked"></van-checkbox>
+        </van-cell>
+      </van-cell-group>
+
+    </van-dialog>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import Data from "../assets/data.js";
+import { ImagePreview } from "vant";
+import { Dialog } from "vant";
+
+export default Vue.extend({
+  props: ["orders"],
+  data() {
+    return {
+      allBancai: [],
+      value: null,
+      selectAllBancai: false,
+      showDialog: false,
+      doubleChecked: false,
+      isConfirmButton: false,
+      isCancelButton: false
+    };
+  },
+  computed: {
+    filtered: function() {
+      if (this.value == null) {
+        return this.orders.bancai.filter(each => each.completed == false);
+      }
+      return this.orders.bancai.filter(
+        bancai =>
+          bancai.id.indexOf(this.value.trim()) != -1 &&
+          bancai.completed == false
+      );
+    }
+  },
+  watch: {
+    doubleChecked: function() {
+      this.isConfirmButton = this.doubleChecked;
+      this.isCancelButton = this.doubleChecked;
+    },
+    selectAllBancai: function(checkedOrUncheck) {
+      this.filtered.forEach(each => (each.completed = checkedOrUncheck));
+    }
+  },
+  methods: {
+    show: function() {
+      ImagePreview([
+        "http://podularity.com/wp-content/plugins/digital-and-analog-clock-widget/images/cats/small_cat.jpg",
+        "https://tse3.mm.bing.net/th?id=OIP.5dBxMtn5eChfbWxkEdve2gHaE8&pid=Api"
+      ]);
+    },
+    onClickLeft: function() {
+      this.$router.push({ path: "/" + this.$route.params.id });
+    },
+    goProccessing: function(bancai) {
+      Dialog.confirm({
+        title: "提示",
+        message: "确认加工吗?"
+      })
+        .then(() => {
+          bancai.completed = true;
+        })
+        .catch(() => {
+          console.log("板材:" + bancai.completed);
+        });
+    },
+    allGoProccessing: function() {
+      this.showDialog = true;
+      this.doubleChecked = false;
+    },
+    beforeClose: function(action, done) {
+      if (action == "confirm") {
+        this.filtered.filter(each => (each.completed = true));
+
+        setTimeout(done, 0);
+      } else {
+        done();
+      }
+    }
+  }
+});
+</script>
+
+<style scoped lang="scss">
+</style>
+/*
+Dialog.confirm({
+        title: "提示",
+        message: "确定要全部加工【" + this.orders.orderNo + "】吗?"
+      })
+        .then(() => {
+          this.filtered.filter(each => (each.completed = true));
+        })
+        .catch(() => {
+          console.log("全部加工（取消）");
+        });
+        */
\ No newline at end of file
diff --git a/src/components/Gongxu.vue b/src/components/Gongxu.vue
new file mode 100644
index 0000000..21445e7
--- /dev/null
+++ b/src/components/Gongxu.vue
@@ -0,0 +1,34 @@
+<template>
+  <div id="app">
+    <van-nav-bar title="工序" />
+
+    <van-cell-group>
+      <van-cell v-for="content of contents " 
+      :title="content.proccessing "is-link clickable  
+      :to="'工序/'+content.proccessing "/>
+
+    </van-cell-group>
+  
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import Data from "../assets/data.js";
+
+export default Vue.extend({
+  data: function() {
+    return {
+      contents: []
+    };
+  },
+  mounted: function() {  
+    for (var gongxu of Data) {
+      this.contents = gongxu.categories;
+    }
+  }
+});
+</script>
+
+<style lang="scss">
+</style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 70854cc..56dd166 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,60 +1,15 @@
 <template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest" target="_blank" rel="noopener">unit-jest</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
+  <div>
+    hello.vue
+
   </div>
+
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-
-@Component
-export default class HelloWorld extends Vue {
-  @Prop() private msg!: string;
-}
+import Vue from "vue";
+export default Vue.extend({});
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
 </style>
diff --git a/src/components/Login.vue b/src/components/Login.vue
new file mode 100644
index 0000000..2d14fdb
--- /dev/null
+++ b/src/components/Login.vue
@@ -0,0 +1,50 @@
+<template>
+    <div class='login'>
+
+        <div class='logo'>
+            <div class='gap'></div>
+            <img src="../assets/logo.png" alt="">
+        </div>
+        <van-row>
+            <van-col span='20' offset='2'>
+                <van-cell-group>
+                    <van-field v-model="username" required clearable label="用户名" icon="question" placeholder="请输入用户名" @click-icon="$toast('question')" />
+
+                    <van-field v-model="password" type="password" label="密码" placeholder="请输入密码" required />
+                    <van-button size="large" type="primary" @click="logIn">登入</van-button>
+                </van-cell-group>
+
+            </van-col>
+        </van-row>
+    </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+export default Vue.extend({
+  data: function() {
+    return {
+      username: "",
+      password: ""
+    };
+  },
+  methods: {
+    logIn: function() {
+      this.$router.push({name:'工序' });
+    }
+  }
+});
+</script>
+<style lang="scss" scoped>
+.logo {
+  .gap {
+    height: 50px;
+  }
+  height: 300px;
+  img {
+    display: block;
+    margin: auto;
+  }
+}
+</style>
+
diff --git a/src/components/Orders.vue b/src/components/Orders.vue
new file mode 100644
index 0000000..18778e0
--- /dev/null
+++ b/src/components/Orders.vue
@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <van-nav-bar left-text="工序" left-arrow @click-left="onClickLeft " :title=" this.$route.params.id" />
+
+    <van-search placeholder="请输入搜索订单号 " v-model="query " />
+
+    <van-collapse v-model="activeNames" accordion>
+      <van-collapse-item v-for="order in filtered " :title="order.orderNo ">
+        <bancai :orders='order'></bancai>
+      </van-collapse-item>
+
+    </van-collapse>
+  </div>
+
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import Data from "../assets/data.js";
+import Bancai from "./Bancai.vue";
+export default Vue.extend({
+  components: { Bancai },
+  props: ["infos"],
+  data() {
+    return {
+      orders: [],
+      query: null,
+      activeNames: ["0"]
+    };
+  },
+  computed: {
+    filtered: function() {
+      if (this.value == null) {
+        return this.orders;
+      }
+      return this.orders.filter(
+        order => order.orderNo.indexOf(this.value.trim()) != -1
+      );
+    }
+  },
+  methods: {
+    onClickLeft: function() {
+      this.$router.push({ path: "/工序" });
+    }
+  },
+  mounted: function() {
+    for (var gongxu of Data) {
+      for (var each of gongxu.categories) {
+        if (each.proccessing == this.$route.params.id) {
+          this.orders = each.orders;
+        }
+      }
+    }
+  }
+});
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/src/main.ts b/src/main.ts
index 1f5f073..f834b34 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,7 +1,10 @@
 import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
+import Vant from "vant";
+import "vant/lib/vant-css/index.css";
 
+Vue.use(Vant);
 Vue.config.productionTip = false;
 
 new Vue({
diff --git a/src/router.ts b/src/router.ts
index 19d3ccd..2103183 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -1,6 +1,8 @@
 import Vue from "vue";
 import Router from "vue-router";
-import Home from "./views/Home.vue";
+import Gongxu from "./components/Gongxu.vue";
+import Orders from "./components/Orders.vue";
+import Login from "./components/Login.vue";
 
 Vue.use(Router);
 
@@ -8,17 +10,22 @@ export default new Router({
   routes: [
     {
       path: "/",
-      name: "home",
-      component: Home
+      redirect: "/login"
     },
     {
-      path: "/about",
-      name: "about",
-      // route level code-splitting
-      // this generates a separate chunk (about.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () =>
-        import(/* webpackChunkName: "about" */ "./views/About.vue")
-    }
+      path: "/login",
+      component: Login
+    },
+    {
+      path: "/工序",
+      component: Gongxu,
+      name:'工序',
+   
+      
+    }, {
+          path: '/工序/:id',
+          component: Orders
+        }
+    
   ]
 });