diff --git a/traffic-back/src/main/java/com/springboot/traffic/controller/trafficController.java b/traffic-back/src/main/java/com/springboot/traffic/controller/trafficController.java
index 7ec44ee..d7edfb1 100644
--- a/traffic-back/src/main/java/com/springboot/traffic/controller/trafficController.java
+++ b/traffic-back/src/main/java/com/springboot/traffic/controller/trafficController.java
@@ -18,10 +18,24 @@ public class trafficController {
     @Autowired
     trafficService trafficService;
 
-    //登录验证
+    /**用户注册**/
+    @RequestMapping(value = "/register", method = {RequestMethod.POST,RequestMethod.GET})
+    @ResponseBody
+    public Map<String,Object> register(@RequestBody Map<String,Object> param) {
+        Map<String,Object> result = null;
+        try {
+            result = trafficService.register(param);
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+        return result;
+    }
+
+
+    /**登录验证*/
     @RequestMapping(value = "/login", method = {RequestMethod.POST, RequestMethod.GET})
     @ResponseBody
-    public Map<String,Object> hello(@RequestBody Map<String,Object> param) {
+    public Map<String,Object> login(@RequestBody Map<String,Object> param) {
         Map<String,Object> result = new HashMap<>();
         result = trafficService.getUser();
         return result;
diff --git a/traffic-back/src/main/java/com/springboot/traffic/dao/mapping/trafficMapper.xml b/traffic-back/src/main/java/com/springboot/traffic/dao/mapping/trafficMapper.xml
index 25955c5..cfb5ec0 100644
--- a/traffic-back/src/main/java/com/springboot/traffic/dao/mapping/trafficMapper.xml
+++ b/traffic-back/src/main/java/com/springboot/traffic/dao/mapping/trafficMapper.xml
@@ -1,6 +1,16 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="com.springboot.traffic.dao.trafficMapper">
+    <insert id="userRegister" parameterType="map">
+        insert into traffic_user(user_id,user_name,user_password,user_phone)
+        values
+        (
+        uuid(),
+        #{formName.name},
+        #{formName.pass},
+        #{formName.phone}
+        )
+    </insert>
     <select id="getUser" parameterType="map" resultType="map">
         select * from traffic_user
     </select>
diff --git a/traffic-back/src/main/java/com/springboot/traffic/dao/trafficMapper.java b/traffic-back/src/main/java/com/springboot/traffic/dao/trafficMapper.java
index 4e6af6d..d33a1bc 100644
--- a/traffic-back/src/main/java/com/springboot/traffic/dao/trafficMapper.java
+++ b/traffic-back/src/main/java/com/springboot/traffic/dao/trafficMapper.java
@@ -7,5 +7,12 @@ import java.util.Map;
 
 @Mapper
 public interface trafficMapper {
+
+    /**用户注册
+     * @param param**/
+    int userRegister(Map<String, Object> param);
+
     List<Map<String, Object>> getUser();
+
+
 }
diff --git a/traffic-back/src/main/java/com/springboot/traffic/service/impl/trafficServiceImpl.java b/traffic-back/src/main/java/com/springboot/traffic/service/impl/trafficServiceImpl.java
index b31ea93..cdb1789 100644
--- a/traffic-back/src/main/java/com/springboot/traffic/service/impl/trafficServiceImpl.java
+++ b/traffic-back/src/main/java/com/springboot/traffic/service/impl/trafficServiceImpl.java
@@ -14,6 +14,16 @@ public class trafficServiceImpl implements trafficService {
     @Autowired
     trafficMapper trafficMapper;
 
+    @Override
+    public Map<String, Object> register(Map<String, Object> param) {
+        Map<String,Object> result = new HashMap<>();
+        int res = 0;
+        res = trafficMapper.userRegister(param);
+        result.put("success",true);
+        result.put("data",res);
+        return result;
+    }
+
     @Override
     public Map<String, Object> getUser() {
         Map<String,Object> result = new HashMap<>();
diff --git a/traffic-back/src/main/java/com/springboot/traffic/service/trafficService.java b/traffic-back/src/main/java/com/springboot/traffic/service/trafficService.java
index cd84b65..47590e1 100644
--- a/traffic-back/src/main/java/com/springboot/traffic/service/trafficService.java
+++ b/traffic-back/src/main/java/com/springboot/traffic/service/trafficService.java
@@ -3,9 +3,14 @@ package com.springboot.traffic.service;
 import java.util.Map;
 
 public interface trafficService {
+
+    Map<String, Object> register(Map<String, Object> param);
+
     /**
      *
      * @return
      */
     Map<String, Object> getUser();
+
+
 }
diff --git a/traffic-front/src/components/DiscardQuery.vue b/traffic-front/src/components/DiscardQuery.vue
index 92e5d72..e41b514 100644
--- a/traffic-front/src/components/DiscardQuery.vue
+++ b/traffic-front/src/components/DiscardQuery.vue
@@ -1,9 +1,150 @@
 <template>
-  <span>这是机动车报废查询页面</span>
+  <div class="illegal">
+    <h2>车辆报废信息查询</h2>
+    <el-form :model="illegalForm" :rules="illegalRules" ref="illegalForm" label-width="100px">
+      <el-form-item label="号牌种类" prop="species">
+        <el-select v-model="speciesValue" placeholder="请选择" class="inbox">
+          <el-option
+            v-for="item in speciesOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="号牌号码" prop="number">
+        <el-select v-model="numberValue" placeholder="" class="queryBox">
+          <el-option
+            v-for="item in numberOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+        <el-input type="text" v-model="illegalForm.number" class="numberBox"></el-input>
+      </el-form-item>
+      <el-form-item label="发动机后六位" prop="lastsix">
+        <el-input type="text" v-model="illegalForm.lastsix" class="inbox"></el-input>
+      </el-form-item>
+      <el-form-item label="验证码" prop="code">
+        <el-input type="text" v-model="illegalForm.code" class="inbox"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm('')">查询</el-button>
+        <el-button @click="resetForm('')">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 
 <script>
+  export default {
+    data() {
+      let plateValidate = (rule,value,callback) =>{
+        if (value === '') {
+          callback(new Error('请输入号牌号码'));
+        }
+      };
+      let numberValidate = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请输入发动机号'));
+        }
+      };
+      let checkValidate = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请输入验证码'));
+        }
+      };
+
+      return {
+        illegalForm: {
+          species:'',
+          number:'',
+          lastsix:'',
+          code:''
+        },
+        speciesOptions: [{
+          value: '选项1',
+          label: '大型汽车'
+        }, {
+          value: '选项2',
+          label: '小型汽车'
+        }, {
+          value: '选项3',
+          label: '教练汽车'
+        }, {
+          value: '选项4',
+          label: '教练摩托车'
+        }, {
+          value: '选项5',
+          label: '大型新能源汽车'
+        },{
+          value: '选项6',
+          label: '小型新能源汽车'
+        }],
+        numberOptions: [{
+          value: '选项1',
+          label: '京'
+        }, {
+          value: '选项2',
+          label: '津'
+        }, {
+          value: '选项3',
+          label: '沪'
+        }, {
+          value: '选项4',
+          label: '渝'
+        }, {
+          value: '选项5',
+          label: '鲁'
+        }],
+        speciesValue: '',
+        numberValue: '',
+        illegalRules: {
+          number: [
+            { validator: plateValidate, trigger: 'blur' }
+          ],
+          lastsix: [
+            { validator: numberValidate, trigger: 'blur' }
+          ],
+          code: [
+            { validator: checkValidate, trigger: 'blur' }
+          ]
+        }
+      }
+    },
+
+    methods: {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            alert('submit!');
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+      }
+    }
+  }
 </script>
 
 <style>
+  .el-form {
+    width:50rem;
+  }
+  .inbox {
+    width: 30rem;
+  }
+  .queryBox {
+    width: 5rem;
+  }
+  .numberBox {
+    width: 24.7rem;
+  }
 </style>
+
diff --git a/traffic-front/src/components/Guide.vue b/traffic-front/src/components/Guide.vue
index 213d37e..19e5937 100644
--- a/traffic-front/src/components/Guide.vue
+++ b/traffic-front/src/components/Guide.vue
@@ -1,9 +1,79 @@
 <template>
-  <span>这是办事指南页面</span>
+  <div class="guide">
+    <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
+  </div>
 </template>
 
 <script>
+  export default {
+    data() {
+      return {
+        data: [{
+          label: '1.总体介绍'
+        }, {
+          label: '2.用户注册',
+          children: [{
+            label: '二级 2-1'
+          }, {
+            label: '二级 2-2'
+          }]
+        }, {
+          label: '3.网上业务办理',
+          children: [{
+            label: '二级 3-1'
+          }, {
+            label: '二级 3-2',
+          }]
+        }, {
+          label: '4.公告公布',
+          children: [{
+            label: '二级 2-1'
+          }, {
+            label: '二级 2-2'
+          }]
+        }, {
+          label: '5.服务导航',
+          children: [{
+            label: '二级 2-1'
+          }, {
+            label: '二级 2-2'
+          }]
+        }, {
+          label: '6.信息查询',
+          children: [{
+            label: '二级 2-1'
+          }, {
+            label: '二级 2-2'
+          }]
+        }, {
+          label: '7.常见问题',
+          children: [{
+            label: '二级 2-1'
+          }, {
+            label: '二级 2-2'
+          }]
+        }, {
+          label: '8.政策法规',
+          children: [{
+            label: '二级 2-1'
+          }]
+        }],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        }
+      };
+    },
+    methods: {
+      handleNodeClick(data) {
+        console.log(data);
+      }
+    }
+  };
 </script>
 
 <style>
