访客申请

src/router/index.js

@@ -6,6 +6,10 @@ import Reserved from '../views/visitor/reserved.vue'
 import Disreserve from '../views/visitor/disreserve.vue'
 import Comment from '../views/common.vue'
 import Authentify from '../views/visitor/authentify.vue'
+import AuthSuccess from '../views/visitor/authSuccess.vue'
+import Card from '../views/visitor/card.vue'
+import Send from '../views/visitor/send.vue'
+import Sim from '../views/sim/index.vue'
 
 Vue.use(VueRouter)
 
@@ -28,6 +32,11 @@ const routes = [
     name: 'visitor',
     component: Visitor
   },
+  {
+    path: '/sim',
+    name: 'vissimitor',
+    component: Sim
+  },
   {
     path: "/comment",
     redirect: "/reserved",
@@ -58,6 +67,26 @@ const routes = [
           title: "实名认证",
         },
       },
+      {
+        path: "/success",
+        name: "success",
+        component: AuthSuccess,
+        meta: {
+          title: "实名认证",
+        },
+      },
+      {
+        path: "/card",
+        name: "card",
+        component: Card,
+
+      },
+      {
+        path: "/send",
+        name: "send",
+        component: Send,
+
+      },
     ]
   }
 ]

src/views/common.vue

@@ -57,6 +57,7 @@
         opacity: 1;
         line-height: 70px;
         display: flex;
