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 76e81fa..63da9db 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
@@ -45,4 +45,67 @@ public class trafficController {
         return result;
     }
 
+    /**获取首页内容*/
+    @RequestMapping(value = "/getAllContent", method = {RequestMethod.POST,RequestMethod.GET})
+    @ResponseBody
+    public Map<String,Object> getAllContent(@RequestBody Map<String,Object> param) {
+        Map<String,Object> result = trafficService.getAllContent(param);
+        return result;
+    }
+
+    /**查询违章处理*/
+    @RequestMapping(value = "/illegalTreatment", method = {RequestMethod.POST,RequestMethod.GET})
+    @ResponseBody
+    public Map<String,Object> illegalTreatment(@RequestBody Map<String,Object> param) {
+        Map<String,Object> result = trafficService.illegalTreatment(param);
+        return result;
+    }
+
+    /**处理违章处理*/
+    @RequestMapping(value = "/handle", method = {RequestMethod.POST,RequestMethod.GET})
+    @ResponseBody
+    public Map<String,Object> handle(@RequestBody Map<String,Object> param) {
+        Map<String,Object> result = trafficService.handle(param);
+        return result;
+    }
+
+    /**查询违章信息*/
+    @RequestMapping(value = "/getIllegalInfo", method = {RequestMethod.POST,RequestMethod.GET})
+    @ResponseBody
+    public Map<String,Object> getIllegalInfo(@RequestBody Map<String,Object> param) {
+        Map<String,Object> result = trafficService.getIllegalInfo(param);
+        return result;
+    }
+
+    /**新增车辆挂牌*/
+    @RequestMapping(value = "/insertPlateInfo", method = {RequestMethod.POST,RequestMethod.GET})
+    @ResponseBody
+    public Map<String,Object> insertPlateInfo(@RequestBody Map<String,Object> param) {
+        Map<String,Object> result = trafficService.insertPlateInfo(param);
+        return result;
+    }
+
+    /**查询车辆挂牌信息*/
+    @RequestMapping(value = "/selectPlateInfo", method = {RequestMethod.POST,RequestMethod.GET})
+    @ResponseBody
+    public Map<String,Object> selectPlateInfo(@RequestBody Map<String,Object> param) {
+        Map<String,Object> result = trafficService.selectPlateInfo(param);
+        return result;
+    }
+
+    /**查询留言*/
+    @RequestMapping(value = "/getLeaveMessage", method = {RequestMethod.POST,RequestMethod.GET})
+    @ResponseBody
+    public Map<String,Object> getLeaveMessage(@RequestBody Map<String,Object> param) {
+        Map<String,Object> result = trafficService.getLeaveMessage(param);
+        return result;
+    }
+
+    /**查询留言*/
+    @RequestMapping(value = "/insertLeaveMessage", method = {RequestMethod.POST,RequestMethod.GET})
+    @ResponseBody
+    public Map<String,Object> insertLeaveMessage(@RequestBody Map<String,Object> param) {
+        Map<String,Object> result = trafficService.insertLeaveMessage(param);
+        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 a57f4a6..6115d50 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
@@ -12,9 +12,128 @@
         #{formName.phone}
         )
     </insert>
+
     <!--用户登录-->
     <select id="getUser" parameterType="map" resultType="map">
-        select * from traffic_user where user_name = #{formName.name} and user_password = #{formName.pass}
+        select * from traffic_user where user_name = #{name} and user_password = #{pass}
     </select>
 