+  .el-tree {
+    width: 10rem;
+  }
 </style>
diff --git a/traffic-front/src/components/Homepage.vue b/traffic-front/src/components/Homepage.vue
index 5c285a8..911a8bd 100644
--- a/traffic-front/src/components/Homepage.vue
+++ b/traffic-front/src/components/Homepage.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="gridpanel">
+  <div class="gridPanel">
     <div class="change">
-        <el-carousel :interval="10000000000000" type="card"  width="500px">
+        <el-carousel :interval="2000" type="card">
           <el-carousel-item>
             <img src="../assets/img/lunbo0.jpg"/>
           </el-carousel-item>
@@ -22,27 +22,27 @@
           </el-carousel-item>
         </el-carousel>
     </div>
-    <div class="gridtitle">
-      <div class="announce">信息公告<br>————————————————————</div>
-      <div class="information">交通资讯<br>————————————————————</div>
-      <div class="information">警示教育<br>————————————————————</div>
+    <div class="gridTitle">
+      <div class="announce">信息公告<br>—————————————————————</div>
+      <div class="information">交通资讯<br>—————————————————————</div>
+      <div class="information">警示教育<br>—————————————————————</div>
     </div>
-    <el-row :gutter="120" class="gridcontent">
-      <el-col :span="8">
+    <el-row :gutter="60" class="gridContent">
+      <el-col :span="8" class="grid-first">
         <div class="grid-content">
           <el-link href="">机动车号牌旧牌未收回作废公告</el-link><br/>
           <el-link href="">机动车登记证书旧证书未收回作废公告</el-link><br/>
           <el-link href="">机动车号牌未收回作废公告</el-link><br/>
         </div>
       </el-col>
