mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2024-11-27 20:49:03 +08:00
style: 优化移动端样式 (#6448)
This commit is contained in:
ssongliu
GitHub
parent
f4623664d5
commit
ab7efea8c5
@ -2,19 +2,14 @@
|
||||
<div>
|
||||
<div class="app-status" v-if="data.isExist">
|
||||
<el-card>
|
||||
<div class="flex items-center justify-between gap-2 sm:gap-10 sm:justify-start">
|
||||
<div class="flex items-center justify-center gap-2 sm:flex-row">
|
||||
<div>
|
||||
<div class="flex w-full flex-col gap-4 md:flex-row">
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<el-tag effect="dark" type="success">{{ data.app }}</el-tag>
|
||||
</div>
|
||||
<div>
|
||||
<Status :key="refresh" :status="data.status"></Status>
|
||||
</div>
|
||||
<div>
|
||||
<el-tag>{{ $t('app.version') }}:{{ data.version }}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-4 sm:flex sm:flex-row">
|
||||
|
||||
<div class="mt-0.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
v-if="data.status != 'Running'"
|
||||
|
||||
@ -2,29 +2,22 @@
|
||||
<div v-loading="loading">
|
||||
<div class="app-status" style="margin-top: 20px">
|
||||
<el-card>
|
||||
<div class="flex flex-col gap-2 sm:flex-row sm:justify-between">
|
||||
<div class="flex">
|
||||
<div class="flex w-full flex-col gap-4 md:flex-row">
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<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">
|
||||
<el-tag round 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">
|
||||
<el-tag round 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>
|
||||
<el-tag>{{ $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>
|
||||
<div class="mt-0.5">
|
||||
<el-button type="primary" v-if="form.status === 'Running'" @click="onOperator('stop')" link>
|
||||
{{ $t('container.stop') }}
|
||||
</el-button>
|
||||
<el-divider direction="vertical" />
|
||||
<el-button type="primary" @click="onOperator('restart')" link>
|
||||
{{ $t('container.restart') }}
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div clsas="flex justify-start" v-if="form.status === 'Stopped'" class="buttons">
|
||||
<el-button type="primary" @click="onOperator('start')" link>
|
||||
<el-button type="primary" v-if="form.status === 'Stopped'" @click="onOperator('start')" link>
|
||||
{{ $t('container.start') }}
|
||||
</el-button>
|
||||
<el-divider direction="vertical" />
|
||||
|
||||
@ -2,7 +2,8 @@
|
||||
<div v-if="recordShow" v-loading="loading">
|
||||
<div class="app-status p-mt-20">
|
||||
<el-card>
|
||||
<div>
|
||||
<div class="flex w-full flex-col gap-4 md:flex-row">
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<el-popover
|
||||
v-if="dialogData.rowData.name.length >= 15"
|
||||
placement="top-start"
|
||||
@ -17,17 +18,23 @@
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-popover>
|
||||
<el-tag v-if="dialogData.rowData.name.length < 15" class="float-left" effect="dark" type="success">
|
||||
<el-tag
|
||||
v-if="dialogData.rowData.name.length < 15"
|
||||
class="float-left"
|
||||
effect="dark"
|
||||
type="success"
|
||||
>
|
||||
{{ $t('cronjob.' + dialogData.rowData.type) }} - {{ dialogData.rowData.name }}
|
||||
</el-tag>
|
||||
|
||||
<el-tag v-if="dialogData.rowData.status === 'Enable'" round class="status-content" type="success">
|
||||
<el-tag v-if="dialogData.rowData.status === 'Enable'" round type="success">
|
||||
{{ $t('commons.status.running') }}
|
||||
</el-tag>
|
||||
<el-tag v-if="dialogData.rowData.status === 'Disable'" round class="status-content" type="info">
|
||||
<el-tag v-if="dialogData.rowData.status === 'Disable'" round type="info">
|
||||
{{ $t('commons.status.stopped') }}
|
||||
</el-tag>
|
||||
<span class="buttons">
|
||||
</div>
|
||||
<div class="mt-0.5">
|
||||
<el-button type="primary" @click="onHandle(dialogData.rowData)" link>
|
||||
{{ $t('commons.button.handle') }}
|
||||
</el-button>
|
||||
@ -52,7 +59,7 @@
|
||||
<el-button :disabled="!hasRecords" type="primary" @click="onClean" link>
|
||||
{{ $t('commons.button.clean') }}
|
||||
</el-button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
@ -2,11 +2,13 @@
|
||||
<div v-loading="loading">
|
||||
<div class="app-status" style="margin-top: 20px" v-if="currentDB?.from === 'remote'">
|
||||
<el-card>
|
||||
<div>
|
||||
<div class="flex w-full flex-col gap-4 md:flex-row">
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<el-tag style="float: left" effect="dark" type="success">
|
||||
{{ currentDB?.type === 'mysql' ? 'Mysql' : 'MariaDB' }}
|
||||
</el-tag>
|
||||
<el-tag class="status-content">{{ $t('app.version') }}: {{ currentDB?.version }}</el-tag>
|
||||
<el-tag>{{ $t('app.version') }}: {{ currentDB?.version }}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
@ -2,9 +2,11 @@
|
||||
<div v-loading="loading">
|
||||
<div class="app-status" style="margin-top: 20px" v-if="currentDB?.from === 'remote'">
|
||||
<el-card>
|
||||
<div>
|
||||
<div class="flex w-full flex-col gap-4 md:flex-row">
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<el-tag style="float: left" effect="dark" type="success">PostgreSQL</el-tag>
|
||||
<el-tag class="status-content">{{ $t('app.version') }}: {{ currentDB?.version }}</el-tag>
|
||||
<el-tag>{{ $t('app.version') }}: {{ currentDB?.version }}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
@ -2,9 +2,11 @@
|
||||
<div v-loading="loading">
|
||||
<div class="app-status" style="margin-top: 20px" v-if="currentDB && currentDB.from === 'remote'">
|
||||
<el-card>
|
||||
<div>
|
||||
<div class="flex w-full flex-col gap-4 md:flex-row">
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<el-tag style="float: left" effect="dark" type="success">Redis</el-tag>
|
||||
<el-tag class="status-content">{{ $t('app.version') }}: {{ currentDB?.version }}</el-tag>
|
||||
<el-tag>{{ $t('app.version') }}: {{ currentDB?.version }}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
@ -2,33 +2,34 @@
|
||||
<div>
|
||||
<div class="app-status" style="margin-top: 20px">
|
||||
<el-card>
|
||||
<div class="flex flex-row flex-wrap gap-2 sm:justify-between items-center">
|
||||
<div class="flex flex-row flex-wrap">
|
||||
<div class="flex w-full flex-col gap-4 md:flex-row">
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<el-tag effect="dark" type="success">{{ baseInfo.name }}</el-tag>
|
||||
<el-tag round class="status-content" v-if="baseInfo.status === 'running'" type="success">
|
||||
<el-tag round v-if="baseInfo.status === 'running'" type="success">
|
||||
{{ $t('commons.status.running') }}
|
||||
</el-tag>
|
||||
<el-tag round class="status-content" v-if="baseInfo.status === 'not running'" type="info">
|
||||
<el-tag round v-if="baseInfo.status === 'not running'" type="info">
|
||||
{{ $t('commons.status.stopped') }}
|
||||
</el-tag>
|
||||
<el-tag class="status-content">{{ $t('app.version') }}: {{ baseInfo.version }}</el-tag>
|
||||
<el-tag>{{ $t('app.version') }}: {{ baseInfo.version }}</el-tag>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center">
|
||||
<div v-if="baseInfo.status === 'running'">
|
||||
<el-button type="primary" @click="onOperate('stop')" link>
|
||||
<div class="mt-0.5">
|
||||
<el-button type="primary" v-if="baseInfo.status === 'running'" @click="onOperate('stop')" link>
|
||||
{{ $t('commons.button.stop') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-if="baseInfo.status === 'not running'">
|
||||
<el-button type="primary" @click="onOperate('start')" link>
|
||||
<el-button
|
||||
type="primary"
|
||||
v-if="baseInfo.status === 'not running'"
|
||||
@click="onOperate('start')"
|
||||
link
|
||||
>
|
||||
{{ $t('commons.button.start') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<el-divider direction="vertical" />
|
||||
<el-button type="primary" @click="onOperate('restart')" link>
|
||||
{{ $t('container.restart') }}
|
||||
</el-button>
|
||||
<div v-if="onPing !== 'None'">
|
||||
<span v-if="onPing !== 'None'">
|
||||
<el-divider direction="vertical" />
|
||||
<el-button type="primary" link>{{ $t('firewall.noPing') }}</el-button>
|
||||
<el-switch
|
||||
@ -39,7 +40,7 @@
|
||||
@change="onPingOperate"
|
||||
v-model="onPing"
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
@ -4,9 +4,10 @@
|
||||
|
||||
<div class="app-status" style="margin-top: 20px">
|
||||
<el-card>
|
||||
<div>
|
||||
<div class="flex w-full flex-col gap-4 md:flex-row">
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<el-tag style="float: left" effect="dark" type="success">SSH</el-tag>
|
||||
<el-tag round class="status-content" v-if="form.status === 'Enable'" type="success">
|
||||
<el-tag round v-if="form.status === 'Enable'" type="success">
|
||||
{{ $t('commons.status.running') }}
|
||||
</el-tag>
|
||||
<el-popover
|
||||
@ -17,12 +18,13 @@
|
||||
:content="form.message"
|
||||
>
|
||||
<template #reference>
|
||||
<el-tag round class="status-content" v-if="form.status === 'Disable'" type="info">
|
||||
<el-tag round v-if="form.status === 'Disable'" type="info">
|
||||
{{ $t('commons.status.stopped') }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-popover>
|
||||
<span class="buttons">
|
||||
</div>
|
||||
<div class="mt-0.5">
|
||||
<el-button v-if="form.status === 'Enable'" type="primary" @click="onOperate('stop')" link>
|
||||
{{ $t('commons.button.stop') }}
|
||||
</el-button>
|
||||
@ -45,7 +47,7 @@
|
||||
@change="onOperate(autoStart)"
|
||||
v-model="autoStart"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
@ -31,6 +31,7 @@
|
||||
<LogFile
|
||||
ref="logRef"
|
||||
:config="logConfig"
|
||||
v-if="showLog"
|
||||
:default-button="false"
|
||||
v-model:loading="loading"
|
||||
v-model:hasContent="hasContent"
|
||||
|
||||
@ -1,17 +1,19 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="app-status tool-status" v-if="data.isExist">
|
||||
<div class="app-status" v-if="data.isExist">
|
||||
<el-card>
|
||||
<div>
|
||||
<el-tag class="w-17" effect="dark" type="success">ClamAV</el-tag>
|
||||
<el-tag round class="status-content" v-if="data.isActive" type="success">
|
||||
<div class="flex w-full flex-col gap-4 md:flex-row">
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<el-tag effect="dark" type="success">ClamAV</el-tag>
|
||||
<el-tag round v-if="data.isActive" type="success">
|
||||
{{ $t('commons.status.running') }}
|
||||
</el-tag>
|
||||
<el-tag round class="status-content" v-if="!data.isActive" type="info">
|
||||
<el-tag round v-if="!data.isActive" type="info">
|
||||
{{ $t('commons.status.stopped') }}
|
||||
</el-tag>
|
||||
<el-tag class="status-content w-24">{{ $t('app.version') }}:{{ data.version }}</el-tag>
|
||||
<span class="buttons">
|
||||
<el-tag class="w-24">{{ $t('app.version') }}:{{ data.version }}</el-tag>
|
||||
</div>
|
||||
<div class="mt-0.5">
|
||||
<el-button type="primary" v-if="!data.isActive" link @click="onOperate('ClamAV', 'start')">
|
||||
{{ $t('app.start') }}
|
||||
</el-button>
|
||||
@ -33,18 +35,20 @@
|
||||
<el-button type="primary" v-if="!showFresh" link @click="changeShow(true)">
|
||||
{{ $t('toolbox.clam.showFresh') }}
|
||||
</el-button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-4" v-if="showFresh">
|
||||
</div>
|
||||
<div v-if="showFresh" class="flex w-full flex-col gap-4 md:flex-row mt-5">
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<el-tag class="w-16" effect="dark" type="success">FreshClam</el-tag>
|
||||
<el-tag round class="status-content" v-if="data.freshIsActive" type="success">
|
||||
<el-tag round v-if="data.freshIsActive" type="success">
|
||||
{{ $t('commons.status.running') }}
|
||||
</el-tag>
|
||||
<el-tag round class="status-content" v-if="!data.freshIsActive" type="info">
|
||||
<el-tag round v-if="!data.freshIsActive" type="info">
|
||||
{{ $t('commons.status.stopped') }}
|
||||
</el-tag>
|
||||
<el-tag class="status-content w-24">{{ $t('app.version') }}:{{ data.freshVersion }}</el-tag>
|
||||
<span class="buttons">
|
||||
<el-tag class="w-24">{{ $t('app.version') }}:{{ data.freshVersion }}</el-tag>
|
||||
</div>
|
||||
<div class="mt-0.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
v-if="!data.freshIsActive"
|
||||
@ -65,7 +69,7 @@
|
||||
<el-button type="primary" link @click="onOperate('FreshClam', 'restart')">
|
||||
{{ $t('app.restart') }}
|
||||
</el-button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
@ -2,16 +2,18 @@
|
||||
<div v-loading="loading">
|
||||
<div class="app-status" style="margin-top: 20px">
|
||||
<el-card v-if="form.isExist">
|
||||
<div>
|
||||
<div class="flex w-full flex-col gap-4 md:flex-row">
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<el-tag effect="dark" type="success">Fail2ban</el-tag>
|
||||
<el-tag round class="status-content" v-if="form.isActive" type="success">
|
||||
<el-tag round v-if="form.isActive" type="success">
|
||||
{{ $t('commons.status.running') }}
|
||||
</el-tag>
|
||||
<el-tag round class="status-content" v-if="!form.isActive" type="info">
|
||||
<el-tag round v-if="!form.isActive" type="info">
|
||||
{{ $t('commons.status.stopped') }}
|
||||
</el-tag>
|
||||
<el-tag class="status-content">{{ form.version }}</el-tag>
|
||||
<span class="buttons">
|
||||
<el-tag>{{ form.version }}</el-tag>
|
||||
</div>
|
||||
<div class="mt-0.5">
|
||||
<el-button v-if="form.isActive" type="primary" @click="onOperate('stop')" link>
|
||||
{{ $t('commons.button.stop') }}
|
||||
</el-button>
|
||||
@ -34,7 +36,7 @@
|
||||
@change="onOperate(autoStart)"
|
||||
v-model="autoStart"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
@ -42,16 +44,16 @@
|
||||
<div v-if="form.isExist">
|
||||
<LayoutContent title="Fail2ban" :divider="true">
|
||||
<template #toolbar>
|
||||
<el-row>
|
||||
<el-col :span="16">
|
||||
<div class="flex w-full flex-col gap-4 md:justify-between md:flex-row">
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<el-button :disabled="!form.isActive" type="primary" plain @click="onLoadList('ignore')">
|
||||
{{ $t('toolbox.fail2ban.ignoreIP') }}
|
||||
</el-button>
|
||||
<el-button :disabled="!form.isActive" type="primary" plain @click="onLoadList('banned')">
|
||||
{{ $t('toolbox.fail2ban.bannedIP') }}
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #main>
|
||||
<el-radio-group v-model="confShowType" @change="changeMode">
|
||||
|
||||
@ -2,15 +2,17 @@
|
||||
<div>
|
||||
<div class="app-status" style="margin-top: 20px">
|
||||
<el-card v-if="form.isExist">
|
||||
<div>
|
||||
<div class="flex w-full flex-col gap-4 md:flex-row">
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<el-tag effect="dark" type="success">FTP</el-tag>
|
||||
<el-tag round class="status-content" v-if="form.isActive" type="success">
|
||||
<el-tag round v-if="form.isActive" type="success">
|
||||
{{ $t('commons.status.running') }}
|
||||
</el-tag>
|
||||
<el-tag round class="status-content" v-if="!form.isActive" type="info">
|
||||
<el-tag round v-if="!form.isActive" type="info">
|
||||
{{ $t('commons.status.stopped') }}
|
||||
</el-tag>
|
||||
<span class="buttons">
|
||||
</div>
|
||||
<div class="mt-0.5">
|
||||
<el-button v-if="form.isActive" type="primary" @click="onOperate('stop')" link>
|
||||
{{ $t('commons.button.stop') }}
|
||||
</el-button>
|
||||
@ -21,7 +23,7 @@
|
||||
<el-button type="primary" @click="onOperate('restart')" link>
|
||||
{{ $t('container.restart') }}
|
||||
</el-button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
@ -2,11 +2,13 @@
|
||||
<div>
|
||||
<div class="app-status tool-status" v-if="data.isExist">
|
||||
<el-card>
|
||||
<div>
|
||||
<div class="flex w-full flex-col gap-4 md:flex-row">
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<el-tag effect="dark" type="success">{{ 'Supervisor' }}</el-tag>
|
||||
<Status class="status-content" :key="data.status" :status="data.status"></Status>
|
||||
<el-tag class="status-content">{{ $t('app.version') }}:{{ data.version }}</el-tag>
|
||||
<span class="buttons" v-if="!data.init">
|
||||
<Status :key="data.status" :status="data.status"></Status>
|
||||
<el-tag>{{ $t('app.version') }}:{{ data.version }}</el-tag>
|
||||
</div>
|
||||
<div class="mt-0.5" v-if="!data.init">
|
||||
<el-button type="primary" v-if="data.status != 'running'" link @click="onOperate('start')">
|
||||
{{ $t('app.start') }}
|
||||
</el-button>
|
||||
@ -21,7 +23,7 @@
|
||||
<el-button type="primary" link @click="setting">
|
||||
{{ $t('commons.button.set') }}
|
||||
</el-button>
|
||||
</span>
|
||||
</div>
|
||||
<span class="buttons" v-else>
|
||||
<el-button type="primary" link @click="init">
|
||||
{{ $t('commons.button.init') }}
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
<template>
|
||||
<div class="app-status">
|
||||
<el-card>
|
||||
<div>
|
||||
<div class="flex w-full flex-col gap-4 md:flex-row">
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<el-tag effect="dark" type="success">{{ props.primaryDomain }}</el-tag>
|
||||
<span class="status-content">
|
||||
<span>
|
||||
<Status class="span-font" :key="props.status" :status="props.status"></Status>
|
||||
</span>
|
||||
<span class="status-content">
|
||||
<span>
|
||||
<el-tag type="info">
|
||||
{{ $t('website.expireDate') }}:
|
||||
<span v-if="isEver(props.expireDate)">
|
||||
@ -16,6 +17,7 @@
|
||||
</el-tag>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user