Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
W
ww_sequence
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
template admin
ww_sequence
Commits
3bb75a7d
Commit
3bb75a7d
authored
Aug 13, 2020
by
liujiangnan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 背景图片
parent
dc6f3c7e
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
76 additions
and
46 deletions
+76
-46
play.component.html
src/app/play/play.component.html
+50
-46
play.component.scss
src/app/play/play.component.scss
+26
-0
player-bg.png
src/assets/player-bg.png
+0
-0
No files found.
src/app/play/play.component.html
View file @
3bb75a7d
<div
class=
"player-preview-sequence"
>
<div
class=
"content-wrap "
>
<!-- aspectRatioSizer-->
<!-- <svg viewBox="0 0 4 3" style="max-width: 100vmin;max-height: 100vmin;"/>-->
<!--[style.padding]="randPics.length > 2 && randPics.length <= 4 ? '12% 20% 0' : '15% 5% 0'"-->
<div
class=
"item-wrap"
#
boxContainer
>
<div
*
ngFor=
"let pic of randPics index as i"
class=
"gutter-row item"
[
attr
.
data-idx
]="
pic
.
idx
"
>
<div
class=
"item-box"
>
<img
src=
"assets/sequence2/seq_item_bg.png"
style=
"width: 100%;height: 100%"
alt=
""
>
<div
class=
"item-pic drop-target"
[
attr
.
data-idx
]="
pic
.
idx
"
[
id
]="'
tgt
'+
i
"
(
click
)="
checkSelectedIndex
($
event
,
pic
.
idx
)"
[
style
.
background-image
]="
pic
.
res_id
|
backgroundImage
"
>
<div
class=
"body-bg"
></div>
<div
class=
"player-border"
>
<div
class=
"player-preview-sequence"
>
<div
class=
"content-wrap "
>
<!-- aspectRatioSizer-->
<!-- <svg viewBox="0 0 4 3" style="max-width: 100vmin;max-height: 100vmin;"/>-->
<!--[style.padding]="randPics.length > 2 && randPics.length <= 4 ? '12% 20% 0' : '15% 5% 0'"-->
<div
class=
"item-wrap"
#
boxContainer
>
<div
*
ngFor=
"let pic of randPics index as i"
class=
"gutter-row item"
[
attr
.
data-idx
]="
pic
.
idx
"
>
<div
class=
"item-box"
>
<img
src=
"assets/sequence2/seq_item_bg.png"
style=
"width: 100%;height: 100%"
alt=
""
>
<div
class=
"item-pic drop-target"
[
attr
.
data-idx
]="
pic
.
idx
"
[
id
]="'
tgt
'+
i
"
(
click
)="
checkSelectedIndex
($
event
,
pic
.
idx
)"
[
style
.
background-image
]="
pic
.
res_id
|
backgroundImage
"
>
</div>
<div
class=
"item-label {{'p-font-size-'+randPics.length}}"
*
ngIf=
"pic.isRight"
>
{{pic.idx + 1}}
</div>
</div>
<div
class=
"item-label {{'p-font-size-'+randPics.length}}"
*
ngIf=
"pic.isRight"
>
{{pic.idx + 1}}
</div>
</div>
</div>
</div>
<div
class=
"seq-wrap"
>
<img
class=
"seq-wrap-bg"
src=
"assets/sequence2/rectangle.png"
style=
"width: 100%;height: 100%"
alt=
""
>
<div
class=
"seq-num-box"
#
indexNumBox
>
<img
*
ngFor=
"let i of _itemsArr"
src=
"assets/sequence2/{{i}}.png"
alt=
""
>
</div
>
<div
class=
"answer-wrap"
>
<img
class=
"btn-answer
"
(
click
)="
showRightAnswer
()"
src=
"assets/sequence2/answer.png"
alt=
""
>
<div
class=
"seq-wrap"
>
<img
class=
"seq-wrap-bg"
src=
"assets/sequence2/rectangle.png"
style=
"width: 100%;height: 100%"
alt=
""
>
<div
class=
"seq-num-box"
#
indexNumBox
>
<img
*
ngFor=
"let i of _itemsArr"
src=
"assets/sequence2/{{i}}.png"
alt=
""
>
</div
>
<div
class=
"answer-wrap"
>
<img
class=
"btn-answer"
(
click
)="
showRightAnswer
()
"
src=
"assets/sequence2/answer.png"
alt=
""
>
</div
>
</div>
</div>
<!--<div class="bubble-box" #bubbleContainer>-->
<!--<div *ngFor="let pic of randPics index as i"-->
<!--[id]="'bb'+i"-->
<!--[class]="'bubble b'+i+(randPics.length<5 ? ' less4item' : '')" >-->
<!--<div class="bdhandle">-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
</div>
<!--<div class="bubble-box" #bubbleContainer>-->
<!--<div *ngFor="let pic of randPics index as i"-->
<!--[id]="'bb'+i"-->
<!--[class]="'bubble b'+i+(randPics.length<5 ? ' less4item' : '')" >-->
<!--<div class="bdhandle">-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
</div>
</div>
src/app/play/play.component.scss
View file @
3bb75a7d
.body-bg
{
position
:
absolute
;
top
:
0px
;
left
:
0px
;
right
:
0px
;
bottom
:
0px
;
background-image
:
url('../../assets/player-bg.png')
!
important
;
background-size
:
100%
;
}
.player-border
{
position
:
absolute
;
left
:
calc
((
100%
-
100vh
*
1
.36
)
/
2
);
top
:
5vh
;
right
:
calc
((
100%
-
100vh
*
1
.36
)
/
2
);
bottom
:
5vh
;
text-align
:
center
;
// box-shadow: 0 2px 12px 0 rgba(0,0,0,.3);
border-radius
:
11px
;
border
:
20px
solid
#23b1c2
;
background-color
:
#fff
;
overflow
:
hidden
;
color
:
#303133
;
transition
:
.3s
;
}
.player-preview-sequence
{
width
:
100%
;
height
:
100%
;
...
...
src/assets/player-bg.png
0 → 100644
View file @
3bb75a7d
47.2 KB
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