+    <select id="getSchoolNotice" parameterType="map" resultType="map">
+        SELECT
+        n.id,
+        title,
+        content,
+        user_id,
+        real_name,
+        create_time
+        FROM
+        traffic_notice	n left join traffic_user u on n.create_id = u.user_id
+        where type = '信息公告'
+        and status = "1"
+        <if test="id != null and id != ''">
+            and s.id = #{id}
+        </if>
+        <if test="type != null and type != ''">
+            and label = #{label}
+        </if>
+        ORDER BY create_time desc
+    </select>
+
+    <!--获取家长建议-->
+    <select id="getParentAdvice" parameterType="map" resultType="map">
+        SELECT
+        n.id,
+        title,
+        content,
+        user_id,
+        real_name,
+        create_time
+        FROM
+        traffic_notice	n left join traffic_user u on n.create_id = u.user_id
+        where type = '交通资讯'
+        and status = "1"
+        <if test="id != null and id != ''">
+            and s.id = #{id}
+        </if>
+        <if test="type != null and type != ''">
+            and label = #{label}
+        </if>
+        ORDER BY create_time desc
+    </select>
+
+    <!--获取学生想法-->
+    <select id="getStudentThinking" parameterType="map" resultType="map">
+        SELECT
+        n.id,
+        title,
+        content,
+        user_id,
+        real_name,
+        create_time
+        FROM
+        traffic_notice	n left join traffic_user u on n.create_id = u.user_id
+        where type = '警示教育'
+        and status = "1"
+        <if test="id != null and id != ''">
+            and s.id = #{id}
+        </if>
+        <if test="type != null and type != ''">
+            and label = #{label}
+        </if>
+        ORDER BY create_time desc
+    </select>
+    <select id="illegalTreatment" resultType="map" parameterType="map">
+        SELECT
+	    *
+        FROM
+        `traffic_illegal_info`
+        WHERE
+        number = #{number} and number_plate = #{numberPlate}
+        and engine_number = #{engine} and mobile = #{mobile}
+    </select>
+
+    <update id="handle" parameterType="map">
+        update traffic_illegal_info set status = '1' where id = #{id}
+    </update>
+
+    <select id="getIllegalInfo" resultType="map" parameterType="map">
+        SELECT
+        *
+        FROM
+        traffic_illegal_info
+        WHERE
+        plate_type = #{plateType} and number_plate = #{numberPlate}
+        and engine_number like CONCAT('%',#{engineNumber},'%')
+        and status = '0'
+    </select>
+
+    <select id="getScrapInfo" resultType="map" parameterType="map">
+        SELECT
+        *
+        FROM
+        traffic_scrap_info
+        WHERE
+        plate_type = #{plateType} and number_plate = #{numberPlate}
+        and engine_number like CONCAT('%',#{engineNumber},'%')
+    </select>
+
+    <insert id="insertPlateInfo" parameterType="map">
+        INSERT INTO traffic_plate_info ( id, create_id, create_time, plate_number, car_brand, qualified_no, car_size, car_type )
+        VALUES
+	    ( uuid(),#{createId},now(),#{plateNumber},#{carBrand},#{qualifiedNo},#{carSize},#{carType})
+    </insert>
+
+    <select id="selectPlateInfo" resultType="map" parameterType="map">
+        select * from traffic_plate_info left join traffic_user on create_id = user_id ORDER BY create_time desc
+    </select>
+
+    <select id="getLeaveMessage" resultType="map" parameterType="map">
+        SELECT * FROM `traffic_leave_message` left join traffic_user on create_id = user_id
+    </select>
+
+    <insert id="insertLeaveMessage" parameterType="map">
+        INSERT INTO traffic_leave_message ( id,content, create_id, create_time)
+        VALUES
+	    ( uuid(),#{content},#{createId},now())
+    </insert>
 </mapper>
\ No newline at end of file
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 e0be967..100584a 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
@@ -22,5 +22,34 @@ public interface trafficMapper {
      */
     List<Map<String, Object>> getUser(Map<String, Object> param);
 
+    /**
+     * 获取信息公告
+     */
+    List<Map<String,Object>> getSchoolNotice(Map<String,Object> param);
 
+    /**
+     * 获取交通资讯
+     */
+    List<Map<String,Object>> getParentAdvice(Map<String,Object> param);
+
+    /**
+     * 获取警示教育
+     */
+    List<Map<String,Object>> getStudentThinking(Map<String,Object> param);
+
+    List<Map<String, Object>> illegalTreatment(Map<String, Object> param);
+
+    int handle(Map<String, Object> param);
+
+    List<Map<String, Object>> getIllegalInfo(Map<String, Object> param);
+
+    List<Map<String, Object>> getScrapInfo(Map<String, Object> param);
+
+    int insertPlateInfo(Map<String, Object> param);
+
+    List<Map<String, Object>> selectPlateInfo(Map<String, Object> param);
+
+    List<Map<String, Object>> getLeaveMessage(Map<String, Object> param);
+
+    int insertLeaveMessage(Map<String, Object> param);
 }
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 ca2956e..f16bcdf 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
@@ -5,18 +5,19 @@ import com.springboot.traffic.service.trafficService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 
+import javax.annotation.Resource;
 import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
 
 @Service
 public class trafficServiceImpl implements trafficService {
-    @Autowired
+    @Resource
     trafficMapper trafficMapper;
 
     /**
      * 用户注册
-     * @param 用户名、密码、手机号
+     * @param
      * @return 成功与否、数据
      */
     @Override
@@ -35,7 +36,7 @@ public class trafficServiceImpl implements trafficService {
 
     /**
      * 用户登录
-     * @param 用户名、密码
+     * @param
      * @return 用户是否注册
      */
     @Override
@@ -51,4 +52,121 @@ public class trafficServiceImpl implements trafficService {
         result.put("data", res);
         return result;
     }
+    @Override
+    public Map<String, Object> getAllContent(Map<String, Object> param) {
+        Map<String, Object> result = new HashMap<>();
+        Map<String,Object> res = new HashMap<>();
+        List<Map<String,Object>> schoolNoticeList = trafficMapper.getSchoolNotice(param);
+        res.put("schoolNoticeList",schoolNoticeList);
+        List<Map<String,Object>> parentAdvice = trafficMapper.getParentAdvice(param);
+        res.put("parentAdvice",parentAdvice);
+        List<Map<String,Object>> studentThinking = trafficMapper.getStudentThinking(param);
+        res.put("studentThinking",studentThinking);
+        result.put("data",res);
+        result.put("success",true);
+        return result;
+    }
+
+    @Override
+    public Map<String, Object> illegalTreatment(Map<String, Object> param) {
+        Map<String, Object> result = new HashMap<>();
+        List<Map<String, Object>> res = null;
+        try {
+            res = trafficMapper.illegalTreatment(param);
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+        result.put("success", true);
+        result.put("data", res);
+        return result;
+    }
+
+    @Override
+    public Map<String, Object> handle(Map<String, Object> param) {
+        Map<String, Object> result = new HashMap<>();
+        int res = 0;
+        try {
+            res = trafficMapper.handle(param);
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+        result.put("success", true);
+        result.put("data", res);
+        return result;
+    }
+
+    @Override
+    public Map<String, Object> getIllegalInfo(Map<String, Object> param) {
+        Map<String, Object> result = new HashMap<>();
+        List<Map<String, Object>> res = null;
+        try {
+            if ("1".equals(param.get("status"))) {
+                res = trafficMapper.getScrapInfo(param);
+            } else {
+                res = trafficMapper.getIllegalInfo(param);
+            }
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+        result.put("success", true);
+        result.put("data", res);
+        return result;
+    }
+
+    @Override
+    public Map<String, Object> insertPlateInfo(Map<String, Object> param) {
+        Map<String, Object> result = new HashMap<>();
+        int res = 0;
+        try {
+            res = trafficMapper.insertPlateInfo(param);
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+        result.put("success", true);
+        result.put("data", res);
+        return result;
+    }
+
+    @Override
+    public Map<String, Object> selectPlateInfo(Map<String, Object> param) {
+        Map<String, Object> result = new HashMap<>();
+        List<Map<String, Object>> res = null;
+        try {
+            res = trafficMapper.selectPlateInfo(param);
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+        result.put("success", true);
+        result.put("data", res);
+        return result;
+    }
+
+    @Override
+    public Map<String, Object> getLeaveMessage(Map<String, Object> param) {
+        Map<String, Object> result = new HashMap<>();
+        List<Map<String, Object>> res = null;
+        try {
+            res = trafficMapper.getLeaveMessage(param);
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+        result.put("success", true);
+        result.put("data", res);
+        return result;
+    }
+
+    @Override
+    public Map<String, Object> insertLeaveMessage(Map<String, Object> param) {
+        Map<String, Object> result = new HashMap<>();
+        int res = 0;
+        try {
+            res = trafficMapper.insertLeaveMessage(param);
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+        result.put("success", true);
+        result.put("data", res);
+        return result;
+    }
+
 }
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 cfe5a74..542ed8c 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
@@ -18,5 +18,22 @@ public interface trafficService {
      */
     Map<String, Object> getUser(Map<String, Object> param);
 
+    /**
+     * 获取首页内容
+     */
+    Map<String,Object> getAllContent(Map<String,Object> param);
 
+    Map<String, Object> illegalTreatment(Map<String, Object> param);
+
+    Map<String, Object> handle(Map<String, Object> param);
+
+    Map<String, Object> getIllegalInfo(Map<String, Object> param);
+
+    Map<String, Object> insertPlateInfo(Map<String, Object> param);
+
+    Map<String, Object> selectPlateInfo(Map<String, Object> param);
+
+    Map<String, Object> getLeaveMessage(Map<String, Object> param);
+
+    Map<String, Object> insertLeaveMessage(Map<String, Object> param);
 }
diff --git a/traffic-front/src/App.vue b/traffic-front/src/App.vue
index 4149885..72d4843 100644
--- a/traffic-front/src/App.vue
+++ b/traffic-front/src/App.vue
@@ -11,5 +11,7 @@ export default {
 </script>
 
 <style>
-  
+  #app{
+    height: 100%;
+  }
 </style>
diff --git a/traffic-front/src/assets/css/public.css b/traffic-front/src/assets/css/public.css
index 8e77aae..10f420e 100644
--- a/traffic-front/src/assets/css/public.css
+++ b/traffic-front/src/assets/css/public.css
@@ -1,3 +1,17 @@
 html{
-  overflow-x: hidden;
+  height: 100%;
+  overflow-y: overlay;
+}
+body{
+  height: 100%;
+  padding-right: 17px!important;
+}
+.pointer{
+  cursor: pointer;
+}
+.them-blue{
+  color: #409EFF;
+}
+.special-them-blue:hover{
+  color: #409EFF;
 }
diff --git a/traffic-front/src/assets/img/no-data.png b/traffic-front/src/assets/img/no-data.png
new file mode 100644
index 0000000..c2444dd
Binary files /dev/null and b/traffic-front/src/assets/img/no-data.png differ
diff --git a/traffic-front/src/components/DiscardQuery.vue b/traffic-front/src/components/DiscardQuery.vue
index e41b514..df09d76 100644
--- a/traffic-front/src/components/DiscardQuery.vue
+++ b/traffic-front/src/components/DiscardQuery.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="illegal">
-    <h2>车辆报废信息查询</h2>
-    <el-form :model="illegalForm" :rules="illegalRules" ref="illegalForm" label-width="100px">
+    <div class="title">机动车报废信息查询</div>
+    <el-form :model="illegalForm" label-position="left" :rules="illegalRules" ref="illegalForm" label-width="120px">
       <el-form-item label="号牌种类" prop="species">
-        <el-select v-model="speciesValue" placeholder="请选择" class="inbox">
+        <el-select v-model="speciesValue" placeholder="请选择号牌种类" class="inbox">
           <el-option
             v-for="item in speciesOptions"
             :key="item.value"
@@ -13,7 +13,7 @@
         </el-select>
       </el-form-item>
       <el-form-item label="号牌号码" prop="number">
-        <el-select v-model="numberValue" placeholder="" class="queryBox">
+        <el-select v-model="numberValue" placeholder="请输入号牌号码" class="queryBox">
           <el-option
             v-for="item in numberOptions"
             :key="item.value"
@@ -21,13 +21,13 @@
             :value="item.value">
           </el-option>
         </el-select>
-        <el-input type="text" v-model="illegalForm.number" class="numberBox"></el-input>
+        <el-input type="text" v-model="illegalForm.number" class="numberBox" placeholder="请输入号牌号码"></el-input>
       </el-form-item>
       <el-form-item label="发动机后六位" prop="lastsix">
-        <el-input type="text" v-model="illegalForm.lastsix" class="inbox"></el-input>
+        <el-input type="text" v-model="illegalForm.lastsix" class="inbox" placeholder="请输入发动机后六位"></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 label="请输入登录密码" prop="code">
+        <el-input type="password" v-model="illegalForm.code" class="inbox" placeholder="请输入登录密码"></el-input>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="submitForm('')">查询</el-button>
@@ -64,38 +64,38 @@
           code:''
         },
         speciesOptions: [{
-          value: '选项1',
+          value: '大型汽车',
           label: '大型汽车'
         }, {
-          value: '选项2',
+          value: '小型汽车',
           label: '小型汽车'
         }, {
-          value: '选项3',
+          value: '教练汽车',
           label: '教练汽车'
         }, {
-          value: '选项4',
+          value: '教练摩托车',
           label: '教练摩托车'
         }, {
-          value: '选项5',
+          value: '大型新能源汽车',
           label: '大型新能源汽车'
         },{
-          value: '选项6',
+          value: '小型新能源汽车',
           label: '小型新能源汽车'
         }],
         numberOptions: [{
-          value: '选项1',
+          value: '京',
           label: '京'
         }, {
-          value: '选项2',
+          value: '津',
           label: '津'
         }, {
-          value: '选项3',
+          value: '沪',
           label: '沪'
         }, {
-          value: '选项4',
+          value: '渝',
           label: '渝'
         }, {
-          value: '选项5',
+          value: '鲁',
           label: '鲁'
         }],
         speciesValue: '',
@@ -115,25 +115,78 @@
     },
 
     methods: {
-      submitForm(formName) {
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            alert('submit!');
-          } else {
-            console.log('error submit!!');
-            return false;
-          }
-        });
+      submitForm() {
+        if (this.speciesValue === '') {
+          this.$message({
+            type:'warning',
+            message: '号牌种类不能为空'
+          })
+        } else if ( this.numberValue === '') {
+          this.$message({
+            type:'warning',
+            message: '号牌号码不能为空'
+          })
+        } else if ( this.illegalForm.number === '') {
+          this.$message({
+            type:'warning',
+            message: '号牌号码不能为空'
+          })
+        } else if ( this.illegalForm.lastsix === '') {
+          this.$message({
+            type:'warning',
+            message: '发动机号不能为空'
+          })
+        } else if ( this.illegalForm.code === '') {
+          this.$message({
+            type:'warning',
+            message: '登录密码不能为空'
+          })
+        } else if (this.illegalForm.code === JSON.parse(sessionStorage.getItem("userInfo")).user_password) {
+          this.$ajax.post("/traffic/getIllegalInfo",{status:"1",plateType: this.speciesValue,
+              numberPlate: this.numberValue+" "+this.illegalForm.number,engineNumber: this.illegalForm.lastsix},
+            r=>{
+              if (r.length === 0) {
+                this.$message.error("网络异常，请稍后再试")
+              } else if (r[0].scrap_time === ''){
+                this.$message({
+                  type: "warning",
+                  message: "该车辆暂无报废记录"
+                })
+              } else {
+                this.$alert(`号牌种类：${r[0].plate_type} 号牌号码：${r[0].number_plate}的车辆报废时间是${r[0].scrap_time}`, '机动车报废信息', {
+                  confirmButtonText: '确定',
+                });
+              }
+            })
+        } else {
+          this.$message.error("登录密码不正确");
+        }
       },
 
-      resetForm(formName) {
-        this.$refs[formName].resetFields();
+      resetForm() {
+        this.speciesValue = '';
+        this.numberValue = '';
+        this.illegalForm.number = '';
+        this.illegalForm.lastsix = '';
+        this.illegalForm.code = '';
+        this.numberValue = '';
+
       }
     }
   }
 </script>
 
 <style>
+  .illegal .title{
+  padding: 0 1rem 1rem 0;
+  font-weight: bold;
+  font-size: 1.2rem;
+  }
+  .illegal{
+    background: #FFFFFF;
+    padding: 1rem;
+    margin-top: 1.5rem;
+  }
   .el-form {
     width:50rem;
   }
diff --git a/traffic-front/src/components/Guide.vue b/traffic-front/src/components/Guide.vue
index 19e5937..750fae6 100644
--- a/traffic-front/src/components/Guide.vue
+++ b/traffic-front/src/components/Guide.vue
@@ -73,6 +73,9 @@
 </script>
 
 <style>
+  .guide{
+    margin-top: 1.5rem;
+  }
   .el-tree {
     width: 10rem;
   }
diff --git a/traffic-front/src/components/Homepage.vue b/traffic-front/src/components/Homepage.vue
index 911a8bd..3caa1ff 100644
--- a/traffic-front/src/components/Homepage.vue
+++ b/traffic-front/src/components/Homepage.vue
@@ -22,55 +22,97 @@
           </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="tab">
+      <div class="one">
+        <div class="title">信息公告</div>
+        <div class="list">
+          <div class="list-one pointer special-them-blue" v-for="item in newestNotice" @click="getContent(item)">
+            {{item.title}}
+          </div>
+        </div>
+      </div>
+      <div class="one">
+        <div class="title">交通资讯</div>
+        <div class="list">
+          <div class="list-one pointer special-them-blue"  v-for="item in goodAdvice" @click="getContent(item)">
+            {{item.title}}
+          </div>
+        </div>
+      </div>
+      <div class="one">
+        <div class="title">警示教育</div>
+        <div class="list">
+          <div class="list-one pointer special-them-blue"  v-for="item in magicalThinking" @click="getContent(item)">
+            {{item.title}}
+          </div>
+        </div>
+      </div>
     </div>
-    <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" 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" class="grid-other">
-        <div class="grid-content">
-          <el-link href="">我怎么多了几起违法记录？不是我开的呀！</el-link><br/>
-          <el-link href="">12万快递小哥同上“交通安全课”</el-link><br/>
-          <el-link href="">“车辆进入东城区××停车场”，车主：我在家呢啊！</el-link><br/>
-        </div>
-      </el-col>
-    </el-row>
   </div>
 </template>
 
 <script>
   export default{
+    data() {
+      return{
+        newestNotice: [],
+        goodAdvice: [],
+        magicalThinking: []
+      }
+    },
     mounted() {
-      this.getName();
+      this.getAll();
     },
     methods:{
-      getName() {
-        this.$ajax.post("/traffic/login",{},r=>{
-          console.log(r)
+      getAll() {
+        this.$ajax.post("/traffic/getAllContent",{},r=>{
+          this.newestNotice = r.schoolNoticeList.slice(0,6);
+          this.goodAdvice = r.parentAdvice.slice(0,6);
+          this.magicalThinking = r.studentThinking.slice(0,6);
         })
+      },
+      getContent(one) {
+        this.$router.push({
+          name: 'noticecontent'
+        });
+        sessionStorage.setItem("noticeContent",JSON.stringify(one));
       }
     }
     }
 </script>
 
 <style>
+  .one .title{
+    padding: 1rem;
+    border-bottom: 1px solid #EEEEEE;
+    font-size: 1.2rem;
+    font-weight: bold;
+  }
+  .one .list{
+    padding: 0.5rem 1rem 1rem 1rem;
+  }
+  .list .list-one{
+    height: 2rem;
+    line-height: 2rem;
+  }
+  .tab{
+    display: flex;
+    width: 80%;
+    margin: 1rem auto;
+  }
+  .tab .one{
+    border-radius: 5px;
+    flex: 1;
+    background: #FFFFFF;
+  }
+  .tab .one:nth-child(2){
+    margin: 0 1rem;
+  }
   .change {
-    margin-top: 4rem;
+    border-radius: 5px;
+    padding-top: 3rem;
+    background: #fff;
+    margin-top: 1.5rem;
   }
   .el-carousel {
     width: 90rem;
diff --git a/traffic-front/src/components/IllegalProcess.vue b/traffic-front/src/components/IllegalProcess.vue
index 82b0f8c..60d72a6 100644
--- a/traffic-front/src/components/IllegalProcess.vue
+++ b/traffic-front/src/components/IllegalProcess.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="illprocess">
-    <h2>违章行为处理</h2>
-    <el-form :model="illegalForm" :rules="illegalRules" ref="illegalForm" label-width="100px">
+    <div class="title">机动车违章行为处理</div>
+    <el-form :model="illegalForm" label-position="left" :rules="illegalRules" ref="illegalForm" label-width="100px">
       <el-form-item label="处罚书编号" prop="num">
-        <el-input type="text" v-model="illegalForm.num" class="inbox"></el-input>
+        <el-input type="text" v-model="illegalForm.num" class="inbox" placeholder="请输入处罚书编号"></el-input>
       </el-form-item>
       <el-form-item label="号牌号码" prop="number">
-        <el-select v-model="numberValue" placeholder="" class="queryBox">
+        <el-select v-model="numberValue" placeholder="请输入" class="queryBox">
           <el-option
             v-for="item in numberOptions"
             :key="item.value"
@@ -14,23 +14,35 @@
             :value="item.value">
           </el-option>
         </el-select>
-        <el-input type="text" v-model="illegalForm.number" class="numberBox"></el-input>
+        <el-input type="text" v-model="illegalForm.number" class="numberBox" placeholder="请输入号牌号码"></el-input>
       </el-form-item>
       <el-form-item label="发动机号" prop="serial">
-        <el-input type="text" v-model="illegalForm.serial" class="inbox"></el-input>
+        <el-input type="text" v-model="illegalForm.serial" class="inbox" placeholder="请输入发动机号"></el-input>
       </el-form-item>
       <el-form-item label="手机号" prop="phone">
-        <el-input type="text" v-model="illegalForm.phone" class="inbox"></el-input>
+        <el-input type="text" v-model="illegalForm.phone" class="inbox" placeholder="请输入手机号"></el-input>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="submitForm('')">处理</el-button>
-        <el-button @click="resetForm('')">重置</el-button>
+        <el-button type="primary" @click="submitForm">处理</el-button>
+        <el-button @click="resetForm">重置</el-button>
       </el-form-item>
     </el-form>
+    <el-dialog
+      title="提示"
+      :visible.sync="dialogVisible1"
+      width="30%">
+      <div id="qrcode" ></div>
+      <span slot="footer" class="dialog-footer">
+    <el-button @click="cancel">取 消</el-button>
+    <el-button type="primary" @click="submit">确 定</el-button>
+  </span>
+    </el-dialog>
+
   </div>
 </template>
 
 <script>
+  import QRCode  from "qrcodejs2"
   export default {
     data() {
       let numValidate = (rule, value, callback) => {
@@ -57,6 +69,9 @@
       };
 
       return {
+        one: '',
+        link: '',
+        dialogVisible1: false,
         illegalForm: {
           num: '',
           number: '',
@@ -65,19 +80,19 @@
         },
 
         numberOptions: [{
-          value: '选项1',
+          value: '京',
           label: '京'
         }, {
-          value: '选项2',
+          value: '津',
           label: '津'
         }, {
-          value: '选项3',
+          value: '沪',
           label: '沪'
         }, {
-          value: '选项4',
+          value: '渝',
           label: '渝'
         }, {
-          value: '选项5',
+          value: '鲁',
           label: '鲁'
         }],
 
@@ -98,11 +113,115 @@
           ]
         }
       }
-    }
+    },
+    methods: {
+      resetForm() {
+        this.illegalForm.num = '';
+        this.illegalForm.number = '';
+        this.illegalForm.serial = '';
+        this.illegalForm.phone = '';
+        this.numberValue = '';
+      },
+      cancel() {
+        location.reload()
+      },
+      submit() {
+        this.$ajax.post("/traffic/handle",{id: this.one.id},r=>{
+          if (r === '0') {
+            this.$message.error("网络异常，请稍后再试")
+          } else {
+            this.$message({
+              type: 'success',
+              message: '处理成功'
+            });
+            setTimeout(()=>{location.reload()},500);
+          }
+        })
+      },
+      submitForm() {
+        if (this.illegalForm.num === '') {
+          this.$message({
+            type: 'warning',
+            message: "处罚书编号不能为空"
+          })
+        } else if (this.numberValue === '') {
+          this.$message({
+            type: 'warning',
+            message: "号牌号码不能为空"
+          })
+        } else if (this.illegalForm.number === '') {
+          this.$message({
+            type: 'warning',
+            message: "号牌号码不能为空"
+          })
+        } else if (this.illegalForm.serial === '') {
+          this.$message({
+            type: 'warning',
+            message: "发动机号不能为空"
+          })
+        } else if (this.illegalForm.phone === '') {
+          this.$message({
+            type: 'warning',
+            message: "手机号不能为空"
+          })
+        } else {
+          this.$ajax.post("/traffic/illegalTreatment",{number:this.illegalForm.num,
+          numberPlate:this.numberValue+this.illegalForm.number,engine:this.illegalForm.serial,
+          mobile:this.illegalForm.phone},r=>{
+            if (r.length === 0) {
+              this.$message({
+                type: 'warning',
+                message: '没有该违章记录'
+              })
+            } else if (r[0].status === '1') {
+              this.$message({
+                type: 'warning',
+                message: '该违章记录已处理'
+              })
+            } else {
+              this.one = r[0];
+              this.link = r[0].content;
+              this.dialogVisible1 = true;
+              this.$nextTick (function () {
+                this.qrcode();
+              })
+            }
+          });
+        }
+      },
+      //  生成二维码
+      qrcode () {
+        let that = this;
+        let qrcode = new QRCode('qrcode', {
+          width: 124,
+          height: 124,        // 高度
+          text:  this.link,   // 二维码内容
+          // render: 'table' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
+          // background: '#f0f',   // 背景色
+          // foreground: '#ff0'    // 前景色
+        })
+      }
+    },
+
+    components: { QRCode }
   }
 </script>
 
 <style>
+  #qrcode{
+    width: 124px;
+    margin: 0 auto;
+  }
+  .illprocess .title{
+    padding: 0 1rem 1rem 0;
+    font-weight: bold;
+    font-size: 1.2rem;
+  }
+  .illprocess{
+    background: #FFFFFF;
+    padding: 1rem;
+    margin-top: 1.5rem;
+  }
   .el-form {
     width:50rem;
   }
diff --git a/traffic-front/src/components/IllegalQuery.vue b/traffic-front/src/components/IllegalQuery.vue
index d4671ae..0447a65 100644
--- a/traffic-front/src/components/IllegalQuery.vue
+++ b/traffic-front/src/components/IllegalQuery.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="illegal">
-    <h2>机动车违章信息查询</h2>
-    <el-form :model="illegalForm" :rules="illegalRules" ref="illegalForm" label-width="100px">
+    <div class="title">机动车违章信息查询</div>
+    <el-form :model="illegalForm" label-position="left" :rules="illegalRules" ref="illegalForm" label-width="120px">
       <el-form-item label="号牌种类" prop="species">
-        <el-select v-model="speciesValue" placeholder="请选择" class="inbox">
+        <el-select v-model="speciesValue" placeholder="请选择号牌种类" class="inbox">
           <el-option
             v-for="item in speciesOptions"
             :key="item.value"
@@ -13,7 +13,7 @@
         </el-select>
       </el-form-item>
       <el-form-item label="号牌号码" prop="number">
-        <el-select v-model="numberValue" placeholder="" class="queryBox">
+        <el-select v-model="numberValue" placeholder="请输入号牌号码" class="queryBox">
           <el-option
             v-for="item in numberOptions"
             :key="item.value"
@@ -21,19 +21,49 @@
             :value="item.value">
           </el-option>
         </el-select>
-        <el-input type="text" v-model="illegalForm.number" class="numberBox"></el-input>
+        <el-input type="text" v-model="illegalForm.number" class="numberBox" placeholder="请输入号牌号码"></el-input>
       </el-form-item>
       <el-form-item label="发动机后六位" prop="lastsix">
-        <el-input type="text" v-model="illegalForm.lastsix" class="inbox"></el-input>
+        <el-input type="text" v-model="illegalForm.lastsix" class="inbox" placeholder="请输入发动机后六位"></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 label="请输入登录密码" prop="code">
+        <el-input type="password" v-model="illegalForm.code" class="inbox" placeholder="请输入登录密码"></el-input>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="submitForm('')">查询</el-button>
-        <el-button @click="resetForm('')">重置</el-button>
+        <el-button type="primary" @click="submitForm">查询</el-button>
+        <el-button @click="resetForm">重置</el-button>
       </el-form-item>
     </el-form>
+
+    <el-dialog
+      title="机动车违章信息"
+      :visible.sync="dialogVisible2"
+      width="60%">
+      <div class="content">
+        <div class="header">
+          <div class="number-plate">号牌号码</div>
+          <div class="plate-type">号牌种类</div>
+          <div class="engine-number">发动机号</div>
+          <div class="mobile">手机号</div>
+          <div class="content">处罚信息</div>
+          <div class="number">处罚书编号</div>
+        </div>
+        <div class="list">
+          <div class="one" v-for="item in list">
+            <div class="number-plate">{{item.number_plate}}</div>
+            <div class="plate-type">{{item.plate_type}}</div>
+            <div class="engine-number">{{item.engine_number}}</div>
+            <div class="mobile">{{item.mobile}}</div>
+            <div class="content">{{item.content}}</div>
+            <div class="number">{{item.number}}</div>
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+    <el-button @click="dialogVisible2 = false">取 消</el-button>
+    <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
+  </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -57,6 +87,17 @@
       };
 
       return {
+        list: [
+          {
+            number_plate: '',
+            plate_type: '',
+            engine_number: '',
+            mobile: '',
+            content: '',
+            number: '',
+          }
+        ],
+        dialogVisible2: false,
         illegalForm: {
           species:'',
           number:'',
@@ -64,38 +105,38 @@
           code:''
         },
         speciesOptions: [{
-          value: '选项1',
+          value: '大型汽车',
           label: '大型汽车'
         }, {
-          value: '选项2',
+          value: '小型汽车',
           label: '小型汽车'
         }, {
-          value: '选项3',
+          value: '教练汽车',
           label: '教练汽车'
         }, {
-          value: '选项4',
+          value: '教练摩托车',
           label: '教练摩托车'
         }, {
-          value: '选项5',
+          value: '大型新能源汽车',
           label: '大型新能源汽车'
         },{
-          value: '选项6',
+          value: '小型新能源汽车',
           label: '小型新能源汽车'
         }],
         numberOptions: [{
-          value: '选项1',
+          value: '京',
           label: '京'
         }, {
-          value: '选项2',
+          value: '津',
           label: '津'
         }, {
-          value: '选项3',
+          value: '沪',
           label: '沪'
         }, {
-          value: '选项4',
+          value: '渝',
           label: '渝'
         }, {
-          value: '选项5',
+          value: '鲁',
           label: '鲁'
         }],
         speciesValue: '',
@@ -105,7 +146,8 @@
             { validator: plateValidate, trigger: 'blur' }
           ],
           lastsix: [
-            { validator: numberValidate, trigger: 'blur' }
+            { validator: numberValidate, trigger: 'blur' },
+            { min: 6, max: 6, message: '请输入正确格式', trigger: 'blur' }
           ],
           code: [
             { validator: checkValidate, trigger: 'blur' }
@@ -115,25 +157,105 @@
     },
 
     methods: {
-      submitForm(formName) {
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            alert('submit!');
-          } else {
-            console.log('error submit!!');
-            return false;
-          }
-        });
+      submitForm() {
+        if (this.speciesValue === '') {
+          this.$message({
+            type:'warning',
+            message: '号牌种类不能为空'
+          })
+        } else if ( this.numberValue === '') {
+          this.$message({
+            type:'warning',
+            message: '号牌号码不能为空'
+          })
+        } else if ( this.illegalForm.number === '') {
+          this.$message({
+            type:'warning',
+            message: '号牌号码不能为空'
+          })
+        } else if ( this.illegalForm.lastsix === '') {
+          this.$message({
+            type:'warning',
+            message: '发动机号不能为空'
+          })
+        } else if ( this.illegalForm.code === '') {
+          this.$message({
+            type:'warning',
+            message: '登录密码不能为空'
+          })
+        } else if (this.illegalForm.code === JSON.parse(sessionStorage.getItem("userInfo")).user_password) {
+          this.$ajax.post("/traffic/getIllegalInfo",{plateType: this.speciesValue,
+            numberPlate: this.numberValue+this.illegalForm.number,engineNumber: this.illegalForm.lastsix},
+          r=>{
+            this.list = r;
+            this.dialogVisible2 = true;
+          })
+        } else {
+          this.$message.error("登录密码不正确");
+        }
       },
 
-      resetForm(formName) {
-        this.$refs[formName].resetFields();
+      resetForm() {
+        this.speciesValue = '';
+        this.numberValue = '';
+        this.illegalForm.number = '';
+        this.illegalForm.lastsix = '';
+        this.illegalForm.code = '';
+        this.numberValue = '';
+
       }
     }
   }
 </script>
 
 <style>
+  .list .one{
+    display: flex;
+    padding: 1rem 0;
+    border-bottom: 1px solid #EEEEEE;
+  }
+  .one .content{
+    text-align: left;
+    text-indent: 1rem;
+  }
+  .content{
+    text-align: center;
+  }
+  .number-plate{
+    flex: 1;
+  }
+  .plate-type{
+    flex: 1;
+  }
+  .engine-number{
+    flex: 1;
+  }
+  .mobile{
+    flex: 1;
+  }
+  .content{
+    flex: 3;
+  }
+  .number{
+    flex: 1;
+  }
+  .el-dialog__body{
+    padding: 3rem!important;
+  }
+  .content .header{
+    display: flex;
+    border-bottom: 1px solid #EEEEEE;
+  }
+  .illegal .title{
+    padding: 0 1rem 1rem 0;
+    font-weight: bold;
+    font-size: 1.2rem;
+  }
+  .illegal{
+    background: #FFFFFF;
+    padding: 1rem;
+    margin-top: 1.5rem;
+  }
   .el-form {
     width:50rem;
   }
diff --git a/traffic-front/src/components/index.vue b/traffic-front/src/components/Index.vue
similarity index 68%
rename from traffic-front/src/components/index.vue
rename to traffic-front/src/components/Index.vue
index 5c566e6..f9cc94b 100644
--- a/traffic-front/src/components/index.vue
+++ b/traffic-front/src/components/Index.vue
@@ -2,11 +2,16 @@
   <el-container>
     <el-header>
       <div class = 'header'>
-
-        <el-button class="registerButton" type="text" @click='userRegister'>用户注册</el-button>
-
+        <div class="login" v-if="!isLogin">
+          <div class="registerButton pointer" @click='userRegister'>用户注册</div>
+          <div class="pointer" @click='userLogon'>个人登录</div>
+        </div>
+        <div class="is-login" v-if="isLogin">
+          <div class="personal pointer">{{userInfo === '' ? '' : userInfo.real_name}}</div>
+          <div class="pointer" @click="cancellation">注销</div>
+        </div>
         <el-dialog :visible.sync='dialogRegisterVisible' width="600px" height="400px">
-          <el-form :model="registerForm" :rules="registerRules" ref="registerForm" label-width="100px">
+          <el-form :model="registerForm" label-position="left" :rules="registerRules" ref="registerForm" label-width="100px">
             <el-form-item label="用户名" prop="name">
               <el-input type="text" v-model="registerForm.name"></el-input>
             </el-form-item>
@@ -25,11 +30,8 @@
             </el-form-item>
           </el-form>
         </el-dialog>
-
-        <el-button type="text" @click='userLogon'>个人登录</el-button>
-
-        <el-dialog :visible.sync='dialogLogonVisible' width="400px" height="300px">
-          <el-form :model="logonForm" :rules="logonRules" ref="logonForm" label-width="100px">
+        <el-dialog :visible.sync='dialogLogonVisible' width="600px" height="400px">
+          <el-form :model="logonForm" label-position="left" :rules="logonRules" ref="logonForm" label-width="100px">
             <el-form-item label="用户名" prop="name">
               <el-input type="text" v-model="logonForm.name"></el-input>
             </el-form-item>
@@ -37,7 +39,7 @@
               <el-input type="password" v-model="logonForm.pass"></el-input>
             </el-form-item>
             <el-form-item>
-              <el-button type="primary" @click="submitLogon(logonForm)">登录</el-button>
+              <el-button type="primary" @click="submitLogon()">登录</el-button>
             </el-form-item>
           </el-form>
         </el-dialog>
@@ -48,8 +50,8 @@
           <el-menu-item index="/index/homepage">首页</el-menu-item>
           <el-submenu index="2">
             <template slot="title">业务中心</template>
-            <el-menu-item index="/index/illprocess">违章处理业务</el-menu-item>
-            <el-menu-item index="/index/illquery">违章信息查询</el-menu-item>
+            <el-menu-item index="/index/illquery">机动车违章信息查询</el-menu-item>
+            <el-menu-item index="/index/illprocess">机动车违章处理业务</el-menu-item>
             <el-menu-item index="/index/disquery">机动车报废查询</el-menu-item>
           </el-submenu>
           <el-submenu index="3">
@@ -61,17 +63,11 @@
           <el-menu-item index="/index/guide">办事指南</el-menu-item>
         </el-menu>
       </div>
-      <router-view/>
     </el-header>
-
     <el-main>
-
+      <router-view/>
     </el-main>
-
-    <el-footer>
-
-    </el-footer>
-
+    <el-footer></el-footer>
   </el-container>
 </template>
 
@@ -117,9 +113,10 @@ export default {
     };
 
     return {
+      isLogin: false,
+      userInfo: '',
       dialogRegisterVisible:false,
       dialogLogonVisible:false,
-
       registerForm: {
         name:'',
         pass: '',
@@ -157,9 +154,37 @@ export default {
       }
     };
   },
-
+  mounted() {
+    this.isLogin1();
+  },
   methods: {
-
+    cancellation() {
+      this.$confirm('确认注销？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        sessionStorage.setItem("userInfo",'');
+        this.$message({
+          type: 'success',
+          message: '注销成功'
+        });
+        location.reload()
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消注销'
+        });
+      });
+    },
+    isLogin1() {
+      if (sessionStorage.getItem("userInfo") === '') {
+        this.isLogin = false;
+      } else {
+        this.isLogin = true;
+        this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
+      }
+    },
     userRegister(){
       this.dialogRegisterVisible = true;
     },
@@ -186,9 +211,12 @@ export default {
     },
 
     //用户登录
-    submitLogon(formName){
-      this.$ajax.post("/traffic/logon",{formName},r=>{
-        debugger
+    submitLogon(){
+      this.$ajax.post("/traffic/logon",{name:this.logonForm.name,pass:this.logonForm.pass},r=>{
+        sessionStorage.setItem("userInfo",JSON.stringify(r[0]));
+        this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
+        this.dialogLogonVisible = false;
+        this.isLogin = true;
       })
     },
 
@@ -201,8 +229,28 @@ export default {
 </script>
 
 <style>
+  .el-input {
+    width: 100%;
+  }
+  .personal{
+    margin-right: 1rem;
+  }
+  .el-form{
+    width: 100% !important;
+  }
+  .el-dialog__body{
+    padding: 3rem 5rem!important;
+  }
+  .login, .is-login{
+    display: flex;
+    float: right;
+    color: #999999;
+  }
+  .el-main div{
+    border-radius: 5px;
+  }
   .el-container{
-    height:50rem;
+    min-height: 100%;
     background: linear-gradient(#cee6e6, #f4fafa)
   }
 
@@ -212,11 +260,11 @@ export default {
   }
 
   .registerButton{
-    margin-left:108rem;
+    margin-right: 1rem;
   }
 
   .menu{
     height:4rem;
-    width: %
+
   }
 </style>
diff --git a/traffic-front/src/components/LeaveMessage.vue b/traffic-front/src/components/LeaveMessage.vue
index 6e245f2..00b6366 100644
--- a/traffic-front/src/components/LeaveMessage.vue
+++ b/traffic-front/src/components/LeaveMessage.vue
@@ -1,12 +1,25 @@
 <template>
   <div class="leaveinfo">
+    <div class="message-list">
+      <div class="message-one" v-for="item in messageList">
+        <div class="message-content">{{item.content}}</div>
+        <div class="author">
+          <span class="name">{{item.real_name}}</span>
+          <span class="time">{{item.create_time}}</span>
+        </div>
+
+      </div>
+    </div>
     <div class="content">
-      <el-input
-        type="textarea"
-        :rows="10"
-        placeholder="请输入内容"
-        v-model="textarea">
-      </el-input>
+      <div class="input">
+        <el-input
+          type="textarea"
+          :rows="6"
+          placeholder="请输入内容"
+          v-model="textarea">
+        </el-input>
+      </div>
+      <el-button type="primary" @click="submitMessage">提交</el-button>
     </div>
   </div>
 </template>
@@ -15,15 +28,72 @@
   export default {
     data() {
       return {
-        textarea: ''
+        textarea: '',
+        messageList: [],
+
+      }
+    },
+    mounted() {
+      this.getLeaveMessage();
+    },
+    methods: {
+      submitMessage() {
+        this.$ajax.post("/traffic/insertLeaveMessage",{content:this.textarea,
+        createId: JSON.parse(sessionStorage.getItem("userInfo")).user_id},r=>{
+          if (r === 1) {
+            this.$message({
+              type: 'success',
+              message: "留言成功"
+            })
+            this.getLeaveMessage();
+            this.textarea = '';
+          } else {
+            this.$message.error("网络异常，请稍后再试")
+          }
+        })
+      },
+      getLeaveMessage() {
+        this.$ajax.post("/traffic/getLeaveMessage",{},r=>{
+          this.messageList = r;
+        })
       }
     }
   }
 </script>
 
 <style>
+  .author span:nth-child(1){
+    margin-right: 1rem;
+  }
+  .author{
+    float: right;
+    font-size: 0.9rem;
+    color: #999999;
+  }
+  .message-one{
+    padding: 1rem 0 1.5rem 0;
+    border-bottom: 1px solid #EEEEEE;
+  }
+  .message-content{
+    padding: 0!important;
+    margin: 0!important;
+  }
+  .leaveinfo{
+    margin-top: 1.5rem;
+  }
+  .message-list{
+    padding: 1rem;
+    background: #FFFFFF;
+  }
   .content {
     margin-top: 2rem;
-    width:31.25rem
+  }
+  .input{
+    width: 50%;
+    margin: 0 auto;
+  }
+  .content .el-button{
+    display: block;
+    margin: 1rem auto;
   }
 </style>
diff --git a/traffic-front/src/components/NewPlate.vue b/traffic-front/src/components/NewPlate.vue
index afe64ae..f6aa3be 100644
--- a/traffic-front/src/components/NewPlate.vue
+++ b/traffic-front/src/components/NewPlate.vue
@@ -1,29 +1,56 @@
 <template>
   <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 class="left">
+      <div class="title">新车登记预选号牌</div>
+      <el-form :model="plateForm" label-position="left" :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>
+        <div class="plate-number">
+          <el-radio v-model="plateNumber" :label="item" :key="item" border v-for="item in plateNumbers"></el-radio>
+        </div>
+        <el-form-item label="车辆品牌" prop="logo">
+          <el-input type="text" v-model="plateForm.logo" placeholder="请输入车辆品牌"></el-input>
+        </el-form-item>
+        <el-form-item label="合格编号" prop="number">
+          <el-input type="text" v-model="plateForm.number" placeholder="请输入合格编号"></el-input>
+        </el-form-item>
+        <el-form-item label="车辆型号" prop="size">
+          <el-select v-model="plateForm.size" placeholder="请输入车辆型号">
+            <el-option value="载货汽车">载货汽车</el-option>
+            <el-option value="越野汽车">越野汽车</el-option>
+            <el-option value="自卸汽车">自卸汽车</el-option>
+            <el-option value="牵引汽车">牵引汽车</el-option>
+            <el-option value="专用汽车">专用汽车</el-option>
+            <el-option value=" 客 车 "> 客 车 </el-option>
+            <el-option value=" 轿 车 "> 轿 车 </el-option>
+            <el-option value=" 未 用 "> 未 用 </el-option>
+            <el-option value="半挂车及专用半挂车">半挂车及专用半挂车</el-option>
+          </el-select>
+        </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>
+    <div class="right">
+      <div class="title">
+        近期挂牌信息
+      </div>
+      <el-carousel height="200px" direction="vertical" :autoplay="true">
+        <el-carousel-item v-for="item in plateList" :key="item.id">
+          <div class="plate">{{item.plate_number}}</div>
+          <div class="name">{{item.real_name}}</div>
+          <div class="time">{{item.create_time}}</div>
+        </el-carousel-item>
+      </el-carousel>
+    </div>
   </div>
 </template>
 
@@ -48,69 +75,75 @@
       };
 
       return {
+        plateList: [],
+        plateNumbers: [],
+        plateNumber: '',
         value: [],
-        citis: [{
-          value: 'beijing',
+        citis: [
+          {
+          value: '北京',
           label: '北京',
-        }, {
-          value: 'tianjin',
+          },
+          {
+          value: '天津',
           label: '天津',
-        }, {
-          value: 'shanghai',
+          },
+          {
+          value: '上海',
           label: '上海',
-        },{
-        value: 'chongqing',
+          },{
+        value: '重庆',
           label: '重庆',
       },{
-          value: 'shandong',
+          value: '山东',
           label: '山东',
           children: [{
-            value: 'jinan',
+            value: '济南市',
             label: '济南市'
           }, {
-            value: 'qingdao',
+            value: '青岛市',
             label: '青岛市'
           }, {
-            value: 'rizhao',
+            value: '日照市',
             label: '日照市'
           }, {
-            value: 'zibo',
+            value: '淄博市',
             label: '淄博市'
           }, {
-            value: 'zaozhuang',
+            value: '枣庄市',
             label: '枣庄市'
           }, {
-            value: 'dongying',
+            value: '东营市',
             label: '东营市'
           }, {
-            value: 'yantai',
+            value: '烟台市',
             label: '烟台市'
           }, {
-            value: 'weifang',
+            value: '潍坊市',
             label: '潍坊市'
           }, {
-            value: 'jining',
+            value: '济宁市',
             label: '济宁市'
           }, {
-            value: 'taian',
+            value: '泰安市',
             label: '泰安市'
           }, {
-            value: 'weihai',
+            value: '威海市',
             label: '威海市'
           }, {
-            value: 'linyi',
+            value: '临沂市',
             label: '临沂市'
           }, {
-            value: 'dezhou',
+            value: '德州市',
             label: '德州市'
           }, {
-            value: 'liaocheng',
+            value: '聊城市',
             label: '聊城市'
           }, {
-            value: 'binzhou',
+            value: '滨州市',
             label: '滨州市'
           }, {
-            value: 'heze',
+            value: '菏泽市',
             label: '菏泽市'
           }, ]
         }],
@@ -134,30 +167,154 @@
         }
       };
     },
+    mounted() {
+      this.getPlateInfo();
+    },
     methods: {
+      getPlateInfo() {
+        this.$ajax.post("/traffic/selectPlateInfo",{},r=>{
+          this.plateList = r;
+        })
+      },
+      getPlateNumber(address) {
+        let plate = '';
+        switch (address) {
+          case "北京" : plate = "京A·";break;
+          case "天津" : plate = "津A·";break;
+          case "重庆" : plate = "渝A·";break;
+          case "上海" : plate = "沪A·";break;
+          case "济南市" : plate = "鲁A·";break;
+          case "青岛市" : plate = "鲁B·";break;
+          case "日照市" : plate = "鲁L·";break;
+          case "淄博市" : plate = "鲁C·";break;
+          case "枣庄市" : plate = "鲁D·";break;
+          case "东营市" : plate = "鲁E·";break;
+          case "烟台市" : plate = "鲁F·";break;
+          case "潍坊市" : plate = "鲁G·";break;
+          case "济宁市" : plate = "鲁H·";break;
+          case "泰安市" : plate = "鲁J·";break;
+          case "威海市" : plate = "鲁K·";break;
+          case "临沂市" : plate = "鲁Q·";break;
+          case "德州市" : plate = "鲁N·";break;
+          case "聊城市" : plate = "鲁P·";break;
+          case "滨州市" : plate = "鲁M·";break;
+          case "菏泽市" : plate = "鲁R·";break;
+          default: ;
+        }
+        return plate;
+      },
+      getRandom() {
+        let plateNumber = '';
+        let codeChars = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G',
+          'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V',
+          'W', 'X', 'Y', 'Z'];
+        for (let i = 0; i < 5; i++) {
+          let index= Math.floor(Math.random()*36);
+          plateNumber += codeChars[index];
+        }
+        return plateNumber;
+      },
       handleChange(value) {
-        console.log(value);
-      },
-
-      submitForm(formName) {
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            alert('submit!');
-          } else {
-            console.log('error submit!!');
-            return false;
+        if (value[1] === '' || value[1] === undefined) {
+          this.$message({
+            type: 'warning',
+            message: '暂时只能为山东地区开放，其他地区敬请开放'
+          })
+        } else {
+          let plateList = [];
+          for (let i = 0; i < 10; i++) {
+            let one = this.getPlateNumber(value[1])+this.getRandom();
+            plateList.push(one)
           }
-        });
+          this.plateNumbers = plateList;
+        }
+
       },
 
-      resetForm(formName) {
-        this.$refs[formName].resetFields();
+      submitForm() {
+        if (this.plateNumber === '') {
+          this.$message({
+            type: 'warning',
+            message: '号牌号码不能为空'
+          })
+        } else if (this.plateForm.logo === '') {
+          this.$message({
+            type: 'warning',
+            message: '车辆品牌不能为空'
+          })
+        } else if (this.plateForm.number === '') {
+          this.$message({
+            type: 'warning',
+            message: '合格编号不能为空'
+          })
+        } else if (this.plateForm.size === '') {
+          this.$message({
+            type: 'warning',
+            message: '车辆型号不能为空'
+          })
+        } else {
+          this.$ajax.post("/traffic/insertPlateInfo",{
+            createId:JSON.parse(sessionStorage.getItem("userInfo")).user_id,plateNumber:this.plateNumber,
+            carBrand: this.plateForm.logo,qualifiedNo:this.plateForm.number,carSize:this.plateForm.size,
+            carType:"新车"},r=>{
+              if (r === 1) {
+                this.$message({
+                  type: 'success',
+                  message: "预选成功"
+                })
+                location.reload();
+              } else {
+                this.$message.error("网络异常，请稍后再试")
+              }
+          })
+        }
+      },
+
+      resetForm() {
+        this.value = '';
+        this.plateForm.logo = '';
+        this.plateForm.number = '';
+        this.plateForm.size = '';
       }
     }
   }
 </script>
 
 <style>
+  .el-carousel__item div{
+    padding: 1rem;
+  }
+  .left , .right{
+    width: 50%;
+  }
+  .el-radio:nth-child(1){
+    margin-left: 10px;
+  }
+  .el-radio{
+    margin-right: 0 !important;
+    width: 47%;
+    margin-bottom: 0.5rem;
+  }
+  .plate-number{
+    overflow: auto;
+    height: 10rem;
+    border: 1px solid #EEEEEE;
+    margin-bottom: 1rem;
+    width: 36rem;
+    padding: 1rem;
+    box-sizing: border-box;
+  }
+  .plate .title{
+    padding: 0 1rem 1rem 0;
+    font-weight: bold;
+    font-size: 1.2rem;
+  }
+  .plate{
+    display: flex;
+    background: #FFFFFF;
+    padding: 1rem;
+    margin-top: 1.5rem;
+  }
   .el-input {
     width: 30rem;
   }
diff --git a/traffic-front/src/components/NoData.vue b/traffic-front/src/components/NoData.vue
new file mode 100644
index 0000000..5ca951d
--- /dev/null
+++ b/traffic-front/src/components/NoData.vue
@@ -0,0 +1,27 @@
+<template>
+  <el-container>
+    <el-main>
+      <img src="../assets/img/no-data.png" height="200" width="200"/>
+      <div class="nodata">
+        暂无数据
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+    export default {
+        name: "NoData"
+    }
+</script>
+
+<style scoped>
+  .el-main img{
+    display: block;
+    margin: 2rem auto 0;
+  }
+  .nodata{
+    text-align: center;
+    color: #999;
+  }
+</style>
diff --git a/traffic-front/src/components/NoticeContent.vue b/traffic-front/src/components/NoticeContent.vue
new file mode 100644
index 0000000..6298bf7
--- /dev/null
+++ b/traffic-front/src/components/NoticeContent.vue
@@ -0,0 +1,49 @@
+<template>
+  <div id="content">
+    <div class="title">{{noticeContent.title}}</div>
+    <div class="author">{{noticeContent.real_name}} {{noticeContent.create_time}} &nbsp &nbsp</div>
+    <div class="notice-content">{{noticeContent.content}}</div>
+
+  </div>
+</template>
+
+<script>
+    export default {
+        name: "NoticeContent",
+      data() {
+          return{
+            noticeContent: JSON.parse(sessionStorage.getItem("noticeContent")),
+          }
+      },
+      mounted() {
+        console.log(this.noticeContent)
+      },
+      methods: {
+
+      }
+    }
+</script>
+
+<style scoped>
+  .notice-content{
+    padding: 1rem;
+  }
+  .author{
+    padding-bottom: 0.2rem;
+    border-bottom: 1px solid #EEEEEE;
+    width: 100%;
+    text-align: right;
+    color: #999999;
+  }
+  .title{
+    padding: 1rem;
+    font-size: 1.2rem;
+    font-weight: bold;
+  }
+  #content{
+    margin: 1.5rem 20%;
+    background: #FFFFFF;
+    padding-bottom: 1rem;
+    min-height: 30rem;
+  }
+</style>
diff --git a/traffic-front/src/components/OldPlate.vue b/traffic-front/src/components/OldPlate.vue
index 07ff398..6fb921b 100644
--- a/traffic-front/src/components/OldPlate.vue
+++ b/traffic-front/src/components/OldPlate.vue
@@ -1,29 +1,56 @@
 <template>
   <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 class="left">
+      <div class="title">二手车过户预选号牌</div>
+      <el-form :model="plateForm" label-position="left" :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>
+        <div class="plate-number">
+          <el-radio v-model="plateNumber" :label="item" :key="item" border v-for="item in plateNumbers"></el-radio>
+        </div>
+        <el-form-item label="车辆品牌" prop="logo">
+          <el-input type="text" v-model="plateForm.logo" placeholder="请输入车辆品牌"></el-input>
+        </el-form-item>
+        <el-form-item label="合格编号" prop="number">
+          <el-input type="text" v-model="plateForm.number" placeholder="请输入合格编号"></el-input>
+        </el-form-item>
+        <el-form-item label="车辆型号" prop="size">
+          <el-select v-model="plateForm.size" placeholder="请输入车辆型号">
+            <el-option value="载货汽车">载货汽车</el-option>
+            <el-option value="越野汽车">越野汽车</el-option>
+            <el-option value="自卸汽车">自卸汽车</el-option>
+            <el-option value="牵引汽车">牵引汽车</el-option>
+            <el-option value="专用汽车">专用汽车</el-option>
+            <el-option value=" 客 车 "> 客 车 </el-option>
+            <el-option value=" 轿 车 "> 轿 车 </el-option>
+            <el-option value=" 未 用 "> 未 用 </el-option>
+            <el-option value="半挂车及专用半挂车">半挂车及专用半挂车</el-option>
+          </el-select>
+        </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>
+    <div class="right">
+      <div class="title">
+        近期挂牌信息
+      </div>
+      <el-carousel height="200px" direction="vertical" :autoplay="true">
+        <el-carousel-item v-for="item in plateList" :key="item.id">
+          <div class="plate">{{item.plate_number}}</div>
+          <div class="name">{{item.real_name}}</div>
+          <div class="time">{{item.create_time}}</div>
+        </el-carousel-item>
+      </el-carousel>
+    </div>
   </div>
 </template>
 
@@ -48,72 +75,78 @@
       };
 
       return {
+        plateList: [],
+        plateNumbers: [],
+        plateNumber: '',
         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: '菏泽市'
-          }, ]
-        }],
+        citis: [
+          {
+            value: '北京',
+            label: '北京',
+          },
+          {
+            value: '天津',
+            label: '天津',
+          },
+          {
+            value: '上海',
+            label: '上海',
+          },{
+            value: '重庆',
+            label: '重庆',
+          },{
+            value: '山东',
+            label: '山东',
+            children: [{
+              value: '济南市',
+              label: '济南市'
+            }, {
+              value: '青岛市',
+              label: '青岛市'
+            }, {
+              value: '日照市',
+              label: '日照市'
+            }, {
+              value: '淄博市',
+              label: '淄博市'
+            }, {
+              value: '枣庄市',
+              label: '枣庄市'
+            }, {
+              value: '东营市',
+              label: '东营市'
+            }, {
+              value: '烟台市',
+              label: '烟台市'
+            }, {
+              value: '潍坊市',
+              label: '潍坊市'
+            }, {
+              value: '济宁市',
+              label: '济宁市'
+            }, {
+              value: '泰安市',
+              label: '泰安市'
+            }, {
+              value: '威海市',
+              label: '威海市'
+            }, {
+              value: '临沂市',
+              label: '临沂市'
+            }, {
+              value: '德州市',
+              label: '德州市'
+            }, {
+              value: '聊城市',
+              label: '聊城市'
+            }, {
+              value: '滨州市',
+              label: '滨州市'
+            }, {
+              value: '菏泽市',
+              label: '菏泽市'
+            }, ]
+          }],
 
         plateForm: {
           logo: '',
@@ -134,30 +167,165 @@
         }
       };
     },
