CN-501 feat: 响应式方案实施
This commit is contained in:
@@ -5,10 +5,12 @@
|
||||
align-items: center;
|
||||
margin-left: 33px;
|
||||
height: 100%;
|
||||
.box__progress{
|
||||
.box__progress {
|
||||
display: block;
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
.el-progress-circle {
|
||||
height: 80px !important;
|
||||
width: 80px !important;
|
||||
}
|
||||
.el-progress__text span{
|
||||
font-size: 16px;
|
||||
}
|
||||
@@ -26,4 +28,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,7 +10,6 @@
|
||||
.cn-chart__body {
|
||||
flex: auto;
|
||||
display: flex;
|
||||
overflow: hidden auto;
|
||||
|
||||
.el-table {
|
||||
padding: 0 10px;
|
||||
@@ -37,16 +36,19 @@
|
||||
height: calc(100% - 36px) !important;
|
||||
}*/
|
||||
}
|
||||
.cn-chart__body.pie-with-table {
|
||||
flex-basis: 40%;
|
||||
}
|
||||
//.cn-chart__body.pie-with-table {
|
||||
// flex-basis: 60%;
|
||||
//}
|
||||
.cn-chart__footer.pie-with-table {
|
||||
flex-basis: 60%;
|
||||
padding: 10px 30px 30px;
|
||||
overflow: auto;
|
||||
.pie-table .el-table__body-wrapper {
|
||||
height: calc(100% - 40px) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pie-table {
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
|
||||
|
||||
@@ -44,14 +44,14 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 40%;
|
||||
flex: 0 0 100px;
|
||||
}
|
||||
|
||||
.single-value__icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background-color: $--chart-single-value-icon-background-color;
|
||||
border-radius: 50%;
|
||||
|
||||
@@ -66,12 +66,12 @@
|
||||
.single-value__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 60%;
|
||||
width: 200px;
|
||||
padding-right: 10px;
|
||||
|
||||
.content__data {
|
||||
padding-bottom: 7%;
|
||||
font-size: 20px;
|
||||
padding-bottom: 10px;
|
||||
font-size: 18px;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -80,7 +80,7 @@
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
@@ -105,10 +105,11 @@
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
|
||||
.single-value-icon__box {
|
||||
flex: 0 0 80px;
|
||||
flex: 0 0 74px;
|
||||
}
|
||||
|
||||
.single-value__icon {
|
||||
@@ -249,7 +250,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 25%;
|
||||
font-size: 24px;
|
||||
font-size: 18px;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -572,16 +573,15 @@
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: right;
|
||||
margin-right:25px;
|
||||
margin: 0 22px 22px 0;
|
||||
flex: 0 0 80;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.single-value__icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: $--chart-single-value-icon-background-color;
|
||||
border-radius: 50%;
|
||||
|
||||
@@ -601,7 +601,7 @@
|
||||
margin-left:25px;
|
||||
|
||||
.content__data {
|
||||
margin-bottom: 7%;
|
||||
margin-bottom: 5%;
|
||||
font-size: 22px;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
|
||||
@@ -13,6 +13,7 @@
|
||||
|
||||
.el-table {
|
||||
padding: 0 10px;
|
||||
font-size: 14px;
|
||||
.el-table__body-wrapper.is-scrolling-none {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
|
||||
@@ -29,9 +29,8 @@
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
padding: 10px 20px 10px 18px;
|
||||
padding: 0 18px;
|
||||
flex: 0 0 40px;
|
||||
|
||||
font-size: 16px;
|
||||
color: $--color-text-primary;
|
||||
transition: all 0.2s;
|
||||
@@ -170,7 +169,8 @@
|
||||
}
|
||||
.option__select {
|
||||
.el-input__inner {
|
||||
width: 80px;
|
||||
width: 92px;
|
||||
text-align: center;
|
||||
padding-right: 20px;
|
||||
border: none;
|
||||
height: 100%;
|
||||
@@ -335,6 +335,18 @@
|
||||
&>.el-tabs__header {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.el-tabs__nav.is-top {
|
||||
.el-tabs__active-bar {
|
||||
display: none;
|
||||
}
|
||||
.el-tabs__item.is-top {
|
||||
padding: 0;
|
||||
margin: 0 13px;
|
||||
}
|
||||
.el-tabs__item.is-top.is-active {
|
||||
border-bottom: 2px solid #0091ff;
|
||||
}
|
||||
}
|
||||
&>.el-tabs__content {
|
||||
height: calc(100% - 40px);
|
||||
.el-tab-pane {
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
}
|
||||
.explorer-container {
|
||||
display: flex;
|
||||
overflow: hidden auto;
|
||||
overflow: hidden;
|
||||
height: calc(100% - 120px);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user