mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2025-01-19 00:09:16 +08:00
style: Optimize layout style (#7359)
This commit is contained in:
蘭
GitHub
parent
229254e3d3
commit
2d098f8078
@ -93,7 +93,7 @@ import { ElMessageBox } from 'element-plus';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
const globalStore = GlobalStore();
|
||||
const { isDarkTheme } = storeToRefs(globalStore);
|
||||
const { isDarkTheme, docsUrl } = storeToRefs(globalStore);
|
||||
|
||||
const mobile = computed(() => {
|
||||
return globalStore.isMobile();
|
||||
@ -129,7 +129,7 @@ const toLxware = () => {
|
||||
};
|
||||
|
||||
const toDoc = () => {
|
||||
window.open('https://1panel.cn/docs/', '_blank', 'noopener,noreferrer');
|
||||
window.open(docsUrl.value, '_blank', 'noopener,noreferrer');
|
||||
};
|
||||
|
||||
const toForum = () => {
|
||||
|
||||
@ -1798,7 +1798,7 @@ const message = {
|
||||
all: 'All',
|
||||
version: 'Version',
|
||||
detail: 'Details',
|
||||
params: 'Edit parameters',
|
||||
params: 'Edit',
|
||||
install: 'Install',
|
||||
author: 'Author',
|
||||
source: 'Source',
|
||||
@ -1855,7 +1855,7 @@ const message = {
|
||||
installPrompt: 'No apps installed yet',
|
||||
updateHelper: 'Editing parameters may cause the application to fail to start. Please proceed with caution.',
|
||||
updateWarn: 'Update parameters need to rebuild the application, Do you want to continue? ',
|
||||
busPort: 'Service Port',
|
||||
busPort: 'Port',
|
||||
syncStart: 'Start syncing! Please refresh the app store later',
|
||||
advanced: 'Advanced Settings',
|
||||
cpuCore: 'core(s)',
|
||||
|
||||
@ -48,6 +48,7 @@ const GlobalStore = defineStore({
|
||||
state.themeConfig.theme === 'dark' ||
|
||||
(state.themeConfig.theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches),
|
||||
isDarkGoldTheme: (state) => state.themeConfig.primary === '#F0BE96' && state.isProductPro,
|
||||
docsUrl: (state) => (state.isIntl ? 'https://docs.1panel.hk' : 'https://1panel.cn/docs'),
|
||||
},
|
||||
actions: {
|
||||
setOpenMenuTabs(openMenuTabs: boolean) {
|
||||
|
||||
@ -30,7 +30,6 @@
|
||||
min-width: auto !important;
|
||||
}
|
||||
.d-description {
|
||||
display: block !important;
|
||||
overflow: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,36 +13,40 @@
|
||||
.d-name {
|
||||
height: 20%;
|
||||
.name {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 120px;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
color: var(--panel-text-color);
|
||||
}
|
||||
.status {
|
||||
margin-left: 10px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.h-button {
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.msg {
|
||||
margin-left: 10px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.el-button + .el-button {
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.d-description {
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
.el-tag {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.description {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
}
|
||||
.description {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
.d-button {
|
||||
margin-top: 10px;
|
||||
|
||||
@ -94,11 +94,11 @@
|
||||
:md="24"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
class="install-card-col-12"
|
||||
:class="mode === 'upgrade' ? 'upgrade-card-col-12' : 'install-card-col-12'"
|
||||
>
|
||||
<div class="install-card">
|
||||
<el-card class="e-card">
|
||||
<el-row :gutter="20">
|
||||
<el-row :gutter="10">
|
||||
<el-col :xs="3" :sm="3" :md="3" :lg="4" :xl="4">
|
||||
<div class="icon" @click.stop="openDetail(installed.appKey)">
|
||||
<el-avatar
|
||||
@ -112,9 +112,10 @@
|
||||
<div class="a-detail">
|
||||
<div class="d-name">
|
||||
<el-button link type="info">
|
||||
<span class="name">{{ installed.name }}</span>
|
||||
<el-tooltip effect="dark" :content="installed.name" placement="top">
|
||||
<span class="name">{{ installed.name }}</span>
|
||||
</el-tooltip>
|
||||
</el-button>
|
||||
|
||||
<span class="status">
|
||||
<Status :key="installed.status" :status="installed.status"></Status>
|
||||
</span>
|
||||
@ -210,7 +211,7 @@
|
||||
{{ $t('commons.button.upgrade') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="d-description">
|
||||
<div class="d-description flex flex-wrap items-center justify-start gap-1.5">
|
||||
<el-button class="tagMargin" plain size="small">
|
||||
{{ $t('app.version') }}{{ $t('commons.colon') }}{{ installed.version }}
|
||||
</el-button>
|
||||
@ -237,17 +238,16 @@
|
||||
{{ $t('app.busPort') }}{{ $t('commons.colon')
|
||||
}}{{ installed.httpsPort }}
|
||||
</el-button>
|
||||
|
||||
<div class="description">
|
||||
<span>
|
||||
{{ $t('app.alreadyRun') }}{{ $t('commons.colon') }}
|
||||
{{ getAge(installed.createdAt) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="description">
|
||||
<span>
|
||||
{{ $t('app.alreadyRun') }}{{ $t('commons.colon') }}
|
||||
{{ getAge(installed.createdAt) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="app-divider" />
|
||||
<div
|
||||
class="d-button flex flex-wrap items-center justify-start gap-3"
|
||||
class="d-button flex flex-wrap items-center justify-start gap-1.5"
|
||||
v-if="mode === 'installed' && installed.status != 'Installing'"
|
||||
>
|
||||
<el-button
|
||||
@ -386,7 +386,7 @@ const sync = () => {
|
||||
try {
|
||||
await SyncInstalledApp();
|
||||
MsgSuccess(i18n.global.t('app.syncSuccess'));
|
||||
search();
|
||||
await search();
|
||||
} finally {
|
||||
syncLoading.value = false;
|
||||
}
|
||||
@ -631,10 +631,31 @@ onUnmounted(() => {
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../index.scss';
|
||||
@media only screen and (max-width: 1300px) {
|
||||
@media only screen and (max-width: 1400px) {
|
||||
.install-card-col-12 {
|
||||
max-width: 100%;
|
||||
flex: 0 0 100%;
|
||||
.a-detail {
|
||||
.d-name {
|
||||
.name {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1499px) {
|
||||
.upgrade-card-col-12 {
|
||||
max-width: 100%;
|
||||
flex: 0 0 100%;
|
||||
.a-detail {
|
||||
.d-name {
|
||||
.name {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -647,4 +668,9 @@ onUnmounted(() => {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.d-description {
|
||||
.el-button + .el-button {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -45,7 +45,9 @@ import { onMounted, ref } from 'vue';
|
||||
import SystemUpgrade from '@/components/system-upgrade/index.vue';
|
||||
import { GlobalStore } from '@/store';
|
||||
import PrimaryLogo from '@/assets/images/1panel-logo.svg?component';
|
||||
import { storeToRefs } from 'pinia';
|
||||
const globalStore = GlobalStore();
|
||||
const { docsUrl } = storeToRefs(globalStore);
|
||||
|
||||
const version = ref();
|
||||
const loading = ref();
|
||||
@ -55,7 +57,7 @@ const search = async () => {
|
||||
};
|
||||
|
||||
const toDoc = () => {
|
||||
window.open('https://1panel.cn/docs/', '_blank', 'noopener,noreferrer');
|
||||
window.open(docsUrl.value, '_blank', 'noopener,noreferrer');
|
||||
};
|
||||
const toGithub = () => {
|
||||
window.open('https://github.com/1Panel-dev/1Panel', '_blank', 'noopener,noreferrer');
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user