-      <el-col :span="8">
+      <el-col :span="8" class="grid-second">
         <div class="grid-content">
           <el-link href="">5月9日至5月15日出行提示</el-link><br/>
           <el-link href="">关于对本市部分检测场因降雨暂停验车的通知</el-link><br/>
           <el-link href="">疫情期间未按时验车会被处罚吗？</el-link><br/>
         </div>
       </el-col>
-      <el-col :span="8">
+      <el-col :span="8" class="grid-other">
         <div class="grid-content">
           <el-link href="">我怎么多了几起违法记录？不是我开的呀！</el-link><br/>
           <el-link href="">12万快递小哥同上“交通安全课”</el-link><br/>
@@ -69,28 +69,48 @@
 </script>
 
 <style>
+  .change {
+    margin-top: 4rem;
+  }
+  .el-carousel {
+    width: 90rem;
+    margin: 0 auto;
+  }
   .el-carousel__item img{
     width: 100% !important;
   }
-  .gridtitle {
-    width: 100%;
-    height:2.5rem;
+  .gridTitle {
+    width: 90rem;
+    height: 2.5rem;
+    margin: 0 auto;
+  }
+  .announce {
+    margin-top: 1rem;
+    width: 20rem;
+    float: left;
+  }
+  .information {
+    margin-top: 1rem;
+    width: 20rem;
+    float: left;
+    margin-left: 13.2rem;
+  }
+  .gridContent {
+    width: 90rem;
+    margin: 0 auto !important;
   }
   .grid-content {
     background: #ffffff;
     border-radius: 4px;
-    height: 150px;
+    height: 20rem;
   }
-  .announce {
-    width: 21.875rem;
-    float: left;
+  .grid-first {
+    padding: 0 5rem 0 0 !important;
   }
-  .information {
-    width: 21.875rem;
-    float: left;
-    margin-left: 7.5rem;
+  grid-second {
+    padding: 0 2.5rem !important;
   }
-  .gridcontent {
-    margin-top: 0.5rem;
+  .grid-other {
+    padding:0 0 0 5rem !important;
   }
 </style>
diff --git a/traffic-front/src/components/IllegalQuery.vue b/traffic-front/src/components/IllegalQuery.vue
index 9f4918b..d4671ae 100644
--- a/traffic-front/src/components/IllegalQuery.vue
+++ b/traffic-front/src/components/IllegalQuery.vue
@@ -1,9 +1,149 @@
 <template>
-  <span>这是违章查询页面</span>
+  <div class="illegal">
+    <h2>机动车违章信息查询</h2>
+    <el-form :model="illegalForm" :rules="illegalRules" ref="illegalForm" label-width="100px">
+      <el-form-item label="号牌种类" prop="species">
+        <el-select v-model="speciesValue" placeholder="请选择" class="inbox">
+          <el-option
+            v-for="item in speciesOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="号牌号码" prop="number">
+        <el-select v-model="numberValue" placeholder="" class="queryBox">
+          <el-option
+            v-for="item in numberOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+        <el-input type="text" v-model="illegalForm.number" class="numberBox"></el-input>
+      </el-form-item>
+      <el-form-item label="发动机后六位" prop="lastsix">
+        <el-input type="text" v-model="illegalForm.lastsix" class="inbox"></el-input>
+      </el-form-item>
+      <el-form-item label="验证码" prop="code">
+        <el-input type="text" v-model="illegalForm.code" class="inbox"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm('')">查询</el-button>
+        <el-button @click="resetForm('')">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 
 <script>
+  export default {
+    data() {
+      let plateValidate = (rule,value,callback) =>{
+        if (value === '') {
+          callback(new Error('请输入号牌号码'));
+        }
+      };
+      let numberValidate = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请输入发动机号'));
+        }
+      };
+      let checkValidate = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请输入验证码'));
+        }
+      };
+
+      return {
+        illegalForm: {
+          species:'',
+          number:'',
+          lastsix:'',
+          code:''
+        },
+        speciesOptions: [{
+          value: '选项1',
+          label: '大型汽车'
+        }, {
+          value: '选项2',
+          label: '小型汽车'
+        }, {
+          value: '选项3',
+          label: '教练汽车'
+        }, {
+          value: '选项4',
+          label: '教练摩托车'
+        }, {
+          value: '选项5',
+          label: '大型新能源汽车'
+        },{
+          value: '选项6',
+          label: '小型新能源汽车'
+        }],
+        numberOptions: [{
+          value: '选项1',
+          label: '京'
+        }, {
+          value: '选项2',
+          label: '津'
+        }, {
+          value: '选项3',
+          label: '沪'
+        }, {
+          value: '选项4',
+          label: '渝'
+        }, {
+          value: '选项5',
+          label: '鲁'
+        }],
+        speciesValue: '',
+        numberValue: '',
+        illegalRules: {
+          number: [
+            { validator: plateValidate, trigger: 'blur' }
+          ],
+          lastsix: [
+            { validator: numberValidate, trigger: 'blur' }
+          ],
+          code: [
+            { validator: checkValidate, trigger: 'blur' }
+          ]
+        }
+      }
+    },
+
+    methods: {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            alert('submit!');
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+      }
+    }
+  }
 </script>
 
 <style>
