优化收件人和抄送人过多不换行

src/views/reportManagement/Testing/components/deliverDetails.vue

@@ -106,11 +106,21 @@
             </div>
             <div class="Layout_flex_start">
               <div class="title-name task-bot">收件人 : </div>
-              <div v-for="(item, index) in details.sendToObject" :key="index" class="task-name"> {{ item.name }} <span v-if="index < details.sendToObject.length - 1"> , </span></div>
+              <div class="flex_start">
+                <div v-for="(item, index) in details.sendToObject" :key="index" class="task-name">
+                  {{ item.name }}
+                  <span v-if="index < details.sendToObject.length - 1"> , </span>
+                </div>
+              </div>
             </div>
             <div class="Layout_flex_start task-bot">
               <div class="title-name">抄送人 : </div>
-              <div v-for="(item, index) in details.sendCcObject" :key="index" class="task-name">{{ item.name }} <span v-if="index < details.sendCcObject.length - 1"> , </span></div>
+              <div class="flex_start">
+                <div v-for="(item, index) in details.sendCcObject" :key="index" class="task-name">
+                  {{ item.name }}
+                  <span v-if="index < details.sendCcObject.length - 1"> , </span>
+                </div>
+              </div>
             </div>
           </el-header>
           <el-main class="report-mains">
@@ -237,6 +247,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.flex_start { // 布局
+  display:flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
 .BackgroundCloth {
 .report-Header {
   margin: 10px 10px 0;

src/views/reportManagement/daily/components/dailyDetails.vue

@@ -30,11 +30,21 @@
             </div>
             <div class="Layout_flex_start task-bot">
               <div class="title-name">收件人 : </div>
-              <div v-for="(item, index) in details.sendToObject" :key="index" class="task-name"> {{ item.name }} <span v-if="index < details.sendToObject.length - 1"> , </span></div>
+              <div class="flex_start">
+                <div v-for="(item, index) in details.sendToObject" :key="index" class="task-name">
+                  {{ item.name }}
+                  <span v-if="index < details.sendToObject.length - 1"> , </span>
+                </div>
+              </div>
             </div>
             <div class="Layout_flex_start task-bot">
               <div class="title-name">抄送人 : </div>
-              <div v-for="(item, index) in details.sendCcObject" :key="index" class="task-name">{{ item.name }} <span v-if="index < details.sendCcObject.length - 1"> , </span></div>
+              <div class="flex_start">
+                <div v-for="(item, index) in details.sendCcObject" :key="index" class="task-name">
+                  {{ item.name }}
+                  <span v-if="index < details.sendCcObject.length - 1"> , </span>
+                </div>
+              </div>
             </div>
           </el-header>
           <el-main class="report-mains">
@@ -129,6 +139,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.flex_start { // 布局
+  display:flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
 .BackgroundCloth {
 .report-Header {
   margin: 10px 10px 0;