mirror of
https://github.com/didi/KnowStreaming.git
synced 2026-01-14 20:18:31 +08:00
初始化3.0.0版本
This commit is contained in:
zengqiao
@@ -0,0 +1,413 @@
|
||||
.single-cluster-detail {
|
||||
width: 100%;
|
||||
padding-bottom: 10px;
|
||||
|
||||
.cluster-detail {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
|
||||
.left-sider {
|
||||
width: 240px;
|
||||
background: #fff;
|
||||
// height: calc(100vh - 128px);
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.01), 0 3px 6px 3px rgba(0, 0, 0, 0.01), 0 2px 6px 0 rgba(0, 0, 0, 0.03);
|
||||
border-radius: 12px;
|
||||
padding: 24px 16px;
|
||||
|
||||
.title {
|
||||
font-family: @font-family-bold;
|
||||
font-size: 18px;
|
||||
color: #212529;
|
||||
letter-spacing: 0;
|
||||
text-align: justify;
|
||||
line-height: 20px;
|
||||
display: flex;
|
||||
|
||||
.name {
|
||||
max-width: 188px;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
}
|
||||
.edit-icon-box {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
cursor: pointer;
|
||||
.edit-icon {
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
margin-left: 4px;
|
||||
font-size: 16px;
|
||||
color: #74788d;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tag-panel {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0;
|
||||
line-height: 12px;
|
||||
margin-top: 10px;
|
||||
|
||||
.tag {
|
||||
height: 18px;
|
||||
margin-right: 4px;
|
||||
margin-bottom: 4px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
|
||||
&.default {
|
||||
background: #ececf6;
|
||||
color: #495057;
|
||||
}
|
||||
&.balanced {
|
||||
background: rgba(85, 110, 230, 0.1);
|
||||
color: #556ee6;
|
||||
}
|
||||
&.unbalanced {
|
||||
background: rgba(255, 136, 0, 0.1);
|
||||
color: #f58342;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 11px;
|
||||
color: #74788d;
|
||||
text-align: left;
|
||||
line-height: 16px;
|
||||
margin: 12px 0px 16px;
|
||||
max-width: 208px;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.card-panel {
|
||||
.card-item {
|
||||
width: 208px;
|
||||
background: #f8f9fe;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
.title {
|
||||
font-size: 14px;
|
||||
color: #212529;
|
||||
letter-spacing: 0;
|
||||
text-align: justify;
|
||||
line-height: 22px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.count {
|
||||
margin-bottom: 12px;
|
||||
|
||||
.num {
|
||||
font-family: DIDIFD-Regular;
|
||||
font-size: 40px;
|
||||
color: #212529;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-size: 16px;
|
||||
color: #212529;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.metric {
|
||||
font-size: 11px;
|
||||
color: #74788d;
|
||||
letter-spacing: 0;
|
||||
text-align: justify;
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 4px;
|
||||
|
||||
.icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
|
||||
&.green {
|
||||
color: #34c38f;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
color: #ffe4c6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.state-card {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.healthy-percent {
|
||||
font-family: DIDIFD-Regular;
|
||||
font-size: 38px;
|
||||
color: #00c0a2;
|
||||
text-align: center;
|
||||
|
||||
&.less-90 {
|
||||
color: #556ee6;
|
||||
}
|
||||
|
||||
&.no-info {
|
||||
color: #e9e7e7;
|
||||
}
|
||||
|
||||
&.down {
|
||||
font-family: @font-family-bold;
|
||||
font-size: 22px;
|
||||
color: #ff7066;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.healthy-state {
|
||||
margin-left: 14px;
|
||||
margin-top: 8px;
|
||||
|
||||
&-status {
|
||||
font-size: 13px;
|
||||
color: #495057;
|
||||
letter-spacing: 0;
|
||||
line-height: 20px;
|
||||
margin-bottom: 13px;
|
||||
|
||||
.icon {
|
||||
margin-left: 4px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&-btn {
|
||||
font-size: 10px;
|
||||
color: #495057;
|
||||
line-height: 15px;
|
||||
background: #ececf6;
|
||||
border-radius: 4px;
|
||||
padding: 0px 6px;
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.dcloud-divider-horizontal {
|
||||
margin: 16px 4px;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-panel {
|
||||
flex: 1;
|
||||
margin-left: 12px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.change-log-panel {
|
||||
height: 100%;
|
||||
padding: 12px 16px;
|
||||
|
||||
.title {
|
||||
font-family: @font-family-bold;
|
||||
font-size: 14px;
|
||||
color: #212529;
|
||||
letter-spacing: 0.5px;
|
||||
line-height: 22px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
#changelog-scroll-box {
|
||||
height: calc(100% - 34px);
|
||||
overflow: hidden auto;
|
||||
}
|
||||
|
||||
.dcloud-collapse {
|
||||
border: none;
|
||||
background-color: #fff;
|
||||
|
||||
.dcloud-collapse-header {
|
||||
background: #fff;
|
||||
height: 40px;
|
||||
display: block;
|
||||
padding: 0px 0px 8px !important;
|
||||
|
||||
.header {
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
.label {
|
||||
font-size: 13px;
|
||||
color: #212529;
|
||||
max-width: 180px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 9px;
|
||||
height: 5px;
|
||||
color: #74788d;
|
||||
|
||||
.anticon {
|
||||
font-size: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-time {
|
||||
height: 20px;
|
||||
font-size: 10px;
|
||||
color: #74788d;
|
||||
text-align: left;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.dcloud-collapse-header:hover {
|
||||
.label {
|
||||
color: #556ee6;
|
||||
font-family: @font-family-bold;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.dcloud-collapse-content {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.dcloud-collapse-item {
|
||||
border: none;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.dcloud-collapse-item-active {
|
||||
.dcloud-collapse-header {
|
||||
.header {
|
||||
.anticon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dcloud-collapse-content > .dcloud-collapse-content-box {
|
||||
padding: 7px 11px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
|
||||
.log-item {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 10px;
|
||||
color: #74788d;
|
||||
|
||||
.value {
|
||||
color: #212529;
|
||||
max-width: 124px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.dcloud-divider-horizontal {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.page-panel {
|
||||
margin-top: 24px;
|
||||
text-align: center;
|
||||
|
||||
.dcloud-pagination-simple-pager {
|
||||
font-size: 13px;
|
||||
color: #495057;
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
|
||||
input {
|
||||
width: 48px;
|
||||
height: 24px;
|
||||
background: #ececf6;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.dcloud-pagination-simple {
|
||||
.anticon {
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-panel {
|
||||
margin-top: 96px;
|
||||
text-align: center;
|
||||
|
||||
.img {
|
||||
width: 51px;
|
||||
height: 34px;
|
||||
margin-left: 80px;
|
||||
margin-bottom: 7px;
|
||||
background-size: cover;
|
||||
background-image: url('../../assets/empty.png');
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 10px;
|
||||
color: #919aac;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.healthy-drawer-content {
|
||||
.table-form-item {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
.left-text,
|
||||
.right-text {
|
||||
line-height: 27px;
|
||||
}
|
||||
|
||||
.left-text {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.right-text {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.dcloud-form-item {
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user