+  .el-form {
+    width:50rem;
+  }
+  .inbox {
+    width: 30rem;
+  }
+  .queryBox {
+    width: 5rem;
+  }
+  .numberBox {
+    width: 24.7rem;
+  }
 </style>
diff --git a/traffic-front/src/components/NewPlate.vue b/traffic-front/src/components/NewPlate.vue
index 96f91c5..afe64ae 100644
--- a/traffic-front/src/components/NewPlate.vue
+++ b/traffic-front/src/components/NewPlate.vue
@@ -1,9 +1,164 @@
 <template>
-  <span>这是新车预选号牌页面</span>
+  <div class="plate">
+    <h2>新车登记预选号牌</h2>
+    <el-form :model="plateForm" :rules="plateRules" ref="plateForm" label-width="100px">
+      <el-form-item label="选择城市">
+        <el-cascader
+          v-model="value"
+          :options="citis"
+          :props="{ expandTrigger: 'hover' }"
+          @change="handleChange">
+        </el-cascader>
+      </el-form-item>
+      <el-form-item label="车辆品牌" prop="logo">
+        <el-input type="text" v-model="plateForm.logo"></el-input>
+      </el-form-item>
+      <el-form-item label="合格编号" prop="number">
+        <el-input type="text" v-model="plateForm.number"></el-input>
+      </el-form-item>
+      <el-form-item label="车辆型号" prop="size">
+        <el-input type="text" v-model="plateForm.size"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm('registerForm')">确认</el-button>
+        <el-button @click="resetForm('registerForm')">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 
 <script>
