diff --git a/src/assets/css/components/components/charts/panel.scss b/src/assets/css/components/components/charts/panel.scss index cc9954e5..5498cc2d 100644 --- a/src/assets/css/components/components/charts/panel.scss +++ b/src/assets/css/components/components/charts/panel.scss @@ -804,6 +804,73 @@ } } } +.cn-chart__single-value.cn-chart__single-value--icon-right--color { + display: flex; + flex-direction: row-reverse; + justify-content: space-around; + align-items: center; + + .single-value__content { + display: flex; + height: 100%; + width: 100%; + flex-direction: row-reverse; + justify-content: space-between; + align-items: center; + + .single-value-icon__box { + padding-right: 30px; + .single-value__icon { + border-radius: 50%; + position: relative; + margin-right: 7.5%; + margin-top: 30%; + + .cn-icon-svg { + width: 50px; + height: 50px; + vertical-align: middle; + fill: currentColor; + overflow: hidden; + } + + i { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + font-size: 24px; + } + } + } + + .single-value__data{ + display: flex; + height: 100%; + flex-direction: column; + padding-left: 20px; + + .content__title { + display: flex; + align-items: end; + height: 50%; + font-size: 16px; + color: #666666; + padding-bottom: 5px; + } + .content__data { + display: flex; + padding-top: 5%; + height: 50%; + flex: auto; + font-size: 24px; + color: #333333; + font-weight: bold; + } + } + + } +} .cn-chart__single-value.cn-chart__single-value--chart { display: flex; padding: 13px 20px; diff --git a/src/assets/css/font/iconfont.css b/src/assets/css/font/iconfont.css index b4b15ee1..9a375d7c 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=1639404354758') format('woff2'), - url('iconfont.woff?t=1639404354758') format('woff'), - url('iconfont.ttf?t=1639404354758') format('truetype'); + src: url('iconfont.woff2?t=1640662054649') format('woff2'), + url('iconfont.woff?t=1640662054649') format('woff'), + url('iconfont.ttf?t=1640662054649') format('truetype'); } .cn-icon { @@ -13,6 +13,23 @@ -moz-osx-font-smoothing: grayscale; } + +.cn-icon-mining-machine:before { + content: "\e758"; +} + +.cn-icon-percentage:before { + content: "\e759"; +} + +.cn-icon-mining-pool:before { + content: "\e75a"; +} + +.cn-icon-mining-traffic:before { + content: "\e75b"; +} + .cn-icon-entity-alert:before { content: "\e755"; } diff --git a/src/assets/css/font/iconfont.js b/src/assets/css/font/iconfont.js new file mode 100644 index 00000000..4205b7c0 --- /dev/null +++ b/src/assets/css/font/iconfont.js @@ -0,0 +1 @@ +!(function (c) { let a; let l; let h; let o; let i; let m = ''; var t = (t = document.getElementsByTagName('script'))[t.length - 1].getAttribute('data-injectcss'); const v = function (c, a) { a.parentNode.insertBefore(c, a) }; if (t && !c.__iconfont__svg__cssinject__) { c.__iconfont__svg__cssinject__ = !0; try { document.write('') } catch (c) { console && console.log(c) } } function z () { i || (i = !0, h()) } function n () { try { o.documentElement.doScroll('left') } catch (c) { return void setTimeout(n, 50) }z() }a = function () { let c, a; (a = document.createElement('div')).innerHTML = m, m = null, (c = a.getElementsByTagName('svg')[0]) && (c.setAttribute('aria-hidden', 'true'), c.style.position = 'absolute', c.style.width = 0, c.style.height = 0, c.style.overflow = 'hidden', a = c, (c = document.body).firstChild ? v(a, c.firstChild) : c.appendChild(a)) }, document.addEventListener ? ~['complete', 'loaded', 'interactive'].indexOf(document.readyState) ? setTimeout(a, 0) : (l = function () { document.removeEventListener('DOMContentLoaded', l, !1), a() }, document.addEventListener('DOMContentLoaded', l, !1)) : document.attachEvent && (h = a, o = c.document, i = !1, n(), o.onreadystatechange = function () { o.readyState == 'complete' && (o.onreadystatechange = null, z()) }) }(window)) diff --git a/src/assets/css/font/iconfont.ttf b/src/assets/css/font/iconfont.ttf index 5579156b..d71527db 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 73d6c093..e1e393d9 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 6b7844bb..1a428a6f 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 ef39e224..adf34fbe 100644 --- a/src/components/charts/ChartSingleValue.vue +++ b/src/components/charts/ChartSingleValue.vue @@ -1,7 +1,7 @@