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

修复底部操作栏高度动态计算问题，确保评论区域的内边距根据底部操作栏的高度自动调整，避免内容重叠

@@ -50,7 +50,7 @@
 
 
                 <div class="h-2 bg-gray-100"></div>
                 <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="flex justify-between items-center mb-4">
                         <div class="text-gray-900 font-medium text-sm">评论 ({{ comments.length }})</div>
                         <div class="text-gray-900 font-medium text-sm">评论 ({{ comments.length }})</div>
                         <div class="text-gray-500 cursor-pointer text-sm">查看更多</div>
                         <div class="text-gray-500 cursor-pointer text-sm">查看更多</div>
@@ -88,7 +88,7 @@
             </div>
             </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">
                 <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" />
                     <van-icon name="bars" class="text-lg text-gray-600" />
                     <span class="text-xs text-gray-600">课程目录</span>
                     <span class="text-xs text-gray-600">课程目录</span>
@@ -200,13 +200,18 @@ const comments = ref([
 useTitle('学习详情');
 useTitle('学习详情');
 
 
 const topWrapperHeight = ref(0);
 const topWrapperHeight = ref(0);
+const bottomWrapperHeight = ref(0);
 
 
 onMounted(() => {
 onMounted(() => {
     nextTick(() => {
     nextTick(() => {
         const topWrapper = document.querySelector('.top-wrapper');
         const topWrapper = document.querySelector('.top-wrapper');
+        const bottomWrapper = document.querySelector('.bottom-wrapper');
         if (topWrapper) {
         if (topWrapper) {
             topWrapperHeight.value = topWrapper.clientHeight + 'px';
             topWrapperHeight.value = topWrapper.clientHeight + 'px';
         }
         }
+        if (bottomWrapper) {
+            bottomWrapperHeight.value = bottomWrapper.clientHeight + 'px';
+        }
     })
     })
     const courseId = route.params.id;
     const courseId = route.params.id;
     if (courseId) {
     if (courseId) {