Commit e6df6fda authored by limeimei's avatar limeimei

访客申请

parent dd1a3714
Pipeline #1928 canceled with stages
...@@ -6,6 +6,10 @@ import Reserved from '../views/visitor/reserved.vue' ...@@ -6,6 +6,10 @@ import Reserved from '../views/visitor/reserved.vue'
import Disreserve from '../views/visitor/disreserve.vue' import Disreserve from '../views/visitor/disreserve.vue'
import Comment from '../views/common.vue' import Comment from '../views/common.vue'
import Authentify from '../views/visitor/authentify.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) Vue.use(VueRouter)
...@@ -28,6 +32,11 @@ const routes = [ ...@@ -28,6 +32,11 @@ const routes = [
name: 'visitor', name: 'visitor',
component: Visitor component: Visitor
}, },
{
path: '/sim',
name: 'vissimitor',
component: Sim
},
{ {
path: "/comment", path: "/comment",
redirect: "/reserved", redirect: "/reserved",
...@@ -58,6 +67,26 @@ const routes = [ ...@@ -58,6 +67,26 @@ const routes = [
title: "实名认证", title: "实名认证",
}, },
}, },
{
path: "/success",
name: "success",
component: AuthSuccess,
meta: {
title: "实名认证",
},
},
{
path: "/card",
name: "card",
component: Card,
},
{
path: "/send",
name: "send",
component: Send,
},
] ]
} }
] ]
......
...@@ -57,6 +57,7 @@ ...@@ -57,6 +57,7 @@
opacity: 1; opacity: 1;
line-height: 70px; line-height: 70px;
display: flex; display: flex;
color: white;
} }
.common_btn { .common_btn {
...@@ -68,6 +69,7 @@ ...@@ -68,6 +69,7 @@
.common_title { .common_title {
margin-right: 50%; margin-right: 50%;
margin-left: auto; margin-left: auto;
} }
.content_view { .content_view {
......
<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
<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
<template> <template>
<div class="reserved"> <div class="reserved">
<div class="content"> <div class="auth_content">
<div class="auth_top"> <div class="auth_top">
<div><el-button @click="toBack">返回上一步</el-button> <div><el-button @click="toBack">返回上一步</el-button>
</div> </div>
<div>您可通过刷身份证、粤居码任意一种进行实名认证</div> <div class="auth_title">您可通过刷<span style="color: #5A8FF6;">
身份证、粤居码</span>任意一种进行实名认证</div>
<div class="content_time">118s</div> <div class="content_time">118s</div>
</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> --> <!-- <el-button type="primary" @click="toNext">下一步</el-button> -->
</div> </div>
</div> </div>
...@@ -67,7 +94,7 @@ ...@@ -67,7 +94,7 @@
} }
.content { .auth_content {
width: 100%; width: 100%;
background: #FFFFFF; background: #FFFFFF;
border-radius: 14px; border-radius: 14px;
...@@ -82,81 +109,84 @@ ...@@ -82,81 +109,84 @@
display: flex; display: flex;
height: 50px; height: 50px;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between !important;
} }
.card_left_c { .auth_title {
width: 193px;
height: 193px; color: #666666;
background: #F4F4F4; font-size: 18px;
border-radius: 10px 10px 10px 10px;
opacity: 1;
margin: 14px 0 54px 156px;
text-align: center;
} }
.card_item { .auth_body {
width: 100%;
height: 90%;
display: flex; display: flex;
height: 46px; flex-direction: column;
margin-bottom: 30px; align-items: center;
margin-left: 20px; justify-content: center;
} }
.card_item_span { .auth_center {
line-height: 46px; display: flex;
width: 120px; }
color: #333333;
font-size: 20px; .auth_img {
width: 386.54px;
height: 287.18px;
} }
.content_time { .auth_center_right {
width: 50px; display: flex;
height: 50px; flex-direction: column;
background: #FFFFFF; margin-top: 38px;
opacity: 1; }
border: 3px solid #5A8FF6;
margin: 24px 0 26px auto;
border-radius: 50%;
text-align: center;
line-height: 50px;
.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 { .auth_span_a {
width: 360px;
height: 78px;
color: #666666;
line-height: 18px;
font-size: 16px;
} }
::v-deep .el-input__icon { .content_time {
height: 46px; 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;
} }
::v-deep .el-button {
.card_right { width: 94px;
width: 100%; height: 34px;
padding: 0;
font-size: 14px;
} }
::v-deep .card_right .el-button { ::v-deep .el-button--primary {
margin: auto 0 50px 0; height: 50px;
} }
</style> </style>
\ No newline at end of file
<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
...@@ -178,4 +178,11 @@ ...@@ -178,4 +178,11 @@
::v-deep .card_right .el-button { ::v-deep .card_right .el-button {
margin: auto 0 50px 0; margin: auto 0 50px 0;
} }
::v-deep .el-button {
width: 94px;
height: 34px;
padding: 0;
font-size: 14px;
}
</style> </style>
\ No newline at end of file
<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
...@@ -15,9 +15,16 @@ ...@@ -15,9 +15,16 @@
font-size: 44px;">欢迎使用</div> font-size: 44px;">欢迎使用</div>
<div style="color: #416CCC; <div style="color: #416CCC;
font-size: 50px;">访客自助登记系统</div> font-size: 50px;">访客自助登记系统</div>
<div> <div class="content_btns">
<el-button @click="Reserved('reserved',0)">已预约</el-button> <div class="content_btn" @click="Reserved('reserved',0)">
<el-button @click="Reserved('disreserve',1)">未预约</el-button> <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> </div>
</div> </div>
...@@ -65,6 +72,13 @@ font-size: 50px;">访客自助登记系统</div> ...@@ -65,6 +72,13 @@ font-size: 50px;">访客自助登记系统</div>
} }
</script> </script>
<style scoped> <style scoped>
.standby {
height: 100%;
width: 100%;
background: url("~@/assets/visitor/background.png") no-repeat;
background-size: 100%;
}
.header { .header {
width: 100%; width: 100%;
padding: 0 30px; padding: 0 30px;
...@@ -85,6 +99,7 @@ font-size: 50px;">访客自助登记系统</div> ...@@ -85,6 +99,7 @@ font-size: 50px;">访客自助登记系统</div>
.header_right { .header_right {
display: flex; display: flex;
color: #FFFFFF;
align-items: center; align-items: center;
height: 70px; height: 70px;
} }
...@@ -113,4 +128,39 @@ font-size: 50px;">访客自助登记系统</div> ...@@ -113,4 +128,39 @@ font-size: 50px;">访客自助登记系统</div>
padding: 140px 60px 0; padding: 140px 60px 0;
box-sizing: border-box; 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> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment