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