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