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