style(测试计划): 修改计划报告名太长页面展示问题

--bug=1012014 --user=刘瑞斌 【测试跟踪】—测试名称过长时，报告页面命称超出 需要兼容处理下 https://www.tapd.cn/55049933/s/1131672

frontend/src/business/components/track/report/components/TestPlanDbReport.vue

@@ -11,10 +11,19 @@
       <el-scrollbar>
         <el-row type="flex" class="head-bar">
           <el-col :span="12">
-              <div class="name-edit">
+            <div>
-                <el-button plain size="mini" icon="el-icon-back" @click="handleClose">{{$t('test_track.return')}}
+              <el-button plain size="mini" icon="el-icon-back" @click="handleClose"
-                </el-button>&nbsp;
+                         style="float: left; margin-top: 8px; margin-right: 5px">
-                <span class="title">{{report.name}}</span>
+                {{ $t('test_track.return') }}
+              </el-button>
+              <el-tooltip
+                effect="dark"
+                :content="report.name"
+                placement="bottom">
+                <div class="title">
+                  <span>{{report.name}}</span>
+                </div>
+              </el-tooltip>
             </div>
           </el-col>
           <el-col :span="12" class="head-right">
@@ -24,7 +33,8 @@
           </el-col>
         </el-row>
         <div class="container">
-            <test-plan-report-content v-if="showReport" :is-db="true" :report-id="report.id" :plan-id="report.testPlanId"/>
+          <test-plan-report-content v-if="showReport" :is-db="true" :report-id="report.id"
+                                    :plan-id="report.testPlanId"/>
         </div>
       </el-scrollbar>
     </template>
@@ -34,6 +44,7 @@
 <script>
 
 import TestPlanReportContent from "@/business/components/track/plan/view/comonents/report/detail/TestPlanReportContent";
+
 export default {
   name: "TestPlanDbReport",
   components: {
@@ -47,7 +58,7 @@ export default {
       isTestManagerOrTestUser: false,
       showReport: false,
       originUlr: ''
-    }
+    };
   },
   mounted() {
     this.isTestManagerOrTestUser = true;
@@ -87,7 +98,7 @@ export default {
       this.showDialog = false;
     },
   }
-}
+};
 </script>
 
 <style scoped>
@@ -110,4 +121,13 @@ export default {
   text-align: right;
 }
 
+.title {
+  font-size: 16px;
+  font-weight: 500;
+  margin-top: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-wrap: break-word;
+  white-space: nowrap;
+}
 </style>

frontend/src/business/components/track/report/components/TestPlanReportView.vue

@@ -12,10 +12,19 @@
 
         <el-row type="flex" class="head-bar">
           <el-col :span="12">
-            <div class="name-edit">
+            <div>
-              <el-button plain size="mini" icon="el-icon-back" @click="handleClose">{{$t('test_track.return')}}
+              <el-button plain size="mini" icon="el-icon-back" @click="handleClose"
-              </el-button>&nbsp;
+                         style="float: left; margin-top: 8px; margin-right: 5px">
-              <span class="title">{{report.name}}</span>
+                {{ $t('test_track.return') }}
+              </el-button>
+              <el-tooltip
+                effect="dark"
+                :content="report.name"
+                placement="bottom">
+                <div class="title">
+                  <span>{{report.name}}</span>
+                </div>
+              </el-tooltip>
             </div>
           </el-col>
           <el-col :span="12" class="head-right">
@@ -233,4 +242,13 @@
     text-align: right;
   }
 
+  .title {
+    font-size: 16px;
+    font-weight: 500;
+    margin-top: 0;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    word-wrap: break-word;
+    white-space: nowrap;
+  }
 </style>