fix:移动端网站页面和数据库页面样式 (#6360)

* fix:移动端网站页面和数据库页面样式

* style:修改database页面样式

* style:修改databse页面手机端搜索框与按钮间距
This commit is contained in:
see-more 2024-09-05 11:46:57 +08:00 committed by GitHub
parent decc7a4a1e
commit 3356bd8825
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 99 additions and 97 deletions

View file

@ -2,18 +2,19 @@
<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 class="flex items-center justify-center gap-2 sm:flex-row">
<div> <div>
<el-tag effect="dark" type="success">{{ data.app }}</el-tag> <el-tag effect="dark" type="success">{{ data.app }}</el-tag>
</div> </div>
<div> <div>
<Status class="status-content" :key="refresh" :status="data.status"></Status> <Status :key="refresh" :status="data.status"></Status>
</div> </div>
<div> <div>
<el-tag class="status-content">{{ $t('app.version') }}:{{ data.version }}</el-tag> <el-tag>{{ $t('app.version') }}:{{ data.version }}</el-tag>
</div> </div>
<div> </div>
<span class="buttons"> <div class="grid grid-cols-4 sm:flex sm:flex-row">
<el-button <el-button
type="primary" type="primary"
v-if="data.status != 'Running'" v-if="data.status != 'Running'"
@ -51,8 +52,7 @@
@click="setting" @click="setting"
link link
:disabled=" :disabled="
data.status === 'Installing' || data.status === 'Installing' || (data.status !== 'Running' && data.app === 'OpenResty')
(data.status !== 'Running' && data.app === 'OpenResty')
" "
> >
{{ $t('commons.button.set') }} {{ $t('commons.button.set') }}
@ -64,13 +64,11 @@
@click="clear" @click="clear"
link link
:disabled=" :disabled="
data.status === 'Installing' || data.status === 'Installing' || (data.status !== 'Running' && data.app === 'OpenResty')
(data.status !== 'Running' && data.app === 'OpenResty')
" "
> >
{{ $t('nginx.clearProxyCache') }} {{ $t('nginx.clearProxyCache') }}
</el-button> </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" />

View file

@ -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,10 +81,13 @@
> >
{{ $t('database.loadFromRemote') }} {{ $t('database.loadFromRemote') }}
</el-button> </el-button>
<div>
<el-button @click="goRemoteDB" type="primary" plain> <el-button @click="goRemoteDB" type="primary" plain>
{{ $t('database.remoteDB') }} {{ $t('database.remoteDB') }}
</el-button> </el-button>
<el-dropdown class="ml-3"> </div>
<div>
<el-dropdown>
<el-button type="primary" plain> <el-button type="primary" plain>
{{ $t('database.manage') }} {{ $t('database.manage') }}
<el-icon class="el-icon--right"><arrow-down /></el-icon> <el-icon class="el-icon--right"><arrow-down /></el-icon>
@ -100,11 +103,12 @@
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
</el-col> </div>
<el-col :xs="24" :sm="4" :md="4" :lg="4" :xl="4"> </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