style:更新所有移动端container路径下样式 (#6387)

* style:更新所有移动端container路径下样式

* style:修复el-button的默认margin
This commit is contained in:
see-more 2024-09-06 10:00:53 +08:00 committed by GitHub
parent 666f8c813d
commit f2d3acb650
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 97 additions and 64 deletions

View File

@ -25,17 +25,28 @@
</el-alert>
</template>
<template #toolbar>
<el-row>
<el-col :span="16">
<div class="hidden sm:block sm:flex sm:flex-row sm:w-full sm:justify-between">
<div>
<el-button type="primary" @click="onOpenDialog()">
{{ $t('container.createCompose') }}
</el-button>
</el-col>
<el-col :span="8">
</div>
<div class="flex flex-row gap-2">
<TableSetting @search="search()" />
<TableSearch @search="search()" v-model:searchName="searchName" />
</el-col>
</el-row>
</div>
</div>
<div class="block flex flex-col gap-2 sm:hidden">
<div class="flex justify-between">
<el-button type="primary" @click="onOpenDialog()">
{{ $t('container.createCompose') }}
</el-button>
<TableSetting @search="search()" />
</div>
<div class="flex justify-end">
<TableSearch @search="search()" v-model:searchName="searchName" />
</div>
</div>
</template>
<template #main>
<ComplexTable

View File

@ -8,8 +8,8 @@
<LayoutContent :title="$t('container.image')" :class="{ mask: dockerStatus != 'Running' }">
<template #toolbar>
<el-row>
<el-col :span="16">
<div class="flex flex-col gap-4 justify-between items-center flex-wrap sm:flex-row">
<div class="flex gap-4 flex-wrap">
<el-button type="primary" plain @click="onOpenPull">
{{ $t('container.imagePull') }}
</el-button>
@ -25,12 +25,12 @@
<el-button type="primary" plain @click="onOpenPrune()">
{{ $t('container.imagePrune') }}
</el-button>
</el-col>
<el-col :span="8">
</div>
<div class="flex ml-2 gap-2">
<TableSetting @search="search()" />
<TableSearch @search="search()" v-model:searchName="searchName" />
</el-col>
</el-row>
</div>
</div>
</template>
<template #main>
<ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">

View File

@ -45,3 +45,9 @@ const buttons = [
},
];
</script>
<style>
.el-button + .el-button {
margin: 0;
}
</style>

View File

@ -8,8 +8,8 @@
<LayoutContent :title="$t('container.network')" :class="{ mask: dockerStatus != 'Running' }">
<template #toolbar>
<el-row>
<el-col :span="16">
<div class="flex flex-col gap-4 justify-between sm:flex-row">
<div class="flex gap-4">
<el-button type="primary" @click="onCreate()">
{{ $t('container.createNetwork') }}
</el-button>
@ -19,12 +19,12 @@
<el-button :disabled="selects.length === 0" @click="batchDelete(null)">
{{ $t('commons.button.delete') }}
</el-button>
</el-col>
<el-col :span="8">
</div>
<div class="flex flex-row gap-2">
<TableSetting @search="search()" />
<TableSearch @search="search()" v-model:searchName="searchName" />
</el-col>
</el-row>
</div>
</div>
</template>
<template #main>
<ComplexTable

View File

@ -8,17 +8,28 @@
<LayoutContent :title="$t('container.repo')" :class="{ mask: dockerStatus != 'Running' }">
<template #toolbar>
<el-row>
<el-col :span="16">
<div class="block flex flex-col gap-2 sm:hidden">
<div class="flex flex-row justify-between">
<el-button type="primary" @click="onOpenDialog('add')">
{{ $t('container.createRepo') }}
</el-button>
</el-col>
<el-col :span="8">
<TableSetting @search="search()" />
</div>
<div class="flex flex-row justify-end">
<TableSearch @search="search()" v-model:searchName="searchName" />
</div>
</div>
<div class="hidden sm:block sm:flex sm:justify-between">
<div>
<el-button type="primary" @click="onOpenDialog('add')">
{{ $t('container.createRepo') }}
</el-button>
</div>
<div class="flex flex-row gap-2">
<TableSetting @search="search()" />
<TableSearch @search="search()" v-model:searchName="searchName" />
</el-col>
</el-row>
</div>
</div>
</template>
<template #main>
<ComplexTable

View File