+  export default {
+    data() {
+
+      let logoValidate = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请输入车辆品牌'));
+        }
+      };
+      let numberValidate = (rule,value,callback) =>{
+        if (value === '') {
+          callback(new Error('请输入合格证编号'));
+        }
+      };
+      let sizeValidate = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请输入车辆型号'));
+        }
+      };
+
+      return {
+        value: [],
+        citis: [{
+          value: 'beijing',
+          label: '北京',
+        }, {
+          value: 'tianjin',
+          label: '天津',
+        }, {
+          value: 'shanghai',
+          label: '上海',
+        },{
+        value: 'chongqing',
+          label: '重庆',
+      },{
+          value: 'shandong',
+          label: '山东',
+          children: [{
+            value: 'jinan',
+            label: '济南市'
+          }, {
+            value: 'qingdao',
+            label: '青岛市'
+          }, {
+            value: 'rizhao',
+            label: '日照市'
+          }, {
+            value: 'zibo',
+            label: '淄博市'
+          }, {
+            value: 'zaozhuang',
+            label: '枣庄市'
+          }, {
+            value: 'dongying',
+            label: '东营市'
+          }, {
+            value: 'yantai',
+            label: '烟台市'
+          }, {
+            value: 'weifang',
+            label: '潍坊市'
+          }, {
+            value: 'jining',
+            label: '济宁市'
+          }, {
+            value: 'taian',
+            label: '泰安市'
+          }, {
+            value: 'weihai',
+            label: '威海市'
+          }, {
+            value: 'linyi',
+            label: '临沂市'
+          }, {
+            value: 'dezhou',
+            label: '德州市'
+          }, {
+            value: 'liaocheng',
+            label: '聊城市'
+          }, {
+            value: 'binzhou',
+            label: '滨州市'
+          }, {
+            value: 'heze',
+            label: '菏泽市'
+          }, ]
+        }],
+
+        plateForm: {
+          logo: '',
+          number: '',
+          size:''
+        },
+
+        plateRules: {
+          logo: [
+            { validator: logoValidate, trigger: 'blur' }
+          ],
+          number: [
+            { validator: numberValidate, trigger: 'blur' }
+          ],
+          size: [
+            { validator: sizeValidate, trigger: 'blur' }
+          ]
+        }
+      };
+    },
+    methods: {
+      handleChange(value) {
+        console.log(value);
+      },
+
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            alert('submit!');
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+      }
+    }
+  }
 </script>
 
 <style>
+  .el-input {
+    width: 30rem;
+  }
 </style>
diff --git a/traffic-front/src/components/OldPlate.vue b/traffic-front/src/components/OldPlate.vue
index 2722682..07ff398 100644
--- a/traffic-front/src/components/OldPlate.vue
+++ b/traffic-front/src/components/OldPlate.vue
@@ -1,9 +1,164 @@
 <template>
-  <span>这是二手车预选号牌页面</span>
+  <div class="plate">
+    <h2>二手车过户预选号牌</h2>
+    <el-form :model="plateForm" :rules="plateRules" ref="plateForm" label-width="100px">
+      <el-form-item label="选择城市">
+        <el-cascader
+          v-model="value"
+          :options="citis"
+          :props="{ expandTrigger: 'hover' }"
+          @change="handleChange">
+        </el-cascader>
+      </el-form-item>
+      <el-form-item label="车辆品牌" prop="logo">
+        <el-input type="text" v-model="plateForm.logo"></el-input>
+      </el-form-item>
+      <el-form-item label="合格编号" prop="number">
+        <el-input type="text" v-model="plateForm.number"></el-input>
+      </el-form-item>
+      <el-form-item label="车辆型号" prop="size">
+        <el-input type="text" v-model="plateForm.size"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm('registerForm')">确认</el-button>
+        <el-button @click="resetForm('registerForm')">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 
 <script>
