hookehuyr

fix(StudyDetailPage): 调整评论区域底部内边距以避免内容重叠

修复底部操作栏高度动态计算问题,确保评论区域的内边距根据底部操作栏的高度自动调整,避免内容重叠
......@@ -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) {
......