vue/jingrowtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加背景页面只有上传图片后才显示右边栏

Browse Source
This commit is contained in:
jingrow 2026-01-21 16:26:06 +08:00
parent cffe81c594
commit eb0a11b0ef
1 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/views/tools/add_background/add_background.vue
View File

@ -19,7 +19,7 @@
@change="handleFileSelect" @change="handleFileSelect"
/> />
<div class="page-header"> <div class="page-header" :class="{ 'has-sidebar': uploadedImage }">
<h2>{{ t('Add Background') }}</h2> <h2>{{ t('Add Background') }}</h2>
<!-- Color Shades in Header Center --> <!-- Color Shades in Header Center -->
<div v-if="uploadedImage" class="header-color-shades"> <div v-if="uploadedImage" class="header-color-shades">
@ -53,7 +53,7 @@
</div> </div>
</div> </div>
<div class="page-content"> <div class="page-content" :class="{ 'has-sidebar': uploadedImage }">
<div class="tool-container"> <div class="tool-container">
<div class="main-area"> <div class="main-area">
<div class="upload-section"> <div class="upload-section">
@ -1352,6 +1352,10 @@ const removeHistoryItem = (index: number) => {
width: 100%; width: 100%;
padding: 12px 36px; padding: 12px 36px;
gap: 16px; gap: 16px;
transition: padding-right 0.3s ease;
}
.page-header.has-sidebar {
padding-right: 316px; padding-right: 316px;
} }
@ -1418,6 +1422,10 @@ const removeHistoryItem = (index: number) => {
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
min-height: 0; min-height: 0;
transition: padding-right 0.3s ease;
}
.page-content.has-sidebar {
padding-right: 296px; /* Make space for right sidebar + padding */ padding-right: 296px; /* Make space for right sidebar + padding */
} }