更新

src/styles/page/using/scoped/query.scss

@@ -296,6 +296,8 @@
     height: 100%;
     width: 100%;
     display: flex;
+    overflow-y: hidden;
+    overflow-x: auto;
     .hc-gui-info-img {
         position: relative;
         height: 100%;
@@ -306,6 +308,7 @@
         .gui-info-img {
             position: relative;
             height: 100%;
+            padding-bottom: 10px;
             img {
                 position: relative;
                 height: 100%;
@@ -369,24 +372,51 @@
         padding-left: 40px;
         .hc-gui-data-container {
             position: relative;
-            height: calc(100% - 50px);
-            .info-item {
-                position: relative;
-                display: flex;
-                color: #101010;
-                .title {
-                    margin-right: 14px;
-                    font-weight: bold;
-                    span + span {
-                        margin-left: 29px;
+            height: calc(100% - 70px);
+            img {
+                height: 550px;
+            }
+            .hc-gui-info-item-box {
+                position: absolute;
+                top: 58px;
+                left: 38px;
+                right: 28px;
+                height: 400px;
+                overflow: hidden;
+                .hc-gui-info-item {
+                    position: relative;
+                    height: 100%;
+                    width: 100%;
+                    .info-item {
+                        position: relative;
+                        display: flex;
+                        color: #101010;
+                        .title {
+                            margin-right: 14px;
+                            font-weight: bold;
+                            span + span {
+                                margin-left: 29px;
+                            }
+                        }
+                        .text {
+                            flex: 1;
+                        }
+                    }
+                    .info-item-name {
+                        color: #101010;
+                        margin-top: 50px;
+                        line-height: 1.8;
+                    }
+                    .hc-info-item-bottom {
+                        position: absolute;
+                        bottom: 4px;
+                        right: -2px;
+                        left: 4px;
+                    }
+                    .info-item + .info-item {
+                        margin-top: 14px;
                     }
                 }
-                .text {
-                    flex: 1;
-                }
-            }
-            .info-item + .info-item {
-                margin-top: 14px;
             }
         }
         .btn-box {

src/views/using/query.vue

@@ -195,38 +195,43 @@
                 </div>
                 <div class="hc-gui-info-data">
                     <div class="hc-gui-data-container">
-                        <el-scrollbar>
-                            <div class="info-item">
-                                <div class="title">案卷题名：</div>
-                                <div class="text">{{ guiInfoCurKey.name }}</div>
-                            </div>
-                            <div class="info-item">
-                                <div class="title">
-                                    <span>密</span>
-                                    <span>级：</span>
+                        <img :src="imageViewGui2" alt="">
+                        <div class="hc-gui-info-item-box">
+                            <div class="hc-gui-info-item">
+                                <div class="info-item" style="top: 10px">
+                                    <div class="title">
+                                        <span>档</span>
+                                        <span>号：</span>
+                                    </div>
+                                    <div class="text">{{ guiInfoCurKey.fileNumber }}</div>
                                 </div>
-                                <div class="text">{{ guiInfoCurKey.secretLevelValue }}</div>
-                            </div>
-                            <div class="info-item">
-                                <div class="title">保管期限：</div>
-                                <div class="text">{{ guiInfoCurKey.storageTimeValue }}</div>
-                            </div>
-                            <div class="info-item">
-                                <div class="title">卷内文件：</div>
-                                <div class="text">{{ guiInfoCurKey.pageNumber }}</div>
-                            </div>
-                            <div class="info-item">
-                                <div class="title">起止日期：</div>
-                                <div class="text" v-if="guiInfoCurKey?.endDate !== ''|| guiInfoCurKey?.startDate !== ''">
-                                    {{ splitDate(guiInfoCurKey?.startDate)+"~"+  splitDate(guiInfoCurKey?.endDate)}}
+                                <div class="info-item-name">{{ guiInfoCurKey.name }}</div>
+                                <div class="hc-info-item-bottom">
+                                    <div class="info-item">
+                                        <div class="title">立卷单位：</div>
+                                        <div class="text">{{ guiInfoCurKey.unit }}</div>
+                                    </div>
+                                    <div class="info-item">
+                                        <div class="title">起止日期：</div>
+                                        <div class="text" v-if="guiInfoCurKey?.endDate !== ''|| guiInfoCurKey?.startDate !== ''">
+                                            {{ splitDate(guiInfoCurKey?.startDate)+"~"+  splitDate(guiInfoCurKey?.endDate)}}
+                                        </div>
+                                        <div class="text" v-else></div>
+                                    </div>
+                                    <div class="info-item">
+                                        <div class="title">保管期限：</div>
+                                        <div class="text">{{ guiInfoCurKey.storageTimeValue }}</div>
+                                    </div>
+                                    <div class="info-item">
+                                        <div class="title">
+                                            <span>密</span>
+                                            <span>级：</span>
+                                        </div>
+                                        <div class="text">{{ guiInfoCurKey.secretLevelValue }}</div>
+                                    </div>
                                 </div>
-                                <div class="text" v-else></div>
-                            </div>
-                            <div class="info-item">
-                                <div class="title">立卷单位：</div>
-                                <div class="text">{{ guiInfoCurKey.unit }}</div>
                             </div>
-                        </el-scrollbar>
+                        </div>
                     </div>
                     <div class="btn-box">
                         <el-button size="large" type="primary"
@@ -393,6 +398,7 @@ import archiveQueryApi from "~api/using/query.js";
 import tuningApi from "~api/archiveConfig/tuning.js";
 import imageViewGui from "~src/assets/view/gui.png";
 import imageViewGui1 from "~src/assets/view/gui1.png";
+import imageViewGui2 from "~src/assets/view/gui2.png";
 
 //变量
 const useAppState = useAppStore()