Skip to content

S
sim
Commit 4a28a1f6 authored by limeimei's avatar limeimei
Browse files
Options

3

parent 7cf2f74c
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1901 additions and 12449 deletions
package-lock.json
View file @ 4a28a1f6
This diff is collapsed.
src/router/index.js
View file @ 4a28a1f6
......@@ -67,9 +67,43 @@ const routes = [
name: "reserved",
component: Reserved,
meta: {
title: "已预约",
title: "预约验证",
},
},
{
path: "/disreserve",
name: "disreserve",
component: Disreserve,
meta: {
title: "未预约",
},
},
{
path: "/authentify",
name: "authentify",
component: Authentify,
meta: {
title: "实名认证",
},
},
{
path: "/success",
name: "success",
component: AuthSuccess,
meta: {
title: "实名认证",
},
},
{
path: "/card",
name: "card",
component: Card,
},
{
path: "/send",
name: "send",
component: Send,
},
],
},
......@@ -176,41 +210,9 @@ const routes = [
},
],
},
{
path: "/disreserve",
name: "disreserve",
component: Disreserve,
meta: {
title: "未预约",
},
},
{
path: "/authentify",
name: "authentify",
component: Authentify,
meta: {
title: "实名认证",
},
},
{
path: "/success",
name: "success",
component: AuthSuccess,
meta: {
title: "实名认证",
},
},
{
path: "/card",
name: "card",
component: Card,
},
{
path: "/send",
name: "send",
component: Send,
},
{
path: "/comment2",
redirect: "/phone",
......
src/views/common.vue
View file @ 4a28a1f6
<template>
<div class="wrapper ">
<div class="common">
<img src="@/assets/sim/home.png" alt="" class="home">
<img src="@/assets/visitor/home.png" alt="" class="home">
<div class="common_btn">返回主页</div>
<div class="common_title">
......@@ -10,9 +10,16 @@
</div>
<div class="content_view">
<div class="hotel_content">
<div class="hotel_content_frame">
<el-progress type="circle" color="#5A8FF6" :format="format" :percentage="percentage"
class="hotel_content_frame_countdown">
</el-progress>
<router-view />
</div>
</div>
</div>
</div>
</template>
......@@ -22,59 +29,97 @@
export default {
data() {
return {
title: ""
title: "",
percentage: 100,
currentIndex: "", //当前移动到的路径
time: 120, //时间设定为360
}
}, watch: {
},
watch: {
$route: {
// $route可以用引号，也可以不用引号 监听的对象
handler(to) {
this.title = to.params.title
console.log(to.meta.title)
this.title = to.meta.title
},
},
},
created() {
this.decrease();
},
methods: {
// 自定义进度条
format(percentage) {
const remainingTime = Math.ceil((percentage / 100) * 120);
return `${remainingTime}s`;
},
// 倒计时
decrease() {
var that = this;
that.timer = setInterval(() => {
that.time--;
// 计算进度百分比
that.percentage = (that.time / 120) * 100;
// 检查是否倒计时结束
if (that.time <= 0) {
clearInterval(that.timer); // 清除定时器
// that.gohome();
}
}, 1000); // 每1000毫秒（1秒）更新一次
},
// 返回主页
gohome() {
this.$router.replace({
name: "visitor",
});
},
}
}
</script>
<style scoped>
.wrapper {
background: #F0F2F8;
/* height: 1018px; */
height: auto;
box-sizing: border-box;
}
.home {
width: 18.52px;
width: 18px;
height: 20px;
margin-top: 25px;
margin-right: 7px;
/* margin-top: 25px; */
}
.common {
width: 100%;
height: 70px;
height: 105px;
background: #507DD9;
box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.05);
border-radius: 0px 0px 15px 15px;
box-shadow: 0px 5px 9px 2px rgba(0, 0, 0, 0.05);
border-radius: 0px 0px 23px 23px;
opacity: 1;
line-height: 70px;
line-height: 105px;
padding-left: 46px;
display: flex;
color: white;
padding-left: 31px;
align-items: center;
}
.common_btn {
margin-left: 31px;
margin-left: 7px;
margin-right: auto;
font-size: 16px;
font-size:
24px;
}
......@@ -91,4 +136,27 @@
flex: 1;
}
.hotel_content {
width: 100%;
padding: 54px;
box-sizing: border-box;
}
.hotel_content_frame {
width: 100%;
/* height: 100%; */
position: relative;
border-radius: 21px;
background: white;
z-index: 999;
}
.hotel_content_frame_countdown {
position: absolute;
top: 54px;
right: 45px;
z-index: 999;
}
</style>
\ No newline at end of file
src/views/common2.vue
View file @ 4a28a1f6
......@@ -13,8 +13,10 @@
<div v-for="(item,index) in navList" :key="index" class="phone_title_item">
<div :class="[index<=currentIndex?'item_active title_item_idx ':'title_item_idx ']">{{index+1}}
</div>
<span :class="[index<=currentIndex?'item_active_text title_item ':'title_item ']">{{item}}</span>
<img src="@/assets/sim/right2.png" class="title_item_img" v-if="item!=='发放SIM卡'">
<span
:class="[index<=currentIndex?'item_active_text title_item ':'title_item ']">{{item.name}}</span>
<img src="@/assets/sim/right.png" class="title_item_img" v-if="currentIndex >= index&&item.next ">
<img src="@/assets/sim/right2.png" class="title_item_img" v-else-if="item.next">
</div>
</div>
<div class="hotel_content">
......@@ -37,7 +39,33 @@
data() {
return {
title: "",
navList: ['选择号码', '选择套餐', '实名认证', '订单支付', '发放SIM卡'],
navList: [
{
name: "选择号码",
path: "hotelOrderCheck",
next: true,
},
{
name: "选择套餐",
path: "hotelOrderComfim",
next: true,
},
{
name: "实名认证",
next: true,
},
{
name: "订单支付",
path: "hotelInfo",
next: true,
},
{
name: "发放SIM卡",
path: "hotelInfoPay",
next: false,
},
],
percentage: 100,
currentIndex: "", //当前移动到的路径
time: 120, //时间设定为360
......@@ -77,7 +105,7 @@
// 检查是否倒计时结束
if (that.time <= 0) {
clearInterval(that.timer); // 清除定时器
that.gohome();
// that.gohome();
}
}, 1000); // 每1000毫秒（1秒）更新一次
},
......@@ -94,36 +122,38 @@
<style scoped>
.wrapper {
background: #F0F2F8;
height: 1018px;
/* height: 1018px; */
box-sizing: border-box;
padding-bottom: 50px;
}
.home {
width: 18.52px;
width: 18px;
height: 20px;
margin-top: 25px;
margin-right: 7px;
/* margin-top: 25px; */
}
.common {
width: 100%;
height: 70px;
height: 105px;
background: #507DD9;
box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.05);
border-radius: 0px 0px 15px 15px;
box-shadow: 0px 5px 9px 2px rgba(0, 0, 0, 0.05);
border-radius: 0px 0px 23px 23px;
opacity: 1;
line-height: 70px;
line-height: 105px;
display: flex;
color: white;
padding-left: 31px;
padding-left: 46px;
box-sizing: border-box;
display: flex;
align-items: center;
}
.common_btn {
margin-left: 31px;
margin-right: auto;
font-size: 16px;
font-size: 24px;
cursor: pointer;
}
......@@ -132,7 +162,7 @@
margin-right: 50%;
margin-left: auto;
font-size: 22px;
font-size: 33px;
}
.content_view {
......@@ -144,24 +174,24 @@
display: flex;
justify-content: center;
align-items: center;
height: 80px;
height: 120px;
}
.phone_title_item {
display: flex;
margin-right: 26px;
margin-right: 32px;
align-items: center;
}
.title_item_idx {
width: 16px;
height: 16px;
width: 24px;
height: 24px;
background: #797F90;
border-radius: 50%;
color: #FFFFFF;
text-align: center;
font-size: 13px;
font-size: 20px;
}
.item_active {
......@@ -175,13 +205,13 @@
.title_item {
color: #797F90;
font-size: 15px;
margin: 0 21px 0 15px;
font-size: 23px;
margin: 0 32px 0 23px;
}
.title_item_img {
width: 19.24px;
height: 4.37px;
width: 29px;
height: 7px;
}
.hotel_content {
......
src/views/hotels/order/check.vue
View file @ 4a28a1f6
......@@ -4,25 +4,20 @@
<div class="content_card">
<div class="card_left">
<div class="card_tip">请输入手机号查询订单</div>
<el-input :value="phone" disabled
><template slot="prepend">
<el-input :value="phone" disabled><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>
</template></el-input>
<div class="card_btn">
<div @click="clickBtn(11)" type="info" class="reset">重置</div>
<div @click="comfirm" type="primary" class="comfin">确认</div>
</div>
</div>
<div class="card_right">
<el-button
v-for="item in numList"
:key="item.value"
@click="clickBtn(item.value)"
>{{ item.label }}</el-button
>
<el-button v-for="item in numList" :key="item.value" @click="clickBtn(item.value)">{{ item.label
}}</el-button>
</div>
</div>
</div>
......@@ -30,9 +25,9 @@
</template>
<script>
// @ is an alias to /src
// @ is an alias to /src
export default {
export default {
data() {
return {
phone: "",
......@@ -68,23 +63,23 @@ export default {
});
},
},
};
};
</script>
<style scoped>
.reserved {
.reserved {
width: 100%;
padding-top: 150px;
background: #f6f7fb;
height: 906px;
box-sizing: border-box;
}
}
.content {
.content {
border-radius: 14px;
box-sizing: border-box;
}
}
.content_time {
.content_time {
width: 50px;
height: 50px;
background: #ffffff;
......@@ -94,20 +89,20 @@ export default {
border-radius: 50%;
text-align: center;
line-height: 50px;
}
}
.content_card {
.content_card {
display: flex;
padding: 0 105px;
box-sizing: border-box;
}
}
.card_tip {
.card_tip {
font-size: 42px;
color: #000000;
}
}
::v-deep .content_card .el-input__inner {
::v-deep .content_card .el-input__inner {
width: 377px;
height: 78px;
background: none;
......@@ -115,26 +110,26 @@ export default {
border: none;
padding-left: 0;
font-size: 24px;
}
}
::v-deep .content_card .el-input {
::v-deep .content_card .el-input {
width: 723px;
height: 117px;
background: #ffffff;
border-radius: 10px 10px 10px 10px;
opacity: 1;
border: 1px solid #cbc7c7;
margin: 40px 0 120px 0;
}
margin: 60px 0 180px 0;
}
::v-deep .content_card .el-input-group__prepend {
::v-deep .content_card .el-input-group__prepend {
background-color: white;
border: 0;
line-height: 117px;
border-radius: 50%;
}
}
::v-deep .content_card .el-input.is-disabled .el-input__inner {
::v-deep .content_card .el-input.is-disabled .el-input__inner {
border-color: white;
height: 100%;
font-size: 36px;
......@@ -142,26 +137,26 @@ export default {
border-radius: 10%;
cursor: default;
color: #000000;
}
}
.card_pre {
.card_pre {
color: #000000;
font-size: 36px;
}
}
.card_center {
.card_center {
width: 2px;
height: 117px;
background: #d6d6d6;
margin-left: 30px;
}
}
.card_btn {
.card_btn {
display: flex;
align-items: center;
}
}
.card_right {
.card_right {
width: 674px;
height: 587px;
display: flex;
......@@ -173,9 +168,9 @@ export default {
margin-right: 0;
margin-left: auto;
box-sizing: border-box;
}
}
::v-deep .card_right .el-button {
::v-deep .card_right .el-button {
width: 170px;
height: 96px;
background: #ffffff;
......@@ -185,8 +180,9 @@ export default {
font-weight: bold;
color: #000000;
font-size: 54px;
}
.comfin {
}
.comfin {
background: #eb9c4e;
width: 312px;
height: 105px;
......@@ -197,8 +193,9 @@ export default {
background: #eb9c4e;
cursor: pointer;
border-radius: 6px 6px 6px 6px;
}
.reset {
}
.reset {
width: 312px;
height: 105px;
text-align: center;
......@@ -209,5 +206,5 @@ export default {
border-radius: 6px 6px 6px 6px;
margin-right: 60px;
cursor: pointer;
}
}
</style>
\ No newline at end of file
src/views/sim/authSuccess.vue
View file @ 4a28a1f6
......@@ -57,7 +57,7 @@
.reserved {
width: 100%;
padding: 0 36px;
padding: 0 45px;
/* height: calc(100vh - 150px); */
box-sizing: border-box;
......@@ -67,9 +67,9 @@
.auth_content {
width: 100%;
background: #FFFFFF;
border-radius: 14px;
border-radius: 21px;
height: 835px;
padding: 30px;
padding: 45px;
box-sizing: border-box;
}
......@@ -77,16 +77,17 @@
.auth_top {
width: 100%;
display: flex;
height: 50px;
height: 75px;
position: relative;
justify-content: center;
margin-bottom: 55px;
}
.auth_title {
color: #000000;
font-size: 28px;
font-size: 42px;
width: 100%;
text-align: center;
}
......@@ -105,60 +106,46 @@
}
.auth_img {
width: 167px;
height: 194px;
width: 251px;
height: 291px;
}
.auth_right {
display: flex;
flex-direction: column;
margin-left: 40px;
line-height: 40px;
margin-left: 60px;
line-height: 60px;
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;
font-size: 30px;
margin-top: -30px;
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;
width: 141px;
height: 51px;
font-size: 21px;
}
::v-deep .auth_top .el-button {
position: absolute;
left: 0;
top: 0;
border-radius: 6px 6px 6px 6px;
border: 2px solid #707070;
}
::v-deep .el-button--primary {
height: 50px;
width: 198px;
height: 75px;
background: #437AE5;
font-size: 27px;
border: none;
}
</style>
\ No newline at end of file
src/views/sim/authentify.vue
View file @ 4a28a1f6
......@@ -4,9 +4,13 @@
<div class="auth_top">
<div><el-button @click="toBack">返回上一步</el-button>
</div>
<div class="auth_title">您可通过刷<span style="color: #5A8FF6;">
<div class="auth_title">
<div class="auth_title_a">实名认证
</div>
<div>您可通过刷<span style="color: #5A8FF6;">
身份证、粤居码</span>任意一种进行实名认证</div>
</div>
</div>
<div class="auth_body">
<div class="auth_center">
<img src="@/assets/visitor/auth.png" class="auth_img">
......@@ -35,6 +39,7 @@
</div>
</div>
</div>
</div>
......@@ -62,9 +67,9 @@
.reserved {
width: 100%;
padding: 0 36px;
padding: 0 45px;
/* height: 1018px; */
/* height: auto; */
box-sizing: border-box;
}
......@@ -73,8 +78,8 @@
width: 100%;
background: #FFFFFF;
border-radius: 14px;
height: 835px;
padding: 30px;
height: 935px;
padding: 45px;
box-sizing: border-box;
}
......@@ -82,25 +87,35 @@
.auth_top {
width: 100%;
display: flex;
height: 50px;
/* height: 50px; */
/* align-items: center; */
position: relative;
justify-content: center;
}
.auth_title_a {
font-weight: 500;
color: #000000;
font-size: 42px;
margin-bottom: 51px;
}
.auth_title {
color: #666666;
font-size: 18px;
font-size: 27px;
text-align: center;
}
.auth_body {
width: 100%;
height: 90%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 99px;
}
.auth_center {
......@@ -108,14 +123,14 @@
}
.auth_img {
width: 386.54px;
height: 287.18px;
width: 580px;
height: 431px;
}
.auth_center_right {
display: flex;
flex-direction: column;
margin-top: 38px;
margin-top: 60px;
}
.auth_img_left {
......@@ -143,33 +158,29 @@
font-size: 16px;
}
.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;
width: 141px;
height: 51px;
font-size: 21px;
}
::v-deep .auth_top .el-button {
position: absolute;
left: 0;
top: 0;
border-radius: 6px 6px 6px 6px;
border: 2px solid #707070;
}
::v-deep .el-button--primary {
height: 50px;
width: 198px;
height: 75px;
background: #437AE5;
font-size: 27px;
border: none;
}
</style>
\ No newline at end of file
src/views/sim/choose.vue
View file @ 4a28a1f6
......@@ -54,7 +54,7 @@
position: relative;
padding: 0 36px;
padding: 0 54px;
box-sizing: border-box;
}
......@@ -67,7 +67,7 @@
border-radius: 14px;
opacity: 1;
padding: 30px;
padding: 45px;
box-sizing: border-box;
text-align: center;
......@@ -82,7 +82,7 @@
}
.phone_first {
height: 99px;
height: 149px;
display: flex;
width: 100%;
position: relative;
......@@ -91,7 +91,7 @@
.phone_text {
font-size: 28px;
font-size: 42px;
font-weight: 500;
color: #000000;
/* margin-left: 35%; */
......@@ -112,17 +112,17 @@
.phone_list_item {
align-items: center;
margin: 0 100px 60px 0;
margin-bottom: 90px;
/* margin: 0 100px 90px 0; */
display: flex;
}
.list_item_img {
width: 454px;
height: 140px;
margin-left: 30px;
width: 681px;
height: 210px;
margin-left: 45px;
}
::v-deep .el-button {
......@@ -133,25 +133,33 @@
}
::v-deep .el-button {
width: 94px;
height: 34px;
padding: 0;
font-size: 14px;
width: 141px;
height: 51px;
font-size: 21px;
}
::v-deep .phone_first .el-button {
position: absolute;
left: 0;
top: 0;
border-radius: 6px 6px 6px 6px;
border: 2px solid #707070;
}
::v-deep .el-button--primary {
height: 50px;
width: 198px;
height: 75px;
background: #437AE5;
font-size: 27px;
}
.no_check {
width: 30px;
height: 30px;
width: 45px;
height: 45px;
}
</style>
\ No newline at end of file
src/views/sim/index.vue
View file @ 4a28a1f6
......@@ -63,38 +63,40 @@
.sim {
width: 396px;
height: 113px;
width: 614px;
height: 169px;
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;
box-shadow: 0px 0px 9px 2px rgba(0, 0, 0, 0.3), inset 0px 0px 21px 2px rgba(149, 136, 136, 1);
border-radius: 12px 12px 12px 12px;
opacity: 1;
position: absolute;
left: 147px;
top: 80%;
margin-left: 221px;
top: auto;
bottom: 55px;
display: flex;
padding: 0 32px;
padding: 0 50px;
box-sizing: border-box;
align-items: center;
}
.sim_center {
width: 3px;
height: 32px;
width: 5px;
height: 50px;
background: #713DB0;
margin-left: 20px;
margin-right: 32px;
margin-left: 30px;
margin-right: 50px;
}
.sim_img {
width: 44.81px;
height: 64.16px;
width: 67px;
height: 96px;
}
.sim_text {
font-weight: bold;
color: #713DB0;
font-size: 34px;
font-size: 51px;
}
</style>
\ No newline at end of file
src/views/sim/phone.vue
View file @ 4a28a1f6
......@@ -57,7 +57,7 @@
position: relative;
padding: 0 36px;
padding: 0 86px;
box-sizing: border-box;
}
......@@ -65,12 +65,12 @@
.phone {
width: 100%;
min-height: 818px;
min-height: 827px;
background: #FFFFFF;
border-radius: 14px;
border-radius: 21px;
opacity: 1;
padding: 30px;
padding: 45px;
box-sizing: border-box;
text-align: center;
......@@ -78,60 +78,45 @@
.phone_img {
width: 44.81px;
height: 64.16px;
}
.phone_first {
height: 99px;
height: 149px;
display: flex;
width: 100%;
}
.phone_text {
font-size: 28px;
font-size: 42px;
font-weight: 500;
color: #000000;
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;
margin: 0 0 0 auto;
}
.phone_list {
display: flex;
flex-wrap: wrap;
min-height: 471px;
align-content: start;
align-content: flex-start;
}
.phone_list_item {
width: 166px;
height: 56px;
width: 249px;
height: 86px;
background: #F0F0F0;
border-radius: 4px 4px 4px 4px;
border-radius: 6px;
opacity: 1;
margin: 0 30px 25px 0;
margin: 0 45px 38px 0;
text-align: center;
font-weight: 500;
color: #666666;
font-size: 18px;
line-height: 56px;
font-size: 27px;
line-height: 86px;
cursor: pointer;
}
......@@ -140,13 +125,21 @@
}
::v-deep .el-button {
width: 94px;
height: 34px;
padding: 0;
font-size: 14px;
width: 141px;
height: 51px;
font-size: 21px;
}
::v-deep .el-button--primary {
height: 50px;
width: 198px;
height: 75px;
background: #437AE5;
font-size: 27px;
border: none;
}
/* ::v-deep .el-button--primary {
height: 75px;
} */
</style>
\ No newline at end of file
src/views/sim/register.vue
View file @ 4a28a1f6
......@@ -2,27 +2,42 @@
<div class="order">
<div class="order_top">
<div class="goback" @click="gobak">返回上一步</div>
<div class="order_title">确认信息</div>
<div class="order_title">确认订单</div>
</div>
<div class="collection">
<div class="roominfo">
<div class="roominfo_name">房间号</div>
<!-- <div class="roominfo_name">房间号</div>
<div class="roominfo_num">3602</div>
<div class="roominfo_type">豪华大床房</div>
<div class="roominfo_type">豪华大床房</div> -->
</div>
<div class="roomcheck">
<div class="roomcheck_sin">
<div class="roomcheck_sin_name">入住人数:</div>
<div class="roomcheck_sin_people">1人</div>
<div class="roomcheck_sin_name">机主信息</div>
<div class="roomcheck_sin_people">王大锤</div>
</div>
<div class="roomcheck_sin">
<div class="roomcheck_sin_name">房客信息:</div>
<div class="roomcheck_sin_people">王大锤</div>
<div class="roomcheck_sin_name">您的号码</div>
<div class="roomcheck_sin_people">172-0728-2374</div>
</div>
<div class="roomcheck_sin_bottom">
<div class="roomcheck_sin_name">入住时间</div>
<div class="roomcheck_sin_time">
2023.11.07(入住)——2023.11.08(离店)
<div class="roomcheck_sin_name">您的套餐
<div class="roomcheck_sin_right">
<span class="roomprice_num roomprice_num_a">
¥</span><span class="roomprice_num_text">45</span><span class="roomprice_num_text2">/月</span>
</div>
</div>
<div class="roomcheck_sin_time_a roomcheck_sin_time_title">
套餐内容：
</div>
<div class="roomcheck_sin_time_a">
40GB流量
</div>
<div class="roomcheck_sin_time_a">
本地语音通话和短信任用
</div>
<div class="roomcheck_sin_time_a">
2000分钟中国内地及香港地区漫游语音通话
</div>
</div>
</div>
......@@ -50,7 +65,7 @@
</template>
<script>
export default {
export default {
data() {
return {};
},
......@@ -64,24 +79,27 @@ export default {
this.$router.go(-1);
},
},
};
};
</script>
<style scoped>
.order {
.order {
width: 100%;
height: 100%;
padding: 0 45px;
box-sizing: border-box;
background: #f6f7fb;
background: white;
border-radius: 21px;
}
.order_top {
padding-bottom: 75px;
}
.order_top {
height: 132px;
width: 100%;
position: relative;
}
.goback {
}
.goback {
width: 141px;
height: 51px;
position: absolute;
......@@ -95,40 +113,46 @@ export default {
border: 2px solid #707070;
text-align: center;
line-height: 51px;
}
.order_title {
}
.order_title {
font-size: 42px;
color: #000000;
width: 100%;
text-align: center;
line-height: 132px;
}
.collection {
}
.collection {
width: 100%;
background: white;
height: 729px;
display: flex;
align-items: center;
box-sizing: border-box;
}
.roominfo {
}
.roominfo {
width: 467px;
height: 100%;
padding: 51px 0 0 53px;
box-sizing: border-box;
background: url("~@/assets/hotel/room.png");
background: url("~@/assets/sim/card5.png");
background-size: 100% 100%;
}
.roominfo_name {
}
.roominfo_name {
font-size: 30px;
color: #a28263;
}
.roominfo_num {
}
.roominfo_num {
font-size: 90px;
color: #7f5321;
margin: 12px 0 15px;
}
.roominfo_type {
}
.roominfo_type {
width: 141px;
height: 54px;
border-radius: 6px 6px 6px 6px;
......@@ -137,87 +161,138 @@ export default {
color: #7f5321;
font-size: 21px;
border: 1px solid #7f5321;
}
.roomcheck {
}
.roomcheck {
width: 636px;
height: 100%;
padding: 0 60px 0 45px;
box-sizing: border-box;
}
.roomcheck_sin {
}
.roomcheck_sin {
width: 531px;
height: 156px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #e0e0e0;
}
.roomcheck_sin_name {
}
.roomcheck_sin_name {
font-size: 24px;
color: #666666;
}
.roomcheck_sin_people {
}
.roomcheck_sin_people {
font-size: 27px;
color: #333333;
}
.roomcheck_sin_time {
}
.roomcheck_sin_time {
font-size: 24px;
margin-top: 45px;
color: #000000;
}
.roomcheck_sin_bottom {
}
.roomcheck_sin_time_title {
margin-top: 45px !important;
color: #666666 !important;
}
.roomcheck_sin_time_a {
font-size: 24px;
margin-top: 14px;
color: #000000;
}
.roomprice_num_a {
font-size: 18px !important;
}
.roomcheck_sin_right {
display: inline-block;
float: right;
color: #333333;
}
.roomprice_num_text {
font-weight: bold;
font-size: 36px;
}
.roomprice_num_text2 {
font-size: 21px;
}
.roomcheck_sin_bottom {
margin-top: 60px;
}
.shu {
}
.shu {
width: 1px;
height: 489px;
background: #e0e0e0;
}
.roomprice {
}
.roomprice {
flex: 1;
height: 100%;
padding: 60px 77px 0;
box-sizing: content-box;
}
.roomprice_tips {
}
.roomprice_tips {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.heng {
}
.heng {
width: 168px;
height: 1px;
background: #e0e0e0;
}
.roomprice_title {
}
.roomprice_title {
font-size: 24px;
color: #666666;
text-align: center;
}
.roomprice_num {
}
.roomprice_num {
color: #333333;
font-size: 33px;
text-align: center;
margin: 27px 0 84px;
}
.roomprice_num span {
}
.roomprice_num span {
font-size: 72px;
}
.roomprice_specific {
}
.roomprice_specific {
display: flex;
margin-top: 42px;
justify-content: space-between;
}
.roomprice_specific_name {
}
.roomprice_specific_name {
font-size: 24px;
color: #666666;
}
.roomprice_specific_num {
}
.roomprice_specific_num {
color: #000000;
font-size: 30px;
}
.roomprice_bto {
}
.roomprice_bto {
width: 198px;
height: 75px;
text-align: center;
......@@ -226,7 +301,7 @@ export default {
cursor: pointer;
color: #ffffff;
margin: 150px auto 0;
background: #eb9c4e;
background: #437AE5;
border-radius: 6px 6px 6px 6px;
}
}
</style>
\ No newline at end of file
src/views/visitor/authSuccess.vue
View file @ 4a28a1f6
......@@ -4,7 +4,6 @@
<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">
......@@ -76,9 +75,9 @@
.reserved {
width: 100%;
padding: 36px;
padding: 45px;
height: calc(100vh - 70px);
/* height: calc(100vh - 70px); */
box-sizing: border-box;
}
......@@ -87,8 +86,8 @@
width: 100%;
background: #FFFFFF;
border-radius: 14px;
height: 100%;
padding: 30px;
height: 835px;
/* padding: 45px; */
box-sizing: border-box;
}
......@@ -99,13 +98,14 @@
height: 50px;
align-items: center;
justify-content: space-between !important;
position: relative;
}
.auth_title {
color: #000000;
font-size: 28px;
font-size: 42px;
width: 100%;
text-align: center;
}
......@@ -164,13 +164,27 @@
}
::v-deep .el-button {
width: 94px;
height: 34px;
padding: 0;
font-size: 14px;
width: 141px;
height: 51px;
font-size: 21px;
}
::v-deep .auth_top .el-button {
position: absolute;
left: 0;
top: 0;
border-radius: 6px 6px 6px 6px;
border: 2px solid #707070;
}
::v-deep .el-button--primary {
height: 50px;
width: 198px;
height: 75px;
background: #437AE5;
font-size: 27px;
border: none;
}
</style>
\ No newline at end of file
src/views/visitor/authentify.vue
View file @ 4a28a1f6
......@@ -6,7 +6,6 @@
</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">
......@@ -36,6 +35,7 @@
</div>
</div>
</div>
</div>
......@@ -46,7 +46,6 @@
export default {
data() {
return {
}
},
......@@ -61,101 +60,123 @@
}
</script>
<style scoped>
.reserved {
.reserved {
width: 100%;
padding: 36px;
padding: 0 45px;
height: calc(100vh - 70px);
box-sizing: border-box;
}
.auth_content {
}
.auth_content {
width: 100%;
background: #ffffff;
background: #FFFFFF;
border-radius: 14px;
height: 100%;
padding: 30px;
/* height: 835px; */
padding: 45px;
box-sizing: border-box;
}
.auth_top {
}
.auth_top {
width: 100%;
display: flex;
height: 50px;
align-items: center;
justify-content: space-between !important;
}
position: relative;
justify-content: center;
margin-bottom: 186px;
}
.auth_title_a {
font-weight: 500;
color: #000000;
font-size: 42px;
margin-bottom: 51px;
}
.auth_title {
.auth_title {
color: #666666;
font-size: 18px;
}
.auth_body {
font-size: 27px;
text-align: center;
}
.auth_body {
width: 100%;
height: 90%;
/* height: 90%; */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* justify-content: center; */
/* margin-top: 99px; */
}
.auth_center {
.auth_center {
display: flex;
}
}
.auth_img {
width: 386.54px;
height: 287.18px;
}
.auth_img {
width: 580px;
height: 431px;
}
.auth_center_right {
.auth_center_right {
display: flex;
flex-direction: column;
margin-top: 38px;
}
margin-top: 60px;
}
.auth_img_left {
.auth_img_left {
width: 64px;
height: 12px;
margin-right: 9px;
margin-top: 7px;
}
}
.auth_right {
.auth_right {
display: flex;
margin-bottom: 62px;
}
}
.auth_span {
.auth_span {
font-size: 20px;
}
.auth_span_a {
}
.auth_span_a {
color: #666666;
line-height: 18px;
font-size: 16px;
}
}
.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 {
width: 141px;
height: 51px;
font-size: 21px;
}
::v-deep .el-button--primary {
height: 50px;
}
::v-deep .auth_top .el-button {
position: absolute;
left: 0;
top: 0;
border-radius: 6px 6px 6px 6px;
border: 2px solid #707070;
}
::v-deep .el-button--primary {
width: 198px;
height: 75px;
background: #437AE5;
font-size: 27px;
border: none;
}
</style>
\ No newline at end of file
src/views/visitor/card.vue
View file @ 4a28a1f6
......@@ -5,10 +5,9 @@
<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>
<img src="@/assets/hotel/success2.png" class="success_icon" />
<div class="card_body_text">访客卡发放成功，可在门禁处刷卡通行<br>感谢您的使用</div>
<el-button type="primary" @click="toNext">回到首页</el-button>
......@@ -68,9 +67,6 @@
.reserved {
width: 100%;
padding: 36px;
height: calc(100vh - 70px);
box-sizing: border-box;
}
......@@ -78,9 +74,9 @@
.card_content {
width: 100%;
background: #FFFFFF;
border-radius: 14px;
border-radius: 21px;
height: 100%;
padding: 30px;
padding: 45px;
box-sizing: border-box;
}
......@@ -109,10 +105,10 @@
}
.card_body_text {
margin: 46px 0 65px 0;
margin: 69px 0 98px 0;
color: #333333;
font-size: 26px;
font-size: 39px;
text-align: center;
font-weight: 500;
......@@ -122,6 +118,10 @@
display: flex;
}
.success_icon {
width: 119px;
height: 119px;
}
::v-deep .el-icon-success:before {
......@@ -129,26 +129,22 @@
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;
width: 141px;
height: 51px;
font-size: 21px;
border-radius: 6px;
border: 2px solid #707070;
}
::v-deep .el-button--primary {
height: 50px;
width: 198px;
height: 75px;
background: #437AE5;
font-size: 27px;
border: none;
}
</style>
\ No newline at end of file
src/views/visitor/disreserve.vue
View file @ 4a28a1f6
......@@ -2,11 +2,9 @@
<div class="reserved">
<div class="content">
<div class="card_left">
<div style="margin-top: 30px;height: 34px;"><el-button v-show="this.type==0"
@click="toBack">返回上一步</el-button></div>
<div class="return_btn"><el-button v-show="this.type==0" @click="toBack">返回上一步</el-button></div>
<div class="card_left_c"><img src="@/assets/visitor/camera.png" alt=""
style="width: 58.15px;height: 45.4px;margin:35%;">
<div class="card_left_c"><img src="@/assets/visitor/camera.png" alt="" class="card_left_img">
</div>
<div class="card_item"><span class="card_item_span">姓名：</span>
<el-input v-model="vform.name"></el-input>
......@@ -27,14 +25,14 @@
</div>
<div class="card_center"></div>
<div class="card_right">
<div class="content_time">118s</div>
<div class="card_item"><span class="card_item_span">公司名称：</span>
<el-input v-model="vform.name" placeholder="必填"></el-input>
</div>
<div class="card_item"><span class="card_item_span">到访人数：</span>
<el-input v-model="vform.name" placeholder="必填"></el-input>
</div>
<el-button type="primary" @click="toNext">下一步</el-button>
<div class="card_item_next"><el-button type="primary" @click="toNext">下一步</el-button></div>
</div>
</div>
</div>
......@@ -82,10 +80,16 @@
}
</script>
<style scoped>
.return_btn {
/* margin-top: 45px; */
position: absolute;
height: 51px;
}
.reserved {
width: 100%;
padding: 36px;
padding: 75px;
box-sizing: border-box;
......@@ -97,92 +101,97 @@
background: #FFFFFF;
border-radius: 14px;
height: 880px;
padding: 0 30px;
/* padding: 0 45px; */
box-sizing: border-box;
display: flex;
}
.card_left_img {
width: 87px;
height: 68px;
margin: 35%;
}
.card_left_c {
width: 193px;
height: 193px;
width: 290px;
height: 290px;
background: #F4F4F4;
border-radius: 10px 10px 10px 10px;
border-radius: 15px;
opacity: 1;
margin: 14px 0 54px 156px;
margin: 0 309px 81px 234px;
text-align: center;
}
.card_item {
display: flex;
height: 46px;
margin-bottom: 30px;
margin-left: 20px;
height: 69px;
margin-bottom: 45px;
margin-left: 30px;
}
.card_item_span {
line-height: 46px;
width: 120px;
line-height: 69px;
color: #333333;
font-size: 20px;
font-size: 30px;
margin-right: 10px;
}
.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;
}
::v-deep .el-input__inner {
width: 360px;
height: 46px;
border: 1px solid #707070;
width: 540px;
height: 69px;
border: 2px solid #707070;
color: #333333;
font-size: 30px;
}
::v-deep .el-input {
width: 360px;
height: 78px;
width: 540px;
height: 69px;
}
::v-deep .el-input__icon {
height: 46px;
height: 69px;
}
.card_center {
width: 1px;
height: 548px;
width: 2px;
height: 100%;
background: #E0E0E0;
margin: 50px 43px 50px 85px;
margin: 0 65px 75px 0;
}
.card_right {
width: 100%;
margin-top: 75px;
text-align: center;
}
::v-deep .card_right .el-button {
margin: auto 0 50px 0;
position: absolute;
bottom: 90px;
}
::v-deep .el-button {
width: 94px;
height: 34px;
padding: 0;
font-size: 14px;
width: 141px;
height: 51px;
font-size: 21px;
}
::v-deep .el-button--primary {
width: 198px;
height: 75px;
background: #437AE5;
font-size: 27px;
border: none;
}
</style>
\ No newline at end of file
src/views/visitor/reserved.vue
View file @ 4a28a1f6
<template>
<div class="reserved">
<div class="content">
<div class="content_time">118s</div>
<div class="content_card">
<div class="card_left">
......@@ -76,31 +75,20 @@
background: #FFFFFF;
border-radius: 14px;
height: 880px;
padding-top: 24px;
/* 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;
border-radius: 50%;
text-align: center;
line-height: 50px;
}
.content_card {
display: flex;
padding: 76px 100px 0 70px;
padding: 225px 100px 0 70px;
}
.card_tip {
font-size: 28px;
font-size: 42px;
color: #000000;
}
......@@ -115,24 +103,26 @@
}
::v-deep .content_card .el-input {
width: 482px;
height: 78px;
background: #FFFFFF;
width: 723px;
height: 117px;
background: #ffffff;
border-radius: 10px 10px 10px 10px;
opacity: 1;
border: 1px solid #CBC7C7;
margin: 40px 0 120px 0;
border: 1px solid #cbc7c7;
margin: 60px 0 180px 0;
}
::v-deep .content_card .el-input-group__prepend {
background-color: white;
border: 0;
line-height: 70px;
line-height: 117px;
border-radius: 50%;
}
::v-deep .content_card .el-input.is-disabled .el-input__inner {
border-color: white;
height: 100%;
font-size: 36px;
background-color: white;
border-radius: 10%;
cursor: default;
......@@ -140,25 +130,29 @@
}
.card_pre {
color: #000000;
font-size: 24px;
font-size: 36px;
}
.card_center {
width: 2px;
height: 40px;
background: #D6D6D6;
height: 117px;
background: #d6d6d6;
margin-left: 30px;
}
.card_btn {
display: flex;
align-items: center;
}
::v-deep .card_btn .el-button {
width: 208px;
height: 70px;
border-radius: 4px 4px 4px 4px;
margin-right: 40px;
width: 312px;
height: 105px;
border-radius: 6px;
margin-right: 60px;
font-size: 24px;
font-size: 36px;
}
::v-deep .card_btn .el-button--info {
......@@ -169,24 +163,27 @@
}
.card_right {
width: 449px;
height: 391px;
width: 674px;
height: 587px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
padding: 30px;
padding: 45px 0;
background: white;
margin-right: 0;
margin-left: auto;
box-sizing: border-box;
}
::v-deep .card_right .el-button {
width: 113px;
height: 64px;
width: 170px;
height: 96px;
background: #FFFFFF;
border-radius: 6px 6px 6px 6px;
border-radius: 9px;
opacity: 1;
border: 1px solid #CBC7C7;
margin: 0 25px 25px 0;
margin: 0 38px 38px 0;
font-weight: bold;
color: #000000;
font-size: 36px;
......
src/views/visitor/send.vue
View file @ 4a28a1f6
......@@ -5,7 +5,6 @@
<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">
......@@ -65,21 +64,17 @@
</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;
border-radius: 21px;
height: calc(100vh - 225px);
padding: 45px;
box-sizing: border-box;
}
......@@ -87,7 +82,7 @@
.card_top {
width: 100%;
display: flex;
height: 50px;
/* height: 50px; */
align-items: center;
justify-content: space-between !important;
}
......@@ -108,7 +103,8 @@
}
.card_body_text {
margin: 55px 0 30px 0;
margin: 83px 0 45px 0;
font-size: 39px;
}
.card_center {
......@@ -116,8 +112,8 @@
}
.card_img {
width: 386.54px;
height: 287.18px;
width: 185px;
height: 127px;
}
::v-deep .el-progress-bar {
......
src/views/visitor/standby.vue
View file @ 4a28a1f6
......@@ -6,15 +6,15 @@
<span class="header_first"><span>{{weekDay }}</span>
<span class="header_mon">{{currentDate}}</span>
</span>
<span style="line-height: 18px;">|</span>
<div class="header_center"></div>
<span class="header_time">{{currentTIme}}</span>
</div>
</div>
<div class="content">
<div style="color: #333333;
font-size: 44px;">欢迎使用</div>
font-size:66px;">欢迎使用</div>
<div style="color: #416CCC;
font-size: 50px;">访客自助登记系统</div>
font-size:75px;">访客自助登记系统</div>
<div class="content_btns">
<div class="content_btn" @click="Reserved('reserved',0)">
<div class="content_text">已预约</div>
......@@ -73,10 +73,11 @@ font-size: 50px;">访客自助登记系统</div>
</script>
<style scoped>
.standby {
height: 100%;
/* height: 100%; */
width: 100%;
background: url("~@/assets/visitor/background.png") no-repeat;
background-size: 100%;
box-sizing: border-box;
}
.header {
......@@ -91,8 +92,9 @@ font-size: 50px;">访客自助登记系统</div>
.header_title {
color: #333333;
font-size: 16px;
margin-top: 20px;
font-size:
24px;
margin-top: 44px;
}
......@@ -101,63 +103,70 @@ font-size: 50px;">访客自助登记系统</div>
color: #FFFFFF;
align-items: center;
height: 70px;
height: 105px;
}
.header_first {
display: flex;
flex-direction: column;
text-align: center;
font-size: 13px;
margin-right: 10px;
font-size: 20px;
margin-right: 24px;
}
.header_mon {
margin-top: 2px;
margin-top: 11px;
}
.header_center {
height: 27px;
width: 2px;
background: white;
}
.header_time {
font-size: 30px;
font-size: 45px;
font-weight: bold;
margin-left: 6px;
margin-left: 24px;
}
.content {
height: 100%;
font-weight: bold;
padding: 140px 60px 0;
padding: 57px 90px 142px;
box-sizing: border-box;
}
.content_btns {
display: flex;
margin-top: 85px;
margin-top: 128px;
}
.content_btn {
width: 192px;
height: 239px;
width: 288px;
height: 359px;
background: linear-gradient(136deg, #65DCAC 0%, #4DA8D5 100%);
border-radius: 10px 10px 10px 10px;
border-radius: 15px;
opacity: 1;
padding: 22px;
padding: 33px;
cursor: pointer;
}
.content_e {
background: linear-gradient(136deg, #BDC9DF 0%, #6F84B0 100%) !important;
margin-left: 50px;
margin-left: 75px;
}
.auth_img_left {
width: 114px;
height: 120px;
width: 171px;
height: 180px;
float: right;
margin-top: 78px;
}
.content_text {
font-size: 30px;
font-size: 45px;
font-weight: bold;
color: #FFFFFF;
margin-bottom: 41px;
......
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