Commit 08752d4c authored by April's avatar April

Merge branch 'master' of http://120.77.240.215:9701/limeimei/sim

parents 688e51cb 3b945d48
Pipeline #1972 canceled with stages
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -21,4 +21,8 @@
height: 50px !important;
/* 自定义高度 */
}
.el-progress__text {
font-size: 13px !important;
}
</style>
\ No newline at end of file
......@@ -29,6 +29,10 @@ import Authentify2 from "../views/sim/authentify.vue";
import AuthSuccess2 from "../views/sim/authSuccess.vue";
import hotelIdcardPhotograph from "../views/hotels/real/photograph.vue"
import Payment from "../views/sim/register.vue";
import Payment2 from "../views/sim/pay.vue";
import simCard from "../views/sim/roomcard.vue";
import simSuccess from "../views/sim/success.vue";
Vue.use(VueRouter);
const routes = [
......@@ -66,7 +70,47 @@ 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,
meta: {
title: "发放成功",
},
},
{
path: "/send",
name: "send",
component: Send,
meta: {
title: "发放访客卡",
},
},
],
......@@ -184,41 +228,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",
......@@ -230,6 +242,7 @@ const routes = [
component: Phone,
meta: {
title: "自助办理sim卡系统",
index: 0,
},
},
{
......@@ -238,6 +251,7 @@ const routes = [
component: Choose,
meta: {
title: "自助办理sim卡系统",
index: 1,
},
},
{
......@@ -246,6 +260,7 @@ const routes = [
component: Authentify2,
meta: {
title: "自助办理sim卡系统",
index: 2,
},
},
{
......@@ -253,7 +268,44 @@ const routes = [
name: "realname",
component: AuthSuccess2,
meta: {
title: "实名认证",
title: "自助办理sim卡系统",
index: 2,
},
},
{
path: "/pay",
name: "pay",
component: Payment,
meta: {
title: "自助办理sim卡系统",
index: 3,
},
},
{
path: "/sim/pay",
name: "payment",
component: Payment2,
meta: {
title: "自助办理sim卡系统",
index: 3,
},
},
{
path: "/sim/card",
name: "simCard",
component: simCard,
meta: {
title: "自助办理sim卡系统",
index: 4,
},
},
{
path: "/sim/success",
name: "simSuccess",
component: simSuccess,
meta: {
title: "自助办理sim卡系统",
index: 4,
},
},
],
......
<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_btn" @click="gohome">返回主页</div>
<div class="common_title">
{{title}}
</div>
</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,22 +29,67 @@
export default {
data() {
return {
title: ""
title: "",
percentage: 100,
currentIndex: "", //当前移动到的路径
time: 120, //时间设定为360
timer: null, //定时器
}
}, watch: {
},
watch: {
$route: {
// $route可以用引号,也可以不用引号 监听的对象
handler(to) {
this.title = to.params.title
this.title = to.meta.title
this.time = 120;
},
},
},
created() {
this.decrease();
},
methods: {
// 自定义进度条
format(percentage) {
return `${this.time}s`;
},
// 倒计时
decrease() {
// return
// this.timer && clearInterval(this.timer);
var that = this;
that.timer = setInterval(() => {
that.time--;
// console.log(123)
// 计算进度百分比
that.percentage = (that.time / 120) * 100;
// 检查是否倒计时结束
if (that.time <= 0) {
that.gohome();
}
}, 1000); // 每1000毫秒(1秒)更新一次
},
// 返回主页
gohome() {
clearInterval(this.timer);
this.$router.replace({
name: "visitor",
});
},
},
beforeDestroy() {
// 销毁定时器
clearInterval(this.timer);
this.timer = null;
}
}
......@@ -45,36 +97,37 @@
<style scoped>
.wrapper {
background: #F0F2F8;
/* height: 1018px; */
box-sizing: border-box;
}
.home {
width: 18.52px;
width: 18px;
height: 20px;
margin-top: 25px;
margin-right: 7px;
}
.common {
width: 100%;
height: 70px;
background: #507DD9;
box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.05);
border-radius: 0px 0px 15px 15px;
opacity: 1;
line-height: 70px;
padding-left: 31px;
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:
16px;
}
......@@ -91,4 +144,25 @@
flex: 1;
}
.hotel_content {
width: 1280px;
padding: 30px;
box-sizing: border-box;
}
.hotel_content_frame {
position: relative;
border-radius: 14px;
background: white;
z-index: 999;
}
.hotel_content_frame_countdown {
position: absolute;
top: 24px;
right: 30px;
z-index: 999;
}
</style>
\ No newline at end of file
......@@ -2,16 +2,33 @@
<div class="wrapper ">
<div class="common">
<img src="@/assets/sim/home.png" alt="" class="home">
<div class="common_btn">返回主页</div>
<div class="common_btn" @click="gohome">返回主页</div>
<div class="common_title">
{{title}}
自助办理sim卡系统
</div>
</div>
<div class="content_view">
<div class="phone_title">
<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.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">
<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>
......@@ -21,22 +38,95 @@
export default {
data() {
return {
title: ""
title: "",
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
timer: null, //定时器
}
}, watch: {
$route: {
// $route可以用引号,也可以不用引号 监听的对象
handler(to) {
this.title = to.meta.title
this.currentIndex = to.meta.index;
this.time = 120;
},
},
},
created() {
this.decrease();
this.currentIndex = this.$route.meta.index;
},
methods: {
// 自定义进度条
format(percentage) {
return `${this.time}s`;
},
// 倒计时
decrease() {
// return
// this.timer && clearInterval(this.timer);
var that = this;
that.timer = setInterval(() => {
that.time--;
// 计算进度百分比
that.percentage = (that.time / 120) * 100;
// 检查是否倒计时结束
if (that.time <= 0) {
that.gohome();
}
}, 1000); // 每1000毫秒(1秒)更新一次
},
// 返回主页
gohome() {
clearInterval(this.timer);
this.$router.replace({
name: "sim",
});
},
},
beforeDestroy() {
// 销毁定时器
clearInterval(this.timer);
this.timer = null;
}
}
......@@ -44,36 +134,37 @@
<style scoped>
.wrapper {
background: #F0F2F8;
height: 1018px;
height: 800px;
box-sizing: border-box;
}
.home {
width: 18.52px;
width: 18px;
height: 20px;
margin-top: 25px;
margin-right: 7px;
}
.common {
width: 100%;
width: 1280px;
height: 70px;
background: #507DD9;
background: white;
box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.05);
border-radius: 0px 0px 15px 15px;
border-radius: 0px 0px 23px 23px;
opacity: 1;
line-height: 70px;
display: flex;
color: white;
color: #333333;
padding-left: 31px;
box-sizing: border-box;
display: flex;
align-items: center;
}
.common_btn {
margin-left: 31px;
margin-right: auto;
font-size: 16px;
cursor: pointer;
}
......@@ -88,4 +179,72 @@
flex: 1;
}
.phone_title {
display: flex;
justify-content: center;
align-items: center;
height: 80px;
width: 1280px;
}
.phone_title_item {
display: flex;
margin-right: 21px;
align-items: center;
}
.title_item_idx {
width: 16px;
height: 16px;
background: #797F90;
border-radius: 50%;
color: #FFFFFF;
text-align: center;
line-height: 16px;
font-size: 13px;
}
.item_active {
background: #437AE5 !important;
}
.item_active_text {
color: #437AE5 !important;
}
.title_item {
color: #797F90;
font-size: 15px;
margin: 0 21px 0 10px;
}
.title_item_img {
width: 19.24px;
height: 4.37px;
}
.hotel_content {
height: 620px;
width: 1280px;
padding: 0 30px;
box-sizing: border-box;
}
.hotel_content_frame {
/* width: 1280px; */
position: relative;
border-radius: 14px;
background: white;
z-index: 999;
}
.hotel_content_frame_countdown {
position: absolute;
top: 24px;
right: 30px;
z-index: 999;
}
</style>
\ No newline at end of file
......@@ -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,7 +63,7 @@ export default {
});
},
},
};
};
</script>
<style scoped>
.reserved {
......
<template>
<div class="reserved">
<div class="phone_title">
<div v-for="(item,index) in navList" :key="index" class="phone_title_item">
<div :class="[index<=2?'item_active title_item_idx ':'title_item_idx ']">{{index+1}}</div>
<span :class="[index<=2?'item_active_text title_item ':'title_item ']">{{item}}</span>
<img src="@/assets/sim/right2.png" class="title_item_img" v-if="item!=='发放SIM卡'">
</div>
</div>
<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>
<div class="auth_body">
<div>
......@@ -43,7 +36,6 @@
export default {
data() {
return {
navList: ['选择号码', '选择套餐', '实名认证', '订单支付', '发放SIM卡'],
}
},
......@@ -55,7 +47,7 @@
this.$router.go(-1);
},
toNext() {
this.$router.push({ name: "card", params: { title: '发放访客卡', } });
this.$router.push({ name: "pay" });
},
}
......@@ -65,9 +57,8 @@
.reserved {
width: 100%;
padding: 0 36px;
/* height: 650px; */
/* height: calc(100vh - 150px); */
box-sizing: border-box;
}
......@@ -76,7 +67,7 @@
width: 100%;
background: #FFFFFF;
border-radius: 14px;
height: 835px;
height: 620px;
padding: 30px;
box-sizing: border-box;
......@@ -85,9 +76,10 @@
.auth_top {
width: 100%;
display: flex;
height: 50px;
align-items: center;
justify-content: space-between !important;
height: 75px;
position: relative;
justify-content: center;
margin-bottom: 55px;
}
.auth_title {
......@@ -101,7 +93,7 @@
.auth_body {
width: 100%;
height: 90%;
/* height: 650px; */
text-align: center;
display: flex;
align-items: center;
......@@ -125,32 +117,12 @@
text-align: left;
font-size: 20px;
margin-top: -20px;
margin-bottom: 104px;
}
.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;
......@@ -159,52 +131,22 @@
font-size: 14px;
}
::v-deep .el-button--primary {
height: 50px;
}
.phone_title {
display: flex;
justify-content: center;
align-items: center;
height: 80px;
}
.phone_title_item {
display: flex;
margin-right: 26px;
align-items: center;
}
.title_item_idx {
width: 16px;
height: 16px;
background: #797F90;
border-radius: 50%;
color: #FFFFFF;
text-align: center;
font-size: 13px;
}
.item_active {
background: #437AE5 !important;
}
::v-deep .auth_top .el-button {
position: absolute;
left: 0;
top: 0;
border-radius: 4px;
.item_active_text {
color: #437AE5 !important;
border: 1px solid #707070;
}
.title_item {
color: #797F90;
font-size: 15px;
margin: 0 21px 0 15px;
}
.title_item_img {
width: 19.24px;
height: 4.37px;
::v-deep .el-button--primary {
width: 132px;
height: 50px;
background: #437AE5;
font-size: 18px;
border: none;
}
</style>
\ No newline at end of file
<template>
<div class="reserved">
<div class="phone_title">
<div v-for="(item,index) in navList" :key="index" class="phone_title_item">
<div :class="[index<=2?'item_active title_item_idx ':'title_item_idx ']">{{index+1}}</div>
<span :class="[index<=2?'item_active_text title_item ':'title_item ']">{{item}}</span>
<img src="@/assets/sim/right2.png" class="title_item_img" v-if="item!=='发放SIM卡'">
</div>
</div>
<div class="auth_content">
<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 class="content_time">118s</div>
</div>
</div>
<div class="auth_body">
<div class="auth_center">
......@@ -40,10 +35,11 @@
<el-button type="primary">粤居码</el-button>
</div>
<button @click="toNext">下一步</button>
</div>
</div>
</div>
</div>
......@@ -54,7 +50,6 @@
export default {
data() {
return {
navList: ['选择号码', '选择套餐', '实名认证', '订单支付', '发放SIM卡'],
}
},
......@@ -64,7 +59,10 @@
toBack() {
this.$router.go(-1);
},
toNext() {
this.$router.push({ name: "realname" });
},
}
}
</script>
......@@ -72,9 +70,8 @@
.reserved {
width: 100%;
padding: 0 36px;
/* height: 1018px; */
/* height: auto; */
box-sizing: border-box;
}
......@@ -83,7 +80,7 @@
width: 100%;
background: #FFFFFF;
border-radius: 14px;
height: 835px;
height: 620px;
padding: 30px;
box-sizing: border-box;
......@@ -92,24 +89,35 @@
.auth_top {
width: 100%;
display: flex;
height: 50px;
align-items: center;
justify-content: space-between !important;
/* height: 50px; */
/* align-items: center; */
position: relative;
justify-content: center;
}
.auth_title_a {
font-weight: 500;
color: #000000;
font-size: 28px;
margin-bottom: 34px;
}
.auth_title {
color: #666666;
font-size: 18px;
text-align: center;
}
.auth_body {
width: 100%;
height: 90%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 66px;
}
.auth_center {
......@@ -124,7 +132,7 @@
.auth_center_right {
display: flex;
flex-direction: column;
margin-top: 38px;
margin-top: 40px;
}
.auth_img_left {
......@@ -152,17 +160,6 @@
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;
......@@ -171,51 +168,22 @@
font-size: 14px;
}
::v-deep .el-button--primary {
height: 50px;
}
.phone_title {
display: flex;
justify-content: center;
align-items: center;
height: 80px;
}
.phone_title_item {
display: flex;
margin-right: 26px;
align-items: center;
}
.title_item_idx {
width: 16px;
height: 16px;
background: #797F90;
border-radius: 50%;
color: #FFFFFF;
text-align: center;
font-size: 13px;
}
.item_active {
background: #437AE5 !important;
}
::v-deep .auth_top .el-button {
position: absolute;
left: 0;
top: 0;
border-radius: 4px;
.item_active_text {
color: #437AE5 !important;
border: 1px solid #707070;
}
.title_item {
color: #797F90;
font-size: 15px;
margin: 0 21px 0 15px;
}
.title_item_img {
width: 19.24px;
height: 4.37px;
::v-deep .el-button--primary {
width: 132px;
height: 50px;
background: #437AE5;
font-size: 18px;
border: none;
}
</style>
\ No newline at end of file
<template>
<div class="standby">
<div class="phone_title">
<div v-for="(item,index) in navList" :key="index" class="phone_title_item">
<div :class="[index<2?'item_active title_item_idx ':'title_item_idx ']">{{index+1}}</div>
<span :class="[index<2?'item_active_text title_item ':'title_item ']">{{item}}</span>
<img src="@/assets/sim/right2.png" class="title_item_img" v-if="item!=='发放SIM卡'">
</div>
</div>
<div class="phone">
<div class="phone_first">
<div><el-button @click="toBack">返回上一步</el-button>
</div><span class="phone_text">选择套餐</span>
<div class="content_time">118s</div>
</div>
<div class="phone_list">
<div v-for="item in phoneList" :key="item.value" class=" phone_list_item">
<img src="@/assets/sim/check.png" class="no_check" @click="chooseItem(item.value)"
v-if="currentindex==item.value">
<img src="@/assets/sim/nocheck.png" class="no_check" @click="chooseItem(item.value)" v-else>
<img :src="require('@/assets/sim/'+item.label)" class="list_item_img">
<div class="list_item_img"
:style="{'background-image': 'url('+require('@/assets/sim/'+item.label)+')'}">
<div class="item_top">{{item.title}}GB<span class="item_top_a">流量</span></div>
<div class="item_right"><span class="item_right_a">¥</span><span>{{item.price}}</span><span
class="item_right_b">/月</span></div>
<div class="item_center">本地语音通话和短信任用</div>
<div style="display: flex;align-items: center;">
<div class="item_tottom"></div>{{item.min}}分钟中国内地及香港地区漫游语音通话
</div>
</div>
<!-- <img :src="require('@/assets/sim/'+item.label)" class="list_item_img"> -->
</div>
</div>
<el-button type="primary" @click="toNext">下一步</el-button>
......@@ -36,9 +39,8 @@
data() {
return {
currentindex: null,
navList: ['选择号码', '选择套餐', '实名认证', '订单支付', '发放SIM卡'],
phoneList: [{ value: 1, label: "card1.png" }, { value: 2, label: "card2.png" }, { value: 3, label: "card3.png" },
{ value: 4, label: "card4.png" },]
phoneList: [{ value: 1, title: '40', price: "45", min: '2000', label: "card1.png" }, { title: '60', price: "55", min: '2000', value: 2, label: "card2.png" }, { title: '80', price: "65", min: '200', value: 3, label: "card3.png" },
{ title: '100', price: "75", min: '200', value: 4, label: "card4.png" },]
}
},
created() {
......@@ -63,7 +65,6 @@
position: relative;
padding: 0 36px;
box-sizing: border-box;
}
......@@ -71,7 +72,7 @@
.phone {
width: 100%;
min-height: 818px;
height: 620px;
background: #FFFFFF;
border-radius: 14px;
opacity: 1;
......@@ -82,49 +83,6 @@
}
.phone_title {
display: flex;
justify-content: center;
align-items: center;
height: 80px;
}
.phone_title_item {
display: flex;
margin-right: 26px;
align-items: center;
}
.title_item_idx {
width: 16px;
height: 16px;
background: #797F90;
border-radius: 50%;
color: #FFFFFF;
text-align: center;
font-size: 13px;
}
.item_active {
background: #437AE5 !important;
}
.item_active_text {
color: #437AE5 !important;
}
.title_item {
color: #797F90;
font-size: 15px;
margin: 0 21px 0 15px;
}
.title_item_img {
width: 19.24px;
height: 4.37px;
}
.phone_img {
......@@ -134,10 +92,12 @@
}
.phone_first {
height: 99px;
/* height: 149px; */
display: flex;
width: 100%;
justify-content: space-between;
position: relative;
justify-content: center;
margin-bottom: 42px;
}
.phone_text {
......@@ -145,23 +105,15 @@
font-size: 28px;
font-weight: 500;
color: #000000;
}
/* margin-left: 35%; */
.content_time {
width: 50px;
height: 50px;
background: #FFFFFF;
opacity: 1;
border: 3px solid #5A8FF6;
border-radius: 50%;
text-align: center;
line-height: 50px;
}
.phone_list {
display: flex;
flex-wrap: wrap;
min-height: 471px;
/* min-height: 471px; */
justify-content: space-between;
box-sizing: border-box;
/* align-content: space-between; */
......@@ -171,8 +123,8 @@
.phone_list_item {
align-items: center;
margin: 0 100px 60px 0;
margin-bottom: 60px;
/* margin: 0 100px 90px 0; */
display: flex;
......@@ -180,8 +132,58 @@
.list_item_img {
width: 454px;
height: 140px;
height: 140.22px;
margin-left: 30px;
/* background: #437AE5; */
color: white;
position: relative;
;
padding: 20px;
box-sizing: border-box;
text-align: left;
background-size: 454px 140.22px;
}
.item_top_a {
font-size: 16px;
}
.item_top {
font-size: 24px;
font-weight: 500;
}
.item_right {
position: absolute;
top: 22px;
right: 22px;
color: #000000;
font-size: 24px;
}
.item_right_a {
font-size: 14px;
}
.item_right_b {
font-size: 16px;
}
.item_center {
font-size: 16px;
margin: 10px 0 18px 0;
}
.item_tottom {
width: 17px;
height: 17px;
line-height: 17px;
text-align: center;
background: #BF1E2D;
font-size: 11px;
border-radius: 50%;
margin-right: 8px;
}
::v-deep .el-button {
......@@ -191,8 +193,27 @@
font-size: 14px;
}
::v-deep .phone_first .el-button {
position: absolute;
left: 0;
top: 0;
border-radius: 4px;
border: 1px solid #707070;
}
::v-deep .el-button--primary {
width: 132px;
height: 50px;
background: #437AE5;
font-size: 18px;
}
.no_check {
......
<template>
<div class="standby">
<div class="sim">
<div class="sim" @click="comfim">
<span class="sim_text">自助办理Sim卡</span>
<div class="sim_center"></div>
<img src="@/assets/sim/card.png" alt="" class="sim_img">
......@@ -25,6 +25,11 @@
this.getTime()
},
methods: {
comfim() {
this.$router.push({
name: "phone",
});
},
Reserved(name, type) {
this.$router.push({ name: name, params: { title: '访客信息', type: type } });
},
......@@ -52,35 +57,37 @@
</script>
<style scoped>
.standby {
height: 100vh;
width: 100%;
height: 800px;
width: 1280px;
background: url("~@/assets/sim/background.png") no-repeat;
background-size: 100%;
background-size: 1280px 800px;
background-attachment: fixed;
position: relative;
/* background-attachment: fixed; */
}
.sim {
width: 396px;
width: 426px;
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%;
margin-left: 147px;
margin-top: auto;
bottom: 143px;
display: flex;
padding: 0 32px;
padding: 0 33px;
box-sizing: border-box;
align-items: center;
cursor: pointer;
}
.sim_center {
width: 3px;
height: 32px;
width: 5px;
height: 50px;
background: #713DB0;
margin-left: 20px;
margin-right: 32px;
......@@ -94,6 +101,7 @@
.sim_text {
font-weight: bold;
color: #713DB0;
font-size: 34px;
}
......
<template>
<div class="order">
<div class="order_top">
<div class="goback" @click="gobak">返回上一步</div>
<div class="order_title">订单支付</div>
</div>
<div class="collection">
<div class="price_title">支付金额</div>
<div class="price">¥<span>95</span></div>
<div class="price_type">
<div class="price_wechat">
<img class="price_img" />
<div class="price_tips">使用<span>微信</span>扫一扫进行支付</div>
</div>
<div class="price_alipay">
<img class="price_img" />
<div class="price_tips">使用<span>支付宝</span>扫一扫进行支付</div>
</div>
</div>
<button @click="comfim">下一步</button>
</div>
</div>
</template>
<script>
export default {
methods: {
gobak() {
this.$router.go(-1);
},
comfim() {
this.$router.push({
name: "simCard",
});
},
},
};
</script>
<style scoped>
.order {
width: 100%;
height: 620px;
padding: 30px;
box-sizing: border-box;
background: white;
border-radius: 14px;
}
.order_top {
width: 100%;
position: relative;
}
.goback {
position: absolute;
width: 94px;
height: 34px;
cursor: pointer;
font-size: 16px;
color: #666666;
background: #ffffff;
border-radius: 4px;
border: 1px solid #707070;
text-align: center;
line-height: 34px;
}
.order_title {
font-size: 28px;
color: #000000;
width: 100%;
text-align: center;
}
.collection {
width: 100%;
background: white;
padding-top: 70px;
box-sizing: border-box;
}
.price_title {
font-size: 16px;
color: #666666;
text-align: center;
}
.price {
color: #333333;
font-size: 22px;
margin-top: 27px;
text-align: center;
}
.price span {
font-size: 48px;
}
.price_type {
display: flex;
align-items: center;
justify-content: center;
margin-top: 44px;
}
.price_img {
width: 228px;
height: 228px;
}
.price_wechat {
margin-right: 140px;
}
.price_tips {
font-size: 16px;
color: #999999;
text-align: center;
}
.price_tips span {
color: #999999;
}
</style>
\ No newline at end of file
<template>
<div class="standby">
<div class="phone_title">
<div
v-for="(item, index) in navList"
:key="index"
class="phone_title_item"
>
<div
:class="[
index == 0 ? 'item_active title_item_idx ' : 'title_item_idx ',
]"
>
{{ index + 1 }}
</div>
<span
:class="[index == 0 ? 'item_active_text title_item ' : 'title_item ']"
>{{ item }}</span
>
<img
src="@/assets/sim/right2.png"
class="title_item_img"
v-if="item !== '发放SIM卡'"
/>
</div>
</div>
<div class="phone">
<div class="phone_first">
<span class="phone_text">选择号码</span>
<div class="content_time">118s</div>
<div class="phone_first"><span class="phone_text">选择号码</span>
</div>
<div class="phone_list">
<div
v-for="(item, index) in phoneList"
:key="index"
:class="[
index == currentindex
? 'item_active list_item_active phone_list_item'
: 'phone_list_item',
]"
@click="chooseItem(index)"
>
{{ item.label }}
</div>
<div v-for="(item,index) in phoneList" :key="index"
:class=" [index==currentindex?'item_active list_item_active phone_list_item':'phone_list_item']"
@click="chooseItem(index)">{{item.label}}</div>
</div>
<el-button type="primary" @click="toNext">下一步</el-button>
</div>
</div>
</template>
<script>
// @ is an alias to /src
// @ is an alias to /src
export default {
export default {
data() {
return {
currentindex: null,
navList: ["选择号码", "选择套餐", "实名认证", "订单支付", "发放SIM卡"],
phoneList: [
{ value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" },
],
};
navList: ['选择号码', '选择套餐', '实名认证', '订单支付', '发放SIM卡'],
phoneList: [{ value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" },
{ value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" },
]
}
},
created() {
},
created() {},
methods: {
toNext(name, type) {
this.$router.push({ name: "choose" });
this.$router.push({ name: 'choose' });
},
chooseItem(idx) {
this.currentindex = idx;
},
this.currentindex = idx
},
};
}
}
</script>
<style scoped>
.standby {
height: 100%;
.standby {
height: 620px;
width: 100%;
position: relative;
padding: 0 36px;
/* padding: 0 0px; */
box-sizing: border-box;
}
}
.phone {
.phone {
width: 100%;
min-height: 818px;
background: #ffffff;
/* min-height: 620px; */
background: #FFFFFF;
border-radius: 14px;
opacity: 1;
padding: 30px;
box-sizing: border-box;
text-align: center;
}
.phone_title {
display: flex;
justify-content: center;
align-items: center;
height: 80px;
}
.phone_title_item {
display: flex;
margin-right: 26px;
align-items: center;
}
.title_item_idx {
width: 16px;
height: 16px;
background: #797f90;
border-radius: 50%;
color: #ffffff;
text-align: center;
font-size: 13px;
}
.item_active {
background: #437ae5 !important;
}
}
.item_active_text {
color: #437ae5 !important;
}
.title_item {
color: #797f90;
font-size: 15px;
margin: 0 21px 0 15px;
}
.title_item_img {
width: 19.24px;
height: 4.37px;
}
.phone_img {
width: 44.81px;
height: 64.16px;
}
.phone_first {
height: 99px;
.phone_first {
/* height: 149px; */
display: flex;
width: 100%;
}
margin-bottom: 41px;
}
.phone_text {
.phone_text {
font-size: 28px;
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 {
.phone_list {
width: 100%;
display: flex;
flex-wrap: wrap;
min-height: 471px;
/* min-height: 471px; */
align-content: flex-start;
}
/* justify-content: space-between; */
}
.phone_list_item {
.phone_list_item {
width: 166px;
height: 56px;
background: #f0f0f0;
border-radius: 4px 4px 4px 4px;
background: #F0F0F0;
border-radius: 4px;
opacity: 1;
margin: 0 30px 25px 0;
margin: 0 27px 25px 0;
text-align: center;
font-weight: 500;
color: #666666;
......@@ -225,20 +118,22 @@ export default {
font-size: 18px;
line-height: 56px;
cursor: pointer;
}
}
.list_item_active {
color: #ffffff;
}
.list_item_active {
color: #FFFFFF;
}
::v-deep .el-button {
width: 94px;
height: 34px;
padding: 0;
font-size: 14px;
}
.item_active {
background: #437AE5;
}
::v-deep .el-button--primary {
::v-deep .el-button--primary {
width: 132px;
height: 50px;
}
background: #437AE5;
font-size: 18px;
border: none;
margin-top: 10px;
}
</style>
\ No newline at end of file
<template>
<div class="order">
<div class="order_top">
<div class="gobak" @click="gobak">返回上一步</div>
<div class="order_title">确认订单</div>
</div>
<div class="collection">
<div class="roomcheck">
<div class="roominfo">
</div>
<div>
<div class="roomcheck_sin roomcheck_sin_a">
<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">172-0728-2374</div>
</div>
<div class="roomcheck_sin_bottom">
<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>
</div>
<div class="shu"></div>
<div class="roomprice">
<div class="roomprice_title">支付金额</div>
<div class="roomprice_num">¥<span>95</span></div>
<div class="roomprice_tips">
<div class="heng"></div>
<div>费用明细</div>
<div class="heng"></div>
</div>
<div class="roomprice_specific">
<div class="roomprice_specific_name">SIM卡费用</div>
<div class="roomprice_specific_num">¥50</div>
</div>
<div class="roomprice_specific">
<div class="roomprice_specific_name">套餐费用</div>
<div class="roomprice_specific_num">¥45</div>
</div>
<div class="roomprice_bto" @click="pay">确认支付</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
pay() {
this.$router.push({
name: "payment",
});
},
gobak() {
this.$router.go(-1);
},
},
};
</script>
<style scoped>
.order {
width: 100%;
height: 620px;
padding: 30px 82px 30px 30px;
box-sizing: border-box;
background: white;
border-radius: 14px;
/* padding-bottom: 75px; */
}
.order_top {
/* height: 132px; */
width: 100%;
position: relative;
}
.gobak {
width: 94px;
height: 34px;
position: absolute;
left: 0;
cursor: pointer;
font-size: 14px;
color: #666666;
background: #ffffff;
border-radius: 4px;
border: 1px solid #707070;
text-align: center;
line-height: 34px;
}
.order_title {
font-size: 28px;
color: #000000;
width: 100%;
text-align: center;
/* line-height: 132px; */
}
.collection {
/* width: 100%; */
background: white;
/* height: 550px; */
display: flex;
/* align-items: center; */
box-sizing: border-box;
margin-top: 44px;
}
.roomcheck {
/* width: 70%; */
/* height: 100%; */
/* padding: 0 60px 0 30px; */
box-sizing: border-box;
display: flex;
/* margin-top: 44px; */
}
.roominfo {
width: 302px;
height: 449px;
/* padding: 51px 0 0 53px; */
box-sizing: border-box;
background: url("~@/assets/sim/card5.png");
background-size: 100% 100%;
margin-right: 39px;
}
.roomcheck_sin {
width: 354px;
height: 98px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #e0e0e0;
}
.roomcheck_sin_a {
height: auto !important;
padding-bottom: 40px;
padding-top: 23px;
}
.roomcheck_sin_name {
font-size: 16px;
color: #666666;
}
.roomcheck_sin_people {
font-size: 18px;
color: #333333;
font-weight: bold;
}
.roomcheck_sin_time {
font-size: 24px;
margin-top: 30px;
color: #000000;
}
.roomcheck_sin_time_title {
margin-top: 30px !important;
color: #666666 !important;
}
.roomcheck_sin_time_a {
font-size: 16px;
margin-top: 12px;
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: 14px;
}
.roomcheck_sin_bottom {
margin-top: 30px;
}
.shu {
width: 1px;
height: 326px;
background: #e0e0e0;
margin: 63px 51px 0 40px;
}
.roomprice {
flex: 1;
/* height: 100%; */
/* padding: 60px 77px 0; */
box-sizing: content-box;
padding-top: 23px;
}
.roomprice_tips {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.heng {
width: 100px;
height: 1px;
background: #e0e0e0;
}
.roomprice_title {
font-size: 16px;
color: #666666;
text-align: center;
}
.roomprice_num {
color: #000000;
font-size: 22px;
text-align: center;
margin: 18px 0 64px;
font-weight: bold;
}
.roomprice_num span {
font-size: 48px;
}
.roomprice_specific {
display: flex;
margin-top: 11px;
justify-content: space-between;
}
.roomprice_specific_name {
font-size: 16px;
color: #666666;
}
.roomprice_specific_num {
color: #000000;
font-size: 20px;
}
.roomprice_bto {
width: 132px;
height: 50px;
background: #437AE5;
border-radius: 4px 4px 4px 4px;
text-align: center;
line-height: 50px;
font-size: 18px;
cursor: pointer;
color: #ffffff;
margin: 100px auto 0;
}
</style>
\ No newline at end of file
<template>
<div class="order">
<div class="order_top">
<div class="order_title">发放SIM卡</div>
</div>
<div class="collection">
<img src="@/assets/sim/simCard.png" class="grant" />
<div class="waiting">SIM卡发放中,请耐心等待...</div>
<el-progress :show-text="false" color="#61ABEC" :percentage="50" class="progress"
:stroke-width="21"></el-progress>
<div class="progress_schedule">40%</div>
</div>
<button @click="comfim">成功</button>
</div>
</template>
<script>
export default {
methods: {
comfim() {
this.$router.push({
name: "simSuccess",
});
},
},
};
</script>
<style scoped>
.order {
width: 100%;
height: 100%;
padding: 30px;
box-sizing: border-box;
background: white;
border-radius: 14px;
height: 620px;
}
.order_top {
/* height: 132px; */
width: 100%;
position: relative;
}
.order_title {
font-size: 28px;
color: #000000;
width: 100%;
text-align: center;
font-weight: 500;
}
.collection {
width: 100%;
background: white;
/* height: 729px; */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-sizing: border-box;
margin-top: 110px;
}
.grant {
width: 120px;
height: 120px;
}
.waiting {
font-size: 26px;
color: #333333;
margin: 33px 0 30px;
}
.progress {
width: 551px;
margin-bottom: 17px;
}
.progress_schedule {
font-size: 22px;
color: #333333;
}
</style>
\ No newline at end of file
<template>
<div class="order">
<div class="order_top">
<div class="order_title">制卡成功</div>
</div>
<div class="collection">
<img src="@/assets/hotel/success2.png" class="success_icon" />
<div class="success_text">SIM发放成功,请拿好您的SIM</div>
<div class="success_text">感谢您的使用</div>
<div class="success_back" @click="goback">回到首页</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
// 回到首页
goback() {
this.$router.replace({
name: "sim",
});
},
},
};
</script>
<style scoped>
.order {
width: 100%;
height: 100%;
padding: 30px;
box-sizing: border-box;
background: white;
border-radius: 21px;
height: 620px;
}
.order_top {
width: 100%;
position: relative;
}
.order_title {
font-size: 28px;
color: #000000;
width: 100%;
text-align: center;
font-weight: 500;
}
.collection {
width: 100%;
background: white;
/* height: 729px; */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-sizing: border-box;
margin-top: 110px;
}
.success_icon {
width: 79.06px;
height: 79.06px;
margin-bottom: 46px;
}
.success_text {
font-size: 26px;
color: #333333;
}
.success_back {
width: 208px;
height: 70px;
background: #437AE5;
border-radius: 4px 4px 4px 4px;
text-align: center;
line-height: 70px;
color: white;
font-size: 24px;
cursor: pointer;
margin-top: 65px;
}
</style>
\ No newline at end of file
......@@ -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">
......@@ -66,7 +65,7 @@
this.$router.go(-1);
},
toNext() {
this.$router.push({ name: "card", params: { title: '发放访客卡', } });
this.$router.push({ name: "send" });
},
}
......@@ -76,9 +75,8 @@
.reserved {
width: 100%;
padding: 36px;
/* height: 650px; */
height: calc(100vh - 70px);
box-sizing: border-box;
}
......@@ -87,7 +85,7 @@
width: 100%;
background: #FFFFFF;
border-radius: 14px;
height: 100%;
height: 620px;
padding: 30px;
box-sizing: border-box;
......@@ -96,9 +94,10 @@
.auth_top {
width: 100%;
display: flex;
height: 50px;
align-items: center;
justify-content: space-between !important;
/* height: 75px; */
position: relative;
justify-content: center;
margin-bottom: 55px;
}
.auth_title {
......@@ -112,11 +111,12 @@
.auth_body {
width: 100%;
height: 90%;
/* height: 500px; */
text-align: center;
display: flex;
align-items: center;
justify-content: center;
margin-top: 80px;
}
.auth_center {
......@@ -135,33 +135,13 @@
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;
/* margin-top: -20px; */
margin-bottom: 84px;
}
.auth_span {
font-size: 20px;
}
.auth_span_a {
color: #666666;
line-height: 18px;
font-size: 16px;
}
::v-deep .el-button {
width: 94px;
......@@ -170,7 +150,22 @@
font-size: 14px;
}
::v-deep .auth_top .el-button {
position: absolute;
left: 0;
top: 0;
border-radius: 4px;
border: 1px solid #707070;
}
::v-deep .el-button--primary {
width: 132px;
height: 50px;
background: #437AE5;
font-size: 18px;
border: none;
}
</style>
\ No newline at end of file
......@@ -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">
......@@ -32,10 +31,11 @@
<el-button type="primary">粤居码</el-button>
</div>
<button @click="toNext">下一步</button>
</div>
</div>
</div>
</div>
......@@ -46,7 +46,6 @@
export default {
data() {
return {
}
},
......@@ -56,106 +55,131 @@
toBack() {
this.$router.go(-1);
},
toNext() {
this.$router.push({ name: "success" });
},
}
}
</script>
<style scoped>
.reserved {
.reserved {
width: 100%;
padding: 36px;
height: calc(100vh - 70px);
/* height: auto; */
box-sizing: border-box;
}
.auth_content {
}
.auth_content {
width: 100%;
background: #ffffff;
background: #FFFFFF;
border-radius: 14px;
height: 100%;
height: 620px;
padding: 30px;
box-sizing: border-box;
}
.auth_top {
}
.auth_top {
width: 100%;
display: flex;
height: 50px;
align-items: center;
justify-content: space-between !important;
}
/* height: 50px; */
/* align-items: center; */
position: relative;
justify-content: center;
}
.auth_title_a {
font-weight: 500;
color: #000000;
font-size: 28px;
margin-bottom: 34px;
}
.auth_title {
.auth_title {
color: #666666;
font-size: 18px;
}
text-align: center;
}
.auth_body {
.auth_body {
width: 100%;
height: 90%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
margin-top: 66px;
.auth_center {
}
.auth_center {
display: flex;
}
}
.auth_img {
.auth_img {
width: 386.54px;
height: 287.18px;
}
}
.auth_center_right {
.auth_center_right {
display: flex;
flex-direction: column;
margin-top: 38px;
}
margin-top: 40px;
}
.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 {
::v-deep .el-button {
width: 94px;
height: 34px;
padding: 0;
font-size: 14px;
}
}
::v-deep .auth_top .el-button {
position: absolute;
left: 0;
top: 0;
border-radius: 4px;
::v-deep .el-button--primary {
border: 1px solid #707070;
}
::v-deep .el-button--primary {
width: 132px;
height: 50px;
}
background: #437AE5;
font-size: 18px;
border: none;
}
</style>
\ No newline at end of file
......@@ -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>
......@@ -58,7 +57,7 @@
this.$router.go(-1);
},
toNext() {
this.$router.push({ name: "cardentify", params: { title: '实名认证', } });
this.$router.push({ name: "visitor" });
},
}
......@@ -68,9 +67,6 @@
.reserved {
width: 100%;
padding: 36px;
height: calc(100vh - 70px);
box-sizing: border-box;
}
......@@ -79,7 +75,7 @@
width: 100%;
background: #FFFFFF;
border-radius: 14px;
height: 100%;
height: 620px;
padding: 30px;
box-sizing: border-box;
......@@ -88,20 +84,15 @@
.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%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
......@@ -122,33 +113,30 @@
display: flex;
}
.success_icon {
width: 79.06px;
height: 79.06px;
}
::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;
border-radius: 4px;
border: 1px solid #707070;
}
::v-deep .el-button--primary {
height: 50px;
width: 208px;
height: 70px;
border: none;
background: #437AE5;
font-size: 24px;
}
</style>
\ No newline at end of file
......@@ -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,12 +80,18 @@
}
</script>
<style scoped>
.return_btn {
/* margin-top: 45px; */
/* position: absolute; */
height: 34px;
}
.reserved {
width: 100%;
padding: 36px;
padding: 30px;
height: 670px;
box-sizing: border-box;
}
......@@ -96,51 +100,46 @@
width: 100%;
background: #FFFFFF;
border-radius: 14px;
height: 880px;
padding: 0 30px;
/* padding: 0 45px; */
box-sizing: border-box;
display: flex;
}
.card_left_img {
width: 58.15px;
height: 45.4px;
margin: 35%;
}
.card_left_c {
width: 193px;
height: 193px;
background: #F4F4F4;
border-radius: 10px 10px 10px 10px;
border-radius: 15px;
opacity: 1;
margin: 14px 0 54px 156px;
margin: 0 207px 53px 175px;
text-align: center;
}
.card_item {
display: flex;
height: 46px;
margin-bottom: 30px;
margin-left: 20px;
margin-left: 30px;
}
.card_item_span {
line-height: 46px;
width: 120px;
color: #333333;
font-size: 20px;
width: 120px;
}
.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;
}
......@@ -150,11 +149,12 @@
height: 46px;
border: 1px solid #707070;
color: #333333;
font-size: 20px;
}
::v-deep .el-input {
width: 360px;
height: 78px;
height: 46px;
}
......@@ -164,19 +164,20 @@
}
.card_center {
width: 1px;
width: 2px;
height: 548px;
background: #E0E0E0;
margin: 50px 43px 50px 85px;
margin-top: 20px;
/* margin: 50px 43px 50px 85px; */
}
.card_right {
width: 100%;
}
::v-deep .card_right .el-button {
margin: auto 0 50px 0;
margin-top: 70px;
text-align: center;
position: relative;
}
::v-deep .el-button {
......@@ -185,4 +186,32 @@
padding: 0;
font-size: 14px;
}
::v-deep .auth_top .el-button {
position: absolute;
left: 0;
top: 0;
border-radius: 4px;
border: 1px solid #707070;
}
::v-deep .el-button--primary {
width: 132px;
height: 50px;
background: #437AE5;
font-size: 18px;
border: none;
}
.card_item_next {
position: absolute;
bottom: 30px;
left: 40%;
/* display: inline-block; */
}
</style>
\ No newline at end of file
<template>
<div class="reserved">
<div class="content">
<div class="content_time">118s</div>
<div class="content_card">
<div class="card_left">
......@@ -46,7 +45,7 @@
clickBtn(val) {
val == 11 ? this.phone = '' : ''
if (this.phone.length > 10) return
if (this.phone.length > 10 && val != 10) return
val <= 9 ?
this.phone = this.phone + val.toString() : '';
......@@ -64,10 +63,10 @@
.reserved {
width: 100%;
padding: 36px;
height: 950px;
/* padding: 36px; */
/* height: 950px; */
height: 670px;
box-sizing: border-box;
}
......@@ -75,28 +74,19 @@
.content {
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: 150px 100px 0 70px;
box-sizing: border-box;
}
.card_tip {
......@@ -117,22 +107,24 @@
::v-deep .content_card .el-input {
width: 482px;
height: 78px;
background: #FFFFFF;
background: #ffffff;
border-radius: 10px 10px 10px 10px;
opacity: 1;
border: 1px solid #CBC7C7;
border: 1px solid #cbc7c7;
margin: 40px 0 120px 0;
}
::v-deep .content_card .el-input-group__prepend {
background-color: white;
border: 0;
line-height: 70px;
line-height: 78px;
border-radius: 50%;
}
::v-deep .content_card .el-input.is-disabled .el-input__inner {
border-color: white;
height: 100%;
font-size: 24px;
background-color: white;
border-radius: 10%;
cursor: default;
......@@ -140,22 +132,26 @@
}
.card_pre {
color: #000000;
font-size: 24px;
}
.card_center {
width: 2px;
height: 40px;
background: #D6D6D6;
height: 78px;
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;
border-radius: 4px;
margin-right: 40px;
font-size: 24px;
......@@ -173,22 +169,25 @@
height: 391px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
padding: 30px;
padding: 30px 0;
background: white;
margin-right: 0;
margin-left: auto;
box-sizing: border-box;
}
::v-deep .card_right .el-button {
width: 113px;
height: 64px;
background: #FFFFFF;
border-radius: 6px 6px 6px 6px;
border-radius: 6px;
opacity: 1;
border: 1px solid #CBC7C7;
margin: 0 25px 25px 0;
font-weight: bold;
color: #000000;
font-size: 36px;
font-size: 24px;
}
</style>
\ No newline at end of file
......@@ -5,17 +5,17 @@
<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>
<el-progress :show-text="false" color="#61ABEC" :percentage="50" class="progress"
:stroke-width="21"></el-progress>
<div class="progress_schedule">40%</div>
</div>
<button @click="toNext">成功</button>
<!-- <el-button type="primary" @click="toNext">下一步</el-button> -->
</div>
</div>
......@@ -57,7 +57,7 @@
this.$router.go(-1);
},
toNext() {
this.$router.push({ name: "cardentify", params: { title: '实名认证', } });
this.$router.push({ name: "card" });
},
}
......@@ -65,20 +65,17 @@
</script>
<style scoped>
.reserved {
width: 100%;
padding: 36px;
height: calc(100vh - 70px);
box-sizing: border-box;
height: 100%;
}
.card_content {
width: 100%;
height: 620px;
background: #FFFFFF;
border-radius: 14px;
height: 100%;
padding: 30px;
box-sizing: border-box;
......@@ -87,20 +84,16 @@
.card_top {
width: 100%;
display: flex;
height: 50px;
/* height: 50px; */
align-items: center;
justify-content: space-between !important;
}
.card_title {
color: #666666;
font-size: 18px;
}
.card_body {
width: 100%;
height: 90%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
......@@ -109,6 +102,7 @@
.card_body_text {
margin: 55px 0 30px 0;
font-size: 26px;
}
.card_center {
......@@ -116,11 +110,11 @@
}
.card_img {
width: 386.54px;
height: 287.18px;
width: 123.36px;
height: 84.72px;
}
::v-deep .el-progress-bar {
/* ::v-deep .el-progress-bar {
width: 520px;
height: 8px;
}
......@@ -133,29 +127,37 @@
::v-deep .el-progress__text {
margin-top: 10px;
margin-left: 45%;
}
margin-left: 30%;
} */
.content_time {
width: 50px;
height: 50px;
background: #FFFFFF;
opacity: 1;
border: 3px solid #5A8FF6;
border-radius: 50%;
text-align: center;
line-height: 50px;
.progress {
width: 551px;
margin-bottom: 26px;
}
.progress_schedule {
font-size: 22px;
color: #333333;
}
::v-deep .el-button {
width: 94px;
height: 34px;
padding: 0;
font-size: 14px;
border-radius: 4px;
border: 1px solid #707070;
padding: 0;
}
::v-deep .el-button--primary {
height: 50px;
width: 208px;
height: 70px;
font-size: 24px;
}
</style>
\ No newline at end of file
......@@ -6,15 +6,13 @@
<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>
<div style="color: #416CCC;
font-size: 50px;">访客自助登记系统</div>
<div class="content_title">欢迎使用</div>
<div class="content_title2">访客自助登记系统</div>
<div class="content_btns">
<div class="content_btn" @click="Reserved('reserved',0)">
<div class="content_text">已预约</div>
......@@ -73,10 +71,11 @@ font-size: 50px;">访客自助登记系统</div>
</script>
<style scoped>
.standby {
height: 100%;
height: 800px;
width: 100%;
background: url("~@/assets/visitor/background.png") no-repeat;
background-size: 100%;
background-size: 1280px 800px;
box-sizing: border-box;
}
.header {
......@@ -91,44 +90,61 @@ font-size: 50px;">访客自助登记系统</div>
.header_title {
color: #333333;
font-size: 16px;
margin-top: 20px;
font-size:
16px;
margin-top: 29px;
}
.header_right {
display: flex;
color: #FFFFFF;
align-items: center;
height: 70px;
margin-top: 24px;
}
.header_first {
display: flex;
flex-direction: column;
text-align: center;
font-size: 13px;
margin-right: 10px;
margin-right: 18px;
}
.header_mon {
margin-top: 2px;
margin-top: 5px;
}
.header_center {
height: 18px;
width: 1px;
background: white;
margin-top: 12px;
}
.header_time {
font-size: 30px;
font-weight: bold;
margin-left: 6px;
margin-left: 16px;
}
.content {
/* height: 100%; */
font-weight: bold;
padding: 140px 60px 0;
padding: 57px 0 0 60px;
box-sizing: border-box;
}
.content_title {
color: #333333;
font-size: 30px;
}
.content_title2 {
color: #416CCC;
font-size: 75px;
}
.content_btns {
display: flex;
margin-top: 85px;
......@@ -140,27 +156,27 @@ font-size: 50px;">访客自助登记系统</div>
background: linear-gradient(136deg, #65DCAC 0%, #4DA8D5 100%);
border-radius: 10px 10px 10px 10px;
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;
float: right;
margin-top: 81px;
}
.content_text {
font-size: 30px;
font-weight: bold;
color: #FFFFFF;
margin-bottom: 41px;
}
</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