github
/
1Panel
mirror of https://github.com/1Panel-dev/1Panel
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

style: 修改应用商店样式

Browse Source
pull/1060/head
zhengkunwang223 2 years ago committed by zhengkunwang223
parent c1332235a0
commit d443103e2c
3 changed files with 155 additions and 131 deletions
Show Stats Download Patch File Download Diff File

84
frontend/src/views/app-store/apps/index.vue
Unescape View File

@ -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;
}
} }
} }

9
frontend/src/views/app-store/index.scss
Unescape View File

@ -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;
}
} }
} }

193
frontend/src/views/app-store/installed/index.vue
Unescape View File

@ -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> </div>
<el-col :xs="21" :sm="21" :md="21" :lg="20" :xl="20"> </el-col>
<div class="a-detail"> <el-col :xs="21" :sm="21" :md="21" :lg="20" :xl="20">
<div class="d-name"> <div class="a-detail">
<span class="name">{{ installed.name }}</span> <div class="d-name">
<span class="status"> <span class="name">{{ installed.name }}</span>
<el-popover <span class="status">
v-if="installed.status === 'Error'" <el-popover
placement="bottom" v-if="installed.status === 'Error'"
:width="400" placement="bottom"
trigger="hover" :width="400"
:content="installed.message" trigger="hover"
> :content="installed.message"
<template #reference> >
<template #reference>
<Status
:key="installed.status"
:status="installed.status"
></Status>
</template>
</el-popover>
<span v-else>
<Status :key="installed.status" :status="installed.status"></Status> <Status :key="installed.status" :status="installed.status"></Status>
</template> </span>
</el-popover>
<span v-else>
<Status :key="installed.status" :status="installed.status"></Status>
</span> </span>
</span>
<el-button <el-button
class="h-button" class="h-button"
type="primary" type="primary"
plain plain
round round
size="small" size="small"
:disabled="installed.status !== 'Running'" :disabled="installed.status !== 'Running'"
@click="openUploads(installed.app.key, installed.name)" @click="openUploads(installed.app.key, installed.name)"
v-if="mode === 'installed'" v-if="mode === 'installed'"
> >
{{ $t('database.loadBackup') }} {{ $t('database.loadBackup') }}
</el-button> </el-button>
<el-button <el-button
class="h-button" class="h-button"
type="primary" type="primary"
plain plain
round round
size="small" size="small"
:disabled="installed.status !== 'Running'" :disabled="installed.status !== 'Running'"
@click="openBackups(installed.app.key, installed.name)" @click="openBackups(installed.app.key, installed.name)"
v-if="mode === 'installed'" v-if="mode === 'installed'"
> >
{{ $t('app.backup') }} {{ $t('app.backup') }}
</el-button> </el-button>
<el-button <el-button
class="h-button" class="h-button"
type="primary" type="primary"
plain plain
round round
size="small" size="small"
@click="openOperate(installed, 'upgrade')" @click="openOperate(installed, 'upgrade')"
v-if="mode === 'upgrade'" v-if="mode === 'upgrade'"
> >
{{ $t('app.upgrade') }} {{ $t('app.upgrade') }}
</el-button> </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> <div class="d-description">
<div class="app-divider" /> <el-tag>{{ $t('app.version') }}：{{ installed.version }}</el-tag>
<div <el-tag v-if="installed.httpPort > 0">
class="d-button" {{ $t('app.busPort') }}：{{ installed.httpPort }}
v-if="mode === 'installed' && installed.status != 'Installing'" </el-tag>
> <div class="description">
<el-button <span>
v-for="(button, key) in buttons" {{ $t('app.areadyRun') }}： {{ getAge(installed.createdAt) }}
:key="key" </span>
:type="button.disabled && button.disabled(installed) ? 'info' : 'primary'" </div>
plain </div>
round <div class="app-divider" />
size="small" <div
@click="button.click(installed)" class="d-button"
:disabled="button.disabled && button.disabled(installed)" v-if="mode === 'installed' && installed.status != 'Installing'"
> >
{{ button.label }} <el-button
</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> </el-col>
</el-col> </el-row>
</el-row> </el-card>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>

Write Preview
Loading…
Cancel
Save