diff --git a/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss b/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss index d0e97292..a4a0752d 100644 --- a/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss +++ b/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss @@ -12,10 +12,10 @@ height: 350px; &.overview-map--ip { - height: 300px; + height: 210px; } &.overview-map--app { - height: 325px; + height: 260px; } .cn-chart { height: 100%; @@ -123,39 +123,9 @@ } .overview__content.domain__content { - .overview__tags.domain__tags.overview__ip-tags,.overview__tags.domain__tags.overview__app-tags { - max-width: 1200px; - .overview__domain-more-tabs.show-more-app { - z-index: 1; - position: absolute; - right: -92px; - top: -180px; - } - .overview__domain-more-tabs.show-more-ip { - z-index: 1; - position: absolute; - top: -180px; - right: -92px; - } - } - .overview__tags.domain__tags.overview__domain-tags { - max-width: 1500px; - .overview__domain-more-tabs.show-more-app { - z-index: 1; - position: absolute; - top: -180px; - right: -92px; - } - .overview__domain-more-tabs.show-more-ip { - z-index: 1; - position: absolute; - top: -180px; - right: -92px; - } - } .overview__tags.domain__tags { flex-direction: column; - align-items: baseline; + width: 70%; .overview__domain-tabs { display: flex; margin: 0 0 8px 0; @@ -190,16 +160,18 @@ border-radius: 15px; } .overview__domain-btn { - background-color: #EFF6FE; - width: 44px; - height: 24px; - border-radius: 15px; - color: #3976CB; - text-align: center; - margin: 4px 12px 0 0; - padding: 6px 15px; - line-height: .3; - cursor: pointer; + .overview__domain-more { + background-color: #EFF6FE; + width: 44px; + height: 24px; + border-radius: 15px; + color: #3976CB; + text-align: center; + margin: 4px 12px 0 0; + padding: 6px 15px; + line-height: .3; + cursor: pointer; + } position: relative; } .overview__domain-more-tabs { @@ -210,6 +182,10 @@ box-shadow: 0 3px 6px -4px rgba(0,0,0,0.12), 0 6px 16px 0 rgba(0,0,0,0.08), 0 9px 28px 8px rgba(0,0,0,0.05); border-radius: 2px; padding: 5px; + z-index: 1; + position: absolute; + right: -80px; + top: -180px; .domain-more-tab { height: 24px; padding: 6px 12px; diff --git a/src/assets/css/components/views/entityExplorer/entityList/row.scss b/src/assets/css/components/views/entityExplorer/entityList/row.scss index 28e1f120..80c6298c 100644 --- a/src/assets/css/components/views/entityExplorer/entityList/row.scss +++ b/src/assets/css/components/views/entityExplorer/entityList/row.scss @@ -30,6 +30,7 @@ } .cn-entity__case { flex: 1; + overflow: hidden; display: flex; flex-wrap: wrap; padding: 16px 0; @@ -114,6 +115,7 @@ .cn-entity__detail-overview { flex-basis: 100%; padding: 0 10px; + overflow: hidden; .el-divider { background-color: #EFF2F5; diff --git a/src/mixins/relatedServer.js b/src/mixins/relatedServer.js index 1609f776..5c1ff8c9 100644 --- a/src/mixins/relatedServer.js +++ b/src/mixins/relatedServer.js @@ -9,7 +9,8 @@ export default { relationshipShowMoreOne: false, // 控制弹框的展示隐藏 relationshipShowMoreTow: false, // 控制弹框的展示隐藏 relationshipMoreDataOne: [], // 展示所有 - relationshipMoreDataTow: [] // 展示所有 + relationshipMoreDataTow: [], // 展示所有 + timer: null } }, methods: { @@ -75,6 +76,16 @@ export default { // 展示当前弹框是,隐藏其他弹框 this.relationshipShowMoreOne = false } + }, + mouseout () { + this.timer = setTimeout(() => { + this.relationshipShowMoreTow = false + this.relationshipShowMoreOne = false + }, 300) } - } + }, + beforeDestroy () { + // 移除定时器 + clearInterval(this.timer) + }, } diff --git a/src/views/entityExplorer/entityList/detailOverview/App.vue b/src/views/entityExplorer/entityList/detailOverview/App.vue index 940e2f16..e078b6fa 100644 --- a/src/views/entityExplorer/entityList/detailOverview/App.vue +++ b/src/views/entityExplorer/entityList/detailOverview/App.vue @@ -51,7 +51,7 @@
{{$t('overall.relationship')}}
-
+
@@ -62,9 +62,9 @@ {{item.domain}}
-
-
...
-
+
+
...
+
{{item.domain}}
@@ -81,9 +81,9 @@ {{item.ip}}
-
-
...
-
+
+
...
+
{{item.ip}}
diff --git a/src/views/entityExplorer/entityList/detailOverview/Domain.vue b/src/views/entityExplorer/entityList/detailOverview/Domain.vue index 6ce0ba29..31651225 100644 --- a/src/views/entityExplorer/entityList/detailOverview/Domain.vue +++ b/src/views/entityExplorer/entityList/detailOverview/Domain.vue @@ -59,7 +59,7 @@
{{$t('overall.relationship')}}
-
+
@@ -70,9 +70,9 @@ {{item.appName}}
-
-
...
-
+
+
...
+
{{item.appName}}
@@ -89,9 +89,9 @@ {{item.ip}}
-
-
...
-
+
+
...
+
{{item.ip}}
diff --git a/src/views/entityExplorer/entityList/detailOverview/Ip.vue b/src/views/entityExplorer/entityList/detailOverview/Ip.vue index 554a8ab9..24f5ef11 100644 --- a/src/views/entityExplorer/entityList/detailOverview/Ip.vue +++ b/src/views/entityExplorer/entityList/detailOverview/Ip.vue @@ -43,7 +43,7 @@
{{$t('overall.relationship')}}
-
+
@@ -54,9 +54,9 @@ {{item.domain}}
-
-
...
-
+
+
...
+
{{item.domain}}
@@ -73,9 +73,9 @@ {{item.appName}}
-
-
...
-
+
+
...
+
{{item.appName}}