个人信息更新

package-lock.json

@@ -896,7 +896,6 @@
       "version": "7.8.4",
       "resolved": "https://registry.npm.taobao.org/@babel/runtime/download/@babel/runtime-7.8.4.tgz?cache=0&sync_timestamp=1580387792900&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fruntime%2Fdownload%2F%40babel%2Fruntime-7.8.4.tgz",
       "integrity": "sha1-159aIED3yqJNU+VjqtScvAVYEwg=",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.2"
       }
@@ -1106,11 +1105,15 @@
       "integrity": "sha1-aQoUdbhPKohP0HzXl8APXzE1bqg=",
       "dev": true
     },
+    "@vant/icons": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npm.taobao.org/@vant/icons/download/@vant/icons-1.2.1.tgz?cache=0&sync_timestamp=1579418989775&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vant%2Ficons%2Fdownload%2F%40vant%2Ficons-1.2.1.tgz",
+      "integrity": "sha1-MJ/suXpJiYZvBFzmdrVFxFRwHI8="
+    },
     "@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/@vue/babel-helper-vue-jsx-merge-props/download/@vue/babel-helper-vue-jsx-merge-props-1.0.0.tgz",
-      "integrity": "sha1-BI/leZWNpAj7eosqPsBQtQpmEEA=",
-      "dev": true
+      "integrity": "sha1-BI/leZWNpAj7eosqPsBQtQpmEEA="
     },
     "@vue/babel-plugin-transform-vue-jsx": {
       "version": "1.1.2",
@@ -9252,8 +9255,7 @@
     "regenerator-runtime": {
       "version": "0.13.3",
       "resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.13.3.tgz",
-      "integrity": "sha1-fPanfY9cb2Drc8X8GVWyzrAea/U=",
-      "dev": true
+      "integrity": "sha1-fPanfY9cb2Drc8X8GVWyzrAea/U="
     },
     "regenerator-transform": {
       "version": "0.14.1",
@@ -11096,6 +11098,17 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "vant": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npm.taobao.org/vant/download/vant-2.5.0.tgz",
+      "integrity": "sha1-/mALxxkiIILRJFRpWF30G6dB58c=",
+      "requires": {
+        "@babel/runtime": "7.x",
+        "@vant/icons": "1.2.1",
+        "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
+        "vue-lazyload": "1.2.3"
+      }
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npm.taobao.org/vary/download/vary-1.1.2.tgz",
@@ -11162,6 +11175,11 @@
       "integrity": "sha1-UylVzB6yCKPZkLOp+acFdGV+CPI=",
       "dev": true
     },
+    "vue-lazyload": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npm.taobao.org/vue-lazyload/download/vue-lazyload-1.2.3.tgz?cache=0&sync_timestamp=1568801872621&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-lazyload%2Fdownload%2Fvue-lazyload-1.2.3.tgz",
+      "integrity": "sha1-kB+ewVx+bKeHgaK65KNDaGve2yw="
+    },
     "vue-loader": {
       "version": "15.9.0",
       "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-15.9.0.tgz",

package.json

@@ -13,6 +13,7 @@
     "element-ui": "^2.13.0",
     "lodash": "^4.17.15",
     "naf-core": "^0.1.2",
+    "vant": "^2.5.0",
     "vue": "^2.6.11",
     "vue-meta": "^2.3.2",
     "vue-router": "^3.1.5",

src/layout/index/footInfo.vue

@@ -0,0 +1,58 @@
+<template>
+  <div id="footInfo">
+    <el-row>
+      <el-col :span="24">
+        <el-col :span="6" class="link">
+          <el-link :underline="false" @click="$router.push({ path: '/' })">
+            <i class="el-icon-s-home"></i>
+            <p>首页</p>
+          </el-link>
+        </el-col>
+        <el-col :span="6" class="link">
+          <el-link :underline="false" @click="$router.push({ path: '/class/index' })">
+            <i class="el-icon-user-solid"></i>
+            <p>班级名单</p>
+          </el-link>
+        </el-col>
+        <el-col :span="6" class="link">
+          <el-link :underline="false" @click="$router.push({ path: '/question/index' })">
+            <i class="el-icon-s-promotion"></i>
+            <p>问卷调查</p>
+          </el-link>
+        </el-col>
+        <el-col :span="6" class="link">
+          <el-link :underline="false" @click="$router.push({ path: '/user/index' })">
+            <i class="el-icon-s-custom"></i>
+            <p>个人信息</p>
+          </el-link>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'footInfo',
+  props: {},
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.link {
+  padding: 6px 0 0 0;
+  text-align: center;
+}
+.link p {
+  text-decoration: none;
+}
+</style>

src/layout/index/tableData.vue

@@ -0,0 +1,128 @@
+<template>
+  <div id="tableData">
+    <el-row>
+      <el-col :span="24" class="title"> 2020年第{{ timeTable.term }}期高校大学生就业能力拓展训练课程表({{ timeTable.class }}) </el-col>
+      <el-col :span="24" class="tableDta">
+        <table border="1" class="table">
+          <tr>
+            <th colspan="2" class="th">
+              <i class="el-icon-timer time"></i>
+            </th>
+            <th class="th" v-for="(item, index) in timeTable.lessons" :key="index">
+              <p>({{ item.date }})</p>
+            </th>
+          </tr>
+          <tr>
+            <td class="td" colspan="2">
+              <p>8:30 11:30</p>
+            </td>
+            <td class="td" v-for="(item, index) in timeTable.lessons" :key="index">
+              <p>{{ item.name }}</p>
+              <p class="teacher">{{ item.teacherid }}</p>
+            </td>
+          </tr>
+          <tr>
+            <td class="td" colspan="2">
+              <p>11:30 13:30</p>
+            </td>
+            <td colspan="5" class="td">
+              <p>午餐 + 休息</p>
+            </td>
+          </tr>
+          <tr class="display">
+            <td class="td" colspan="2">
+              <p>13:30 16:30</p>
+            </td>
+            <td class="td" v-for="(item, index) in timeTable.lessons" :key="index">
+              <p>{{ item.name }}</p>
+              <p class="teacher">{{ item.teacherid }}</p>
+            </td>
+          </tr>
+          <tr>
+            <td class="td" colspan="2">
+              <p>16:30 17:30</p>
+            </td>
+            <td colspan="5" class="td">
+              <p>晚餐</p>
+            </td>
+          </tr>
+          <tr>
+            <td class="td" colspan="2">
+              <p>17:30 19:45</p>
+            </td>
+            <td class="td">
+              <p>拓展交流</p>
+            </td>
+            <td class="td">
+              <p>课程作业</p>
+              <p>小组展示</p>
+            </td>
+            <td class="td">
+              <p>课程作业</p>
+            </td>
+            <td class="td">
+              <p>课程作业</p>
+              <p>礼仪课</p>
+            </td>
+            <td class="td">
+              <p>结业仪式</p>
+              <p>(11:30-12:00)</p>
+            </td>
+          </tr>
+        </table>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'tableData',
+  props: {
+    timeTable: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.title {
+  padding: 10px 60px;
+  text-align: center;
+  font-size: 18px;
+}
+.table tr {
+  height: 50px;
+}
+.th {
+  width: 58px;
+  text-align: center;
+}
+.th p {
+  font-size: 12px;
+}
+.th .time {
+  font-size: 35px;
+}
+.td {
+  width: 38px;
+  text-align: center;
+}
+.td p {
+  font-size: 12px;
+}
+.td .teacher {
+  color: #ff0000;
+}
+.display td:last-child p {
+  display: none;
+}
+</style>

src/layout/index/topInfo.vue

@@ -0,0 +1,25 @@
+<template>
+  <div id="topInfo">
+    <el-row>
+      <el-col :span="24" class="topInfos">
+        <el-image :src="logoPic" style="width:100%;height:200px;"></el-image>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'topInfo',
+  props: {
+    logoPic: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped></style>

src/layout/user/clickBtn.vue

@@ -0,0 +1,38 @@
+<template>
+  <div id="clickBtn">
+    <el-row>
+      <el-col :span="24">
+        <el-col :span="24" class="native">
+          <van-cell is-link @click="$router.push({ path: '/user/leave' })">请假</van-cell>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'clickBtn',
+  props: {},
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.native {
+  height: 50px;
+  background-color: #fff;
+  margin: 0 0 5px 0;
+}
+/deep/.van-cell {
+  line-height: 30px;
+}
+/deep/.van-cell__right-icon {
+  height: 30px;
+  line-height: 30px;
+}
+</style>

src/layout/user/leaveList.vue

@@ -0,0 +1,53 @@
+<template>
+  <div id="leaveList">
+    <el-row>
+      <el-col
+        :span="24"
+        class="list"
+        v-for="(item, index) in leaveList"
+        :key="index"
+        @click.native="$router.push({ path: '/user/leaveReason', query: { id: item.id } })"
+      >
+        <el-col :span="14" class="time">
+          <p>开始时间：{{ item.starttime }}</p>
+          <p>结束时间：{{ item.endtime }}</p>
+        </el-col>
+        <el-col :span="10" class="ispass"> 请假结果：{{ item.ispass === '0' ? '未通过' : '通过' }} </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'leaveList',
+  props: {
+    leaveList: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.list {
+  width: 97%;
+  padding: 15px;
+  background-color: #fff;
+  border-radius: 15px;
+  margin: 0 5px 5px 5px;
+}
+.list .time p {
+  padding: 5px 0;
+}
+.list .ispass {
+  padding: 20px 0;
+}
+</style>

src/layout/user/topInfo.vue

@@ -0,0 +1,49 @@
+<template>
+  <div id="topInfo">
+    <el-row>
+      <el-col :span="24" class="message" @click.native="$router.push({ path: '/user/personalDetail', query: { id: info.id } })">
+        <el-col :span="6" class="name">
+          {{ info.name }}
+        </el-col>
+        <el-col :span="18" class="mess">
+          <p>{{ info.school_name }}</p>
+          <p>{{ info.faculty }}&nbsp;&nbsp;{{ info.major }}</p>
+          <p>民族:{{ info.nation }}&nbsp;性别:{{ info.gender }}&nbsp;QQ:{{ info.qq }}</p>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'topInfo',
+  props: {
+    info: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.name {
+  text-align: center;
+  line-height: 100px;
+  font-size: 20px;
+  font-family: 微软雅黑;
+  font-weight: bold;
+}
+.mess p {
+  padding: 5px 0;
+  font-size: 16px;
+  color: #333;
+}
+</style>

src/main.js

@@ -3,6 +3,7 @@ import App from './App.vue';
 import router from './router';
 import store from './store';
 import '@/plugins/element.js';
+import '@/plugins/vant';
 import '@/plugins/axios';
 import '@/plugins/check-res';
 import '@/plugins/meta';

src/plugins/check-res.js

@@ -5,6 +5,7 @@
 import Vue from 'vue';
 import _ from 'lodash';
 import { Message } from 'element-ui';
+import { Notify } from 'vant';
 
 const vm = new Vue({});
 const Plugin = {
@@ -23,6 +24,7 @@ const Plugin = {
         }
         if (_okText) {
           Message.success(_okText);
+          Notify({ type: 'success', message: _okText });
         }
         return true;
       }
@@ -30,6 +32,7 @@ const Plugin = {
         return _errText();
       }
       Message.error(_errText || errmsg);
+      Notify({ type: 'danger', message: _okText });
       // Message({ message: _errText || errmsg, duration: 60000 });
       return false;
     };

src/plugins/vant.js

@@ -0,0 +1,5 @@
+import Vue from 'vue';
+import Vant from 'vant';
+import 'vant/lib/index.css';
+
+Vue.use(Vant);

src/router/index.js

@@ -4,11 +4,54 @@ import VueRouter from 'vue-router';
 Vue.use(VueRouter);
 
 const routes = [
+  // 首页
   {
     path: '/',
     name: 'index',
     component: () => import('../views/index.vue'),
   },
+  // 班级名单
+  {
+    path: '/class/index',
+    name: 'class',
+    component: () => import('../views/class/index.vue'),
+  },
+  // 问卷调查
+  {
+    path: '/question/index',
+    name: 'question',
+    component: () => import('../views/question/index.vue'),
+  },
+  // 个人信息
+  {
+    path: '/user/index',
+    name: 'user',
+    component: () => import('../views/user/index.vue'),
+  },
+  // 个人信息-信息详情
+  {
+    path: '/user/personalDetail',
+    name: 'user',
+    component: () => import('../views/user/personalDetail.vue'),
+  },
+  // 个人信息-请假管理
+  {
+    path: '/user/leave',
+    name: 'user',
+    component: () => import('../views/user/leave.vue'),
+  },
+  // 个人信息-添加请假
+  {
+    path: '/user/leaveDetail',
+    name: 'user',
+    component: () => import('../views/user/leaveDetail.vue'),
+  },
+  // 个人信息-请假结果
+  {
+    path: '/user/leaveReason',
+    name: 'user',
+    component: () => import('../views/user/leaveReason.vue'),
+  },
 ];
 
 const router = new VueRouter({

src/views/class/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div id="index">
+    <p>index</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'index',
+  props: {},
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/index.vue

@@ -1,19 +1,93 @@
 <template>
   <div id="index">
-    <p>index</p>
+    <el-row class="info">
+      <el-col :span="24" class="top">
+        <topInfo :logoPic="logoPic"></topInfo>
+      </el-col>
+      <el-col :span="24" class="main">
+        <tableData :timeTable="timeTable"></tableData>
+      </el-col>
+      <el-col :span="24" class="foot">
+        <footInfo></footInfo>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
+import topInfo from '@/layout/index/topInfo.vue';
+import tableData from '@/layout/index/tableData.vue';
+import footInfo from '@/layout/index/footInfo.vue';
 export default {
   name: 'index',
   props: {},
-  components: {},
-  data: () => ({}),
+  components: {
+    topInfo, //头部信息
+    tableData, //课程表
+    footInfo, //底部信息
+  },
+  data: () => ({
+    logoPic: require('@/assets/1.jpg'),
+    timeTable: {
+      term: '1',
+      class: '一班',
+      lessons: [
+        {
+          name: '拓展训练',
+          teacherid: '拓展教练',
+          date: '02-18',
+        },
+        {
+          name: '职业探索',
+          teacherid: '李军凯',
+          date: '02-19',
+        },
+        {
+          name: '优势挖掘',
+          teacherid: '温暖',
+          date: '02-20',
+        },
+        {
+          name: '简历制作',
+          teacherid: '史永姣',
+          date: '02-21',
+        },
+        {
+          name: '模拟面试',
+          teacherid: '李新殿',
+          date: '02-22',
+        },
+      ],
+    },
+  }),
   created() {},
   computed: {},
   methods: {},
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.info {
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  overflow: hidden;
+  background-color: #eceae8;
+}
+.top {
+  width: 100%;
+  height: 200px;
+  overflow: hidden;
+}
+.main {
+  background-color: #fff;
+}
+.foot {
+  width: 100%;
+  height: 50px;
+  position: absolute;
+  bottom: 0;
+  border-top: 1px solid #ccc;
+  background-color: #fff;
+}
+</style>

src/views/question/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div id="index">
+    <p>index</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'index',
+  props: {},
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/user/index.vue

@@ -0,0 +1,82 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="top">
+          <topInfo :info="info"></topInfo>
+        </el-col>
+        <el-col :span="24" class="click">
+          <clickBtn></clickBtn>
+        </el-col>
+        <el-col :span="24" class="foot">
+          <footInfo></footInfo>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import topInfo from '@/layout/user/topInfo.vue';
+import clickBtn from '@/layout/user/clickBtn.vue';
+import footInfo from '@/layout/index/footInfo.vue';
+export default {
+  name: 'index',
+  props: {},
+  components: {
+    topInfo, //个人信息
+    clickBtn, //功能按钮
+    footInfo, //底部信息
+  },
+  data: () => ({
+    info: {
+      name: '顾红伟',
+      id_number: '220182199603257019',
+      phone: '17319450324',
+      gender: '男',
+      nation: '汉族',
+      school_name: '吉林大学',
+      faculty: '计算机学院',
+      major: '应用软件技术专业',
+      entry_year: '2016',
+      finish_year: '2020',
+      school_job: '班长',
+      qq: '1345526645',
+      email: 'guhongwei0324@163.com',
+      family_place: '吉林省长春市朝阳区力旺广场B座16楼',
+      family_is_hard: '1',
+      have_grant: '1',
+      job: '班长',
+    },
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.info {
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  overflow: hidden;
+  background-color: #edeae8;
+}
+.top {
+  height: 100px;
+  background-color: #fff;
+  margin: 0 0 10px 0;
+}
+.click {
+  min-height: 50px;
+}
+.foot {
+  width: 100%;
+  height: 50px;
+  position: absolute;
+  bottom: 0;
+  border-top: 1px solid #ccc;
+  background-color: #fff;
+}
+</style>

src/views/user/leave.vue

@@ -0,0 +1,72 @@
+<template>
+  <div id="leave">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="top">
+          <el-col :span="12" class="title">
+            请假管理
+          </el-col>
+          <el-col :span="12" class="btn">
+            <el-button type="primary" @click="$router.push({ path: '/user/leaveDetail' })">添加</el-button>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="leaves">
+          <leaveList :leaveList="leaveList"></leaveList>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import leaveList from '@/layout/user/leaveList.vue';
+export default {
+  name: 'leave',
+  props: {},
+  components: {
+    leaveList,
+  },
+  data: () => ({
+    leaveList: [
+      {
+        starttime: '2020-02-18',
+        endtime: '2020-02-20',
+        ispass: '0',
+      },
+      {
+        starttime: '2020-02-18',
+        endtime: '2020-02-20',
+        ispass: '1',
+      },
+    ],
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.info {
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  overflow: hidden;
+  background-color: #edeae8;
+}
+.top {
+  height: 50px;
+  line-height: 50px;
+  background-color: #fff;
+  margin: 0 0 10px 0;
+  border-bottom: 1px solid #ccc;
+}
+.top .title {
+  padding: 0 15px;
+  font-size: 20px;
+}
+.top .btn {
+  text-align: right;
+  padding: 0 30px;
+}
+</style>

src/views/user/leaveDetail.vue

@@ -0,0 +1,67 @@
+<template>
+  <div id="leaveDetail">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="top">
+          请假条
+        </el-col>
+        <el-col :span="24">
+          <el-form ref="form" :model="form" label-width="100px">
+            <el-form-item label="开始日期">
+              <el-date-picker v-model="form.starttime" type="date" placeholder="选择开始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker>
+            </el-form-item>
+            <el-form-item label="结束日期">
+              <el-date-picker v-model="form.endtime" type="date" placeholder="选择开始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker>
+            </el-form-item>
+            <el-form-item label="请假理由">
+              <el-input type="textarea" v-model="form.reason" :rows="4" placeholder="请输入请假理由"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="onSubmit">保存</el-button>
+              <el-button @click="cancelClick()">取消</el-button>
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'leaveDetail',
+  props: {},
+  components: {},
+  data: () => ({
+    form: {},
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    onSubmit() {
+      console.log(form);
+    },
+    cancelClick() {
+      this.$router.push({ path: '/user/leave' });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.info {
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  overflow: hidden;
+  background-color: #edeae8;
+}
+.info .top {
+  text-align: center;
+  padding: 15px 0;
+  font-size: 30px;
+}
+/deep/.el-textarea__inner {
+  width: 98%;
+}
+</style>

src/views/user/leaveReason.vue

@@ -0,0 +1,73 @@
+<template>
+  <div id="leaveReason">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="top">
+          请假审核结果
+        </el-col>
+        <el-col :span="24" class="reason">
+          <p>请假开始时间：{{ reasonInfo.starttime }}</p>
+          <p>请假结束时间：{{ reasonInfo.endtime }}</p>
+          <p>
+            请假理由：
+            <span class="span">{{ reasonInfo.reason }}</span>
+          </p>
+          <p>
+            请假拒绝理由：
+            <span class="span">{{ reasonInfo.refcause }}</span>
+          </p>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'leaveReason',
+  props: {},
+  components: {},
+  data: () => ({
+    reasonInfo: {
+      starttime: '2020-02-18',
+      endtime: '2020-02-20',
+      reason: '请假理由请假理由请假理由请假理由请假理由请假理由请假理由请假理由',
+      refcause: '拒绝理由拒绝理由拒绝理由拒绝理由拒绝理由拒绝理由拒绝理由拒绝理由',
+    },
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.info {
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  overflow: hidden;
+  background-color: #edeae8;
+}
+.info .top {
+  text-align: center;
+  padding: 15px 0;
+  font-size: 30px;
+}
+.reason {
+  padding: 0 15px;
+  color: #333;
+}
+.reason p {
+  padding: 10px 0;
+}
+.reason p .span {
+  display: inline-block;
+  text-indent: 2rem;
+  line-height: 30px;
+}
+</style>

src/views/user/personalDetail.vue

@@ -0,0 +1,19 @@
+<template>
+  <div id="personalDetail">
+    <p>个人信息</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'personalDetail',
+  props: {},
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped></style>