优化UI布局

This commit is contained in:
mxd
2021-08-07 10:53:32 +08:00
parent 2c44fa47f7
commit f1ecde0679
7 changed files with 21 additions and 29 deletions

View File

@@ -73,10 +73,6 @@ export default {
.ma-event .ma-layout .ma-content .content-bg:hover {
background: var(--toolbox-list-hover-background);
}
.ma-layout .ma-sider {
border: none;
border-right: 1px solid var(--tab-bar-border-color);
}
.ma-layout .ma-table-row{
display: flex;
}

View File

@@ -15,6 +15,10 @@
</li>
</ul>
<div class="ma-layout">
<div v-show="showIndex < 1" class="not-select ma-sider">
<div @click="addRow"><i class="ma-icon ma-icon-plus"/></div>
<div @click="removeRow"><i class="ma-icon ma-icon-minus"/></div>
</div>
<div v-show="showIndex === 0" class="ma-layout-container">
<div class="ma-header ma-table-row">
<div>参数名</div>
@@ -41,10 +45,6 @@
<div v-show="showIndex === 1" class="ma-layout-container" style="overflow: hidden; right: 0">
<magic-textarea :value.sync="info.description" style="width: 100%; height: 100%; margin: 2px"/>
</div>
<div v-show="showIndex < 1" class="not-select ma-sider">
<div @click="addRow"><i class="ma-icon ma-icon-plus"/></div>
<div @click="removeRow"><i class="ma-icon ma-icon-minus"/></div>
</div>
</div>
</div>
</div>

View File

@@ -13,6 +13,10 @@
</li>
</ul>
<div class="ma-layout">
<div class="not-select ma-sider">
<div @click="addRow"><i class="ma-icon ma-icon-plus"/></div>
<div @click="removeRow"><i class="ma-icon ma-icon-minus"/></div>
</div>
<div v-show="showIndex === 0" class="ma-layout-container">
<div class="ma-header ma-table-row ma-table-request-row">
<div style="flex: 1">Key</div>
@@ -76,10 +80,6 @@
</div>
</div>
</div>
<div class="not-select ma-sider">
<div @click="addRow"><i class="ma-icon ma-icon-plus"/></div>
<div @click="removeRow"><i class="ma-icon ma-icon-minus"/></div>
</div>
</div>
</div>
</div>

View File

@@ -261,7 +261,7 @@ export default {
}
.ma-layout .ma-sider {
border-left: 1px solid var(--tab-bar-border-color);
border-right: 1px solid var(--tab-bar-border-color);
}
.ma-layout .ma-sider > * {

View File

@@ -15,6 +15,10 @@
</li>
</ul>
<div class="ma-layout">
<div v-show="showIndex < 3" class="not-select ma-sider">
<div @click="addRow"><i class="ma-icon ma-icon-plus"/></div>
<div @click="removeRow"><i class="ma-icon ma-icon-minus"/></div>
</div>
<div v-show="showIndex === 0" class="ma-layout-container">
<div class="ma-header ma-table-row ma-table-request-row">
<div style="width: 32px">必填</div>
@@ -166,10 +170,6 @@
<div v-show="showIndex === 4" class="ma-layout-container" style="overflow: hidden; right: 0">
<magic-textarea :value.sync="info.description" style="width: 100%; height: 100%; margin: 2px"/>
</div>
<div v-show="showIndex < 3" class="not-select ma-sider">
<div @click="addRow"><i class="ma-icon ma-icon-plus"/></div>
<div @click="removeRow"><i class="ma-icon ma-icon-minus"/></div>
</div>
</div>
</div>
</div>

View File

@@ -7,7 +7,11 @@
</li>
</ul>
<div class="ma-layout">
<div v-if="showIndex == 0" class="ma-layout-container">
<div v-if="showIndex < 2" class="not-select ma-sider">
<div @click="addRow"><i class="ma-icon ma-icon-plus"/></div>
<div @click="removeRow"><i class="ma-icon ma-icon-minus"/></div>
</div>
<div v-if="showIndex === 0" class="ma-layout-container">
<div class="ma-header ma-table-row">
<div></div>
<div></div>
@@ -15,7 +19,7 @@
</div>
<div class="ma-content">
<div v-for="(item, key) in parameters" :key="'request_parameter_' + key" class="ma-table-row">
<div :class="{ focus: parameterIndex == key && !item.name }">
<div :class="{ focus: parameterIndex === key && !item.name }">
<magic-input :focus="() => (parameterIndex = key)" :value.sync="item.name" style="width: 100%"/>
</div>
<div>
@@ -27,7 +31,7 @@
</div>
</div>
</div>
<div v-if="showIndex == 1" class="ma-layout-container">
<div v-if="showIndex === 1" class="ma-layout-container">
<div class="ma-header ma-table-row">
<div></div>
<div></div>
@@ -35,7 +39,7 @@
</div>
<div class="ma-content">
<div v-for="(item, key) in headers" :key="'request_header_' + key" class="ma-table-row">
<div :class="{ focus: headerIndex == key && !item.name }">
<div :class="{ focus: headerIndex === key && !item.name }">
<magic-input :focus="() => (headerIndex = key)" :value.sync="item.name" style="width: 100%"/>
</div>
<div>
@@ -47,10 +51,6 @@
</div>
</div>
</div>
<div v-if="showIndex < 2" class="not-select ma-sider">
<div @click="addRow"><i class="ma-icon ma-icon-plus"/></div>
<div @click="removeRow"><i class="ma-icon ma-icon-minus"/></div>
</div>
</div>
</div>
</template>

View File

@@ -113,10 +113,6 @@ export default {
.ma-todo .ma-layout .ma-content .content-bg:hover {
background: var(--toolbox-list-hover-background);
}
.ma-layout .ma-sider {
border: none;
border-right: 1px solid var(--tab-bar-border-color);
}
.ma-layout .ma-table-row > * {
width: 30% !important;