<template>
|
<div class="wh-mat-print-template-manager__layout">
|
<aside class="wh-mat-print-template-manager__sidebar">
|
<div class="wh-mat-print-template-manager__sidebar-header">
|
<div>
|
<div class="wh-mat-print-template-manager__title">
|
{{ t('pages.basicInfo.whMat.printTemplate.workspace.sidebarTitle') }}
|
</div>
|
<div class="wh-mat-print-template-manager__subtitle">
|
{{ t('pages.basicInfo.whMat.printTemplate.workspace.sidebarSubtitle') }}
|
</div>
|
</div>
|
<ElButton size="small" type="primary" @click="handleCreateTemplate">
|
{{ t('common.actions.add') }}
|
</ElButton>
|
</div>
|
|
<ElScrollbar class="wh-mat-print-template-manager__sidebar-scroll">
|
<div class="wh-mat-print-template-manager__template-list">
|
<button
|
v-for="template in templates"
|
:key="template.id || template.code"
|
type="button"
|
class="wh-mat-print-template-manager__template-card"
|
:class="{ 'is-active': template.code === activeTemplateCode }"
|
@click="selectTemplate(template.code)"
|
>
|
<div class="wh-mat-print-template-manager__template-card-header">
|
<span>{{ template.name }}</span>
|
<ElTag v-if="template.isDefault === 1" size="small" type="success">
|
{{ t('pages.basicInfo.whMat.printTemplate.workspace.defaultTag') }}
|
</ElTag>
|
</div>
|
<div class="wh-mat-print-template-manager__template-code">{{ template.code }}</div>
|
<div class="wh-mat-print-template-manager__template-actions">
|
<ElButton size="small" text @click.stop="handleCopyTemplate(template.code)">{{
|
t('pages.basicInfo.whMat.printTemplate.workspace.actions.copy')
|
}}</ElButton>
|
<ElButton size="small" text @click.stop="handleMarkDefault(template.code)">
|
{{ t('pages.basicInfo.whMat.printTemplate.workspace.actions.setDefault') }}
|
</ElButton>
|
<ElButton
|
size="small"
|
text
|
type="danger"
|
@click.stop="handleDeleteTemplate(template.code)"
|
>
|
{{ t('common.actions.delete') }}
|
</ElButton>
|
</div>
|
</button>
|
</div>
|
</ElScrollbar>
|
</aside>
|
|
<main class="wh-mat-print-template-manager__main">
|
<div class="wh-mat-print-template-manager__main-header">
|
<div>
|
<div class="wh-mat-print-template-manager__title">
|
{{
|
activeTemplate?.name ||
|
t('pages.basicInfo.whMat.printTemplate.workspace.unnamedTemplate')
|
}}
|
</div>
|
<div class="wh-mat-print-template-manager__subtitle">
|
{{
|
t('pages.basicInfo.whMat.printTemplate.workspace.previewRecord', {
|
name:
|
previewRecord?.code ||
|
previewRecord?.name ||
|
t('pages.basicInfo.whMat.printTemplate.workspace.noPreviewRecord')
|
})
|
}}
|
</div>
|
</div>
|
<ElSpace wrap>
|
<ElButton :loading="loading" @click="handleReload">
|
{{ t('common.actions.refresh') }}
|
</ElButton>
|
<ElButton type="primary" :loading="saving" @click="handleSaveTemplate">
|
{{ t('pages.basicInfo.whMat.printTemplate.workspace.actions.saveTemplate') }}
|
</ElButton>
|
</ElSpace>
|
</div>
|
|
<MatnrPrintToolbar
|
:zoom-percent="zoomPercent"
|
:can-zoom-in="canZoomIn"
|
:can-zoom-out="canZoomOut"
|
:auto-fit-active="autoFitEnabled"
|
@add-element="handleAddElement"
|
@zoom-in="handleZoomIn"
|
@zoom-out="handleZoomOut"
|
@zoom-reset="handleZoomReset"
|
@zoom-fit="handleZoomFit"
|
/>
|
|
<div ref="canvasPanelRef" class="wh-mat-print-template-manager__canvas-panel">
|
<ElEmpty
|
v-if="!activeTemplate"
|
:description="t('pages.basicInfo.whMat.printTemplate.workspace.emptyTemplate')"
|
/>
|
<MatnrPrintCanvas
|
v-else
|
:template="activeTemplate"
|
:active-record="previewRecord"
|
:selected-element-id="selectedElementId"
|
mode="editor"
|
:scale="canvasScale"
|
:interactive="true"
|
:show-grid="true"
|
@select-element="selectedElementId = $event"
|
@update-element="handleElementPatch"
|
/>
|
</div>
|
</main>
|
|
<aside class="wh-mat-print-template-manager__property">
|
<MatnrPrintPropertyPanel
|
v-if="activeTemplate"
|
:template="activeTemplate"
|
:selected-element="selectedElement"
|
@update-template-meta="handleTemplateMetaPatch"
|
@update-canvas="handleCanvasPatch"
|
@update-element="handleElementPatch"
|
@remove-element="handleRemoveElement"
|
@set-placeholder-target="placeholderTarget = $event"
|
/>
|
<MatnrPrintFieldPanel
|
v-if="activeTemplate"
|
:fields="fieldOptions"
|
@insert-field="handleInsertPlaceholder"
|
/>
|
</aside>
|
</div>
|
</template>
|
|
<script setup>
|
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
import { useI18n } from 'vue-i18n'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
import {
|
appendFieldPlaceholder,
|
buildMatnrPrintFieldOptions,
|
buildMatnrPrintTemplatePayload,
|
createDefaultMatnrPrintTemplate,
|
createElementByType,
|
duplicateMatnrPrintTemplate,
|
getFieldListTableRows,
|
normalizeMatnrPrintTemplate,
|
updateFieldListTableRows
|
} from '../matnrPrintTemplate.helpers'
|
import {
|
fetchGetDefaultMatnrPrintTemplate,
|
fetchGetMatnrPrintTemplateDetail,
|
fetchMatnrPrintTemplateList,
|
fetchRemoveMatnrPrintTemplate,
|
fetchSaveMatnrPrintTemplate,
|
fetchSetDefaultMatnrPrintTemplate,
|
fetchUpdateMatnrPrintTemplate
|
} from '@/api/wh-mat'
|
import MatnrPrintCanvas from './matnr-print-canvas.vue'
|
import MatnrPrintFieldPanel from './matnr-print-field-panel.vue'
|
import MatnrPrintPropertyPanel from './matnr-print-property-panel.vue'
|
import MatnrPrintToolbar from './matnr-print-toolbar.vue'
|
|
defineOptions({ name: 'WhMatPrintTemplateWorkspace' })
|
|
const { t, locale } = useI18n()
|
|
const props = defineProps({
|
enabledFields: {
|
type: Array,
|
default: () => []
|
},
|
previewRecord: {
|
type: Object,
|
default: () => ({})
|
},
|
autoLoad: {
|
type: Boolean,
|
default: true
|
}
|
})
|
|
const DEFAULT_CANVAS_SCALE = 4
|
const MIN_CANVAS_SCALE = 0.5
|
const MAX_CANVAS_SCALE = 24
|
const CANVAS_SCALE_STEPS = [0.5, 0.75, 1, 1.5, 2, 3, 4, 5, 6, 8, 10, 12, 14, 16, 20, 24]
|
const FIT_PANEL_GAP = 16
|
|
const templates = ref([])
|
const activeTemplateCode = ref('')
|
const selectedElementId = ref('')
|
const placeholderTarget = ref(null)
|
const loading = ref(false)
|
const saving = ref(false)
|
const canvasScale = ref(DEFAULT_CANVAS_SCALE)
|
const autoFitEnabled = ref(true)
|
const canvasPanelRef = ref(null)
|
let resizeObserver = null
|
|
const fieldOptions = computed(() => {
|
locale.value
|
return buildMatnrPrintFieldOptions(props.enabledFields)
|
})
|
const zoomPercent = computed(() => Math.round((canvasScale.value / DEFAULT_CANVAS_SCALE) * 100))
|
const canZoomIn = computed(() => canvasScale.value < MAX_CANVAS_SCALE)
|
const canZoomOut = computed(() => canvasScale.value > MIN_CANVAS_SCALE)
|
const activeTemplate = computed(
|
() => templates.value.find((template) => template.code === activeTemplateCode.value) || null
|
)
|
const selectedElement = computed(
|
() =>
|
activeTemplate.value?.elements?.find((element) => element.id === selectedElementId.value) ||
|
null
|
)
|
|
watch(
|
() => props.autoLoad,
|
async (autoLoad, previousValue) => {
|
if (autoLoad && !previousValue) {
|
await loadTemplates()
|
}
|
},
|
{
|
immediate: true
|
}
|
)
|
|
watch(
|
() =>
|
`${activeTemplate.value?.canvas?.width || 0}_${activeTemplate.value?.canvas?.height || 0}`,
|
async () => {
|
if (!autoFitEnabled.value || !activeTemplate.value) {
|
return
|
}
|
await nextTick()
|
fitCanvasToViewport()
|
}
|
)
|
|
async function loadTemplates() {
|
loading.value = true
|
try {
|
const [list, defaultTemplate] = await Promise.all([
|
fetchMatnrPrintTemplateList({}),
|
fetchGetDefaultMatnrPrintTemplate()
|
])
|
const nextTemplates = (Array.isArray(list) ? list : [])
|
.map((item) => normalizeMatnrPrintTemplate(item))
|
.sort((left, right) => Number(right.isDefault) - Number(left.isDefault))
|
|
templates.value = nextTemplates
|
if (!templates.value.length) {
|
handleCreateTemplate()
|
return
|
}
|
|
const defaultCode = normalizeMatnrPrintTemplate(defaultTemplate || {}).code
|
const nextActiveCode =
|
templates.value.find((item) => item.code === activeTemplateCode.value)?.code ||
|
templates.value.find((item) => item.code === defaultCode)?.code ||
|
templates.value[0]?.code ||
|
''
|
selectTemplate(nextActiveCode)
|
} catch (error) {
|
ElMessage.error(
|
error?.message || t('pages.basicInfo.whMat.printTemplate.workspace.messages.loadFailed')
|
)
|
if (!templates.value.length) {
|
handleCreateTemplate()
|
}
|
} finally {
|
loading.value = false
|
}
|
}
|
|
function handleReload() {
|
loadTemplates()
|
}
|
|
function resolveNextCanvasScale(direction) {
|
if (direction > 0) {
|
return (
|
CANVAS_SCALE_STEPS.find((step) => step > canvasScale.value + 0.001) || canvasScale.value
|
)
|
}
|
return (
|
[...CANVAS_SCALE_STEPS].reverse().find((step) => step < canvasScale.value - 0.001) ||
|
canvasScale.value
|
)
|
}
|
|
function handleZoomIn() {
|
autoFitEnabled.value = false
|
canvasScale.value = resolveNextCanvasScale(1)
|
}
|
|
function handleZoomOut() {
|
autoFitEnabled.value = false
|
canvasScale.value = resolveNextCanvasScale(-1)
|
}
|
|
function handleZoomReset() {
|
autoFitEnabled.value = false
|
canvasScale.value = DEFAULT_CANVAS_SCALE
|
}
|
|
function getCanvasPanelAvailableSize() {
|
const panelElement = canvasPanelRef.value
|
if (!panelElement) {
|
return null
|
}
|
const panelStyle = window.getComputedStyle(panelElement)
|
const width =
|
panelElement.clientWidth -
|
Number.parseFloat(panelStyle.paddingLeft || '0') -
|
Number.parseFloat(panelStyle.paddingRight || '0') -
|
FIT_PANEL_GAP
|
const height =
|
panelElement.clientHeight -
|
Number.parseFloat(panelStyle.paddingTop || '0') -
|
Number.parseFloat(panelStyle.paddingBottom || '0') -
|
FIT_PANEL_GAP
|
if (width <= 0 || height <= 0) {
|
return null
|
}
|
return { width, height }
|
}
|
|
function fitCanvasToViewport() {
|
if (!activeTemplate.value) {
|
return
|
}
|
const panelSize = getCanvasPanelAvailableSize()
|
if (!panelSize) {
|
return
|
}
|
const canvas = activeTemplate.value.canvas || {}
|
const widthScale = panelSize.width / Math.max(Number(canvas.width) || 1, 1)
|
const heightScale = panelSize.height / Math.max(Number(canvas.height) || 1, 1)
|
const nextScale = Math.min(widthScale, heightScale, MAX_CANVAS_SCALE)
|
canvasScale.value = Number(Math.max(MIN_CANVAS_SCALE, nextScale).toFixed(2))
|
}
|
|
async function handleZoomFit() {
|
autoFitEnabled.value = true
|
await nextTick()
|
fitCanvasToViewport()
|
}
|
|
function selectTemplate(code) {
|
activeTemplateCode.value = code
|
selectedElementId.value = ''
|
placeholderTarget.value = null
|
if (autoFitEnabled.value) {
|
nextTick(() => {
|
fitCanvasToViewport()
|
})
|
}
|
}
|
|
function replaceActiveTemplate(patch) {
|
templates.value = templates.value.map((template) =>
|
template.code === activeTemplateCode.value
|
? normalizeMatnrPrintTemplate({ ...template, ...patch })
|
: template
|
)
|
}
|
|
function handleTemplateMetaPatch({ field, value }) {
|
if (!activeTemplate.value) {
|
return
|
}
|
if (field === 'isDefault' && value === 1) {
|
templates.value = templates.value.map((template) => ({
|
...template,
|
isDefault: template.code === activeTemplateCode.value ? 1 : 0
|
}))
|
return
|
}
|
replaceActiveTemplate({
|
[field]: value
|
})
|
}
|
|
function handleCanvasPatch({ field, value }) {
|
if (!activeTemplate.value) {
|
return
|
}
|
replaceActiveTemplate({
|
canvas: {
|
...(activeTemplate.value.canvas || {}),
|
[field]: value
|
}
|
})
|
}
|
|
function handleElementPatch({ id, patch }) {
|
if (!activeTemplate.value || !id) {
|
return
|
}
|
const nextElements = activeTemplate.value.elements.map((element) =>
|
element.id === id
|
? normalizeMatnrPrintTemplate({ elements: [{ ...element, ...patch }] }).elements[0]
|
: element
|
)
|
replaceActiveTemplate({
|
elements: nextElements
|
})
|
}
|
|
function handleAddElement(type) {
|
if (!activeTemplate.value) {
|
return
|
}
|
const newElement = createElementByType(type, activeTemplate.value.elements.length)
|
replaceActiveTemplate({
|
elements: [...activeTemplate.value.elements, newElement]
|
})
|
selectedElementId.value = newElement.id
|
}
|
|
function handleRemoveElement(id) {
|
if (!activeTemplate.value) {
|
return
|
}
|
replaceActiveTemplate({
|
elements: activeTemplate.value.elements.filter((element) => element.id !== id)
|
})
|
if (selectedElementId.value === id) {
|
selectedElementId.value = ''
|
}
|
}
|
|
function handleCreateTemplate() {
|
const newTemplate = createDefaultMatnrPrintTemplate({
|
name: `${t('pages.basicInfo.whMat.printTemplate.helpers.defaultTemplateName')}${templates.value.length + 1}`,
|
code: `MATNR_${Date.now()}_${templates.value.length + 1}`
|
})
|
templates.value = [
|
...templates.value.map((item) => ({ ...item, isDefault: item.isDefault })),
|
newTemplate
|
]
|
selectTemplate(newTemplate.code)
|
}
|
|
function handleCopyTemplate(code) {
|
const template = templates.value.find((item) => item.code === code)
|
if (!template) {
|
return
|
}
|
const copyTemplate = duplicateMatnrPrintTemplate(template)
|
templates.value = [...templates.value, copyTemplate]
|
selectTemplate(copyTemplate.code)
|
}
|
|
async function handleDeleteTemplate(code) {
|
const template = templates.value.find((item) => item.code === code)
|
if (!template) {
|
return
|
}
|
try {
|
await ElMessageBox.confirm(
|
t('pages.basicInfo.whMat.printTemplate.workspace.messages.deleteConfirm', {
|
name: template.name
|
}),
|
t('pages.basicInfo.whMat.printTemplate.workspace.actions.delete'),
|
{
|
type: 'warning'
|
}
|
)
|
if (template.id) {
|
await fetchRemoveMatnrPrintTemplate(template.id)
|
}
|
templates.value = templates.value.filter((item) => item.code !== code)
|
if (!templates.value.length) {
|
handleCreateTemplate()
|
} else if (activeTemplateCode.value === code) {
|
selectTemplate(templates.value[0].code)
|
}
|
ElMessage.success(t('pages.basicInfo.whMat.printTemplate.workspace.messages.deleteSuccess'))
|
} catch (error) {
|
if (error !== 'cancel') {
|
ElMessage.error(
|
error?.message || t('pages.basicInfo.whMat.printTemplate.workspace.messages.deleteFailed')
|
)
|
}
|
}
|
}
|
|
async function handleMarkDefault(code) {
|
const template = templates.value.find((item) => item.code === code)
|
if (!template) {
|
return
|
}
|
templates.value = templates.value.map((item) => ({
|
...item,
|
isDefault: item.code === code ? 1 : 0
|
}))
|
if (template.id) {
|
try {
|
await fetchSetDefaultMatnrPrintTemplate(template.id)
|
ElMessage.success(
|
t('pages.basicInfo.whMat.printTemplate.workspace.messages.defaultSuccess')
|
)
|
} catch (error) {
|
ElMessage.error(
|
error?.message ||
|
t('pages.basicInfo.whMat.printTemplate.workspace.messages.defaultFailed')
|
)
|
}
|
}
|
}
|
|
async function handleSaveTemplate() {
|
if (!activeTemplate.value) {
|
return
|
}
|
saving.value = true
|
try {
|
const payload = buildMatnrPrintTemplatePayload(activeTemplate.value)
|
const saved = activeTemplate.value.id
|
? await fetchUpdateMatnrPrintTemplate(payload)
|
: await fetchSaveMatnrPrintTemplate(payload)
|
const normalized = normalizeMatnrPrintTemplate(saved)
|
templates.value = templates.value.map((template) =>
|
template.code === activeTemplateCode.value
|
? normalized
|
: { ...template, isDefault: normalized.isDefault === 1 ? 0 : template.isDefault }
|
)
|
if (!templates.value.find((template) => template.code === normalized.code)) {
|
templates.value = [...templates.value, normalized]
|
}
|
if (normalized.isDefault === 1) {
|
templates.value = templates.value.map((template) => ({
|
...template,
|
isDefault: template.id === normalized.id ? 1 : 0
|
}))
|
}
|
activeTemplateCode.value = normalized.code
|
if (normalized.id) {
|
const detail = await fetchGetMatnrPrintTemplateDetail(normalized.id)
|
const nextTemplate = normalizeMatnrPrintTemplate(detail)
|
templates.value = templates.value.map((template) =>
|
template.code === normalized.code ? nextTemplate : template
|
)
|
}
|
ElMessage.success(t('pages.basicInfo.whMat.printTemplate.workspace.messages.saveSuccess'))
|
} catch (error) {
|
ElMessage.error(
|
error?.message || t('pages.basicInfo.whMat.printTemplate.workspace.messages.saveFailed')
|
)
|
} finally {
|
saving.value = false
|
}
|
}
|
|
function handleInsertPlaceholder(placeholder) {
|
if (!activeTemplate.value || !placeholderTarget.value || !selectedElement.value) {
|
return
|
}
|
const target = placeholderTarget.value
|
if (target.field === 'contentTemplate' || target.field === 'valueTemplate') {
|
handleElementPatch({
|
id: selectedElement.value.id,
|
patch: {
|
[target.field]: appendFieldPlaceholder(selectedElement.value[target.field], placeholder)
|
}
|
})
|
return
|
}
|
if (target.field === 'table') {
|
const rows = getFieldListTableRows(selectedElement.value).map((row, rowIndex) =>
|
rowIndex === target.rowIndex
|
? {
|
...row,
|
[target.rowField]: appendFieldPlaceholder(row[target.rowField], placeholder)
|
}
|
: row
|
)
|
handleElementPatch({
|
id: selectedElement.value.id,
|
patch: updateFieldListTableRows(selectedElement.value, rows)
|
})
|
}
|
}
|
|
defineExpose({
|
loadTemplates
|
})
|
|
onMounted(() => {
|
resizeObserver = new ResizeObserver(() => {
|
if (autoFitEnabled.value) {
|
fitCanvasToViewport()
|
}
|
})
|
if (canvasPanelRef.value) {
|
resizeObserver.observe(canvasPanelRef.value)
|
}
|
})
|
|
onBeforeUnmount(() => {
|
resizeObserver?.disconnect()
|
resizeObserver = null
|
})
|
</script>
|
|
<style scoped>
|
.wh-mat-print-template-manager__layout {
|
display: grid;
|
grid-template-columns: 280px minmax(0, 1fr) 360px;
|
height: 100%;
|
min-height: 0;
|
overflow: hidden;
|
background:
|
radial-gradient(circle at top left, rgba(59, 130, 246, 0.08), transparent 26%),
|
linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
|
}
|
|
.wh-mat-print-template-manager__sidebar,
|
.wh-mat-print-template-manager__property {
|
display: flex;
|
flex-direction: column;
|
min-width: 0;
|
min-height: 0;
|
overflow: hidden;
|
background: rgba(255, 255, 255, 0.94);
|
border-right: 1px solid rgba(148, 163, 184, 0.18);
|
}
|
|
.wh-mat-print-template-manager__property {
|
border-right: none;
|
border-left: 1px solid rgba(148, 163, 184, 0.18);
|
}
|
|
.wh-mat-print-template-manager__sidebar-header,
|
.wh-mat-print-template-manager__main-header {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
gap: 16px;
|
padding: 16px;
|
border-bottom: 1px solid rgba(148, 163, 184, 0.18);
|
}
|
|
.wh-mat-print-template-manager__sidebar-scroll {
|
flex: 1;
|
min-height: 0;
|
}
|
|
.wh-mat-print-template-manager__template-list {
|
display: flex;
|
flex-direction: column;
|
gap: 12px;
|
padding: 16px;
|
}
|
|
.wh-mat-print-template-manager__template-card {
|
display: flex;
|
flex-direction: column;
|
gap: 10px;
|
padding: 14px;
|
border: 1px solid rgba(148, 163, 184, 0.18);
|
border-radius: 16px;
|
background: #ffffff;
|
text-align: left;
|
cursor: pointer;
|
transition:
|
transform 0.2s ease,
|
border-color 0.2s ease,
|
box-shadow 0.2s ease;
|
}
|
|
.wh-mat-print-template-manager__template-card:hover,
|
.wh-mat-print-template-manager__template-card.is-active {
|
border-color: rgba(37, 99, 235, 0.45);
|
transform: translateY(-1px);
|
box-shadow: 0 12px 28px rgba(37, 99, 235, 0.08);
|
}
|
|
.wh-mat-print-template-manager__template-card-header {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
gap: 8px;
|
font-size: 14px;
|
font-weight: 700;
|
color: var(--art-text-primary);
|
}
|
|
.wh-mat-print-template-manager__template-code,
|
.wh-mat-print-template-manager__subtitle {
|
font-size: 12px;
|
color: var(--art-text-secondary);
|
}
|
|
.wh-mat-print-template-manager__template-actions {
|
display: flex;
|
align-items: center;
|
gap: 4px;
|
flex-wrap: wrap;
|
}
|
|
.wh-mat-print-template-manager__main {
|
display: flex;
|
flex-direction: column;
|
min-width: 0;
|
min-height: 0;
|
overflow: hidden;
|
}
|
|
.wh-mat-print-template-manager__canvas-panel {
|
flex: 1;
|
min-width: 0;
|
min-height: 0;
|
display: flex;
|
padding: 16px;
|
overflow: auto;
|
}
|
|
.wh-mat-print-template-manager__title {
|
font-size: 16px;
|
font-weight: 700;
|
color: var(--art-text-primary);
|
}
|
|
@media (max-width: 1440px) {
|
.wh-mat-print-template-manager__layout {
|
grid-template-columns: 240px minmax(0, 1fr) 320px;
|
}
|
}
|
|
@media (max-width: 1180px) {
|
.wh-mat-print-template-manager__layout {
|
grid-template-columns: minmax(0, 1fr);
|
grid-template-rows: minmax(0, 0.82fr) minmax(0, 1.45fr) minmax(0, 1fr);
|
}
|
|
.wh-mat-print-template-manager__sidebar,
|
.wh-mat-print-template-manager__property {
|
border-left: none;
|
border-right: none;
|
border-bottom: 1px solid rgba(148, 163, 184, 0.18);
|
}
|
}
|
</style>
|
