diff --git a/public/images/cn-logo-medium.svg b/public/images/cn-logo-medium.svg
deleted file mode 100644
index 90d1bb06..00000000
--- a/public/images/cn-logo-medium.svg
+++ /dev/null
@@ -1,31 +0,0 @@
-
-
\ No newline at end of file
diff --git a/public/images/logo-header.svg b/public/images/logo-header.svg
new file mode 100644
index 00000000..ca2acacf
--- /dev/null
+++ b/public/images/logo-header.svg
@@ -0,0 +1,33 @@
+
+
diff --git a/public/images/logo.svg b/public/images/logo.svg
new file mode 100644
index 00000000..de0258ec
--- /dev/null
+++ b/public/images/logo.svg
@@ -0,0 +1,16 @@
+
+
diff --git a/public/index.html b/public/index.html
index 4c7c874f..d559de20 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,7 +4,7 @@
-
+
Cyber Narrator
diff --git a/src/assets/css/components/components/layout/layout.scss b/src/assets/css/components/components/layout/layout.scss
index 74434600..6f49c200 100644
--- a/src/assets/css/components/components/layout/layout.scss
+++ b/src/assets/css/components/components/layout/layout.scss
@@ -1,5 +1,5 @@
.cn-container {
- height: calc(100% - 50px);
+ height: calc(100% - 100px);
background-color: $--content-right-background-color;
width: 100%;
&>div {
@@ -9,85 +9,144 @@
.cn-header {
display: flex;
- height: 50px;
- border-bottom: 1px solid #e2e5ec;
+ flex-direction: column;
+ height: 100px;
- .header__left {
+ .cn-header__banner {
display: flex;
- align-items: center;
- flex-grow: 1;
- .header__left-breadcrumb.el-breadcrumb {
- padding-left: 20px;
- .header__left-breadcrumb-item.el-breadcrumb-item {
- display: inline-block;
- max-width: 300px;
- height: 16px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- }
+ height: 60px;
+ background-color: #233447;
- .shrink-button {
- margin-left: 20px;
- color: #A4ADB5;
- cursor: pointer;
- transition: all linear .4s;
+ .banner__left {
+ display: flex;
+ align-items: center;
+ flex-grow: 1;
+ height: 100%;
- &.shrink-button--collapse {
- transform: rotateY(180deg);
- }
- }
- }
- .header-menu {
- display: flex;
- justify-content: flex-end;
- flex-grow: 1;
+ .shrink-button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 38px;
+ width: 38px;
+ border-radius: 4px;
+ margin-left: 14px;
+ margin-right: 10px;
+ color: #F7F7F7;
+ cursor: pointer;
+ background-color: transparent;
+ transition: all linear .2s;
- .el-dropdown {
- width: 60px;
- text-align: center;
- height: 36px;
- line-height: 50px;
- .el-dialog{
- width: 1000px;
- height: 70px;
- .el-dialog__header{
- .el-dialog__title{
- color: #fff;
- }
- .el-dialog__close{
- color: #fff;
- line-height: 50px;
- font-size: 30px;
- }
+ &.shrink-button--collapse {
+ background-color: #334355;
}
}
}
}
- .header-menu--item {
- color: #778391;
- cursor: pointer;
- transition: color linear .2s;
- i {
- font-size: 18px;
+
+ .cn-header__nav {
+ display: flex;
+ align-items: center;
+ height: 40px;
+ background-color: #f7f7f7;
+ border-bottom: 1px solid #E2E5EC;
+
+ .cn-icon-a-NetworkAnalytics {
+ margin-left: 20px;
+ margin-right: 10px;
+ font-size: 17px;
+ color: #046ECA;
}
}
- .header-menu--item:hover {
- color: #313336;
+ .cn-menu-modal {
+ top: 60px;
+
+ .cn-menu {
+ height: 320px;
+ box-shadow: none;
+
+ .el-drawer__body {
+ display: flex;
+ }
+ .cn-menu__left {
+ flex: 1;
+ padding: 12px 10px 10px 20px;
+ max-width: 290px;
+ border-right: 1px solid #D8D8D8;
+
+ .left-menu {
+ padding: 8px 0;
+ font-size: 14px;
+ color: #575757;
+ transition: all linear .2s;
+
+ &:hover {
+ cursor: pointer;
+ color: #157FF3;
+ }
+ .cn-icon:first-of-type {
+ font-size: 17px;
+ }
+ .cn-icon:last-of-type {
+ display: inline-block;
+ margin-left: 8px;
+ font-size: 12px;
+ transform: scale(0.8);
+ }
+ span {
+ padding-left: 10px;
+ }
+ }
+ }
+ .cn-menu__middle {
+ display: flex;
+ padding: 20px 40px;
+
+ .middle-menus {
+ display: flex;
+ flex-direction: column;
+
+ .middle-menus__header {
+ padding: 8px 0;
+ font-size: 14px;
+ font-weight: bolder;
+ color: #353636;
+ border-bottom: 1px dashed #D8D8D8;
+ }
+ .middle-menus__body {
+ padding-top: 8px;
+ .middle-menu {
+ padding: 5px 0;
+ font-size: 14px;
+ color: #353636;
+
+ &:hover {
+ cursor: pointer;
+ text-decoration: underline;
+ }
+ }
+ }
+ }
+ .middle-menus--network-analytics {
+ width: 440px;
+ }
+ }
+ }
}
+
.personal {
display: flex;
.el-dropdown {
- margin: 0 10px 0 30px;
- height: 36px;
- line-height: 50px;
+ color: #fff;
+ height: 40px;
+ line-height: 60px;
text-align: center;
+ margin: 0 20px 0 10px;
}
.login-user {
- color: #333;
+ color: #fff;
i {
- color: #999;
+ color: #fff;
font-size: 12px;
}
}
@@ -109,144 +168,16 @@
transform: rotateY(180deg);
}
}
- .left-menu--pin-normal{
- }
- .left-menu--pin-reverse{
- }
-}
-.link-title a {
- color: inherit;
- text-decoration: none;
-}
-.cn-breakcrumb {
- padding-left: 15px;
- line-height: 50px;
-
- .el-breadcrumb__item .el-breadcrumb__inner {
- color: #999;
- }
-}
-.entity-selector {
- .el-input__prefix {
- left: 7px !important;
- }
}
.cn-home {
- display: flex;
- height: 100%;
- transition: all .2s;
- .cn-body {
- flex: 1;
- display: flex;
- flex-direction: column;
- width: calc(100% - 240px);
- transition: all .2s;
- }
-}
-
-// el-submenu active字色
-.el-submenu.is-active .el-submenu__title,
-.el-submenu.is-active .el-submenu__title>i,
-.el-menu-item.is-active {
- color: white !important;
-}
-// el-submenu active且open背景色
-.el-submenu__title:not(.is-active):hover, .el-menu-item:not(.is-active):hover, .el-menu-item:not(.is-active):focus {
- background-color: mix($--color-white, $--menu-background-color, 7%) !important;
-}
-.is-active.is-opened {
- .el-submenu__title, .el-menu-item:not(.is-active) {
- background-color: $--menu-hover-background-color !important;
- }
-}
-.el-menu-item {
- overflow: hidden;
- text-overflow: ellipsis;
-
- &.is-active {
- background-color: $--color-primary;
- }
-}
-
-.left-menu {
display: flex;
flex-direction: column;
height: 100%;
- background-color: $--menu-background-color;
-
- .el-menu-item .cn-icon, .el-submenu .cn-icon {
- display: inline-block;
- vertical-align: middle;
- margin-right: 5px;
- width: 24px;
- text-align: center;
- font-size: 18px;
- }
- >.el-menu:not(.el-menu--collapse) {
- width: 240px;
- }
- >.el-menu.menu-list {
- height: calc(100% - 110px);
- border-right: none;
- overflow: auto;
-
- .el-menu-item, .el-submenu__title {
- height: 46px;
- line-height: 46px;
- }
- }
-
- /*---滚动条默认显示样式--*/
- >.el-menu::-webkit-scrollbar-thumb {
- background-color: rgba(255,255,255,.4);
- border-radius: 2px;
- border: none;
- }
- /*---鼠标点击滚动条显示样式--*/
- >.el-menu::-webkit-scrollbar-thumb:hover {
- background-color: rgba(255,255,255,.3);
- border-radius: 2px;
- }
- /*---滚动条大小--*/
- >.el-menu::-webkit-scrollbar {
- width: 6px;
- height: 14px;
- }
- /*---顶部logo---*/
- >.el-menu.header-logo {
- border-right: none;
- >.el-menu-item {
- padding: 13px 0 0 18px !important;
- height: 50px;
- border-right: 1px solid #202F3F;
- background-color: #182534 !important;
-
- .logo {
- display: flex;
-
- img {
- box-shadow: 0 0 2px 0 rgba(0,0,0,0.50);
- }
-
- .system-name {
- padding-left: 8px;
- color: white;
- font-size: 14px;
- letter-spacing: 0;
- line-height: 34px;
- font-weight: bold;
- }
- }
- }
- }
-}
-.el-menu--popup {
- .el-menu-item {
- height: 49px;
- line-height: 49px;
- }
+ width: 100%;
+ transition: all .2s;
}
+
.vue-grid-layout{
transition: none;
}
diff --git a/src/assets/css/components/views/charts2/panel.scss b/src/assets/css/components/views/charts2/panel.scss
index 41cd1a0e..347eb9e0 100644
--- a/src/assets/css/components/views/charts2/panel.scss
+++ b/src/assets/css/components/views/charts2/panel.scss
@@ -9,6 +9,7 @@
.panel__title {
font-size: 24px;
+ line-height: 24px;
font-weight: 900;
color: #353636;
}
diff --git a/src/assets/css/font/iconfont.css b/src/assets/css/font/iconfont.css
index f9a94c68..811ac432 100644
--- a/src/assets/css/font/iconfont.css
+++ b/src/assets/css/font/iconfont.css
@@ -1,8 +1,8 @@
@font-face {
font-family: "cn-icon"; /* Project id 2614877 */
- src: url('iconfont.woff2?t=1657611740064') format('woff2'),
- url('iconfont.woff?t=1657611740064') format('woff'),
- url('iconfont.ttf?t=1657611740064') format('truetype');
+ src: url('iconfont.woff2?t=1657871017803') format('woff2'),
+ url('iconfont.woff?t=1657871017803') format('woff'),
+ url('iconfont.ttf?t=1657871017803') format('truetype');
}
.cn-icon {
@@ -13,27 +13,63 @@
-moz-osx-font-smoothing: grayscale;
}
-.cn-icon-Detection:before {
+.cn-icon-a-SocialNetwork:before {
+ content: "\e79b";
+}
+
+.cn-icon-Video:before {
+ content: "\e79c";
+}
+
+.cn-icon-VoIP:before {
+ content: "\e79d";
+}
+
+.cn-icon-Email:before {
+ content: "\e79e";
+}
+
+.cn-icon-Gaming:before {
+ content: "\e79f";
+}
+
+.cn-icon-a-FileSharing:before {
+ content: "\e7a0";
+}
+
+.cn-icon-Location:before {
+ content: "\e798";
+}
+
+.cn-icon-Events:before {
+ content: "\e799";
+}
+
+.cn-icon-Overview:before {
+ content: "\e79a";
+}
+
+.cn-icon-detection1:before {
content: "\e792";
}
-.cn-icon-Entity:before {
+.cn-icon-entity:before {
content: "\e793";
}
-.cn-icon-Case:before {
+.cn-icon-case:before {
content: "\e794";
}
-.cn-icon-Hunt:before {
+.cn-icon-hunt:before {
content: "\e795";
}
-.cn-icon-Report1:before {
+.cn-icon-report1:before {
content: "\e796";
}
-.cn-icon-a-KnowledgeBase:before {
+.cn-icon-knowledge-base:before {
content: "\e797";
}
diff --git a/src/assets/css/font/iconfont.js b/src/assets/css/font/iconfont.js
index 7c1754c2..5a5ce11b 100644
--- a/src/assets/css/font/iconfont.js
+++ b/src/assets/css/font/iconfont.js
@@ -1 +1 @@
-!(function (a) { let c; let l; let h; let o; let i; let m = ''; var v = (v = document.getElementsByTagName('script'))[v.length - 1].getAttribute('data-injectcss'); const z = function (a, c) { c.parentNode.insertBefore(a, c) }; if (v && !a.__iconfont__svg__cssinject__) { a.__iconfont__svg__cssinject__ = !0; try { document.write('') } catch (a) { console && console.log(a) } } function t () { i || (i = !0, h()) } function n () { try { o.documentElement.doScroll('left') } catch (a) { return void setTimeout(n, 50) }t() }c = function () { let a; let c = document.createElement('div'); c.innerHTML = m, m = null, (c = c.getElementsByTagName('svg')[0]) && (c.setAttribute('aria-hidden', 'true'), c.style.position = 'absolute', c.style.width = 0, c.style.height = 0, c.style.overflow = 'hidden', c = c, (a = document.body).firstChild ? z(c, a.firstChild) : a.appendChild(c)) }, document.addEventListener ? ~['complete', 'loaded', 'interactive'].indexOf(document.readyState) ? setTimeout(c, 0) : (l = function () { document.removeEventListener('DOMContentLoaded', l, !1), c() }, document.addEventListener('DOMContentLoaded', l, !1)) : document.attachEvent && (h = c, o = a.document, i = !1, n(), o.onreadystatechange = function () { o.readyState == 'complete' && (o.onreadystatechange = null, t()) }) }(window))
+!function(a){var c,l,h,o,i,m='',v=(v=document.getElementsByTagName("script"))[v.length-1].getAttribute("data-injectcss"),z=function(a,c){c.parentNode.insertBefore(a,c)};if(v&&!a.__iconfont__svg__cssinject__){a.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(a){console&&console.log(a)}}function t(){i||(i=!0,h())}function n(){try{o.documentElement.doScroll("left")}catch(a){return void setTimeout(n,50)}t()}c=function(){var a,c=document.createElement("div");c.innerHTML=m,m=null,(c=c.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",c=c,(a=document.body).firstChild?z(c,a.firstChild):a.appendChild(c))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(c,0):(l=function(){document.removeEventListener("DOMContentLoaded",l,!1),c()},document.addEventListener("DOMContentLoaded",l,!1)):document.attachEvent&&(h=c,o=a.document,i=!1,n(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,t())})}(window);
diff --git a/src/assets/css/font/iconfont.ttf b/src/assets/css/font/iconfont.ttf
index 3519c6ad..fd962dc4 100644
Binary files a/src/assets/css/font/iconfont.ttf and b/src/assets/css/font/iconfont.ttf differ
diff --git a/src/assets/css/font/iconfont.woff b/src/assets/css/font/iconfont.woff
index bae0ffd4..1f3e22ea 100644
Binary files a/src/assets/css/font/iconfont.woff and b/src/assets/css/font/iconfont.woff differ
diff --git a/src/assets/css/font/iconfont.woff2 b/src/assets/css/font/iconfont.woff2
index 88e90806..229e8071 100644
Binary files a/src/assets/css/font/iconfont.woff2 and b/src/assets/css/font/iconfont.woff2 differ
diff --git a/src/assets/css/themes/common.scss b/src/assets/css/themes/common.scss
index b63bbe6b..03460aa4 100644
--- a/src/assets/css/themes/common.scss
+++ b/src/assets/css/themes/common.scss
@@ -33,6 +33,7 @@ input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
th *:first-letter,
.left-menu *:first-letter,
+.middle-menu *:first-letter,
.option-popper *,
.header__operations *:first-letter {
text-transform: capitalize;
diff --git a/src/assets/img/cn-logo-medium.svg b/src/assets/img/cn-logo-medium.svg
deleted file mode 100644
index 90d1bb06..00000000
--- a/src/assets/img/cn-logo-medium.svg
+++ /dev/null
@@ -1,31 +0,0 @@
-
-
\ No newline at end of file
diff --git a/src/assets/img/logo-header.svg b/src/assets/img/logo-header.svg
new file mode 100644
index 00000000..ca2acacf
--- /dev/null
+++ b/src/assets/img/logo-header.svg
@@ -0,0 +1,33 @@
+
+
diff --git a/src/assets/img/logo.svg b/src/assets/img/logo.svg
new file mode 100644
index 00000000..de0258ec
--- /dev/null
+++ b/src/assets/img/logo.svg
@@ -0,0 +1,16 @@
+
+
diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue
index 723694f9..708459b0 100644
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -1,60 +1,74 @@