feat(ia): polish project operation workspaces
This commit is contained in:
Cheng Zhou
@@ -25,91 +25,83 @@
|
||||
<StateLoading v-else-if="drawerLoading" :rows="6" />
|
||||
|
||||
<el-form v-else ref="formRef" :model="form" :rules="rules" label-position="top" class="contract-fee-form">
|
||||
<div class="form-group">
|
||||
<div class="form-group-title">
|
||||
<span class="group-dot group-dot-basic"></span>
|
||||
<!-- 合同信息 -->
|
||||
<div class="form-section">
|
||||
<div class="form-section-title">
|
||||
<span class="dot dot--blue" />
|
||||
{{ TEXT.modules.feeContracts.contractInfoTitle }}
|
||||
</div>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="TEXT.common.fields.site" prop="center_id">
|
||||
<el-select
|
||||
v-model="form.center_id"
|
||||
:disabled="!!contractId || isFormReadOnly"
|
||||
:placeholder="TEXT.common.placeholders.select"
|
||||
class="full-width"
|
||||
>
|
||||
<el-option
|
||||
v-for="site in sites"
|
||||
:key="site.id"
|
||||
:label="site.name || TEXT.common.fallback"
|
||||
:value="site.id"
|
||||
:disabled="!site.is_active"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="TEXT.common.fields.contractNo" prop="contract_no">
|
||||
<el-input v-model="form.contract_no" :disabled="isFormReadOnly" :placeholder="TEXT.common.placeholders.input" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="TEXT.common.fields.signedDate" prop="signed_date">
|
||||
<el-date-picker
|
||||
v-model="form.signed_date"
|
||||
:disabled="isFormReadOnly"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
:placeholder="TEXT.common.placeholders.select"
|
||||
class="full-width"
|
||||
|
||||
<div class="field-grid field-grid--3">
|
||||
<el-form-item :label="TEXT.common.fields.site" prop="center_id">
|
||||
<el-select
|
||||
v-model="form.center_id"
|
||||
:disabled="!!contractId || isFormReadOnly"
|
||||
:placeholder="TEXT.common.placeholders.select"
|
||||
class="full-width"
|
||||
>
|
||||
<el-option
|
||||
v-for="site in sites"
|
||||
:key="site.id"
|
||||
:label="site.name || TEXT.common.fallback"
|
||||
:value="site.id"
|
||||
:disabled="!site.is_active"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="`${TEXT.modules.feeContracts.contractAmount}（万元）`" prop="contract_amount">
|
||||
<el-input-number
|
||||
v-model="form.contract_amount"
|
||||
:disabled="isFormReadOnly"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
:step="1"
|
||||
class="full-width"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="TEXT.modules.feeContracts.contractCases" prop="contract_cases">
|
||||
<el-input-number v-model="form.contract_cases" :disabled="isFormReadOnly" :min="0" :step="1" class="full-width" controls-position="right" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="TEXT.modules.feeContracts.actualCases" prop="actual_cases">
|
||||
<el-input-number v-model="form.actual_cases" :disabled="isFormReadOnly" :min="0" :step="1" class="full-width" controls-position="right" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="TEXT.common.fields.contractNo" prop="contract_no">
|
||||
<el-input v-model="form.contract_no" :disabled="isFormReadOnly" :placeholder="TEXT.common.placeholders.input" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="TEXT.common.fields.signedDate" prop="signed_date">
|
||||
<el-date-picker
|
||||
v-model="form.signed_date"
|
||||
:disabled="isFormReadOnly"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
:placeholder="TEXT.common.placeholders.select"
|
||||
class="full-width"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="field-grid field-grid--3">
|
||||
<el-form-item :label="`${TEXT.modules.feeContracts.contractAmount}（万元）`" prop="contract_amount">
|
||||
<el-input-number
|
||||
v-model="form.contract_amount"
|
||||
:disabled="isFormReadOnly"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
:step="1"
|
||||
class="full-width"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="TEXT.modules.feeContracts.contractCases" prop="contract_cases">
|
||||
<el-input-number v-model="form.contract_cases" :disabled="isFormReadOnly" :min="0" :step="1" class="full-width" controls-position="right" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="TEXT.modules.feeContracts.actualCases" prop="actual_cases">
|
||||
<el-input-number v-model="form.actual_cases" :disabled="isFormReadOnly" :min="0" :step="1" class="full-width" controls-position="right" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item :label="TEXT.common.fields.remark" prop="remark">
|
||||
<el-input v-model="form.remark" :disabled="isFormReadOnly" type="textarea" :rows="3" :placeholder="TEXT.common.placeholders.input" />
|
||||
</el-form-item>
|
||||
|
||||
<div v-if="selectedSiteInactive" class="inactive-hint">
|
||||
<span class="hint-icon">!</span>
|
||||
<span>中心已停用，当前记录不可编辑</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="form-group-title action-title">
|
||||
<span>
|
||||
<span class="group-dot group-dot-payment"></span>
|
||||
<!-- 分期付款 -->
|
||||
<div class="form-section">
|
||||
<div class="form-section-title form-section-title--action">
|
||||
<span class="section-title-left">
|
||||
<span class="dot dot--amber" />
|
||||
{{ TEXT.modules.feeContracts.paymentTitle }}
|
||||
</span>
|
||||
<el-button type="primary" size="small" :disabled="isFormReadOnly" @click="addPayment">
|
||||
<el-button type="primary" size="small" :disabled="isFormReadOnly" @click="addPayment" class="add-payment-btn">
|
||||
<el-icon class="el-icon--left"><Plus /></el-icon>
|
||||
{{ TEXT.common.actions.add }}
|
||||
</el-button>
|
||||
@@ -120,25 +112,24 @@
|
||||
</div>
|
||||
|
||||
<div v-else class="payment-list">
|
||||
<div v-for="(payment, index) in payments" :key="payment.tempId" class="payment-item">
|
||||
<div class="payment-item-header">
|
||||
<div class="payment-seq">
|
||||
<span class="seq-circle">{{ index + 1 }}</span>
|
||||
<span class="seq-text">{{ TEXT.modules.feeContracts.paymentSeqUnit }}</span>
|
||||
<div v-for="(payment, index) in payments" :key="payment.tempId" class="payment-card">
|
||||
<div class="payment-card-header">
|
||||
<div class="payment-card-seq">
|
||||
<span class="seq-badge">{{ index + 1 }}</span>
|
||||
<span class="seq-label">{{ TEXT.modules.feeContracts.paymentSeqUnit }}</span>
|
||||
</div>
|
||||
<el-button link type="danger" :disabled="isFormReadOnly" @click="removePayment(index)">
|
||||
<el-button link type="danger" :disabled="isFormReadOnly" @click="removePayment(index)" class="remove-btn">
|
||||
<el-icon><Delete /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="payment-grid">
|
||||
<div class="payment-field payment-field--amount">
|
||||
|
||||
<div class="payment-card-body">
|
||||
<div class="field-grid field-grid--3">
|
||||
<el-form-item :label="`${TEXT.common.fields.amount}（万元）`" :error="paymentErrors[index]?.amount">
|
||||
<el-input-number v-model="payment.amount" :disabled="isFormReadOnly" :min="0" :precision="2" class="full-width" controls-position="right" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="payment-field payment-field--status">
|
||||
<el-form-item :label="TEXT.modules.feeContracts.paidFlag" :error="paymentErrors[index]?.paid_date">
|
||||
<div class="status-control">
|
||||
<div class="status-row">
|
||||
<el-checkbox v-model="payment.is_paid" :disabled="isFormReadOnly" @change="() => onPaidToggle(payment)">
|
||||
{{ TEXT.modules.feeContracts.isPaid }}
|
||||
</el-checkbox>
|
||||
@@ -149,15 +140,13 @@
|
||||
value-format="YYYY-MM-DD"
|
||||
:placeholder="TEXT.common.placeholders.select"
|
||||
:disabled="isFormReadOnly"
|
||||
class="status-picker"
|
||||
class="status-datepicker"
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="payment-field payment-field--status">
|
||||
<el-form-item :label="TEXT.modules.feeContracts.verifiedFlag" :error="paymentErrors[index]?.verified_date">
|
||||
<div class="status-control">
|
||||
<div class="status-row">
|
||||
<el-checkbox v-model="payment.is_verified" :disabled="isFormReadOnly" @change="() => onVerifiedToggle(payment)">
|
||||
{{ TEXT.modules.feeContracts.isVerified }}
|
||||
</el-checkbox>
|
||||
@@ -168,18 +157,17 @@
|
||||
value-format="YYYY-MM-DD"
|
||||
:placeholder="TEXT.common.placeholders.select"
|
||||
:disabled="isFormReadOnly"
|
||||
class="status-picker"
|
||||
class="status-datepicker"
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="payment-field payment-field--remark">
|
||||
<el-form-item :label="TEXT.common.fields.remark" class="mb-0">
|
||||
<el-input v-model="payment.remark" :disabled="isFormReadOnly" type="textarea" :rows="2" :placeholder="TEXT.common.placeholders.input" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item :label="TEXT.common.fields.remark" class="mb-0">
|
||||
<el-input v-model="payment.remark" :disabled="isFormReadOnly" type="textarea" :rows="2" :placeholder="TEXT.common.placeholders.input" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div v-if="paymentErrors[index]?.verification" class="payment-error">
|
||||
{{ paymentErrors[index].verification }}
|
||||
</div>
|
||||
@@ -187,9 +175,10 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group attachment-form-group">
|
||||
<div class="form-group-title">
|
||||
<span class="group-dot group-dot-attachment"></span>
|
||||
<!-- 附件 -->
|
||||
<div class="form-section">
|
||||
<div class="form-section-title">
|
||||
<span class="dot dot--green" />
|
||||
{{ TEXT.modules.feeContracts.attachmentTitle }}
|
||||
</div>
|
||||
<AttachmentList
|
||||
@@ -200,14 +189,16 @@
|
||||
:entity-groups="attachmentGroups"
|
||||
:mode="'upload'"
|
||||
:readonly="isFormReadOnly"
|
||||
:center-upload-card-content="true"
|
||||
:upload-card-columns="3"
|
||||
/>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="drawer-footer">
|
||||
<el-button @click="emit('update:modelValue', false)">{{ TEXT.common.actions.cancel }}</el-button>
|
||||
<el-button type="primary" :loading="saving" :disabled="isFormReadOnly || drawerLoading" @click="saveForm">{{ TEXT.common.actions.save }}</el-button>
|
||||
<el-button @click="emit('update:modelValue', false)" class="footer-btn">{{ TEXT.common.actions.cancel }}</el-button>
|
||||
<el-button type="primary" :loading="saving" :disabled="isFormReadOnly || drawerLoading" @click="saveForm" class="footer-btn footer-btn--primary">{{ TEXT.common.actions.save }}</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-drawer>
|
||||
@@ -312,18 +303,23 @@ const drawerDirtyGuard = useDrawerDirtyGuard(() => ({
|
||||
const selectedSiteInactive = computed(() => !!props.contractId && !!form.center_id && siteActiveMap.value[form.center_id] === false);
|
||||
const isFormReadOnly = computed(() => (props.contractId ? !canUpdate.value : !canCreate.value) || selectedSiteInactive.value);
|
||||
|
||||
|
||||
|
||||
const attachmentGroups = [
|
||||
{
|
||||
entityType: "contract_fee_contract",
|
||||
label: TEXT.modules.feeContracts.attachmentContract,
|
||||
uploadText: "点击上传合同",
|
||||
},
|
||||
{
|
||||
entityType: "contract_fee_voucher",
|
||||
label: TEXT.modules.feeContracts.attachmentVoucher,
|
||||
uploadText: "点击上传凭证",
|
||||
},
|
||||
{
|
||||
entityType: "contract_fee_invoice",
|
||||
label: TEXT.modules.feeContracts.attachmentInvoice,
|
||||
uploadText: "点击上传发票",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -558,13 +554,14 @@ watch(
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ==================== Drawer ==================== */
|
||||
:deep(.contract-fee-editor-drawer > .el-drawer__header) {
|
||||
margin-bottom: 0;
|
||||
padding: 22px 20px 8px;
|
||||
padding: 20px 24px 8px;
|
||||
}
|
||||
|
||||
:deep(.contract-fee-editor-drawer > .el-drawer__body) {
|
||||
padding: 0 20px 4px;
|
||||
padding: 0 24px 4px;
|
||||
}
|
||||
|
||||
.editor-header {
|
||||
@@ -573,82 +570,90 @@ watch(
|
||||
}
|
||||
|
||||
.editor-title {
|
||||
font-size: 20px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--ctms-text-main);
|
||||
color: #0a0a0a;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
/* ==================== Form ==================== */
|
||||
.contract-fee-form {
|
||||
padding: 0 4px 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
border: 1px solid #e8eef6;
|
||||
border-radius: 10px;
|
||||
padding: 16px 18px 8px;
|
||||
background: #fbfcfe;
|
||||
transition: border-color 0.2s ease;
|
||||
.form-section {
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
.form-group:hover {
|
||||
border-color: #d0dced;
|
||||
.form-section + .form-section {
|
||||
margin-top: 20px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.form-group + .form-group {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.form-group-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 14px;
|
||||
color: #1a3560;
|
||||
.form-section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #0a0a0a;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.action-title {
|
||||
.form-section-title--action {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.action-title > span {
|
||||
.section-title-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.group-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
/* Dots */
|
||||
.dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.group-dot-basic {
|
||||
background: #3b82f6;
|
||||
.dot--blue { background: #3b82f6; }
|
||||
.dot--amber { background: #f59e0b; }
|
||||
.dot--green { background: #22c55e; }
|
||||
|
||||
/* ==================== Field Grid ==================== */
|
||||
.field-grid {
|
||||
display: grid;
|
||||
gap: 0 16px;
|
||||
}
|
||||
|
||||
.group-dot-payment {
|
||||
background: #f0ad2c;
|
||||
.field-grid--2 {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.group-dot-attachment {
|
||||
background: #22c55e;
|
||||
.field-grid--3 {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ==================== Inactive Hint ==================== */
|
||||
.inactive-hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 12px;
|
||||
background: #fff7d6;
|
||||
background: #fffbeb;
|
||||
border: 1px solid #fde68a;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
color: #92400e;
|
||||
margin-bottom: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.hint-icon {
|
||||
@@ -662,134 +667,164 @@ watch(
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ==================== Empty State ==================== */
|
||||
.section-empty {
|
||||
padding: 28px 0;
|
||||
padding: 32px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #8a97ab;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #a3a3a3;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ==================== Payment Cards ==================== */
|
||||
.payment-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.payment-item {
|
||||
border: 1px solid #e8eef6;
|
||||
border-radius: 8px;
|
||||
padding: 18px 20px 16px;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
|
||||
box-shadow: 0 8px 20px rgba(38, 73, 119, 0.05);
|
||||
.payment-card {
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 10px;
|
||||
padding: 16px 18px 14px;
|
||||
background: #fafbfc;
|
||||
transition: border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.payment-item-header {
|
||||
.payment-card:hover {
|
||||
border-color: #d4d4d4;
|
||||
}
|
||||
|
||||
.payment-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.payment-seq {
|
||||
.payment-card-seq {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.seq-circle {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background-color: #3f5f7a;
|
||||
color: white;
|
||||
display: flex;
|
||||
.seq-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.seq-text {
|
||||
font-size: 18px;
|
||||
min-width: 22px;
|
||||
height: 22px;
|
||||
padding: 0 6px;
|
||||
border-radius: 4px;
|
||||
background: #f0f0f0;
|
||||
color: #525252;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: var(--ctms-text-main);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.payment-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(180px, 0.9fr) repeat(2, minmax(220px, 1fr));
|
||||
gap: 14px 18px;
|
||||
align-items: start;
|
||||
.seq-label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #0a0a0a;
|
||||
}
|
||||
|
||||
.payment-field {
|
||||
min-width: 0;
|
||||
.remove-btn {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.payment-field--remark {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.status-control {
|
||||
.payment-card-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
/* Status row (checkbox + date picker) */
|
||||
.status-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.status-picker {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.status-picker :deep(.el-date-editor.el-input),
|
||||
.status-picker :deep(.el-input__wrapper) {
|
||||
.status-datepicker {
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.status-datepicker :deep(.el-date-editor.el-input),
|
||||
.status-datepicker :deep(.el-input__wrapper) {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* ==================== Payment Error ==================== */
|
||||
.payment-error {
|
||||
color: var(--ctms-danger);
|
||||
color: #dc2626;
|
||||
font-size: 12px;
|
||||
margin-top: 8px;
|
||||
margin-top: 10px;
|
||||
padding: 6px 10px;
|
||||
background: #fef2f2;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.mb-0 {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* ==================== Footer ==================== */
|
||||
.drawer-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.footer-btn {
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
padding: 0 20px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.footer-btn--primary {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
/* ==================== Element Overrides ==================== */
|
||||
.contract-fee-form :deep(.el-form-item) {
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.contract-fee-form :deep(.el-form-item__label) {
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #4a6283;
|
||||
color: #525252;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.payment-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.contract-fee-form :deep(.el-form-item__error) {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.payment-field--remark {
|
||||
grid-column: auto;
|
||||
.add-payment-btn {
|
||||
height: 28px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
/* ==================== Responsive ==================== */
|
||||
@media (max-width: 700px) {
|
||||
.field-grid--2,
|
||||
.field-grid--3 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user