页面布局优化
This commit is contained in:
aaron
parent
f495ebc06a
commit
4c03b09278
@ -174,8 +174,9 @@
|
|||||||
@ok="handleDeliveryPriceSave"
|
@ok="handleDeliveryPriceSave"
|
||||||
@cancel="handleDeliveryPriceCancel"
|
@cancel="handleDeliveryPriceCancel"
|
||||||
:confirmLoading="deliveryPriceSaving"
|
:confirmLoading="deliveryPriceSaving"
|
||||||
|
width="480px"
|
||||||
>
|
>
|
||||||
<a-form layout="vertical">
|
<a-form layout="vertical" class="delivery-price-form">
|
||||||
<a-form-item
|
<a-form-item
|
||||||
label="基础配送费（元）"
|
label="基础配送费（元）"
|
||||||
required
|
required
|
||||||
@ -1170,105 +1171,90 @@ export default defineComponent({
|
|||||||
border-top: 1px solid #f0f0f0;
|
border-top: 1px solid #f0f0f0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 调整表单样式 */
|
/* 优化表单样式，减少高度 */
|
||||||
.community-form {
|
.community-form {
|
||||||
padding: 8px 0;
|
padding: 4px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.ant-form-item) {
|
:deep(.ant-form-item) {
|
||||||
margin-bottom: 24px !important;
|
margin-bottom: 12px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-form-item-label) {
|
||||||
|
height: 28px;
|
||||||
|
line-height: 28px;
|
||||||
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.ant-form-item-control) {
|
:deep(.ant-form-item-control) {
|
||||||
text-align: left;
|
line-height: 28px;
|
||||||
padding-right: 12px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.ant-input),
|
:deep(.ant-input),
|
||||||
:deep(.ant-select),
|
:deep(.ant-select),
|
||||||
:deep(.ant-auto-complete),
|
:deep(.ant-auto-complete),
|
||||||
:deep(.ant-input-number) {
|
:deep(.ant-input-number) {
|
||||||
height: 32px;
|
height: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.ant-select-selector),
|
:deep(.ant-select-selector),
|
||||||
:deep(.ant-auto-complete .ant-input) {
|
:deep(.ant-auto-complete .ant-input) {
|
||||||
height: 32px !important;
|
height: 30px !important;
|
||||||
line-height: 32px !important;
|
line-height: 30px !important;
|
||||||
padding: 0 11px !important;
|
padding: 0 11px !important;
|
||||||
|
|
||||||
.ant-select-selection-search-input {
|
.ant-select-selection-search-input {
|
||||||
height: 30px !important;
|
height: 28px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-select-selection-item {
|
.ant-select-selection-item {
|
||||||
line-height: 30px !important;
|
line-height: 28px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.ant-input-number-input) {
|
:deep(.ant-input-number-input) {
|
||||||
height: 30px;
|
height: 28px;
|
||||||
line-height: 30px;
|
line-height: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.ant-input::placeholder),
|
.form-item-tip {
|
||||||
:deep(.ant-select-selection-placeholder),
|
color: rgba(0, 0, 0, 0.45);
|
||||||
:deep(.ant-input-number-input::placeholder) {
|
font-size: 12px;
|
||||||
color: #bfbfbf;
|
margin-top: 2px;
|
||||||
|
line-height: 1.2;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.ant-modal-body) {
|
.qrcode-upload-wrapper {
|
||||||
padding: 0;
|
:deep(.ant-upload-list-picture-card-container) {
|
||||||
}
|
width: 90px;
|
||||||
|
height: 90px;
|
||||||
|
margin-right: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
:deep(.ant-modal-footer) {
|
:deep(.ant-upload.ant-upload-select-picture-card) {
|
||||||
border-top: 1px solid #f0f0f0;
|
width: 90px;
|
||||||
padding: 16px 24px;
|
height: 90px;
|
||||||
}
|
margin-right: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
.map-container {
|
:deep(.ant-upload-list-picture-card .ant-upload-list-item) {
|
||||||
border: 1px solid #f0f0f0;
|
padding: 2px;
|
||||||
border-radius: 2px;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 移除重复的样式定义 */
|
|
||||||
:deep(.ant-form) {
|
|
||||||
max-width: 600px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 清理和合并重复的样式 */
|
|
||||||
:deep(.ant-input-group) {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.ant-input-number {
|
|
||||||
border-radius: 0;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
border-top-left-radius: 2px;
|
|
||||||
border-bottom-left-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
border-top-right-radius: 2px;
|
|
||||||
border-bottom-right-radius: 2px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 清理重复的样式 */
|
/* 调整地图组件样式 */
|
||||||
:deep(.ant-modal-body),
|
:deep(.map-picker-container) {
|
||||||
:deep(.ant-form),
|
margin-bottom: 12px;
|
||||||
:deep(.ant-form-item) {
|
|
||||||
padding-right: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.ant-col) {
|
:deep(.map-picker-input) {
|
||||||
padding-right: 0;
|
margin-bottom: 8px;
|
||||||
padding-left: 0;
|
}
|
||||||
|
|
||||||
|
:deep(.map-container) {
|
||||||
|
height: 200px !important; /* 减少地图高度 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-tag {
|
.status-tag {
|
||||||
@ -1313,55 +1299,6 @@ export default defineComponent({
|
|||||||
line-height: 30px !important;
|
line-height: 30px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 调整地图容器样式 */
|
|
||||||
:deep(.map-container) {
|
|
||||||
border: 1px solid #d9d9d9;
|
|
||||||
border-radius: 2px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.community-list {
|
|
||||||
/* 移除 padding */
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.ant-upload-list-picture-card-container) {
|
|
||||||
width: 104px;
|
|
||||||
height: 104px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.ant-upload.ant-upload-select-picture-card) {
|
|
||||||
width: 104px;
|
|
||||||
height: 104px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.qrcode-upload-wrapper {
|
|
||||||
:deep(.ant-upload-list-picture-card-container) {
|
|
||||||
width: 104px;
|
|
||||||
height: 104px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.ant-upload.ant-upload-select-picture-card) {
|
|
||||||
width: 104px;
|
|
||||||
height: 104px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.ant-upload-list-picture-card .ant-upload-list-item) {
|
|
||||||
padding: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.ant-upload-list-picture-card .ant-upload-list-item-thumbnail) {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-item-tip {
|
|
||||||
color: rgba(0, 0, 0, 0.45);
|
|
||||||
font-size: 12px;
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delivery-price-info {
|
.delivery-price-info {
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
@ -1514,4 +1451,37 @@ export default defineComponent({
|
|||||||
color: #1890ff;
|
color: #1890ff;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 配送定价表单样式 */
|
||||||
|
.delivery-price-form {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delivery-price-form :deep(.ant-form-item) {
|
||||||
|
margin-bottom: 12px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delivery-price-form :deep(.ant-form-item:last-child) {
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delivery-price-form :deep(.ant-form-item-label) {
|
||||||
|
padding-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delivery-price-form :deep(.ant-form-item-label > label) {
|
||||||
|
font-size: 14px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delivery-price-form :deep(.ant-input-number) {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delivery-price-form .form-item-tip {
|
||||||
|
margin-top: 2px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(0, 0, 0, 0.45);
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -55,6 +55,7 @@
|
|||||||
:model="formState"
|
:model="formState"
|
||||||
:rules="rules"
|
:rules="rules"
|
||||||
layout="vertical"
|
layout="vertical"
|
||||||
|
class="coupon-activity-form"
|
||||||
>
|
>
|
||||||
<a-form-item
|
<a-form-item
|
||||||
label="活动名称"
|
label="活动名称"
|
||||||
@ -77,6 +78,7 @@
|
|||||||
placeholder="请输入活动说明"
|
placeholder="请输入活动说明"
|
||||||
:rows="2"
|
:rows="2"
|
||||||
:maxLength="200"
|
:maxLength="200"
|
||||||
|
:auto-size="{ minRows: 2, maxRows: 3 }"
|
||||||
/>
|
/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
|
|
||||||
@ -144,31 +146,36 @@
|
|||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
|
|
||||||
<a-form-item
|
<a-row :gutter="16">
|
||||||
label="总限领数量"
|
<a-col :span="12">
|
||||||
name="total_limit"
|
<a-form-item
|
||||||
extra="不填写表示不限制总领取次数"
|
label="总限领数量"
|
||||||
>
|
name="total_limit"
|
||||||
<a-input-number
|
extra="不填写表示不限制总领取次数"
|
||||||
v-model:value="formState.total_limit"
|
>
|
||||||
:min="0"
|
<a-input-number
|
||||||
style="width: 100%"
|
v-model:value="formState.total_limit"
|
||||||
placeholder="请输入总限领数量"
|
:min="0"
|
||||||
/>
|
style="width: 100%"
|
||||||
</a-form-item>
|
placeholder="请输入总限领数量"
|
||||||
|
/>
|
||||||
<a-form-item
|
</a-form-item>
|
||||||
label="每日限领数量"
|
</a-col>
|
||||||
name="daily_limit"
|
<a-col :span="12">
|
||||||
:rules="[{ required: true, message: '请输入每日限领数量' }]"
|
<a-form-item
|
||||||
>
|
label="每日限领数量"
|
||||||
<a-input-number
|
name="daily_limit"
|
||||||
v-model:value="formState.daily_limit"
|
:rules="[{ required: true, message: '请输入每日限领数量' }]"
|
||||||
:min="1"
|
>
|
||||||
style="width: 100%"
|
<a-input-number
|
||||||
placeholder="请输入每日限领数量"
|
v-model:value="formState.daily_limit"
|
||||||
/>
|
:min="1"
|
||||||
</a-form-item>
|
style="width: 100%"
|
||||||
|
placeholder="请输入每日限领数量"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
|
||||||
<a-form-item
|
<a-form-item
|
||||||
label="优惠券配置"
|
label="优惠券配置"
|
||||||
@ -180,7 +187,7 @@
|
|||||||
:data-source="couponTemplates"
|
:data-source="couponTemplates"
|
||||||
:pagination="false"
|
:pagination="false"
|
||||||
size="small"
|
size="small"
|
||||||
:scroll="{ y: 200 }"
|
:scroll="{ y: 180 }"
|
||||||
>
|
>
|
||||||
<template #bodyCell="{ column, record }">
|
<template #bodyCell="{ column, record }">
|
||||||
<template v-if="column.key === 'amount'">
|
<template v-if="column.key === 'amount'">
|
||||||
@ -631,4 +638,65 @@ export default defineComponent({
|
|||||||
:deep(.ant-table-content) {
|
:deep(.ant-table-content) {
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 优化优惠券活动表单样式 */
|
||||||
|
.coupon-activity-form {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coupon-activity-form :deep(.ant-form-item) {
|
||||||
|
margin-bottom: 16px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coupon-activity-form :deep(.ant-form-item:last-child) {
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coupon-activity-form :deep(.ant-form-item-label) {
|
||||||
|
padding-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coupon-activity-form :deep(.ant-form-item-label > label) {
|
||||||
|
font-size: 14px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coupon-activity-form :deep(.ant-input),
|
||||||
|
.coupon-activity-form :deep(.ant-input-number),
|
||||||
|
.coupon-activity-form :deep(.ant-picker) {
|
||||||
|
height: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coupon-activity-form :deep(.ant-form-item-explain) {
|
||||||
|
min-height: 20px;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coupon-activity-form :deep(.ant-form-item-extra) {
|
||||||
|
min-height: 20px;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-top: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coupon-activity-form :deep(.ant-table-small) {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coupon-activity-form :deep(.ant-table-small .ant-table-thead > tr > th) {
|
||||||
|
padding: 8px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coupon-activity-form :deep(.ant-table-small .ant-table-tbody > tr > td) {
|
||||||
|
padding: 8px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coupon-activity-form :deep(.ant-row) {
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 调整表格高度 */
|
||||||
|
.coupon-activity-form :deep(.ant-table-body) {
|
||||||
|
max-height: 200px !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user