optimize: MockInput样式优化。
王良
parent
f5b4dbc01c
commit
593611f467
|
|
@ -191,15 +191,6 @@ export default {
|
|||
body {
|
||||
height: 100%;
|
||||
}
|
||||
.mt10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.mt5 {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.mt20 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.ds_layout {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
|
|
|||
|
|
@ -29,40 +29,5 @@ export default {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<span ref="input" class="fake-input" contenteditable="true" spellcheck="false" :title="value" @blur="onBlur" @keydown="onKeydown" v-html="value" />
|
||||
<span ref="input" class="ant-input" contenteditable="true" spellcheck="false" :title="value" @blur="onBlur" @keydown="onKeydown" v-html="value" />
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.fake-input {
|
||||
/* 鼠标样式 */
|
||||
cursor: text;
|
||||
|
||||
/* 内容不换行 */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
vertical-align: middle;
|
||||
|
||||
/* 复制 ant-input 样式 */
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 4px 11px;
|
||||
font-variant: tabular-nums;
|
||||
list-style: none;
|
||||
font-feature-settings: 'tnum';
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.fine-tuning .fake-input {
|
||||
margin-top: -2px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -27,8 +27,8 @@ export default {
|
|||
帮助中心
|
||||
</template>
|
||||
<template slot="header-right">
|
||||
<a-button class="md-mr-10" @click="openExternal('https://github.com/docmirror/dev-sidecar/issues/new/choose')">反馈问题</a-button>
|
||||
<a-button class="md-mr-10" icon="profile" @click="openLog()">查看日志</a-button>
|
||||
<a-button class="mr10" @click="openExternal('https://github.com/docmirror/dev-sidecar/issues/new/choose')">反馈问题</a-button>
|
||||
<a-button class="mr10" icon="profile" @click="openLog()">查看日志</a-button>
|
||||
</template>
|
||||
|
||||
<div v-if="config" class="help-list">
|
||||
|
|
|
|||
|
|
@ -109,8 +109,8 @@ export default {
|
|||
</a-col>
|
||||
</a-row>
|
||||
<a-row v-for="(item, index) of noProxyUrls" :key="index" :gutter="10">
|
||||
<a-col :span="22" class="fine-tuning">
|
||||
<MockInput v-model="item.key" />
|
||||
<a-col :span="22">
|
||||
<MockInput v-model="item.key" class="mt-2" />
|
||||
</a-col>
|
||||
<a-col :span="2">
|
||||
<a-button type="danger" icon="minus" @click="delNoProxyUrl(item, index)" />
|
||||
|
|
@ -122,7 +122,7 @@ export default {
|
|||
</div>
|
||||
<template slot="footer">
|
||||
<div class="footer-bar">
|
||||
<a-button :loading="resetDefaultLoading" class="md-mr-10" icon="sync" @click="resetDefault()">
|
||||
<a-button :loading="resetDefaultLoading" class="mr10" icon="sync" @click="resetDefault()">
|
||||
恢复默认
|
||||
</a-button>
|
||||
<a-button :loading="applyLoading" icon="check" type="primary" @click="apply()">
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@ export default {
|
|||
</div>
|
||||
<template slot="footer">
|
||||
<div class="footer-bar">
|
||||
<a-button :loading="resetDefaultLoading" class="md-mr-10" icon="sync" @click="resetDefault()">
|
||||
<a-button :loading="resetDefaultLoading" class="mr10" icon="sync" @click="resetDefault()">
|
||||
恢复默认
|
||||
</a-button>
|
||||
<a-button :loading="applyLoading" icon="check" type="primary" @click="apply()">
|
||||
|
|
|
|||
|
|
@ -170,8 +170,8 @@ export default {
|
|||
</a-col>
|
||||
</a-row>
|
||||
<a-row v-for="(item, index) of targets" :key="index" :gutter="10">
|
||||
<a-col :span="18" class="fine-tuning">
|
||||
<MockInput v-model="item.key" />
|
||||
<a-col :span="18">
|
||||
<MockInput v-model="item.key" class="mt-2" />
|
||||
</a-col>
|
||||
<a-col :span="4">
|
||||
<a-select v-model="item.value" style="width:100%">
|
||||
|
|
@ -223,7 +223,7 @@ export default {
|
|||
</div>
|
||||
<template slot="footer">
|
||||
<div class="footer-bar">
|
||||
<a-button :loading="resetDefaultLoading" class="md-mr-10" icon="sync" @click="resetDefault()">
|
||||
<a-button :loading="resetDefaultLoading" class="mr10" icon="sync" @click="resetDefault()">
|
||||
恢复默认
|
||||
</a-button>
|
||||
<a-button :loading="applyLoading" icon="check" type="primary" @click="apply()">
|
||||
|
|
|
|||
|
|
@ -122,7 +122,7 @@ export default {
|
|||
</div>
|
||||
<template slot="footer">
|
||||
<div class="footer-bar">
|
||||
<a-button :loading="resetDefaultLoading" class="md-mr-10" icon="sync" @click="resetDefault()">
|
||||
<a-button :loading="resetDefaultLoading" class="mr10" icon="sync" @click="resetDefault()">
|
||||
恢复默认
|
||||
</a-button>
|
||||
<a-button :loading="applyLoading" icon="check" type="primary" @click="apply()">
|
||||
|
|
|
|||
|
|
@ -168,7 +168,7 @@ export default {
|
|||
</a-row>
|
||||
<a-row v-for="(item, index) of excludeIpList" :key="index" :gutter="10" class="fine-tuning">
|
||||
<a-col :span="17">
|
||||
<MockInput v-model="item.key" />
|
||||
<MockInput v-model="item.key" class="mt-1" />
|
||||
</a-col>
|
||||
<a-col :span="5">
|
||||
<a-select v-model="item.value" style="width:100%">
|
||||
|
|
@ -185,7 +185,7 @@ export default {
|
|||
</div>
|
||||
<template slot="footer">
|
||||
<div class="footer-bar">
|
||||
<a-button :loading="resetDefaultLoading" class="md-mr-10" icon="sync" @click="resetDefault()">
|
||||
<a-button :loading="resetDefaultLoading" class="mr10" icon="sync" @click="resetDefault()">
|
||||
恢复默认
|
||||
</a-button>
|
||||
<a-button :loading="applyLoading" icon="check" type="primary" @click="apply()">
|
||||
|
|
|
|||
|
|
@ -437,7 +437,7 @@ export default {
|
|||
<a-button type="primary" icon="plus" @click="reSpeedTest()">
|
||||
立即重新测速
|
||||
</a-button>
|
||||
<a-button class="md-ml-10" type="primary" icon="reload" @click="reloadAllSpeedTester()">
|
||||
<a-button class="ml10" type="primary" icon="reload" @click="reloadAllSpeedTester()">
|
||||
刷新
|
||||
</a-button>
|
||||
</a-col>
|
||||
|
|
@ -445,7 +445,7 @@ export default {
|
|||
|
||||
<a-row :gutter="20">
|
||||
<a-col v-for="(item, key) of speedTestList" :key="key" span="12">
|
||||
<a-card size="small" class="md-mt-10" :title="key">
|
||||
<a-card size="small" class="mt10" :title="key">
|
||||
<a slot="extra" href="javascript:void(0)" :title="key" style="cursor:default">
|
||||
<a-icon v-if="item.alive.length > 0" type="check" />
|
||||
<a-icon v-else type="info-circle" />
|
||||
|
|
@ -465,7 +465,7 @@ export default {
|
|||
</div>
|
||||
<template slot="footer">
|
||||
<div class="footer-bar">
|
||||
<a-button :loading="resetDefaultLoading" class="md-mr-10" icon="sync" @click="resetDefault()">
|
||||
<a-button :loading="resetDefaultLoading" class="mr10" icon="sync" @click="resetDefault()">
|
||||
恢复默认
|
||||
</a-button>
|
||||
<a-button :loading="applyLoading" icon="check" type="primary" @click="apply()">
|
||||
|
|
|
|||
|
|
@ -344,7 +344,7 @@ export default {
|
|||
设置
|
||||
</template>
|
||||
<template slot="header-right">
|
||||
<a-button class="md-mr-10" icon="profile" @click="openLog()">查看日志</a-button>
|
||||
<a-button class="mr10" icon="profile" @click="openLog()">查看日志</a-button>
|
||||
</template>
|
||||
|
||||
<div v-if="config">
|
||||
|
|
@ -495,7 +495,7 @@ export default {
|
|||
</a-form-item>
|
||||
<a-form-item label="最大日志文件大小" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-input-number ref="maxLogFileSize" v-model="config.app.maxLogFileSize" :step="maxLogFileSizeStep" :min="0" spellcheck="false" />
|
||||
<a-select v-model="config.app.maxLogFileSizeUnit" class="md-ml-5" @change="onMaxLogFileSizeUnitChange">
|
||||
<a-select v-model="config.app.maxLogFileSizeUnit" class="ml5" @change="onMaxLogFileSizeUnitChange">
|
||||
<a-select-option v-for="(item) of maxLogFileSizeUnit" :key="item.value" :value="item.value">
|
||||
{{ item.label }}
|
||||
</a-select-option>
|
||||
|
|
@ -514,10 +514,10 @@ export default {
|
|||
</div>
|
||||
<template slot="footer">
|
||||
<div class="footer-bar">
|
||||
<a-button :loading="removeUserConfigLoading" class="md-mr-10" icon="sync" @click="restoreFactorySettings()">
|
||||
<a-button :loading="removeUserConfigLoading" class="mr10" icon="sync" @click="restoreFactorySettings()">
|
||||
恢复出厂设置
|
||||
</a-button>
|
||||
<a-button :loading="resetDefaultLoading" class="md-mr-10" icon="sync" @click="resetDefault()">
|
||||
<a-button :loading="resetDefaultLoading" class="mr10" icon="sync" @click="resetDefault()">
|
||||
恢复默认
|
||||
</a-button>
|
||||
<a-button :loading="applyLoading" icon="check" type="primary" @click="apply()">
|
||||
|
|
|
|||
|
|
@ -17,60 +17,35 @@
|
|||
}
|
||||
}
|
||||
|
||||
.md-mr-5 {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.md-mr-10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.md-mr-15 {
|
||||
margin-right: 15px;
|
||||
}
|
||||
.md-mr-20 {
|
||||
margin-right: 20px;
|
||||
span.ant-input {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.md-mt-0 {
|
||||
margin-top: 0;
|
||||
.mr10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.md-mt-5 {
|
||||
margin-top: 5px;
|
||||
|
||||
.mt-1 {
|
||||
margin-top: -1px;
|
||||
}
|
||||
.md-mt-10 {
|
||||
.mt-2 {
|
||||
margin-top: -2px;
|
||||
}
|
||||
.mt10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.md-mt-15 {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.md-mt-20 {
|
||||
.mt20 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.md-ml-5 {
|
||||
.ml5 {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.md-ml-10 {
|
||||
.ml10 {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.md-ml-15 {
|
||||
margin-left: 15px;
|
||||
}
|
||||
.md-ml-20 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.md-mb-5 {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.md-mb-10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.md-mb-15 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.md-mb-20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
ol {
|
||||
margin-block-start: 0em;
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@ $dark-input: #777; //输入框：背景色
|
|||
}
|
||||
|
||||
/* 输入框、下拉框 */
|
||||
.ant-input, .fake-input,
|
||||
.ant-input,
|
||||
.ant-input-number-input,
|
||||
.ant-input-number,
|
||||
.ant-select-selection,
|
||||
|
|
|
|||
Loading…
Reference in New Issue