+    mounted() {
+      this.getPlateInfo();
+    },
     methods: {
+      getPlateInfo() {
+        this.$ajax.post("/traffic/selectPlateInfo",{},r=>{
+          this.plateList = r;
+        })
+      },
+      getPlateNumber(address) {
+        let plate = '';
+        switch (address) {
+          case "北京" : plate = "京A·";break;
+          case "天津" : plate = "津A·";break;
+          case "重庆" : plate = "渝A·";break;
+          case "上海" : plate = "沪A·";break;
+          case "济南市" : plate = "鲁A·";break;
+          case "青岛市" : plate = "鲁B·";break;
+          case "日照市" : plate = "鲁L·";break;
+          case "淄博市" : plate = "鲁C·";break;
+          case "枣庄市" : plate = "鲁D·";break;
+          case "东营市" : plate = "鲁E·";break;
+          case "烟台市" : plate = "鲁F·";break;
+          case "潍坊市" : plate = "鲁G·";break;
+          case "济宁市" : plate = "鲁H·";break;
+          case "泰安市" : plate = "鲁J·";break;
+          case "威海市" : plate = "鲁K·";break;
+          case "临沂市" : plate = "鲁Q·";break;
+          case "德州市" : plate = "鲁N·";break;
+          case "聊城市" : plate = "鲁P·";break;
+          case "滨州市" : plate = "鲁M·";break;
+          case "菏泽市" : plate = "鲁R·";break;
+          default: ;
+        }
+        return plate;
+      },
+      getRandom() {
+        let plateNumber = '';
+        let codeChars = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G',
+          'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V',
+          'W', 'X', 'Y', 'Z'];
+        for (let i = 0; i < 5; i++) {
+          let index= Math.floor(Math.random()*36);
+          plateNumber += codeChars[index];
+        }
+        return plateNumber;
+      },
       handleChange(value) {
-        console.log(value);
-      },
-
-      submitForm(formName) {
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            alert('submit!');
-          } else {
-            console.log('error submit!!');
-            return false;
+        if (value[1] === '' || value[1] === undefined) {
+          this.$message({
+            type: 'warning',
+            message: '暂时只能为山东地区开放，其他地区敬请开放'
+          })
+        } else {
+          let plateList = [];
+          for (let i = 0; i < 10; i++) {
+            let one = this.getPlateNumber(value[1])+this.getRandom();
+            plateList.push(one)
           }
-        });
+          this.plateNumbers = plateList;
+        }
+
       },
 
