mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2024-11-27 12:39:01 +08:00
style:更新所有移动端container路径下样式 (#6387)
* style:更新所有移动端container路径下样式 * style:修复el-button的默认margin
This commit is contained in:
parent
666f8c813d
commit
f2d3acb650
@ -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
|
||||
|
@ -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">
|
||||
|
@ -45,3 +45,9 @@ const buttons = [
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-button + .el-button {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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">
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user