Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
W
ww_question
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_question
Commits
345d06e9
Commit
345d06e9
authored
Aug 13, 2020
by
liujiangnan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 图片背景
parent
089832c9
Changes
4
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
58 additions
and
27 deletions
+58
-27
play.component.html
src/app/play/play.component.html
+30
-27
play.component.scss
src/app/play/play.component.scss
+27
-0
play.component.ts
src/app/play/play.component.ts
+1
-0
player-bg.png
src/assets/player-bg.png
+0
-0
No files found.
src/app/play/play.component.html
View file @
345d06e9
<div
class=
"question-player"
style=
"position: relative"
>
<div
class=
"body-bg"
></div>
<div
class=
"top-part"
>
<div
class=
"player-border"
>
<img
<div
class=
"question-player"
style=
"position: relative"
>
*
ngIf=
"data.contentObj.pic_id"
<div
class=
"top-part"
>
[
src
]="
data
.
contentObj
.
pic_id
"
<img
alt=
"cover"
*
ngIf=
"data.contentObj.pic_id"
(
dragstart
)="
false
;$
event
.
preventDefault
();"
[
src
]="
data
.
contentObj
.
pic_id
"
(
click
)="
onHandleZoomIn
($
event
)"
alt=
"cover"
[@
zoom
]="
zoomIn
?
'
in
'
:
'
none
'"
(
dragstart
)="
false
;$
event
.
preventDefault
();"
/>
(
click
)="
onHandleZoomIn
($
event
)"
<div
class=
"title"
>
{{data.contentObj.title}}
</div>
[@
zoom
]="
zoomIn
?
'
in
'
:
'
none
'"
</div>
/>
<div
class=
"opt-container"
>
<div
class=
"title"
>
{{data.contentObj.title}}
</div>
<div
</div>
class=
"opt-wrap"
<div
class=
"opt-container"
>
*
ngFor=
"let item of options; let i = index"
<div
[@
tip-border
]="
item
.
state
||
'
none
'"
class=
"opt-wrap"
(
click
)="
handleAnimation
(
item
)"
*
ngFor=
"let item of options; let i = index"
>
[@
tip-border
]="
item
.
state
||
'
none
'"
<span
class=
"opt-circle"
[@
tip-circle
]="
item
.
state
||
'
none
'"
>
{{transCharCode(i)}}
</span>
(
click
)="
handleAnimation
(
item
)"
<div
class=
"text"
*
ngIf=
"item.type === OPTION_TYPE.TEXT"
>
{{item.text}}
</div>
>
<div
class=
"audio"
style=
"text-align: center"
*
ngIf=
"item.type === OPTION_TYPE.AUDIO"
(
click
)="
playAudio
(
item
,
$
event
)"
>
<span
class=
"opt-circle"
[@
tip-circle
]="
item
.
state
||
'
none
'"
>
{{transCharCode(i)}}
</span>
<i
class=
"anticon anticon-sound"
></i>
<div
class=
"text"
*
ngIf=
"item.type === OPTION_TYPE.TEXT"
>
{{item.text}}
</div>
<div
class=
"audio"
style=
"text-align: center"
*
ngIf=
"item.type === OPTION_TYPE.AUDIO"
(
click
)="
playAudio
(
item
,
$
event
)"
>
<i
class=
"anticon anticon-sound"
></i>
</div>
<img
*
ngIf=
"item.type === OPTION_TYPE.PIC"
[
src
]="
item
.
pic_id
"
alt=
""
(
dragstart
)="
false
;$
event
.
preventDefault
();"
/>
</div>
</div>
<img
*
ngIf=
"item.type === OPTION_TYPE.PIC"
[
src
]="
item
.
pic_id
"
alt=
""
(
dragstart
)="
false
;$
event
.
preventDefault
();"
/>
</div>
</div>
<!--<img src="/assets/question/left.png" alt="ufo" class="left-ufo" (dragstart)="false;$event.preventDefault();">-->
<!--<img src="/assets/question/right.png" alt="ufo" class="right-ufo" (dragstart)="false;$event.preventDefault();">-->
</div>
</div>
<!--<img src="/assets/question/left.png" alt="ufo" class="left-ufo" (dragstart)="false;$event.preventDefault();">-->
<!--<img src="/assets/question/right.png" alt="ufo" class="right-ufo" (dragstart)="false;$event.preventDefault();">-->
</div>
</div>
src/app/play/play.component.scss
View file @
345d06e9
.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
;
}
.question-player
{
.question-player
{
display
:
flex
;
display
:
flex
;
flex-direction
:
column
;
flex-direction
:
column
;
...
...
src/app/play/play.component.ts
View file @
345d06e9
...
@@ -165,6 +165,7 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -165,6 +165,7 @@ export class PlayComponent implements OnInit, OnDestroy {
if
(
window
[
'
air
'
])
{
if
(
window
[
'
air
'
])
{
window
[
'
air
'
].
hideAirClassLoading
(
this
.
saveKey
,
this
.
data
);
window
[
'
air
'
].
hideAirClassLoading
(
this
.
saveKey
,
this
.
data
);
}
}
this
.
refresh
();
},
this
.
saveKey
);
},
this
.
saveKey
);
}
}
...
...
src/assets/player-bg.png
0 → 100644
View file @
345d06e9
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