style: 面板样式优化 (#7026)

This commit is contained in:
2024-11-13 14:30:00 +08:00 committed by GitHub
parent 06554375cb
commit 5c7fab8f01
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 33 additions and 12 deletions

View File

@ -54,11 +54,6 @@
<DrawerHeader :header="$t('commons.button.upgrade')" :back="handleClose" /> <DrawerHeader :header="$t('commons.button.upgrade')" :back="handleClose" />
</template> </template>
<div class="panel-MdEditor"> <div class="panel-MdEditor">
<el-alert :closable="false">
<span class="line-height">{{ $t('setting.versionHelper') }}</span>
<li class="line-height">{{ $t('setting.versionHelper1') }}</li>
<li class="line-height">{{ $t('setting.versionHelper2') }}</li>
</el-alert>
<div class="default-theme" style="margin-left: 20px"> <div class="default-theme" style="margin-left: 20px">
<h2 class="inline-block">{{ $t('app.version') }}</h2> <h2 class="inline-block">{{ $t('app.version') }}</h2>
</div> </div>
@ -229,4 +224,7 @@ onMounted(() => {
:deep(.el-link__inner) { :deep(.el-link__inner) {
font-weight: 400; font-weight: 400;
} }
:deep(.md-editor-dark) {
background-color: var(--panel-main-bg-color-9);
}
</style> </style>

View File

@ -23,6 +23,7 @@ const isCollapse = computed(() => menuStore.isCollapse);
} }
.collapse-icon { .collapse-icon {
color: var(--panel-main-bg-color-1);
margin-left: 25px; margin-left: 25px;
&:hover { &:hover {
color: $primary-color; color: $primary-color;

View File

@ -2,7 +2,7 @@
<el-dialog <el-dialog
v-model="open" v-model="open"
:title="$t('app.checkTitle')" :title="$t('app.checkTitle')"
width="50%" width="40%"
:close-on-click-modal="false" :close-on-click-modal="false"
:destroy-on-close="true" :destroy-on-close="true"
> >
@ -10,18 +10,17 @@
<el-col :span="20" :offset="2" v-if="open"> <el-col :span="20" :offset="2" v-if="open">
<el-alert <el-alert
type="error" type="error"
:description="$t('app.deleteHelper', [$t('app.database')])" :title="$t('app.deleteHelper', [$t('app.database')])"
center center
show-icon show-icon
:closable="false" :closable="false"
/> />
<br /> <el-descriptions :column="1" border>
<el-descriptions border :column="1"> <el-descriptions-item label-class-name="label" class-name="content" min-width="60px">
<el-descriptions-item>
<template #label> <template #label>
<a href="javascript:void(0);" @click="toApp()">{{ $t('app.app') }}</a> <a href="javascript:void(0);" class="content-a" @click="toApp()">{{ $t('app.app') }}</a>
</template> </template>
{{ installData.join(',') }} <pre>{{ installData.join('\n') }}</pre>
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> </el-descriptions>
</el-col> </el-col>
@ -41,6 +40,7 @@ let open = ref(false);
const acceptParams = (props: InstallProps) => { const acceptParams = (props: InstallProps) => {
installData.value = props.items; installData.value = props.items;
installData.value.push('sdsfhjdghjdgfhsdgfhjsgfkhjsdgfhjasgdfhjasgdfjhsagdfhjsagdfashdfgaskhjdfgaskjhdf');
open.value = true; open.value = true;
}; };
@ -52,3 +52,25 @@ defineExpose({
acceptParams, acceptParams,
}); });
</script> </script>
<style scoped>
:deep(.label) {
background: var(--panel-main-bg-color-10) !important;
}
:deep(.content) {
background: var(--panel-main-bg-color-10);
}
:deep(.content-a) {
color: var(--panel-color-primary);
}
pre {
margin: 0;
width: 350px;
overflow: hidden;
text-overflow: ellipsis;
}
:deep(.el-descriptions) {
overflow: hidden;
text-overflow: ellipsis;
}
</style>