mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2025-03-17 03:04:46 +08:00
style: 修改应用商店样式
This commit is contained in:
zhengkunwang223
zhengkunwang223
parent
c1332235a0
commit
d443103e2c
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<LayoutContent v-loading="loading" v-if="!showDetail" :title="$t('app.app')" :divider="true">
|
<LayoutContent v-loading="loading" v-if="!showDetail" :title="$t('app.app')">
|
||||||
<template #toolbar>
|
<template #toolbar>
|
||||||
<el-row :gutter="5">
|
<el-row :gutter="5">
|
||||||
<el-col :span="20">
|
<el-col :span="20">
|
||||||
@ -47,43 +47,48 @@
|
|||||||
<el-row :gutter="5">
|
<el-row :gutter="5">
|
||||||
<el-col v-for="(app, index) in apps" :key="index" :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
|
<el-col v-for="(app, index) in apps" :key="index" :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
|
||||||
<div class="app-card">
|
<div class="app-card">
|
||||||
<el-row :gutter="24">
|
<el-card class="e-card">
|
||||||
<el-col :xs="5" :sm="5" :md="6" :lg="6" :xl="5">
|
<el-row :gutter="24">
|
||||||
<div class="app-icon">
|
<el-col :xs="5" :sm="5" :md="6" :lg="6" :xl="5">
|
||||||
<el-avatar shape="square" :size="60" :src="'data:image/png;base64,' + app.icon" />
|
<div class="app-icon">
|
||||||
</div>
|
<el-avatar
|
||||||
</el-col>
|
shape="square"
|
||||||
<el-col :xs="19" :sm="19" :md="18" :lg="18" :xl="19">
|
:size="60"
|
||||||
<div class="app-content">
|
:src="'data:image/png;base64,' + app.icon"
|
||||||
<div class="app-header">
|
/>
|
||||||
<span class="app-title">{{ app.name }}</span>
|
|
||||||
<el-button
|
|
||||||
class="app-button"
|
|
||||||
type="primary"
|
|
||||||
plain
|
|
||||||
round
|
|
||||||
size="small"
|
|
||||||
@click="getAppDetail(app.key)"
|
|
||||||
>
|
|
||||||
{{ $t('app.install') }}
|
|
||||||
</el-button>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="app-desc">
|
</el-col>
|
||||||
<span class="desc">
|
<el-col :xs="19" :sm="19" :md="18" :lg="18" :xl="19">
|
||||||
{{ language == 'zh' ? app.shortDescZh : app.shortDescEn }}
|
<div class="app-content">
|
||||||
</span>
|
<div class="app-header">
|
||||||
</div>
|
<span class="app-title">{{ app.name }}</span>
|
||||||
<div class="app-tag">
|
<el-button
|
||||||
<el-tag v-for="(tag, ind) in app.tags" :key="ind" style="margin-right: 5px">
|
class="app-button"
|
||||||
<span :style="{ color: getColor(ind) }">
|
type="primary"
|
||||||
{{ language == 'zh' ? tag.name : tag.key }}
|
plain
|
||||||
|
round
|
||||||
|
size="small"
|
||||||
|
@click="getAppDetail(app.key)"
|
||||||
|
>
|
||||||
|
{{ $t('app.install') }}
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="app-desc">
|
||||||
|
<span class="desc">
|
||||||
|
{{ language == 'zh' ? app.shortDescZh : app.shortDescEn }}
|
||||||
</span>
|
</span>
|
||||||
</el-tag>
|
</div>
|
||||||
|
<div class="app-tag">
|
||||||
|
<el-tag v-for="(tag, ind) in app.tags" :key="ind" style="margin-right: 5px">
|
||||||
|
<span :style="{ color: getColor(ind) }">
|
||||||
|
{{ language == 'zh' ? tag.name : tag.key }}
|
||||||
|
</span>
|
||||||
|
</el-tag>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="divider"></div>
|
</el-col>
|
||||||
</div>
|
</el-row>
|
||||||
</el-col>
|
</el-card>
|
||||||
</el-row>
|
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
@ -234,8 +239,13 @@ onMounted(() => {
|
|||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:hover {
|
|
||||||
background-color: rgba(0, 94, 235, 0.03);
|
.e-card {
|
||||||
|
border: var(--panel-border) !important;
|
||||||
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
border: 1px solid var(--el-color-primary) !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -46,8 +46,13 @@
|
|||||||
min-width: 440px;
|
min-width: 440px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:hover {
|
|
||||||
background-color: rgba(0, 94, 235, 0.03);
|
.e-card {
|
||||||
|
border: var(--panel-border) !important;
|
||||||
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
border: 1px solid var(--el-color-primary) !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<LayoutContent v-loading="loading || syncLoading" :title="activeName" :divider="true">
|
<LayoutContent v-loading="loading || syncLoading" :title="activeName">
|
||||||
<template #toolbar>
|
<template #toolbar>
|
||||||
<el-row :gutter="5">
|
<el-row :gutter="5">
|
||||||
<el-col :span="20">
|
<el-col :span="20">
|
||||||
@ -67,103 +67,112 @@
|
|||||||
class="install-card-col-12"
|
class="install-card-col-12"
|
||||||
>
|
>
|
||||||
<div class="install-card">
|
<div class="install-card">
|
||||||
<el-row :gutter="24">
|
<el-card class="e-card">
|
||||||
<el-col :xs="3" :sm="3" :md="3" :lg="4" :xl="4">
|
<el-row :gutter="24">
|
||||||
<div class="icon">
|
<el-col :xs="3" :sm="3" :md="3" :lg="4" :xl="4">
|
||||||
<el-avatar
|
<div class="icon">
|
||||||
shape="square"
|
<el-avatar
|
||||||
:size="66"
|
shape="square"
|
||||||
:src="'data:image/png;base64,' + installed.app.icon"
|
:size="66"
|
||||||
/>
|
:src="'data:image/png;base64,' + installed.app.icon"
|
||||||
</div>
|
/>
|
||||||
</el-col>
|
|
||||||
<el-col :xs="21" :sm="21" :md="21" :lg="20" :xl="20">
|
|
||||||
<div class="a-detail">
|
|
||||||
<div class="d-name">
|
|
||||||
<span class="name">{{ installed.name }}</span>
|
|
||||||
<span class="status">
|
|
||||||
<el-popover
|
|
||||||
v-if="installed.status === 'Error'"
|
|
||||||
placement="bottom"
|
|
||||||
:width="400"
|
|
||||||
trigger="hover"
|
|
||||||
:content="installed.message"
|
|
||||||
>
|
|
||||||
<template #reference>
|
|
||||||
<Status :key="installed.status" :status="installed.status"></Status>
|
|
||||||
</template>
|
|
||||||
</el-popover>
|
|
||||||
<span v-else>
|
|
||||||
<Status :key="installed.status" :status="installed.status"></Status>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<el-button
|
|
||||||
class="h-button"
|
|
||||||
type="primary"
|
|
||||||
plain
|
|
||||||
round
|
|
||||||
size="small"
|
|
||||||
:disabled="installed.status !== 'Running'"
|
|
||||||
@click="openUploads(installed.app.key, installed.name)"
|
|
||||||
v-if="mode === 'installed'"
|
|
||||||
>
|
|
||||||
{{ $t('database.loadBackup') }}
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
class="h-button"
|
|
||||||
type="primary"
|
|
||||||
plain
|
|
||||||
round
|
|
||||||
size="small"
|
|
||||||
:disabled="installed.status !== 'Running'"
|
|
||||||
@click="openBackups(installed.app.key, installed.name)"
|
|
||||||
v-if="mode === 'installed'"
|
|
||||||
>
|
|
||||||
{{ $t('app.backup') }}
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
class="h-button"
|
|
||||||
type="primary"
|
|
||||||
plain
|
|
||||||
round
|
|
||||||
size="small"
|
|
||||||
@click="openOperate(installed, 'upgrade')"
|
|
||||||
v-if="mode === 'upgrade'"
|
|
||||||
>
|
|
||||||
{{ $t('app.upgrade') }}
|
|
||||||
</el-button>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="d-description">
|
</el-col>
|
||||||
<el-tag>{{ $t('app.version') }}：{{ installed.version }}</el-tag>
|
<el-col :xs="21" :sm="21" :md="21" :lg="20" :xl="20">
|
||||||
<el-tag v-if="installed.httpPort > 0">
|
<div class="a-detail">
|
||||||
{{ $t('app.busPort') }}：{{ installed.httpPort }}
|
<div class="d-name">
|
||||||
</el-tag>
|
<span class="name">{{ installed.name }}</span>
|
||||||
<div class="description">
|
<span class="status">
|
||||||
<span>{{ $t('app.areadyRun') }}： {{ getAge(installed.createdAt) }}</span>
|
<el-popover
|
||||||
|
v-if="installed.status === 'Error'"
|
||||||
|
placement="bottom"
|
||||||
|
:width="400"
|
||||||
|
trigger="hover"
|
||||||
|
:content="installed.message"
|
||||||
|
>
|
||||||
|
<template #reference>
|
||||||
|
<Status
|
||||||
|
:key="installed.status"
|
||||||
|
:status="installed.status"
|
||||||
|
></Status>
|
||||||
|
</template>
|
||||||
|
</el-popover>
|
||||||
|
<span v-else>
|
||||||
|
<Status :key="installed.status" :status="installed.status"></Status>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<el-button
|
||||||
|
class="h-button"
|
||||||
|
type="primary"
|
||||||
|
plain
|
||||||
|
round
|
||||||
|
size="small"
|
||||||
|
:disabled="installed.status !== 'Running'"
|
||||||
|
@click="openUploads(installed.app.key, installed.name)"
|
||||||
|
v-if="mode === 'installed'"
|
||||||
|
>
|
||||||
|
{{ $t('database.loadBackup') }}
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
class="h-button"
|
||||||
|
type="primary"
|
||||||
|
plain
|
||||||
|
round
|
||||||
|
size="small"
|
||||||
|
:disabled="installed.status !== 'Running'"
|
||||||
|
@click="openBackups(installed.app.key, installed.name)"
|
||||||
|
v-if="mode === 'installed'"
|
||||||
|
>
|
||||||
|
{{ $t('app.backup') }}
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
class="h-button"
|
||||||
|
type="primary"
|
||||||
|
plain
|
||||||
|
round
|
||||||
|
size="small"
|
||||||
|
@click="openOperate(installed, 'upgrade')"
|
||||||
|
v-if="mode === 'upgrade'"
|
||||||
|
>
|
||||||
|
{{ $t('app.upgrade') }}
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="d-description">
|
||||||
|
<el-tag>{{ $t('app.version') }}：{{ installed.version }}</el-tag>
|
||||||
|
<el-tag v-if="installed.httpPort > 0">
|
||||||
|
{{ $t('app.busPort') }}：{{ installed.httpPort }}
|
||||||
|
</el-tag>
|
||||||
|
<div class="description">
|
||||||
|
<span>
|
||||||
|
{{ $t('app.areadyRun') }}： {{ getAge(installed.createdAt) }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="app-divider" />
|
||||||
|
<div
|
||||||
|
class="d-button"
|
||||||
|
v-if="mode === 'installed' && installed.status != 'Installing'"
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
v-for="(button, key) in buttons"
|
||||||
|
:key="key"
|
||||||
|
:type="
|
||||||
|
button.disabled && button.disabled(installed) ? 'info' : 'primary'
|
||||||
|
"
|
||||||
|
plain
|
||||||
|
round
|
||||||
|
size="small"
|
||||||
|
@click="button.click(installed)"
|
||||||
|
:disabled="button.disabled && button.disabled(installed)"
|
||||||
|
>
|
||||||
|
{{ button.label }}
|
||||||
|
</el-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="app-divider" />
|
</el-col>
|
||||||
<div
|
</el-row>
|
||||||
class="d-button"
|
</el-card>
|
||||||
v-if="mode === 'installed' && installed.status != 'Installing'"
|
|
||||||
>
|
|
||||||
<el-button
|
|
||||||
v-for="(button, key) in buttons"
|
|
||||||
:key="key"
|
|
||||||
:type="button.disabled && button.disabled(installed) ? 'info' : 'primary'"
|
|
||||||
plain
|
|
||||||
round
|
|
||||||
size="small"
|
|
||||||
@click="button.click(installed)"
|
|
||||||
:disabled="button.disabled && button.disabled(installed)"
|
|
||||||
>
|
|
||||||
{{ button.label }}
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user