优化样式

This commit is contained in:
xuyanfeng 2021-06-17 21:37:09 +08:00
parent 5558c6fe71
commit 23e7cc7cb4
2 changed files with 46 additions and 38 deletions

View File

@ -25,3 +25,7 @@
.el-tree { .el-tree {
width: 100%; width: 100%;
} }
* {
font-family: "PingFang SC", Arial, sans-serif;
}

View File

@ -1,13 +1,12 @@
<template> <template>
<div id="ui-prop"> <div id="ui-prop">
<div class="normal-data" style="display: flex;flex-direction: row;align-items: center;min-height: 30px;margin: 0;"> <div class="normal-data" style="display: flex;flex-direction: row;align-items: center;min-height: 30px;margin: 0;">
<div @mousedown="onPropNameMouseDown" class="key" <div @mousedown="onPropNameMouseDown" class="key" @click="onClickFold">
:style="{'margin-left':indent*10+'px'}">
<i class=" data-arrow" <i class=" data-arrow"
v-if="arrow" v-if="arrow"
:class="fold?'el-icon-caret-right':'el-icon-caret-bottom'" :class="fold?'el-icon-caret-right':'el-icon-caret-bottom'"
:style="{'visibility':isArray()?'visible':'hidden'}" :style="{'visibility':isArray()?'visible':'hidden','margin-left':indent*10+'px'}">
@click="onClickFold"></i> </i>
<div class="text">{{ name }}</div> <div class="text">{{ name }}</div>
</div> </div>
<div class="value"> <div class="value">
@ -284,7 +283,6 @@ export default class UiProp extends Vue {
.text { .text {
user-select: none; user-select: none;
line-height: 30px;
font-size: 12px; font-size: 12px;
margin: 3px; margin: 3px;
} }
@ -317,8 +315,8 @@ export default class UiProp extends Vue {
align-items: center; align-items: center;
#ui-prop { #ui-prop {
margin-top: 0; margin: 0 10px;
margin-bottom: 0; flex: 1;
.normal-data { .normal-data {
.value { .value {
@ -326,18 +324,25 @@ export default class UiProp extends Vue {
} }
.key { .key {
min-width: 20px; min-width: unset;
display: block;
margin-right: 5px;
flex: unset;
.text {
}
}
}
} }
#ui-prop:first-child { #ui-prop:first-child {
margin-right: 20px; margin-left: 0;
} }
#ui-prop:last-child { #ui-prop:last-child {
margin-right: 0; margin-right: 0;
} }
} }
}
.array-object { .array-object {
flex: 1; flex: 1;
@ -369,6 +374,5 @@ export default class UiProp extends Vue {
} }
} }
} }
}
} }
</style> </style>