mirror of
https://gitee.com/ssssssss-team/magic-api.git
synced 2026-06-09 10:23:53 +08:00
优化UI布局
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 > * {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user