@ -2,17 +2,18 @@
<div v-loading="loading">
<div class="app-status" style="margin-top: 20px">
<el-card>
<div>
<el-tag style="float: left" effect="dark" type="success">Docker</el-tag>
<el-tag round class="status-content" v-if="form.status === 'Running'" type="success">
{{ $t('commons.status.running') }}
</el-tag>
<el-tag round class="status-content" v-if="form.status === 'Stopped'" type="info">
{{ $t('commons.status.stopped') }}
</el-tag>
<el-tag class="status-content">{{ $t('app.version') }}: {{ form.version }}</el-tag>
<span v-if="form.status === 'Running'" class="buttons">
<div class="flex flex-col gap-2 sm:flex-row sm:justify-between">
<div class="flex">
<el-tag style="float: left" effect="dark" type="success">Docker</el-tag>
<el-tag round class="status-content" v-if="form.status === 'Running'" type="success">
{{ $t('commons.status.running') }}
</el-tag>
<el-tag round class="status-content" v-if="form.status === 'Stopped'" type="info">
{{ $t('commons.status.stopped') }}
</el-tag>
<el-tag class="status-content">{{ $t('app.version') }}: {{ form.version }}</el-tag>
</div>
<div class="flex justify-start" v-if="form.status === 'Running'">
<el-button type="primary" @click="onOperator('stop')" link>
{{ $t('container.stop') }}
</el-button>
@ -20,9 +21,9 @@
<el-button type="primary" @click="onOperator('restart')" link>
{{ $t('container.restart') }}
</el-button>
</span>
</div>
<span v-if="form.status === 'Stopped'" class="buttons">
<div clsas="flex justify-start" v-if="form.status === 'Stopped'" class="buttons">
<el-button type="primary" @click="onOperator('start')" link>
{{ $t('container.start') }}
</el-button>
@ -30,7 +31,7 @@
<el-button type="primary" @click="onOperator('restart')" link>
{{ $t('container.restart') }}
</el-button>
</span>
</div>
</div>
</el-card>
</div>
@ -46,13 +47,16 @@
<el-col :xs="24" :sm="24" :md="15" :lg="12" :xl="10">
<el-form :model="form" label-position="left" :rules="rules" ref="formRef" label-width="120px">
<el-form-item :label="$t('container.mirrors')" prop="mirrors">
<div style="width: 100%" v-if="form.mirrors">
<div
class="flex w-full justify-start flex-col sm:flex-row sm:items-end"
v-if="form.mirrors"
>
<el-input
type="textarea"
:rows="5"
disabled
v-model="form.mirrors"
style="width: calc(100% - 80px)"
class="sm:calc(100% - 80px)"
/>
<el-button @click="onChangeMirrors" icon="Setting">
{{ $t('commons.button.set') }}
@ -65,18 +69,19 @@
</el-button>
</template>
</el-input>
<span class="input-help">{{ $t('container.mirrorsHelper') }}</span>
<span class="input-help flx-align-center" style="display: flex">
{{ $t('container.mirrorsHelper2') }}
<el-link
style="font-size: 12px; margin-left: 5px"
icon="Position"
@click="toDoc()"
type="primary"
>
{{ $t('firewall.quickJump') }}
</el-link>
</span>
<div class="flex">
<span>
{{ $t('container.mirrorsHelper') }} {{ $t('container.mirrorsHelper2') }}
<el-link
style="font-size: 12px; margin-left: 5px"
icon="Position"
@click="toDoc()"
type="primary"
>
{{ $t('firewall.quickJump') }}
</el-link>
</span>
</div>
</el-form-item>
<el-form-item :label="$t('container.registries')" prop="registries">
<div style="width: 100%" v-if="form.registries">

View File

@ -8,20 +8,20 @@
<LayoutContent :title="$t('container.composeTemplate')" :class="{ mask: dockerStatus != 'Running' }">
<template #toolbar>
<el-row>
<el-col :span="16">
<div class="flex flex-col gap-2 sm:flex-row sm:justify-between">
<div class="flex gap-4">
<el-button type="primary" @click="onOpenDialog('create')">
{{ $t('container.createComposeTemplate') }}
</el-button>
<el-button type="primary" plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
{{ $t('commons.button.delete') }}
</el-button>
</el-col>
<el-col :span="8">
</div>
<div class="flex gap-4 sm:gap-2">
<TableSetting @search="search()" />
<TableSearch @search="search()" v-model:searchName="searchName" />
</el-col>
</el-row>
</div>
</div>
</template>
<template #main>
<ComplexTable

View File

@ -8,8 +8,8 @@
<LayoutContent :title="$t('container.volume')" :class="{ mask: dockerStatus != 'Running' }">
<template #toolbar>
<el-row>
<el-col :span="16">
<div class="flex flex-col gap-4 sm:flex-row justify-between">
<div class="flex flex-wrap gap-4">
<el-button type="primary" @click="onCreate()">
{{ $t('container.createVolume') }}
</el-button>
@ -19,12 +19,12 @@
<el-button :disabled="selects.length === 0" @click="batchDelete(null)">
{{ $t('commons.button.delete') }}
</el-button>
</el-col>
<el-col :span="8">
</div>
<div class="flex flex-row flex-wrap gap-2">
<TableSetting @search="search()" />
<TableSearch @search="search()" v-model:searchName="searchName" />
</el-col>
</el-row>
</div>
</div>
</template>
<template #main>
<ComplexTable