更新

src/App.vue

 <template>
   <div id="app">
-    <nav>
-      <router-link to="/">Home1</router-link> |
-      <router-link to="/about">About</router-link>
-    </nav>
     <router-view />
   </div>
 </template>
 
 <style>
-  #app {
-    font-family: Avenir, Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-align: center;
-    color: #2c3e50;
-  }
-
-  nav {
-    padding: 30px;
+  html,
+  body {
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    height: 100%;
   }
 
-  nav a {
-    font-weight: bold;
-    color: #2c3e50;
-  }
-
-  nav a.router-link-exact-active {
-    color: #42b983;
+  #app {
+    width: 100%;
+    height: 100%;
   }
 </style>
\ No newline at end of file

src/router/index.js

 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import HomeView from '../views/HomeView.vue'
+import Visitor from '../views/visitor/standby.vue'
+import Reserved from '../views/visitor/reserved.vue'
+import Comment from '../views/common.vue'
 
 Vue.use(VueRouter)
 
@@ -17,6 +20,26 @@ const routes = [
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
+  },
+  {
+    path: '/visitor',
+    name: 'visitor',
+    component: Visitor
+  },
+  {
+    path: "/comment",
+    redirect: "/reserved",
+    component: Comment,
+    children: [
+      {
+        path: "/reserved",
+        name: "reserved",
+        component: Reserved,
+        meta: {
+          title: "已预约",
+        },
+      },
+    ]
   }
 ]
 

src/views/common.vue

+<template>
+    <div class="wrapper ">
+        <div class="common">
+            <div class="common_btn">返回主页</div>
+            <div class="common_title">
+                {{title}}
+            </div>
+
+        </div>
+        <div class="content_view">
+            <router-view />
+        </div>
+    </div>
+
+</template>
+
+<script>
+    // @ is an alias to /src
+
+    export default {
+        data() {
+            return {
+                title: ""
+            }
+        },
+        created() {
+            //获得路由传递过来的值
+            this.title = this.$route.params.title;
+        },
+
+        methods: {
+
+        }
+    }
+</script>
+<style scoped>
+    .wrapper {
+        background: #F0F2F8;
+        height: 100%;
+        box-sizing: border-box;
+    }
+
+    .common {
+        width: 100%;
+        height: 70px;
+        background: #507DD9;
+        box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.05);
+        border-radius: 0px 0px 15px 15px;
+        opacity: 1;
+        line-height: 70px;
+        display: flex;
+    }
+
+    .common_btn {
+        margin-left: 31px;
+        margin-right: auto;
+    }
+
+
+    .common_title {
+        margin-right: 50%;
+        margin-left: auto;
+    }
+
+    .content_view {
+
+        flex: 1;
+    }
+</style>
\ No newline at end of file

src/views/visitor/reserved.vue

+<template>
+    <div class="reserved">
+        <div class="content">
+            <div class="content_time">118s</div>
+            <div class="content_card">
+                <div class="card_left">
+
+
+                    <div class="card_tip">请输入预约手机号验证</div>
+                    <el-input value="phone"><template slot="prepend">
+                            <div style="display: flex;align-items: center;">
+                                <span class="card_pre">+86</span>
+                                <div class="card_center"></div>
+                            </div>
+                        </template></el-input>
+                    <div>
+                        <el-button @click="Reserved">已预约</el-button>
+                        <el-button @click="">未预约</el-button>
+                    </div>
+                </div>
+                <div class="card_right">
+                    <el-button v-for="item in numList" :key="item.value">{{item.label}}</el-button>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</template>
+
+<script>
+    // @ is an alias to /src
+
+    export default {
+        data() {
+            return {
+                numList: [{ label: '1', value: 1 }, { label: '2', value: 2 }, { label: '3', value: 3 }, { label: '4', value: 4 },
+                { label: '5', value: 5 }, { label: '6', value: 6 }, { label: '7', value: 7 },
+                { label: '8', value: 8 }, { label: '9', value: 9 }, { label: '退格', value: 10 },
+                { label: '0', value: 0 }, { label: '删除', value: 11 }
+                ]
+            }
+        },
+        methods: {
+            Reserved() {
+                this.$router.replace({
+                    path: "/reserved",
+                });
+            }
+        }
+    }
+</script>
+<style scoped>
+    .reserved {
+
+        width: 100%;
+        padding: 36px;
+
+        min-height: calc(100% - 70px);
+
+        box-sizing: border-box;
+
+    }
+
+    .content {
+        background: #FFFFFF;
+        border-radius: 14px;
+        height: 100%;
+        padding-top: 24px;
+        box-sizing: border-box;
+    }
+
+    .content_time {
+        width: 50px;
+        height: 50px;
+        background: #FFFFFF;
+        opacity: 1;
+        border: 3px solid #5A8FF6;
+        margin: 0 30px 0 auto;
+    }
+
+    .content_card {
+        display: flex;
+        padding: 76px 100px 0 70px;
+    }
+
+    .card_tip {
+        font-size: 28px;
+        color: #000000;
+    }
+
+    ::v-deep .content_card .el-input__inner {
+        width: 377px;
+        height: 78px;
+        background: none;
+        opacity: 1;
+        border: none;
+        padding-left: 0;
+        font-size: 24px;
+    }
+
+    ::v-deep .content_card .el-input {
+        width: 482px;
+        height: 78px;
+        background: #FFFFFF;
+        border-radius: 10px 10px 10px 10px;
+        opacity: 1;
+        border: 1px solid #CBC7C7;
+        margin: 40px 0 120px 0;
+    }
+
+    ::v-deep .content_card .el-input-group__prepend {
+        background-color: none;
+        /* height: 78px; */
+        line-height: 70px;
+    }
+
+    .card_pre {
+
+        color: #000000;
+        font-size: 24px;
+    }
+
+    .card_center {
+        width: 2px;
+        height: 40px;
+        background: #D6D6D6;
+        margin-left: 30px;
+    }
+
+    .card_right {
+        width: 449px;
+        height: 391px;
+        display: flex;
+        flex-wrap: wrap;
+        align-content: flex-start;
+        padding: 30px;
+        margin-right: 0;
+        margin-left: auto;
+    }
+
+    ::v-deep .card_right .el-button {
+        width: 113px;
+        height: 64px;
+        background: #FFFFFF;
+        border-radius: 6px 6px 6px 6px;
+        opacity: 1;
+        border: 1px solid #CBC7C7;
+        margin: 0 25px 25px 0;
+    }
+</style>
\ No newline at end of file

