UNPKG

iep-ui

Version:

An enterprise-class UI design language and Vue-based implementation

278 lines (275 loc) 6.32 kB
@import '../../style/themes/index'; @import '../../style/mixins/index'; @font-face { font-family: 'Microsoft YaHei Bold'; src: url('https://iotobject.rockontrol.com/daqilianfangliankong/iep-ui%2Fone.woff2') format('woff2'); } .@{ant-prefix}-iep-business-block { background: #071e60; margin-bottom: 10px; border-radius: @border-radius-base; padding: 10px; box-sizing: content-box; overflow: hidden; &-header { display: flex; justify-content: space-between; align-items: center; &-left { span { font-family: 'Microsoft YaHei Bold'; color: #00cbff; position: relative; font-weight: bold; font-size: 14px; letter-spacing: 1px; padding: 2px 0 2px 14px; &::before { content: ''; width: 0; height: 90%; border-left: 3.2px solid #00ffd8; border-radius: @border-radius-base; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } } } } &-footer { margin-top: 12px; } &-weather { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; padding: 14px; box-sizing: content-box; gap: 40px; &-item { display: flex; justify-content: flex-start; align-items: center; &-left { position: relative; width: 60px; height: 68px; span { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); font-weight: bold; color: #00ebff; font-size: 22px; } .iep-business-icon { &:first-child { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); } &:last-child { position: absolute; bottom: -12px; svg { width: 60px; height: 50px; } } } } &-right { padding-left: 20px; &-top { span { font-size: 14px; color: #fff; white-space: nowrap; } } &-bottom { margin-top: 12px; display: flex; justify-content: flex-start; align-items: flex-end; .num { font-size: 36px; letter-spacing: 0; margin: var(--margin); color: var(--numberColor); line-height: 0.8; font-family: 'Microsoft YaHei Bold'; font-weight: 600; } .text { font-size: 12px; color: var(--textColor); } } } } } &-rank { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; padding: 14px; box-sizing: content-box; gap: 20px; position: relative; &-empty { grid-template-columns: 1fr; grid-template-rows: 1fr; } &-item { border: 1px solid fade(#00c0ff, 30%); border-radius: @border-radius-base; background: fade(#005cac, 10%); padding: 16px 30px; box-sizing: content-box; display: flex; flex-direction: column; gap: 12px 0; &-cell { display: flex; justify-content: flex-start; align-items: flex-end; } .label { color: #fff; font-size: 14px; display: inline-block; width: 60px; } .number { font-family: 'Microsoft YaHei Bold'; margin-left: 10px; font-weight: 400; font-size: 28px; color: #00ebff; line-height: 0.8; } .unit { font-family: 'Microsoft YaHei Bold'; font-size: 12px; color: #00ebff; margin-left: 4px; } } &-mark { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; overflow: hidden; &-inner { height: 100%; width: 100%; position: relative; } &-circle { width: 88px; height: 88px; position: absolute; top: 50%; left: 50%; border: 1px solid fade(#00c0ff, 30%); background: #071e60; transform: translate(-50%, -50%); border-radius: 50%; display: flex; justify-content: center; align-items: center; } &-row { width: 100%; height: 20px; background: #071e60; position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; } &-column { width: 20px; height: 100%; background: #071e60; position: absolute; left: 50%; transform: translateX(-50%); z-index: 1; } &-core { width: 66px; height: 66px; position: absolute; top: 50%; left: 50%; border: 1px solid fade(#00c0ff, 30%); background: fade(#005cac, 10%); transform: translate(-50%, -50%); border-radius: 50%; z-index: 3; } &-chart { width: 68px; height: 68px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; z-index: 3; svg { width: 68px; height: 68px; } } &-chart { width: 52px; height: 52px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; svg { width: 52px; height: 52px; } } &-line { width: 52px; height: 52px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid fade(#00c0ff, 30%); box-sizing: content-box; z-index: 5; svg { width: 53px; height: 53px; animation: circleRotate infinite linear 1000ms; } } } } } @keyframes circleRotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }