合并冲突

src/style/global.scss

@@ -308,4 +308,19 @@ img {
     font-weight: 400;
     color: #E3B377;
   }
+}
+//预览ppt时样式
+.ppt-preview-box{
+  @media screen and (min-width: 1600px){
+    .el-image-viewer__close{
+      top: 10vh;
+      right: calc(50% - 700px);
+    }
+    .el-image-viewer__next{
+      right: calc(50% - 700px);
+    }
+    .el-image-viewer__prev{
+      left: calc(50% - 700px);
+    }
+  }
 }

src/views/report/ChapterDetail.vue

@@ -32,6 +32,8 @@ let frompage=ref(route.query.frompage||'')//如果来自报告详情页 则展
 //获取报告对应的ppt图片
 const pptIcon=new URL('../../assets/ppt-icon.png', import.meta.url).href
 let pptImgs=ref([])
+let showPreViewPPT=ref(false)
+let preViewPPTIndex=ref(0)
 const getReportPPTImgs=async (e)=>{
     const res=await apiReportPPtImgs({
         report_id:Number(e.report_id),
@@ -388,12 +390,11 @@ const posterParams=computed(()=>{
                             </div>
                         </div>
                         <el-image
-                            style="width: 24px; height: 24px;position: absolute;right:0;bottom:0"
+                            style="width: 54px; height: 54px;position: fixed;right:33px;bottom:200px;z-index: 99;cursor: pointer;"
                             :src="pptIcon"
-                            :preview-src-list="pptImgs"
-                            :initial-index="0"
                             fit="cover"
                             v-if="pptImgs.length>0"
+                            @click="showPreViewPPT=true"
                         />
                     </div>
                     <AudioBox :data="audioData" v-if="info.report_chapter_item.video_url&&info.report_chapter_item.video_play_seconds>0"></AudioBox>
@@ -502,6 +503,16 @@ const posterParams=computed(()=>{
         :url-list="preViewImgs"
     />
 
+    <!-- 预览ppt -->
+    <div class="ppt-preview-box" v-if="showPreViewPPT">
+        <el-image-viewer
+            v-if="showPreViewPPT"
+            :initial-index="preViewPPTIndex"
+            @close="showPreViewPPT=false"
+            :url-list="pptImgs"
+        />
+    </div>
+
     <!-- 免责申明 -->
     <el-dialog v-model="showDisclaimers" title="免责声明" center draggable width="40%">
         <div class="disclaimers-box">

src/views/report/Detail.vue

@@ -26,6 +26,8 @@ let reportId=ref(route.query.reportId||'')
 //获取报告对应的ppt图片
 const pptIcon=new URL('../../assets/ppt-icon.png', import.meta.url).href
 let pptImgs=ref([])
+let showPreViewPPT=ref(false)
+let preViewPPTIndex=ref(0)
 const getReportPPTImgs=async ()=>{
     const res=await apiReportPPtImgs({
         report_id:Number(reportId.value),
@@ -433,12 +435,11 @@ const formatTitle=(e)=>{
                             </div>
                         </div>
                         <el-image
-                            style="width: 24px; height: 24px;position: absolute;right:0;bottom:0"
+                            style="width: 54px; height: 54px;position: fixed;right:33px;bottom:200px;z-index: 99;cursor: pointer;"
                             :src="pptIcon"
-                            :preview-src-list="pptImgs"
-                            :initial-index="0"
                             fit="cover"
                             v-if="pptImgs.length>0"
+                            @click="showPreViewPPT=true"
                         />
                     </div>
                     <!-- 音频模块 -->
@@ -541,6 +542,17 @@ const formatTitle=(e)=>{
         :url-list="preViewImgs"
     />
 
+    <!-- 预览ppt -->
+    <div class="ppt-preview-box" v-if="showPreViewPPT">
+        <el-image-viewer
+            v-if="showPreViewPPT"
+            :initial-index="preViewPPTIndex"
+            @close="showPreViewPPT=false"
+            :url-list="pptImgs"
+        />
+    </div>
+    
+
     <!-- 免责申明 -->
     <el-dialog v-model="showDisclaimers" title="免责声明" center draggable width="40%">
         <div class="disclaimers-box">
@@ -576,44 +588,14 @@ const formatTitle=(e)=>{
             &::before{
                 content: '';
                 width: 6px;
-                // height: 30px;
                 display: inline-block;
                 background-color: #F3A52F;
                 margin-right: 10px;
-                // position: relative;
-                // top: 10px;
-            }
-            @media screen and (min-width: 1600px){
-                ::v-deep(.el-image-viewer__close){
-                    top: 10vh;
-                    right: calc(50% - 700px);
-                }
-                ::v-deep(.el-image-viewer__next){
-                    right: calc(50% - 700px);
-                }
-                ::v-deep(.el-image-viewer__prev){
-                    left: calc(50% - 700px);
-                }
             }
-            
         }
         .abstract{
             font-size: 18px;
-            // font-weight: bold;
             margin-bottom: 20px;
-            // margin-top: 20px;
-            // display: flex;
-            // align-items: center;
-            // &::before{
-            //     flex-shrink: 0;
-            //     content: '';
-            //     display: block;
-            //     width: 6px;
-            //     min-height: 30px;
-            //     background-color: #F3A52F;
-            //     margin-right: 10px;
-            //     position: relative;
-            // }
         }
         .rich-content{
             margin-top: 30px;