|
|
@@ -90,7 +90,7 @@
|
|
|
width="30%"
|
|
|
:before-close="handleClose"
|
|
|
>
|
|
|
- <json-viewer :value="jsonData" boxed sort :expand-depth=20 />
|
|
|
+ <json-viewer :value="jsonData" boxed sort :expand-depth=20 theme="my-awesome-json-theme" />
|
|
|
|
|
|
<template #footer>
|
|
|
<span class="dialog-footer">
|
|
|
@@ -363,6 +363,7 @@ export default defineComponent({
|
|
|
});
|
|
|
</script>
|
|
|
<style>
|
|
|
+
|
|
|
.el-input__wrapper {
|
|
|
width: 98%;
|
|
|
}
|
|
|
@@ -392,4 +393,58 @@ export default defineComponent({
|
|
|
line-height: 28px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+.jv-node{
|
|
|
+ margin-left: 25px;
|
|
|
+}
|
|
|
+.jv-my-awesome-json-theme {
|
|
|
+ background: #d9f1e9;
|
|
|
+ white-space: nowrap;
|
|
|
+ color: #525252;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Consolas, Menlo, Courier, monospace;
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+.jv-ellipsis {
|
|
|
+ color: #999;
|
|
|
+ background-color: #eee;
|
|
|
+ display: inline-block;
|
|
|
+ line-height: 0.9;
|
|
|
+ font-size: 0.9em;
|
|
|
+ padding: 0px 4px 2px 4px;
|
|
|
+ border-radius: 3px;
|
|
|
+ vertical-align: 2px;
|
|
|
+ cursor: pointer;
|
|
|
+ user-select: none;
|
|
|
+ }
|
|
|
+ .jv-button { color: #49b3ff }
|
|
|
+ .jv-key { color: #111111 }
|
|
|
+ .jv-item {
|
|
|
+ &.jv-array { color: #111111 }
|
|
|
+ &.jv-boolean { color: #fc1e70 }
|
|
|
+ &.jv-function { color: #067bca }
|
|
|
+ &.jv-number { color: #fc1e70 }
|
|
|
+ &.jv-number-float { color: #fc1e70 }
|
|
|
+ &.jv-number-integer { color: #fc1e70 }
|
|
|
+ &.jv-object { color: #111111 }
|
|
|
+ &.jv-undefined { color: #e08331 }
|
|
|
+ &.jv-string {
|
|
|
+ color: #42b983;
|
|
|
+ word-break: break-word;
|
|
|
+ white-space: normal;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .jv-code {
|
|
|
+ .jv-toggle {
|
|
|
+ &:before {
|
|
|
+ padding: 0px 2px;
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ &:before {
|
|
|
+ background: #eee;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
