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
3d5d04bf
Commit
3d5d04bf
authored
Jun 08, 2021
by
liyadong
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
update 上传图片
parent
d181afab
Changes
3
Show whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
30 additions
and
15 deletions
+30
-15
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
+15
-7
src/resources/views/card/card.blade.php
src/resources/views/card/card.blade.php
+14
-7
No files found.
src/public/static/postcard/css/style.css
View file @
3d5d04bf
@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_bg2.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
:
.4rem
;
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
{
width
:
1.88rem
;
height
:
1.92rem
;
margin
:
0
auto
;
text-align
:
center
;
position
:
relative
}
.role-container
.role-avatar
.img-border
{
position
:
absolute
;
left
:
0
;
top
:
0
;
width
:
100%
;
height
:
100%
}
.role-container
.role-avatar
.img-header
{
width
:
1.3rem
;
height
:
1.3rem
;
margin-top
:
.28rem
;
display
:
inline-block
}
.role-container
li
{
height
:
.62rem
;
line-height
:
.62rem
;
font-size
:
.24rem
;
color
:
#5f1a11
;
font-weight
:
bold
;
text-align
:
center
;
margin-top
:
.5rem
}
.role-container
li
span
{
margin-left
:
.2rem
;
display
:
inline-block
;
width
:
3.23rem
;
-webkit-text-overflow
:
ellipsis
;
-moz-text-overflow
:
ellipsis
;
-ms-text-overflow
:
ellipsis
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
overflow
:
hidden
}
.role-container
.left
{
float
:
left
;
width
:
50%
}
.role-container
.left
li
{
font-size
:
.26rem
;
color
:
#5f1a11
}
.role-container
.right
{
float
:
right
;
width
:
50%
;
padding-top
:
.55rem
}
.role-container
.right
li
{
margin-top
:
0
;
margin-bottom
:
.65rem
}
.role-container
.right
li
span
{
margin-left
:
.5rem
;
width
:
3rem
}
.role-container
.right
li
.role4
{
margin-bottom
:
.7rem
}
.role-container
.bottom
{
position
:
absolute
;
left
:
1.5rem
;
bottom
:
.45rem
}
.role-container
.bottom
img
{
display
:
inline-block
;
vertical-align
:
text-bottom
}
.role-container
.bottom
.img1
{
width
:
4.89rem
}
.role-container
.bottom
.b-num
{
display
:
inline-block
;
vertical-align
:
text-bottom
;
height
:
1rem
}
.role-container
.bottom
.b-num
span
{
vertical-align
:
middle
;
display
:
inline-block
;
height
:
.9rem
;
line-height
:
.9rem
;
width
:
.45rem
;
text-align
:
center
;
font
:
bold
1rem
"Arial"
;
color
:
#5f1a11
}
.role-container
.bottom
span
{
font-size
:
1rem
;
color
:
#5f1a11
;
font-weight
:
bold
;
margin
:
0
.1rem
}
.role-container
.bottom
.img2
{
width
:
.77rem
}
.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
{
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
}
.ggsk-container
span
{
font-size
:
.58rem
;
color
:
#feee64
;
display
:
inline-block
;
width
:
2.8rem
}
.ggsk-container
#file
{
position
:
absolute
;
left
:
1.5rem
;
top
:
2rem
;
width
:
7.6rem
;
height
:
4.2rem
;
background
:
none
;
cursor
:
pointer
;
opacity
:
0
;
filter
:
alpha
(
opacity
=
0
)}
.ggsk-container
img
{
width
:
7.4rem
;
height
:
4.1rem
;
margin
:
2rem
0
0
0
}
.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")
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
}
@-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_bg2.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
:
.4rem
;
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
{
width
:
1.88rem
;
height
:
1.92rem
;
margin
:
0
auto
;
text-align
:
center
;
position
:
relative
}
.role-container
.role-avatar
.img-border
{
position
:
absolute
;
left
:
0
;
top
:
0
;
width
:
100%
;
height
:
100%
}
.role-container
.role-avatar
.img-header
{
width
:
1.3rem
;
height
:
1.3rem
;
margin-top
:
.28rem
;
display
:
inline-block
}
.role-container
li
{
height
:
.62rem
;
line-height
:
.62rem
;
font-size
:
.24rem
;
color
:
#5f1a11
;
font-weight
:
bold
;
text-align
:
center
;
margin-top
:
.5rem
}
.role-container
li
span
{
margin-left
:
.2rem
;
display
:
inline-block
;
width
:
3.23rem
;
-webkit-text-overflow
:
ellipsis
;
-moz-text-overflow
:
ellipsis
;
-ms-text-overflow
:
ellipsis
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
overflow
:
hidden
}
.role-container
.left
{
float
:
left
;
width
:
50%
}
.role-container
.left
li
{
font-size
:
.26rem
;
color
:
#5f1a11
}
.role-container
.right
{
float
:
right
;
width
:
50%
;
padding-top
:
.55rem
}
.role-container
.right
li
{
margin-top
:
0
;
margin-bottom
:
.65rem
}
.role-container
.right
li
span
{
margin-left
:
.5rem
;
width
:
3rem
}
.role-container
.right
li
.role4
{
margin-bottom
:
.7rem
}
.role-container
.bottom
{
position
:
absolute
;
left
:
1.5rem
;
bottom
:
.45rem
}
.role-container
.bottom
img
{
display
:
inline-block
;
vertical-align
:
text-bottom
}
.role-container
.bottom
.img1
{
width
:
4.89rem
}
.role-container
.bottom
.b-num
{
display
:
inline-block
;
vertical-align
:
text-bottom
;
height
:
1rem
}
.role-container
.bottom
.b-num
span
{
vertical-align
:
middle
;
display
:
inline-block
;
height
:
.9rem
;
line-height
:
.9rem
;
width
:
.45rem
;
text-align
:
center
;
font
:
bold
1rem
"Arial"
;
color
:
#5f1a11
}
.role-container
.bottom
span
{
font-size
:
1rem
;
color
:
#5f1a11
;
font-weight
:
bold
;
margin
:
0
.1rem
}
.role-container
.bottom
.img2
{
width
:
.77rem
}
.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
{
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
:
.32rem
;
color
:
#feee64
;
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
:
1.5rem
;
top
:
2rem
;
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")
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
}
@-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 @
3d5d04bf
...
...
@@ -439,14 +439,20 @@
background: url("../images/content8.png") no-repeat center top;
background-size: 100% auto;
text-align: center;
text-align: center
;
overflow: hidden
;
span {
.fs(.58rem, #feee64);
padding-top: .2rem;
.fs(.32rem, #feee64);
display: inline-block;
width: 2.8rem;
}
.img-container{
.pr();
width: 7.4rem;
height: 4.1rem;
overflow: hidden;
margin: 2.05rem auto 0;
}
#file {
.pa();
left: 1.5rem;
...
...
@@ -460,9 +466,11 @@
}
img {
width: 7.4rem;
height: 4.1rem;
margin: 2rem 0 0 0;
.pa();
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
max-width: 7.5rem;
}
}
...
...
src/resources/views/card/card.blade.php
View file @
3d5d04bf
...
...
@@ -129,6 +129,7 @@
<!--高光时刻-->
<div
class=
"ggsk-container"
>
<div
class=
"img-container"
>
@if($userImgStatus == -1)
<img
src=
"{{ asset('postcard/images/img_add.jpg') }}"
class=
"img img-add"
alt=
""
>
<input
type=
"file"
id=
"file"
>
@endif
@if($userImgStatus == 0)
<img
src=
"{{ asset('postcard/images/img_sh.jpg') }}"
class=
"img img-sh"
alt=
""
>
@endif
...
...
@@ -136,6 +137,11 @@
@if($userImgStatus == 2)
<img
src=
"{{ asset('postcard/images/sh_fail.jpg') }}"
class=
"img img-sh"
alt=
""
>
<input
type=
"file"
id=
"file"
>
@endif
</div>
@if($userImgStatus != 1)
<span>
建议尺寸(710*414px)
</span>
@endif
</div>
<div
class=
"bottom-container"
>
<!--分享-->
<a
href=
"javascript:"
class=
"btn-share"
></a>
...
...
@@ -200,6 +206,7 @@
$
(
document
).
on
(
'
change
'
,
'
#file
'
,
function
(
e
)
{
var
formData
=
new
FormData
();
var
file
=
$
(
"
#file
"
)[
0
].
files
[
0
];
console
.
log
(
file
)
var
acceptFileTypes
=
/^image
\/(
gif|jpe
?
g|png
)
$/i
;
var
roleId
=
getQueryString
(
'
roleId
'
);
var
serverId
=
getQueryString
(
'
serverId
'
);
...
...
@@ -227,7 +234,7 @@
dataType
:
"
json
"
,
success
:
function
(
data
)
{
$
(
'
.img-add
'
).
hide
();
$
(
'
.
ggsk
-container
'
).
html
(
'
<img src="{{ asset(
'
postcard
/
images
/
img_sh
.
jpg
'
) }}" class="img img-sh" alt="">
'
);
$
(
'
.
img
-container
'
).
html
(
'
<img src="{{ asset(
'
postcard
/
images
/
img_sh
.
jpg
'
) }}" class="img img-sh" alt="">
'
);
},
error
:
function
(
data
)
{
...
...
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