-      resetForm(formName) {
-        this.$refs[formName].resetFields();
+      submitForm() {
+        if (this.plateNumber === '') {
+          this.$message({
+            type: 'warning',
+            message: '号牌号码不能为空'
+          })
+        } else if (this.plateForm.logo === '') {
+          this.$message({
+            type: 'warning',
+            message: '车辆品牌不能为空'
+          })
+        } else if (this.plateForm.number === '') {
+          this.$message({
+            type: 'warning',
+            message: '合格编号不能为空'
+          })
+        } else if (this.plateForm.size === '') {
+          this.$message({
+            type: 'warning',
+            message: '车辆型号不能为空'
+          })
+        } else {
+          this.$confirm('确认预约, 是否继续?', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            this.$ajax.post("/traffic/insertPlateInfo",{
+              createId:JSON.parse(sessionStorage.getItem("userInfo")).user_id,plateNumber:this.plateNumber,
+              carBrand: this.plateForm.logo,qualifiedNo:this.plateForm.number,carSize:this.plateForm.size,
+              carType:"二手车"},r=>{
+              if (r === 1) {
+                this.$message({
+                  type: 'success',
+                  message: "预选成功"
+                })
+                location.reload();
+              } else {
+                this.$message.error("网络异常，请稍后再试")
+              }
+            })
+          }).catch(() => {
+            this.$message({
+              type: 'info',
+              message: '已取消预约'
+            });
+          });
+        }
+      },
+
+      resetForm() {
+        this.value = '';
+        this.plateForm.logo = '';
+        this.plateForm.number = '';
+        this.plateForm.size = '';
       }
     }
   }
 </script>
 
 <style>
