Authored by wangtao

样式调整

... ... @@ -210,6 +210,15 @@ a {
text-overflow: ellipsis;
white-space: nowrap;
}
.text-overflow-line2{
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
/*下划线*/
.text-link{
text-decoration: underline;
... ...
... ... @@ -71,7 +71,19 @@
style="width: 100px;height: 100px;border-radius: 100px;margin: 0px auto 10px;margin-top: 10px;color: white;line-height: 100px;text-align: center;">
<span>{{item.shortName}}</span>
</div>
<p style="text-align: center;word-break: break-all;padding: 0px 25px;">{{item.taskName}}</p>
<div class="text-overflow-line2 align-center" style="padding: 0px 25px;">
<!--<el-tooltip
effect="light"
placement="top-start">
<template #content>
{{item.taskName}}
</template>
{{item.taskName}}
</el-tooltip>-->
<el-tooltip :content="item.taskName" placement="bottom" effect="light" :disabled="item.isShowTooltip && item.isShowTooltip == true">
<span class="member-label member-span text-hidden" @mouseenter="visibilityChange($event,item)"> {{item.taskName}}</span>
</el-tooltip>
</div>
</div>
</div>
</div>
... ...
... ... @@ -107,6 +107,20 @@ export default {
service.sendEventNormalDialog(emit, proxy.$global, props.faultNo, props.targetType.toLocaleLowerCase(), '',type);
}
const visibilityChange = (e,item) => {
const ev = e.target;
const ev_weight = ev.scrollWidth;
const content_weight = ev.target.offsetWidth;
if (ev_weight > content_weight) {
// 实际宽度 > 可视宽度 文字溢出
item.isShowTooltip = true;
} else {
// 否则为不溢出
item.isShowTooltip = false;
}
}
// 挂载完
Vue.onMounted(() => {
getDialtestList();
... ... @@ -124,7 +138,8 @@ export default {
openBusScenarios,
openKpiList,
getFaultItemValue: service.getFaultItemValue,
openDiagnosticItem
openDiagnosticItem,
visibilityChange
}
}
}
... ...