diff --git a/ruoyi-ui/src/permission.js b/ruoyi-ui/src/permission.js
index b901d8921..09e961d2a 100644
--- a/ruoyi-ui/src/permission.js
+++ b/ruoyi-ui/src/permission.js
@@ -66,7 +66,7 @@ router.beforeEach((to, from, next) => {
   } else {
     //console.log(whiteList.indexOf(to.path));
     // 没有token
-    if (whiteList.indexOf(to.path) !== -1 ||to.path.indexOf("/experience/choose/") != -1||to.path.indexOf("/experience/apply/") != -1||to.path.indexOf("/experience/result/") != -1) {
+    if (whiteList.indexOf(to.path) !== -1 ||to.path.indexOf("/experience") != -1) {
       // 在免登录白名单，直接进入
       next()
     } else {
diff --git a/ruoyi-ui/src/router/index.js b/ruoyi-ui/src/router/index.js
index 123349722..54414f463 100644
--- a/ruoyi-ui/src/router/index.js
+++ b/ruoyi-ui/src/router/index.js
@@ -53,23 +53,25 @@ export const constantRoutes = [{
       import('@/views/error/401'),
     hidden: true
   },
-  {
-    path: '/experience/choose/:id(\\d+)',
-    component: () =>
-      import('@/views/benyi/experience/choose'),
-    hidden: true
-  },
   {
     path: '/experience/apply/:id(\\d+)',
     component: () =>
-      import('@/views/benyi/experience/apply'),
-    hidden: true
-  },
-  {
-    path: '/experience/result/:id(\\d+)',
-    component: () =>
-      import('@/views/benyi/experience/result'),
-    hidden: true
+      import('@/views/benyi/experience/choose'),
+    hidden: true,
+    children: [
+      {
+        path: '/experience/apply/:id(\\d+)',
+        component: () =>
+          import('@/views/benyi/experience/apply'),
+        hidden: true
+      },
+      {
+        path: '/experience/result/:id(\\d+)',
+        component: () =>
+          import('@/views/benyi/experience/result'),
+        hidden: true
+      }
+    ]
   },
   {
     path: '',
diff --git a/ruoyi-ui/src/views/benyi/experience/apply.vue b/ruoyi-ui/src/views/benyi/experience/apply.vue
index d23781f98..52104a2f4 100644
--- a/ruoyi-ui/src/views/benyi/experience/apply.vue
+++ b/ruoyi-ui/src/views/benyi/experience/apply.vue
@@ -18,7 +18,6 @@
           <el-date-picker
             clearable
             size="small"
-            style="width: 200px"
             v-model="form.csrq"
             type="date"
             value-format="yyyy-MM-dd"
@@ -29,7 +28,6 @@
           <el-date-picker
             clearable
             size="small"
-            style="width: 200px"
             v-model="form.nrysj"
             type="date"
             value-format="yyyy-MM-dd"
@@ -43,7 +41,6 @@
                 clearable
                 size="small"
                 v-model="form.sqtysj"
-                style="width: 200px"
                 type="date"
                 value-format="yyyy-MM-dd"
                 placeholder="申请体验时间"
@@ -63,7 +60,7 @@
       </el-form>
       <div class="btns">
         <el-button class="btn" type="primary" @click="submitForm">确 定</el-button>
-        <el-button class="btn" @click="cancel">返 回</el-button>
+        <el-button class="btn" @click="reset">重 置</el-button>
       </div>
     </div>
   </div>
@@ -156,7 +153,7 @@ export default {
 
 <style lang="scss">
 .apply-input {
-  padding-top: 30px;
+  padding-top: 60px;
   p {
     margin: 0;
   }
@@ -166,6 +163,7 @@ export default {
   }
   .info {
     text-align: center;
+    font-size: 14px;
   }
   .apply-form {
     width: 500px;
@@ -182,18 +180,21 @@ export default {
   .come-txt {
     line-height: 22px;
     text-indent: 2em;
+    font-size: 14px;
   }
   .thanks-top {
     padding: 8px 0 8px 0;
     text-align: right;
+    font-size: 14px;
   }
   .thanks {
     text-align: right;
+    font-size: 14px;
   }
 }
 @media screen and (max-width: 768.89px) {
   .apply-input {
-    padding: 30px 10px 0;
+    padding: 60px 10px 30px;
     .apply-form {
       width: 100%;
     }
diff --git a/ruoyi-ui/src/views/benyi/experience/choose.vue b/ruoyi-ui/src/views/benyi/experience/choose.vue
index ac3cdb503..6789b06de 100644
--- a/ruoyi-ui/src/views/benyi/experience/choose.vue
+++ b/ruoyi-ui/src/views/benyi/experience/choose.vue
@@ -1,8 +1,29 @@
- <template>
-  <div class="result-content">
-    <el-link class="btn" :href="href_apply">入班半日体验申请</el-link>
-    <el-link class="btn" :href="href_result">申请结果查询</el-link>
-  </div>
+<template>
+  <section class="container flex">
+		<aside class="aside navs">
+      <h3 class="title">体验申请</h3>
+      <router-link  class="btn" :class="{'active': active === 0}" :to="href_apply">入班半日体验申请</router-link>
+      <router-link class="btn" :class="{'active': active === 1}" :to="href_result">申请结果查询</router-link>
+    </aside>
+		<section class="flex flex-direction right">
+			<div class="content">
+        <router-view />
+      </div>
+		</section>
+    <span class="el-icon-menu menu-icon" @click="showMenu"></span>
+    <el-drawer
+      :direction="`ltr`"
+      :modal="false"
+      title="我是标题"
+      :visible.sync="drawer"
+      class="navs"
+      :size="`180px`"
+      :with-header="false">
+      <h3 class="title">体验申请</h3>
+      <router-link  class="btn" :class="{'active': active === 0}" :to="href_apply">入班半日体验申请</router-link>
+      <router-link class="btn" :class="{'active': active === 1}" :to="href_result">申请结果查询</router-link>
+    </el-drawer>
+	</section>
 </template>
 <script>
 export default {
@@ -11,6 +32,8 @@ export default {
     return {
       href_apply: "",
       href_result: "",
+      active: 0,
+      drawer: true
     };
   },
   created() {
@@ -18,35 +41,122 @@ export default {
     this.href_apply = "/experience/apply/" + sid;
     this.href_result = "/experience/result/" + sid;
   },
+  mounted () {
+    this.getNav();
+  },
+  watch: {
+    $route: 'getNav'
+  },
+  methods: {
+    getNav () {
+      const path = this.$route.path;
+      if (path.indexOf('apply') > -1) {
+        this.active = 0;
+      } else {
+        this.active = 1;
+      }
+    },
+    showMenu () {
+      this.drawer = true;
+    }
+  }
 };
 </script>
 
 <style lang="scss" scoped>
-  .result-content {
-    height: 100%;
-    background: linear-gradient(-45deg, #6ab7ff, #edf7fb);
-    display: flex;
-    justify-content: center;
-    padding-top: 100px;
-    .btn {
-      width: 200px;
-      height: 40px;
-      line-height: 40px;
-      text-align: center;
-      margin: 0 10px;
-      font-size: 16px;
-      font-weight: 700;
-      text-decoration: none;
-      background: #1b469c;
-      color: #fff;
-      border-radius: 20px;
-      &::after {
-        display: none;
-      }
-      transition: all .5s;
-      &:hover {
-        background: #072052;
+.container {
+  height: 100vh;
+  position: relative;
+  .menu-icon {
+    display: none;
+  }
+  .el-drawer__wrapper {
+    display: none;
+  }
+}
+.flex {
+  display: flex;
+}
+.flex-direction {
+  flex-direction: column;
+}
+.right {
+  flex: 1;
+}
+.content {
+  flex: 1;
+}
+.content > * {
+  box-sizing: border-box;
+}
+.aside {
+  padding: 0;
+  margin: 0;
+  flex: 0 0 200px;
+  background:#011627;
+}
+.navs {
+  .title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #fff;
+    text-align: center;
+    margin: 0;
+    padding: 15px 0;
+    background: #0a56ca;
+  }
+  .btn {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 44px;
+    line-height: 44px;
+    text-align: center;
+    font-size: 14px;
+    text-decoration: none;
+    color: #fff;
+    &::after {
+      display: none;
+    }
+    transition: all .5s;
+    &:hover {
+      background: #77a4ff;
+    }
+    &.active {
+      &::before {
+        content: '';
+        position: absolute;
+        right: 0;
+        top: 18px;
+        border: 5px solid #fff;
+        border-top-color: transparent;
+        border-left-color: transparent;
+        border-bottom-color: transparent;
       }
+      background: #000;
     }
   }
+}
+@media screen and (max-width: 768.89px) {
+  .container {
+    .aside {
+      display: none;
+    }
+    .menu-icon {
+      position: absolute;
+      display: block;
+      left: 15px;
+      top: 20px;
+      font-size: 34px;
+      color: #0a56ca;
+      cursor: pointer;
+    }
+    .el-drawer__wrapper {
+      display: block;
+    }
+    ::v-deep .el-drawer {
+      background:#011627;
+    }
+  }
+}
 </style>
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/benyi/experience/result.vue b/ruoyi-ui/src/views/benyi/experience/result.vue
index f84f5228f..80a6beda0 100644
--- a/ruoyi-ui/src/views/benyi/experience/result.vue
+++ b/ruoyi-ui/src/views/benyi/experience/result.vue
@@ -1,5 +1,5 @@
- <template>
-  <div class="app-container">
+<template>
+  <div class="result-container">
     <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
       <el-form-item label="幼儿姓名" prop="yexm">
         <el-input v-model="queryParams.yexm" placeholder="请输入幼儿姓名" clearable size="small" />
@@ -9,97 +9,86 @@
       </el-form-item>
       <el-form-item>
         <el-button type="primary" size="mini" @click="handleQuery">查询</el-button>
-        <el-button type="primary" size="mini" @click="cancel">返回</el-button>
+        <el-button size="mini" @click="cancel">重置</el-button>
       </el-form-item>
     </el-form>
-    <div v-show="hide">
-      <h2>入班半日体验申请表</h2>
-      <el-row :gutter="15">
-        <el-form ref="form" :model="form" label-width="80px">
-          <el-col :span="12">
-            <el-form-item label="家长姓名" prop="jzxm">
-              <el-input v-model="form.jzxm" placeholder="请输入家长姓名" :disabled="hide" />
-              <el-input v-model="form.schoolid" v-if="false" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="联系方式" prop="lxfs">
-              <el-input v-model="form.lxfs" placeholder="请输入联系方式" :disabled="hide" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="幼儿姓名" prop="yexm">
-              <el-input v-model="form.yexm" placeholder="请输入幼儿姓名" :disabled="hide" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="幼儿出生日期" prop="csrq">
+    <div class="main" v-show="hide">
+      <h2 class="title">体验申请查询结果</h2>
+      <div class="result-info">
+        <h3 class="title">园长答复</h3>
+        <div class="info">
+          <el-alert title="通过申请" type="success" description="hfrn" :closable="false" show-icon></el-alert>
+          <el-alert
+            title="未通过申请"
+            type="error"
+            description="文字说明文字说明文字说明文字说明文字说明文字说明"
+            :closable="false"
+            show-icon
+          ></el-alert>
+        </div>
+      </div>
+      <div class="result-info">
+        <h3 class="title">园长指示</h3>
+        <div class="info">
+          <el-alert title="yzzs" :closable="false" type="info"></el-alert>
+        </div>
+      </div>
+      <div class="result-form">
+        <p class="form-title">提交信息核对</p>
+        <el-form class="form" ref="form" :model="form" label-width="110px">
+          <el-form-item label="家长姓名" prop="jzxm">
+            <el-input v-model="form.jzxm" placeholder="请输入家长姓名" :disabled="hide" />
+            <el-input v-model="form.schoolid" v-if="false" />
+          </el-form-item>
+          <el-form-item label="联系方式" prop="lxfs">
+            <el-input v-model="form.lxfs" placeholder="请输入联系方式" :disabled="hide" />
+          </el-form-item>
+          <el-form-item label="幼儿姓名" prop="yexm">
+            <el-input v-model="form.yexm" placeholder="请输入幼儿姓名" :disabled="hide" />
+          </el-form-item>
+          <el-form-item label="幼儿出生日期" prop="csrq">
+            <el-date-picker
+              clearable
+              size="small"
+              v-model="form.csrq"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="选择幼儿出生日期"
+              :disabled="hide"
+            ></el-date-picker>
+          </el-form-item>
+          <el-form-item label="拟入园时间" prop="nrysj">
+            <el-date-picker
+              clearable
+              size="small"
+              v-model="form.nrysj"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="选择拟入园时间"
+              :disabled="hide"
+            ></el-date-picker>
+          </el-form-item>
+          <div>
+            <el-form-item label="预约体验时间" prop="sqtysj">
               <el-date-picker
                 clearable
                 size="small"
-                style="width: 200px"
-                v-model="form.csrq"
+                v-model="form.sqtysj"
                 type="date"
                 value-format="yyyy-MM-dd"
-                placeholder="选择幼儿出生日期"
+                placeholder="选择申请体验时间"
                 :disabled="hide"
               ></el-date-picker>
             </el-form-item>
-          </el-col>
-
-          <el-col :span="12">
-            <el-form-item label="拟入园时间" prop="nrysj">
-              <el-date-picker
-                clearable
-                size="small"
-                style="width: 200px"
-                v-model="form.nrysj"
-                type="date"
-                value-format="yyyy-MM-dd"
-                placeholder="选择拟入园时间"
-                :disabled="hide"
-              ></el-date-picker>
+            <el-form-item prop="swxw">
+              <el-radio-group v-model="form.swxw" :disabled="hide">
+                <el-radio label="1">上午</el-radio>
+                <el-radio label="2">下午</el-radio>
+              </el-radio-group>
             </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-collapse v-model="activeNames">
-              <el-collapse-item title="园长你好" name="1">
-                <div>
-                  为了更好地了解贵园，我申请来贵园进行入班半日体验。我预约
-                  <el-form-item prop="sqtysj">
-                    <el-date-picker
-                      clearable
-                      size="small"
-                      v-model="form.sqtysj"
-                      type="date"
-                      value-format="yyyy-MM-dd"
-                      placeholder="选择申请体验时间"
-                      :disabled="hide"
-                    ></el-date-picker>
-                  </el-form-item>
-                  <el-form-item prop="swxw">
-                    <el-radio-group v-model="form.swxw" :disabled="hide">
-                      <el-radio label="1">上午</el-radio>
-                      <el-radio label="2">下午</el-radio>
-                    </el-radio-group>
-                  </el-form-item>来园入班体验。请园长为我安排与我孩子年龄段相适应的班级。届时，我将与我的孩子准时入班进行半日体验。
-                </div>
-                <div>请园长批准我的申请为盼。谢谢！</div>
-              </el-collapse-item>
-            </el-collapse>
-          </el-col>
-          <el-col :span="24" v-show="ishf">
-            <el-collapse v-model="activeNames">
-              <el-collapse-item title="园长答复" name="2">{{hfrn}}</el-collapse-item>
-            </el-collapse>
-          </el-col>
-          <el-col :span="24" v-show="ishf">
-            <el-collapse v-model="activeNames">
-              <el-collapse-item title="园长指示" name="3">{{yzzs}}</el-collapse-item>
-            </el-collapse>
-          </el-col>
+          </div>
         </el-form>
-      </el-row>
+      </div>
     </div>
   </div>
 </template>
@@ -111,11 +100,10 @@ export default {
   name: "result",
   data() {
     return {
-      hide: false,
-      ishf: false,
-      hfrn: "",
-      yzzs: "",
-      activeNames: ["1", "2", "3"],
+      hide: true,
+      ishf: true,
+      hfrn: "sddfsdfsdffds",
+      yzzs: "sfdsfdsfdsf",
       // 查询参数
       queryParams: {
         yexm: undefined,
@@ -180,8 +168,78 @@ export default {
     },
     // 返回按钮
     cancel() {
-      this.$router.go(-1);
+      this.queryParams = {
+        yexm: undefined,
+        lxfs: undefined,
+        schoolId: undefined,
+      };
     },
   },
 };
-</script>
\ No newline at end of file
+</script>
+<style lang="scss" scoped>
+.result-container {
+  padding: 60px 15px 0;
+  .main {
+    padding-top: 10px;
+    border-top: 1px solid #eee;
+    .title {
+      text-align: center;
+      font-size: 18px;
+    }
+    .result-form {
+      .form-title {
+        display: flex;
+        align-items: center;
+        text-align: left;
+        text-align: left;
+        font-size: 14px;
+        font-weight: 700;
+        &::before {
+          content: "";
+          width: 3px;
+          height: 14px;
+          background: #0a56ca;
+          display: inline-block;
+          margin: 1px 5px 0 0;
+        }
+      }
+      .form {
+        width: 500px;
+        margin: 30px auto 0;
+      }
+    }
+    .result-info {
+      .title {
+        display: flex;
+        align-items: center;
+        text-align: left;
+        font-size: 14px;
+        font-weight: 700;
+        &::before {
+          content: "";
+          width: 3px;
+          height: 14px;
+          background: #0a56ca;
+          display: inline-block;
+          margin: 1px 5px 0 0;
+        }
+      }
+      .info {
+        padding: 0 20px;
+      }
+    }
+  }
+}
+@media screen and (max-width: 768.89px) {
+  .result-container {
+    .main {
+      .result-form {
+        .form {
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/ruoyi-ui/vue.config.js b/ruoyi-ui/vue.config.js
index 3a756e4cd..57d7f1bb3 100644
--- a/ruoyi-ui/vue.config.js
+++ b/ruoyi-ui/vue.config.js
@@ -34,6 +34,7 @@ module.exports = {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
         target: `http://localhost:8080`,
+        // target: `http://120.53.14.147:9995`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''