+  export default {
+    data() {
+
+      let logoValidate = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请输入车辆品牌'));
+        }
+      };
+      let numberValidate = (rule,value,callback) =>{
+        if (value === '') {
+          callback(new Error('请输入合格证编号'));
+        }
+      };
+      let sizeValidate = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请输入车辆型号'));
+        }
+      };
+
+      return {
+        value: [],
+        citis: [{
+          value: 'beijing',
+          label: '北京',
+        }, {
+          value: 'tianjin',
+          label: '天津',
+        }, {
+          value: 'shanghai',
+          label: '上海',
+        },{
+          value: 'chongqing',
+          label: '重庆',
+        },{
+          value: 'shandong',
+          label: '山东',
+          children: [{
+            value: 'jinan',
+            label: '济南市'
+          }, {
+            value: 'qingdao',
+            label: '青岛市'
+          }, {
+            value: 'rizhao',
+            label: '日照市'
+          }, {
+            value: 'zibo',
+            label: '淄博市'
+          }, {
+            value: 'zaozhuang',
+            label: '枣庄市'
+          }, {
+            value: 'dongying',
+            label: '东营市'
+          }, {
+            value: 'yantai',
+            label: '烟台市'
+          }, {
+            value: 'weifang',
+            label: '潍坊市'
+          }, {
+            value: 'jining',
+            label: '济宁市'
+          }, {
+            value: 'taian',
+            label: '泰安市'
+          }, {
+            value: 'weihai',
+            label: '威海市'
+          }, {
+            value: 'linyi',
+            label: '临沂市'
+          }, {
+            value: 'dezhou',
+            label: '德州市'
+          }, {
+            value: 'liaocheng',
+            label: '聊城市'
+          }, {
+            value: 'binzhou',
+            label: '滨州市'
+          }, {
+            value: 'heze',
+            label: '菏泽市'
+          }, ]
+        }],
+
+        plateForm: {
+          logo: '',
+          number: '',
+          size:''
+        },
+
+        plateRules: {
+          logo: [
+            { validator: logoValidate, trigger: 'blur' }
+          ],
+          number: [
+            { validator: numberValidate, trigger: 'blur' }
+          ],
+          size: [
+            { validator: sizeValidate, trigger: 'blur' }
+          ]
+        }
+      };
+    },
+    methods: {
+      handleChange(value) {
+        console.log(value);
+      },
+
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            alert('submit!');
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+      }
+    }
+  }
 </script>
 
 <style>
+  .el-input {
+    width: 30rem;
+  }
 </style>
diff --git a/traffic-front/src/components/index.vue b/traffic-front/src/components/index.vue
index 3bb77fd..2f7ee41 100644
--- a/traffic-front/src/components/index.vue
+++ b/traffic-front/src/components/index.vue
@@ -20,7 +20,7 @@
               <el-input type="text" v-model="registerForm.phone"></el-input>
             </el-form-item>
             <el-form-item>
-              <el-button type="primary" @click="submitForm('registerForm')">注册</el-button>
+              <el-button type="primary" @click="submitRegister(registerForm)">注册</el-button>
               <el-button @click="resetForm('registerForm')">重置</el-button>
             </el-form-item>
           </el-form>
@@ -66,7 +66,7 @@
     </el-header>
 
     <el-main>
-      
+
     </el-main>
 
     <el-footer>
@@ -169,15 +169,12 @@ export default {
       this.dialogLogonVisible = true;
     },
 
-    submitForm(formName) {
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          alert('submit!');
-        } else {
-          console.log('error submit!!');
-          return false;
-        }
-      });
+    submitRegister(formName) {
+      this.$ajax.post("/traffic/register",{formName},r=>{
+        this.dialogRegisterVisible = false;
+      },r=>{
+
+      })
     },
 
     resetForm(formName) {
@@ -200,7 +197,7 @@ export default {
   }
 
   .registerButton{
-    margin-left:72rem
+    margin-left:108rem;
   }
 
   .menu{