+  .el-carousel__item div{
+    padding: 1rem;
+  }
+  .left , .right{
+    width: 50%;
+  }
+  .el-radio:nth-child(1){
+    margin-left: 10px;
+  }
+  .el-radio{
+    margin-right: 0 !important;
+    width: 47%;
+    margin-bottom: 0.5rem;
+  }
+  .plate-number{
+    overflow: auto;
+    height: 10rem;
+    border: 1px solid #EEEEEE;
+    margin-bottom: 1rem;
+    width: 36rem;
+    padding: 1rem;
+    box-sizing: border-box;
+  }
+  .plate .title{
+    padding: 0 1rem 1rem 0;
+    font-weight: bold;
+    font-size: 1.2rem;
+  }
+  .plate{
+    display: flex;
+    background: #FFFFFF;
+    padding: 1rem;
+    margin-top: 1.5rem;
+  }
   .el-input {
     width: 30rem;
   }
diff --git a/traffic-front/src/router/index.js b/traffic-front/src/router/index.js
index 2ca0429..f15bbdc 100644
--- a/traffic-front/src/router/index.js
+++ b/traffic-front/src/router/index.js
@@ -8,7 +8,7 @@ export default new Router({
     {
       path: '/index',
       name: 'index',
-      component:() => import('@/components/index'),
+      component:() => import('@/components/Index'),
       children:[
         {
           path: 'homepage',
@@ -16,6 +16,12 @@ export default new Router({
 
           component:() => import('@/components/Homepage')
         },
+        {
+          path: 'noticecontent',
+          name: 'noticecontent',
+
+          component:() => import('@/components/NoticeContent')
+        },
         {
           path: 'illprocess',
           name: 'illprocess',