src/views/visitor/standby.vue

+<template>
+    <div class="standby">
+        <div class="header">
+            <div class="header_title">锶想（广州）科技有限公司</div>
+            <div class="header_right">
+                <span class="header_first"><span>{{weekDay }}</span>
+                    <span class="header_mon">{{currentDate}}</span>
+                </span>
+                <span style="line-height: 18px;">|</span>
+                <span class="header_time">{{currentTIme}}</span>
+            </div>
+        </div>
+        <div class="content">
+            <div style="color: #333333;
+font-size: 44px;">欢迎使用</div>
+            <div style="color: #416CCC;
+font-size: 50px;">访客自助登记系统</div>
+            <div>
+                <el-button @click="Reserved">已预约</el-button>
+                <el-button @click="">未预约</el-button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    // @ is an alias to /src
+
+    export default {
+        data() {
+            return {
+                weekDay: '',
+                currentDate: '',
+                currentTIme: "",
+                weekDays: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
+            }
+        },
+        created() {
+            this.getTime()
+        },
+        methods: {
+            Reserved() {
+                this.$router.push({ name: 'reserved', params: { title: '预约验证' } });
+            },
+            getTime() {
+                let nowDate = new Date();
+                let date = {
+                    year: nowDate.getFullYear(),
+                    month: nowDate.getMonth() + 1,
+                    date: nowDate.getDate(),
+                    hours: nowDate.getHours(),
+                    minutes: nowDate.getMinutes(),
+                    seconds: nowDate.getSeconds(),
+                };
+                let newmonth = date.month >= 10 ? date.month : "0" + date.month;
+                let newday = date.date >= 10 ? date.date : "0" + date.date;
+                let newminutes = date.minutes < 10 ? "0" + date.minutes : date.minutes;
+                let newseconds = date.seconds < 10 ? "0" + date.seconds : date.seconds;
+
+                this.currentDate = date.year + "." + newmonth + "." + newday;
+                this.currentTIme = date.hours + ":" + newminutes;
+                this.weekDay = this.weekDays[nowDate.getDay()];
+            },
+        }
+    }
+</script>
+<style scoped>
+    .header {
+        width: 100%;
+        padding: 0 30px;
+        display: flex;
+        justify-content: space-between;
+
+        box-sizing: border-box;
+
+    }
+
+    .header_title {
+        color: #333333;
+        font-size: 16px;
+        margin-top: 20px;
+    }
+
+
+    .header_right {
+        display: flex;
+
+        align-items: center;
+        height: 70px;
+    }
+
+    .header_first {
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        font-size: 13px;
+        margin-right: 10px;
+    }
+
+    .header_mon {
+        margin-top: 2px;
+    }
+
+    .header_time {
+        font-size: 30px;
+        font-weight: bold;
+        margin-left: 6px;
+    }
+
+    .content {
+
+        font-weight: bold;
+        padding: 140px 60px 0;
+        box-sizing: border-box;
+    }
+</style>
\ No newline at end of file