add tooltip

src/components/service-info/app-info.vue

@@ -35,17 +35,45 @@
         </div>
         <div class="baseInfo_box">
           <tr class="flex_3">
-            <td>部署来源：{{datas.online_state_name}}</td>
-            <td>业务领域：{{datas.ywly_name}}</td>
-            <td>应用类型：{{datas.type_name}}</td>
+            <td>部署来源：
+              <el-tooltip class="item" effect="dark" :content="datas.online_state_name" placement="top-start">
+                <span>{{datas.online_state_name}}</span>
+              </el-tooltip>
+            </td>
+            <td>业务领域：
+              <el-tooltip class="item" effect="dark" :content="datas.ywly_name" placement="top-start">
+                <span>{{datas.ywly_name}}</span>
+              </el-tooltip>
+            </td>
+            <td>应用类型：
+              <el-tooltip class="item" effect="dark" :content="datas.type_name" placement="top-start">
+                <span>{{datas.type_name}}</span>
+              </el-tooltip>
+            </td>
           </tr>
           <tr class="flex_3">
-            <td>提供组织：{{datas.organization_name}}</td>
-            <td>联系人：{{datas.username}}</td>
-            <td>联系方式：{{datas.phone}}</td>
+            <td>提供组织：
+              <el-tooltip class="item" effect="dark" :content="datas.organization_name" placement="top-start">
+                <span>{{datas.organization_name}}</span>
+              </el-tooltip>
+            </td>
+            <td>联系人：
+              <el-tooltip class="item" effect="dark" :content="datas.username" placement="top-start">
+                <span>{{datas.username}}</span>
+              </el-tooltip>
+            </td>
+            <td>联系方式：
+              <el-tooltip class="item" effect="dark" :content="datas.phone" placement="top-start">
+                <span>{{datas.phone}}</span>
+              </el-tooltip>
+            </td>
           </tr>
           <tr class="flex_3">
-            <td>上线时间：{{helper.dateStringTransform(datas.create_date)}}</td>
+            <td>上线时间：
+              <el-tooltip class="item" effect="dark" :content="helper.dateStringTransform(datas.create_date)" placement="top-start">
+                <span>{{helper.dateStringTransform(datas.create_date)}}</span>
+              </el-tooltip>
+            </td>
           </tr>
         </div>
       </div>
@@ -224,6 +252,9 @@ export default {
 }
 .baseInfo_box .flex_3 td {
   flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .service_base_info {
   padding: 18px;

src/components/service-info/service-info.vue

@@ -56,18 +56,64 @@
         </div>
         <div class="baseInfo_box">
           <tr class="flex_3">
-            <td>服务类型：{{baseInfo.fwlx}}</td>
-            <td>服务领域：{{baseInfo.fwly}}</td>
-            <td>提供组织：{{baseInfo.tgzz}}</td>
+            <td>
+              服务类型：
+              <el-tooltip class="item" effect="dark" :content="baseInfo.fwlx" placement="top-start">
+                <span>{{baseInfo.fwlx}}</span>
+              </el-tooltip>
+            </td>
+            <td>
+              服务领域：
+              <el-tooltip class="item" effect="dark" :content="baseInfo.fwly" placement="top-start">
+                
+                <span>{{baseInfo.fwly}}</span>
+              </el-tooltip>
+            </td>
+            <td>
+              提供组织：
+              <el-tooltip class="item" effect="dark" :content="baseInfo.tgzz" placement="top-start">
+                
+                <span>{{baseInfo.tgzz}}</span>
+              </el-tooltip>
+            </td>
           </tr>
           <tr class="flex_3">
-            <td>联系人：{{baseInfo.lxr}}</td>
-            <td>联系方式：{{baseInfo.lxfs}}</td>
-            <td>发布时间：{{helper.dateStringTransform(baseInfo.fbsj)}}</td>
+            <td>
+              联系人：
+              <el-tooltip class="item" effect="dark" :content="baseInfo.lxr" placement="top-start">
+                
+                <span>{{baseInfo.lxr}}</span>
+              </el-tooltip>
+            </td>
+            <td>
+              联系方式：
+              <el-tooltip class="item" effect="dark" :content="baseInfo.lxfs" placement="top-start">
+                
+                <span>{{baseInfo.lxfs}}</span>
+              </el-tooltip>
+            </td>
+            <td>
+              发布时间：
+              <el-tooltip class="item" effect="dark" :content="helper.dateStringTransform(baseInfo.fbsj)" placement="top-start">
+                
+                <span>{{helper.dateStringTransform(baseInfo.fbsj)}}</span>
+              </el-tooltip>
+            </td>
           </tr>
           <tr class="flex_3">
-            <td>最近更新时间：{{helper.dateStringTransform(baseInfo.zjgxsj)}}</td>
-            <td>服务描述：{{baseInfo.fwms}}</td>
+            <td>
+              最近更新时间：
+              <el-tooltip class="item" effect="dark" :content="helper.dateStringTransform(baseInfo.zjgxsj)" placement="top-start">
+                
+                <span>{{helper.dateStringTransform(baseInfo.zjgxsj)}}</span>
+              </el-tooltip>
+            </td>
+            <td>
+              服务描述：
+              <el-tooltip class="item" effect="dark" :content="baseInfo.fwms" placement="top-start">
+                <span>{{baseInfo.fwms}}</span>
+              </el-tooltip>
+            </td>
             <td></td>
           </tr>
         </div>
@@ -281,6 +327,9 @@ export default {
 }
 .baseInfo_box .flex_3 td {
   flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .service_base_info {
   padding: 18px;