mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2024-09-20 07:35:58 +08:00
fix:移动端网站页面和数据库页面样式 (#6360)
* fix:移动端网站页面和数据库页面样式 * style:修改database页面样式 * style:修改databse页面手机端搜索框与按钮间距
This commit is contained in:
see-more
GitHub
parent
decc7a4a1e
commit
3356bd8825
|
|
@ -2,75 +2,73 @@
|
||||||
<div>
|
<div>
|
||||||
<div class="app-status" v-if="data.isExist">
|
<div class="app-status" v-if="data.isExist">
|
||||||
<el-card>
|
<el-card>
|
||||||
<div class="flex items-center">
|
<div class="flex items-center justify-between gap-2 sm:gap-10 sm:justify-start">
|
||||||
<div>
|
<div class="flex items-center justify-center gap-2 sm:flex-row">
|
||||||
<el-tag effect="dark" type="success">{{ data.app }}</el-tag>
|
<div>
|
||||||
|
<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>
|
||||||
<div>
|
<div class="grid grid-cols-4 sm:flex sm:flex-row">
|
||||||
<Status class="status-content" :key="refresh" :status="data.status"></Status>
|
<el-button
|
||||||
</div>
|
type="primary"
|
||||||
<div>
|
v-if="data.status != 'Running'"
|
||||||
<el-tag class="status-content">{{ $t('app.version') }}:{{ data.version }}</el-tag>
|
link
|
||||||
</div>
|
@click="onOperate('start')"
|
||||||
<div>
|
:disabled="data.status === 'Installing'"
|
||||||
<span class="buttons">
|
>
|
||||||
<el-button
|
{{ $t('app.start') }}
|
||||||
type="primary"
|
</el-button>
|
||||||
v-if="data.status != 'Running'"
|
<el-button type="primary" v-if="data.status === 'Running'" link @click="onOperate('stop')">
|
||||||
link
|
{{ $t('app.stop') }}
|
||||||
@click="onOperate('start')"
|
</el-button>
|
||||||
:disabled="data.status === 'Installing'"
|
<el-divider direction="vertical" />
|
||||||
>
|
<el-button
|
||||||
{{ $t('app.start') }}
|
type="primary"
|
||||||
</el-button>
|
link
|
||||||
<el-button type="primary" v-if="data.status === 'Running'" link @click="onOperate('stop')">
|
:disabled="data.status === 'Installing'"
|
||||||
{{ $t('app.stop') }}
|
@click="onOperate('restart')"
|
||||||
</el-button>
|
>
|
||||||
<el-divider direction="vertical" />
|
{{ $t('app.restart') }}
|
||||||
<el-button
|
</el-button>
|
||||||
type="primary"
|
<el-divider direction="vertical" />
|
||||||
link
|
<el-button
|
||||||
:disabled="data.status === 'Installing'"
|
type="primary"
|
||||||
@click="onOperate('restart')"
|
link
|
||||||
>
|
v-if="data.app === 'OpenResty'"
|
||||||
{{ $t('app.restart') }}
|
@click="onOperate('reload')"
|
||||||
</el-button>
|
:disabled="data.status !== 'Running'"
|
||||||
<el-divider direction="vertical" />
|
>
|
||||||
<el-button
|
{{ $t('app.reload') }}
|
||||||
type="primary"
|
</el-button>
|
||||||
link
|
<el-divider v-if="data.app === 'OpenResty'" direction="vertical" />
|
||||||
v-if="data.app === 'OpenResty'"
|
<el-button
|
||||||
@click="onOperate('reload')"
|
type="primary"
|
||||||
:disabled="data.status !== 'Running'"
|
@click="setting"
|
||||||
>
|
link
|
||||||
{{ $t('app.reload') }}
|
:disabled="
|
||||||
</el-button>
|
data.status === 'Installing' || (data.status !== 'Running' && data.app === 'OpenResty')
|
||||||
<el-divider v-if="data.app === 'OpenResty'" direction="vertical" />
|
"
|
||||||
<el-button
|
>
|
||||||
type="primary"
|
{{ $t('commons.button.set') }}
|
||||||
@click="setting"
|
</el-button>
|
||||||
link
|
<el-divider v-if="data.app === 'OpenResty'" direction="vertical" />
|
||||||
:disabled="
|
<el-button
|
||||||
data.status === 'Installing' ||
|
v-if="data.app === 'OpenResty'"
|
||||||
(data.status !== 'Running' && data.app === 'OpenResty')
|
type="primary"
|
||||||
"
|
@click="clear"
|
||||||
>
|
link
|
||||||
{{ $t('commons.button.set') }}
|
:disabled="
|
||||||
</el-button>
|
data.status === 'Installing' || (data.status !== 'Running' && data.app === 'OpenResty')
|
||||||
<el-divider v-if="data.app === 'OpenResty'" direction="vertical" />
|
"
|
||||||
<el-button
|
>
|
||||||
v-if="data.app === 'OpenResty'"
|
{{ $t('nginx.clearProxyCache') }}
|
||||||
type="primary"
|
</el-button>
|
||||||
@click="clear"
|
|
||||||
link
|
|
||||||
:disabled="
|
|
||||||
data.status === 'Installing' ||
|
|
||||||
(data.status !== 'Running' && data.app === 'OpenResty')
|
|
||||||
"
|
|
||||||
>
|
|
||||||
{{ $t('nginx.clearProxyCache') }}
|
|
||||||
</el-button>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ml-5" v-if="key === 'openresty' && (httpPort != 80 || httpsPort != 443)">
|
<div class="ml-5" v-if="key === 'openresty' && (httpPort != 80 || httpsPort != 443)">
|
||||||
|
|
@ -95,12 +93,12 @@
|
||||||
<LayoutContent :title="getTitle(key)" :divider="true">
|
<LayoutContent :title="getTitle(key)" :divider="true">
|
||||||
<template #main>
|
<template #main>
|
||||||
<div class="app-warn">
|
<div class="app-warn">
|
||||||
<div class="flx-center">
|
<div class="flex flex-col gap-4 items-cetner justify-center w-full sm:flex-row">
|
||||||
<span>{{ $t('app.checkInstalledWarn', [data.app]) }}</span>
|
<div>{{ $t('app.checkInstalledWarn', [data.app]) }}</div>
|
||||||
<span @click="goRouter(key)" class="flx-align-center">
|
<div @click="goRouter(key)" class="flex items-cetner justify-center text-[#74a4f3]">
|
||||||
<el-icon class="ml-2"><Position /></el-icon>
|
<el-icon class="flex items-center justify-center"><Position /></el-icon>
|
||||||
{{ $t('database.goInstall') }}
|
{{ $t('database.goInstall') }}
|
||||||
</span>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<img src="@/assets/images/no_app.svg" />
|
<img src="@/assets/images/no_app.svg" />
|
||||||
|
|
|
||||||
|
|
@ -61,8 +61,8 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #toolbar>
|
<template #toolbar>
|
||||||
<el-row>
|
<div class="flex flex-wrap gap-4 sm:justify-between">
|
||||||
<el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20">
|
<div class="flex gap-2 flex-wrap items-center justify-start">
|
||||||
<el-button
|
<el-button
|
||||||
v-if="currentDB && (currentDB.from !== 'local' || mysqlStatus === 'Running')"
|
v-if="currentDB && (currentDB.from !== 'local' || mysqlStatus === 'Running')"
|
||||||
type="primary"
|
type="primary"
|
||||||
|
|
@ -81,30 +81,34 @@
|
||||||
>
|
>
|
||||||
{{ $t('database.loadFromRemote') }}
|
{{ $t('database.loadFromRemote') }}
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button @click="goRemoteDB" type="primary" plain>
|
<div>
|
||||||
{{ $t('database.remoteDB') }}
|
<el-button @click="goRemoteDB" type="primary" plain>
|
||||||
</el-button>
|
{{ $t('database.remoteDB') }}
|
||||||
<el-dropdown class="ml-3">
|
|
||||||
<el-button type="primary" plain>
|
|
||||||
{{ $t('database.manage') }}
|
|
||||||
<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
|
||||||
</el-button>
|
</el-button>
|
||||||
<template #dropdown>
|
</div>
|
||||||
<el-dropdown-menu>
|
<div>
|
||||||
<el-dropdown-item icon="Position" @click="goDashboard('phpMyAdmin')">
|
<el-dropdown>
|
||||||
phpMyAdmin
|
<el-button type="primary" plain>
|
||||||
</el-dropdown-item>
|
{{ $t('database.manage') }}
|
||||||
<el-dropdown-item icon="Position" @click="goDashboard('Adminer')" divided>
|
<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
||||||
Adminer
|
</el-button>
|
||||||
</el-dropdown-item>
|
<template #dropdown>
|
||||||
</el-dropdown-menu>
|
<el-dropdown-menu>
|
||||||
</template>
|
<el-dropdown-item icon="Position" @click="goDashboard('phpMyAdmin')">
|
||||||
</el-dropdown>
|
phpMyAdmin
|
||||||
</el-col>
|
</el-dropdown-item>
|
||||||
<el-col :xs="24" :sm="4" :md="4" :lg="4" :xl="4">
|
<el-dropdown-item icon="Position" @click="goDashboard('Adminer')" divided>
|
||||||
|
Adminer
|
||||||
|
</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
<TableSearch @search="search()" v-model:searchName="searchName" />
|
<TableSearch @search="search()" v-model:searchName="searchName" />
|
||||||
</el-col>
|
</div>
|
||||||
</el-row>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template #main v-if="currentDB">
|
<template #main v-if="currentDB">
|
||||||
<ComplexTable
|
<ComplexTable
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue