Update - 企业详情弹窗样式完善

src/components/companyProjectDialog/index.vue

@@ -12,35 +12,31 @@
       width="44%"
       title="企业详情"
       aria-modal="false"
-      style="margin-top: 10vh !important;">
+      style="margin-top: 5vh !important;">
       <div class="contain">
         <div>
-          <span>标题：</span>
-          <span :title="info.title">{{ info.title }}</span>
+          <span :title="info.title" class="title_contain">{{ info.title }}</span>
         </div>
         <div>
-          <span>行管局：</span>
-          <span :title="info.unit">{{ info.unit }}</span>
+          <span :title="info.deptName" class="childTitle_contain">{{ info.deptName }}</span>
         </div>
-        <div>
-          <span>内容：</span>
-          <span :title="info.content" style="height: 200px;white-space: normal;overflow: hidden scroll;">{{ info.content }}</span>
+        <div style="height: fit-content !important;">
+          <span :title="info.content" class="content_contain">{{ info.content }}</span>
         </div>
-        <div style="margin-top: 22%;">
-          <span>图片：</span>
-          <span style="height: 200px;white-space: normal;overflow: hidden scroll;">
-            <img v-for="(e,idx) in info.attachPaths" :key="idx" :src="e" style="width: 100px;height: 100px;">
+        <div style="margin-top: 2%;height: fit-content !important;">
+          <span class="img_contain">
+            <el-image 
+              v-for="(e,idx) in info.attachPaths" 
+              :key="idx"
+              :src="e" 
+              style="width: 100px;height: 100px;"
+              z-index="999"
+              :preview-src-list="[e]">
+            </el-image>
           </span>
         </div>
-        <!-- <div style="margin-top: 22%;">
-          <span>视频：</span>
-          <span style="height: 200px;white-space: normal;overflow: hidden scroll;">
-            <span v-for="(e,idx) in info.imgList" :key="idx" @click="download(e.name,e.url)" :href="e.url" download>{{ e.name }}</span>
-          </span>
-        </div>  -->
-        <div style="margin-top: 22%;">
-          <span>附件：</span>
-          <span style="height: 200px;white-space: normal;overflow: hidden scroll;">
+        <div style="margin-top: 2%;height: fit-content !important;">
+          <span class="file_contain">
             <span v-for="(e,idx) in info.fileUrl" @click="download(e[1],e[0])" style="display: inline-block;width: 100%;">{{ e[1] }}</span>
           </span>
         </div>  
@@ -60,7 +56,7 @@ export default{
             isClick:false,
             currentHighLightPic:0,
             dialogVisible:false,
-            currentCameraParam:null
+            currentCameraParam:null,
         }
     },
     methods:{
@@ -123,6 +119,63 @@ export default{
     >div:nth-child(n+3){
       margin-top: 2%;
     }
+
+    .title_contain{
+      width: 100% !important;
+      text-align: center !important;
+      font-size: 24px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding: 0 15%;
+    }
+    .childTitle_contain{
+      width: 100% !important;
+      text-align: center !important;
+      font-size: 16px;
+      padding: 0 30%;
+    }
+    .content_contain{
+      overflow: hidden scroll;
+      width: 100% !important;
+      padding: 0 10%;
+      height: fit-content !important;
+      white-space: normal;
+      font-size: 16px;
+      text-align: left !important;
+    }
+
+    .img_contain{
+      overflow: hidden scroll;
+      width: 100% !important;
+      padding: 0 10%;
+      height: fit-content !important;
+      white-space: normal;
+      font-size: 16px;
+      text-align: left !important;
+      >div:not(:nth-child(6n-5)){
+        margin-left: 2.1%;
+      }
+    }
+
+    .file_contain{
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      width: 100% !important;
+      padding: 0 10%;
+      height: fit-content !important;
+      white-space: normal;
+      font-size: 16px;
+      text-align: left !important;
+      >span{
+        width: 45% !important;
+        text-align: center;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
 }
 </style>
 <style lang="scss">

src/views/forest.vue

@@ -558,7 +558,7 @@
             console.log('fileUrl',fileUrl)
             let detailInfo = {
               title:res.data.infoTitle || '',
-              unit:res.data.infoTitle || '',
+              deptName:res.data.deptName || '',
               content:res.data.infoContent || '',
               attachPaths,
               fileUrl,