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

feat: entity列表（部分）、css架构更改

Browse Source
This commit is contained in:
chenjinsong
2021-12-14 16:42:45 +08:00
parent 4ef3ec5a84
commit 6623f6df65
204 changed files with 17245 additions and 1841 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/entities/EntityList.vue
View File

@@ -364,19 +364,3 @@ export default {
}
}
</script>
<style>
.entity__loading {
position: absolute;
height: 100%;
width: 100%;
z-index: 1;
}
.entity__loading i {
position: absolute;
left: calc(50% - 15px);
top: calc(50% - 15px);
font-size: 30px;
color: #aaa;
}
</style>

91
src/components/entities/LeftFilter.vue
View File

@@ -109,94 +109,3 @@ export default {
}
}
</script>
<style lang="scss">
.entity-left-filter {
display: flex;
flex-direction: column;
margin-top: 10px;
width: 100%;
height: 100%;
// border: 1px solid $--right-box-border-color;
overflow: auto;
.filter__header {
background-color: #E1E6ED;
margin-bottom: 10px;
padding-left: 8px;
height: 36px;
line-height: 36px;
color: #666;
font-size: 14px;
}
.filter__body {
display: flex;
flex-direction: column;
height: 100%;
overflow: auto;
.filter__collapse {
.el-collapse-item {
margin-bottom: 10px;
}
.el-collapse-item__header {
padding-left: 15px;
padding-top: 8px;
color: #8FA1BE;
border-bottom: none !important;
}
.collapse-header {
display: flex;
width: 100%;
border-bottom: 1px solid $--content-right-background-color;
}
.collapse-header__icon {
padding-right: 6px;
font-size: 14px;
}
.el-collapse-item__wrap {
padding-top: 14px !important;
.el-collapse-item__content {
padding-bottom: 15px;
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
background-color: $--tree-node-hover-background-color;
}
.el-tree-node.is-expanded, .el-tree-node.is-current {
&>.el-tree-node__content>.filter-item {
font-weight: bold;
}
}
.el-tree-node__content {
height: 30px;
padding-right: 10px;
}
}
.filter-item {
display: flex;
justify-content: space-between;
padding-right: 6px;
width: 100%;
div {
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
}
}
.filter__more {
padding-left: 24px;
line-height: 36px;
color: #8FA1BE;
cursor: pointer;
}
.filter__more.filter__more--disabled {
color: #ccc;
cursor: default;
}
}
}
}
}
</style>

242
src/components/entities/entities.scss
View File

@@ -1,242 +0,0 @@
.cn-entities {
display: grid;
grid-template-rows: 40px auto;
grid-template-columns: 250px auto;
grid-gap: 10px 20px;
padding: 10px;
height: 100%;
width: 100%;
.entity-list {
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
.entity-list__content {
/* display: grid;
grid-template-columns: repeat(auto-fill, var(--entity-width));
grid-auto-flow: row;
grid-auto-rows: var(--entity-height);*/
/* grid-gap: 10px;*/
display: flex;
flex-wrap: wrap;
display: -webkit-flex;
justify-content: flex-start;
border-radius: 2px;
height: calc(100% - 67px);
margin: 10px 0 0 10px;
width: calc(100% - 10px);
overflow: hidden auto;
.cn-entity:hover{
box-shadow: 0 0 10px #ccc;
.content__title{
color: #ffffff !important;
}
.cn-entity__header{
background: #FFFFFF;
}
.header__icon{
background: #8FA1BE;
border: 2px solid #FFFFFF;
}
}
.cn-entity {
box-sizing: border-box;
margin: 0 10px 30px;
width: 328px;
height: 329px;
background: #FFFFFF;
border-radius: 2px;
transition: all .2s;
&:hover .cn-entity__header .header__content {
}
.cn-entity__header {
position: relative;
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
width: 328px;
height: 89px;
box-sizing: border-box;
transition: all .2s;
.header__bottom__line {
width:288px;
height:1px;
border-top:solid 1px #eff2f5;
position: absolute;
top: 88px;
}
.header__icon {
overflow: hidden;
position: absolute;
top: 20px;
left: 20px;
display: flex;
justify-content: center;
justify-items: center;
align-items: center;
width: 52px;
height: 52px;
border-radius: 50%;
background: #e8fbf9;
border: 2px solid #e8fbf9;
i {
font-size: 22px;
color: #23bf9a;
}
}
.header__content {
font-size: 22px;
color: #333333;
font-family: PingFangSC-Medium;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.content__desc{
color: #999999;
width: 200px;
font-size: 12px;
margin-top: 3px;
position: absolute;
top: 50px;
left: 82px;
}
.content__name {
position: absolute;
top: 21px;
left: 82px;
overflow: hidden;
max-width: 200px;
text-overflow: ellipsis;
}
}
}
.cn-entity__body {
overflow: hidden;
padding-top:10px;
font-size: 14px;
position: relative;
height:240px;
.body__row {
display: flex;
align-items: center;
margin: 0 30px;
color: #666666;
padding: 5px 0;
justify-content: left;
}
.body__drawing-box {
position: relative;
height: 100px;
.chart__loading {
top: 0;
height: 100%;
}
}
.body__drawing {
position: absolute;
padding: 10px 30px;
height: 100px;
width: 100%;
}
.body__row-label {
padding-right: 0px;
color: #999999;
font-size: 14px;
font-weight: 400;
white-space: nowrap;
font-family: PingFangSC-Regular;
line-height: 16px;
i {
font-size: 13px;
color:#8FA1BE;
margin-right: 9px;
}
}
.body__row-value {
width: calc(100% - 69px);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #666666;
font-weight: 400;
}
.body__statics {
position: absolute;
bottom: 20px;
display: flex;
width: 100%;
padding: 0 30px;
font-size: 14px;
color: #666666;
.entity-statics-down{
padding-right: 20px;
min-width: 80px;
i {
color:#5881B7;
font-size:14px;
padding-right:6px;
}
}
.entity-statics-up{
padding-right: 20px;
min-width: 80px;;
i {
color: #62B16C;
font-size: 14px;
padding-right: 6px;
}
}
.body__detail {
cursor: pointer;
font-size: 14px;
color: #8FA1BE;
position: absolute;
right: 30px;
}
}
}
}
}
.entity-list__pagination {
display: flex;
justify-content: center;
align-items: flex-end;
margin-top: 23px;
.el-pager {
.btn-quicknext + li {
display: none;
}
}
}
}
}
.ip-green {
color: #23BF9A;
}
.domain-blue {
color: #0290FF;
}
.app-orange {
color: #FFA200;
}