修改项目详情页面样式

SalesPlatform/sales-show-platform/src/views/ProjectDetail.vue

@@ -16,7 +16,6 @@
         删除项目
       </el-button>
     </div>
-
     <!-- 主体内容：左侧功能分组+右侧文件 -->
     <div class="main-content">
       <!-- 左侧功能分组列表（按功能名称分组） -->
@@ -44,7 +43,7 @@
             删
           </el-button>
         </div>
-      </div>
+      </div> <!-- 修正：原代码这里多了一个多余的</div>，导致标签嵌套错误 -->
 
       <!-- 右侧：选中功能下的所有文件展示 -->
       <div class="file-display-wrapper" v-if="activeFuncName">
@@ -65,7 +64,7 @@
                 fit="cover"
                 style="width: 80px; height: 60px;"
                 :preview-src-list="[]"
-              />
+              /> <!-- 确保自闭合 -->
               <div v-else class="video-preview">
                 <el-icon class="video-icon"><VideoPlay /></el-icon>
                 <span>视频</span>
@@ -91,20 +90,23 @@
 
         <!-- 选中文件的大图/视频展示 -->
         <div class="file-preview-large">
-          <div v-if="activeFile.file_type === 'image'">
+          <!-- 修正：注释移到属性行外，避免解析错误 -->
+          <div v-if="activeFile.file_type === 'image'" class="image-wrapper">
+            <!-- 完整显示图片，不裁剪，不超出容器 -->
             <el-image
               :src="`${baseURL}${activeFile.file_path}`"
               fit="contain"
-              style="max-width: 100%; max-height: 500px;"
+              style="width: 100%; height: 100%;"
               preview-teleported
               :preview-src-list="activeFuncFiles.map(f => `${baseURL}${f.file_path}`)"
-            />
+            /> <!-- 确保el-image自闭合，原代码可能未正确闭合 -->
           </div>
-          <div v-else-if="activeFile.file_type === 'video'">
+          <div v-else-if="activeFile.file_type === 'video'" class="video-wrapper">
+            <!-- 视频适配容器 -->
             <video
               controls
               :src="`${baseURL}${activeFile.file_path}`"
-              style="width: 100%; max-height: 500px;"
+              style="width: 100%; height: 100%; object-fit: contain;"
             >
               您的浏览器不支持视频播放，请升级浏览器！
             </video>
@@ -125,7 +127,7 @@
 import { ref, onMounted, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import { VideoPlay } from '@element-plus/icons-vue'; // 仅保留使用的VideoPlay图标
+import { VideoPlay } from '@element-plus/icons-vue';
 import axios from 'axios';
 
 // 基础配置
@@ -302,7 +304,7 @@ onMounted(() => {
 <style scoped>
 .detail-container {
   width: 100%;
-  min-height: 100vh;
+  height: 100%;
   background-color: #f5f7fa;
   padding: 0 20px;
 }
@@ -335,9 +337,10 @@ onMounted(() => {
   display: flex;
   gap: 20px;
   margin-top: 20px;
+  height: 90%;
 }
 .func-sidebar {
-  width: 200px;
+  width: 250px;
   background: #fff;
   border-radius: 8px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
@@ -454,9 +457,25 @@ onMounted(() => {
   align-items: center;
   justify-content: center;
   min-height: 500px;
+  max-height: 100%; /* 固定最大高度，防止容器无限拉伸 */
   border: 1px solid #f5f5f5;
   border-radius: 8px;
   padding: 20px;
+  overflow: hidden; /* 核心：超出容器的部分隐藏 */
+}
+.image-wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.video-wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .empty-file, .empty-func {
   font-size: 16px;