fix: 修复批量工具抽屉布局问题
All checks were successful
Build and Deploy TenantUI / build-and-deploy (push) Successful in 51s
All checks were successful
Build and Deploy TenantUI / build-and-deploy (push) Successful in 51s
- 修复导入导出面板按钮重叠，改为纵向排列 - 移除抽屉关闭按钮(×) - 调价面板步骤2拆分为两行布局，输入框独立一行
This commit is contained in:
@@ -85,7 +85,7 @@ function setExportCategoryIds(value: unknown) {
|
||||
|
||||
<article class="pbt-sub-card">
|
||||
<h4>导出商品</h4>
|
||||
<div class="pbt-step" style="margin-bottom: 12px">
|
||||
<div class="pbt-step">
|
||||
<div class="pbt-pills">
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@@ -143,6 +143,7 @@ function setAmount(value: null | number | string) {
|
||||
|
||||
<div class="pbt-step">
|
||||
<div class="pbt-step-label"><span class="num">2</span> 调价方式</div>
|
||||
<!-- 1. 方向与类型选择 -->
|
||||
<div class="pbt-adjust-row">
|
||||
<div class="pbt-pills">
|
||||
<button
|
||||
@@ -168,11 +169,15 @@ function setAmount(value: null | number | string) {
|
||||
{{ item.label }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 2. 数值输入与预览 -->
|
||||
<div class="pbt-adjust-input">
|
||||
<InputNumber
|
||||
:value="props.amount"
|
||||
:min="0"
|
||||
:step="0.1"
|
||||
class="pbt-number"
|
||||
:addon-after="props.amountType === 'percent' ? '%' : '¥'"
|
||||
@update:value="setAmount"
|
||||
/>
|
||||
<Button :loading="props.previewLoading" @click="emit('preview')">
|
||||
|
||||
@@ -188,6 +188,7 @@ const activeToolTitle = computed(() => {
|
||||
:title="activeToolTitle"
|
||||
:open="Boolean(activeTool)"
|
||||
:width="920"
|
||||
:closable="false"
|
||||
@close="closeTool"
|
||||
>
|
||||
<BatchPriceAdjustPanel
|
||||
|
||||
@@ -1,17 +1,26 @@
|
||||
.pbt-drawer .ant-drawer-header {
|
||||
padding: 14px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
/* 批量工具抽屉样式 —— 与项目其他抽屉保持一致的设计语言。 */
|
||||
.pbt-drawer {
|
||||
.ant-drawer-content-wrapper {
|
||||
box-shadow:
|
||||
0 8px 24px rgb(0 0 0 / 8%),
|
||||
0 2px 6px rgb(0 0 0 / 4%);
|
||||
}
|
||||
|
||||
.pbt-drawer .ant-drawer-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #1a1a2e;
|
||||
}
|
||||
.ant-drawer-header {
|
||||
min-height: 56px;
|
||||
padding: 0 24px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.pbt-drawer .ant-drawer-body {
|
||||
padding: 16px 20px 20px;
|
||||
background: #f8fafc;
|
||||
.ant-drawer-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.ant-drawer-body {
|
||||
padding: 20px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.page-product-batch,
|
||||
@@ -39,9 +48,9 @@
|
||||
|
||||
.pbt-panel-hd h3 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1a1a2e;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.pbt-close {
|
||||
@@ -52,26 +61,45 @@
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.pbt-close:hover {
|
||||
color: #111827;
|
||||
background: #f3f4f6;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
/* ---- 步骤区块 ---- */
|
||||
.pbt-step {
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
background: #fafbfc;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.pbt-step-label {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #4b5563;
|
||||
padding-left: 12px;
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.pbt-step-label::before {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
width: 3px;
|
||||
content: '';
|
||||
background: linear-gradient(180deg, #4da3ff 0%, #1677ff 100%);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.pbt-step-label .num {
|
||||
@@ -81,58 +109,82 @@
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-size: 11px;
|
||||
color: #fff;
|
||||
background: #1677ff;
|
||||
font-weight: 700;
|
||||
color: #1677ff;
|
||||
background: #eff6ff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* ---- 胶囊按钮 ---- */
|
||||
.pbt-pills {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.pbt-pill {
|
||||
min-width: 80px;
|
||||
height: 34px;
|
||||
padding: 0 14px;
|
||||
padding: 0 16px;
|
||||
font-size: 13px;
|
||||
color: #4b5563;
|
||||
color: #6b7280;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
transition: var(--pbt-transition);
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 999px;
|
||||
transition:
|
||||
color 0.2s ease,
|
||||
border-color 0.2s ease,
|
||||
background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.pbt-pill:hover {
|
||||
color: #1677ff;
|
||||
border-color: #1677ff;
|
||||
border-color: #91caff;
|
||||
}
|
||||
|
||||
.pbt-pill.active {
|
||||
color: #fff;
|
||||
background: #1677ff;
|
||||
color: #1677ff;
|
||||
background: #eff6ff;
|
||||
border-color: #1677ff;
|
||||
}
|
||||
|
||||
/* ---- 调价行 ---- */
|
||||
.pbt-adjust-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
|
||||
.pbt-pills {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.pbt-adjust-input {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.pbt-number {
|
||||
width: 130px;
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.pbt-select-wide {
|
||||
width: min(680px, 100%);
|
||||
width: min(100%, 640px);
|
||||
}
|
||||
|
||||
.pbt-select-narrow {
|
||||
width: min(280px, 100%);
|
||||
width: min(100%, 280px);
|
||||
}
|
||||
|
||||
/* ---- 预览表格 ---- */
|
||||
.pbt-table {
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.pbt-table .up {
|
||||
@@ -145,67 +197,114 @@
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
/* ---- 信息提示条 ---- */
|
||||
.pbt-info {
|
||||
padding: 8px 12px;
|
||||
margin: 8px 0 16px;
|
||||
font-size: 13px;
|
||||
color: #1f2937;
|
||||
background: #f0fdf4;
|
||||
border: 1px solid #bbf7d0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.pbt-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #f3f4f6;
|
||||
padding: 10px 14px;
|
||||
margin: 8px 0 16px;
|
||||
font-size: 13px;
|
||||
color: #15803d;
|
||||
background: #f0fdf4;
|
||||
border: 1px solid #bbf7d0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* ---- 底部操作栏 ---- */
|
||||
.pbt-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
padding-top: 16px;
|
||||
margin-top: 4px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.pbt-actions .ant-btn {
|
||||
min-width: 96px;
|
||||
height: 40px;
|
||||
padding: 0 24px;
|
||||
font-size: 15px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* ---- 导入导出子卡片 ---- */
|
||||
.pbt-sub-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.pbt-sub-card {
|
||||
padding: 16px;
|
||||
border: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 20px;
|
||||
background: #fafbfc;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 10px;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.pbt-sub-card:hover {
|
||||
border-color: #d1d5db;
|
||||
}
|
||||
|
||||
.pbt-sub-card h4 {
|
||||
margin: 0 0 12px;
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1a1a2e;
|
||||
line-height: 1;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.pbt-sub-card h4::before {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
width: 3px;
|
||||
content: '';
|
||||
background-color: #1677ff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* ---- 上传区域 ---- */
|
||||
.pbt-upload-icon {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
.pbt-upload-title {
|
||||
margin: 2px 0;
|
||||
margin: 4px 0 0;
|
||||
font-size: 13px;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.pbt-upload-tip {
|
||||
margin: 0;
|
||||
margin: 2px 0 0;
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.pbt-upload-file {
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.pbt-upload-actions {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pbt-upload-actions .ant-btn {
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user