Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
U
uc_card
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
zhoujun
uc_card
Commits
9f0d83fa
Commit
9f0d83fa
authored
Nov 25, 2021
by
顾敏
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'test' of
http://gitlab.cccwangluo.com/zhoujun/uc_card
into test
parents
c7c55077
87fd37ef
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
6 additions
and
4 deletions
+6
-4
src/public/static/postcard/css/style.css
src/public/static/postcard/css/style.css
+1
-1
src/public/static/postcard/css/style.less
src/public/static/postcard/css/style.less
+4
-2
src/resources/views/card/card.blade.php
src/resources/views/card/card.blade.php
+1
-1
No files found.
src/public/static/postcard/css/style.css
View file @
9f0d83fa
@charset
"utf-8"
;
*
{
margin
:
0
;
padding
:
0
}
*
:focus
{
outline
:
0
}
ul
,
li
,
ol
{
list-style
:
none
}
a
{
color
:
#5f1a11
;
text-decoration
:
none
}
i
,
em
{
font-style
:
normal
}
a
,
button
,
input
,
select
,
img
,
label
,
li
,
div
{
-webkit-tap-highlight-color
:
rgba
(
0
,
0
,
0
,
0
);
-webkit-tap-highlight-color
:
transparent
;
outline
:
medium
none
}
html
,
body
,
select
,
input
,
textarea
{
font-family
:
"SC-Bold,PingFang SC Bold, Microsoft YaHei"
,
"Arial"
,
"黑体"
,
"宋体"
,
sans-serif
}
html
,
body
{
position
:
relative
}
input
,
button
,
select
,
textarea
{
outline
:
none
;
border
:
0
}
::-webkit-input-placeholder
{
color
:
#ababab
;
vertical-align
:
middle
;
line-height
:
normal
}
::-moz-placeholder
{
color
:
#ababab
;
vertical-align
:
middle
;
line-height
:
normal
}
:-ms-input-placeholder
{
color
:
#ababab
;
vertical-align
:
middle
;
line-height
:
normal
}
.clearfix
{
display
:
block
;
zoom
:
1
}
.clearfix
:after
{
content
:
" "
;
display
:
block
;
font-size
:
0
;
height
:
0
;
clear
:
both
;
visibility
:
hidden
}
.hide
{
display
:
none
}
.show
{
display
:
block
}
.m-img
{
width
:
100%
;
display
:
block
}
.dil
{
display
:
inline-block
}
.tc
{
text-align
:
center
}
.btn
{
height
:
1.38rem
;
background
:
#09f
;
font-size
:
.52rem
;
color
:
#fff
;
border-radius
:
.66rem
;
cursor
:
pointer
;
-webkit-box-shadow
:
0
6px
10px
rgba
(
0
,
153
,
255
,
0.34
);
box-shadow
:
0
6px
10px
rgba
(
0
,
153
,
255
,
0.34
)}
.btn.btn-small
{
height
:
1.06rem
;
font-size
:
.48rem
}
.container
{
max-width
:
540px
;
margin
:
0
auto
;
font-size
:
0
}
.home-container
{
width
:
100%
;
min-height
:
100vh
;
background
:
url("../images/body_bg1.jpg")
no-repeat
center
top
;
background-size
:
100%
auto
;
overflow
:
hidden
}
.home-container
.header-avatar
{
position
:
relative
;
width
:
3.52rem
;
height
:
3.52rem
;
margin
:
7.77rem
auto
0
;
border-radius
:
100%
;
overflow
:
hidden
}
.home-container
.header-avatar
span
{
position
:
absolute
;
left
:
0
;
top
:
0
;
width
:
100%
;
height
:
100%
;
background
:
url("../images/avatar_border.png")
no-repeat
center
;
background-size
:
100%
auto
;
-webkit-animation
:
Rotate
2s
linear
infinite
;
animation
:
Rotate
2s
linear
infinite
}
.home-container
.header-avatar
img
{
border-radius
:
100%
;
width
:
3.1rem
;
height
:
3.1rem
;
display
:
block
;
margin
:
.21rem
auto
}
.home-container
.btn-start
{
display
:
block
;
width
:
6.65rem
;
height
:
2.06rem
;
margin
:
1.9rem
auto
0
;
background
:
url("../images/btn_start.png")
no-repeat
center
;
background-size
:
100%
auto
}
.postcard-container
{
padding-bottom
:
1rem
;
background
:
url("../images/body_bg3.jpg")
no-repeat
center
top
,
url("../images/bg.jpg")
repeat-y
center
;
background-size
:
100%
auto
}
.postcard-container
{
padding-top
:
4.75rem
}
.role-container
{
overflow
:
hidden
;
margin
:
0
auto
;
position
:
relative
;
min-height
:
5.5rem
;
padding
:
1.5rem
.9rem
0
}
.role-container
.icon-red
{
position
:
absolute
;
right
:
.6rem
;
bottom
:
.7rem
;
z-index
:
1
;
width
:
1.25rem
;
height
:
1.25rem
;
background
:
url("../images/icon_red.png")
no-repeat
center
;
background-size
:
100%
auto
}
.role-container
.role-avatar
{
margin
:
0
auto
;
text-align
:
center
;
position
:
absolute
;
left
:
0
;
top
:
-0.5rem
}
.role-container
.role-avatar
.img-border
{
position
:
absolute
;
left
:
0
;
top
:
0
;
width
:
100%
;
height
:
100%
}
.role-container
.role-avatar
.img-header
{
width
:
4.57rem
;
display
:
inline-block
}
.role-container
li
{
font-weight
:
bold
;
text-align
:
center
;
font-size
:
0
;
padding-top
:
.15rem
}
.role-container
li
img
{
height
:
.32rem
}
.role-container
li
span
{
margin-left
:
.2rem
;
display
:
inline-block
;
width
:
2.6rem
;
height
:
.5rem
;
line-height
:
.5rem
;
background
:
url("../images/wn_bg.png")
no-repeat
center
;
background-size
:
100%
auto
;
-webkit-text-overflow
:
ellipsis
;
-moz-text-overflow
:
ellipsis
;
-ms-text-overflow
:
ellipsis
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
overflow
:
hidden
;
font-size
:
.24rem
;
color
:
#5f1a11
}
.role-container
.left
{
float
:
left
;
width
:
50%
;
position
:
relative
}
.role-container
.left
ul
{
padding-top
:
3rem
}
.role-container
.right
{
float
:
right
;
width
:
50%
}
.role-container
.right
ul
{
padding-top
:
.2rem
}
.role-container
.bottom
{
position
:
absolute
;
right
:
1rem
;
bottom
:
.65rem
}
.role-container
.bottom
img
{
display
:
inline-block
;
vertical-align
:
text-bottom
}
.role-container
.bottom
.img1
{
width
:
2.89rem
}
.role-container
.bottom
.b-num
{
display
:
inline-block
;
vertical-align
:
text-bottom
}
.role-container
.bottom
.b-num
span
{
vertical-align
:
middle
;
display
:
inline-block
;
height
:
.4rem
;
line-height
:
.4rem
;
text-align
:
center
;
font
:
bold
.4rem
"Arial"
;
color
:
#5f1a11
;
margin
:
0
}
.role-container
.bottom
span
{
font-size
:
1rem
;
color
:
#5f1a11
;
font-weight
:
bold
;
margin
:
0
.1rem
}
.role-container
.bottom
.img2
{
width
:
.46rem
}
.range-container
{
height
:
4.45rem
;
padding-top
:
1.35rem
;
background
:
url("../images/content2.png")
no-repeat
center
top
;
background-size
:
100%
auto
;
margin
:
.4rem
auto
0
}
.range-container
.range-num
{
width
:
7.9rem
;
margin
:
1.2rem
auto
0
;
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
-ms-flex-line-pack
:
center
;
align-content
:
center
;
-ms-flex-pack
:
distribute
;
justify-content
:
space-around
}
.range-container
span
{
display
:
inline-block
;
width
:
1.33rem
;
height
:
1.37rem
;
line-height
:
1.5rem
;
text-align
:
center
;
font-size
:
1.06rem
;
font-weight
:
bold
;
color
:
#5f1a11
;
background
:
url("../images/num_border.png")
no-repeat
center
;
background-size
:
100%
auto
}
.arms-container
{
position
:
relative
;
height
:
5.22rem
;
background
:
url("../images/content3.png")
no-repeat
center
top
;
background-size
:
100%
auto
}
.arms-container
.arms
{
position
:
relative
;
width
:
9rem
;
height
:
5.22rem
;
overflow
:
hidden
;
padding-top
:
1.9rem
;
padding-left
:
1.2rem
;
font-size
:
0
}
.arms-container
.arms
.left
{
float
:
left
}
.arms-container
.arms
.left
li
{
position
:
relative
;
height
:
.62rem
;
line-height
:
.62rem
;
margin-bottom
:
.3rem
}
.arms-container
.arms
.left
span
{
position
:
absolute
;
left
:
.2rem
;
top
:
0
;
font-size
:
.24rem
;
color
:
#74624e
}
.arms-container
.arms
.left
em
{
margin-left
:
1rem
;
display
:
inline-block
;
width
:
3.81rem
;
text-align
:
center
;
font-size
:
.26rem
;
color
:
#5f1a11
;
height
:
.62rem
;
line-height
:
.62rem
;
font-weight
:
bold
;
background
:
url("../images/wn_bg.png")
no-repeat
center
;
background-size
:
100%
auto
}
.arms-container
.arms
.right
{
float
:
left
;
margin-top
:
-0.35rem
}
.arms-container
.arms
.right
li
{
text-align
:
center
}
.arms-container
.arms
.right
li
em
{
display
:
block
;
font-size
:
.24rem
;
color
:
#74624e
;
-webkit-transform
:
scale
(
.7
);
transform
:
scale
(
.7
);
margin-bottom
:
.02rem
}
.arms-container
.arms
.right
li
div
{
width
:
3.4rem
;
text-align
:
center
;
font-weight
:
bold
}
.arms-container
.arms
.right
li
div
span
{
display
:
inline-block
;
width
:
.6rem
;
height
:
.6rem
;
line-height
:
.6rem
;
margin
:
0
.04rem
;
font-size
:
.45rem
;
color
:
#5f1a11
;
background
:
url("../images/num_border.png")
no-repeat
center
;
background-size
:
100%
auto
}
.mr-container
{
position
:
relative
;
margin-top
:
.9rem
;
background
:
url("../images/content4.png")
no-repeat
center
top
;
background-size
:
100%
auto
}
.mr-container
.mr
{
position
:
relative
;
height
:
5.27rem
;
width
:
8.6rem
;
margin
:
0
auto
;
overflow
:
hidden
}
.mr-container
.mr
span
{
margin
:
3.6rem
0
0
3.5rem
;
display
:
block
;
width
:
1.79rem
;
height
:
.83rem
}
.mr-container
.mr
span
.img-SSS
{
background
:
url("../images/img_sss.png")
no-repeat
center
;
background-size
:
100%
auto
}
.mr-container
.mr
span
.img-SS
{
background
:
url("../images/img_ss.png")
no-repeat
center
;
background-size
:
100%
auto
}
.mr-container
.mr
span
.img-S
{
background
:
url("../images/img_s.png")
no-repeat
center
;
background-size
:
100%
auto
}
.mr-container
.mr
span
.img-A
{
background
:
url("../images/img_a.png")
no-repeat
center
;
background-size
:
100%
auto
}
.mr-container
.mr
span
.img-B
{
background
:
url("../images/img_b.png")
no-repeat
center
;
background-size
:
100%
auto
}
.mr-container
.mr
span
.img-C
{
background
:
url("../images/img_c.png")
no-repeat
center
;
background-size
:
100%
auto
}
.yzzt-container
{
margin-top
:
.75rem
;
height
:
2.71rem
;
background
:
url("../images/content5.png")
no-repeat
center
top
;
background-size
:
100%
auto
;
padding-top
:
3.3rem
}
.yzzt-container
span
{
font-size
:
.7rem
;
color
:
#fdfdff
;
display
:
inline-block
;
text-align
:
center
;
width
:
1.7rem
}
.yzzt-container
span
.num1
{
margin-left
:
2.36rem
}
.yzzt-container
span
.num2
{
margin-left
:
2.83rem
}
.zdsy-container
{
margin-top
:
.8rem
;
height
:
2.71rem
;
background
:
url("../images/content6.png")
no-repeat
center
top
;
background-size
:
100%
auto
;
padding-top
:
3.3rem
}
.zdsy-container
span
{
font-size
:
.7rem
;
color
:
#feee64
;
display
:
inline-block
;
text-align
:
center
;
width
:
2.8rem
}
.zdsy-container
span
.num1
{
margin-left
:
1.65rem
}
.zdsy-container
span
.num2
{
margin-left
:
1.95rem
}
.zgdw-container
{
margin-top
:
.5rem
;
height
:
2.71rem
;
background
:
url("../images/content7.png")
no-repeat
center
top
;
background-size
:
100%
auto
;
padding-top
:
2.8rem
;
text-align
:
center
}
.zgdw-container
span
{
font-size
:
.58rem
;
color
:
#feee64
;
display
:
inline-block
;
width
:
2.8rem
}
.ggsk-container
{
position
:
relative
;
margin-top
:
.6rem
;
height
:
8.78rem
;
background
:
url("../images/content8.png")
no-repeat
center
top
;
background-size
:
100%
auto
;
text-align
:
center
;
overflow
:
hidden
}
.ggsk-container
span
{
padding-top
:
.2rem
;
font-size
:
.24rem
;
color
:
#5f1a11
;
font-weight
:
bold
;
display
:
inline-block
}
.ggsk-container
.img-container
{
position
:
relative
;
width
:
7.4rem
;
height
:
4.1rem
;
overflow
:
hidden
;
margin
:
2.05rem
auto
0
}
.ggsk-container
#file
{
position
:
absolute
;
left
:
0
;
top
:
0
;
width
:
7.6rem
;
height
:
4.2rem
;
background
:
none
;
cursor
:
pointer
;
opacity
:
0
;
filter
:
alpha
(
opacity
=
0
)}
.ggsk-container
img
{
position
:
absolute
;
left
:
50%
;
top
:
50%
;
-webkit-transform
:
translate
(
-50%
,
-50%
);
transform
:
translate
(
-50%
,
-50%
);
max-width
:
7.5rem
}
.bottom-container
{
text-align
:
center
}
.bottom-container
a
{
display
:
inline-block
;
width
:
4.13rem
;
height
:
1.42rem
;
margin
:
0
.45rem
}
.bottom-container
.btn-share
{
background
:
url("../images/btn_share.png")
no-repeat
center
top
;
background-size
:
100%
auto
}
.bottom-container
.btn-save
{
background
:
url("../images/btn_save.png")
no-repeat
center
top
;
background-size
:
100%
auto
}
.dialog
{
position
:
fixed
;
left
:
0
;
top
:
0
;
width
:
100%
;
height
:
100%
;
background
:
rgba
(
0
,
0
,
0
,
0.75
);
z-index
:
1
}
.dialog
.content
{
position
:
absolute
;
left
:
50%
;
top
:
50%
;
width
:
100%
;
height
:
6.16rem
;
-webkit-transform
:
translate
(
-50%
,
-50%
);
transform
:
translate
(
-50%
,
-50%
);
background
:
url("../images/dialog_bg.png?v=20210609")
no-repeat
center
;
background-size
:
100%
auto
;
padding-bottom
:
1rem
}
.dialog
.content
.close
{
position
:
absolute
;
width
:
1rem
;
height
:
1rem
;
right
:
1.2rem
;
top
:
.5rem
}
.dialog
.content
ul
{
width
:
7rem
;
margin
:
0
auto
;
text-align
:
right
;
padding-top
:
2.8rem
}
.dialog
.content
ul
li
{
padding
:
0
.4rem
.19rem
0
}
.dialog
.content
ul
li
select
{
height
:
.8rem
;
font-size
:
.42rem
;
color
:
#613937
;
width
:
3.9rem
;
max-width
:
3.9rem
;
text-align
:
left
;
font-weight
:
bold
;
appearance
:
none
;
-moz-appearance
:
none
;
-webkit-appearance
:
none
;
background
:
url("../images/arrow.png")
no-repeat
scroll
right
center
transparent
;
background-size
:
.22rem
;
padding-right
:
.2rem
}
.dialog
.content
ul
li
select
option
{
font-size
:
.42rem
;
color
:
#613937
}
.dialog
.content
.btn-card-bind-role
{
display
:
block
;
margin
:
.4rem
auto
0
;
width
:
3rem
;
height
:
1rem
;
line-height
:
1rem
;
font-size
:
.32rem
;
color
:
#5f1a11
}
.dialog-img
,
.share-img
{
position
:
fixed
;
left
:
0
;
top
:
0
;
width
:
100%
;
height
:
100%
;
overflow
:
scroll
;
background
:
rgba
(
0
,
0
,
0
,
0.7
)}
.dialog-img
.dialog-img-content
,
.share-img
.dialog-img-content
{
position
:
absolute
;
width
:
90%
;
left
:
50%
;
top
:
50%
;
-webkit-transform
:
translate
(
-50%
,
-50%
);
transform
:
translate
(
-50%
,
-50%
);
padding-top
:
2.5rem
;
height
:
13.5rem
;
background
:
url("../images/save_img_bg.png")
no-repeat
center
;
background-size
:
100%
auto
}
.dialog-img
.dialog-img-content
.img-scroll
,
.share-img
.dialog-img-content
.img-scroll
{
height
:
12rem
;
overflow
:
scroll
;
width
:
85%
;
margin
:
0
auto
}
.dialog-img
.dialog-img-content
img
,
.share-img
.dialog-img-content
img
{
width
:
100%
}
.share-img
img
{
width
:
100%
;
display
:
block
;
margin
:
0
auto
}
.fixed
{
position
:
fixed
;
left
:
0
;
top
:
0
;
width
:
100%
;
height
:
100%
}
.loading
{
position
:
fixed
;
left
:
50%
;
top
:
50%
;
width
:
3rem
;
height
:
2rem
;
margin
:
-1rem
0
0
-1.5rem
;
text-align
:
center
}
.loading
span
{
display
:
inline-block
;
width
:
.3rem
;
height
:
40px
;
border-radius
:
4px
;
background
:
#90ee90
;
-webkit-animation
:
load
1s
ease
infinite
}
@-webkit-keyframes
load
{
0
%,
100
%
{
height
:
40px
;
background
:
#90ee90
}
50
%
{
height
:
70px
;
margin
:
-15px
0
;
background
:
#add8e6
}}
.loading
span
:nth-child
(
2
)
{
-webkit-animation-delay
:
.2s
}
.loading
span
:nth-child
(
3
)
{
-webkit-animation-delay
:
.4s
}
.loading
span
:nth-child
(
4
)
{
-webkit-animation-delay
:
.6s
}
.loading
span
:nth-child
(
5
)
{
-webkit-animation-delay
:
.8s
}
.login-info
{
padding
:
.2rem
;
font-size
:
.4rem
;
color
:
#fff
}
.login-info
a
{
color
:
#fff
}
.postcard-container
.login-info
{
position
:
absolute
;
left
:
0
;
top
:
0
}
.toast-item-wrapper
{
min-width
:
auto
;
left
:
50%
;
transform
:
translate
(
-50%
,
-50%
);
-webkit-transform
:
translate
(
-50%
,
-50%
);
-moz-transform
:
translate
(
-50%
,
-50%
);
-ms-transform
:
translate
(
-50%
,
-50%
);
-o-transform
:
translate
(
-50%
,
-50%
);
padding
:
.2rem
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
font-size
:
.4rem
;
color
:
#343434
;
overflow
:
hidden
;
-webkit-user-select
:
none
;
-moz-user-select
:
none
;
-ms-user-select
:
none
;
user-select
:
none
;
-webkit-box-shadow
:
0
4px
12px
rgba
(
0
,
0
,
0
,
0.15
);
box-shadow
:
0
4px
12px
rgba
(
0
,
0
,
0
,
0.15
);
background
:
#fff
}
.toast-item-wrapper.toast-top-left
{
left
:
20px
;
top
:
20px
}
.toast-item-wrapper.toast-top-right
{
right
:
20px
;
top
:
20px
}
.toast-item-wrapper.toast-top-center
{
margin
:
0
auto
;
top
:
40%
}
.toast-item-wrapper.toast-bottom-left
{
left
:
20px
;
bottom
:
20px
}
.toast-item-wrapper.toast-bottom-right
{
right
:
20px
;
bottom
:
20px
}
.toast-item-wrapper.toast-bottom-center
{
margin
:
0
auto
;
bottom
:
20%
}
.toast-item-wrapper
p
{
margin
:
0
}
.toast-item-wrapper
.toast-message
{
font-size
:
.4rem
;
color
:
#343434
}
.toast-item-wrapper
.toast-message
svg
{
display
:
inline-block
;
vertical-align
:
middle
;
margin-right
:
.1rem
}
.toast-item-wrapper
.success
.toast-message
svg
{
color
:
#0e9a00
}
.toast-item-wrapper
.error
.toast-message
svg
{
color
:
#f00
}
.message-container
{
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
margin
:
0
;
padding
:
0
;
color
:
rgba
(
0
,
0
,
0
,
0.65
);
font-size
:
.4rem
;
font-variant
:
tabular-nums
;
line-height
:
1.5
;
list-style
:
none
;
-webkit-font-feature-settings
:
"tnum"
;
font-feature-settings
:
"tnum"
;
position
:
fixed
;
top
:
40%
;
left
:
0
;
z-index
:
1010
;
width
:
100%
;
pointer-events
:
none
;
text-align
:
center
;
transition
:
all
.2s
linear
0s
;
-webkit-transition
:
all
.2s
linear
0s
;
-moz-transition
:
all
.2s
linear
0s
;
-o-transition
:
all
.2s
linear
0s
}
.message-container
.message-content
{
display
:
inline-block
;
padding
:
.25rem
.35rem
;
background
:
#fff
;
border-radius
:
4px
;
-webkit-box-shadow
:
0
4px
12px
rgba
(
0
,
0
,
0
,
0.15
);
box-shadow
:
0
4px
12px
rgba
(
0
,
0
,
0
,
0.15
);
pointer-events
:
all
}
.message-container
.message-content
i
{
vertical-align
:
middle
;
margin-right
:
.1rem
}
.message-container
.message-content.success
i
{
color
:
#52c41a
}
.code
{
text-align
:
center
;
padding
:
1rem
0
.2rem
}
.code
img
{
width
:
3rem
}
.code
p
{
padding
:
.2rem
;
font-size
:
.32rem
;
color
:
#f3e1be
}
@-webkit-keyframes
Rotate
{
0
%
{
-webkit-transform
:
rotate
(
0
);
transform
:
rotate
(
0
)}
100
%
{
-webkit-transform
:
rotate
(
360deg
);
transform
:
rotate
(
360deg
)}}
@keyframes
Rotate
{
0
%
{
-webkit-transform
:
rotate
(
0
);
transform
:
rotate
(
0
)}
100
%
{
-webkit-transform
:
rotate
(
360deg
);
transform
:
rotate
(
360deg
)}}
@media
screen
and
(
min-width
:
540px
){
.dialog
{
max-width
:
540px
;
left
:
auto
}
.postcard-container
.login-info
{
left
:
auto
}}
\ No newline at end of file
@charset
"utf-8"
;
*
{
margin
:
0
;
padding
:
0
}
*
:focus
{
outline
:
0
}
ul
,
li
,
ol
{
list-style
:
none
}
a
{
color
:
#5f1a11
;
text-decoration
:
none
}
i
,
em
{
font-style
:
normal
}
a
,
button
,
input
,
select
,
img
,
label
,
li
,
div
{
-webkit-tap-highlight-color
:
rgba
(
0
,
0
,
0
,
0
);
-webkit-tap-highlight-color
:
transparent
;
outline
:
medium
none
}
html
,
body
,
select
,
input
,
textarea
{
font-family
:
"SC-Bold,PingFang SC Bold, Microsoft YaHei"
,
"Arial"
,
"黑体"
,
"宋体"
,
sans-serif
}
html
,
body
{
position
:
relative
}
input
,
button
,
select
,
textarea
{
outline
:
none
;
border
:
0
}
::-webkit-input-placeholder
{
color
:
#ababab
;
vertical-align
:
middle
;
line-height
:
normal
}
::-moz-placeholder
{
color
:
#ababab
;
vertical-align
:
middle
;
line-height
:
normal
}
:-ms-input-placeholder
{
color
:
#ababab
;
vertical-align
:
middle
;
line-height
:
normal
}
.clearfix
{
display
:
block
;
zoom
:
1
}
.clearfix
:after
{
content
:
" "
;
display
:
block
;
font-size
:
0
;
height
:
0
;
clear
:
both
;
visibility
:
hidden
}
.hide
{
display
:
none
}
.show
{
display
:
block
}
.m-img
{
width
:
100%
;
display
:
block
}
.dil
{
display
:
inline-block
}
.tc
{
text-align
:
center
}
.btn
{
height
:
1.38rem
;
background
:
#09f
;
font-size
:
.52rem
;
color
:
#fff
;
border-radius
:
.66rem
;
cursor
:
pointer
;
-webkit-box-shadow
:
0
6px
10px
rgba
(
0
,
153
,
255
,
0.34
);
box-shadow
:
0
6px
10px
rgba
(
0
,
153
,
255
,
0.34
)}
.btn.btn-small
{
height
:
1.06rem
;
font-size
:
.48rem
}
.container
{
max-width
:
540px
;
margin
:
0
auto
;
font-size
:
0
}
.home-container
{
width
:
100%
;
min-height
:
100vh
;
background
:
url("../images/body_bg1.jpg")
no-repeat
center
top
;
background-size
:
100%
auto
;
overflow
:
hidden
}
.home-container
.header-avatar
{
position
:
relative
;
width
:
3.52rem
;
height
:
3.52rem
;
margin
:
7.77rem
auto
0
;
border-radius
:
100%
;
overflow
:
hidden
}
.home-container
.header-avatar
span
{
position
:
absolute
;
left
:
0
;
top
:
0
;
width
:
100%
;
height
:
100%
;
background
:
url("../images/avatar_border.png")
no-repeat
center
;
background-size
:
100%
auto
;
-webkit-animation
:
Rotate
2s
linear
infinite
;
animation
:
Rotate
2s
linear
infinite
}
.home-container
.header-avatar
img
{
border-radius
:
100%
;
width
:
3.1rem
;
height
:
3.1rem
;
display
:
block
;
margin
:
.21rem
auto
}
.home-container
.btn-start
{
display
:
block
;
width
:
6.65rem
;
height
:
2.06rem
;
margin
:
1.9rem
auto
0
;
background
:
url("../images/btn_start.png")
no-repeat
center
;
background-size
:
100%
auto
}
.postcard-container
{
padding-bottom
:
1rem
;
background
:
url("../images/body_bg3.jpg")
no-repeat
center
top
,
url("../images/bg.jpg")
repeat-y
center
;
background-size
:
100%
auto
}
.postcard-container
{
padding-top
:
4.75rem
}
.role-container
{
overflow
:
hidden
;
margin
:
0
auto
;
position
:
relative
;
min-height
:
5.5rem
;
padding
:
1.5rem
.9rem
0
}
.role-container
.icon-red
{
position
:
absolute
;
right
:
.6rem
;
bottom
:
.7rem
;
z-index
:
1
;
width
:
1.25rem
;
height
:
1.25rem
;
background
:
url("../images/icon_red.png")
no-repeat
center
;
background-size
:
100%
auto
}
.role-container
.role-avatar
{
margin
:
0
auto
;
text-align
:
center
;
position
:
absolute
;
left
:
0
;
top
:
-0.5rem
}
.role-container
.role-avatar
.img-border
{
position
:
absolute
;
left
:
0
;
top
:
0
;
width
:
100%
;
height
:
100%
}
.role-container
.role-avatar
.img-header
{
width
:
4.57rem
;
display
:
inline-block
}
.role-container
li
{
font-weight
:
bold
;
text-align
:
center
;
font-size
:
0
;
padding-top
:
.15rem
}
.role-container
li
img
{
height
:
.32rem
}
.role-container
li
span
{
margin-left
:
.2rem
;
display
:
inline-block
;
width
:
2.6rem
;
min-height
:
.3rem
;
padding
:
.08rem
0
;
background
:
url("../images/wn_bg.png")
no-repeat
center
;
background-size
:
100%
100%
;
-webkit-text-overflow
:
ellipsis
;
-moz-text-overflow
:
ellipsis
;
-ms-text-overflow
:
ellipsis
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
overflow
:
hidden
;
font-size
:
.24rem
;
color
:
#5f1a11
}
.role-container
.left
{
float
:
left
;
width
:
50%
;
position
:
relative
}
.role-container
.left
ul
{
padding-top
:
3rem
}
.role-container
.right
{
float
:
right
;
width
:
50%
}
.role-container
.right
ul
{
padding-top
:
.2rem
}
.role-container
.bottom
{
position
:
absolute
;
right
:
1rem
;
bottom
:
.65rem
}
.role-container
.bottom
img
{
display
:
inline-block
;
vertical-align
:
text-bottom
}
.role-container
.bottom
.img1
{
width
:
2.89rem
}
.role-container
.bottom
.b-num
{
display
:
inline-block
;
vertical-align
:
text-bottom
}
.role-container
.bottom
.b-num
span
{
vertical-align
:
middle
;
display
:
inline-block
;
height
:
.4rem
;
line-height
:
.4rem
;
text-align
:
center
;
font
:
bold
.4rem
"Arial"
;
color
:
#5f1a11
;
margin
:
0
}
.role-container
.bottom
span
{
font-size
:
1rem
;
color
:
#5f1a11
;
font-weight
:
bold
;
margin
:
0
.1rem
}
.role-container
.bottom
.img2
{
width
:
.46rem
}
.range-container
{
height
:
4.45rem
;
padding-top
:
1.35rem
;
background
:
url("../images/content2.png")
no-repeat
center
top
;
background-size
:
100%
auto
;
margin
:
.4rem
auto
0
}
.range-container
.range-num
{
width
:
7.9rem
;
margin
:
1.2rem
auto
0
;
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
-ms-flex-line-pack
:
center
;
align-content
:
center
;
-ms-flex-pack
:
distribute
;
justify-content
:
space-around
}
.range-container
span
{
display
:
inline-block
;
width
:
1.33rem
;
height
:
1.37rem
;
line-height
:
1.5rem
;
text-align
:
center
;
font-size
:
1.06rem
;
font-weight
:
bold
;
color
:
#5f1a11
;
background
:
url("../images/num_border.png")
no-repeat
center
;
background-size
:
100%
auto
}
.arms-container
{
position
:
relative
;
height
:
5.22rem
;
background
:
url("../images/content3.png")
no-repeat
center
top
;
background-size
:
100%
auto
}
.arms-container
.arms
{
position
:
relative
;
width
:
9rem
;
height
:
5.22rem
;
overflow
:
hidden
;
padding-top
:
1.9rem
;
padding-left
:
1.2rem
;
font-size
:
0
}
.arms-container
.arms
.left
{
float
:
left
}
.arms-container
.arms
.left
li
{
position
:
relative
;
height
:
.62rem
;
line-height
:
.62rem
;
margin-bottom
:
.3rem
}
.arms-container
.arms
.left
span
{
position
:
absolute
;
left
:
.2rem
;
top
:
0
;
font-size
:
.24rem
;
color
:
#74624e
}
.arms-container
.arms
.left
em
{
margin-left
:
1rem
;
display
:
inline-block
;
width
:
3.81rem
;
text-align
:
center
;
font-size
:
.26rem
;
color
:
#5f1a11
;
height
:
.62rem
;
line-height
:
.62rem
;
font-weight
:
bold
;
background
:
url("../images/wn_bg.png")
no-repeat
center
;
background-size
:
100%
auto
}
.arms-container
.arms
.right
{
float
:
left
;
margin-top
:
-0.35rem
}
.arms-container
.arms
.right
li
{
text-align
:
center
}
.arms-container
.arms
.right
li
em
{
display
:
block
;
font-size
:
.24rem
;
color
:
#74624e
;
-webkit-transform
:
scale
(
.7
);
transform
:
scale
(
.7
);
margin-bottom
:
.02rem
}
.arms-container
.arms
.right
li
div
{
width
:
3.4rem
;
text-align
:
center
;
font-weight
:
bold
}
.arms-container
.arms
.right
li
div
span
{
display
:
inline-block
;
width
:
.6rem
;
height
:
.6rem
;
line-height
:
.6rem
;
margin
:
0
.04rem
;
font-size
:
.45rem
;
color
:
#5f1a11
;
background
:
url("../images/num_border.png")
no-repeat
center
;
background-size
:
100%
auto
}
.mr-container
{
position
:
relative
;
margin-top
:
.9rem
;
background
:
url("../images/content4.png")
no-repeat
center
top
;
background-size
:
100%
auto
}
.mr-container
.mr
{
position
:
relative
;
height
:
5.27rem
;
width
:
8.6rem
;
margin
:
0
auto
;
overflow
:
hidden
}
.mr-container
.mr
span
{
margin
:
3.6rem
0
0
3.5rem
;
display
:
block
;
width
:
1.79rem
;
height
:
.83rem
}
.mr-container
.mr
span
.img-SSS
{
background
:
url("../images/img_sss.png")
no-repeat
center
;
background-size
:
100%
auto
}
.mr-container
.mr
span
.img-SS
{
background
:
url("../images/img_ss.png")
no-repeat
center
;
background-size
:
100%
auto
}
.mr-container
.mr
span
.img-S
{
background
:
url("../images/img_s.png")
no-repeat
center
;
background-size
:
100%
auto
}
.mr-container
.mr
span
.img-A
{
background
:
url("../images/img_a.png")
no-repeat
center
;
background-size
:
100%
auto
}
.mr-container
.mr
span
.img-B
{
background
:
url("../images/img_b.png")
no-repeat
center
;
background-size
:
100%
auto
}
.mr-container
.mr
span
.img-C
{
background
:
url("../images/img_c.png")
no-repeat
center
;
background-size
:
100%
auto
}
.yzzt-container
{
margin-top
:
.75rem
;
height
:
2.71rem
;
background
:
url("../images/content5.png")
no-repeat
center
top
;
background-size
:
100%
auto
;
padding-top
:
3.3rem
}
.yzzt-container
span
{
font-size
:
.7rem
;
color
:
#fdfdff
;
display
:
inline-block
;
text-align
:
center
;
width
:
1.7rem
}
.yzzt-container
span
.num1
{
margin-left
:
2.36rem
}
.yzzt-container
span
.num2
{
margin-left
:
2.83rem
}
.zdsy-container
{
margin-top
:
.8rem
;
height
:
2.71rem
;
background
:
url("../images/content6.png")
no-repeat
center
top
;
background-size
:
100%
auto
;
padding-top
:
3.3rem
}
.zdsy-container
span
{
font-size
:
.7rem
;
color
:
#feee64
;
display
:
inline-block
;
text-align
:
center
;
width
:
2.8rem
}
.zdsy-container
span
.num1
{
margin-left
:
1.65rem
}
.zdsy-container
span
.num2
{
margin-left
:
1.95rem
}
.zgdw-container
{
margin-top
:
.5rem
;
height
:
2.71rem
;
background
:
url("../images/content7.png")
no-repeat
center
top
;
background-size
:
100%
auto
;
padding-top
:
2.8rem
;
text-align
:
center
}
.zgdw-container
span
{
font-size
:
.58rem
;
color
:
#feee64
;
display
:
inline-block
;
width
:
2.8rem
}
.ggsk-container
{
position
:
relative
;
margin-top
:
.6rem
;
height
:
8.78rem
;
background
:
url("../images/content8.png")
no-repeat
center
top
;
background-size
:
100%
auto
;
text-align
:
center
;
overflow
:
hidden
}
.ggsk-container
span
{
padding-top
:
.2rem
;
font-size
:
.24rem
;
color
:
#5f1a11
;
font-weight
:
bold
;
display
:
inline-block
}
.ggsk-container
.img-container
{
position
:
relative
;
width
:
7.4rem
;
height
:
4.1rem
;
overflow
:
hidden
;
margin
:
2.05rem
auto
0
}
.ggsk-container
#file
{
position
:
absolute
;
left
:
0
;
top
:
0
;
width
:
7.6rem
;
height
:
4.2rem
;
background
:
none
;
cursor
:
pointer
;
opacity
:
0
;
filter
:
alpha
(
opacity
=
0
)}
.ggsk-container
img
{
position
:
absolute
;
left
:
50%
;
top
:
50%
;
-webkit-transform
:
translate
(
-50%
,
-50%
);
transform
:
translate
(
-50%
,
-50%
);
max-width
:
7.5rem
}
.bottom-container
{
text-align
:
center
}
.bottom-container
a
{
display
:
inline-block
;
width
:
4.13rem
;
height
:
1.42rem
;
margin
:
0
.45rem
}
.bottom-container
.btn-share
{
background
:
url("../images/btn_share.png")
no-repeat
center
top
;
background-size
:
100%
auto
}
.bottom-container
.btn-save
{
background
:
url("../images/btn_save.png")
no-repeat
center
top
;
background-size
:
100%
auto
}
.dialog
{
position
:
fixed
;
left
:
0
;
top
:
0
;
width
:
100%
;
height
:
100%
;
background
:
rgba
(
0
,
0
,
0
,
0.75
);
z-index
:
1
}
.dialog
.content
{
position
:
absolute
;
left
:
50%
;
top
:
50%
;
width
:
100%
;
height
:
6.16rem
;
-webkit-transform
:
translate
(
-50%
,
-50%
);
transform
:
translate
(
-50%
,
-50%
);
background
:
url("../images/dialog_bg.png?v=20210609")
no-repeat
center
;
background-size
:
100%
auto
;
padding-bottom
:
1rem
}
.dialog
.content
.close
{
position
:
absolute
;
width
:
1rem
;
height
:
1rem
;
right
:
1.2rem
;
top
:
.5rem
}
.dialog
.content
ul
{
width
:
7rem
;
margin
:
0
auto
;
text-align
:
right
;
padding-top
:
2.8rem
}
.dialog
.content
ul
li
{
padding
:
0
.4rem
.19rem
0
}
.dialog
.content
ul
li
select
{
height
:
.8rem
;
font-size
:
.42rem
;
color
:
#613937
;
width
:
3.9rem
;
max-width
:
3.9rem
;
text-align
:
left
;
font-weight
:
bold
;
appearance
:
none
;
-moz-appearance
:
none
;
-webkit-appearance
:
none
;
background
:
url("../images/arrow.png")
no-repeat
scroll
right
center
transparent
;
background-size
:
.22rem
;
padding-right
:
.2rem
}
.dialog
.content
ul
li
select
option
{
font-size
:
.42rem
;
color
:
#613937
}
.dialog
.content
.btn-card-bind-role
{
display
:
block
;
margin
:
.4rem
auto
0
;
width
:
3rem
;
height
:
1rem
;
line-height
:
1rem
;
font-size
:
.32rem
;
color
:
#5f1a11
}
.dialog-img
,
.share-img
{
position
:
fixed
;
left
:
0
;
top
:
0
;
width
:
100%
;
height
:
100%
;
overflow
:
scroll
;
background
:
rgba
(
0
,
0
,
0
,
0.7
)}
.dialog-img
.dialog-img-content
,
.share-img
.dialog-img-content
{
position
:
absolute
;
width
:
90%
;
left
:
50%
;
top
:
50%
;
-webkit-transform
:
translate
(
-50%
,
-50%
);
transform
:
translate
(
-50%
,
-50%
);
padding-top
:
2.5rem
;
height
:
13.5rem
;
background
:
url("../images/save_img_bg.png")
no-repeat
center
;
background-size
:
100%
auto
}
.dialog-img
.dialog-img-content
.img-scroll
,
.share-img
.dialog-img-content
.img-scroll
{
height
:
12rem
;
overflow
:
scroll
;
width
:
85%
;
margin
:
0
auto
}
.dialog-img
.dialog-img-content
img
,
.share-img
.dialog-img-content
img
{
width
:
100%
}
.share-img
img
{
width
:
100%
;
display
:
block
;
margin
:
0
auto
}
.fixed
{
position
:
fixed
;
left
:
0
;
top
:
0
;
width
:
100%
;
height
:
100%
}
.loading
{
position
:
fixed
;
left
:
50%
;
top
:
50%
;
width
:
3rem
;
height
:
2rem
;
margin
:
-1rem
0
0
-1.5rem
;
text-align
:
center
}
.loading
span
{
display
:
inline-block
;
width
:
.3rem
;
height
:
40px
;
border-radius
:
4px
;
background
:
#90ee90
;
-webkit-animation
:
load
1s
ease
infinite
}
@-webkit-keyframes
load
{
0
%,
100
%
{
height
:
40px
;
background
:
#90ee90
}
50
%
{
height
:
70px
;
margin
:
-15px
0
;
background
:
#add8e6
}}
.loading
span
:nth-child
(
2
)
{
-webkit-animation-delay
:
.2s
}
.loading
span
:nth-child
(
3
)
{
-webkit-animation-delay
:
.4s
}
.loading
span
:nth-child
(
4
)
{
-webkit-animation-delay
:
.6s
}
.loading
span
:nth-child
(
5
)
{
-webkit-animation-delay
:
.8s
}
.login-info
{
padding
:
.2rem
;
font-size
:
.4rem
;
color
:
#fff
}
.login-info
a
{
color
:
#fff
}
.postcard-container
.login-info
{
position
:
absolute
;
left
:
0
;
top
:
0
}
.toast-item-wrapper
{
min-width
:
auto
;
left
:
50%
;
transform
:
translate
(
-50%
,
-50%
);
-webkit-transform
:
translate
(
-50%
,
-50%
);
-moz-transform
:
translate
(
-50%
,
-50%
);
-ms-transform
:
translate
(
-50%
,
-50%
);
-o-transform
:
translate
(
-50%
,
-50%
);
padding
:
.2rem
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
font-size
:
.4rem
;
color
:
#343434
;
overflow
:
hidden
;
-webkit-user-select
:
none
;
-moz-user-select
:
none
;
-ms-user-select
:
none
;
user-select
:
none
;
-webkit-box-shadow
:
0
4px
12px
rgba
(
0
,
0
,
0
,
0.15
);
box-shadow
:
0
4px
12px
rgba
(
0
,
0
,
0
,
0.15
);
background
:
#fff
}
.toast-item-wrapper.toast-top-left
{
left
:
20px
;
top
:
20px
}
.toast-item-wrapper.toast-top-right
{
right
:
20px
;
top
:
20px
}
.toast-item-wrapper.toast-top-center
{
margin
:
0
auto
;
top
:
40%
}
.toast-item-wrapper.toast-bottom-left
{
left
:
20px
;
bottom
:
20px
}
.toast-item-wrapper.toast-bottom-right
{
right
:
20px
;
bottom
:
20px
}
.toast-item-wrapper.toast-bottom-center
{
margin
:
0
auto
;
bottom
:
20%
}
.toast-item-wrapper
p
{
margin
:
0
}
.toast-item-wrapper
.toast-message
{
font-size
:
.4rem
;
color
:
#343434
}
.toast-item-wrapper
.toast-message
svg
{
display
:
inline-block
;
vertical-align
:
middle
;
margin-right
:
.1rem
}
.toast-item-wrapper
.success
.toast-message
svg
{
color
:
#0e9a00
}
.toast-item-wrapper
.error
.toast-message
svg
{
color
:
#f00
}
.message-container
{
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
margin
:
0
;
padding
:
0
;
color
:
rgba
(
0
,
0
,
0
,
0.65
);
font-size
:
.4rem
;
font-variant
:
tabular-nums
;
line-height
:
1.5
;
list-style
:
none
;
-webkit-font-feature-settings
:
"tnum"
;
font-feature-settings
:
"tnum"
;
position
:
fixed
;
top
:
40%
;
left
:
0
;
z-index
:
1010
;
width
:
100%
;
pointer-events
:
none
;
text-align
:
center
;
transition
:
all
.2s
linear
0s
;
-webkit-transition
:
all
.2s
linear
0s
;
-moz-transition
:
all
.2s
linear
0s
;
-o-transition
:
all
.2s
linear
0s
}
.message-container
.message-content
{
display
:
inline-block
;
padding
:
.25rem
.35rem
;
background
:
#fff
;
border-radius
:
4px
;
-webkit-box-shadow
:
0
4px
12px
rgba
(
0
,
0
,
0
,
0.15
);
box-shadow
:
0
4px
12px
rgba
(
0
,
0
,
0
,
0.15
);
pointer-events
:
all
}
.message-container
.message-content
i
{
vertical-align
:
middle
;
margin-right
:
.1rem
}
.message-container
.message-content.success
i
{
color
:
#52c41a
}
.code
{
text-align
:
center
;
padding
:
1rem
0
.2rem
}
.code
img
{
width
:
3rem
}
.code
p
{
padding
:
.2rem
;
font-size
:
.32rem
;
color
:
#f3e1be
}
@-webkit-keyframes
Rotate
{
0
%
{
-webkit-transform
:
rotate
(
0
);
transform
:
rotate
(
0
)}
100
%
{
-webkit-transform
:
rotate
(
360deg
);
transform
:
rotate
(
360deg
)}}
@keyframes
Rotate
{
0
%
{
-webkit-transform
:
rotate
(
0
);
transform
:
rotate
(
0
)}
100
%
{
-webkit-transform
:
rotate
(
360deg
);
transform
:
rotate
(
360deg
)}}
@media
screen
and
(
min-width
:
540px
){
.dialog
{
max-width
:
540px
;
left
:
auto
}
.postcard-container
.login-info
{
left
:
auto
}}
\ No newline at end of file
src/public/static/postcard/css/style.less
View file @
9f0d83fa
...
...
@@ -114,9 +114,11 @@
margin-left: .2rem;
display: inline-block;
width: 2.6rem;
.lh(.5rem);
// .lh(.5rem);
min-height: .3rem;
padding: .08rem 0;
background: url("../images/wn_bg.png") no-repeat center;
background-size: 100%
auto
;
background-size: 100%
100%
;
.ells();
.fs(.24rem, @baseColor);
}
...
...
src/resources/views/card/card.blade.php
View file @
9f0d83fa
...
...
@@ -20,7 +20,7 @@
reSizeRem
();
}
</script>
<link
rel=
"stylesheet"
href=
"{{ asset('postcard/css/style.css?v=20211125') }}"
>
<link
rel=
"stylesheet"
href=
"{{ asset('postcard/css/style.css?v=20211125
01
') }}"
>
<script
src=
"{{ asset('js/jquery.2.1.3.min.js') }}"
></script>
<script
src=
"{{ asset('postcard/js/html2canvas.js') }}"
></script>
<script
src=
"{{ asset('js/toast.js') }}"
></script>
...
...
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