diff --git a/src/assets/css/common.scss b/src/assets/css/common.scss index 6f57cd54..dc43eb28 100644 --- a/src/assets/css/common.scss +++ b/src/assets/css/common.scss @@ -12,6 +12,7 @@ body { margin: 0 !important; padding: 0 !important; cursor: default !important; + overflow: hidden; } /*---滚动条默认显示样式--*/ @@ -53,3 +54,9 @@ th *:first-letter, .header__operations *:first-letter { text-transform: capitalize; } + +.outer-box { + padding: 10px; + height: 100%; + width: 100%; +} diff --git a/src/assets/css/font/iconfont.css b/src/assets/css/font/iconfont.css index 9cc486f4..02014022 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=1624011302849') format('woff2'), - url('iconfont.woff?t=1624011302849') format('woff'), - url('iconfont.ttf?t=1624011302849') format('truetype'); + src: url('iconfont.woff2?t=1625552111572') format('woff2'), + url('iconfont.woff?t=1625552111572') format('woff'), + url('iconfont.ttf?t=1625552111572') format('truetype'); } .cn-icon { @@ -13,6 +13,30 @@ -moz-osx-font-smoothing: grayscale; } +.cn-icon-ip:before { + content: "\e73d"; +} + +.cn-icon-app:before { + content: "\e73e"; +} + +.cn-icon-domain:before { + content: "\e73f"; +} + +.cn-icon-cloud:before { + content: "\e73c"; +} + +.cn-icon-user:before { + content: "\e73a"; +} + +.cn-icon-pin:before { + content: "\e73b"; +} + .cn-icon-view:before { content: "\e702"; } @@ -165,7 +189,7 @@ content: "\e714"; } -.cn-icon-entitles:before { +.cn-icon-entities:before { content: "\e715"; } diff --git a/src/assets/css/font/iconfont.json b/src/assets/css/font/iconfont.json deleted file mode 100644 index 534813d3..00000000 --- a/src/assets/css/font/iconfont.json +++ /dev/null @@ -1,310 +0,0 @@ -{ - "id": "2614877", - "name": "Cyber Narrator", - "font_family": "cn-icon", - "css_prefix_text": "cn-icon-", - "description": "", - "glyphs": [ - { - "icon_id": "20712322", - "name": "view", - "font_class": "view1", - "unicode": "e702", - "unicode_decimal": 59138 - }, - { - "icon_id": "21907756", - "name": "更多操作1", - "font_class": "more3", - "unicode": "e739", - "unicode_decimal": 59193 - }, - { - "icon_id": "16827143", - "name": "编辑", - "font_class": "edit", - "unicode": "e68c", - "unicode_decimal": 59020 - }, - { - "icon_id": "16827146", - "name": "删除", - "font_class": "delete", - "unicode": "e68f", - "unicode_decimal": 59023 - }, - { - "icon_id": "21119423", - "name": "更 多", - "font_class": "more1", - "unicode": "e677", - "unicode_decimal": 58999 - }, - { - "icon_id": "16827151", - "name": "设置", - "font_class": "gear", - "unicode": "e694", - "unicode_decimal": 59028 - }, - { - "icon_id": "21209541", - "name": "Add", - "font_class": "add", - "unicode": "e738", - "unicode_decimal": 59192 - }, - { - "icon_id": "22325159", - "name": "向上", - "font_class": "xiangshang", - "unicode": "e732", - "unicode_decimal": 59186 - }, - { - "icon_id": "22325160", - "name": "向下", - "font_class": "xiangxia", - "unicode": "e737", - "unicode_decimal": 59191 - }, - { - "icon_id": "22324980", - "name": "左箭头", - "font_class": "arrow-left", - "unicode": "e735", - "unicode_decimal": 59189 - }, - { - "icon_id": "22324981", - "name": "右箭头", - "font_class": "arrow-right", - "unicode": "e736", - "unicode_decimal": 59190 - }, - { - "icon_id": "22320764", - "name": "id", - "font_class": "id", - "unicode": "e734", - "unicode_decimal": 59188 - }, - { - "icon_id": "22318866", - "name": "地理位置", - "font_class": "position", - "unicode": "e72e", - "unicode_decimal": 59182 - }, - { - "icon_id": "22318867", - "name": "DNS", - "font_class": "dns", - "unicode": "e72f", - "unicode_decimal": 59183 - }, - { - "icon_id": "22318868", - "name": "子分类", - "font_class": "sub-category", - "unicode": "e730", - "unicode_decimal": 59184 - }, - { - "icon_id": "22318869", - "name": "风险", - "font_class": "risk", - "unicode": "e731", - "unicode_decimal": 59185 - }, - { - "icon_id": "22318871", - "name": "类别", - "font_class": "category", - "unicode": "e733", - "unicode_decimal": 59187 - }, - { - "icon_id": "22292878", - "name": "告警", - "font_class": "alert", - "unicode": "e72d", - "unicode_decimal": 59181 - }, - { - "icon_id": "22292845", - "name": "下拉", - "font_class": "dropdown", - "unicode": "e724", - "unicode_decimal": 59172 - }, - { - "icon_id": "22292846", - "name": "下载", - "font_class": "download", - "unicode": "e725", - "unicode_decimal": 59173 - }, - { - "icon_id": "22292847", - "name": "选中", - "font_class": "check", - "unicode": "e726", - "unicode_decimal": 59174 - }, - { - "icon_id": "22292848", - "name": "刷新", - "font_class": "refresh", - "unicode": "e727", - "unicode_decimal": 59175 - }, - { - "icon_id": "22292849", - "name": "中英文", - "font_class": "language", - "unicode": "e728", - "unicode_decimal": 59176 - }, - { - "icon_id": "22292850", - "name": "更多", - "font_class": "more", - "unicode": "e729", - "unicode_decimal": 59177 - }, - { - "icon_id": "22292851", - "name": "样式", - "font_class": "style", - "unicode": "e72a", - "unicode_decimal": 59178 - }, - { - "icon_id": "22292852", - "name": "展开", - "font_class": "expand", - "unicode": "e72b", - "unicode_decimal": 59179 - }, - { - "icon_id": "22292853", - "name": "最大化", - "font_class": "full-screen", - "unicode": "e72c", - "unicode_decimal": 59180 - }, - { - "icon_id": "22292732", - "name": "重传", - "font_class": "upload", - "unicode": "e71f", - "unicode_decimal": 59167 - }, - { - "icon_id": "22292733", - "name": "丢包率", - "font_class": "package-loss", - "unicode": "e720", - "unicode_decimal": 59168 - }, - { - "icon_id": "22292734", - "name": "HTTP", - "font_class": "http", - "unicode": "e721", - "unicode_decimal": 59169 - }, - { - "icon_id": "22292735", - "name": "时间", - "font_class": "time", - "unicode": "e722", - "unicode_decimal": 59170 - }, - { - "icon_id": "22292736", - "name": "SSL", - "font_class": "ssl", - "unicode": "e723", - "unicode_decimal": 59171 - }, - { - "icon_id": "22292709", - "name": "根域名", - "font_class": "root-domain", - "unicode": "e71d", - "unicode_decimal": 59165 - }, - { - "icon_id": "22292704", - "name": "DOH域名", - "font_class": "doh-domain", - "unicode": "e71a", - "unicode_decimal": 59162 - }, - { - "icon_id": "22290483", - "name": "递归域名", - "font_class": "recursive-domain", - "unicode": "e71b", - "unicode_decimal": 59163 - }, - { - "icon_id": "22290484", - "name": "权威域名", - "font_class": "authoritative-domain", - "unicode": "e71c", - "unicode_decimal": 59164 - }, - { - "icon_id": "22290486", - "name": "顶级域名", - "font_class": "top-level-domain", - "unicode": "e71e", - "unicode_decimal": 59166 - }, - { - "icon_id": "22290435", - "name": "Dashboard", - "font_class": "dashboard", - "unicode": "e714", - "unicode_decimal": 59156 - }, - { - "icon_id": "22290436", - "name": "Entitles", - "font_class": "entitles", - "unicode": "e715", - "unicode_decimal": 59157 - }, - { - "icon_id": "22290437", - "name": "Incidents", - "font_class": "incidents", - "unicode": "e716", - "unicode_decimal": 59158 - }, - { - "icon_id": "22290438", - "name": "Artifacts Brower", - "font_class": "artifacts-brower", - "unicode": "e717", - "unicode_decimal": 59159 - }, - { - "icon_id": "22290439", - "name": "Setting", - "font_class": "setting", - "unicode": "e718", - "unicode_decimal": 59160 - }, - { - "icon_id": "22290440", - "name": "Reports", - "font_class": "reports", - "unicode": "e719", - "unicode_decimal": 59161 - } - ] -} diff --git a/src/assets/css/font/iconfont.ttf b/src/assets/css/font/iconfont.ttf index 8da4c02d..38aefeea 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 9291228c..cdb432e0 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 3003be31..0101dc46 100644 Binary files a/src/assets/css/font/iconfont.woff2 and b/src/assets/css/font/iconfont.woff2 differ diff --git a/src/components/charts/ChartSingleValue.vue b/src/components/charts/ChartSingleValue.vue index f7566bee..65561fdf 100644 --- a/src/components/charts/ChartSingleValue.vue +++ b/src/components/charts/ChartSingleValue.vue @@ -1,7 +1,7 @@ @@ -22,7 +22,8 @@ export default { name: 'ChartSingleValue', props: { - type: Number + type: Number, + icon: String }, computed: { singleValueClass () { diff --git a/src/components/charts/chart-options.js b/src/components/charts/chart-options.js index 8cc78fc4..47e9dcea 100644 --- a/src/components/charts/chart-options.js +++ b/src/components/charts/chart-options.js @@ -6,7 +6,10 @@ import { format } from 'echarts' import { shortFormatter } from './chartFormatter' import _ from 'lodash' -export const chartColor = ['#73A0FA', '#73DEB3', '#F7C739', '#EB7E65', '#FFAB67', '#A285D2', '#FFA8CB'] +export const chartColor = ['#5370C6', '#90CC74', '#FAC858', '#EE6666', + '#73BFDE', '#3BA172', '#FC8452', '#9960B4', + '#E97CCC', '#FEA69E', '#0F8AB2', '#57CBAC', + '#5888BC', '#63B6AC', '#EDC6B2', '#D5746B'] export function getChartColor (index) { return chartColor[index % chartColor.length] } diff --git a/src/components/charts/panel.scss b/src/components/charts/panel.scss index d592682c..5e1b04a7 100644 --- a/src/components/charts/panel.scss +++ b/src/components/charts/panel.scss @@ -55,21 +55,18 @@ } &>.cn-chart__single-value.cn-chart__single-value--icon-left { display: flex; - justify-content: center; align-items: center; - grid-template-columns:(5,200px); - .single-value-icon__box{ - height: 70px; - flex: 4; + .single-value-icon__box { display: flex; - justify-content: space-around; align-items: center; - + justify-content: center; + flex: 0 0 40%; } .single-value__icon { - margin-right: 7.5%; + display: flex; + justify-content: center; width: 72px; height: 72px; background-color: $--chart-single-value-icon-background-color; @@ -77,18 +74,17 @@ i { display: flex; - justify-content: space-around; align-items: center; - margin-top: 25px; font-size: 28px; color: $--color-primary; } } .single-value__content { - flex: 6; display: flex; flex-direction: column; + max-width: 60%; + padding-right: 10px; .content__data { padding-bottom: 7%; @@ -97,7 +93,6 @@ font-weight: bold; } .content__title { - width: 206px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; diff --git a/src/components/entities/entities.scss b/src/components/entities/entities.scss new file mode 100644 index 00000000..adcb8d33 --- /dev/null +++ b/src/components/entities/entities.scss @@ -0,0 +1,10 @@ +.cn-entities { + display: grid; + grid-template-rows: 32px auto; + grid-template-columns: 250px auto; + grid-gap: 10px 20px; + padding: 20px; + height: 100%; + width: 100%; + background-color: #fff; +} \ No newline at end of file diff --git a/src/components/layout/LeftMenu.vue b/src/components/layout/LeftMenu.vue index 7ed67c39..ac0b7b47 100644 --- a/src/components/layout/LeftMenu.vue +++ b/src/components/layout/LeftMenu.vue @@ -21,7 +21,7 @@ @select="jump">