Skip to content
Toggle navigation
Toggle navigation
This project
Loading...
Sign in
dev
/
pingan-life-index-pro
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Network
Create a new issue
Builds
Commits
Issue Boards
Files
Commits
Network
Compare
Branches
Tags
d6c2547b
authored
2020-02-13 06:44:46 +0800
by
simon
Browse Files
Options
Browse Files
Tag
Download
Email Patches
Plain Diff
默认提交
1 parent
27ff180f
Hide whitespace changes
Inline
Side-by-side
Showing
18 changed files
with
1531 additions
and
668 deletions
src/App.vue
src/components/clarms/clarms-plugins-material.scss
src/components/clarms/clarms-plugins-material.vue
src/components/clarms/clarms-plugins-modal1.scss
src/components/clarms/clarms-plugins-modal2.scss
src/components/clarms/clarms-plugins-upload.scss
src/components/clarms/clarms-plugins-upload.vue
src/components/clarms/clarms-plugins-verifyform.scss
src/components/clarms/clarms-plugins-verifyform.vue
src/pages/custom-service/components/clarms.js → src/pages/clarms/clarms.js
src/pages/clarms/clarms.scss
src/pages/custom-service/components/clarms.vue → src/pages/clarms/clarms.vue
src/pages/custom-service/components/clarms-comp.js
src/pages/custom-service/components/clarms.scss → src/pages/custom-service/components/clarms-comp.scss
src/pages/custom-service/components/clarms-comp.vue
src/pages/custom-service/custom-service.js
src/pages/vhis-detail/vhis-detail.js
src/router.js
src/App.vue
View file @
d6c2547
<
template
>
<div
id=
"app"
>
<v-header
class=
"header"
></v-header>
<main
ref=
"container"
class=
"main-container"
>
<router-view
/>
</main>
<v-footer></v-footer>
<vhis-modal></vhis-modal>
</div>
<div
id=
"app"
>
<v-header
class=
"header"
></v-header>
<main
ref=
"container"
class=
"main-container"
>
<router-view
/>
</main>
<v-footer></v-footer>
<vhis-modal></vhis-modal>
</div>
</
template
>
...
...
@@ -436,6 +436,10 @@ textarea {
display
:
none
;
}
.clarms
.el-input__inner
{
font-size
:
22px
;
}
@media
(
max-width
:
1200px
)
{
.page-index
{
.video-js
{
...
...
src/components/clarms/clarms-plugins-material.scss
View file @
d6c2547
@import
'@/styles/_support'
;
.comp
{
font-size
:
22px
;
}
input
{
padding
:
0
2
.083333rem
;
...
...
@@ -7,14 +10,15 @@ input {
}
.orange
{
color
:
#ff6839
;
color
:
#ff6839
;
}
.gray
{
color
:
#747474
;
// color: #747474;
color
:
#666666
;
}
.empty
{
.empty
{
flex
:
1
;
height
:
30rem
;
display
:
flex
;
...
...
@@ -37,185 +41,193 @@ input {
}
}
.submit-btn
{
.submit-btn
{
background
:
url("~@assets/images/vhis/vhis-btn.png")
;
background-size
:
100%
100%
;
background-repeat
:
no-repeat
;
width
:
15rem
;
height
:
2
.5rem
;
line-height
:
2
.5rem
;
width
:
300px
;
height
:
50px
;
line-height
:
50px
;
color
:
white
;
font-weight
:
600
;
cursor
:
pointer
;
margin
:
2
.5rem
auto
;
text-align
:
center
;
border-radius
:
2rem
;
border-radius
:
50px
;
}
.reservation-container-2
{
@extend
.bb
;
border-radius
:
.666667rem
;
border
:
solid
.083333rem
#ff6839
;
background-color
:
#ffffff
;
padding
:
1
.666667rem
10rem
2
.833333rem
10rem
;
.clarms-border
{
box-sizing
:border-box
;
padding
:
.166667rem
;
border-radius
:
.41
6667rem
;
background-image
:
linear-gradient
(
to
right
,
#ffb31d
,
#f15907
)
;
margin
:
0
1
.25rem
;
min-width
:
25rem
;
.clarms-select
{
width
:
100%
;
}
@extend
.bb
;
border-radius
:
.666667rem
;
border
:
solid
2px
$cOrange
;
background-color
:
#ffffff
;
//
padding: 1.666667rem 10rem 2.833333rem 10rem;
padding
:
20px
100px
72px
;
.clarms-border
{
box-sizing
:
border-box
;
padding
:
.16
6667rem
;
border-radius
:
.416667rem
;
background-image
:
linear-gradient
(
to
right
,
#ffb31d
,
#f15907
)
;
margin
:
0
1
.25rem
;
min-width
:
25rem
;
.clarms-select
{
width
:
100%
;
}
}
.title
{
font-size
:
1
.333333rem
;
color
:
#ff6839
;
text-align
:
center
;
margin
:
1
.666667rem
auto
0
auto
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
font-weight
:
600
;
letter-spacing
:
.25rem
;
font-size
:
1
.5rem
;
}
.default-mt
{
margin-top
:
2
.666667rem
;
}
.submit-btn
{
margin
:
2
.5rem
auto
1rem
;
}
.flex-top
{
display
:
flex
;
justify-content
:
left
;
align-items
:
flex-start
;
}
.flex-start
{
display
:
flex
;
justify-content
:
left
;
align-items
:
flex-start
;
flex-wrap
:
wrap
;
}
.check-disabled
{
cursor
:
default
;
.title
{
color
:
#ff6839
;
text-align
:
center
;
// margin: 1.666667rem auto 0 auto;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
font-weight
:
600
;
letter-spacing
:
.25rem
;
font-size
:
1
.5rem
;
span
{
color
:
$cDisabled
;
}
.t1
{
font-size
:
24px
;
font-weight
:
bold
;
}
}
.check-item
{
display
:
flex
;
align-items
:
center
;
margin-right
:
2rem
;
margin-bottom
:
.833333rem
;
.default-mt
{
margin-top
:
48px
;
}
spa
n
{
margin-left
:
.833333rem
;
}
.submit-bt
n
{
margin
:
48px
auto
24px
;
}
img
{
width
:
1
.666667rem
;
}
}
.flex-top
{
display
:
flex
;
justify-content
:
left
;
align-items
:
flex-start
;
}
.item-group
{
display
:
flex
;
justify-content
:
flex-star
t
;
align-items
:
flex-start
;
flex-wrap
:
wrap
;
}
.flex-start
{
display
:
flex
;
justify-content
:
lef
t
;
align-items
:
flex-start
;
flex-wrap
:
wrap
;
}
.ml10
{
margin-left
:
.833333rem
;
}
.check-disabled
{
cursor
:
default
;
.mr10
{
margin-right
:
.833333rem
;
span
{
color
:
$cDisabled
;
}
}
.mt20
{
margin-top
:
1
.666667rem
;
.check-item
{
display
:
flex
;
align-items
:
center
;
margin-right
:
60px
;
margin-bottom
:
.833333rem
;
span
{
margin-left
:
20px
;
}
.mt10
{
margin-top
:
.833333
rem
;
img
{
width
:
1
.666667
rem
;
}
}
.bottom-tip
{
font-size
:
.833333rem
;
display
:
flex
;
align-items
:
center
;
span
{
margin-left
:
1
.3rem
;
}
.item-group
{
display
:
flex
;
justify-content
:
flex-start
;
align-items
:
flex-start
;
flex-wrap
:
wrap
;
}
img
{
width
:
1
.3rem
;
}
.ml10
{
margin-left
:
.833333rem
;
}
.mr10
{
margin-right
:
.833333rem
;
}
.mt20
{
margin-top
:
48px
;
}
.mt10
{
margin-top
:
24px
;
}
.bottom-tip
{
// font-size: .833333rem;
font-size
:
18px
;
display
:
flex
;
align-items
:
center
;
span
{
margin-left
:
1
.3rem
;
}
hr
{
border-top
:
1px
solid
#eee
;
margin-top
:
2
.5rem
;
img
{
width
:
1
.3rem
;
}
.tips
{
display
:
flex
;
justify-content
:
flex-start
;
align-items
:
center
;
}
img
{
width
:
.833333rem
;
}
hr
{
border-top
:
1px
solid
#eee
;
margin-top
:
48px
;
}
span
{
font-size
:
1rem
;
margin-left
:
.833333rem
;
color
:
#ff6839
;
}
.tips
{
display
:
flex
;
justify-content
:
flex-start
;
align-items
:
center
;
img
{
width
:
2rem
;
}
.contact
{
text-align
:
center
;
cursor
:
pointer
;
color
:
#ff6839
;
font-weight
:
600
;
span
{
// font-size: 1rem
;
font-size
:
18px
;
margin-left
:
.833333rem
;
color
:
#ff6839
;
}
}
.contact
{
text-align
:
center
;
cursor
:
pointer
;
color
:
#ff6839
;
font-weight
:
600
;
}
.fail-tips
{
align-items
:
center
;
justify-content
:
center
;
display
:
flex
;
font-size
:
1
.166667rem
;
.fail-tips
{
align-items
:
center
;
justify-content
:
center
;
display
:
flex
;
font-size
:
1
.166667rem
;
.icon
{
width
:
1
.333333rem
;
margin-right
:
5px
;
display
:
inline-block
;
}
.icon
{
width
:
1
.333333rem
;
margin-right
:
5px
;
display
:
inline-block
;
}
.btn
{
margin-left
:
0
;
color
:
#ff6839
;
font-weight
:
600
;
font-size
:
1
.166667rem
;
}
.btn
{
margin-left
:
0
;
color
:
#ff6839
;
font-weight
:
600
;
font-size
:
1
.166667rem
;
}
}
}
.form
{
display
:
flex
;
...
...
@@ -223,17 +235,17 @@ input {
flex-wrap
:
wrap
;
&
-name
{
font-size
:
1
.333333rem
;
font-size
:
1
.333333rem
;
font-weight
:
600
;
text-align
:
left
;
color
:
#ff6839
;
color
:
#ff6839
;
padding-left
:
15px
;
}
.ipt-date
{
width
:
100%
;
border
:
1px
solid
#ff6839
!
important
;
border-radius
:
.416667rem
;
border
:
1px
solid
#ff6839
!
important
;
border-radius
:
.416667rem
;
height
:
3rem
;
align-items
:
center
;
padding-left
:
.833333rem
;
...
...
@@ -261,11 +273,11 @@ input {
// input和下拉
.ipt
{
border
:
1px
solid
#ff6839
!
important
;
border-radius
:
.416667rem
;
height
:
3rem
;
display
:
flex
;
align-items
:
center
;
border
:
1px
solid
#ff6839
!
important
;
border-radius
:
.416667rem
;
height
:
3rem
;
display
:
flex
;
align-items
:
center
;
}
// 长文本
...
...
@@ -290,7 +302,7 @@ input {
}
.validator
{
color
:
#ff6839
;
color
:
#ff6839
;
margin-top
:
0
.5rem
;
position
:
absolute
;
right
:
1rem
;
...
...
@@ -318,9 +330,11 @@ input {
width
:
30%
;
padding-left
:
5px
;
letter-spacing
:
.25rem
;
font-size
:
20px
;
.main-label
{
font-size
:
1
.5rem
;
// font-size: 1.5rem;
font-size
:
22px
;
color
:
#ff6839
;
}
}
...
...
@@ -331,47 +345,48 @@ input {
}
.value
{
width
:
70%
;
position
:
relative
;
.ipt-wrap
{
width
:
70%
;
position
:
relative
;
.ipt-wrap
{
// input和下拉
.ipt
{
border
:
1px
solid
#ff6839
!
important
;
border-radius
:
.416667rem
;
height
:
3rem
;
display
:
flex
;
align-items
:
center
;
border
:
1px
solid
#ff6839
!
important
;
border-radius
:
.416667rem
;
height
:
3rem
;
display
:
flex
;
align-items
:
center
;
}
.ipt2
{
width
:
100%
;
border-bottom
:
1px
solid
#ccc
;
height
:
3rem
;
display
:
flex
;
align-items
:
center
;
margin-bottom
:
.833333rem
;
width
:
100%
;
border-bottom
:
1px
solid
#ccc
;
height
:
3rem
;
display
:
flex
;
align-items
:
center
;
margin-bottom
:
.833333rem
;
}
// 长文本
.textarea
{
min-height
:
8
.75rem
;
@extend
.bb
;
padding
:
.75rem
;
min-height
:
8
.75rem
;
@extend
.bb
;
padding
:
.75rem
;
}
.down-arrow
{
z-index
:
10
;
position
:
absolute
;
top
:
1
.3rem
;
right
:
1
.2rem
;
background-image
:
url('~@/assets/images/reservation/re-down-arrow-2.png')
;
background-size
:
100%
100%
;
width
:
.633333rem
;
height
:
.433333rem
;
pointer-events
:
none
;
cursor
:
default
;
z-index
:
10
;
position
:
absolute
;
top
:
1
.3rem
;
right
:
1
.2rem
;
background-image
:
url('~@/assets/images/reservation/re-down-arrow-2.png')
;
background-size
:
100%
100%
;
width
:
.633333rem
;
height
:
.433333rem
;
pointer-events
:
none
;
cursor
:
default
;
}
}
}
...
...
@@ -399,52 +414,53 @@ input {
}
@media
(
max-width
:
1000px
)
{
.reservation-container-2
{
padding
:
1
.666667rem
2rem
2
.833333rem
2rem
;
}
.reservation-container-2
{
padding
:
1
.666667rem
2rem
2
.833333rem
2rem
;
}
.form
{
&
-item
{
width
:
100%
;
.label
{
min-width
:
30%
;
}
.ipt-wrap
{
width
:
70%
;
}
.form
{
&
-item
{
width
:
100%
;
.label
{
min-width
:
30%
;
}
&
-item-2
{
.date-container
{
width
:
80%
;
}
.ipt-wrap
{
width
:
70%
;
}
}
}
&
-item-2
{
.date-container
{
width
:
80%
;
}
}
}
}
@media
(
max-width
:
600px
)
{
.reservation-container-2
{
.reservation-container-2
{
.clarms-border
{
min-width
:
auto
;
margin
:
0
.25rem
;
.clarms-border
{
min-width
:
auto
;
margin
:
0
.25rem
;
}
}
}
.form
{
&
-item
{
width
:
100%
;
width
:
100%
;
.label
{
min-width
:
30%
;
}
.ipt-wrap
{
width
:
70%
;
}
.label
{
min-width
:
30%
;
}
.ipt-wrap
{
width
:
70%
;
}
}
&
-item2
{
...
...
@@ -456,18 +472,20 @@ input {
}
&
-item-2
{
display
:
block
;
.label
{
width
:
100%
;
margin-bottom
:
10px
;
}
.value
{
width
:
100%
;
}
display
:
block
;
.date-container
{
width
:
100%
;
}
.label
{
width
:
100%
;
margin-bottom
:
10px
;
}
.value
{
width
:
100%
;
}
.date-container
{
width
:
100%
;
}
}
&
-item3
{
...
...
@@ -488,6 +506,6 @@ input {
@media
(
max-width
:
400px
)
{
.reservation-container-2
{
padding
:
1
.666667rem
1rem
;
padding
:
1
.666667rem
1rem
;
}
}
\ No newline at end of file
}
...
...
src/components/clarms/clarms-plugins-material.vue
View file @
d6c2547
<
template
>
<div>
<div
class=
"comp"
>
<template
v-if=
"!insuredList || insuredList.length == 0"
>
<div
class=
"reservation-container-2"
>
<div
class=
"empty"
>
...
...
@@ -17,7 +17,7 @@
<
template
v-else
>
<div
class=
"reservation-container-2"
>
<div
class=
"title default-mt"
>
<span>
{{
$t
(
'clarms.step2.label1'
)
}}
</span>
<span
class=
"t1"
>
{{
$t
(
'clarms.step2.label1'
)
}}
</span>
<div
class=
"clarms-border"
>
<el-select
class=
"clarms-select"
v-model=
"data.insuredIndex"
:placeholder=
"$t('clarms.step2.placeHolder1')"
>
<template
v-if=
"lan == 'en'"
>
...
...
@@ -30,7 +30,7 @@
</
template
>
</el-select>
</div>
<span>
{{$t('clarms.step2.label2')}}
</span>
<span
class=
"t1"
>
{{$t('clarms.step2.label2')}}
</span>
</div>
<hr>
<div
class=
"gird-g form default-mt"
>
...
...
@@ -165,4 +165,4 @@
<
script
src=
"./clarms-plugins-material.js"
></
script
>
<
style
lang=
"scss"
scoped
>
@import
"./clarms-plugins-material.scss"
;
</
style
>
\ No newline at end of file
</
style
>
...
...
src/components/clarms/clarms-plugins-modal1.scss
View file @
d6c2547
...
...
@@ -9,6 +9,7 @@
height
:
100%
;
@extend
.fcc
;
text-align
:
center
;
font-size
:
22px
;
}
.overlay
{
...
...
@@ -23,7 +24,7 @@
.modal
{
position
:
relative
;
@extend
.bb
;
width
:
63
.333333rem
;
width
:
800px
;
// height: 28.5rem;
border-radius
:
.8333rem
;
background-color
:
#ffffff
;
...
...
@@ -32,93 +33,98 @@
.content
{
display
:
flex
;
justify-content
:
flex-start
;
align-items
:
center
;
padding
:
10rem
8
.333333rem
;
.info-icon
{
width
:
10rem
;
min-width
:
6
rem
;
img
{
width
:
100%
;
}
display
:
flex
;
justify-content
:
flex-start
;
align-items
:
center
;
padding
:
10rem
8
.333333rem
;
.info-icon
{
width
:
10rem
;
min-width
:
10
rem
;
img
{
width
:
100%
;
}
}
.message
{
margin-left
:
1
.666667rem
;
font-size
:
1
.333333rem
;
font-weight
:
600
;
color
:
$cOrange
;
letter-spacing
:
.083333rem
;
text-align
:
left
;
line-height
:
1
.5
;
span
{
cursor
:
pointer
;
text-decoration
:
underline
;
}
.message
{
margin-left
:
32px
;
// font-size: 1.333333rem;
font-weight
:
600
;
color
:
$cOrange
;
letter-spacing
:
.083333rem
;
text-align
:
left
;
line-height
:
1
.5
;
span
{
cursor
:
pointer
;
text-decoration
:
underline
;
}
}
}
.close
{
cursor
:
pointer
;
img
{
width
:
1
.666667rem
;
width
:
1
.666667rem
;
position
:
absolute
;
right
:
-2
.5rem
;
top
:
-1
.666667rem
;
top
:
-1
.666667rem
;
}
}
}
@media
(
max-width
:
800px
)
{
.modal
{
// height: 28.5rem;
padding
:
3rem
1
.5rem
;
width
:
80%
;
height
:
auto
;
.content
{
padding
:
5rem
4rem
;
}
.close
{
display
:
none
;
}
.modal
{
// height: 28.5rem;
padding
:
3rem
1
.5rem
;
width
:
80%
;
height
:
auto
;
.content
{
padding
:
5rem
4rem
;
}
.close
{
display
:
none
;
}
}
}
@media
(
max-width
:
700px
)
{
.modal
{
// height: 28.5rem;
padding
:
3rem
1
.5rem
;
width
:
80%
;
height
:
auto
;
.content
{
padding
:
4rem
2rem
;
}
.close
{
display
:
none
;
}
@media
(
max-width
:
700px
)
{
.modal
{
// height: 28.5rem;
padding
:
3rem
1
.5rem
;
width
:
80%
;
height
:
auto
;
.content
{
padding
:
4rem
2rem
;
}
.close
{
display
:
none
;
}
}
}
@media
(
max-width
:
450px
)
{
.modal
{
// height: 28.5rem;
padding
:
3rem
1
.5rem
;
width
:
90%
;
height
:
auto
;
.close
{
display
:
none
;
}
.content
{
padding
:
2rem
.5rem
;
}
.modal
{
// height: 28.5rem;
padding
:
3rem
1
.5rem
;
width
:
90%
;
height
:
auto
;
.close
{
display
:
none
;
}
.content
{
padding
:
2rem
.5rem
;
}
}
}
...
...
src/components/clarms/clarms-plugins-modal2.scss
View file @
d6c2547
...
...
@@ -9,6 +9,7 @@
height
:
100%
;
@extend
.fcc
;
text-align
:
center
;
font-size
:
22px
;
}
.overlay
{
...
...
@@ -23,7 +24,7 @@
.modal
{
position
:
relative
;
@extend
.bb
;
width
:
63
.333333rem
;
width
:
800px
;
// height: 28.5rem;
border-radius
:
.8333rem
;
background-color
:
#ffffff
;
...
...
@@ -32,93 +33,98 @@
.content
{
display
:
flex
;
justify-content
:
flex-start
;
align-items
:
center
;
padding
:
10rem
8
.333333rem
;
.info-icon
{
width
:
10rem
;
min-width
:
6
rem
;
img
{
width
:
100%
;
}
display
:
flex
;
justify-content
:
flex-start
;
align-items
:
center
;
padding
:
10rem
8
.333333rem
;
.info-icon
{
width
:
10rem
;
min-width
:
10
rem
;
img
{
width
:
100%
;
}
}
.message
{
margin-left
:
1
.666667rem
;
font-size
:
1
.333333rem
;
font-weight
:
600
;
color
:
$cOrange
;
letter-spacing
:
.083333rem
;
text-align
:
left
;
line-height
:
1
.5
;
span
{
cursor
:
pointer
;
text-decoration
:
underline
;
}
.message
{
margin-left
:
32px
;
// font-size: 1.333333rem;
font-weight
:
600
;
color
:
$cOrange
;
letter-spacing
:
.083333rem
;
text-align
:
left
;
line-height
:
1
.5
;
span
{
cursor
:
pointer
;
text-decoration
:
underline
;
}
}
}
.close
{
cursor
:
pointer
;
img
{
width
:
1
.666667rem
;
width
:
1
.666667rem
;
position
:
absolute
;
right
:
-2
.5rem
;
top
:
-1
.666667rem
;
top
:
-1
.666667rem
;
}
}
}
@media
(
max-width
:
800px
)
{
.modal
{
// height: 28.5rem;
padding
:
3rem
1
.5rem
;
width
:
80%
;
height
:
auto
;
.content
{
padding
:
5rem
4rem
;
}
.close
{
display
:
none
;
}
.modal
{
// height: 28.5rem;
padding
:
3rem
1
.5rem
;
width
:
80%
;
height
:
auto
;
.content
{
padding
:
5rem
4rem
;
}
.close
{
display
:
none
;
}
}
}
@media
(
max-width
:
700px
)
{
.modal
{
// height: 28.5rem;
padding
:
3rem
1
.5rem
;
width
:
80%
;
height
:
auto
;
.content
{
padding
:
4rem
2rem
;
}
.close
{
display
:
none
;
}
@media
(
max-width
:
700px
)
{
.modal
{
// height: 28.5rem;
padding
:
3rem
1
.5rem
;
width
:
80%
;
height
:
auto
;
.content
{
padding
:
4rem
2rem
;
}
.close
{
display
:
none
;
}
}
}
@media
(
max-width
:
450px
)
{
.modal
{
// height: 28.5rem;
padding
:
3rem
1
.5rem
;
width
:
90%
;
height
:
auto
;
.close
{
display
:
none
;
}
.content
{
padding
:
2rem
.5rem
;
}
.modal
{
// height: 28.5rem;
padding
:
3rem
1
.5rem
;
width
:
90%
;
height
:
auto
;
.close
{
display
:
none
;
}
.content
{
padding
:
2rem
.5rem
;
}
}
}
...
...
src/components/clarms/clarms-plugins-upload.scss
View file @
d6c2547
...
...
@@ -2,6 +2,10 @@
$borderSize
:
8px
;
.comp
{
font-size
:
22px
;
}
.clarms-container
{
box-sizing
:
border-box
;
padding
:
.166667rem
;
...
...
@@ -25,6 +29,7 @@ $borderSize: 8px;
border-radius
:
2px
;
padding
:
2px
;
background-image
:
linear-gradient
(
to
right
,
#ffb31d
,
#f15907
);
max-width
:
400px
;
.cont
{
@extend
.bb
;
...
...
@@ -33,6 +38,7 @@ $borderSize: 8px;
height
:
100%
;
background-color
:
#ffffff
;
border-radius
:
2px
;
font-size
:
18px
;
}
}
...
...
@@ -63,7 +69,7 @@ $borderSize: 8px;
}
.clarms-t1
{
font-size
:
1
.5rem
;
font-size
:
22px
;
color
:
#f15907
;
letter-spacing
:
.166667rem
;
}
...
...
@@ -71,6 +77,7 @@ $borderSize: 8px;
.clarms-t2
{
color
:
#58595b
;
letter-spacing
:
.166667rem
;
font-size
:
18px
;
}
}
...
...
@@ -89,7 +96,8 @@ $borderSize: 8px;
line-height
:
3rem
;
color
:
white
;
letter-spacing
:
.166667rem
;
font-size
:
1
.166667rem
;
// font-size: 1.166667rem;
font-size
:
18px
;
cursor
:
pointer
;
}
...
...
src/components/clarms/clarms-plugins-upload.vue
View file @
d6c2547
<
template
>
<div>
<div
class=
"comp"
>
<div
class=
"clarms-container"
>
<div
class=
"clarms-box"
>
<div
class=
"clarms-tips"
v-if=
"tipsVisible"
>
...
...
src/components/clarms/clarms-plugins-verifyform.scss
View file @
d6c2547
@import
'@/styles/_support'
;
.comp
{
font-size
:
22px
;
}
.orange
{
color
:
$cOrange
;
}
.gray
{
color
:
#747474
;
}
.submit-btn
{
background
:
url("~@assets/images/vhis/vhis-btn.png")
;
background-size
:
100%
100%
;
background-repeat
:
no-repeat
;
width
:
18rem
;
height
:
3rem
;
line-height
:
3rem
;
color
:
white
;
font-weight
:
600
;
cursor
:
pointer
;
margin
:
2
.5rem
auto
;
text-align
:
center
;
border-radius
:
1
.666667rem
;
}
.orange
{
color
:
$cOrange
;
}
.gray
{
color
:
#747474
;
}
.submit-btn
{
background
:
url("~@assets/images/vhis/vhis-btn.png")
;
background-size
:
100%
100%
;
background-repeat
:
no-repeat
;
width
:
300px
;
height
:
50px
;
line-height
:
50px
;
color
:
white
;
font-weight
:
600
;
cursor
:
pointer
;
margin
:
2
.5rem
auto
;
text-align
:
center
;
border-radius
:
50px
;
}
.reservation-container
{
@extend
.bb
;
border-radius
:
.666667rem
;
border
:
solid
.083333rem
$cOrange
;
background-color
:
#ffffff
;
padding
:
2
.666667rem
10rem
2
.833333rem
10rem
;
.title
{
font-size
:
1
.333333rem
;
color
:
$cOrange
;
text-align
:
center
;
margin
:
1
.666667rem
auto
0
auto
;
span
{
margin
:
0
.333333rem
;
}
}
.default-mt
{
margin-top
:
2
.666667rem
;
}
.flex-top
{
display
:
flex
;
justify-content
:
left
;
align-items
:
flex-start
;
}
.flex-start
{
display
:
flex
;
justify-content
:
left
;
align-items
:
flex-start
;
flex-wrap
:
wrap
;
@extend
.bb
;
border-radius
:
.666667rem
;
border
:
solid
2px
$cOrange
;
background-color
:
#ffffff
;
padding
:
2
.666667rem
10rem
2
.833333rem
10rem
;
.title
{
// font-size: 1.333333rem;
color
:
$cOrange
;
text-align
:
center
;
margin
:
1
.666667rem
auto
0
auto
;
span
{
margin
:
0
.333333rem
;
}
.check-item
{
display
:
flex
;
align-items
:
center
;
span
{
margin-left
:
.833333rem
;
}
}
.default-mt
{
margin-top
:
2
.666667rem
;
}
.flex-top
{
display
:
flex
;
justify-content
:
left
;
align-items
:
flex-start
;
}
.flex-start
{
display
:
flex
;
justify-content
:
left
;
align-items
:
flex-start
;
flex-wrap
:
wrap
;
}
.check-item
{
display
:
flex
;
align-items
:
center
;
span
{
margin-left
:
.833333rem
;
}
}
.tips
{
align-items
:
center
;
...
...
@@ -82,68 +88,157 @@
}
}
}
.form
{
display
:
flex
;
justify-content
:
space-between
;
flex-wrap
:
wrap
;
&
-name
{
// font-size: 1.333333rem;
font-weight
:
600
;
text-align
:
left
;
color
:
$cOrange
;
padding-left
:
15px
;
}
.ipt-date
{
width
:
100%
;
border
:
1px
solid
$cOrange
!
important
;
border-radius
:
.416667rem
;
height
:
3rem
;
align-items
:
center
;
padding
:
0
2rem
;
}
&
-item
{
width
:
50%
;
display
:
flex
;
justify-content
:
space-between
;
flex-wrap
:
wrap
;
&
-name
{
font-size
:
1
.333333rem
;
font-weight
:
600
;
text-align
:
left
;
color
:
$cOrange
;
padding-left
:
15px
;
}
.ipt-date
{
width
:
100%
;
border
:
1px
solid
$cOrange
!
important
;
border-radius
:
.416667rem
;
height
:
3rem
;
justify-content
:
center
;
padding
:
0
$marginSmall
;
margin-bottom
:
1
.333333rem
;
.label
{
display
:
flex
;
align-items
:
center
;
padding
:
0
2rem
;
width
:
30%
;
justify-content
:
flex-start
;
padding-left
:
5px
;
letter-spacing
:
.25rem
;
}
&
-item
{
width
:
50%
;
display
:
flex
;
justify-content
:
center
;
padding
:
0
$marginSmall
;
margin-bottom
:
1
.333333rem
;
.label
{
.ipt-wrap
{
width
:
70%
;
position
:
relative
;
// input和下拉
.ipt
{
border
:
1px
solid
$cOrange
!
important
;
border-radius
:
.416667rem
;
height
:
3rem
;
display
:
flex
;
align-items
:
center
;
width
:
30%
;
justify-content
:
flex-start
;
padding-left
:
5px
;
letter-spacing
:
.25rem
;
}
// 长文本
.textarea
{
min-height
:
8
.75rem
;
@extend
.bb
;
padding
:
.75rem
;
}
.down-arrow
{
z-index
:
10
;
position
:
absolute
;
top
:
1
.3rem
;
right
:
1
.2rem
;
background-image
:
url('~@/assets/images/reservation/re-down-arrow-2.png')
;
background-size
:
100%
100%
;
width
:
.633333rem
;
height
:
.433333rem
;
pointer-events
:
none
;
cursor
:
default
;
}
}
.validator
{
color
:
$cOrange
;
margin-top
:
0
.5rem
;
position
:
absolute
;
right
:
1rem
;
display
:
flex
;
align-items
:
center
;
// bottom: 0;
img
{
display
:
inline-block
;
margin-right
:
0
.4rem
;
}
}
}
&
-item-2
{
width
:
100%
;
display
:
flex
;
justify-content
:
flex-start
;
padding
:
0
$marginSmall
;
margin-bottom
:
1
.333333rem
;
.label
{
align-items
:
center
;
width
:
25%
;
padding-left
:
5px
;
letter-spacing
:
.25rem
;
.main-label
{
color
:
$cOrange
;
}
}
.date-container
{
width
:
60%
;
position
:
relative
;
}
.value
{
width
:
75%
;
position
:
relative
;
.ipt-wrap
{
width
:
70%
;
position
:
relative
;
// input和下拉
.ipt
{
border
:
1px
solid
$cOrange
!
important
;
border-radius
:
.416667rem
;
height
:
3rem
;
display
:flex
;
align-items
:
center
;
border
:
1px
solid
$cOrange
!
important
;
border-radius
:
.416667rem
;
height
:
3rem
;
display
:
flex
;
align-items
:
center
;
}
.ipt2
{
width
:
100%
;
border-bottom
:
1px
solid
#ccc
;
height
:
3rem
;
display
:
flex
;
align-items
:
center
;
margin-bottom
:
.833333rem
;
}
// 长文本
.textarea
{
min-height
:
8
.75rem
;
@extend
.bb
;
padding
:
.75rem
;
}
.down-arrow
{
z-index
:
10
;
position
:
absolute
;
...
...
@@ -157,160 +252,76 @@
cursor
:
default
;
}
}
.validator
{
color
:
$cOrange
;
margin-top
:
0
.5rem
;
position
:
absolute
;
right
:
1rem
;
display
:
flex
;
align-items
:
center
;
// bottom: 0;
img
{
display
:
inline-block
;
margin-right
:
0
.4rem
;
}
}
}
&
-item-2
{
width
:
100%
;
display
:
flex
;
justify-content
:
flex-start
;
padding
:
0
$marginSmall
;
margin-bottom
:
1
.333333rem
;
.label
{
align-items
:
center
;
width
:
25%
;
padding-left
:
5px
;
letter-spacing
:
.25rem
;
.main-label
{
color
:
$cOrange
;
}
}
.date-container
{
width
:
60%
;
position
:
relative
;
}
.value
{
width
:
75%
;
position
:
relative
;
.ipt-wrap
{
// input和下拉
.ipt
{
border
:
1px
solid
$cOrange
!
important
;
border-radius
:
.416667rem
;
height
:
3rem
;
display
:flex
;
align-items
:
center
;
}
.ipt2
{
width
:
100%
;
border-bottom
:
1px
solid
#ccc
;
height
:
3rem
;
display
:flex
;
align-items
:
center
;
margin-bottom
:
.833333rem
;
}
// 长文本
.textarea
{
min-height
:
8
.75rem
;
@extend
.bb
;
padding
:
.75rem
;
}
.down-arrow
{
z-index
:
10
;
position
:
absolute
;
top
:
1
.3rem
;
right
:
1
.2rem
;
background-image
:
url('~@/assets/images/reservation/re-down-arrow-2.png')
;
background-size
:
100%
100%
;
width
:
.633333rem
;
height
:
.433333rem
;
pointer-events
:
none
;
cursor
:
default
;
}
}
}
}
}
.notice
{
margin-top
:
4rem
;
@extend
.bb
;
padding
:
0
1rem
;
&
-item
{
position
:
relative
;
line-height
:
2
;
letter-spacing
:
1
.2px
;
margin-bottom
:
1rem
;
&
-icon
{
width
:
1
.166667rem
;
position
:
absolute
;
top
:
.6rem
;
}
}
.notice
{
margin-top
:
4rem
;
@extend
.bb
;
padding
:
0
1rem
;
&
-item
{
position
:
relative
;
line-height
:
2
;
letter-spacing
:
1
.2px
;
margin-bottom
:
1rem
;
&
-icon
{
width
:
1
.166667rem
;
position
:
absolute
;
top
:
.6rem
;
}
}
}
@media
(
max-width
:
1200px
)
{
.mobile-margin
{
margin-top
:
2
.5rem
;
}
.mobile-margin
{
margin-top
:
2
.5rem
;
}
}
@media
(
max-width
:
1000px
)
{
.form
{
&
-item
{
width
:
100%
;
.label
{
min-width
:
30%
;
}
.ipt-wrap
{
width
:
70%
;
}
.form
{
&
-item
{
width
:
100%
;
.label
{
min-width
:
30%
;
}
&
-item-2
{
.date-container
{
width
:
80%
;
}
.ipt-wrap
{
width
:
70%
;
}
}
&
-item-2
{
.date-container
{
width
:
80%
;
}
}
}
}
}
@media
(
max-width
:
700px
)
{
.reservation-container
{
padding
:
2
.666667rem
2rem
2
.833333rem
2rem
;
padding
:
2
.666667rem
2rem
2
.833333rem
2rem
;
}
.form
{
&
-item
{
width
:
100%
;
width
:
100%
;
.label
{
min-width
:
30%
;
}
.ipt-wrap
{
width
:
70%
;
}
.label
{
min-width
:
30%
;
}
.ipt-wrap
{
width
:
70%
;
}
}
&
-item2
{
...
...
@@ -322,16 +333,17 @@
}
&
-item-2
{
.label
{
width
:
30%
;
}
.value
{
width
:
70%
;
}
.label
{
width
:
30%
;
}
.date-container
{
width
:
100%
;
}
.value
{
width
:
70%
;
}
.date-container
{
width
:
100%
;
}
}
&
-item3
{
...
...
@@ -353,24 +365,24 @@
@media
(
max-width
:
500px
)
{
.date-wrap
.calendar-wrap
{
.date-wrap
.calendar-wrap
{
margin-left
:
-25px
!
important
;
}
.form
{
&
-item
{
flex-direction
:
column
;
width
:
100%
;
flex-direction
:
column
;
width
:
100%
;
.label
{
margin-bottom
:
.416667rem
;
min-width
:
100%
;
}
.ipt-wrap
{
width
:
100%
;
.label
{
margin-bottom
:
.416667rem
;
min-width
:
100%
;
}
}
.ipt-wrap
{
width
:
100%
;
}
}
}
}
\ No newline at end of file
}
...
...
src/components/clarms/clarms-plugins-verifyform.vue
View file @
d6c2547
<
template
>
<div
class=
"reservation-container"
>
<div
class=
"
comp
reservation-container"
>
<div
class=
"title"
v-if=
"!(userInfo && userInfo.name)"
><u><span
class=
"pointer"
@
click=
"toRegisterPage"
>
{{
$t
(
'clarms.step1.register'
)
}}
</span>
/
<span
class=
"pointer"
@
click=
"toLoginPage"
>
{{
$t
(
'clarms.step1.login'
)
}}
</span></u>
{{
$t
(
'clarms.step1.t1'
)
}}
</div>
<div
class=
"form-name default-mt"
>
{{
$t
(
'clarms.step1.label0'
)
}}
</div>
<div
class=
"gird-g form default-mt"
>
...
...
@@ -69,4 +69,4 @@
<
script
src=
"./clarms-plugins-verifyform.js"
></
script
>
<
style
lang=
"scss"
scoped
>
@import
"./clarms-plugins-verifyform.scss"
;
</
style
>
\ No newline at end of file
</
style
>
...
...
src/pages/c
ustom-service/component
s/clarms.js
→
src/pages/c
larm
s/clarms.js
View file @
d6c2547
File moved
src/pages/clarms/clarms.scss
0 → 100644
View file @
d6c2547
@import
'@/styles/_support'
;
.content
{
// padding-bottom: 2.33rem;
margin
:
2
.333333rem
auto
;
position
:
relative
;
}
input
{
padding
:
0
2
.083333rem
;
color
:
#333333
;
}
.orange
{
color
:
$cOrange
;
}
.gray
{
color
:
#747474
;
}
.border2
{
background-image
:
linear-gradient
(
to
right
,
#ffb31d
,
#f15907
);
}
.navigate
{
position
:
relative
;
margin
:
24px
auto
48px
;
.bg
{
position
:
absolute
;
height
:
13px
;
width
:
100%
;
background-image
:
linear-gradient
(
to
right
,
#ffb31d
,
#f15907
);
top
:
32px
;
}
.cont
{
position
:
relative
;
width
:
1200px
;
margin
:
0
auto
;
.tt
{
padding
:
0
24px
;
color
:
#ff6839
;
font-size
:
48px
;
font-weight
:
bold
;
letter-spacing
:
2
.45px
;
background-color
:
#ffffff
;
}
}
}
.submit-btn
{
background
:
url("~@assets/images/vhis/vhis-btn.png")
;
background-size
:
100%
100%
;
background-repeat
:
no-repeat
;
width
:
15rem
;
height
:
2
.5rem
;
line-height
:
2
.5rem
;
color
:
white
;
font-weight
:
600
;
cursor
:
pointer
;
margin
:
2
.5rem
auto
;
text-align
:
center
;
}
.reservation-container
{
@extend
.bb
;
border-radius
:
.666667rem
;
border
:
solid
2px
$cOrange
;
background-color
:
#ffffff
;
padding
:
2
.666667rem
10rem
2
.833333rem
10rem
;
.title
{
font-size
:
1
.333333rem
;
color
:
$cOrange
;
text-align
:
center
;
margin
:
1
.666667rem
auto
0
auto
;
span
{
padding
:
0
.166667rem
;
}
}
.default-mt
{
margin-top
:
2
.666667rem
;
}
.flex-top
{
display
:
flex
;
justify-content
:
left
;
align-items
:
flex-start
;
}
.flex-start
{
display
:
flex
;
justify-content
:
left
;
align-items
:
flex-start
;
flex-wrap
:
wrap
;
}
.check-item
{
display
:
flex
;
align-items
:
center
;
span
{
margin-left
:
.833333rem
;
}
}
}
.reservation-container-2
{
@extend
.bb
;
border-radius
:
.666667rem
;
border
:
solid
.083333rem
$cOrange
;
background-color
:
#ffffff
;
padding
:
1
.666667rem
10rem
2
.833333rem
10rem
;
.title
{
font-size
:
1
.333333rem
;
color
:
$cOrange
;
text-align
:
center
;
margin
:
1
.666667rem
auto
0
auto
;
select
{
padding
:
0
1
.25rem
;
border
:
none
;
border-bottom
:
.083333rem
solid
#666666
;
color
:
#666666
;
}
}
.default-mt
{
margin-top
:
2
.666667rem
;
}
.submit-btn
{
margin
:
2
.5rem
auto
1rem
;
}
.flex-top
{
display
:
flex
;
justify-content
:
left
;
align-items
:
flex-start
;
}
.flex-start
{
display
:
flex
;
justify-content
:
left
;
align-items
:
flex-start
;
flex-wrap
:
wrap
;
}
.check-item
{
display
:
flex
;
align-items
:
center
;
margin-right
:
2rem
;
margin-bottom
:
.833333rem
;
span
{
margin-left
:
.833333rem
;
}
img
{
width
:
1
.666667rem
;
}
}
.item-group
{
display
:
flex
;
justify-content
:
flex-start
;
align-items
:
flex-start
;
flex-wrap
:
wrap
;
}
.ml10
{
margin-left
:
.833333rem
;
}
.mr10
{
margin-right
:
.833333rem
;
}
.mt20
{
margin-top
:
1
.666667rem
;
}
.mt10
{
margin-top
:
.833333rem
;
}
.upload-item
{
.tip
{
color
:
$cOrange
;
font-size
:
1rem
;
margin-top
:
.833333rem
;
text-align
:
center
;
width
:
8
.333333rem
;
letter-spacing
:
1px
;
}
.upload-icon-1
{
width
:
8
.333333rem
;
height
:
8
.333333rem
;
background
:
url("~@/assets/images/clarms/icon1.png")
;
background-size
:
100%
100%
;
}
.upload-icon-2
{
width
:
8
.333333rem
;
height
:
8
.333333rem
;
background
:
url("~@/assets/images/clarms/icon2.png")
;
background-size
:
100%
100%
;
}
.upload-icon-3
{
width
:
8
.333333rem
;
height
:
8
.333333rem
;
background
:
url("~@/assets/images/clarms/icon3.png")
;
background-size
:
100%
100%
;
}
.upload-icon-4
{
width
:
8
.333333rem
;
height
:
8
.333333rem
;
background
:
url("~@/assets/images/clarms/icon4.png")
;
background-size
:
100%
100%
;
}
.upload-icon-5
{
width
:
8
.333333rem
;
height
:
8
.333333rem
;
background
:
url("~@/assets/images/clarms/icon5.png")
;
background-size
:
100%
100%
;
}
}
.bottom-tip
{
font-size
:
.833333rem
;
display
:
flex
;
align-items
:
center
;
span
{
margin-left
:
1
.3rem
;
}
img
{
width
:
1
.3rem
;
}
}
hr
{
border-top
:
1px
solid
#eee
;
margin-top
:
2
.5rem
;
}
.tips
{
display
:
flex
;
justify-content
:
flex-start
;
align-items
:
center
;
img
{
width
:
.833333rem
;
}
span
{
font-size
:
1rem
;
margin-left
:
.833333rem
;
color
:
$cOrange
;
}
}
.contact
{
text-align
:
center
;
cursor
:
pointer
;
color
:
$cOrange
;
font-weight
:
600
;
}
}
.form
{
display
:
flex
;
justify-content
:
space-between
;
flex-wrap
:
wrap
;
&
-name
{
font-size
:
1
.333333rem
;
font-weight
:
600
;
text-align
:
left
;
color
:
$cOrange
;
padding-left
:
15px
;
}
.ipt-date
{
width
:
100%
;
border
:
1px
solid
$cOrange
!
important
;
border-radius
:
.416667rem
;
height
:
3rem
;
align-items
:
center
;
padding-left
:
.833333rem
;
}
&
-item
{
width
:
50%
;
display
:
flex
;
justify-content
:
center
;
padding
:
0
$marginSmall
;
margin-bottom
:
1
.333333rem
;
.label
{
display
:
flex
;
align-items
:
center
;
min-width
:
30%
;
justify-content
:
flex-start
;
padding-left
:
5px
;
letter-spacing
:
.25rem
;
}
.ipt-wrap
{
width
:
70%
;
position
:
relative
;
// input和下拉
.ipt
{
border
:
1px
solid
$cOrange
!
important
;
border-radius
:
.416667rem
;
height
:
3rem
;
display
:
flex
;
align-items
:
center
;
}
// 长文本
.textarea
{
min-height
:
8
.75rem
;
@extend
.bb
;
padding
:
.75rem
;
}
.down-arrow
{
z-index
:
10
;
position
:
absolute
;
top
:
1
.3rem
;
right
:
1
.2rem
;
background-image
:
url('~@/assets/images/reservation/re-down-arrow-2.png')
;
background-size
:
100%
100%
;
width
:
.633333rem
;
height
:
.433333rem
;
pointer-events
:
none
;
cursor
:
default
;
}
}
.validator
{
color
:
$cOrange
;
margin-top
:
0
.5rem
;
position
:
absolute
;
right
:
1rem
;
display
:
flex
;
align-items
:
center
;
// bottom: 0;
img
{
display
:
inline-block
;
margin-right
:
0
.4rem
;
}
}
}
&
-item-2
{
width
:
100%
;
display
:
flex
;
justify-content
:
flex-start
;
padding
:
0
$marginSmall
;
margin-bottom
:
1
.333333rem
;
.label
{
align-items
:
center
;
width
:
25%
;
padding-left
:
5px
;
letter-spacing
:
.25rem
;
.main-label
{
color
:
$cOrange
;
}
}
.date-container
{
width
:
60%
;
position
:
relative
;
}
.value
{
width
:
75%
;
position
:
relative
;
.ipt-wrap
{
// input和下拉
.ipt
{
border
:
1px
solid
$cOrange
!
important
;
border-radius
:
.416667rem
;
height
:
3rem
;
display
:
flex
;
align-items
:
center
;
}
.ipt2
{
width
:
100%
;
border-bottom
:
1px
solid
#ccc
;
height
:
3rem
;
display
:
flex
;
align-items
:
center
;
margin-bottom
:
.833333rem
;
}
// 长文本
.textarea
{
min-height
:
8
.75rem
;
@extend
.bb
;
padding
:
.75rem
;
}
.down-arrow
{
z-index
:
10
;
position
:
absolute
;
top
:
1
.3rem
;
right
:
1
.2rem
;
background-image
:
url('~@/assets/images/reservation/re-down-arrow-2.png')
;
background-size
:
100%
100%
;
width
:
.633333rem
;
height
:
.433333rem
;
pointer-events
:
none
;
cursor
:
default
;
}
}
}
}
}
.notice
{
margin-top
:
4rem
;
@extend
.bb
;
padding
:
0
1rem
;
&
-item
{
position
:
relative
;
line-height
:
2
;
letter-spacing
:
1
.2px
;
margin-bottom
:
1rem
;
&
-icon
{
width
:
1
.166667rem
;
position
:
absolute
;
top
:
.6rem
;
}
}
}
// .submit-btn {
// width: 13.583333rem;
// height: 4.083333rem;
// margin: 2.5rem auto;
// line-height: 4.083333rem;
// box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
// background-blend-mode: soft-light, ;
// background-image: linear-gradient(to bottom, #ec6429, #ec6429), linear-gradient(to top, #000000, #ffffff);
// // background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
// text-align: center;
// font-size: $fontSize;
// letter-spacing: .129167rem;
// color: #ffffff;
// border-radius: 3.5rem;
// cursor: pointer;
// border: none;
// color: #ffffff;
// background-color: $cOrange;
// box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
// background-blend-mode: soft-light, ;
// background-image: linear-gradient(to bottom, #ec6429, #ec6429), linear-gradient(to top, #000000, #ffffff);
// // background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
// }
@media
(
max-width
:
1200px
)
{
.mobile-margin
{
margin-top
:
2
.5rem
;
}
}
@media
(
max-width
:
1000px
)
{
.reservation-container-2
{
padding
:
1
.666667rem
2rem
2
.833333rem
2rem
;
}
.form
{
&
-item
{
width
:
100%
;
.label
{
min-width
:
30%
;
}
.ipt-wrap
{
width
:
70%
;
}
}
&
-item-2
{
.date-container
{
width
:
80%
;
}
}
}
}
@media
(
max-width
:
600px
)
{
.reservation-container
{
padding
:
2
.666667rem
2rem
2
.833333rem
2rem
;
}
.form
{
&
-item
{
width
:
100%
;
.label
{
min-width
:
30%
;
}
.ipt-wrap
{
width
:
70%
;
}
}
&
-item2
{
display
:
block
;
.ipt-wrap
{
margin
:
0
;
}
}
&
-item-2
{
.label
{
width
:
30%
;
}
.value
{
width
:
70%
;
}
.date-container
{
width
:
100%
;
}
}
&
-item3
{
display
:
block
;
.ipt-wrap
{
margin
:
0
;
width
:
100%
;
}
}
}
.notice
{
margin
:
0
;
}
}
@media
(
max-width
:
400px
)
{
.reservation-container-2
{
padding
:
1
.666667rem
1rem
;
}
}
src/pages/c
ustom-service/component
s/clarms.vue
→
src/pages/c
larm
s/clarms.vue
View file @
d6c2547
<
template
>
<div>
<div
class=
"navigate"
>
<div
class=
"bg"
></div>
<div
class=
"cont"
>
<span
class=
"tt"
>
索償申請
</span>
</div>
</div>
<div
class=
"content clarms"
>
<template
v-if=
"step == 3"
>
<div
class=
"alert"
>
<img
class=
"icon"
src=
"@/assets/images/common/icon-alert-i.png"
alt=
""
>
<div
class=
"txt"
>
{{
$t
(
'customService.unauth.baseInfoTip'
)
}}
<span
class=
"pointer btn"
@
click=
"gotoInformationPage"
>
{{
$t
(
'customService.unauth.infoBtn'
)
}}
</span>
{{
$t
(
'customService.unauth.baseInfoTail'
)
}}
</div>
<!--
<img
class=
"pointer close"
src=
"@/assets/images/common/icon-alert-close.png"
alt=
""
>
-->
</div>
</
template
>
<clarms-modal-one
v-if=
"showModal1"
@
close=
"showModal1 = false"
></clarms-modal-one>
<clarms-modal-two
v-if=
"showModal2"
@
close=
"showModal2 = false"
></clarms-modal-two>
<div
class=
"mobile-margin"
>
<div>
<template
v-if=
"step == 3"
>
<div
class=
"alert"
>
<img
class=
"icon"
src=
"@/assets/images/common/icon-alert-i.png"
alt=
""
>
<div
class=
"txt"
>
{{
$t
(
'customService.unauth.baseInfoTip'
)
}}
<span
class=
"pointer btn"
@
click=
"gotoInformationPage"
>
{{
$t
(
'customService.unauth.infoBtn'
)
}}
</span>
{{
$t
(
'customService.unauth.baseInfoTail'
)
}}
</div>
<!--
<img
class=
"pointer close"
src=
"@/assets/images/common/icon-alert-close.png"
alt=
""
>
-->
</div>
</
template
>
<clarms-modal-one
v-if=
"showModal1"
@
close=
"showModal1 = false"
></clarms-modal-one>
<clarms-modal-two
v-if=
"showModal2"
@
close=
"showModal2 = false"
></clarms-modal-two>
<div
class=
"mobile-margin"
>
<
template
v-if=
"step == 1"
>
<clarms-verify-form
@
insuredInfoList=
"handleInsuredInfo"
></clarms-verify-form>
</
template
>
<
template
v-if=
"step == 1"
>
<clarms-verify-form
@
insuredInfoList=
"handleInsuredInfo"
></clarms-verify-form>
</
template
>
<
template
v-if=
"step == 2"
>
<clarms-material
:insuredList=
"customerList"
:cid=
"cid"
@
showModal=
"handleShowModal"
></clarms-material>
</
template
>
</div>
</div>
</div>
<
template
v-if=
"step == 2"
>
<clarms-material
:insuredList=
"customerList"
:cid=
"cid"
@
showModal=
"handleShowModal"
></clarms-material>
</
template
>
</div>
</div>
</template>
<
script
src=
"./clarms.js"
></
script
>
...
...
src/pages/custom-service/components/clarms-comp.js
0 → 100644
View file @
d6c2547
import
{
mapGetters
,
mapActions
,
mapState
}
from
"vuex"
;
import
api
from
'@/api/api'
import
{
httpGet
,
httpPost
}
from
'@/api/fetch-api.js'
import
ClarmsModalOne
from
'@/components/clarms/clarms-plugins-modal1.vue'
;
import
ClarmsModalTwo
from
'@/components/clarms/clarms-plugins-modal2.vue'
;
import
ClarmsVerifyForm
from
'@/components/clarms/clarms-plugins-verifyform.vue'
;
import
ClarmsMaterial
from
'@/components/clarms/clarms-plugins-material.vue'
;
// 用户没有登录
// 校验成功
// 校验失败
// 用户已经登录
// 没有保单
// 校验成功
// 校验失败
// 有保单
export
default
{
data
()
{
return
{
step
:
0
,
// 1是表单;2是报案页面;3=信息不完整
showModal1
:
false
,
showModal2
:
false
,
agress
:
false
,
reservationTypes
:
[],
cid
:
false
,
// 可以理赔的客户信息
customerList
:
[]
}
},
components
:
{
ClarmsVerifyForm
,
ClarmsMaterial
,
ClarmsModalOne
,
ClarmsModalTwo
},
computed
:
{
...
mapState
({
userInfo
:
state
=>
state
.
userInfo
}),
i18n
()
{
return
this
.
$i18n
.
messages
&&
this
.
$i18n
.
locale
?
this
.
$i18n
.
messages
[
this
.
$i18n
.
locale
]
:
{};
},
},
methods
:
{
toClarms
()
{
this
.
$router
.
push
({
path
:
"/clarms"
,
query
:
{}
});
},
initData
()
{
// this.step = 2;
// return;
if
(
this
.
userInfo
&&
this
.
userInfo
.
name
)
{
this
.
loadCidIfLogin
();
sessionStorage
.
removeItem
(
"clarmsRequestCid"
)
}
else
{
let
cid
=
sessionStorage
.
getItem
(
"clarmsRequestCid"
);
if
(
cid
)
{
this
.
cid
=
cid
;
this
.
checkCid
();
}
else
{
this
.
step
=
1
;
}
}
},
loadCidIfLogin
()
{
let
param
=
{
sid
:
this
.
userInfo
.
sid
};
httpPost
({
url
:
api
.
getCidByLogin
,
sid
:
true
,
data
:
param
}).
then
(
res
=>
{
if
(
res
)
{
this
.
cid
=
res
;
this
.
checkCid
();
}
else
{
this
.
step
=
3
;
}
}).
catch
(
e
=>
{
this
.
step
=
1
;
});
},
checkCid
()
{
let
param
=
{
cid
:
this
.
cid
}
httpPost
({
url
:
api
.
clarmsCustomerList
,
data
:
param
}).
then
(
res
=>
{
sessionStorage
.
removeItem
(
"clarmsRequestCid"
);
if
(
res
)
{
this
.
customerList
=
res
.
insuredInfoList
;
this
.
step
=
2
;
}
// if (res && res.insuredInfoList && res.insuredInfoList.length > 0) {
// this.customerList = res.insuredInfoList;
// this.step = 2;
// } else {
// sessionStorage.removeItem("clarmsRequestCid");
// this.step = 1;
// }
}).
catch
(
e
=>
{
sessionStorage
.
removeItem
(
"clarmsRequestCid"
);
this
.
step
=
1
;
});
},
handleInsuredInfo
(
data
)
{
this
.
cid
=
data
.
cid
;
this
.
customerList
=
data
.
list
;
this
.
step
=
2
;
},
handleShowModal
(
modalIndex
)
{
console
.
log
(
modalIndex
);
if
(
modalIndex
==
1
)
{
this
.
showModal1
=
true
;
}
else
if
(
modalIndex
==
2
)
{
this
.
showModal2
=
true
;
}
},
gotoInformationPage
()
{
let
c
=
this
.
$route
.
fullPath
;
this
.
$router
.
push
({
path
:
"/infomation/improve"
,
query
:
{
c
:
c
,
a
:
1
}
});
},
logoutAction
()
{
this
.
sid
=
false
;
this
.
hadQueryCustomerList
=
false
;
this
.
customerList
=
[];
this
.
step
=
1
;
},
loginAction
()
{
this
.
sid
=
false
;
this
.
hadQueryCustomerList
=
false
;
this
.
customerList
=
[];
}
},
watch
:
{
userInfo
(
val
)
{
if
(
val
&&
val
.
name
)
{
this
.
loginAction
();
}
else
{
this
.
logoutAction
();
}
}
},
mounted
()
{
this
.
initData
();
},
created
()
{}
}
src/pages/custom-service/components/clarms.scss
→
src/pages/custom-service/components/clarms
-comp
.scss
View file @
d6c2547
...
...
@@ -29,11 +29,13 @@ input {
}
.reservation-container
{
@extend
.fcc
;
@extend
.bb
;
border-radius
:
.666667rem
;
border
:
solid
.083333rem
$cOrange
;
background-color
:
#ffffff
;
padding
:
2
.666667rem
10rem
2
.833333rem
10rem
;
min-height
:
500px
;
.title
{
font-size
:
1
.333333rem
;
...
...
@@ -80,7 +82,7 @@ input {
border
:
solid
.083333rem
$cOrange
;
background-color
:
#ffffff
;
padding
:
1
.666667rem
10rem
2
.833333rem
10rem
;
.title
{
font-size
:
1
.333333rem
;
color
:
$cOrange
;
...
...
@@ -94,28 +96,28 @@ input {
color
:
#666666
;
}
}
.default-mt
{
margin-top
:
2
.666667rem
;
}
.submit-btn
{
margin
:
2
.5rem
auto
1rem
;
}
.flex-top
{
display
:
flex
;
justify-content
:
left
;
align-items
:
flex-start
;
}
.flex-start
{
display
:
flex
;
justify-content
:
left
;
align-items
:
flex-start
;
flex-wrap
:
wrap
;
}
.check-item
{
display
:
flex
;
align-items
:
center
;
...
...
@@ -171,28 +173,28 @@ input {
background
:
url("~@/assets/images/clarms/icon1.png")
;
background-size
:
100%
100%
;
}
.upload-icon-2
{
width
:
8
.333333rem
;
height
:
8
.333333rem
;
background
:
url("~@/assets/images/clarms/icon2.png")
;
background-size
:
100%
100%
;
}
.upload-icon-3
{
width
:
8
.333333rem
;
height
:
8
.333333rem
;
background
:
url("~@/assets/images/clarms/icon3.png")
;
background-size
:
100%
100%
;
}
.upload-icon-4
{
width
:
8
.333333rem
;
height
:
8
.333333rem
;
background
:
url("~@/assets/images/clarms/icon4.png")
;
background-size
:
100%
100%
;
}
.upload-icon-5
{
width
:
8
.333333rem
;
height
:
8
.333333rem
;
...
...
@@ -218,7 +220,7 @@ input {
border-top
:
1px
solid
#eee
;
margin-top
:
2
.5rem
;
}
.tips
{
display
:
flex
;
justify-content
:
flex-start
;
...
...
@@ -234,7 +236,7 @@ input {
color
:
$cOrange
;
}
}
.contact
{
text-align
:
center
;
cursor
:
pointer
;
...
...
@@ -242,7 +244,7 @@ input {
font-weight
:
600
;
}
}
.form
{
display
:
flex
;
...
...
@@ -466,7 +468,7 @@ input {
.label
{
min-width
:
30%
;
}
.ipt-wrap
{
width
:
70%
;
}
...
...
@@ -478,7 +480,7 @@ input {
}
}
}
}
}
@media
(
max-width
:
600px
)
{
.reservation-container
{
...
...
@@ -492,7 +494,7 @@ input {
.label
{
min-width
:
30%
;
}
.ipt-wrap
{
width
:
70%
;
}
...
...
@@ -539,4 +541,4 @@ input {
.reservation-container-2
{
padding
:
1
.666667rem
1rem
;
}
}
\ No newline at end of file
}
...
...
src/pages/custom-service/components/clarms-comp.vue
0 → 100644
View file @
d6c2547
<
template
>
<div
class=
"reservation-container"
>
<div
class=
"submit-btn"
@
click=
"toClarms"
>
下一步
</div>
</div>
<!--
<div>
<template
v-if=
"step == 3"
>
<div
class=
"alert"
>
<img
class=
"icon"
src=
"@/assets/images/common/icon-alert-i.png"
alt=
""
>
<div
class=
"txt"
>
{{
$t
(
'customService.unauth.baseInfoTip'
)
}}
<span
class=
"pointer btn"
@
click=
"gotoInformationPage"
>
{{
$t
(
'customService.unauth.infoBtn'
)
}}
</span>
{{
$t
(
'customService.unauth.baseInfoTail'
)
}}
</div>
</div>
</
template
>
<clarms-modal-one
v-if=
"showModal1"
@
close=
"showModal1 = false"
></clarms-modal-one>
<clarms-modal-two
v-if=
"showModal2"
@
close=
"showModal2 = false"
></clarms-modal-two>
<div
class=
"mobile-margin"
>
<
template
v-if=
"step == 1"
>
<clarms-verify-form
@
insuredInfoList=
"handleInsuredInfo"
></clarms-verify-form>
</
template
>
<
template
v-if=
"step == 2"
>
<clarms-material
:insuredList=
"customerList"
:cid=
"cid"
@
showModal=
"handleShowModal"
></clarms-material>
</
template
>
</div>
</div>
-->
</template>
<
script
src=
"./clarms-comp.js"
></
script
>
<
style
lang=
"scss"
scoped
>
@import
"./clarms-comp.scss"
;
</
style
>
src/pages/custom-service/custom-service.js
View file @
d6c2547
...
...
@@ -14,7 +14,7 @@ import CommonForm from './components/common-form.vue'
import
PolicyChangeGuide
from
'./components/policy-change-guide.vue'
import
PolicyChangeContact
from
'./components/policy-change-contact.vue'
import
PolicyChangeInformation
from
'./components/policy-change-information.vue'
import
Clarms
from
'./components/clarms.vue'
import
Clarms
from
'./components/clarms
-comp
.vue'
export
default
{
data
()
{
...
...
src/pages/vhis-detail/vhis-detail.js
View file @
d6c2547
...
...
@@ -189,7 +189,7 @@ export default {
this
.
$set
(
this
,
'bannerList'
,
bannerList
);
console
.
log
(
this
.
bannerList
);
this
.
refreshVideoPlayer
(
targetData
.
videoUrl
,
targetData
.
videoP
lay
er
);
this
.
refreshVideoPlayer
(
targetData
.
videoUrl
,
targetData
.
videoP
ost
er
);
// 设置标题
document
.
title
=
targetData
.
productName
;
...
...
src/router.js
View file @
d6c2547
...
...
@@ -276,6 +276,14 @@ const routes = [
meta
:
{
title
:
'平安人寿香港'
}
},
{
path
:
'/clarms'
,
name
:
'clarms'
,
component
:
()
=>
import
(
'./pages/clarms/clarms.vue'
),
meta
:
{
title
:
'平安人寿香港'
}
}
// 404页面
// {
...
...
@@ -306,12 +314,12 @@ router.beforeEach((to, from, next) => {
case
"zh"
:
lang
=
zh
;
break
;
// 英文
// 英文
case
"en"
:
defaultTitle
=
"Ping An Life Hong Kong"
lang
=
en
;
break
;
// 繁体
// 繁体
default
:
defaultTitle
=
"平安人壽香港"
lang
=
tc
;
...
...
Please
register
or
sign in
to post a comment