gh_mirrors/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-03-17 11:14:44 +08:00
Code

style: 修改应用商店样式

Browse Source
This commit is contained in:
zhengkunwang223 2023-05-11 14:32:14 +08:00 committed by zhengkunwang223
parent c1332235a0
commit d443103e2c
3 changed files with 158 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/views/app-store/apps/index.vue
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,10 +47,15 @@
<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-card class="e-card">
<el-row :gutter="24"> <el-row :gutter="24">
<el-col :xs="5" :sm="5" :md="6" :lg="6" :xl="5"> <el-col :xs="5" :sm="5" :md="6" :lg="6" :xl="5">
<div class="app-icon"> <div class="app-icon">
<el-avatar shape="square" :size="60" :src="'data:image/png;base64,' + app.icon" /> <el-avatar
shape="square"
:size="60"
:src="'data:image/png;base64,' + app.icon"
/>
</div> </div>
</el-col> </el-col>
<el-col :xs="19" :sm="19" :md="18" :lg="18" :xl="19"> <el-col :xs="19" :sm="19" :md="18" :lg="18" :xl="19">
@ -80,10 +85,10 @@
</span> </span>
</el-tag> </el-tag>
</div> </div>
<div class="divider"></div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</el-card>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
@ -234,8 +239,13 @@ onMounted(() => {
margin-top: 5px; margin-top: 5px;
} }
} }
.e-card {
border: var(--panel-border) !important;
&:hover { &:hover {
background-color: rgba(0, 94, 235, 0.03); cursor: pointer;
border: 1px solid var(--el-color-primary) !important;
}
} }
} }

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

@ -46,8 +46,13 @@
min-width: 440px; min-width: 440px;
} }
} }
.e-card {
border: var(--panel-border) !important;
&:hover { &:hover {
background-color: rgba(0, 94, 235, 0.03); cursor: pointer;
border: 1px solid var(--el-color-primary) !important;
}
} }
} }

17
frontend/src/views/app-store/installed/index.vue
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,6 +67,7 @@
class="install-card-col-12" class="install-card-col-12"
> >
<div class="install-card"> <div class="install-card">
<el-card class="e-card">
<el-row :gutter="24"> <el-row :gutter="24">
<el-col :xs="3" :sm="3" :md="3" :lg="4" :xl="4"> <el-col :xs="3" :sm="3" :md="3" :lg="4" :xl="4">
<div class="icon"> <div class="icon">
@ -90,7 +91,10 @@
:content="installed.message" :content="installed.message"
> >
<template #reference> <template #reference>
<Status :key="installed.status" :status="installed.status"></Status> <Status
:key="installed.status"
:status="installed.status"
></Status>
</template> </template>
</el-popover> </el-popover>
<span v-else> <span v-else>
@ -140,7 +144,9 @@
{{ $t('app.busPort') }}：{{ installed.httpPort }} {{ $t('app.busPort') }}：{{ installed.httpPort }}
</el-tag> </el-tag>
<div class="description"> <div class="description">
<span>{{ $t('app.areadyRun') }}： {{ getAge(installed.createdAt) }}</span> <span>
{{ $t('app.areadyRun') }}： {{ getAge(installed.createdAt) }}
</span>
</div> </div>
</div> </div>
<div class="app-divider" /> <div class="app-divider" />
@ -151,7 +157,9 @@
<el-button <el-button
v-for="(button, key) in buttons" v-for="(button, key) in buttons"
:key="key" :key="key"
:type="button.disabled && button.disabled(installed) ? 'info' : 'primary'" :type="
button.disabled && button.disabled(installed) ? 'info' : 'primary'
"
plain plain
round round
size="small" size="small"
@ -164,6 +172,7 @@
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</el-card>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>