详情页样式调整

src/assets/styles/common.scss

@@ -125,7 +125,18 @@ img {
     li{
         list-style: inherit !important;
         list-style-position: inside !important;
-    }   
+    }
+
+    &.report-external-html {
+        table {
+            width:100% !important;
+            table-layout: fixed !important;
+            overflow: auto !important;
+            p,span {
+                font-size: 20px !important;
+            }
+        }
+    }
 }
 @media screen and (min-width:650px){
     .report-html-wrap{
@@ -136,6 +147,14 @@ img {
         p{
             font-size: 18px !important;
         }
+
+        &.report-external-html {
+            table {
+                p,span {
+                    font-size: 20px !important;
+                }
+            }
+        }
     }
 }
 

src/views/externalReport/Preview.vue

@@ -1,7 +1,6 @@
 <script setup name="ReportPreview">
 import { ref,computed, nextTick, reactive,toRefs } from 'vue'
 import { useRoute, useRouter } from "vue-router";
-import apiReport from '@/api/report'
 import {reportExternalInterface} from '@/api/reportExternal'
 import { showToast,FloatingPanel,FloatingBubble  } from 'vant'
 import { copyText } from 'vue3-clipboard'
@@ -119,33 +118,33 @@ function getFileIcon(name) {
             <span>{{reportInfo.CreateTime}}</span>
         </div>
         
-        <div class="report-html-wrap" v-html="reportInfo.Abstract" v-if="reportInfo.Abstract"></div>
-        <div class="report-html-wrap" v-html="reportInfo.Content" v-if="reportInfo.Content"></div>
+        <div class="report-html-wrap report-external-html" v-html="reportInfo.Abstract" v-if="reportInfo.Abstract"></div>
+        <div class="report-html-wrap report-external-html" v-html="reportInfo.Content" v-if="reportInfo.Content"></div>
         
-        <van-floating-panel 
-            :content-draggable="false" 
-            v-if="fileLen" 
-            v-model:height="panelHeight" 
-            :anchors="configAnchors"
-        >
-            <div class="attachments-wrapper">
-                <div>
-                    <svg-icon name="link_ico" size="20px"></svg-icon>
-                    附件{{fileLen}}个({{formatSize(totalSize)}})
-                </div>
-
-                <ul class="list-cont">
-                    <li class="item" v-for="(item,index) in attachmentsList" :key="index" @click="handlePreviewAttachment(item)">
-                        <svg-icon class="file-ico" :name="getFileIcon(item.Title)"></svg-icon>
-                        <div class="right-info">
-                            <p class="van-ellipsis file-name">{{item.Title}}</p>
-                            <span style="color:#999">{{formatSize(item.FileSize)}}</span>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-        </van-floating-panel>
     </div>
+    <van-floating-panel 
+        :content-draggable="false" 
+        v-if="fileLen" 
+        v-model:height="panelHeight" 
+        :anchors="configAnchors"
+    >
+        <div class="attachments-wrapper">
+            <div>
+                <svg-icon name="link_ico" size="20px"></svg-icon>
+                附件{{fileLen}}个({{formatSize(totalSize)}})
+            </div>
+
+            <ul class="list-cont">
+                <li class="item" v-for="(item,index) in attachmentsList" :key="index" @click="handlePreviewAttachment(item)">
+                    <svg-icon class="file-ico" :name="getFileIcon(item.Title)"></svg-icon>
+                    <div class="right-info">
+                        <p class="van-ellipsis file-name">{{item.Title}}</p>
+                        <span style="color:#999">{{formatSize(item.FileSize)}}</span>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </van-floating-panel>
 
     <van-floating-bubble 
         icon="share" 
@@ -153,7 +152,7 @@ function getFileIcon(name) {
         @click="handleCopyLink"
     />
 
-    <van-back-top bottom="100" right="10"/>
+    <van-back-top bottom="100" right="10" z-index="9999"/>
 
     <!-- 预览-->
     <van-popup
@@ -170,7 +169,9 @@ function getFileIcon(name) {
 <style lang="scss" scoped>
 .report-detail-page{
     padding: 30px 34px;
-    margin-bottom: 112px;
+    margin-bottom: 260px;
+    position: relative;
+    z-index: -1;
     .report-title{
         margin: 30px 0;
         font-weight: 600;
@@ -193,56 +194,41 @@ function getFileIcon(name) {
         margin: 40px 0;
     }
 
-    :deep(.van-floating-panel) {
-        box-shadow: 0 -4px 8px rgba($color: #000000, $alpha: 0.2);
-    }
-    .attachments-wrapper {
-        padding:20px 30px;
-        .list-cont {
-            margin-top: 15px;
+}
+.van-floating-panel{
+    box-shadow: 0 -4px 8px rgba($color: #000000, $alpha: 0.2);
+}
+.attachments-wrapper {
+    padding:20px 30px;
+    .list-cont {
+        margin-top: 15px;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap:20px;
+        .item{
+            width: 100%;
             display: flex;
-            align-items: center;
-            flex-wrap: wrap;
-            gap:20px;
-            .item{
-                width: 100%;
-                display: flex;
-                border: 1px solid #dcdcdc;
-                padding: 15px 30px;
-                border-radius: 8px;
-                overflow: hidden;
-                .file-ico {
-                    margin-right: 20px;
-                    /* font-size: 40px; */
-                    width: 80px;
-                    height: 80px;
-                    flex-shrink: 0;
-                }
-                .file-name {
-                    margin-bottom: 10px;
-                    max-width: 500px;
-                }
-
+            border: 1px solid #dcdcdc;
+            padding: 15px 30px;
+            border-radius: 8px;
+            overflow: hidden;
+            .file-ico {
+                margin-right: 20px;
+                /* font-size: 40px; */
+                width: 80px;
+                height: 80px;
+                flex-shrink: 0;
             }
+            .file-name {
+                margin-bottom: 10px;
+                max-width: 500px;
+            }
+
         }
     }
 }
-.report-html-wrap {
-    img {
-        display: "block";
-        margin: "0 auto";
-        max-width: "100%";
-        height:'auto'
-    }
-    table {
-        width:'100%';
-        table-layout: 'fixed';
-        overflow:'auto';
-        p,span {
-            font-size: 10px !important;
-        }
-    }
-}
+
 .van-floating-bubble {
     width: 48px;
     height: 48px;
@@ -269,24 +255,24 @@ function getFileIcon(name) {
             margin: 20px 0;
         }
 
-        .attachments-wrapper {
-            padding:20px 30px;
-            .list-cont {
-                .item{
-                    max-width: 45%;
-                    padding: 10px 30px;
-                    border-radius: 4px;
-                    .file-ico {
-                        margin-right: 10px;
-                        width: 45px;
-                        height: 45px;
-                    }
-                    .file-name {
-                        margin-bottom: 10px;
-                        max-width: 250px;
-                    }
-
+    }
+    .attachments-wrapper {
+        padding:20px 30px;
+        .list-cont {
+            .item{
+                max-width: 45%;
+                padding: 10px 30px;
+                border-radius: 4px;
+                .file-ico {
+                    margin-right: 10px;
+                    width: 45px;
+                    height: 45px;
                 }
+                .file-name {
+                    margin-bottom: 10px;
+                    max-width: 250px;
+                }
+
             }
         }
     }