gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复详情下拉关系未能适配浏览器分辨率问题

Browse Source
This commit is contained in:
@changcode
2022-02-18 12:02:07 +08:00
parent ca22b4e312
commit e1be7c7377
6 changed files with 55 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
View File

@@ -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;

2
src/assets/css/components/views/entityExplorer/entityList/row.scss
View File

@@ -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;

15
src/mixins/relatedServer.js
View File

@@ -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)
},
}

14
src/views/entityExplorer/entityList/detailOverview/App.vue
View File

@@ -51,7 +51,7 @@
<div class="overview-item">
<div class="overview__title">{{$t('overall.relationship')}}</div>
<div class="overview__content domain__content">
<div class="overview__tags domain__tags overview__app-tags" ref="relationship">
<div class="overview__tags domain__tags" ref="relationship">
<div class="overview__domain-tabs">
<div class="overview__domain-tab">
<div class="overview__tag domain__tag">
@@ -62,9 +62,9 @@
<span class="tag__desc">{{item.domain}}</span>
</div>
</div>
<div class="overview__domain-btn" @click="more(relationshipDataOne, relationshipShowMoreOne, 1)" v-if="relationshipShowOne">
<div class="overview__domain-more">...</div>
<div class="overview__domain-more-tabs show-more-app" v-if="relationshipShowMoreOne">
<div class="overview__domain-btn">
<div class="overview__domain-more" @click="more(relationshipDataOne, relationshipShowMoreOne, 1)" v-if="relationshipShowOne" @mouseout="mouseout()">...</div>
<div class="overview__domain-more-tabs show-more-list" v-if="relationshipShowMoreOne">
<div class="domain-more-tab" v-for="item in relationshipMoreDataOne" :key="item">
<span v-if="item.domain" :title="item.domain">{{item.domain}}</span>
</div>
@@ -81,9 +81,9 @@
<span class="tag__desc">{{item.ip}}</span>
</div>
</div>
<div class="overview__domain-btn" @click="more(relationshipDataTow, relationshipShowMoreTow, 2)" v-if="relationshipShowTow">
<div class="overview__domain-more">...</div>
<div class="overview__domain-more-tabs show-more-ip" v-if="relationshipShowMoreTow">
<div class="overview__domain-btn">
<div class="overview__domain-more" @click="more(relationshipDataTow, relationshipShowMoreTow, 2)" v-if="relationshipShowTow" @mouseout="mouseout()">...</div>
<div class="overview__domain-more-tabs show-more-list" v-if="relationshipShowMoreTow">
<div class="domain-more-tab" v-for="item in relationshipMoreDataTow" :key="item">
<span v-if="item.ip" :title="item.ip">{{item.ip}}</span>
</div>

14
src/views/entityExplorer/entityList/detailOverview/Domain.vue
View File

@@ -59,7 +59,7 @@
<div class="overview-item">
<div class="overview__title">{{$t('overall.relationship')}}</div>
<div class="overview__content domain__content">
<div class="overview__tags domain__tags overview__domain-tags" ref="relationship">
<div class="overview__tags domain__tags" ref="relationship">
<div class="overview__domain-tabs">
<div class="overview__domain-tab">
<div class="overview__tag domain__tag">
@@ -70,9 +70,9 @@
<span class="tag__desc">{{item.appName}}</span>
</div>
</div>
<div class="overview__domain-btn" @click="more(relationshipDataOne, relationshipShowMoreOne, 1)" v-if="relationshipShowOne">
<div class="overview__domain-more">...</div>
<div class="overview__domain-more-tabs show-more-app" v-if="relationshipShowMoreOne">
<div class="overview__domain-btn">
<div class="overview__domain-more" @click="more(relationshipDataOne, relationshipShowMoreOne, 1)" v-if="relationshipShowOne" @mouseout="mouseout()">...</div>
<div class="overview__domain-more-tabs show-more-list" v-if="relationshipShowMoreOne">
<div class="domain-more-tab" v-for="item in relationshipMoreDataOne" :key="item">
<span v-if="item.appName" :title="item.appName">{{item.appName}}</span>
</div>
@@ -89,9 +89,9 @@
<span class="tag__desc">{{item.ip}}</span>
</div>
</div>
<div class="overview__domain-btn" @click="more(relationshipDataTow, relationshipShowMoreTow, 2)" v-if="relationshipShowTow">
<div class="overview__domain-more">...</div>
<div class="overview__domain-more-tabs show-more-ip" v-if="relationshipShowMoreTow">
<div class="overview__domain-btn">
<div class="overview__domain-more" @click="more(relationshipDataTow, relationshipShowMoreTow, 2)" v-if="relationshipShowTow" @mouseout="mouseout()">...</div>
<div class="overview__domain-more-tabs show-more-list" v-if="relationshipShowMoreTow">
<div class="domain-more-tab" v-for="item in relationshipMoreDataTow" :key="item">
<span v-if="item.ip" :title="item.ip">{{item.ip}}</span>
</div>

14
src/views/entityExplorer/entityList/detailOverview/Ip.vue
View File

@@ -43,7 +43,7 @@
<div class="overview-item">
<div class="overview__title">{{$t('overall.relationship')}}</div>
<div class="overview__content domain__content">
<div class="overview__tags domain__tags overview__ip-tags" ref="relationship">
<div class="overview__tags domain__tags" ref="relationship">
<div class="overview__domain-tabs">
<div class="overview__domain-tab">
<div class="overview__tag domain__tag">
@@ -54,9 +54,9 @@
<span class="tag__desc">{{item.domain}}</span>
</div>
</div>
<div class="overview__domain-btn" @click="more(relationshipDataOne, relationshipShowMoreOne, 1)" v-if="relationshipShowOne">
<div class="overview__domain-more">...</div>
<div class="overview__domain-more-tabs show-more-app" v-if="relationshipShowMoreOne">
<div class="overview__domain-btn">
<div class="overview__domain-more" @click="more(relationshipDataOne, relationshipShowMoreOne, 1)" v-if="relationshipShowOne" @mouseout="mouseout()">...</div>
<div class="overview__domain-more-tabs show-more-list" v-if="relationshipShowMoreOne">
<div class="domain-more-tab" v-for="item in relationshipMoreDataOne" :key="item">
<span v-if="item.domain" :title="item.domain">{{item.domain}}</span>
</div>
@@ -73,9 +73,9 @@
<span class="tag__desc">{{item.appName}}</span>
</div>
</div>
<div class="overview__domain-btn" @click="more(relationshipDataTow, relationshipShowMoreTow, 2)" v-if="relationshipShowTow">
<div class="overview__domain-more">...</div>
<div class="overview__domain-more-tabs show-more-ip" v-if="relationshipShowMoreTow">
<div class="overview__domain-btn">
<div class="overview__domain-more" @click="more(relationshipDataTow, relationshipShowMoreTow, 2)" v-if="relationshipShowTow" @mouseout="mouseout()">...</div>
<div class="overview__domain-more-tabs show-more-list" v-if="relationshipShowMoreTow">
<div class="domain-more-tab" v-for="item in relationshipMoreDataTow" :key="item">
<span v-if="item.appName" :title="item.appName">{{item.appName}}</span>
</div>