refactor: Update style
1. Support style check: stylelint 2. Add stylelint check in lint-staged husky 2. Update styles Change-Id: Id793b0936e4c3ea27ddef0df794d5b711880599f
This commit is contained in:
Jingwei.Zhang
parent
757047a1cb
commit
ce0042945f
15
.stylelintrc.json
Normal file
15
.stylelintrc.json
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"extends": [
|
||||||
|
"stylelint-config-standard",
|
||||||
|
"stylelint-config-css-modules",
|
||||||
|
"stylelint-config-rational-order",
|
||||||
|
"stylelint-config-prettier"
|
||||||
|
],
|
||||||
|
"customSyntax": "postcss-less",
|
||||||
|
"plugins": ["stylelint-order"],
|
||||||
|
"rules": {
|
||||||
|
"no-descending-specificity": null,
|
||||||
|
"at-rule-no-unknown": null,
|
||||||
|
"color-function-notation": "legacy"
|
||||||
|
}
|
||||||
|
}
|
||||||
23
package.json
23
package.json
@ -13,6 +13,7 @@
|
|||||||
"i18n": "grunt",
|
"i18n": "grunt",
|
||||||
"lint": "eslint src --fix --quiet --ext .js,.jsx",
|
"lint": "eslint src --fix --quiet --ext .js,.jsx",
|
||||||
"lint:test": "eslint test --fix --quiet --ext .js",
|
"lint:test": "eslint test --fix --quiet --ext .js",
|
||||||
|
"lint:style": "stylelint --fix \"src/**/*.less\" --custom-syntax postcss-less",
|
||||||
"report:delete-json": "rm -rf test/e2e/results/* || true",
|
"report:delete-json": "rm -rf test/e2e/results/* || true",
|
||||||
"report:delete-html": "rm -rf test/e2e/report || true",
|
"report:delete-html": "rm -rf test/e2e/report || true",
|
||||||
"report:pre": "npm run report:delete-json && npm run report:delete-html && mkdir test/e2e/report",
|
"report:pre": "npm run report:delete-json && npm run report:delete-html && mkdir test/e2e/report",
|
||||||
@ -31,11 +32,15 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"lint-staged": {
|
"lint-staged": {
|
||||||
|
"*.{css,less}": [
|
||||||
|
"stylelint --fix",
|
||||||
|
"git add"
|
||||||
|
],
|
||||||
"*.{js,jsx}": [
|
"*.{js,jsx}": [
|
||||||
"eslint --fix",
|
"eslint --fix",
|
||||||
"git add"
|
"git add"
|
||||||
],
|
],
|
||||||
"*.{html,css,scss,md,json}": [
|
"*.{html,css,scss,less,md,json}": [
|
||||||
"prettier --write",
|
"prettier --write",
|
||||||
"git add"
|
"git add"
|
||||||
]
|
]
|
||||||
@ -103,7 +108,7 @@
|
|||||||
"clean-webpack-plugin": "^1.0.0",
|
"clean-webpack-plugin": "^1.0.0",
|
||||||
"compression-webpack-plugin": "5.0.1",
|
"compression-webpack-plugin": "5.0.1",
|
||||||
"cross-env": "^7.0.3",
|
"cross-env": "^7.0.3",
|
||||||
"css-loader": "^0.28.11",
|
"css-loader": "1.0.1",
|
||||||
"cypress": "6.8.0",
|
"cypress": "6.8.0",
|
||||||
"cypress-downloadfile": "^1.2.1",
|
"cypress-downloadfile": "^1.2.1",
|
||||||
"cypress-file-upload": "^5.0.6",
|
"cypress-file-upload": "^5.0.6",
|
||||||
@ -130,18 +135,24 @@
|
|||||||
"istanbul-lib-coverage": "^3.0.0",
|
"istanbul-lib-coverage": "^3.0.0",
|
||||||
"jest": "^26.6.3",
|
"jest": "^26.6.3",
|
||||||
"jest-enzyme": "^7.1.2",
|
"jest-enzyme": "^7.1.2",
|
||||||
"less": "^3.8.1",
|
"less": "3.13.0",
|
||||||
"less-loader": "^4.1.0",
|
"less-loader": "5.0.0",
|
||||||
"lint-staged": "^11.0.0",
|
"lint-staged": "^11.0.0",
|
||||||
"mochawesome": "^6.2.2",
|
"mochawesome": "^6.2.2",
|
||||||
"mochawesome-merge": "^4.2.0",
|
"mochawesome-merge": "^4.2.0",
|
||||||
"mochawesome-report-generator": "^5.2.0",
|
"mochawesome-report-generator": "^5.2.0",
|
||||||
"postcss-less": "^2.0.0",
|
"postcss-less": "2.0.0",
|
||||||
"postcss-loader": "^3.0.0",
|
"postcss-loader": "3.0.0",
|
||||||
"prettier": "^2.3.0",
|
"prettier": "^2.3.0",
|
||||||
"react-css-modules": "^4.7.7",
|
"react-css-modules": "^4.7.7",
|
||||||
"react-hot-loader": "^4.12.20",
|
"react-hot-loader": "^4.12.20",
|
||||||
"style-loader": "^0.20.3",
|
"style-loader": "^0.20.3",
|
||||||
|
"stylelint": "^14.2.0",
|
||||||
|
"stylelint-config-css-modules": "^2.3.0",
|
||||||
|
"stylelint-config-prettier": "^9.0.3",
|
||||||
|
"stylelint-config-rational-order": "^0.1.2",
|
||||||
|
"stylelint-config-standard": "^24.0.0",
|
||||||
|
"stylelint-order": "^5.0.0",
|
||||||
"terser-webpack-plugin": "4.2.3",
|
"terser-webpack-plugin": "4.2.3",
|
||||||
"url-loader": "^4.1.1",
|
"url-loader": "^4.1.1",
|
||||||
"webpack": "^4.42.1",
|
"webpack": "^4.42.1",
|
||||||
|
|||||||
@ -2,8 +2,8 @@
|
|||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
margin-top: 100px;
|
margin-top: 100px;
|
||||||
border-radius: @border-radius;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
border-radius: @border-radius;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image {
|
.image {
|
||||||
@ -13,26 +13,26 @@
|
|||||||
|
|
||||||
.text {
|
.text {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: top;
|
|
||||||
width: 600px;
|
width: 600px;
|
||||||
margin-left: 60px;
|
margin-left: 60px;
|
||||||
|
vertical-align: top;
|
||||||
|
|
||||||
:global .h1 {
|
:global .h1 {
|
||||||
opacity: 0.4;
|
color: #abb4be;
|
||||||
font-size: 120px;
|
font-size: 120px;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
color: #abb4be;
|
|
||||||
user-select: none;
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
opacity: 0.4;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
text-shadow: 0 4px 8px rgba(36, 46, 66, 0.1);
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: @font-bold;
|
|
||||||
line-height: 1.4;
|
|
||||||
color: @second-title-color;
|
color: @second-title-color;
|
||||||
|
font-weight: @font-bold;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 1.4;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
text-shadow: 0 4px 8px rgba(36, 46, 66, 10%);
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
|||||||
@ -1,11 +1,12 @@
|
|||||||
|
/* stylelint-disable selector-class-pattern */
|
||||||
.ace_editor {
|
.ace_editor {
|
||||||
|
font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
|
||||||
line-height: 20px !important;
|
line-height: 20px !important;
|
||||||
font-family: Monaco, Menlo, Consolas, Courier New, monospace;
|
|
||||||
-webkit-font-smoothing: auto;
|
-webkit-font-smoothing: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ace_editor.ace-chaos {
|
.ace_editor.ace-chaos {
|
||||||
color: #ffffff;
|
color: #fff;
|
||||||
background-color: #242e42;
|
background-color: #242e42;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -22,7 +23,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ace_editor.ace-chaos .ace_keyword {
|
.ace_editor.ace-chaos .ace_keyword {
|
||||||
color: #ffffff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ace_editor.ace-chaos .ace_string {
|
.ace_editor.ace-chaos .ace_string {
|
||||||
@ -38,8 +39,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ace_editor.ace-chaos .ace_indent-guide {
|
.ace_editor.ace-chaos .ace_indent-guide {
|
||||||
border-right: 1px dotted #777;
|
|
||||||
padding: 2px 0;
|
padding: 2px 0;
|
||||||
|
border-right: 1px dotted #777;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ace_editor.ace-chaos .ace_marker-layer .ace_selection {
|
.ace_editor.ace-chaos .ace_marker-layer .ace_selection {
|
||||||
|
|||||||
@ -1,13 +1,14 @@
|
|||||||
@import "~styles/variables";
|
@import '~styles/variables';
|
||||||
|
|
||||||
.confirm-modal {
|
.confirm-modal {
|
||||||
:global {
|
:global {
|
||||||
.ant-modal-confirm-body > .anticon {
|
.ant-modal-confirm-body > .anticon {
|
||||||
font-size: 18px;
|
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.confirm {
|
.confirm {
|
||||||
color: @warn-color !important;
|
color: @warn-color !important;
|
||||||
}
|
}
|
||||||
@ -22,4 +23,4 @@
|
|||||||
|
|
||||||
.warn {
|
.warn {
|
||||||
color: @warn-color !important;
|
color: @warn-color !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,22 +3,22 @@
|
|||||||
@min-space: 8px;
|
@min-space: 8px;
|
||||||
@mid-space: 16px;
|
@mid-space: 16px;
|
||||||
@lg-space: 24px;
|
@lg-space: 24px;
|
||||||
@box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
|
@box-shadow: 0 0 10px 0 rgba(0, 0, 0, 5%);
|
||||||
@topo-line: 1px solid #D2D2D2;
|
@topo-line: 1px solid #d2d2d2;
|
||||||
@resource-box-bg: #fbfdff;
|
@resource-box-bg: #fbfdff;
|
||||||
@resource-box-border: 1px solid #cfe1ff;
|
@resource-box-border: 1px solid #cfe1ff;
|
||||||
|
|
||||||
@success: #57E39B;
|
@success: #57e39b;
|
||||||
@warning: #FEDF40;
|
@warning: #fedf40;
|
||||||
@error: #EB354D;
|
@error: #eb354d;
|
||||||
@link: #0068FF;
|
@link: #0068ff;
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
|
flex: 1;
|
||||||
margin-bottom: @mid-space;
|
margin-bottom: @mid-space;
|
||||||
box-shadow: @box-shadow;
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: @border-radius;
|
border-radius: @border-radius;
|
||||||
flex: 1;
|
box-shadow: @box-shadow;
|
||||||
|
|
||||||
.card-content {
|
.card-content {
|
||||||
padding: @mid-space;
|
padding: @mid-space;
|
||||||
@ -31,9 +31,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.title-help {
|
.title-help {
|
||||||
line-height: 26px;
|
|
||||||
margin-left: @min-space;
|
margin-left: @min-space;
|
||||||
|
line-height: 26px;
|
||||||
}
|
}
|
||||||
|
|
||||||
div {
|
div {
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
@ -42,6 +43,7 @@
|
|||||||
:last-child {
|
:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
.ant-typography {
|
.ant-typography {
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
|
|||||||
@ -1,11 +1,11 @@
|
|||||||
@import "~styles/variables";
|
@import '~styles/variables';
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
padding-top: @body-padding;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
padding-top: @body-padding;
|
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
.ant-spin-nested-loading {
|
.ant-spin-nested-loading {
|
||||||
@ -23,19 +23,18 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.form {
|
.form {
|
||||||
margin-left: @body-padding * 2;
|
|
||||||
margin-right: @body-padding * 2;
|
|
||||||
// padding-top: @body-padding;
|
|
||||||
background-color: #fff;
|
|
||||||
height: calc(100% - 48px);
|
height: calc(100% - 48px);
|
||||||
|
margin-right: @body-padding * 2;
|
||||||
|
margin-left: @body-padding * 2;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
.ant-form-item-label>label {
|
.ant-form-item-label > label {
|
||||||
margin-left: 12px;
|
margin-left: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-form-item-label>.ant-form-item-required {
|
.ant-form-item-label > .ant-form-item-required {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -47,21 +46,21 @@
|
|||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
|
||||||
height: 48px;
|
|
||||||
background-color: #fff;
|
|
||||||
box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.09);
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
height: 48px;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 9%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btns {
|
.btns {
|
||||||
float: right;
|
float: right;
|
||||||
margin-right: 32px;
|
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
|
margin-right: 32px;
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
button {
|
button {
|
||||||
@ -78,44 +77,45 @@
|
|||||||
.form-item-divider {
|
.form-item-divider {
|
||||||
width: 98% !important;
|
width: 98% !important;
|
||||||
min-width: 90% !important;
|
min-width: 90% !important;
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-radio-button-wrapper {
|
.ant-radio-button-wrapper {
|
||||||
color: @color-text-body;
|
color: @color-text-body;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-radio-button-wrapper-disabled {
|
.ant-radio-button-wrapper-disabled {
|
||||||
color: rgba(0, 0, 0, 0.25);
|
color: rgba(0, 0, 0, 25%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tips {
|
.tips {
|
||||||
padding: 8px 16px;
|
|
||||||
background: rgba(89, 157, 255, 0.15);
|
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
|
padding: 8px 16px;
|
||||||
|
background: rgba(0, 0, 0, 15%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tips-icon {
|
.tips-icon {
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
color: #0068FF;
|
color: #0068ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-left {
|
.footer-left {
|
||||||
height: 48px;
|
|
||||||
float: left;
|
|
||||||
margin-left: 16px;
|
|
||||||
color: rgb(72, 72, 72);
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: left;
|
justify-content: left;
|
||||||
|
float: left;
|
||||||
|
height: 48px;
|
||||||
|
margin-left: 16px;
|
||||||
|
color: rgb(72, 72, 72);
|
||||||
}
|
}
|
||||||
|
|
||||||
.submit-tip {
|
.submit-tip {
|
||||||
font-size: 16px;
|
|
||||||
// margin-top: 16px;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-wrapper {
|
.progress-wrapper {
|
||||||
width: 170px;
|
width: 170px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,14 +1,14 @@
|
|||||||
.add-select {
|
|
||||||
}
|
|
||||||
.items {
|
.items {
|
||||||
float: left;
|
float: left;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-top: 8px;
|
|
||||||
float: left;
|
float: left;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
margin-top: 8px;
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
.ant-form-item-has-success
|
.ant-form-item-has-success
|
||||||
.ant-select:not(.ant-select-borderless)
|
.ant-select:not(.ant-select-borderless)
|
||||||
@ -17,22 +17,21 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-detail {
|
.item-detail {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
// :global {
|
|
||||||
// .ant-form-item-has-error {
|
|
||||||
// margin-bottom: 24px;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.float {
|
.float {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.remove-btn,
|
.remove-btn,
|
||||||
.add-btn {
|
.add-btn {
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 8px;
|
padding-right: 8px;
|
||||||
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.desc {
|
.desc {
|
||||||
margin-left: 16px;
|
margin-left: 16px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,9 +1,10 @@
|
|||||||
.label {
|
.label {
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
.ant-descriptions-item-label {
|
.ant-descriptions-item-label {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
color: #8A8A8A;
|
color: #8a8a8a;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,14 +2,17 @@
|
|||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
margin-right: 10px;
|
|
||||||
max-width: 20%;
|
max-width: 20%;
|
||||||
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select {
|
.select {
|
||||||
max-width: 80%;
|
max-width: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.size-label {
|
.size-label {
|
||||||
margin-left: 10px;
|
|
||||||
margin-right: 40px;
|
margin-right: 40px;
|
||||||
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,43 +3,49 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-wrapper {
|
.item-wrapper {
|
||||||
width: 44px;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
width: 44px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-wrapper:last-child {
|
.item-wrapper:last-child {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
}
|
}
|
||||||
.item-wrapper:after {
|
|
||||||
content: " ";
|
.item-wrapper::after {
|
||||||
width: 4px;
|
|
||||||
height: 4px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: #484848;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 13px;
|
top: 13px;
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
background-color: #484848;
|
||||||
|
border-radius: 50%;
|
||||||
|
content: ' ';
|
||||||
}
|
}
|
||||||
.item-wrapper:last-child:after {
|
|
||||||
|
.item-wrapper:last-child::after {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
padding-left: 8px;
|
|
||||||
padding-right: 8px;
|
padding-right: 8px;
|
||||||
border-top: none;
|
padding-left: 8px;
|
||||||
border-left: none;
|
|
||||||
border-right: none;
|
|
||||||
border-radius: 0;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
border-top: none;
|
||||||
|
border-right: none;
|
||||||
|
border-left: none;
|
||||||
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item:focus {
|
.item:focus {
|
||||||
border-top: none;
|
border-top: none;
|
||||||
border-left: none;
|
|
||||||
border-right: none;
|
border-right: none;
|
||||||
|
border-left: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ipv6 {
|
.ipv6 {
|
||||||
width: 120px;
|
width: 120px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,43 +3,49 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-wrapper {
|
.item-wrapper {
|
||||||
width: 44px;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
width: 44px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-wrapper:last-child {
|
.item-wrapper:last-child {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
}
|
}
|
||||||
.item-wrapper:after {
|
|
||||||
content: " ";
|
.item-wrapper::after {
|
||||||
width: 4px;
|
|
||||||
height: 4px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: #484848;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 13px;
|
top: 13px;
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
background-color: #484848;
|
||||||
|
border-radius: 50%;
|
||||||
|
content: ' ';
|
||||||
}
|
}
|
||||||
.item-wrapper:last-child:after {
|
|
||||||
|
.item-wrapper:last-child::after {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
padding-left: 8px;
|
|
||||||
padding-right: 8px;
|
padding-right: 8px;
|
||||||
border-top: none;
|
padding-left: 8px;
|
||||||
border-left: none;
|
|
||||||
border-right: none;
|
|
||||||
border-radius: 0;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
border-top: none;
|
||||||
|
border-right: none;
|
||||||
|
border-left: none;
|
||||||
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item:focus {
|
.item:focus {
|
||||||
border-top: none;
|
border-top: none;
|
||||||
border-left: none;
|
|
||||||
border-right: none;
|
border-right: none;
|
||||||
|
border-left: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ipv6 {
|
.ipv6 {
|
||||||
width: 120px;
|
width: 120px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +1,8 @@
|
|||||||
.cpu {
|
.cpu {
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ram {
|
.ram {
|
||||||
margin-left: 16px;
|
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
|||||||
@ -235,7 +235,7 @@ export default class NetworkSelect extends React.Component {
|
|||||||
label: (
|
label: (
|
||||||
<div>
|
<div>
|
||||||
<span>{it.name}</span>
|
<span>{it.name}</span>
|
||||||
<span className={styles.subnet_options_cidr}>{it.cidr}</span>
|
<span className={styles['subnet-options-cidr']}>{it.cidr}</span>
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
name: it.name,
|
name: it.name,
|
||||||
|
|||||||
@ -1,43 +1,49 @@
|
|||||||
@import '~styles/variables';
|
@import '~styles/variables';
|
||||||
|
|
||||||
.network-select {
|
.network-select {
|
||||||
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
height: 61.6px;
|
height: 61.6px;
|
||||||
margin-bottom: 0 !important;
|
margin-bottom: 0 !important;
|
||||||
position: relative;
|
|
||||||
:global {
|
:global {
|
||||||
.ant-form-item-control-input-content {
|
.ant-form-item-control-input-content {
|
||||||
height: 61.6px;
|
height: 61.6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-form-item-explain {
|
.ant-form-item-explain {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.label {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
.select {
|
.select {
|
||||||
margin-right: 40px;
|
margin-right: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.size-label {
|
.size-label {
|
||||||
margin-left: 10px;
|
|
||||||
margin-right: 40px;
|
margin-right: 40px;
|
||||||
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tips {
|
.tips {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
|
margin-right: 10px;
|
||||||
color: @color-text-caption;
|
color: @color-text-caption;
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
color: @color-text-body;
|
color: @color-text-body;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subnet_options_cidr {
|
.subnet-options-cidr {
|
||||||
padding-left: 5px;
|
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
opacity: 0.6;
|
padding-left: 5px;
|
||||||
border-left: 1px solid;
|
border-left: 1px solid;
|
||||||
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,18 +1,20 @@
|
|||||||
@import "~styles/variables";
|
@import '~styles/variables';
|
||||||
|
|
||||||
.only-radio {
|
.only-radio {
|
||||||
:global {
|
:global {
|
||||||
.ant-radio-button-wrapper {
|
.ant-radio-button-wrapper {
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
border-radius: @border-radius;
|
|
||||||
border-left-width: 1px;
|
border-left-width: 1px;
|
||||||
|
border-radius: @border-radius;
|
||||||
}
|
}
|
||||||
.ant-radio-button-wrapper:before {
|
|
||||||
|
.ant-radio-button-wrapper::before {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-radio-button-wrapper:first-child {
|
.ant-radio-button-wrapper:first-child {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
border-radius: @border-radius;
|
border-radius: @border-radius;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
@import "~styles/variables";
|
@import '~styles/variables';
|
||||||
|
|
||||||
.checkbox {
|
.checkbox {
|
||||||
padding-bottom: 5px;
|
|
||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
|
padding-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,56 +1,64 @@
|
|||||||
@import "~styles/variables";
|
@import '~styles/variables';
|
||||||
|
|
||||||
.sl-select-table {
|
|
||||||
}
|
|
||||||
.search-wrapper {
|
.search-wrapper {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
.ant-menu-root.ant-menu-vertical {
|
.ant-menu-root.ant-menu-vertical {
|
||||||
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2) !important;
|
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 20%) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-tabs {
|
.image-tabs {
|
||||||
|
display: flex;
|
||||||
height: 52px;
|
height: 52px;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
display: flex;
|
|
||||||
img {
|
img {
|
||||||
|
display: block;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
.ant-radio-button-wrapper {
|
.ant-radio-button-wrapper {
|
||||||
border: none;
|
|
||||||
color: @color-text-body;
|
|
||||||
width: 70px;
|
width: 70px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
color: @color-text-body;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-radio-button-wrapper:not(:first-child)::before {
|
.ant-radio-button-wrapper:not(:first-child)::before {
|
||||||
width: 0;
|
width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
|
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
|
||||||
color: @primary-color;
|
color: @primary-color;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within {
|
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-tab {
|
.image-tab {
|
||||||
flex: 1 auto;
|
flex: 1 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-tab-label {
|
.image-tab-label {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.normal-tabs {
|
.normal-tabs {
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination-footer {
|
.pagination-footer {
|
||||||
:global {
|
:global {
|
||||||
.ant-select {
|
.ant-select {
|
||||||
@ -59,6 +67,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sl-select-table-backend {
|
.sl-select-table-backend {
|
||||||
:global {
|
:global {
|
||||||
.ant-table-footer {
|
.ant-table-footer {
|
||||||
@ -66,4 +75,4 @@
|
|||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
@import "~styles/variables";
|
@import '~styles/variables';
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: @size-normal;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-left: 12px;
|
margin-left: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: @size-normal;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
.tip {
|
.tip {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: -27px;
|
|
||||||
top: 10px;
|
top: 10px;
|
||||||
|
right: -27px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,14 +1,15 @@
|
|||||||
.item {
|
.item {
|
||||||
background-color: #fff;
|
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
.ant-descriptions-item-label {
|
.ant-descriptions-item-label {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
color: #8A8A8A;
|
color: #8a8a8a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-descriptions-item-content {
|
.ant-descriptions-item-content {
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
@import "~styles/variables";
|
@import '~styles/variables';
|
||||||
|
|
||||||
.menu {
|
.menu {
|
||||||
:global(.anticon) {
|
:global(.anticon) {
|
||||||
@ -22,8 +22,8 @@
|
|||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
|
|
||||||
.user-label {
|
.user-label {
|
||||||
font-weight: "bold";
|
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
|
font-weight: 'bold';
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
@ -54,24 +54,6 @@
|
|||||||
.action {
|
.action {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right_message {
|
|
||||||
|
|
||||||
.message_avatar {
|
|
||||||
background-color: #fff;
|
|
||||||
color: rgba(0, 0, 0, 0.65);
|
|
||||||
margin-top: -4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global {
|
|
||||||
.ant-badge-dot {
|
|
||||||
transform: translate(-55%, 10%);
|
|
||||||
}
|
|
||||||
.ant-avatar-square {
|
|
||||||
border-radius: 3px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-menu {
|
.project-menu {
|
||||||
@ -80,7 +62,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
|
|
||||||
.ant-dropdown-menu-item:hover,
|
.ant-dropdown-menu-item:hover,
|
||||||
.ant-dropdown-menu-submenu-title:hover {
|
.ant-dropdown-menu-submenu-title:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -103,16 +84,17 @@
|
|||||||
|
|
||||||
.project {
|
.project {
|
||||||
float: left;
|
float: left;
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: @header-height;
|
line-height: @header-height;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
.ant-divider {
|
.ant-divider {
|
||||||
background-color: #d2d2d2;
|
|
||||||
margin-left: 24px;
|
|
||||||
margin-right: 24px;
|
margin-right: 24px;
|
||||||
|
margin-left: 24px;
|
||||||
|
background-color: #d2d2d2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-btn-link {
|
.ant-btn-link {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
min-width: 280px;
|
min-width: 280px;
|
||||||
@ -122,23 +104,23 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
|
position: relative;
|
||||||
|
z-index: 200;
|
||||||
|
flex-grow: 1;
|
||||||
|
height: 100%;
|
||||||
padding-left: 36px;
|
padding-left: 36px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-color: #fff;
|
|
||||||
height: 100%;
|
|
||||||
color: @title-color;
|
color: @title-color;
|
||||||
position: relative;
|
background-color: #fff;
|
||||||
flex-grow: 1;
|
box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 9%);
|
||||||
z-index: 200;
|
|
||||||
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.09);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.09);
|
|
||||||
border: none;
|
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
color: #bfbfbf;
|
color: #bfbfbf;
|
||||||
|
border: none;
|
||||||
|
box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 9%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.domain {
|
.domain {
|
||||||
@ -146,14 +128,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.links {
|
.links {
|
||||||
margin-right: 20px;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
margin-right: 20px;
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
.ant-divider {
|
.ant-divider {
|
||||||
background-color: #d2d2d2;
|
|
||||||
margin-left: 24px;
|
|
||||||
margin-right: 24px;
|
margin-right: 24px;
|
||||||
|
margin-left: 24px;
|
||||||
|
background-color: #d2d2d2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -179,17 +161,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.single-link {
|
.single-link {
|
||||||
color: @primary-color;
|
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
|
color: @primary-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.token {
|
.token {
|
||||||
pre {
|
pre {
|
||||||
padding: .4em .6em;
|
padding: 0.4em 0.6em;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
background: hsla(0, 0%, 58.8%, .1);
|
background: hsla(0%, 0%, 58.8%, 10%);
|
||||||
border: 1px solid hsla(0, 0%, 39.2%, .2);
|
border: 1px solid hsla(0%, 0%, 39.2%, 20%);
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,29 +5,29 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.magic-input-wrapper {
|
.magic-input-wrapper {
|
||||||
|
position: relative;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 200px;
|
min-width: 200px;
|
||||||
border: 1px solid rgb(217, 217, 217);
|
|
||||||
border-radius: @border-radius;
|
|
||||||
padding: 3px 0 3px 8px;
|
padding: 3px 0 3px 8px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
position: relative;
|
border: 1px solid rgb(217, 217, 217);
|
||||||
|
border-radius: @border-radius;
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
.ant-tag {
|
.ant-tag {
|
||||||
background-color: @primary-color;
|
height: 24px;
|
||||||
|
margin-right: 4px;
|
||||||
|
padding: 0 4px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
height: 24px;
|
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
|
background-color: @primary-color;
|
||||||
border: none;
|
border: none;
|
||||||
padding: 0 4px;
|
|
||||||
margin-right: 4px;
|
|
||||||
|
|
||||||
.anticon-close {
|
.anticon-close {
|
||||||
color: #fff;
|
|
||||||
margin-left: 16px;
|
margin-left: 16px;
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -44,7 +44,7 @@
|
|||||||
|
|
||||||
.magic-input-wrapper-active {
|
.magic-input-wrapper-active {
|
||||||
border-color: @primary-color;
|
border-color: @primary-color;
|
||||||
box-shadow: 0 0 0 2px rgba(0, 104, 255, 0.2);
|
box-shadow: 0 0 0 2px rgba(0, 104, 255, 20%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-wrapper {
|
.input-wrapper {
|
||||||
@ -55,10 +55,10 @@
|
|||||||
|
|
||||||
:global {
|
:global {
|
||||||
.ant-input {
|
.ant-input {
|
||||||
border: none;
|
|
||||||
box-shadow: none;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background: none;
|
background: none;
|
||||||
|
border: none;
|
||||||
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-input:focus {
|
.ant-input:focus {
|
||||||
@ -76,33 +76,26 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ant-menu-vertical .ant-menu-item {
|
.ant-menu-vertical .ant-menu-item {
|
||||||
font-size: 10px;
|
margin-top: 0;
|
||||||
margin-top: 0px;
|
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tagItem {
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input {
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu {
|
.menu {
|
||||||
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.09) !important;
|
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 9%) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu,
|
.menu,
|
||||||
.option-menu {
|
.option-menu {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 100;
|
|
||||||
top: 34px;
|
top: 34px;
|
||||||
border-radius: @border-radius;
|
z-index: 100;
|
||||||
overflow-y: auto;
|
|
||||||
overflow-x: hidden;
|
|
||||||
max-height: 310px;
|
max-height: 310px;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
border-radius: @border-radius;
|
||||||
}
|
}
|
||||||
|
|
||||||
.key {
|
.key {
|
||||||
@ -112,8 +105,8 @@
|
|||||||
:global {
|
:global {
|
||||||
.ant-divider,
|
.ant-divider,
|
||||||
.ant-divider-vertical {
|
.ant-divider-vertical {
|
||||||
margin-left: 4px;
|
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
|
margin-left: 4px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -132,15 +125,15 @@
|
|||||||
.magic-input-wrapper .ant-tag {
|
.magic-input-wrapper .ant-tag {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
line-height: 24px;
|
|
||||||
margin: 0 5px 0 0;
|
margin: 0 5px 0 0;
|
||||||
|
line-height: 24px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-icon {
|
.search-icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 8px;
|
|
||||||
top: 0;
|
top: 0;
|
||||||
|
right: 8px;
|
||||||
color: @color-text-body;
|
color: @color-text-body;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
@ -151,19 +144,19 @@
|
|||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
|
|
||||||
.close-btn {
|
.close-btn {
|
||||||
border: none;
|
|
||||||
height: 24px !important;
|
height: 24px !important;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
border: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.close-option-btn {
|
.close-option-btn {
|
||||||
height: 24px !important;
|
|
||||||
top: 3px;
|
top: 3px;
|
||||||
|
height: 24px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.magic-input-checks {
|
.magic-input-checks {
|
||||||
line-height: 32px;
|
|
||||||
margin-left: 8px;
|
|
||||||
min-width: 120px;
|
min-width: 120px;
|
||||||
|
margin-left: 8px;
|
||||||
|
line-height: 32px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -150,7 +150,7 @@ const errorWithDetail = (err, title) => {
|
|||||||
buttonText={t('Click to show detail')}
|
buttonText={t('Click to show detail')}
|
||||||
component={
|
component={
|
||||||
<CodeEditor
|
<CodeEditor
|
||||||
className={styles.codeEditor}
|
className={styles['code-editor']}
|
||||||
value={err}
|
value={err}
|
||||||
mode="json"
|
mode="json"
|
||||||
options={{
|
options={{
|
||||||
|
|||||||
@ -15,7 +15,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.codeEditor {
|
.code-editor {
|
||||||
height: 400px !important;
|
height: 400px !important;
|
||||||
min-height: 400px !important;
|
min-height: 400px !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,9 +1,10 @@
|
|||||||
.wrapper {
|
.wrapper {
|
||||||
text-align: right;
|
|
||||||
height: 32px;
|
height: 32px;
|
||||||
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.inner {
|
.inner {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 300px;
|
width: 300px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -119,7 +119,7 @@ const BaseCard = (props) => {
|
|||||||
return (
|
return (
|
||||||
<PrometheusContext.Provider value={passedContext}>
|
<PrometheusContext.Provider value={passedContext}>
|
||||||
<Card
|
<Card
|
||||||
className={style.remove_extra_padding}
|
className={style['remove-extra-padding']}
|
||||||
bodyStyle={{
|
bodyStyle={{
|
||||||
// padding 24
|
// padding 24
|
||||||
minHeight: visibleHeight + 48,
|
minHeight: visibleHeight + 48,
|
||||||
|
|||||||
@ -90,7 +90,7 @@ const BaseContent = (props) => {
|
|||||||
}, [node]);
|
}, [node]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.base_content_container}>
|
<div className={styles['base-content-container']}>
|
||||||
<BaseContentContext.Provider value={passedContextValue}>
|
<BaseContentContext.Provider value={passedContextValue}>
|
||||||
{(renderTimeRangeSelect || renderNodeSelect) && (
|
{(renderTimeRangeSelect || renderNodeSelect) && (
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
@ -119,7 +119,7 @@ Charts.defaultProps = {
|
|||||||
formatDataFn: handleResponses,
|
formatDataFn: handleResponses,
|
||||||
},
|
},
|
||||||
renderContent: ({ data }) => (
|
renderContent: ({ data }) => (
|
||||||
<div className={styles.topContent}>{get(data, '[0].y', 0)}</div>
|
<div className={styles['top-content']}>{get(data, '[0].y', 0)}</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
baseChartProps: {
|
baseChartProps: {
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
.topContent {
|
.top-content {
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 500;
|
|
||||||
height: 120px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 120px;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,36 +1,36 @@
|
|||||||
.remove_extra_padding {
|
.remove-extra-padding {
|
||||||
:global {
|
:global {
|
||||||
.ant-card-extra {
|
.ant-card-extra {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-card-head {
|
.ant-card-head {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-card-body {
|
.ant-card-body {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
align-items: center;
|
||||||
align-items: center;
|
justify-content: center;
|
||||||
|
|
||||||
.ant-card-loading-content {
|
.ant-card-loading-content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.base_content_container {
|
.base-content-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow-y: scroll;
|
padding: 20px;
|
||||||
padding: 20px;
|
overflow-y: scroll;
|
||||||
|
|
||||||
.refresh {
|
.refresh {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -57,7 +57,7 @@ const SelectLang = (props) => {
|
|||||||
// return langMenu;
|
// return langMenu;
|
||||||
return (
|
return (
|
||||||
<Dropdown overlay={langMenu} placement="bottomRight">
|
<Dropdown overlay={langMenu} placement="bottomRight">
|
||||||
<span className={classNames(styles.dropDown, className)}>
|
<span className={classNames(styles['drop-down'], className)}>
|
||||||
<GlobalOutlined />
|
<GlobalOutlined />
|
||||||
</span>
|
</span>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
|
|||||||
@ -2,19 +2,22 @@
|
|||||||
:global(.anticon) {
|
:global(.anticon) {
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.ant-dropdown-menu-item) {
|
:global(.ant-dropdown-menu-item) {
|
||||||
min-width: 160px;
|
min-width: 160px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropDown {
|
.drop-down {
|
||||||
line-height: 20px;
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
line-height: 20px;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
> i {
|
> i {
|
||||||
font-size: 16px !important;
|
font-size: 16px !important;
|
||||||
transform: none !important;
|
transform: none !important;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -1px;
|
top: -1px;
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
@import "~styles/variables";
|
@import '~styles/variables';
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -10,25 +10,29 @@
|
|||||||
.ant-spin-nested-loading {
|
.ant-spin-nested-loading {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-spin-container {
|
.ant-spin-container {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.step {
|
.step {
|
||||||
height: 80px;
|
height: 80px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
padding-top: 24px;
|
||||||
padding-right: 56px;
|
padding-right: 56px;
|
||||||
padding-left: 56px;
|
padding-left: 56px;
|
||||||
padding-top: 24px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form {
|
.form {
|
||||||
padding-top: @body-padding;
|
|
||||||
background-color: #fff;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
min-height: calc(100vh - 280px);
|
min-height: calc(100vh - 280px);
|
||||||
|
padding-top: @body-padding;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
.sl-form {
|
.sl-form {
|
||||||
height: calc(100vh - 219px);
|
height: calc(100vh - 219px);
|
||||||
@ -36,35 +40,39 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
|
||||||
min-height: 48px;
|
|
||||||
background-color: #fff;
|
|
||||||
box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.09);
|
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
min-height: 48px;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 9%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btns {
|
.btns {
|
||||||
float: right;
|
float: right;
|
||||||
margin-right: 32px;
|
|
||||||
min-width: 200px;
|
min-width: 200px;
|
||||||
:global{
|
margin-right: 32px;
|
||||||
|
|
||||||
|
:global {
|
||||||
button {
|
button {
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-left {
|
.footer-left {
|
||||||
min-height: 48px;
|
|
||||||
float: left;
|
|
||||||
margin-left: 16px;
|
|
||||||
color: rgb(72, 72, 72);
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-items: left;
|
justify-items: left;
|
||||||
}
|
float: left;
|
||||||
|
min-height: 48px;
|
||||||
|
margin-left: 16px;
|
||||||
|
color: rgb(72, 72, 72);
|
||||||
|
}
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
.modal-action {
|
.modal-action {
|
||||||
:global {
|
:global {
|
||||||
.ant-modal-body {
|
.ant-modal-body {
|
||||||
padding: 0 0 16px 0;
|
padding: 0 0 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,15 +1,17 @@
|
|||||||
.table-action {
|
.table-action {
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.more-action-btn {
|
.more-action-btn {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-batch-menu {
|
.table-batch-menu {
|
||||||
:global {
|
:global {
|
||||||
.ant-dropdown-menu-item {
|
.ant-dropdown-menu-item {
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,10 +3,10 @@
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
|
display: block;
|
||||||
max-width: 48px;
|
max-width: 48px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
display: block;
|
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -17,12 +17,15 @@
|
|||||||
|
|
||||||
.action-sub-menu {
|
.action-sub-menu {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
.ant-dropdown-menu-submenu-popup ul {
|
.ant-dropdown-menu-submenu-popup ul {
|
||||||
margin-left: 0 !important;
|
|
||||||
margin-right: 0 !important;
|
margin-right: 0 !important;
|
||||||
|
margin-left: 0 !important;
|
||||||
}
|
}
|
||||||
.ant-dropdown-menu-item, .ant-dropdown-menu-submenu-title {
|
|
||||||
|
.ant-dropdown-menu-item,
|
||||||
|
.ant-dropdown-menu-submenu-title {
|
||||||
padding: 0 12px;
|
padding: 0 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -32,10 +35,11 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.single-more-action {
|
.single-more-action {
|
||||||
:global {
|
:global {
|
||||||
.ant-btn-link {
|
.ant-btn-link {
|
||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -607,12 +607,12 @@ export default class BaseTable extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
renderSelectedTitle = () => (
|
renderSelectedTitle = () => (
|
||||||
<div className={styles.selectTitle}>
|
<div className={styles['select-title']}>
|
||||||
<div>{this.renderBatchActions()}</div>
|
<div>{this.renderBatchActions()}</div>
|
||||||
<div>
|
<div>
|
||||||
<Button
|
<Button
|
||||||
type="flat"
|
type="flat"
|
||||||
className={styles.cancelSelect}
|
className={styles['cancel-select']}
|
||||||
onClick={this.handleCancelSelect}
|
onClick={this.handleCancelSelect}
|
||||||
>
|
>
|
||||||
{t('Cancel Select')}
|
{t('Cancel Select')}
|
||||||
@ -826,7 +826,7 @@ export default class BaseTable extends React.Component {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<CustomColumns
|
<CustomColumns
|
||||||
className={styles.columnMenu}
|
className={styles['column-menu']}
|
||||||
options={this.hideableRow}
|
options={this.hideableRow}
|
||||||
value={getHideColKeys(hideRow)}
|
value={getHideColKeys(hideRow)}
|
||||||
onChange={this.handleRowHide}
|
onChange={this.handleRowHide}
|
||||||
|
|||||||
@ -1,19 +1,17 @@
|
|||||||
@import "~styles/variables";
|
@import '~styles/variables';
|
||||||
|
|
||||||
.table {
|
.table {
|
||||||
border-radius: @border-radius;
|
|
||||||
box-shadow: @base-shadow;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
border-radius: @border-radius;
|
||||||
|
box-shadow: @base-shadow;
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
.ant-table-container {
|
.ant-table-container {
|
||||||
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
|
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 5%);
|
||||||
// .ant-table-body {
|
|
||||||
// min-height: 500px;
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
.ant-table-pagination.ant-pagination{
|
|
||||||
|
.ant-table-pagination.ant-pagination {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
}
|
}
|
||||||
@ -25,11 +23,11 @@
|
|||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.selectTitle {
|
.select-title {
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cancelSelect {
|
.cancel-select {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -38,90 +36,57 @@
|
|||||||
margin-left: 12px;
|
margin-left: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.disableSearch {
|
|
||||||
pointer-events: none !important;
|
|
||||||
input {
|
|
||||||
pointer-events: none !important;
|
|
||||||
}
|
|
||||||
user-select: none;
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.keyword {
|
|
||||||
width: 100%;
|
|
||||||
padding: 2px 0;
|
|
||||||
margin-right: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emptyText {
|
|
||||||
& > div {
|
|
||||||
@include TypographyTitleH5();
|
|
||||||
}
|
|
||||||
|
|
||||||
& > p {
|
|
||||||
margin-top: 4px;
|
|
||||||
@include TypographyParagraph(@dark-color01);
|
|
||||||
}
|
|
||||||
|
|
||||||
@at-root {
|
|
||||||
.emptyTipIcon {
|
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
border-radius: 50% 0 50% 50%;
|
|
||||||
background: @light-color02;
|
|
||||||
display: inline-block;
|
|
||||||
line-height: 50px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.action {
|
.action {
|
||||||
color: @blue-color03;
|
|
||||||
padding: 0 4px;
|
padding: 0 4px;
|
||||||
cursor: pointer;
|
color: @blue-color03;
|
||||||
font-weight: @font-bold;
|
font-weight: @font-bold;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.columnMenu {
|
.column-menu {
|
||||||
width: 160px;
|
width: 160px;
|
||||||
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
|
|
||||||
border-radius: @border-radius;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
border-radius: @border-radius;
|
||||||
|
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 20%);
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
.ant-menu-vertical > .ant-menu-item {
|
.ant-menu-vertical > .ant-menu-item {
|
||||||
line-height: 30px;
|
|
||||||
height: 30px;
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-button {
|
.custom-button {
|
||||||
margin-left: 0px;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-header {
|
.table-header {
|
||||||
// padding-top: @body-padding;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-header-btns {
|
.table-header-btns {
|
||||||
margin-bottom: @body-padding;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
margin-bottom: @body-padding;
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
button {
|
button {
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-btn[disabled] {
|
.ant-btn[disabled] {
|
||||||
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
|
box-shadow: 0 2px 0 rgba(0, 0, 0, 4.5%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-row {
|
.search-row {
|
||||||
float: right;
|
float: right;
|
||||||
min-width: 350px;
|
min-width: 350px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-input {
|
.search-input {
|
||||||
width: 288px;
|
width: 288px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
@import "~styles/variables";
|
@import '~styles/variables';
|
||||||
|
|
||||||
.sl-simple-table {
|
.sl-simple-table {
|
||||||
:global {
|
:global {
|
||||||
@ -6,16 +6,18 @@
|
|||||||
.ant-table-thead {
|
.ant-table-thead {
|
||||||
tr {
|
tr {
|
||||||
.ant-table-cell {
|
.ant-table-cell {
|
||||||
padding: 8px 8px 8px 0px;
|
padding: 8px 8px 8px 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-table-column-sorters {
|
.ant-table-column-sorters {
|
||||||
padding: 8px 0;
|
padding: 8px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-table-tbody > tr > td {
|
.ant-table-tbody > tr > td {
|
||||||
padding: 8px 8px 8px 0px;
|
padding: 8px 8px 8px 0;
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,8 +5,8 @@
|
|||||||
@lg-space: 24px;
|
@lg-space: 24px;
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
padding: 0 @mid-space;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
padding: 0 @mid-space;
|
||||||
|
|
||||||
.left-side {
|
.left-side {
|
||||||
width: 380px;
|
width: 380px;
|
||||||
|
|||||||
@ -2,17 +2,20 @@
|
|||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
min-height: calc(100vh - 108px);
|
min-height: calc(100vh - 108px);
|
||||||
padding: 0 @body-padding;
|
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
|
padding: 0 @body-padding;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hint {
|
.hint {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hints {
|
.hints {
|
||||||
:global {
|
:global {
|
||||||
.ant-alert-warning {
|
.ant-alert-warning {
|
||||||
background-color: #fffbe6;
|
background-color: #fffbe6;
|
||||||
border: 1px solid #ffe58f;
|
border: 1px solid #ffe58f;
|
||||||
|
|
||||||
.ant-alert-icon {
|
.ant-alert-icon {
|
||||||
color: #faad14;
|
color: #faad14;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -31,21 +31,21 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
padding: 0 14px;
|
|
||||||
border-radius: @border-radius;
|
|
||||||
background-color: @dark;
|
|
||||||
margin: 0 0 12px;
|
margin: 0 0 12px;
|
||||||
|
padding: 0 14px;
|
||||||
|
background-color: @dark;
|
||||||
|
border-radius: @border-radius;
|
||||||
|
|
||||||
&Item {
|
&Item {
|
||||||
min-width: 96px;
|
min-width: 96px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
line-height: 32px;
|
|
||||||
margin: 0 6px;
|
margin: 0 6px;
|
||||||
padding: 0 14px;
|
padding: 0 14px;
|
||||||
font-weight: 500;
|
|
||||||
color: @white;
|
color: @white;
|
||||||
border: 1px solid transparent;
|
font-weight: 500;
|
||||||
|
line-height: 32px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
border: 1px solid transparent;
|
||||||
transition: all @trans-speed;
|
transition: all @trans-speed;
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
@ -53,10 +53,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
border-radius: @border-radius;
|
|
||||||
box-shadow: @btn-primary-shadow;
|
|
||||||
background-color: @primary;
|
background-color: @primary;
|
||||||
border-color: @primary;
|
border-color: @primary;
|
||||||
|
border-radius: @border-radius;
|
||||||
|
box-shadow: @btn-primary-shadow;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: @white;
|
color: @white;
|
||||||
@ -66,15 +66,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.loading {
|
.loading {
|
||||||
text-align: center;
|
|
||||||
padding: 30px 0;
|
padding: 30px 0;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
background-color: #fff;
|
|
||||||
padding-left: @body-padding;
|
|
||||||
padding-right: @body-padding;
|
padding-right: @body-padding;
|
||||||
padding-bottom: 30px;
|
padding-bottom: 30px;
|
||||||
|
padding-left: @body-padding;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
.ant-descriptions-title {
|
.ant-descriptions-title {
|
||||||
@ -88,8 +88,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.title-label {
|
.title-label {
|
||||||
font-style: italic;
|
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-button {
|
.header-button {
|
||||||
@ -97,9 +97,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.header-divider {
|
.header-divider {
|
||||||
|
width: 2px;
|
||||||
margin: 0 14px 0 24px;
|
margin: 0 14px 0 24px;
|
||||||
background-color: @color-text-caption;
|
background-color: @color-text-caption;
|
||||||
width: 2px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabs {
|
.tabs {
|
||||||
@ -107,8 +107,8 @@
|
|||||||
|
|
||||||
:global {
|
:global {
|
||||||
.ant-tabs-bar {
|
.ant-tabs-bar {
|
||||||
padding-left: @body-padding;
|
|
||||||
padding-right: @body-padding;
|
padding-right: @body-padding;
|
||||||
|
padding-left: @body-padding;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-tabs-nav-wrap {
|
.ant-tabs-nav-wrap {
|
||||||
@ -133,8 +133,8 @@
|
|||||||
|
|
||||||
:global {
|
:global {
|
||||||
.ant-btn-link {
|
.ant-btn-link {
|
||||||
border-color: #0068FF;
|
|
||||||
padding: 5.6px 15px !important;
|
padding: 5.6px 15px !important;
|
||||||
|
border-color: #0068ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-divider-vertical {
|
.ant-divider-vertical {
|
||||||
@ -151,7 +151,7 @@
|
|||||||
.ant-btn-link[disabled]:hover,
|
.ant-btn-link[disabled]:hover,
|
||||||
.ant-btn-link[disabled]:focus,
|
.ant-btn-link[disabled]:focus,
|
||||||
.ant-btn-link[disabled]:active {
|
.ant-btn-link[disabled]:active {
|
||||||
border-color: rgba(0, 0, 0, 0.25);
|
border-color: rgba(0, 0, 0, 25%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-btn-dangerous.ant-btn-link:active {
|
.ant-btn-dangerous.ant-btn-link:active {
|
||||||
@ -167,4 +167,4 @@
|
|||||||
border-color: #f76070;
|
border-color: #f76070;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,20 +1,17 @@
|
|||||||
@import "~styles/variables";
|
@import '~styles/variables';
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
min-height: calc(100vh - 108px);
|
min-height: calc(100vh - 108px);
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
// .ant-tabs-bar {
|
|
||||||
// background-color: #fff;
|
|
||||||
// margin-bottom: 0;
|
|
||||||
// padding: 0 @body-padding;
|
|
||||||
// }
|
|
||||||
.ant-tabs > .ant-tabs-nav {
|
.ant-tabs > .ant-tabs-nav {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-tabs-nav-wrap {
|
.ant-tabs-nav-wrap {
|
||||||
padding: 0 @body-padding;
|
padding: 0 @body-padding;
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-container {
|
.list-container {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,27 +1,27 @@
|
|||||||
.container {
|
.container {
|
||||||
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-flow: row;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
flex-flow: row;
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
width: 576px;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
width: 576px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
// TODO wait for RGB
|
|
||||||
|
/* TODO wait for RGB
|
||||||
// background: rgb(253, 249, 252) no-repeat fixed left bottom;
|
// background: rgb(253, 249, 252) no-repeat fixed left bottom;
|
||||||
// background-size: 556px;
|
// background-size: 556px; */
|
||||||
|
|
||||||
.lang {
|
.lang {
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
text-align: right;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 20px;
|
top: 20px;
|
||||||
right: 24px;
|
right: 24px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
@ -48,33 +48,36 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
flex: 1 1;
|
|
||||||
background-color: #21242A;
|
|
||||||
text-align: center;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
flex: 1 1;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #21242a;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-image {
|
.login-image {
|
||||||
margin-top: calc(100vh - 668px);
|
margin-top: calc(100vh - 668px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-full-image {
|
.login-full-image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.full-image-front {
|
.full-image-front {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background-color: rgba(14, 34, 181, 0.15);
|
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: rgba(14, 34, 181, 15%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-right-logo {
|
.login-right-logo {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -100px;
|
top: -100px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -7,17 +7,18 @@
|
|||||||
.header {
|
.header {
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
color: @white;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
height: @header-height;
|
height: @header-height;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding-left: 230px;
|
padding-left: 230px;
|
||||||
|
color: @white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-collapsed {
|
.header-collapsed {
|
||||||
&:extend(.header);
|
&:extend(.header);
|
||||||
|
|
||||||
padding-left: 88px;
|
padding-left: 88px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -43,30 +44,30 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sider {
|
.sider {
|
||||||
|
position: relative;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
position: relative;
|
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
.ant-layout-sider-trigger {
|
.ant-layout-sider-trigger {
|
||||||
background-color: @sider-background;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 32px !important;
|
|
||||||
height: 75px;
|
|
||||||
border-width: 32px;
|
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 48px;
|
bottom: 48px;
|
||||||
border-radius: 4px 0px 0px 4px;
|
width: 32px !important;
|
||||||
|
height: 75px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 75px;
|
line-height: 75px;
|
||||||
|
background-color: @sider-background;
|
||||||
|
border-width: 32px;
|
||||||
|
border-radius: 4px 0 0 4px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu {
|
.menu {
|
||||||
padding-left: 14px;
|
|
||||||
padding-right: 14px;
|
|
||||||
max-height: calc(100vh - 64px);
|
max-height: calc(100vh - 64px);
|
||||||
|
padding-right: 14px;
|
||||||
|
padding-left: 14px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
@ -74,13 +75,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar-track {
|
&::-webkit-scrollbar-track {
|
||||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
box-shadow: inset 0 0 6px rgba(0, 0, 0, 30%);
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
|
box-shadow: inset 0 0 6px rgba(0, 0, 0, 50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
@ -97,9 +98,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.anticon {
|
.anticon {
|
||||||
font-size: @size-normal;
|
|
||||||
margin-right: 20px;
|
|
||||||
float: left;
|
float: left;
|
||||||
|
margin-right: 20px;
|
||||||
|
font-size: @size-normal;
|
||||||
line-height: 44px;
|
line-height: 44px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -117,6 +118,7 @@
|
|||||||
a {
|
a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
a::before {
|
a::before {
|
||||||
width: 5px;
|
width: 5px;
|
||||||
}
|
}
|
||||||
@ -133,8 +135,8 @@
|
|||||||
|
|
||||||
:global {
|
:global {
|
||||||
.ant-menu-sub.ant-menu-inline {
|
.ant-menu-sub.ant-menu-inline {
|
||||||
padding-left: 5px;
|
|
||||||
padding-right: 5px;
|
padding-right: 5px;
|
||||||
|
padding-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-menu-item > span::before {
|
.ant-menu-item > span::before {
|
||||||
@ -142,11 +144,11 @@
|
|||||||
top: 18px;
|
top: 18px;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 30px;
|
left: 30px;
|
||||||
content: '';
|
|
||||||
width: 5px;
|
width: 5px;
|
||||||
height: 5px;
|
height: 5px;
|
||||||
background-color: rgba(255, 255, 255, 0.65);
|
background-color: rgba(255, 255, 255, 65%);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
content: '';
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-menu-item-selected > span::before {
|
.ant-menu-item-selected > span::before {
|
||||||
@ -157,11 +159,6 @@
|
|||||||
background-color: @primary-color;
|
background-color: @primary-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
// .ant-menu-sub {
|
|
||||||
// .ant-menu-item-selected {
|
|
||||||
// background-color: transparent !important;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
.ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal)
|
.ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal)
|
||||||
.ant-menu-item-selected {
|
.ant-menu-item-selected {
|
||||||
background-color: @primary-color;
|
background-color: @primary-color;
|
||||||
@ -172,8 +169,8 @@
|
|||||||
|
|
||||||
.breadcrumb {
|
.breadcrumb {
|
||||||
height: @breadcrumb-height;
|
height: @breadcrumb-height;
|
||||||
background-color: #fff;
|
|
||||||
padding-left: @body-padding-left;
|
padding-left: @body-padding-left;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
.breadcrumb-item {
|
.breadcrumb-item {
|
||||||
line-height: @breadcrumb-height;
|
line-height: @breadcrumb-height;
|
||||||
@ -190,9 +187,6 @@
|
|||||||
|
|
||||||
.main {
|
.main {
|
||||||
height: calc(100vh - @header-height - @breadcrumb-height);
|
height: calc(100vh - @header-height - @breadcrumb-height);
|
||||||
// min-width: @content-width;
|
|
||||||
// padding-left: @body-padding-left;
|
|
||||||
// padding-right: @body-padding-right;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -202,44 +196,43 @@
|
|||||||
|
|
||||||
.main-has-tab {
|
.main-has-tab {
|
||||||
margin-top: -42px;
|
margin-top: -42px;
|
||||||
// max-height: calc(100vh - 58px - 44px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.trigger-wrapper {
|
.trigger-wrapper {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 24px !important;
|
|
||||||
height: 70px;
|
|
||||||
border-width: 24px;
|
|
||||||
right: -24px;
|
right: -24px;
|
||||||
bottom: 48px;
|
bottom: 48px;
|
||||||
border-radius: 4px 0px 0px 4px;
|
width: 24px !important;
|
||||||
|
height: 70px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 70px;
|
line-height: 70px;
|
||||||
|
border-width: 24px;
|
||||||
|
border-radius: 4px 0 0 4px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.trigger {
|
.trigger {
|
||||||
font-size: 20px;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.trigger::before {
|
.trigger::before {
|
||||||
content: '';
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
background: rgba(0, 0, 0, 0.35);
|
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
-webkit-transform: scaleX(2.2) perspective(50px) rotateY(50deg);
|
background: rgba(0, 0, 0, 35%);
|
||||||
transform: scaleX(2.2) perspective(50px) rotateY(50deg);
|
|
||||||
-webkit-transform-origin: bottom;
|
|
||||||
transform-origin: left;
|
|
||||||
border-right: none;
|
border-right: none;
|
||||||
border-radius: 0 4px 4px 0;
|
border-radius: 0 4px 4px 0;
|
||||||
|
transform: scaleX(2.2) perspective(50px) rotateY(50deg);
|
||||||
|
transform: scaleX(2.2) perspective(50px) rotateY(50deg);
|
||||||
|
transform-origin: bottom;
|
||||||
|
transform-origin: left;
|
||||||
|
content: '';
|
||||||
}
|
}
|
||||||
|
|
||||||
.trigger-icon {
|
.trigger-icon {
|
||||||
@ -247,19 +240,19 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.base-layout {
|
.base-layout {
|
||||||
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.base-layout-sider {
|
.base-layout-sider {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 999;
|
||||||
width: 230px;
|
width: 230px;
|
||||||
background-color: @sider-background;
|
background-color: @sider-background;
|
||||||
z-index: 999;
|
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -274,9 +267,9 @@
|
|||||||
.base-layout-right {
|
.base-layout-right {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 40px;
|
top: 40px;
|
||||||
|
right: 0;
|
||||||
left: 230px;
|
left: 230px;
|
||||||
height: calc(100vh - 40px);
|
height: calc(100vh - 40px);
|
||||||
right: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.base-layout-right-collapsed {
|
.base-layout-right-collapsed {
|
||||||
@ -289,37 +282,35 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.notice {
|
.notice {
|
||||||
z-index: 1100;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
color: #0068ff;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 48px;
|
top: 48px;
|
||||||
right: 0;
|
right: 0;
|
||||||
line-height: 24px;
|
z-index: 1100;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
width: 384px;
|
width: 384px;
|
||||||
max-width: calc(100vw - 48px);
|
max-width: calc(100vw - 48px);
|
||||||
margin-bottom: 16px;
|
|
||||||
margin: 0 24px 0 0;
|
margin: 0 24px 0 0;
|
||||||
|
margin-bottom: 16px;
|
||||||
padding: 16px 24px;
|
padding: 16px 24px;
|
||||||
font-size: 18px;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
color: #0068ff;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 24px;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
-webkit-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
|
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 12%), 0 6px 16px 0 rgba(0, 0, 0, 8%),
|
||||||
0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
0 9px 28px 8px rgba(0, 0, 0, 5%);
|
||||||
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
|
cursor: pointer;
|
||||||
0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-item-title {
|
.menu-item-title {
|
||||||
span {
|
span {
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
max-width: 140px;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
max-width: 140px;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,42 +1,48 @@
|
|||||||
@import '~styles/variables';
|
@import '~styles/variables';
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
overflow: hidden;
|
|
||||||
height: 100vh;
|
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
.ant-layout-has-sider {
|
.ant-layout-has-sider {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-table {
|
.ant-table {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-pagination-item {
|
.ant-pagination-item {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-layout-sider {
|
.ant-layout-sider {
|
||||||
background: @sider-background;
|
background: @sider-background;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-menu.ant-menu-dark {
|
.ant-menu.ant-menu-dark {
|
||||||
background: @sider-background;
|
background: @sider-background;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-menu-dark .ant-menu-inline.ant-menu-sub {
|
.ant-menu-dark .ant-menu-inline.ant-menu-sub {
|
||||||
background-color: @sider-open-background;
|
background-color: @sider-open-background;
|
||||||
border-radius: @border-radius;
|
border-radius: @border-radius;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-btn-primary:hover,
|
.ant-btn-primary:hover,
|
||||||
.ant-btn-primary:focus {
|
.ant-btn-primary:focus {
|
||||||
background-color: @hover-color;
|
background-color: @hover-color;
|
||||||
border-color: @hover-color;
|
border-color: @hover-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-btn-primary[disabled]:hover {
|
.ant-btn-primary[disabled]:hover {
|
||||||
background-color: #f2f2f2;
|
background-color: #f2f2f2;
|
||||||
border-color: #d2d2d2;
|
border-color: #d2d2d2;
|
||||||
}
|
}
|
||||||
.ant-table {
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
.ant-table-thead > tr > th {
|
.ant-table-thead > tr > th {
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -7,18 +7,14 @@
|
|||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.password_form {
|
|
||||||
width: 310px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hint {
|
.hint {
|
||||||
background: #FFFBE6;
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid #FFE58F;
|
|
||||||
color: rgba(0,0,0,0.65);
|
|
||||||
line-height: 1.5;
|
|
||||||
padding: 8px 12px;
|
padding: 8px 12px;
|
||||||
|
color: rgba(0, 0, 0, 65%);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
line-height: 1.5;
|
||||||
|
background: #fffbe6;
|
||||||
|
border: 1px solid #ffe58f;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
.anticon {
|
.anticon {
|
||||||
@ -42,24 +38,25 @@
|
|||||||
:global {
|
:global {
|
||||||
.ant-form-item-control-input-content {
|
.ant-form-item-control-input-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.error {
|
.error {
|
||||||
background: #F2DEDE;
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid #A43A39;
|
|
||||||
color: #A43A39;
|
|
||||||
line-height: 38px;
|
|
||||||
padding-left: 12px;
|
padding-left: 12px;
|
||||||
|
color: #a43a39;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
line-height: 38px;
|
||||||
|
background: #f2dede;
|
||||||
|
border: 1px solid #a43a39;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
.anticon {
|
.anticon {
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -275,7 +275,7 @@ export class Login extends Component {
|
|||||||
<SimpleForm
|
<SimpleForm
|
||||||
formItems={this.formItems}
|
formItems={this.formItems}
|
||||||
name="normal_login"
|
name="normal_login"
|
||||||
className={styles.login_form}
|
className={styles['login-form']}
|
||||||
initialValues={this.defaultValue}
|
initialValues={this.defaultValue}
|
||||||
onFinish={this.onFinish}
|
onFinish={this.onFinish}
|
||||||
formRef={this.formRef}
|
formRef={this.formRef}
|
||||||
|
|||||||
@ -7,21 +7,22 @@
|
|||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login_form {
|
.login-form {
|
||||||
width: 310px;
|
width: 310px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-error {
|
.login-error {
|
||||||
background: #F2DEDE;
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid #A43A39;
|
|
||||||
color: #A43A39;
|
|
||||||
line-height: 1.5;
|
|
||||||
padding: 8px 12px;
|
padding: 8px 12px;
|
||||||
|
color: #a43a39;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
line-height: 1.5;
|
||||||
|
background: #f2dede;
|
||||||
|
border: 1px solid #a43a39;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
.anticon {
|
.anticon {
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -30,7 +30,7 @@ class ComputeService extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
renderAction = (item, index) => (
|
renderAction = (item, index) => (
|
||||||
<Row className={styles.sider_card} key={`${item.binary}-${index}`}>
|
<Row className={styles['sider-card']} key={`${item.binary}-${index}`}>
|
||||||
<Col
|
<Col
|
||||||
span={8}
|
span={8}
|
||||||
style={{ textAlign: 'left', whiteSpace: 'nowrap', overflow: 'hidden' }}
|
style={{ textAlign: 'left', whiteSpace: 'nowrap', overflow: 'hidden' }}
|
||||||
|
|||||||
@ -30,7 +30,7 @@ class NetworkService extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
renderAction = (item, index) => (
|
renderAction = (item, index) => (
|
||||||
<Row className={styles.sider_card} key={`${item.binary}-${index}`}>
|
<Row className={styles['sider-card']} key={`${item.binary}-${index}`}>
|
||||||
<Col
|
<Col
|
||||||
span={8}
|
span={8}
|
||||||
style={{ textAlign: 'left', whiteSpace: 'nowrap', overflow: 'hidden' }}
|
style={{ textAlign: 'left', whiteSpace: 'nowrap', overflow: 'hidden' }}
|
||||||
|
|||||||
@ -186,7 +186,7 @@ export class virtualResourceInfo extends Component {
|
|||||||
return (
|
return (
|
||||||
<Card
|
<Card
|
||||||
loading={virtualResourceLoading}
|
loading={virtualResourceLoading}
|
||||||
className={styles.resourceOverview}
|
className={styles['resource-overview']}
|
||||||
title={t('Virtual Resource Overview')}
|
title={t('Virtual Resource Overview')}
|
||||||
bordered={false}
|
bordered={false}
|
||||||
>
|
>
|
||||||
|
|||||||
@ -5,35 +5,28 @@
|
|||||||
padding: 44px;
|
padding: 44px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|
||||||
.actionButton {
|
|
||||||
line-height: 88px;
|
|
||||||
background: #FFFFFF;
|
|
||||||
box-shadow: 0px 0px 4px 1px rgba(175, 175, 175, 0.5);
|
|
||||||
border-radius: 9px;
|
|
||||||
opacity: 0.9;
|
|
||||||
|
|
||||||
font-size: 18px;
|
|
||||||
color: #A3A3A3;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
.ant-card {
|
.ant-card {
|
||||||
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.09);
|
box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 9%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-card-head {
|
||||||
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart{
|
.chart {
|
||||||
.resource{
|
.resource {
|
||||||
font-size: 16px;
|
|
||||||
display: block;
|
display: block;
|
||||||
padding-bottom: 12px;
|
|
||||||
margin-right: 200px;
|
margin-right: 200px;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.num {
|
.num {
|
||||||
font-size: 14px;
|
|
||||||
// display: block;
|
|
||||||
padding-top: 12px;
|
padding-top: 12px;
|
||||||
color: #A3A3A3;
|
color: #a3a3a3;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
.ant-avatar-square {
|
.ant-avatar-square {
|
||||||
@ -49,30 +42,30 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.resourceOverview{
|
.resource-overview {
|
||||||
.card{
|
.card {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
// padding: 30px 0 30px 0;
|
|
||||||
|
|
||||||
.label{
|
.label {
|
||||||
|
display: block;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
.all{
|
|
||||||
|
.all {
|
||||||
|
display: block;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.status{
|
.status {
|
||||||
color: #A3A3A3;
|
color: #a3a3a3;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
.ant-badge-status-text{
|
.ant-badge-status-text {
|
||||||
margin-left: 4px;
|
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
color: #A3A3A3;
|
margin-left: 4px;
|
||||||
|
color: #a3a3a3;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -83,48 +76,41 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
.top {
|
.top {
|
||||||
.sider_card {
|
.sider-card {
|
||||||
margin: 4px 0 4px 0;
|
margin: 4px 0;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
.ant-descriptions-view {
|
.ant-descriptions-view {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 130px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
height: 130px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-descriptions-item-label {
|
.ant-descriptions-item-label {
|
||||||
width: 130px;
|
width: 130px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:global {
|
|
||||||
.ant-card-head {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.outer {
|
.outer {
|
||||||
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 10rem;
|
height: 10rem;
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
|
||||||
.inner {
|
.inner {
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.inner::-webkit-scrollbar {
|
.inner::-webkit-scrollbar {
|
||||||
@ -132,10 +118,10 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:global{
|
:global {
|
||||||
.ant-descriptions-item-container {
|
.ant-descriptions-item-container {
|
||||||
.ant-descriptions-item-content{
|
.ant-descriptions-item-content {
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -120,7 +120,7 @@ export class ProjectInfo extends Component {
|
|||||||
onClick={this.handleDetailInfo}
|
onClick={this.handleDetailInfo}
|
||||||
icon={icon}
|
icon={icon}
|
||||||
type="link"
|
type="link"
|
||||||
className={styles.role_button}
|
className={styles['role-button']}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -185,7 +185,7 @@ export class QuotaOverview extends Component {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Tooltip title={title}>
|
<Tooltip title={title}>
|
||||||
<div className={styles.progress_title}>{title}</div>
|
<div className={styles['progress-title']}>{title}</div>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<Progress
|
<Progress
|
||||||
style={{ marginTop: 13, marginBottom: 13 }}
|
style={{ marginTop: 13, marginBottom: 13 }}
|
||||||
|
|||||||
@ -53,9 +53,9 @@ const actions = [
|
|||||||
|
|
||||||
export class Overview extends Component {
|
export class Overview extends Component {
|
||||||
renderAction = (item) => (
|
renderAction = (item) => (
|
||||||
<Row className={styles.actionButton} gutter={[8]}>
|
<Row className={styles['action-button']} gutter={[8]}>
|
||||||
<Col span={8} className={styles.main_icon}>
|
<Col span={8} className={styles['main-icon']}>
|
||||||
<img alt="avatar" src={item.avatar} className={styles.actionIcon} />
|
<img alt="avatar" src={item.avatar} className={styles['action-icon']} />
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={16} style={{ textAlign: 'center' }}>
|
<Col span={16} style={{ textAlign: 'center' }}>
|
||||||
{item.label}
|
{item.label}
|
||||||
|
|||||||
@ -5,24 +5,23 @@
|
|||||||
padding: 44px;
|
padding: 44px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|
||||||
.main_icon {
|
.main-icon {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionButton {
|
.action-button {
|
||||||
line-height: 88px;
|
|
||||||
background: #ffffff;
|
|
||||||
box-shadow: 0px 0px 4px 1px rgba(175, 175, 175, 0.5);
|
|
||||||
border-radius: 9px;
|
|
||||||
opacity: 0.9;
|
|
||||||
|
|
||||||
font-size: 18px;
|
|
||||||
color: #a3a3a3;
|
color: #a3a3a3;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 88px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 9px;
|
||||||
|
box-shadow: 0 0 4px 1px rgba(175, 175, 175, 50%);
|
||||||
|
opacity: 0.9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionIcon {
|
.action-icon {
|
||||||
display: block;
|
display: block;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
@ -31,7 +30,11 @@
|
|||||||
|
|
||||||
:global {
|
:global {
|
||||||
.ant-card {
|
.ant-card {
|
||||||
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.09);
|
box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 9%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-card-head {
|
||||||
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -44,14 +47,14 @@
|
|||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
font-size: 21px;
|
|
||||||
color: #252525;
|
color: #252525;
|
||||||
|
font-size: 21px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action {
|
.action {
|
||||||
font-size: 16px;
|
|
||||||
color: #000000;
|
|
||||||
margin-left: 40px;
|
margin-left: 40px;
|
||||||
|
color: #000;
|
||||||
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -62,9 +65,10 @@
|
|||||||
|
|
||||||
.project {
|
.project {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.meta {
|
.meta {
|
||||||
padding-bottom: 16px;
|
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
|
padding-bottom: 16px;
|
||||||
border-bottom: 1px dashed #e8e8e8;
|
border-bottom: 1px dashed #e8e8e8;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -74,34 +78,27 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.role_button {
|
.role-button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0px;
|
|
||||||
right: 24px;
|
right: 24px;
|
||||||
|
bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
:global {
|
|
||||||
.ant-card-head {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.outer {
|
.outer {
|
||||||
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 10rem;
|
height: 10rem;
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
|
||||||
.inner {
|
.inner {
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
}
|
}
|
||||||
@ -112,8 +109,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.bottom {
|
.bottom {
|
||||||
//margin: 16px 0;
|
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
.ant-card {
|
.ant-card {
|
||||||
box-shadow: unset;
|
box-shadow: unset;
|
||||||
@ -122,8 +117,8 @@
|
|||||||
|
|
||||||
.title {
|
.title {
|
||||||
.text {
|
.text {
|
||||||
font-size: 16px;
|
|
||||||
color: #252525;
|
color: #252525;
|
||||||
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge {
|
.badge {
|
||||||
@ -143,10 +138,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.action {
|
.action {
|
||||||
font-size: 12px;
|
|
||||||
color: #0068ff;
|
|
||||||
float: right;
|
float: right;
|
||||||
margin-top: 6px;
|
margin-top: 6px;
|
||||||
|
color: #0068ff;
|
||||||
|
font-size: 12px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -159,20 +154,20 @@
|
|||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
|
|
||||||
.ant-card-head-title {
|
.ant-card-head-title {
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #565656;
|
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
|
color: #565656;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress_title {
|
.progress-title {
|
||||||
font-size: 14px;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
font-size: 14px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -472,14 +472,14 @@ export class BaseDetail extends Base {
|
|||||||
if (globalRootStore.hasAdminRole) {
|
if (globalRootStore.hasAdminRole) {
|
||||||
options.splice(1, 0, {
|
options.splice(1, 0, {
|
||||||
label: t('Details'),
|
label: t('Details'),
|
||||||
content: <pre className={styles.preWrap}>{fault.details}</pre>,
|
content: <pre className={styles['pre-wrap']}>{fault.details}</pre>,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
labelCol: 4,
|
labelCol: 4,
|
||||||
title: t('Error'),
|
title: t('Error'),
|
||||||
options,
|
options,
|
||||||
className: styles.errorCard,
|
className: styles['error-card'],
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -12,6 +12,7 @@
|
|||||||
|
|
||||||
.vm-interface:first-child {
|
.vm-interface:first-child {
|
||||||
border-left: @topo-line;
|
border-left: @topo-line;
|
||||||
|
|
||||||
.interface-line {
|
.interface-line {
|
||||||
border-left: none;
|
border-left: none;
|
||||||
}
|
}
|
||||||
@ -23,12 +24,13 @@
|
|||||||
padding-bottom: 20px;
|
padding-bottom: 20px;
|
||||||
|
|
||||||
.interface-line {
|
.interface-line {
|
||||||
|
display: inline-block;
|
||||||
width: 8px;
|
width: 8px;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
border-left: @topo-line;
|
|
||||||
border-bottom: @topo-line;
|
border-bottom: @topo-line;
|
||||||
display: inline-block;
|
border-left: @topo-line;
|
||||||
}
|
}
|
||||||
|
|
||||||
.interface-item {
|
.interface-item {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
@ -37,8 +39,8 @@
|
|||||||
.vm {
|
.vm {
|
||||||
padding: @mid-space;
|
padding: @mid-space;
|
||||||
background-color: @resource-box-bg;
|
background-color: @resource-box-bg;
|
||||||
border-radius: 4px;
|
|
||||||
border: @resource-box-border;
|
border: @resource-box-border;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
.vm-icon {
|
.vm-icon {
|
||||||
display: inline;
|
display: inline;
|
||||||
@ -50,9 +52,9 @@
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 6px;
|
width: 6px;
|
||||||
height: 6px;
|
height: 6px;
|
||||||
border-radius: 6px;
|
|
||||||
margin-right: 13px;
|
margin-right: 13px;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vm-info {
|
.vm-info {
|
||||||
@ -60,6 +62,7 @@
|
|||||||
|
|
||||||
.info-item {
|
.info-item {
|
||||||
padding-bottom: @min-space;
|
padding-bottom: @min-space;
|
||||||
|
|
||||||
.info-item-icon {
|
.info-item-icon {
|
||||||
display: inline;
|
display: inline;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
@ -78,30 +81,30 @@
|
|||||||
|
|
||||||
.volume-inline {
|
.volume-inline {
|
||||||
width: 36px;
|
width: 36px;
|
||||||
border-right: @topo-line;
|
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
|
border-right: @topo-line;
|
||||||
}
|
}
|
||||||
|
|
||||||
.volume-content {
|
.volume-content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
||||||
.attached-volume {
|
.attached-volume {
|
||||||
padding: @min-space 0;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
padding: @min-space 0;
|
||||||
|
|
||||||
.attached-volume-line {
|
.attached-volume-line {
|
||||||
border-bottom: @topo-line;
|
|
||||||
width: 60px;
|
width: 60px;
|
||||||
height: 52px;
|
height: 52px;
|
||||||
|
border-bottom: @topo-line;
|
||||||
}
|
}
|
||||||
|
|
||||||
.attached-volume-content {
|
.attached-volume-content {
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
padding: @mid-space;
|
padding: @mid-space;
|
||||||
background-color: @resource-box-bg;
|
background-color: @resource-box-bg;
|
||||||
border-radius: 4px;
|
|
||||||
border: @resource-box-border;
|
border: @resource-box-border;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
.volume-icon {
|
.volume-icon {
|
||||||
padding-right: @lg-space;
|
padding-right: @lg-space;
|
||||||
@ -110,6 +113,7 @@
|
|||||||
|
|
||||||
.volume-info {
|
.volume-info {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
||||||
.volume-info-item {
|
.volume-info-item {
|
||||||
padding-bottom: @min-space;
|
padding-bottom: @min-space;
|
||||||
|
|
||||||
@ -117,6 +121,7 @@
|
|||||||
margin-right: @min-space;
|
margin-right: @min-space;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:last-child {
|
:last-child {
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
@ -126,27 +131,29 @@
|
|||||||
|
|
||||||
.attach-action-line {
|
.attach-action-line {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
border-bottom: @topo-line;
|
|
||||||
width: 60px;
|
width: 60px;
|
||||||
height: @lg-space;
|
height: @lg-space;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
|
border-bottom: @topo-line;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.attach-btn {
|
.attach-btn {
|
||||||
max-width: 100px;
|
max-width: 100px;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
max-width: 80px;
|
max-width: 80px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.errorCard {
|
.error-card {
|
||||||
flex-grow: 0;
|
flex-grow: 0;
|
||||||
|
|
||||||
.preWrap {
|
.pre-wrap {
|
||||||
|
font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
font-family: Monaco, Menlo, Consolas, Courier New, monospace;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,30 +4,34 @@
|
|||||||
min-height: calc(100vh - 108px);
|
min-height: calc(100vh - 108px);
|
||||||
padding: 0 @body-padding;
|
padding: 0 @body-padding;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapse {
|
.collapse {
|
||||||
// background: #FFFFFF;
|
margin-bottom: 24px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel {
|
.panel {
|
||||||
background: #FFFFFF;
|
|
||||||
font-size: larger;
|
|
||||||
padding-bottom: 12px;
|
|
||||||
padding-top: 12px;
|
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
|
padding-top: 12px;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
font-size: larger;
|
||||||
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-divider {
|
.header-divider {
|
||||||
margin: 0 5px 0 5px;
|
|
||||||
background-color: @color-text-caption;
|
|
||||||
width: 2px;
|
width: 2px;
|
||||||
|
margin: 0 5px;
|
||||||
|
background-color: @color-text-caption;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image {
|
.image {
|
||||||
width: 70px;
|
width: 70px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.radio-button {
|
.radio-button {
|
||||||
:global {
|
:global {
|
||||||
.ant-radio-button-wrapper {
|
.ant-radio-button-wrapper {
|
||||||
width: 250px;
|
width: 250px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
margin-right: 40px;
|
margin-right: 40px;
|
||||||
@ -36,6 +40,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.security-group-text {
|
.security-group-text {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +1,8 @@
|
|||||||
.input {
|
.input {
|
||||||
margin-left: 16px;
|
|
||||||
margin-right: 32px;
|
margin-right: 32px;
|
||||||
|
margin-left: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.number-input {
|
.number-input {
|
||||||
min-width: 165px;
|
min-width: 165px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +1,8 @@
|
|||||||
.input {
|
.input {
|
||||||
margin-left: 16px;
|
|
||||||
margin-right: 32px;
|
margin-right: 32px;
|
||||||
|
margin-left: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.number-input {
|
.number-input {
|
||||||
min-width: 165px;
|
min-width: 165px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,17 +3,21 @@
|
|||||||
.mb16 {
|
.mb16 {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tip {
|
.tip {
|
||||||
color: @color-text-body;
|
color: @color-text-body;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tip-title {
|
.tip-title {
|
||||||
font-weight: 400;
|
|
||||||
color: @color-text-title;
|
color: @color-text-title;
|
||||||
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tip-icon {
|
.tip-icon {
|
||||||
color: rgba(254, 223, 64, 1);
|
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
|
color: rgba(254, 223, 64, 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tip-content {
|
.tip-content {
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,8 +1,9 @@
|
|||||||
.flavor-label {
|
.flavor-label {
|
||||||
margin-right: 16px;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
min-width: 50px;
|
min-width: 50px;
|
||||||
|
margin-right: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flavor-tab {
|
.flavor-tab {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,78 +1,34 @@
|
|||||||
@import '~styles/variables';
|
@import '~styles/variables';
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
overflow-y: auto;
|
|
||||||
margin-left: @nav-width - 20px;
|
margin-left: @nav-width - 20px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
|
||||||
|
|
||||||
.navWrapper {
|
|
||||||
position: fixed;
|
|
||||||
top: 88px;
|
|
||||||
width: @nav-width;
|
|
||||||
height: calc(100vh - 108px);
|
|
||||||
padding: 0 20px 40px 20px;
|
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
|
z-index: 1;
|
||||||
width: auto;
|
width: auto;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
z-index: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
color: #ffffff;
|
color: #fff;
|
||||||
|
vertical-align: middle;
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
.h3 {
|
.h3 {
|
||||||
color: #ffffff;
|
color: #fff;
|
||||||
line-height: 1.33;
|
line-height: 1.33;
|
||||||
text-shadow: 0 2px 4px rgba(36, 46, 66, 0.1);
|
text-shadow: 0 2px 4px rgba(36, 46, 66, 10%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& > p {
|
& > p {
|
||||||
color: #eff4f9;
|
|
||||||
margin-top: 3px;
|
margin-top: 3px;
|
||||||
}
|
color: #eff4f9;
|
||||||
}
|
|
||||||
|
|
||||||
.titleWrapper {
|
|
||||||
position: relative;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 12px;
|
|
||||||
border-radius: @border-radius;
|
|
||||||
background-color: @background-color;
|
|
||||||
box-shadow: 0 8px 16px 0 rgba(36, 46, 66, 0.2);
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
padding: 8px;
|
|
||||||
margin-right: 12px;
|
|
||||||
border-radius: 100px 0 100px 100px;
|
|
||||||
background-color: rgba(239, 244, 249, 0.08);
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
|
|
||||||
:global .h6 {
|
|
||||||
font-family: @font-family-id;
|
|
||||||
line-height: 1.43;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
color: #d8dee5;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -81,4 +37,4 @@
|
|||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,9 +1,10 @@
|
|||||||
.detail {
|
.detail {
|
||||||
margin: 0 16px;
|
margin: 0 16px;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
background-color: #FFFFFF;
|
background-color: #fff;
|
||||||
border: 1px solid #efefef;
|
border: 1px solid #efefef;
|
||||||
|
|
||||||
|
/* stylelint-disable-next-line selector-class-pattern */
|
||||||
.public_key {
|
.public_key {
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
-ms-word-wrap: break-word;
|
-ms-word-wrap: break-word;
|
||||||
|
|||||||
@ -4,30 +4,34 @@
|
|||||||
min-height: calc(100vh - 108px);
|
min-height: calc(100vh - 108px);
|
||||||
padding: 0 @body-padding;
|
padding: 0 @body-padding;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapse {
|
.collapse {
|
||||||
// background: #FFFFFF;
|
margin-bottom: 24px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel {
|
.panel {
|
||||||
background: #FFFFFF;
|
|
||||||
font-size: larger;
|
|
||||||
padding-bottom: 12px;
|
|
||||||
padding-top: 12px;
|
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
|
padding-top: 12px;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
font-size: larger;
|
||||||
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-divider {
|
.header-divider {
|
||||||
margin: 0 5px 0 5px;
|
|
||||||
background-color: @color-text-caption;
|
|
||||||
width: 2px;
|
width: 2px;
|
||||||
|
margin: 0 5px;
|
||||||
|
background-color: @color-text-caption;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image {
|
.image {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.radio-button {
|
.radio-button {
|
||||||
:global {
|
:global {
|
||||||
.ant-radio-button-wrapper {
|
.ant-radio-button-wrapper {
|
||||||
width: 250px;
|
width: 250px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
margin-right: 40px;
|
margin-right: 40px;
|
||||||
@ -35,6 +39,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.security-group-text {
|
.security-group-text {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -66,7 +66,7 @@ export default class BaseDetail extends Base {
|
|||||||
|
|
||||||
get jsonCard() {
|
get jsonCard() {
|
||||||
const content = (
|
const content = (
|
||||||
<pre className={styles.json_data}>
|
<pre className={styles['json-data']}>
|
||||||
{JSON.stringify(this.detailData, null, 4)}
|
{JSON.stringify(this.detailData, null, 4)}
|
||||||
</pre>
|
</pre>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
.json_data {
|
.json-data {
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
@import '~styles/variables';
|
@import '~styles/variables';
|
||||||
|
|
||||||
.header-divider {
|
.header-divider {
|
||||||
margin: 0 5px 0 5px;
|
|
||||||
background-color: @color-text-caption;
|
|
||||||
width: 2px;
|
width: 2px;
|
||||||
|
margin: 0 5px;
|
||||||
|
background-color: @color-text-caption;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
@import '~styles/variables';
|
@import '~styles/variables';
|
||||||
|
|
||||||
.header-divider {
|
.header-divider {
|
||||||
margin: 0 5px 0 5px;
|
|
||||||
background-color: @color-text-caption;
|
|
||||||
width: 2px;
|
width: 2px;
|
||||||
|
margin: 0 5px;
|
||||||
|
background-color: @color-text-caption;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,34 +4,39 @@
|
|||||||
min-height: calc(100vh - 108px);
|
min-height: calc(100vh - 108px);
|
||||||
padding: 0 @body-padding;
|
padding: 0 @body-padding;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tablewrapper {
|
.tablewrapper {
|
||||||
min-height: calc(100vh - 108px);
|
min-height: calc(100vh - 108px);
|
||||||
margin-top: -@body-padding;
|
margin-top: -@body-padding;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapse {
|
.collapse {
|
||||||
// background: #FFFFFF;
|
margin-bottom: 24px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel {
|
.panel {
|
||||||
background: #FFFFFF;
|
|
||||||
font-size: larger;
|
|
||||||
padding-bottom: 12px;
|
|
||||||
padding-top: 12px;
|
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
|
padding-top: 12px;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
font-size: larger;
|
||||||
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-divider {
|
.header-divider {
|
||||||
margin: 0 5px 0 5px;
|
|
||||||
background-color: @color-text-caption;
|
|
||||||
width: 2px;
|
width: 2px;
|
||||||
|
margin: 0 5px;
|
||||||
|
background-color: @color-text-caption;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image {
|
.image {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.radio-button {
|
.radio-button {
|
||||||
:global {
|
:global {
|
||||||
.ant-radio-button-wrapper {
|
.ant-radio-button-wrapper {
|
||||||
width: 250px;
|
width: 250px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
margin-right: 40px;
|
margin-right: 40px;
|
||||||
@ -39,21 +44,20 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.security-group-text {
|
.security-group-text {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-title {
|
.header-title {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-label {
|
.title-label {
|
||||||
font-style: italic;
|
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-button {
|
.header-button {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
.header-divider {
|
|
||||||
margin: 0 14px 0 24px;
|
|
||||||
background-color: @color-text-caption;
|
|
||||||
width: 2px;
|
|
||||||
}
|
|
||||||
@ -1,36 +1,36 @@
|
|||||||
.header {
|
.header {
|
||||||
font-size: 16px;
|
color: rgba(0, 0, 0, 85%);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: rgba(0, 0, 0, 0.85);
|
font-size: 16px;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.list {
|
.list {
|
||||||
background-color: #ffffff;
|
background-color: #fff;
|
||||||
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
|
border: none;
|
||||||
border: none;
|
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 5%);
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
height: 76px;
|
height: 76px;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: 16px;
|
color: rgba(0, 0, 0, 65%);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: rgba(0, 0, 0, 0.65);
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status {
|
.status {
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: 14px;
|
color: rgba(0, 0, 0, 65%);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: rgba(0, 0, 0, 0.65);
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
padding: 16px;
|
height: 100%;
|
||||||
overflow: auto;
|
padding: 16px;
|
||||||
height: 100%;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -29,7 +29,7 @@ const topCardList = [
|
|||||||
metricKey: 'mysqlService.runningTime',
|
metricKey: 'mysqlService.runningTime',
|
||||||
},
|
},
|
||||||
renderContent: ({ data }) => (
|
renderContent: ({ data }) => (
|
||||||
<div className={styles.topContent}>
|
<div className={styles['top-content']}>
|
||||||
{/* 转化为毫秒 */}
|
{/* 转化为毫秒 */}
|
||||||
{formatUsedTime(get(data, '[0].y', 0) * 1000)}
|
{formatUsedTime(get(data, '[0].y', 0) * 1000)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -43,7 +43,7 @@ const topCardList = [
|
|||||||
},
|
},
|
||||||
renderContent: ({ data }) => {
|
renderContent: ({ data }) => {
|
||||||
return (
|
return (
|
||||||
<div className={styles.topContent}>
|
<div className={styles['top-content']}>
|
||||||
<Row style={{ width: '100%', textAlign: 'center' }}>
|
<Row style={{ width: '100%', textAlign: 'center' }}>
|
||||||
<Col span={12}>{data.up + t('Up')}</Col>
|
<Col span={12}>{data.up + t('Up')}</Col>
|
||||||
<Col span={12}>{data.down + t('Down')}</Col>
|
<Col span={12}>{data.down + t('Down')}</Col>
|
||||||
|
|||||||
@ -1,29 +1,29 @@
|
|||||||
.header {
|
.header {
|
||||||
font-size: 16px;
|
color: rgba(0, 0, 0, 85%);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: rgba(0, 0, 0, 0.85);
|
font-size: 16px;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.list {
|
.list {
|
||||||
background-color: #ffffff;
|
background-color: #fff;
|
||||||
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
|
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 5%);
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
height: 76px;
|
height: 76px;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: 16px;
|
color: rgba(0, 0, 0, 65%);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: rgba(0, 0, 0, 0.65);
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status {
|
.status {
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: 14px;
|
color: rgba(0, 0, 0, 65%);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: rgba(0, 0, 0, 0.65);
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -84,11 +84,11 @@ const Index = function () {
|
|||||||
<Col flex="1 1">
|
<Col flex="1 1">
|
||||||
<div className={styles.card}>
|
<div className={styles.card}>
|
||||||
<Row style={{ height: '100%' }}>
|
<Row style={{ height: '100%' }}>
|
||||||
<Col span={12} className={styles.alertCardLine}>
|
<Col span={12} className={styles['alert-card-line']}>
|
||||||
<div className={styles.number}>{cpuCount}</div>
|
<div className={styles.number}>{cpuCount}</div>
|
||||||
<div>{t('Today CPU usage > 80% alert')}</div>
|
<div>{t('Today CPU usage > 80% alert')}</div>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={12} className={styles.alertCardLine}>
|
<Col span={12} className={styles['alert-card-line']}>
|
||||||
<div className={styles.number}>{memCount}</div>
|
<div className={styles.number}>{memCount}</div>
|
||||||
<div>{t('Today Memory usage > 80% alert')}</div>
|
<div>{t('Today Memory usage > 80% alert')}</div>
|
||||||
</Col>
|
</Col>
|
||||||
|
|||||||
@ -28,7 +28,7 @@ export const physicalNodeLeftTopCardList = [
|
|||||||
const used = get(data[0], 'y', 0);
|
const used = get(data[0], 'y', 0);
|
||||||
const total = get(data[1], 'y', 0);
|
const total = get(data[1], 'y', 0);
|
||||||
return (
|
return (
|
||||||
<div className={styles.topContent}>
|
<div className={styles['top-content']}>
|
||||||
<div>
|
<div>
|
||||||
<Row
|
<Row
|
||||||
style={{
|
style={{
|
||||||
@ -68,7 +68,7 @@ export const physicalNodeLeftTopCardList = [
|
|||||||
const used = getSuitableValue(usedValue, 'memory');
|
const used = getSuitableValue(usedValue, 'memory');
|
||||||
const total = getSuitableValue(totalValue, 'memory');
|
const total = getSuitableValue(totalValue, 'memory');
|
||||||
return (
|
return (
|
||||||
<div className={styles.topContent}>
|
<div className={styles['top-content']}>
|
||||||
<div>
|
<div>
|
||||||
<Row
|
<Row
|
||||||
style={{
|
style={{
|
||||||
@ -110,7 +110,7 @@ export const physicalNodeLeftTopCardList = [
|
|||||||
const total = getSuitableValue(totalValue, 'disk');
|
const total = getSuitableValue(totalValue, 'disk');
|
||||||
const progressPercentage = computePercentage(usedValue, totalValue);
|
const progressPercentage = computePercentage(usedValue, totalValue);
|
||||||
return (
|
return (
|
||||||
<div className={styles.topContent}>
|
<div className={styles['top-content']}>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
width: '100%',
|
width: '100%',
|
||||||
@ -280,7 +280,7 @@ export const storageLeftCardList = [
|
|||||||
const data = get(store.data, 'y', 0);
|
const data = get(store.data, 'y', 0);
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={styles.topContent}
|
className={styles['top-content']}
|
||||||
style={{
|
style={{
|
||||||
fontSize: 28,
|
fontSize: 28,
|
||||||
fontWeight: 600,
|
fontWeight: 600,
|
||||||
@ -306,7 +306,7 @@ export const storageLeftCardList = [
|
|||||||
const used = getSuitableValue(usedValue, 'disk');
|
const used = getSuitableValue(usedValue, 'disk');
|
||||||
const total = getSuitableValue(totalValue, 'disk');
|
const total = getSuitableValue(totalValue, 'disk');
|
||||||
return (
|
return (
|
||||||
<div className={styles.topContent}>
|
<div className={styles['top-content']}>
|
||||||
<div>
|
<div>
|
||||||
<Row
|
<Row
|
||||||
style={{
|
style={{
|
||||||
@ -346,7 +346,7 @@ export const storageLeftCardList = [
|
|||||||
(totalValue - get(data[0], 'y', 0)).toFixed(2)
|
(totalValue - get(data[0], 'y', 0)).toFixed(2)
|
||||||
);
|
);
|
||||||
return (
|
return (
|
||||||
<div className={styles.topContent}>
|
<div className={styles['top-content']}>
|
||||||
<div>
|
<div>
|
||||||
<Row
|
<Row
|
||||||
style={{
|
style={{
|
||||||
|
|||||||
@ -61,7 +61,7 @@ const Index = () => {
|
|||||||
},
|
},
|
||||||
visibleHeight: 200,
|
visibleHeight: 200,
|
||||||
renderContent: (store) => (
|
renderContent: (store) => (
|
||||||
<div className={styles.topContent}>{store.data}</div>
|
<div className={styles['top-content']}>{store.data}</div>
|
||||||
),
|
),
|
||||||
}}
|
}}
|
||||||
topCardList={topCardList}
|
topCardList={topCardList}
|
||||||
|
|||||||
@ -1,127 +1,77 @@
|
|||||||
.container {
|
.container {
|
||||||
.card {
|
.card {
|
||||||
padding: 16px;
|
height: 100%;
|
||||||
background-color: #ffffff;
|
padding: 16px;
|
||||||
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.05),
|
color: #000;
|
||||||
0px 0px 10px 0px rgba(0, 0, 0, 0.05);
|
background-color: #fff;
|
||||||
color: #000000;
|
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 5%), 0 0 10px 0 rgba(0, 0, 0, 5%);
|
||||||
height: 100%;
|
|
||||||
|
.tabs {
|
||||||
.tabs {
|
:global {
|
||||||
:global {
|
.ant-tabs-tab {
|
||||||
.ant-tabs-tab {
|
margin-right: 20px;
|
||||||
margin-right: 20px;
|
border-bottom: 1px solid #f0f0f0;
|
||||||
border-bottom: 1px solid #f0f0f0;
|
}
|
||||||
}
|
|
||||||
|
.ant-tabs-nav::before {
|
||||||
.ant-tabs-nav::before {
|
border-bottom: none;
|
||||||
border-bottom: none;
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
.alert-card-line {
|
||||||
.alertCardLine {
|
display: flex;
|
||||||
display: flex;
|
flex-direction: column;
|
||||||
flex-direction: column;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
|
||||||
|
.number {
|
||||||
.number {
|
color: rgb(232, 104, 4);
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
color: rgb(232, 104, 74);
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.alertCardTitle {
|
.outer {
|
||||||
font-size: 14px;
|
position: relative;
|
||||||
font-weight: 400;
|
width: 100%;
|
||||||
color: #000000;
|
height: 100%;
|
||||||
}
|
overflow: hidden;
|
||||||
|
font-size: 14px;
|
||||||
.alertInfo {
|
|
||||||
margin-top: 6px;
|
.inner {
|
||||||
|
position: absolute;
|
||||||
.alertNumber {
|
left: 0;
|
||||||
font-size: 40px;
|
width: 100%;
|
||||||
font-weight: 600;
|
height: 100%;
|
||||||
}
|
overflow-x: hidden;
|
||||||
|
overflow-y: scroll;
|
||||||
.alertLevel {
|
}
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 400;
|
.inner::-webkit-scrollbar {
|
||||||
color: rgba(0, 0, 0, 0.65);
|
display: none;
|
||||||
margin-top: 12px;
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
.top-content {
|
||||||
.alertCardBottom {
|
display: flex;
|
||||||
padding: 0 26px;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
.buttonTitle {
|
height: 100px;
|
||||||
font-size: 12px;
|
font-weight: 500;
|
||||||
font-weight: 400;
|
font-size: 24px;
|
||||||
color: #000000;
|
}
|
||||||
margin-bottom: 15px;
|
|
||||||
height: 20px;
|
.tabs {
|
||||||
line-height: 20px;
|
:global {
|
||||||
}
|
.ant-tabs-tab {
|
||||||
|
margin-right: 20px;
|
||||||
.alertLineInfo {
|
border-bottom: 1px solid #f0f0f0;
|
||||||
font-size: 12px;
|
}
|
||||||
font-weight: 400;
|
|
||||||
height: 100%;
|
.ant-tabs-nav::before {
|
||||||
color: rgba(0, 0, 0, 0.65);
|
border-bottom: none;
|
||||||
margin-bottom: 16px;
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.outer {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
font-size: 14px;
|
|
||||||
|
|
||||||
.inner {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: scroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inner::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexColumnAround {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.topContent {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 500;
|
|
||||||
height: 100px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabs {
|
|
||||||
:global {
|
|
||||||
.ant-tabs-tab {
|
|
||||||
margin-right: 20px;
|
|
||||||
border-bottom: 1px solid #f0f0f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-tabs-nav::before {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@ -32,7 +32,9 @@ export const topCardList = [
|
|||||||
metricKey: 'physicalNode.cpuCores',
|
metricKey: 'physicalNode.cpuCores',
|
||||||
},
|
},
|
||||||
renderContent: (value) => (
|
renderContent: (value) => (
|
||||||
<div className={styles.topContent}>{get(value.data, 'length', 0)}</div>
|
<div className={styles['top-content']}>
|
||||||
|
{get(value.data, 'length', 0)}
|
||||||
|
</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -42,7 +44,7 @@ export const topCardList = [
|
|||||||
metricKey: 'physicalNode.totalMem',
|
metricKey: 'physicalNode.totalMem',
|
||||||
},
|
},
|
||||||
renderContent: (value) => (
|
renderContent: (value) => (
|
||||||
<div className={styles.topContent}>
|
<div className={styles['top-content']}>
|
||||||
{getSuitableValue(get(value.data[0], 'y', 0), 'memory')}
|
{getSuitableValue(get(value.data[0], 'y', 0), 'memory')}
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
@ -54,7 +56,7 @@ export const topCardList = [
|
|||||||
metricKey: 'physicalNode.systemRunningTime',
|
metricKey: 'physicalNode.systemRunningTime',
|
||||||
},
|
},
|
||||||
renderContent: (value) => (
|
renderContent: (value) => (
|
||||||
<div className={styles.topContent}>
|
<div className={styles['top-content']}>
|
||||||
{formatUsedTime(
|
{formatUsedTime(
|
||||||
(moment().unix() -
|
(moment().unix() -
|
||||||
parseInt(get(value.data[0], 'y', moment().unix()), 10)) *
|
parseInt(get(value.data[0], 'y', moment().unix()), 10)) *
|
||||||
|
|||||||
@ -149,7 +149,7 @@ const RenderTabs = () => {
|
|||||||
<TabPane tab="OSDs" key="osd" />
|
<TabPane tab="OSDs" key="osd" />
|
||||||
</Tabs>
|
</Tabs>
|
||||||
{/* {isLoading ? (
|
{/* {isLoading ? (
|
||||||
<div className={styles.spinContainer}>
|
<div className={styles['spin-container']}>
|
||||||
<Spin />
|
<Spin />
|
||||||
</div>
|
</div>
|
||||||
) : ( */}
|
) : ( */}
|
||||||
|
|||||||
@ -42,7 +42,7 @@ const StorageCluster = () => {
|
|||||||
const d = get(data, 'y', 0);
|
const d = get(data, 'y', 0);
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={styles.topContent}
|
className={styles['top-content']}
|
||||||
style={{
|
style={{
|
||||||
fontSize: 28,
|
fontSize: 28,
|
||||||
fontWeight: 600,
|
fontWeight: 600,
|
||||||
@ -139,7 +139,7 @@ const StorageCluster = () => {
|
|||||||
},
|
},
|
||||||
renderContent: ({ data }) => {
|
renderContent: ({ data }) => {
|
||||||
return (
|
return (
|
||||||
<Row className={styles.OSDs}>
|
<Row className={styles.osd}>
|
||||||
<Col span={8} />
|
<Col span={8} />
|
||||||
<Col span={8} style={{ fontSize: 14, opacity: 0.8 }}>
|
<Col span={8} style={{ fontSize: 14, opacity: 0.8 }}>
|
||||||
{t('Up')}
|
{t('Up')}
|
||||||
@ -190,7 +190,7 @@ const StorageCluster = () => {
|
|||||||
const total = getSuitableValue(totalValue, 'disk');
|
const total = getSuitableValue(totalValue, 'disk');
|
||||||
const progressPercentage = computePercentage(usedValue, totalValue);
|
const progressPercentage = computePercentage(usedValue, totalValue);
|
||||||
return (
|
return (
|
||||||
<div className={styles.topContent}>
|
<div className={styles['top-content']}>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
width: '100%',
|
width: '100%',
|
||||||
|
|||||||
@ -1,18 +1,19 @@
|
|||||||
.OSDs {
|
.osd {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
color: rgba(0, 0, 0, 85%);
|
||||||
|
font-weight: 500;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: 500;
|
|
||||||
color: rgba(0, 0, 0, 0.85);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
overflow: auto;
|
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
.range {
|
.range {
|
||||||
:global {
|
:global {
|
||||||
.ant-radio-button-wrapper {
|
.ant-radio-button-wrapper {
|
||||||
color: rgba(0, 0, 0, 0.65);
|
color: rgba(0, 0, 0, 65%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-radio-button-wrapper-checked {
|
.ant-radio-button-wrapper-checked {
|
||||||
@ -32,15 +33,15 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.myCardRow {
|
.my-card-row {
|
||||||
.top {
|
.top {
|
||||||
.content {
|
.content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100%;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
@ -50,8 +51,8 @@
|
|||||||
|
|
||||||
.ant-card-body {
|
.ant-card-body {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
overflow: hidden;
|
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -59,7 +60,7 @@
|
|||||||
|
|
||||||
:global {
|
:global {
|
||||||
.ant-card-bordered {
|
.ant-card-bordered {
|
||||||
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.09);
|
box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 9%);
|
||||||
|
|
||||||
.ant-card-head {
|
.ant-card-head {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
@ -69,17 +70,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.outer {
|
.outer {
|
||||||
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
|
||||||
.inner {
|
.inner {
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
}
|
}
|
||||||
@ -89,13 +90,13 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.topContent {
|
.top-content {
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 500;
|
|
||||||
height: 120px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 120px;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabs {
|
.tabs {
|
||||||
@ -111,7 +112,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.spinContainer {
|
.spin-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 400px;
|
min-height: 400px;
|
||||||
padding: 30px 50px;
|
padding: 30px 50px;
|
||||||
|
|||||||
@ -164,7 +164,7 @@ export class FloatingIps extends Base {
|
|||||||
|
|
||||||
<Popover
|
<Popover
|
||||||
content={
|
content={
|
||||||
<Row className={styles.popover_row} gutter={[8, 8]}>
|
<Row className={styles['popover-row']} gutter={[8, 8]}>
|
||||||
{record.port_forwardings
|
{record.port_forwardings
|
||||||
.sort((a, b) => a.external_port - b.external_port)
|
.sort((a, b) => a.external_port - b.external_port)
|
||||||
.map((i, idx) => (
|
.map((i, idx) => (
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
.popover_row{
|
.popover-row {
|
||||||
max-width: 320px;
|
max-width: 320px;
|
||||||
text-align: center;
|
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -150,7 +150,7 @@ export default class InstanceCard extends NodeCard {
|
|||||||
const detailData = servers[infoIndex];
|
const detailData = servers[infoIndex];
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={styles.nodeTooltips}
|
className={styles['node-tooltips']}
|
||||||
style={{ top: `${y}px`, left: `${x - 8}px` }}
|
style={{ top: `${y}px`, left: `${x - 8}px` }}
|
||||||
>
|
>
|
||||||
<Popover
|
<Popover
|
||||||
|
|||||||
@ -183,7 +183,9 @@ export default class NodeCard extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
renderTitle(type, name) {
|
renderTitle(type, name) {
|
||||||
return <div className={styles.nodeCardTitle}>{`${type}: ${name}`}</div>;
|
return (
|
||||||
|
<div className={styles['node-card-title']}>{`${type}: ${name}`}</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
@ -196,7 +198,7 @@ export default class NodeCard extends React.Component {
|
|||||||
const detailData = routers[infoIndex];
|
const detailData = routers[infoIndex];
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={styles.nodeTooltips}
|
className={styles['node-tooltips']}
|
||||||
style={{ top: `${y}px`, left: `${x}px` }}
|
style={{ top: `${y}px`, left: `${x}px` }}
|
||||||
>
|
>
|
||||||
<Popover
|
<Popover
|
||||||
|
|||||||
@ -1,45 +1,54 @@
|
|||||||
.nodeTooltips {
|
.node-tooltips {
|
||||||
:global {
|
:global {
|
||||||
.ant-card-body {
|
.ant-card-body {
|
||||||
padding: 15px
|
padding: 15px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-icon {
|
.image-icon {
|
||||||
width: 15px;
|
width: 15px;
|
||||||
height: 15px;
|
height: 15px;
|
||||||
// display: block;
|
|
||||||
margin-right: 2px;
|
margin-right: 2px;
|
||||||
}
|
}
|
||||||
.descriptions-item{
|
|
||||||
|
.descriptions-item {
|
||||||
:global {
|
:global {
|
||||||
.ant-descriptions-item-label {
|
.ant-descriptions-item-label {
|
||||||
width: 80px;
|
width: 80px;
|
||||||
}
|
}
|
||||||
.ant-descriptions-row > th, .ant-descriptions-row > td {
|
|
||||||
|
.ant-descriptions-row > th,
|
||||||
|
.ant-descriptions-row > td {
|
||||||
padding-bottom: 8px;
|
padding-bottom: 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.nodeCardTitle {
|
|
||||||
font-size: 16px
|
.node-card-title {
|
||||||
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-button {
|
.card-button {
|
||||||
:global {
|
:global {
|
||||||
.ant-btn-primary {
|
.ant-btn-primary {
|
||||||
margin-right: 6px
|
margin-right: 6px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
.ant-btn-primary {
|
.ant-btn-primary {
|
||||||
margin-right: 16px
|
margin-right: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
height: calc(100vh - 170px);
|
height: calc(100vh - 170px);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|||||||
@ -4,30 +4,34 @@
|
|||||||
min-height: calc(100vh - 108px);
|
min-height: calc(100vh - 108px);
|
||||||
padding: 0 @body-padding;
|
padding: 0 @body-padding;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapse {
|
.collapse {
|
||||||
// background: #FFFFFF;
|
margin-bottom: 24px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel {
|
.panel {
|
||||||
background: #FFFFFF;
|
|
||||||
font-size: larger;
|
|
||||||
padding-bottom: 12px;
|
|
||||||
padding-top: 12px;
|
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
|
padding-top: 12px;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
font-size: larger;
|
||||||
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-divider {
|
.header-divider {
|
||||||
margin: 0 5px 0 5px;
|
|
||||||
background-color: @color-text-caption;
|
|
||||||
width: 2px;
|
width: 2px;
|
||||||
|
margin: 0 5px;
|
||||||
|
background-color: @color-text-caption;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image {
|
.image {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.radio-button {
|
.radio-button {
|
||||||
:global {
|
:global {
|
||||||
.ant-radio-button-wrapper {
|
.ant-radio-button-wrapper {
|
||||||
width: 250px;
|
width: 250px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
margin-right: 40px;
|
margin-right: 40px;
|
||||||
@ -35,6 +39,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.security-group-text {
|
.security-group-text {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,9 +1,10 @@
|
|||||||
.detail {
|
.detail {
|
||||||
margin: 0 16px;
|
margin: 0 16px;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
background-color: #FFFFFF;
|
background-color: #fff;
|
||||||
border: 1px solid #efefef;
|
border: 1px solid #efefef;
|
||||||
|
|
||||||
|
/* stylelint-disable-next-line selector-class-pattern */
|
||||||
.public_key {
|
.public_key {
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
-ms-word-wrap: break-word;
|
-ms-word-wrap: break-word;
|
||||||
|
|||||||
@ -220,7 +220,7 @@ export default class ContainerObject extends Base {
|
|||||||
const content = <PopUpContent item={data} />;
|
const content = <PopUpContent item={data} />;
|
||||||
return (
|
return (
|
||||||
<Popover content={content} destroyTooltipOnHide trigger="click">
|
<Popover content={content} destroyTooltipOnHide trigger="click">
|
||||||
<span className="linkClass">{t('Detail Info')}</span>
|
<span className="link-class">{t('Detail Info')}</span>
|
||||||
</Popover>
|
</Popover>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,14 +1,16 @@
|
|||||||
.link-header {
|
.link-header {
|
||||||
line-height: 44px;
|
|
||||||
color: rgba(0, 0, 0, 0.85);
|
|
||||||
background-color: white;
|
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
padding-left: 8px;
|
padding-left: 8px;
|
||||||
|
color: rgba(0, 0, 0, 85%);
|
||||||
|
line-height: 44px;
|
||||||
|
background-color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link-title {
|
.link-title {
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-next {
|
.item-next {
|
||||||
margin-left: 8px;
|
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|||||||
@ -150,7 +150,7 @@ export default class Container extends Base {
|
|||||||
const content = <PopUpContent name={data.name} />;
|
const content = <PopUpContent name={data.name} />;
|
||||||
return (
|
return (
|
||||||
<Popover content={content} destroyTooltipOnHide trigger="click">
|
<Popover content={content} destroyTooltipOnHide trigger="click">
|
||||||
<span className="linkClass">{t('Detail Info')}</span>
|
<span className="link-class">{t('Detail Info')}</span>
|
||||||
</Popover>
|
</Popover>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
.input {
|
.input {
|
||||||
margin-left: 16px;
|
|
||||||
margin-right: 32px;
|
margin-right: 32px;
|
||||||
}
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
|||||||
@ -17,6 +17,7 @@ import { inject, observer } from 'mobx-react';
|
|||||||
import { Row, Layout, Col, Avatar } from 'antd';
|
import { Row, Layout, Col, Avatar } from 'antd';
|
||||||
import globalUserStore from 'stores/keystone/user';
|
import globalUserStore from 'stores/keystone/user';
|
||||||
import ProfileIcon from 'asset/image/profile.svg';
|
import ProfileIcon from 'asset/image/profile.svg';
|
||||||
|
import classnames from 'classnames';
|
||||||
import styles from './styles.less';
|
import styles from './styles.less';
|
||||||
|
|
||||||
export class Overview extends Component {
|
export class Overview extends Component {
|
||||||
@ -33,7 +34,7 @@ export class Overview extends Component {
|
|||||||
|
|
||||||
renderInfoItem(item) {
|
renderInfoItem(item) {
|
||||||
return (
|
return (
|
||||||
<Row className={styles.user_info_detail_item}>
|
<Row className={styles['user-info-detail-item']}>
|
||||||
<Col span={6}>{item.label}</Col>
|
<Col span={6}>{item.label}</Col>
|
||||||
<Col span={18}>{item.value}</Col>
|
<Col span={18}>{item.value}</Col>
|
||||||
</Row>
|
</Row>
|
||||||
@ -51,14 +52,17 @@ export class Overview extends Component {
|
|||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Col span={3} className={styles.user_info_avatar}>
|
<Col
|
||||||
|
span={3}
|
||||||
|
className={classnames(styles.hvc, styles['user-info-avatar'])}
|
||||||
|
>
|
||||||
<Avatar
|
<Avatar
|
||||||
size={{ xs: 33, sm: 44, md: 55, lg: 88, xl: 110, xxl: 138 }}
|
size={{ xs: 33, sm: 44, md: 55, lg: 88, xl: 110, xxl: 138 }}
|
||||||
src={ProfileIcon}
|
src={ProfileIcon}
|
||||||
/>
|
/>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={21}>
|
<Col span={21}>
|
||||||
<Row className={styles.user_info_detail}>
|
<Row className={styles['user-info-detail']}>
|
||||||
{Object.keys(data).map((item) => {
|
{Object.keys(data).map((item) => {
|
||||||
return (
|
return (
|
||||||
<Col span={12} key={`user_info_detail_${item}`}>
|
<Col span={12} key={`user_info_detail_${item}`}>
|
||||||
@ -82,7 +86,9 @@ export class Overview extends Component {
|
|||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Layout.Content className={styles.content}>
|
<Layout.Content className={styles.content}>
|
||||||
<Row className={styles.user_info_card}>{this.renderUserInfo()}</Row>
|
<Row className={classnames(styles.bgc, styles['user-info-card'])}>
|
||||||
|
{this.renderUserInfo()}
|
||||||
|
</Row>
|
||||||
{this.renderExtra()}
|
{this.renderExtra()}
|
||||||
</Layout.Content>
|
</Layout.Content>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,31 +1,26 @@
|
|||||||
@import '~styles/variables';
|
@import '~styles/variables';
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
|
height: 100%;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
.user_info_card {
|
.user-info-card {
|
||||||
.normalBgc();
|
|
||||||
height: 255px;
|
height: 255px;
|
||||||
|
|
||||||
.user_info_avatar {
|
.user-info-detail {
|
||||||
.hvc();
|
|
||||||
}
|
|
||||||
|
|
||||||
.user_info_detail {
|
|
||||||
text-align: left;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
.user_info_detail_item {
|
.user-info-detail-item {
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
padding-left: 3rem;
|
padding-left: 3rem;
|
||||||
|
color: @color-text-body;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: @color-text-body;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -33,14 +28,14 @@
|
|||||||
|
|
||||||
.hvc {
|
.hvc {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.normalBgc {
|
.bgc {
|
||||||
background-color: white;
|
|
||||||
box-shadow: @base-shadow;
|
|
||||||
padding: 24px;
|
|
||||||
border-radius: @border-radius;
|
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
|
padding: 24px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: @border-radius;
|
||||||
|
box-shadow: @base-shadow;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -594,7 +594,7 @@ export const actionColumn = (self) => {
|
|||||||
<>
|
<>
|
||||||
{value && (
|
{value && (
|
||||||
<Popover content={content} destroyTooltipOnHide trigger="click">
|
<Popover content={content} destroyTooltipOnHide trigger="click">
|
||||||
<span className="linkClass">{value}</span>
|
<span className="link-class">{value}</span>
|
||||||
</Popover>
|
</Popover>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user