预览样式修改

src/styles/variables.scss

@@ -19,6 +19,7 @@ $right-color: #30a47d;
 $right-bc-color: #e8f7f2;
 $label-color: #076aff;
 $setting-active-color: #4176ff;
+$courseware-bgColor: #fdfdfd; // 教材内容背景色
 
 // px
 $header-h: 64px; // 顶部内容高度

src/views/book/courseware/preview/CoursewarePreview.vue

@@ -330,7 +330,7 @@ export default {
     height: 15px;
     pointer-events: none;
     content: '';
-    background: #f9f9f9;
+    background: $courseware-bgColor;
   }
 
   &::before {

src/web_preview/index.vue

@@ -26,7 +26,7 @@
       <aside v-if="navigationShow" class="left-menu">
         <div class="courseware-info">
           <div class="cover-image">
-            <img v-if="project.cover_image_file_url.length > 0" :src="project.cover_image_file_url" alt="" />
+            <img v-if="project.cover_image_file_url.length > 0" :src="project.cover_image_file_url" alt="cover-image" />
           </div>
           <div class="info-content">
             <div class="catalogue-icon">
@@ -36,13 +36,8 @@
               <div class="name nowrap-ellipsis" :title="courseware_info.book_name">
                 {{ courseware_info.book_name }}
               </div>
-              <div>
-                <span>主编 </span>
-                <span>{{ project.editor }}</span>
-              </div>
-              <div>
-                <span>副主编 </span>
-                <span>{{ project.associate_editor }}</span>
+              <div class="editor" :title="project.editor">
+                {{ project.editor }}
               </div>
             </div>
           </div>
@@ -169,7 +164,6 @@ export default {
       navigationShow: true,
       project: {
         editor: '', // 主编
-        associate_editor: '', // 副主编
         cover_image_file_id: null, // 封面图片ID
         cover_image_file_url: '', // 封面图片URL
       },
@@ -200,7 +194,7 @@ export default {
     },
 
     getProjectInfo() {
-      GetProjectInfo({ id: this.projectId }).then(({ project_info }) => {
+      GetProjectInfo({ id: this.book_id }).then(({ project_info }) => {
         this.project = project_info;
       });
     },
@@ -447,7 +441,7 @@ $total-width: $courseware-width + $courseware-left-margin + $courseware-right-ma
     min-width: 1110px;
     padding: 15px 0;
     overflow: auto;
-    background: url('@/assets/preview-bg.png') repeat;
+    background: #ececec;
 
     .catalogue-bar {
       display: flex;
@@ -492,14 +486,14 @@ $total-width: $courseware-width + $courseware-left-margin + $courseware-right-ma
       width: $courseware-left-margin;
       min-width: $courseware-left-margin;
       max-width: $courseware-left-margin;
-      background-color: #f9f9f9;
+      background-color: $courseware-bgColor;
     }
 
     .preview-right {
       width: $courseware-right-margin;
       min-width: $courseware-right-margin;
       max-width: $courseware-right-margin;
-      background-color: #f9f9f9;
+      background-color: $courseware-bgColor;
     }
 
     &.no-audit {
@@ -528,13 +522,16 @@ $total-width: $courseware-width + $courseware-left-margin + $courseware-right-ma
         border-bottom: $border;
 
         .cover-image {
+          display: flex;
+          align-items: center;
+          justify-content: center;
           width: 111px;
           height: 157px;
           background-color: rgba(229, 229, 229, 100%);
 
           img {
-            width: 100%;
-            height: 100%;
+            max-width: 111px;
+            max-height: 157px;
           }
         }
 
@@ -559,6 +556,16 @@ $total-width: $courseware-width + $courseware-left-margin + $courseware-right-ma
             .name {
               font-weight: bold;
             }
+
+            .editor {
+              display: -webkit-box;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              word-break: break-word;
+              white-space: normal;
+              -webkit-line-clamp: 2; /* 多行省略行数，按需调整 */
+              -webkit-box-orient: vertical;
+            }
           }
         }
       }