Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
mlaj
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
hookehuyr
2025-04-08 15:29:43 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
469a718ed5a199a4fae185116c48cc1585f55741
469a718e
1 parent
c2565d07
fix(StudyDetailPage): 调整评论区域底部内边距以避免内容重叠
修复底部操作栏高度动态计算问题,确保评论区域的内边距根据底部操作栏的高度自动调整,避免内容重叠
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
7 additions
and
2 deletions
src/views/study/StudyDetailPage.vue
src/views/study/StudyDetailPage.vue
View file @
469a718
...
...
@@ -50,7 +50,7 @@
<div class="h-2 bg-gray-100"></div>
<div id="comment" class="py-4 px-4 space-y-4">
<div id="comment" class="py-4 px-4 space-y-4"
:style="{ paddingBottom: bottomWrapperHeight }"
>
<div class="flex justify-between items-center mb-4">
<div class="text-gray-900 font-medium text-sm">评论 ({{ comments.length }})</div>
<div class="text-gray-500 cursor-pointer text-sm">查看更多</div>
...
...
@@ -88,7 +88,7 @@
</div>
<!-- 底部操作栏 -->
<div class="fixed bottom-0 left-0 right-0 bg-white border-t px-4 py-2 flex items-center space-x-4">
<div class="fixed bottom-0 left-0 right-0 bg-white border-t px-4 py-2 flex items-center space-x-4
bottom-wrapper
">
<div class="flex-none flex flex-col items-center gap-1 cursor-pointer active:opacity-80" @click="showCatalog = true">
<van-icon name="bars" class="text-lg text-gray-600" />
<span class="text-xs text-gray-600">课程目录</span>
...
...
@@ -200,13 +200,18 @@ const comments = ref([
useTitle('学习详情');
const topWrapperHeight = ref(0);
const bottomWrapperHeight = ref(0);
onMounted(() => {
nextTick(() => {
const topWrapper = document.querySelector('.top-wrapper');
const bottomWrapper = document.querySelector('.bottom-wrapper');
if (topWrapper) {
topWrapperHeight.value = topWrapper.clientHeight + 'px';
}
if (bottomWrapper) {
bottomWrapperHeight.value = bottomWrapper.clientHeight + 'px';
}
})
const courseId = route.params.id;
if (courseId) {
...
...
Please
register
or
login
to post a comment