fix: 计划任务、容器创建样式移动端适配 (#1519)

This commit is contained in:
ssongliu 2023-07-04 10:42:11 +08:00 committed by GitHub
parent 555a32c273
commit 0a55dec949
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 28 additions and 5 deletions

View file

@ -338,3 +338,7 @@
.common-prompt {
margin-bottom: 20px !important;
}
.mini-form-item {
width: 40% !important;
}

View file

@ -65,6 +65,10 @@
}
}
}
.mini-form-item {
width: 100% !important;
}
.database-status {
.title {

View file

@ -91,7 +91,7 @@
</el-checkbox>
</el-form-item>
<el-form-item :label="$t('container.cpuShare')" prop="cpuShares">
<el-input style="width: 40%" v-model.number="dialogData.rowData!.cpuShares" />
<el-input class="mini-form-item" v-model.number="dialogData.rowData!.cpuShares" />
<span class="input-help">{{ $t('container.cpuShareHelper') }}</span>
</el-form-item>
<el-form-item
@ -99,7 +99,7 @@
prop="nanoCPUs"
:rules="checkNumberRange(0, limits.cpu)"
>
<el-input style="width: 40%" v-model.number="dialogData.rowData!.nanoCPUs">
<el-input class="mini-form-item" v-model.number="dialogData.rowData!.nanoCPUs">
<template #append>
<div style="width: 35px">{{ $t('commons.units.core') }}</div>
</template>
@ -113,7 +113,7 @@
prop="memoryItem"
:rules="checkNumberRange(0, limits.memory)"
>
<el-input style="width: 40%" v-model.number="dialogData.rowData!.memoryItem">
<el-input class="mini-form-item" v-model.number="dialogData.rowData!.memoryItem">
<template #append><div style="width: 35px">MB</div></template>
</el-input>
<span class="input-help">{{ $t('container.limitHelper', [limits.memory]) }}MB</span>

View file

@ -33,7 +33,7 @@
</el-form-item>
<el-form-item :label="$t('cronjob.cronSpec')" prop="spec">
<el-select style="width: 20%" v-model="dialogData.rowData!.specType">
<el-select class="specTypeClass" v-model="dialogData.rowData!.specType">
<el-option
v-for="item in specOptions"
:key="item.label"
@ -539,9 +539,24 @@ defineExpose({
</script>
<style scoped lang="scss">
.specClass {
width: 20%;
width: 20% !important;
margin-left: 20px;
}
@media only screen and (max-width: 1000px) {
.specClass {
width: 100% !important;
margin-top: 20px;
margin-left: 0;
}
}
.specTypeClass {
width: 20% !important;
}
@media only screen and (max-width: 1000px) {
.specTypeClass {
width: 100% !important;
}
}
.selectClass {
width: 100%;
}