+        color: white;
     }
 
     .common_btn {
@@ -68,6 +69,7 @@
     .common_title {
         margin-right: 50%;
         margin-left: auto;
+
     }
 
     .content_view {

src/views/sim/index.vue

+<template>
+    <div class="standby">
+
+        <div class="sim">
+            <span>自助办理Sim卡</span>
+            <div class="sim_center"></div>
+            <img src="@/assets/sim/card.png" alt="" class="sim_img">
+        </div>
+    </div>
+</template>
+
+<script>
+    // @ is an alias to /src
+
+    export default {
+        data() {
+            return {
+                weekDay: '',
+                currentDate: '',
+                currentTIme: "",
+                weekDays: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
+            }
+        },
+        created() {
+            this.getTime()
+        },
+        methods: {
+            Reserved(name, type) {
+                this.$router.push({ name: name, params: { title: '访客信息', type: type } });
+            },
+            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>
+    .standby {
+        height: 100%;
+        width: 100%;
+        background: url("~@/assets/sim/background.png") no-repeat;
+        background-size: 100%;
+        position: relative;
+
+    }
+
+
+
+    .sim {
+        width: 396px;
+        height: 113px;
+        background: #FFFFFF;
+        box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.3), inset 0px 0px 14px 1px #958888;
+        border-radius: 8px 8px 8px 8px;
+        opacity: 1;
+        position: absolute;
+        left: 147px;
+        top: 80%;
+    }
+
+    .sim_center {
+        width: 3px;
+        height: 32px;
+        background: #713DB0;
+
+    }
+</style>
\ No newline at end of file

src/views/visitor/authSuccess.vue

+<template>
+    <div class="reserved">
+        <div class="auth_content">
+            <div class="auth_top">
+                <div><el-button @click="toBack">返回上一步</el-button>
+                </div>
+                <div class="content_time">118s</div>
+            </div>
+            <div class="auth_title">实名认证成功</div>
+            <div class="auth_body">
+                <div>
+
+                    <div class="auth_center">
+                        <img src="@/assets/visitor/camera.png" class="auth_img">
+                        <div class="auth_right">
+                            <div>姓名：<span style="color: #666666;">王大锤</span></div>
+                            <div>性别：<span style="color: #666666;">女</span></div>
+                            <div>民族：<span style="color: #666666;">汉</span></div>
+                            <div>出生：<span style="color: #666666;">1994年10月10日</span></div>
+                            <div>住址：<span style="color: #666666;">广东省广州市黄浦区黄埔大道129号</span></div>
+                            <div>身份证号码：<span style="color: #666666;">362421********5627</span></div>
+                        </div>
+                    </div>
+                    <div><el-button type="primary" @click="toNext">下一步</el-button>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+    </div>
+</template>
+
+<script>
+
+    export default {
+        data() {
+            return {
+                type: 1,
+                phone: '',
+                vform: {},
+                options: [{
+                    value: '选项1',
+                    label: '黄金糕'
+                }, {
+                    value: '选项2',
+                    label: '双皮奶'
+                }, {
+                    value: '选项3',
+                    label: '蚵仔煎'
+                }, {
+                    value: '选项4',
+                    label: '龙须面'
+                }, {
+                    value: '选项5',
+                    label: '北京烤鸭'
+                }],
+            }
+        },
+
+        created() {
+            this.type = this.$route.params.type;
+        },
+        methods: {
+            toBack() {
+                this.$router.go(-1);
+            },
+            toNext() {
+                this.$router.push({ name: "card", params: { title: '发放访客卡', } });
+
+            },
+        }
+    }
+</script>
+<style scoped>
+    .reserved {
+
+        width: 100%;
+        padding: 36px;
+
+        height: calc(100vh - 70px);
+        box-sizing: border-box;
+
+    }
+
+    .auth_content {
+        width: 100%;
+        background: #FFFFFF;
+        border-radius: 14px;
+        height: 100%;
+        padding: 30px;
+        box-sizing: border-box;
+
+    }
+
+    .auth_top {
+        width: 100%;
+        display: flex;
+        height: 50px;
+        align-items: center;
+        justify-content: space-between !important;
+    }
+
+    .auth_title {
+
+        color: #000000;
+
+        font-size: 28px;
+        width: 100%;
+        text-align: center;
+    }
+
+    .auth_body {
+        width: 100%;
+        height: 90%;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .auth_center {
+        display: flex;
+    }
+
+    .auth_img {
+        width: 167px;
+        height: 194px;
+    }
+
+    .auth_right {
+        display: flex;
+        flex-direction: column;
+        margin-left: 40px;
+        line-height: 40px;
+        text-align: left;
+        font-size: 20px;
+        margin-top: -20px;
+    }
+
+    .auth_img_left {
+        width: 64px;
+        height: 12px;
+        margin-right: 9px;
+        margin-top: 7px;
+    }
+
+    .auth_right {
+        display: flex;
+        margin-bottom: 62px;
+    }
+
+    .auth_span {
+
+        font-size: 20px;
+
+    }
+
+    .auth_span_a {
+
+        color: #666666;
+        line-height: 18px;
+        font-size: 16px;
+    }
+
+    ::v-deep .el-button {
+        width: 94px;
+        height: 34px;
+        padding: 0;
+        font-size: 14px;
+    }
+
+    ::v-deep .el-button--primary {
+        height: 50px;
+    }
+</style>
\ No newline at end of file

src/views/visitor/authentify.vue

 <template>
     <div class="reserved">
-        <div class="content">
+        <div class="auth_content">
             <div class="auth_top">
                 <div><el-button @click="toBack">返回上一步</el-button>
                 </div>
-                <div>您可通过刷身份证、粤居码任意一种进行实名认证</div>
+                <div class="auth_title">您可通过刷<span style="color: #5A8FF6;">
+                        身份证、粤居码</span>任意一种进行实名认证</div>
                 <div class="content_time">118s</div>
             </div>
+            <div class="auth_body">
+                <div class="auth_center">
+                    <img src="@/assets/visitor/auth.png" class="auth_img">
+                    <div class="auth_center_right">
+                        <div class="auth_right">
+                            <img src="@/assets/visitor/left.png" class="auth_img_left">
+                            <div><span class="auth_span">身份证读取处</span>
+                                <div class="auth_span_a">请将您的身份证放置此区域</div>
+                            </div>
+
+                        </div>
+                        <div class="auth_right">
+                            <img src="@/assets/visitor/left.png" class="auth_img_left">
+                            <div><span class="auth_span">粤居码读取处</span>
+                                <div class="auth_span_a">请将您的粤居码放置此区域</div>
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+                <div style="margin-top:70px;"><el-button type="primary">身份证</el-button>
+
+                    <el-button type="primary">粤居码</el-button>
+                </div>
+
 
+            </div>
 
             <!-- <el-button type="primary" @click="toNext">下一步</el-button> -->
         </div>
@@ -67,7 +94,7 @@
 
     }
 
-    .content {
+    .auth_content {
         width: 100%;
         background: #FFFFFF;
         border-radius: 14px;
@@ -82,81 +109,84 @@
         display: flex;
         height: 50px;
         align-items: center;
-        justify-content: space-between;
+        justify-content: space-between !important;
     }
 
-    .card_left_c {
-        width: 193px;
-        height: 193px;
-        background: #F4F4F4;
-        border-radius: 10px 10px 10px 10px;
-        opacity: 1;
-        margin: 14px 0 54px 156px;
-        text-align: center;
+    .auth_title {
+
+        color: #666666;
+        font-size: 18px;
     }
 
-    .card_item {
+    .auth_body {
+        width: 100%;
+        height: 90%;
         display: flex;
-        height: 46px;
-        margin-bottom: 30px;
-        margin-left: 20px;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
     }
 
-    .card_item_span {
-        line-height: 46px;
-        width: 120px;
-        color: #333333;
+    .auth_center {
+        display: flex;
+    }
 
-        font-size: 20px;
+    .auth_img {
+        width: 386.54px;
+        height: 287.18px;
     }
 
-    .content_time {
-        width: 50px;
-        height: 50px;
-        background: #FFFFFF;
-        opacity: 1;
-        border: 3px solid #5A8FF6;
-        margin: 24px 0 26px auto;
-        border-radius: 50%;
-        text-align: center;
-        line-height: 50px;
+    .auth_center_right {
+        display: flex;
+        flex-direction: column;
+        margin-top: 38px;
+    }
 
+    .auth_img_left {
+        width: 64px;
+        height: 12px;
+        margin-right: 9px;
+        margin-top: 7px;
     }
 
+    .auth_right {
+        display: flex;
+        margin-bottom: 62px;
+    }
 
+    .auth_span {
 
+        font-size: 20px;
 
-    ::v-deep .el-input__inner {
-        width: 360px;
-        height: 46px;
-        border: 1px solid #707070;
-        color: #333333;
     }
 
-    ::v-deep .el-input {
-        width: 360px;
-        height: 78px;
-
+    .auth_span_a {
 
+        color: #666666;
+        line-height: 18px;
+        font-size: 16px;
     }
 
-    ::v-deep .el-input__icon {
-        height: 46px;
-    }
+    .content_time {
+        width: 50px;
+        height: 50px;
+        background: #FFFFFF;
+        opacity: 1;
+        border: 3px solid #5A8FF6;
+        border-radius: 50%;
+        text-align: center;
+        line-height: 50px;
 
-    .card_center {
-        width: 1px;
-        height: 548px;
-        background: #E0E0E0;
-        margin: 50px 43px 50px 85px;
     }
 
-
-    .card_right {
-        width: 100%;
+    ::v-deep .el-button {
+        width: 94px;
+        height: 34px;
+        padding: 0;
+        font-size: 14px;
     }
 
-    ::v-deep .card_right .el-button {
-        margin: auto 0 50px 0;
+    ::v-deep .el-button--primary {
+        height: 50px;
     }
 </style>
\ No newline at end of file

src/views/visitor/card.vue

+<template>
+    <div class="reserved">
+        <div class="card_content">
+            <div class="card_top">
+                <div><el-button @click="toBack">返回上一步</el-button>
+                </div>
+
+                <div class="content_time">118s</div>
+            </div>
+            <div class="card_body">
+                <i class="el-icon-success"></i>
+                <div class="card_body_text">访客卡发放成功，可在门禁处刷卡通行<br>感谢您的使用</div>
+                <el-button type="primary" @click="toNext">回到首页</el-button>
+
+            </div>
+
+
+        </div>
+
+
+    </div>
+    </div>
+    </div>
+</template>
+
+<script>
+
+    export default {
+        data() {
+            return {
+                type: 1,
+                phone: '',
+                vform: {},
+                options: [{
+                    value: '选项1',
+                    label: '黄金糕'
+                }, {
+                    value: '选项2',
+                    label: '双皮奶'
+                }, {
+                    value: '选项3',
+                    label: '蚵仔煎'
+                }, {
+                    value: '选项4',
+                    label: '龙须面'
+                }, {
+                    value: '选项5',
+                    label: '北京烤鸭'
+                }],
+            }
+        },
+
+        created() {
+            this.type = this.$route.params.type;
+        },
+        methods: {
+            toBack() {
+                this.$router.go(-1);
+            },
+            toNext() {
+                this.$router.push({ name: "cardentify", params: { title: '实名认证', } });
+
+            },
+        }
+    }
+</script>
+<style scoped>
+    .reserved {
+
+        width: 100%;
+        padding: 36px;
+
+        height: calc(100vh - 70px);
+        box-sizing: border-box;
+
+    }
+
+    .card_content {
+        width: 100%;
+        background: #FFFFFF;
+        border-radius: 14px;
+        height: 100%;
+        padding: 30px;
+        box-sizing: border-box;
+
+    }
+
+    .card_top {
+        width: 100%;
+        display: flex;
+        height: 50px;
+        align-items: center;
+        justify-content: space-between !important;
+    }
+
+    .card_title {
+
+        color: #666666;
+        font-size: 18px;
+    }
+
+    .card_body {
+        width: 100%;
+        height: 90%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .card_body_text {
+        margin: 46px 0 65px 0;
+
+        color: #333333;
+        font-size: 26px;
+        text-align: center;
+
+        font-weight: 500;
+    }
+
+    .card_center {
+        display: flex;
+    }
+
+
+
+    ::v-deep .el-icon-success:before {
+        font-size: 60px;
+        color: #25CC18;
+    }
+
+    .content_time {
+        width: 50px;
+        height: 50px;
+        background: #FFFFFF;
+        opacity: 1;
+        border: 3px solid #5A8FF6;
+        border-radius: 50%;
+        text-align: center;
+        line-height: 50px;
+
+    }
+
+    ::v-deep .el-button {
+        width: 94px;
+        height: 34px;
+        padding: 0;
+        font-size: 14px;
+    }
+
+    ::v-deep .el-button--primary {
+        height: 50px;
+    }
+</style>
\ No newline at end of file

src/views/visitor/disreserve.vue

@@ -178,4 +178,11 @@
     ::v-deep .card_right .el-button {
         margin: auto 0 50px 0;
     }
+
+    ::v-deep .el-button {
+        width: 94px;
+        height: 34px;
+        padding: 0;
+        font-size: 14px;
+    }
 </style>
\ No newline at end of file

src/views/visitor/send.vue

+<template>
+    <div class="reserved">
+        <div class="card_content">
+            <div class="card_top">
+                <div><el-button @click="toBack">返回上一步</el-button>
+                </div>
+
+                <div class="content_time">118s</div>
+            </div>
+            <div class="card_body">
+                <img src="@/assets/visitor/card.png" class="card_img_left">
+                <div class="card_body_text">访客卡发放中，请耐心等待</div>
+                <el-progress :percentage="50"></el-progress>
+
+
+
+            </div>
+
+            <!-- <el-button type="primary" @click="toNext">下一步</el-button> -->
+        </div>
+    </div>
+    </div>
+</template>
+
+<script>
+
+    export default {
+        data() {
+            return {
+                type: 1,
+                phone: '',
+                vform: {},
+                options: [{
+                    value: '选项1',
+                    label: '黄金糕'
+                }, {
+                    value: '选项2',
+                    label: '双皮奶'
+                }, {
+                    value: '选项3',
+                    label: '蚵仔煎'
+                }, {
+                    value: '选项4',
+                    label: '龙须面'
+                }, {
+                    value: '选项5',
+                    label: '北京烤鸭'
+                }],
+            }
+        },
+
+        created() {
+            this.type = this.$route.params.type;
+        },
+        methods: {
+            toBack() {
+                this.$router.go(-1);
+            },
+            toNext() {
+                this.$router.push({ name: "cardentify", params: { title: '实名认证', } });
+
+            },
+        }
+    }
+</script>
+<style scoped>
+    .reserved {
+
+        width: 100%;
+        padding: 36px;
+
+        height: calc(100vh - 70px);
+        box-sizing: border-box;
+
+    }
+
+    .card_content {
+        width: 100%;
+        background: #FFFFFF;
+        border-radius: 14px;
+        height: 100%;
+        padding: 30px;
+        box-sizing: border-box;
+
+    }
+
+    .card_top {
+        width: 100%;
+        display: flex;
+        height: 50px;
+        align-items: center;
+        justify-content: space-between !important;
+    }
+
+    .card_title {
+
+        color: #666666;
+        font-size: 18px;
+    }
+
+    .card_body {
+        width: 100%;
+        height: 90%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .card_body_text {
+        margin: 55px 0 30px 0;
+    }
+
+    .card_center {
+        display: flex;
+    }
+
+    .card_img {
+        width: 386.54px;
+        height: 287.18px;
+    }
+
+    ::v-deep .el-progress-bar {
+        width: 520px;
+        height: 8px;
+    }
+
+
+    ::v-deep .el-progress-bar__outer {
+        height: 8px !important;
+        width: 520px;
+    }
+
+    ::v-deep .el-progress__text {
+        margin-top: 10px;
+        margin-left: 45%;
+    }
+
+    .content_time {
+        width: 50px;
+        height: 50px;
+        background: #FFFFFF;
+        opacity: 1;
+        border: 3px solid #5A8FF6;
+        border-radius: 50%;
+        text-align: center;
+        line-height: 50px;
+
+    }
+
+    ::v-deep .el-button {
+        width: 94px;
+        height: 34px;
+        padding: 0;
+        font-size: 14px;
+    }
+
+    ::v-deep .el-button--primary {
+        height: 50px;
+    }
+</style>
\ No newline at end of file

src/views/visitor/standby.vue

@@ -15,9 +15,16 @@
 font-size: 44px;">欢迎使用</div>
             <div style="color: #416CCC;
 font-size: 50px;">访客自助登记系统</div>
-            <div>
-                <el-button @click="Reserved('reserved',0)">已预约</el-button>
-                <el-button @click="Reserved('disreserve',1)">未预约</el-button>
+            <div class="content_btns">
+                <div class="content_btn" @click="Reserved('reserved',0)">
+                    <div class="content_text">已预约</div>
+                    <img src="@/assets/visitor/head.png" class="auth_img_left">
+                </div>
+                <div class="content_btn content_e" @click="Reserved('disreserve',1)">
+                    <div class="content_text">未预约</div>
+                    <img src="@/assets/visitor/edit.png" class="auth_img_left">
+                </div>
+
             </div>
         </div>
     </div>
@@ -65,6 +72,13 @@ font-size: 50px;">访客自助登记系统</div>
     }
 </script>
 <style scoped>
+    .standby {
+        height: 100%;
+        width: 100%;
+        background: url("~@/assets/visitor/background.png") no-repeat;
+        background-size: 100%;
+    }
+
     .header {
         width: 100%;
         padding: 0 30px;
@@ -85,6 +99,7 @@ font-size: 50px;">访客自助登记系统</div>
     .header_right {
         display: flex;
 
+        color: #FFFFFF;
         align-items: center;
         height: 70px;
     }
@@ -113,4 +128,39 @@ font-size: 50px;">访客自助登记系统</div>
         padding: 140px 60px 0;
         box-sizing: border-box;
     }
+
+    .content_btns {
+        display: flex;
+        margin-top: 85px;
+    }
+
+    .content_btn {
+        width: 192px;
+        height: 239px;
+        background: linear-gradient(136deg, #65DCAC 0%, #4DA8D5 100%);
+        border-radius: 10px 10px 10px 10px;
+        opacity: 1;
+        padding: 22px;
+        cursor: pointer;
+    }
+
+    .content_e {
+
+        background: linear-gradient(136deg, #BDC9DF 0%, #6F84B0 100%) !important;
+        margin-left: 50px;
+    }
+
+    .auth_img_left {
+        width: 114px;
+        height: 120px;
+        float: right;
+    }
+
+    .content_text {
+        font-size: 30px;
+        font-weight: bold;
+        color: #FFFFFF;
+        margin-bottom: 41px;
+
+    }
 </style>
\ No newline at end of file