Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
W
ww_reading
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_reading
Commits
ee6819bb
Commit
ee6819bb
authored
Aug 13, 2020
by
liujiaxin
Browse files
Options
Browse Files
Download
Plain Diff
Merge remote-tracking branch 'origin/master'
parents
fc92f063
b0112cab
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
63 additions
and
34 deletions
+63
-34
play.component.html
src/app/play/play.component.html
+37
-34
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 @
ee6819bb
<div
class=
"player-reading"
#
readingContainer
>
<div
class=
"imgDetailBox"
(
click
)="
closeDetailView
($
event
)"
[
style
.
display
]="
partDetailVisible
?
'
block
'
:
'
none
'"
>
<div
class=
"detail-preview-box"
[
ngStyle
]="
partViewDetailCss
"
>
<img
[
src
]="
data
.
contentObj
.
pic_id
|
resource
"
[
ngStyle
]="
partViewImgDetailCss
"
>
<div
class=
"body-bg"
></div>
<div
class=
"player-border"
>
<div
class=
"player-reading"
#
readingContainer
>
<div
class=
"imgDetailBox"
(
click
)="
closeDetailView
($
event
)"
[
style
.
display
]="
partDetailVisible
?
'
block
'
:
'
none
'"
>
<div
class=
"detail-preview-box"
[
ngStyle
]="
partViewDetailCss
"
>
<img
[
src
]="
data
.
contentObj
.
pic_id
|
resource
"
[
ngStyle
]="
partViewImgDetailCss
"
>
</div>
</div>
</div
>
<div
class=
"fill
"
>
<div
class=
"row fill"
style=
"margin: 0 6vh;padding-top:3vh;padding-bottom: 3vh;
"
>
<div
class=
"col-6
"
>
<div
class=
"bar
"
>
<div
class=
"parts-wrap"
>
<div
class=
"parts"
#
previewParts
>
<div
class=
"row"
*
ngFor=
"let part of parts;let i = index
"
>
<div
class=
"col-6 word-wrap
"
[
style
.
color
]="
part
.
color
"
>
<span
class=
"word "
[
style
.
color
]="
part
.
color
"
>
{{part.word}}
</
span
>
</div
>
<div
class=
"col-6
"
>
<div
class=
"part-pic-box-border"
(
click
)="
highlightSelect
(
i
)"
[
style
.
borderColor
]="
part
.
color
"
>
<div
class=
"part-pic-box"
[
ngStyle
]="
part
.
preview
Css
"
>
<
img
[
src
]="
data
.
contentObj
.
pic_id
|
resource
"
[
ngStyle
]="
part
.
imgCss
"
>
<div
class=
"fill"
>
<div
class=
"row fill"
style=
"margin: 0 6vh;padding-top:3vh;padding-bottom: 3vh;
"
>
<div
class=
"col-6
"
>
<div
class=
"bar
"
>
<div
class=
"parts-wrap
"
>
<div
class=
"parts"
#
previewParts
>
<div
class=
"row"
*
ngFor=
"let part of parts;let i = index"
>
<div
class=
"col-6 word-wrap"
[
style
.
color
]="
part
.
color
"
>
<span
class=
"word
"
[
style
.
color
]="
part
.
color
"
>
{{part.word}}
</span>
</
div
>
<div
class=
"col-6"
>
<div
class=
"part-pic-box-border"
(
click
)="
highlightSelect
(
i
)"
[
style
.
borderColor
]="
part
.
color
"
>
<div
class=
"part-pic-box"
[
ngStyle
]="
part
.
previewCss
"
>
<img
[
src
]="
data
.
contentObj
.
pic_id
|
resource
"
[
ngStyle
]="
part
.
img
Css
"
>
<
/div
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div
>
<div
class=
"col-6"
style=
"display: flex;justify-content: center;align-items: center;"
>
<div
class=
"pic-preview"
[
ngStyle
]="
previewContainerCss
"
#
previewContainer
>
<img
[
src
]="
data
.
contentObj
.
pic_id
|
resource
"
alt=
""
>
<div
class=
"highlight"
#
highlightBox
>
<div
class=
"t
-b"
></div>
<div
class=
"r
-b"
></div>
<div
class=
"b
-b"
></div>
<
div
class=
"l-b"
><
/div>
<div
class=
"col-6"
style=
"display: flex;justify-content: center;align-items: center;"
>
<div
class=
"pic-preview"
[
ngStyle
]="
previewContainerCss
"
#
previewContainer
>
<img
[
src
]="
data
.
contentObj
.
pic_id
|
resource
"
alt=
""
>
<div
class=
"highlight"
#
highlightBox
>
<div
class=
"t-b"
></div
>
<div
class=
"r
-b"
></div>
<div
class=
"b
-b"
></div>
<div
class=
"l
-b"
></div>
</div>
</div>
</div>
</div>
...
...
src/app/play/play.component.scss
View file @
ee6819bb
.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-reading
{
background
:
url("../../assets/reading/bg_reading.png")
50%
50%
no-repeat
;
width
:
100%
;
...
...
src/assets/player-bg.png
0 → 100644
View file @
ee6819bb
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