Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
B
bookplayer
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
bookplayer
Commits
f39abbdf
Commit
f39abbdf
authored
Apr 13, 2025
by
15011343103
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
fix: 适配和热区位置修复
parent
eb645f71
Changes
3
Show whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
82 additions
and
20 deletions
+82
-20
index.css
play/index.css
+13
-14
index.html
play/index.html
+4
-1
index.js
play/index.js
+65
-5
No files found.
play/index.css
View file @
f39abbdf
...
@@ -46,40 +46,36 @@ html, body {
...
@@ -46,40 +46,36 @@ html, body {
.photo-section
{
.photo-section
{
width
:
100vw
;
width
:
100vw
;
height
:
100vh
;
height
:
100vh
;
position
:
absolute
;
top
:
0
;
left
:
0
;
right
:
0
;
bottom
:
0
;
overflow
:
hidden
;
overflow
:
hidden
;
position
:
relative
;
background
:
#000
;
background
:
#000
;
}
}
.photo-wrapper
{
.photo-wrapper
{
display
:
flex
;
width
:
100%
;
width
:
100%
;
height
:
100%
;
height
:
100%
;
display
:
flex
;
transition
:
transform
0.3s
ease
;
transition
:
transform
0.3s
cubic-bezier
(
0.4
,
0
,
0.2
,
1
);
will-change
:
transform
;
}
}
.photo-item
{
.photo-item
{
flex
:
0
0
100%
;
flex
:
0
0
100%
;
width
:
100%
;
width
:
100%
;
height
:
100%
;
height
:
100%
;
position
:
relative
;
display
:
flex
;
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
align-items
:
center
;
justify-content
:
center
;
overflow
:
hidden
;
overflow
:
hidden
;
position
:
relative
;
}
}
.photo-item
img
{
.photo-item
img
{
max-width
:
100%
;
width
:
100%
;
max-height
:
100%
;
height
:
100%
;
width
:
auto
;
height
:
auto
;
object-fit
:
contain
;
object-fit
:
contain
;
display
:
block
;
user-select
:
none
;
-webkit-user-drag
:
none
;
}
}
.point-area
{
.point-area
{
...
@@ -88,6 +84,8 @@ html, body {
...
@@ -88,6 +84,8 @@ html, body {
border-radius
:
4px
;
border-radius
:
4px
;
cursor
:
pointer
;
cursor
:
pointer
;
transition
:
all
0.2s
ease
;
transition
:
all
0.2s
ease
;
z-index
:
10
;
pointer-events
:
auto
;
}
}
.point-area
:hover
{
.point-area
:hover
{
...
@@ -102,6 +100,7 @@ html, body {
...
@@ -102,6 +100,7 @@ html, body {
background-color
:
rgba
(
64
,
158
,
255
,
0.1
);
background-color
:
rgba
(
64
,
158
,
255
,
0.1
);
pointer-events
:
none
;
pointer-events
:
none
;
transition
:
all
0.3s
ease
;
transition
:
all
0.3s
ease
;
z-index
:
9
;
}
}
.controls
{
.controls
{
...
...
play/index.html
View file @
f39abbdf
...
@@ -64,7 +64,10 @@
...
@@ -64,7 +64,10 @@
<div
v-for=
"(url, index) in bookData.photoUrls"
<div
v-for=
"(url, index) in bookData.photoUrls"
:key=
"index"
:key=
"index"
class=
"photo-item"
>
class=
"photo-item"
>
<img
:src=
"url"
:alt=
"'Page ' + (index + 1)"
>
<img
:src=
"url"
:alt=
"'Page ' + (index + 1)"
@
load=
"onImageLoad(index, $event)"
:ref=
"el => { if (el) pageImage[index] = el }"
>
<!-- 点读区域 -->
<!-- 点读区域 -->
<template
v-if=
"currentPage === index"
>
<template
v-if=
"currentPage === index"
>
<div
v-for=
"(point, pointIndex) in getCurrentPagePoints()"
<div
v-for=
"(point, pointIndex) in getCurrentPagePoints()"
...
...
play/index.js
View file @
f39abbdf
...
@@ -83,7 +83,10 @@ new Vue({
...
@@ -83,7 +83,10 @@ new Vue({
isPanelExpanded
:
false
,
isPanelExpanded
:
false
,
catalogList
:
[],
// 当前目录列表
catalogList
:
[],
// 当前目录列表
catalogStack
:
[],
// 目录导航栈
catalogStack
:
[],
// 目录导航栈
initialPid
:
'
421756
'
// 初始PID
initialPid
:
'
421756
'
,
// 初始PID
pageImage
:
[],
// 存储图片元素引用
imageLoadStatus
:
{},
// 记录图片加载状态
imageRects
:
{}
// 存储图片实际显示尺寸
}
}
},
},
computed
:
{
computed
:
{
...
@@ -140,6 +143,11 @@ new Vue({
...
@@ -140,6 +143,11 @@ new Vue({
async
loadCourseware
(
id
)
{
async
loadCourseware
(
id
)
{
try
{
try
{
this
.
loading
=
true
;
this
.
loading
=
true
;
this
.
pageImage
=
[];
this
.
imageLoadStatus
=
{};
this
.
imageRects
=
{};
this
.
currentPage
=
0
;
this
.
currentHighlight
=
null
;
const
auth_key
=
getAuthKey
();
const
auth_key
=
getAuthKey
();
const
params
=
{
const
params
=
{
auth_key
,
auth_key
,
...
@@ -325,11 +333,17 @@ new Vue({
...
@@ -325,11 +333,17 @@ new Vue({
getHighlightStyle
(
rect
)
{
getHighlightStyle
(
rect
)
{
if
(
!
rect
)
return
{};
if
(
!
rect
)
return
{};
const
imageRect
=
this
.
imageRects
[
this
.
currentPage
];
if
(
!
imageRect
)
return
{};
const
{
actualWidth
,
actualHeight
,
offsetX
,
offsetY
}
=
imageRect
;
return
{
return
{
left
:
rect
.
x
*
100
+
'
%
'
,
position
:
'
absolute
'
,
top
:
rect
.
y
*
100
+
'
%
'
,
left
:
`
${
offsetX
+
(
rect
.
x
*
actualWidth
)}
px`
,
width
:
rect
.
width
*
100
+
'
%
'
,
top
:
`
${
offsetY
+
(
rect
.
y
*
actualHeight
)}
px`
,
height
:
rect
.
height
*
100
+
'
%
'
,
width
:
`
${
rect
.
width
*
actualWidth
}
px`
,
height
:
`
${
rect
.
height
*
actualHeight
}
px`
,
cursor
:
this
.
isPointMode
?
'
pointer
'
:
'
default
'
cursor
:
this
.
isPointMode
?
'
pointer
'
:
'
default
'
};
};
},
},
...
@@ -368,9 +382,55 @@ new Vue({
...
@@ -368,9 +382,55 @@ new Vue({
}
}
}
}
this
.
currentPage
=
newPage
;
this
.
currentPage
=
newPage
;
// 如果图片已加载但尺寸未计算,重新计算
if
(
this
.
imageLoadStatus
[
newPage
]
&&
!
this
.
imageRects
[
newPage
])
{
const
img
=
this
.
pageImage
[
newPage
];
if
(
img
)
{
this
.
onImageLoad
(
newPage
,
{
target
:
img
});
}
}
},
},
togglePanel
()
{
togglePanel
()
{
this
.
isPanelExpanded
=
!
this
.
isPanelExpanded
;
this
.
isPanelExpanded
=
!
this
.
isPanelExpanded
;
},
// 处理图片加载完成事件
onImageLoad
(
index
,
event
)
{
const
img
=
event
.
target
;
this
.
$set
(
this
.
imageLoadStatus
,
index
,
true
);
// 计算图片实际显示尺寸和位置
const
container
=
img
.
parentElement
;
const
containerRect
=
container
.
getBoundingClientRect
();
const
imgRatio
=
img
.
naturalWidth
/
img
.
naturalHeight
;
const
containerRatio
=
containerRect
.
width
/
containerRect
.
height
;
let
actualWidth
,
actualHeight
,
offsetX
,
offsetY
;
if
(
imgRatio
>
containerRatio
)
{
actualWidth
=
containerRect
.
width
;
actualHeight
=
actualWidth
/
imgRatio
;
offsetX
=
0
;
offsetY
=
(
containerRect
.
height
-
actualHeight
)
/
2
;
}
else
{
actualHeight
=
containerRect
.
height
;
actualWidth
=
actualHeight
*
imgRatio
;
offsetX
=
(
containerRect
.
width
-
actualWidth
)
/
2
;
offsetY
=
0
;
}
// 存储计算结果
this
.
$set
(
this
.
imageRects
,
index
,
{
actualWidth
,
actualHeight
,
offsetX
,
offsetY
});
// 如果是当前页面,强制更新视图
if
(
index
===
this
.
currentPage
)
{
this
.
$forceUpdate
();
}
}
}
},
},
async
created
()
{
async
created
()
{
...
...
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