【bug】文件组件样式修改

src/components/jero/PreviewFile.vue

@@ -1,12 +1,16 @@
 <template>
   <!--  父组件的文件id如果是异步获取的 需要加上v-if判断-->
-  <div>
+  <div class="file-wrap">
     <!--  2021-10-09 author:zx 把span换成了div，实现多个文件显示换行-->
-    <div v-for="(item) of fileList" :key="item.id">{{ item.name + '  ' }}
+    <div v-for="(item) of fileList" :key="item.id" class="file-item">
-      <span class="m-l-4 color-blue" @click="handleDownLoad(item)">下载</span>
+      <span class="file-name"><j-ellipsis :value="item.name" :length="20"></j-ellipsis></span>
-      <span class="m-l-4 color-blue" @click="handlePreview(item)">查看</span>
+      <div class="file-btn">
+        <span class="color-blue" @click="handleDownLoad(item)">下载</span>
+        <span class="color-blue" @click="handlePreview(item)">查看</span>
       </div>
     </div>
+
+  </div>
 </template>
 
 <script>
@@ -14,6 +18,7 @@ import Vue from 'vue'
 import {ACCESS_TOKEN} from '@/store/mutation-types'
 import {getFileInfo} from '@/api/api'
 import {downloadFile} from '@api/manage'
+import JEllipsis from '@comp/jero/JEllipsis'
 // eslint-disable-next-line
 const Base64 = require('js-base64').Base64
 
@@ -29,6 +34,9 @@ export default {
       required: false
     }
   },
+  components: {
+    JEllipsis
+  },
   data() {
     return {
       fileInfo: {},
@@ -104,4 +112,30 @@ export default {
 .m-l-4 {
   margin-left: 4px;
 }
+
+.file-wrap {
+
+  display: inline-block;
+}
+
+.file-item {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 5px;
+
+  .file-name {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .file-btn {
+    width: 100px;
+
+    span:nth-child(1) {
+      margin: 0 20px 0 10px;
+    }
+  }
+}
 </style>

src/views/MessagePage/MeetingDetailModal.vue

@@ -9,7 +9,7 @@
     <!--会议信息begin-->
     <section class="base-info">
       <h3 class="title">会议信息</h3>
-      <a-row :gutter="24">
+      <a-row :gutter="24" class="flex-col">
         <a-col :span="12">
           <label>会议名称：</label>
           <span><j-ellipsis :value="model.meetingName" :length="20"></j-ellipsis></span>
@@ -19,7 +19,7 @@
           <span><j-ellipsis :value="generateMeetingType(model.meetingType)" :length="20"></j-ellipsis></span>
         </a-col>
       </a-row>
-      <a-row :gutter="24">
+      <a-row :gutter="24" class="flex-col">
         <a-col :span="12">
           <label>召开时间：</label>
           <span>{{model.startTime + '~' + model.endTime}}</span>
@@ -29,7 +29,7 @@
           <span><j-ellipsis :value="model.particularYear" :length="20"></j-ellipsis></span>
         </a-col>
       </a-row>
-      <a-row :gutter="24">
+      <a-row :gutter="24" class="flex-col">
         <a-col :span="12">
           <label>召开地点：</label>
           <span><j-ellipsis :value="model.venue + '/' + model.address"></j-ellipsis></span>
@@ -39,17 +39,17 @@
           <span><j-ellipsis :value="model.directorName" :length="20"></j-ellipsis></span>
         </a-col>
       </a-row>
-      <a-row :gutter="24">
+      <a-row :gutter="24" class="flex-col">
         <a-col :span="12">
           <label>报名截止时间：</label>
           <span><j-ellipsis :value="model.registerDeadline" :length="20"></j-ellipsis></span>
         </a-col>
         <a-col :span="12">
           <label>会议通知：</label>
-          <span><preview-file style="display: inline-block" :file-id="model.meetingFiles"></preview-file></span>
+          <span><preview-file style="width: 80%" :file-id="model.meetingFiles"></preview-file></span>
         </a-col>
       </a-row>
-      <a-row :gutter="24">
+      <a-row :gutter="24" class="flex-col">
         <a-col :span="24">
           <label>会议内容：</label>
           <span><j-ellipsis :value="model.meetingContent" :length="20"></j-ellipsis></span>
@@ -60,14 +60,14 @@
     <!--报名信息begin-->
     <section class="base-info">
       <h3 class="title">报名信息</h3>
-      <a-row :gutter="24">
+      <a-row :gutter="24" class="flex-col">
         <a-col :span="12">
           <label>参会单位：</label>
           <span><j-ellipsis :value="situationInfo.companyName" :length="20"></j-ellipsis></span>
         </a-col>
 
       </a-row>
-      <a-row :gutter="24">
+      <a-row :gutter="24" class="flex-col">
         <a-col :span="12">
           <label>参会人：</label>
           <span><j-ellipsis :value="situationInfo.companyContactName" :length="20"></j-ellipsis></span>
@@ -77,7 +77,7 @@
           <span><j-ellipsis :value="situationInfo.identity_dictText" :length="20"></j-ellipsis></span>
         </a-col>
       </a-row>
-      <a-row :gutter="24">
+      <a-row :gutter="24" class="flex-col">
 <!--        需求沟通去掉性别-->
 <!--        <a-col :span="12">-->
 <!--          <label>性别：</label>-->
@@ -92,14 +92,14 @@
           <span><j-ellipsis :value="situationInfo.payMode_dictText" :length="20"></j-ellipsis></span>
         </a-col>
       </a-row>
-      <a-row :gutter="24">
+      <a-row :gutter="24" class="flex-col">
         <a-col :span="12">
           <label>需要发票：</label>
           <span><j-ellipsis :value="situationInfo.needInvoice_dictText" :length="20"></j-ellipsis></span>
         </a-col>
       </a-row>
 <!--      缴费方式为打包时候 不显示 -->
-      <a-row :gutter="24" v-if="situationInfo.payMode !== 3">
+      <a-row :gutter="24" v-if="situationInfo.payMode !== 3" class="flex-col">
         <a-col :span="12">
           <label>发票邮寄地址：</label>
           <span><j-ellipsis :value="situationInfo.postContactAddress" :length="20"></j-ellipsis></span>
@@ -114,7 +114,7 @@
     <!--会议资料begin-->
     <section class="base-info">
       <h3 class="title">会议资料</h3>
-      <a-row :gutter="24">
+      <a-row :gutter="24" class="flex-col">
         <a-col :span="12">
           <label>会议资料：</label>
           <span><preview-file :file-id="model.meetingData"></preview-file></span>
@@ -376,6 +376,34 @@ export default {
 </script>
 
 <style scoped lang="less">
+
+.info {
+  .ant-col {
+    span {
+      display: inline-block;
+      word-break: keep-all;
+      white-space: nowrap;
+      max-width: calc(100% - 100px);
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+//会议内容、备注的样式
+.info-textarea {
+  display: flex;
+
+  label {
+    flex-shrink: 0;
+  }
+}
+
+.flex-col {
+  .ant-col {
+    display: flex;
+  }
+}
 .ant-row {
   margin: 12px;
 }
@@ -385,6 +413,7 @@ h3 {
 }
 
 label {
+  min-width: 80px;
   color: #666;
 }
 

src/views/MessagePage/UploadMeetingCertificateModal.vue

@@ -290,6 +290,7 @@ export default {
     display: flex;
   }
 }
+
 .ant-row {
   margin: 12px;
 }