5 changed files with 796 additions and 9 deletions
-
7src/utils/zplGenerator.js
-
62src/views/modules/labelSetting/LabelDesigner.vue
-
721src/views/modules/labelSetting/components/ElementCombinationDialog.vue
-
12src/views/modules/labelSetting/components/PropertyForm.vue
-
3src/views/modules/labelSetting/components/PropertyPanel.vue
@ -0,0 +1,721 @@ |
|||||
|
<template> |
||||
|
<el-dialog |
||||
|
title="元素内容组合设置" |
||||
|
:visible="visible" |
||||
|
:close-on-click-modal="false" |
||||
|
width="900px" |
||||
|
top="3vh" |
||||
|
custom-class="element-combination-dialog" |
||||
|
:before-close="handleClose" |
||||
|
@close="handleClose" |
||||
|
> |
||||
|
<div class="combination-content"> |
||||
|
<!-- 目标元素信息 --> |
||||
|
<div class="target-element-info"> |
||||
|
<h4>目标元素：{{ targetElement.type === 'onecode' ? '一维码' : '二维码' }}</h4> |
||||
|
<p>当前数据：{{ targetElement.data || '(空)' }}</p> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 预览区域 - 移到顶部 --> |
||||
|
<div class="preview-section"> |
||||
|
<h4 class="preview-title">预览结果</h4> |
||||
|
<div class="preview-area"> |
||||
|
<el-input |
||||
|
:value="previewResult" |
||||
|
readonly |
||||
|
placeholder="组合结果预览" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<el-divider></el-divider> |
||||
|
|
||||
|
<!-- 组合规则设置 --> |
||||
|
<div class="combination-rules"> |
||||
|
<el-form label-position="top"> |
||||
|
<!-- 顺序拼接模式 --> |
||||
|
<div class="sequence-mode"> |
||||
|
<div class="sequence-container"> |
||||
|
<!-- 已选择的元素列表 --> |
||||
|
<div class="selected-section"> |
||||
|
<h5 class="section-title">已选择的元素</h5> |
||||
|
<div class="selected-elements-container"> |
||||
|
<div v-if="selectedElements.length === 0" class="empty-state"> |
||||
|
<i class="el-icon-plus"></i> |
||||
|
<p>请从右侧选择要组合的元素</p> |
||||
|
</div> |
||||
|
<div |
||||
|
v-for="(element, index) in selectedElements" |
||||
|
:key="element.id || index" |
||||
|
class="selected-element-card" |
||||
|
> |
||||
|
<div class="element-info"> |
||||
|
<div class="element-order">{{ index + 1 }}</div> |
||||
|
<i :class="getElementIcon(element.type)" class="element-icon"></i> |
||||
|
<span class="element-name">{{ getElementDisplayName(element) }}</span> |
||||
|
</div> |
||||
|
<div class="element-actions"> |
||||
|
<el-button |
||||
|
size="mini" |
||||
|
icon="el-icon-arrow-up" |
||||
|
@click="moveElementUp(index)" |
||||
|
:disabled="index === 0" |
||||
|
class="action-btn up-btn" |
||||
|
title="上移" |
||||
|
></el-button> |
||||
|
<el-button |
||||
|
size="mini" |
||||
|
icon="el-icon-arrow-down" |
||||
|
@click="moveElementDown(index)" |
||||
|
:disabled="index === selectedElements.length - 1" |
||||
|
class="action-btn down-btn" |
||||
|
title="下移" |
||||
|
></el-button> |
||||
|
<el-button |
||||
|
size="mini" |
||||
|
icon="el-icon-delete" |
||||
|
@click="removeElement(element)" |
||||
|
class="action-btn remove-btn" |
||||
|
title="移除" |
||||
|
></el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 可用元素列表 --> |
||||
|
<div class="available-section"> |
||||
|
<h5 class="section-title">可用元素</h5> |
||||
|
<div class="available-elements-container"> |
||||
|
<div v-if="availableElements.length === 0" class="no-elements"> |
||||
|
<p>暂无可用元素</p> |
||||
|
</div> |
||||
|
<div |
||||
|
v-for="element in availableElements" |
||||
|
:key="element.id" |
||||
|
class="available-element-card" |
||||
|
@click="addElement(element)" |
||||
|
> |
||||
|
<i :class="getElementIcon(element.type)" class="element-icon"></i> |
||||
|
<span class="element-name">{{ getElementDisplayName(element) }}</span> |
||||
|
<i class="el-icon-plus add-icon"></i> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<el-form-item label="分隔符设置" class="separator-setting"> |
||||
|
<div class="separator-input-group"> |
||||
|
<el-input |
||||
|
v-model="separator" |
||||
|
placeholder="如：- 或 _ 或留空" |
||||
|
style="width: 200px;" |
||||
|
/> |
||||
|
<span class="separator-hint">元素间的分隔符</span> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="handleClose">取消</el-button> |
||||
|
<el-button type="primary" @click="handleConfirm">确定</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'ElementCombinationDialog', |
||||
|
props: { |
||||
|
visible: Boolean, |
||||
|
targetElement: { |
||||
|
type: Object, |
||||
|
default: () => ({}) |
||||
|
}, |
||||
|
allElements: { |
||||
|
type: Array, |
||||
|
default: () => [] |
||||
|
}, |
||||
|
dataKeys: { |
||||
|
type: Array, |
||||
|
default: () => [] |
||||
|
} |
||||
|
}, |
||||
|
emits: ['update:visible', 'confirm'], |
||||
|
data() { |
||||
|
return { |
||||
|
selectedElements: [], |
||||
|
separator: '-' |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
availableElements() { |
||||
|
// 定义可用于组合的元素类型 |
||||
|
const combinableTypes = ['text', 'onecode', 'qrcode', 'serialNumber'] |
||||
|
|
||||
|
return this.allElements.filter(element => |
||||
|
element !== this.targetElement && |
||||
|
!this.selectedElements.find(selected => selected.id === element.id) && |
||||
|
combinableTypes.includes(element.type) |
||||
|
) |
||||
|
}, |
||||
|
previewResult() { |
||||
|
try { |
||||
|
return this.generateSequencePreview() |
||||
|
} catch (error) { |
||||
|
return '预览错误：' + error.message |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
visible(newVal) { |
||||
|
if (newVal) { |
||||
|
this.initializeDialog() |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
initializeDialog() { |
||||
|
// 重置为默认状态 |
||||
|
this.resetToDefaults() |
||||
|
}, |
||||
|
|
||||
|
resetToDefaults() { |
||||
|
this.selectedElements = [] |
||||
|
this.separator = '-' |
||||
|
}, |
||||
|
|
||||
|
addElement(element) { |
||||
|
// 为元素添加唯一ID（如果没有的话） |
||||
|
const elementWithId = { |
||||
|
...element, |
||||
|
id: element.id || `element_${Date.now()}_${Math.random().toString(36).substr(2, 9)}` |
||||
|
} |
||||
|
this.selectedElements.push(elementWithId) |
||||
|
}, |
||||
|
|
||||
|
removeElement(element) { |
||||
|
const index = this.selectedElements.findIndex(e => e.id === element.id) |
||||
|
if (index > -1) { |
||||
|
this.selectedElements.splice(index, 1) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
|
||||
|
// 上移元素 |
||||
|
moveElementUp(index) { |
||||
|
if (index > 0) { |
||||
|
const element = this.selectedElements[index] |
||||
|
this.selectedElements.splice(index, 1) |
||||
|
this.selectedElements.splice(index - 1, 0, element) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 下移元素 |
||||
|
moveElementDown(index) { |
||||
|
if (index < this.selectedElements.length - 1) { |
||||
|
const element = this.selectedElements[index] |
||||
|
this.selectedElements.splice(index, 1) |
||||
|
this.selectedElements.splice(index + 1, 0, element) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
getElementDisplayName(element) { |
||||
|
const typeNames = { |
||||
|
text: '文本', |
||||
|
onecode: '一维码', |
||||
|
qrcode: '二维码', |
||||
|
pic: '图片', |
||||
|
serialNumber: '流水号' |
||||
|
} |
||||
|
const typeName = typeNames[element.type] || element.type |
||||
|
const content = element.data ? `(${element.data.substring(0, 40)}${element.data.length > 40 ? '...' : ''})` : '' |
||||
|
return `${typeName}${content}` |
||||
|
}, |
||||
|
|
||||
|
// 获取用于后端匹配的完整元素名称（不截断内容） |
||||
|
getElementFullName(element) { |
||||
|
const typeNames = { |
||||
|
text: '文本', |
||||
|
onecode: '一维码', |
||||
|
qrcode: '二维码', |
||||
|
pic: '图片', |
||||
|
serialNumber: '流水号' |
||||
|
} |
||||
|
const typeName = typeNames[element.type] || element.type |
||||
|
const content = element.data ? `(${element.data})` : '' |
||||
|
return `${typeName}${content}` |
||||
|
}, |
||||
|
|
||||
|
getElementIcon(type) { |
||||
|
const icons = { |
||||
|
text: 'el-icon-edit', |
||||
|
onecode: 'el-icon-menu', |
||||
|
qrcode: 'el-icon-menu', |
||||
|
pic: 'el-icon-picture', |
||||
|
serialNumber: 'el-icon-sort' |
||||
|
} |
||||
|
return icons[type] || 'el-icon-document' |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
|
||||
|
generateSequencePreview() { |
||||
|
if (!this.selectedElements.length) return '' |
||||
|
|
||||
|
const parts = this.selectedElements.map(element => |
||||
|
element.data || `[${this.getElementDisplayName(element)}]` |
||||
|
) |
||||
|
|
||||
|
return parts.join(this.separator || '') |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
|
||||
|
handleClose() { |
||||
|
this.$emit('update:visible', false) |
||||
|
}, |
||||
|
|
||||
|
handleConfirm() { |
||||
|
const combinationData = this.generateSequenceFormat() |
||||
|
|
||||
|
const combinationConfig = { |
||||
|
mode: 'sequence', |
||||
|
data: combinationData, |
||||
|
selectedElements: this.selectedElements.map(e => e.id), |
||||
|
separator: this.separator |
||||
|
} |
||||
|
|
||||
|
this.$emit('confirm', combinationConfig) |
||||
|
this.handleClose() |
||||
|
}, |
||||
|
|
||||
|
generateSequenceFormat() { |
||||
|
// 将顺序拼接转换为模板格式 |
||||
|
const parts = this.selectedElements.map(element => { |
||||
|
// 使用完整的元素名称，确保后端能精确匹配 |
||||
|
return `{${this.getElementFullName(element)}}` |
||||
|
}) |
||||
|
return parts.join(this.separator || '') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.element-combination-dialog { |
||||
|
border-radius: 12px; |
||||
|
} |
||||
|
|
||||
|
.combination-content { |
||||
|
max-height: calc(85vh - 120px); |
||||
|
overflow-y: auto; |
||||
|
padding-right: 5px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.target-element-info { |
||||
|
background: #f5f7fa; |
||||
|
padding: 15px; |
||||
|
border-radius: 8px; |
||||
|
border: 1px solid #e4e7ed; |
||||
|
} |
||||
|
|
||||
|
.target-element-info h4 { |
||||
|
margin: 0 0 8px 0; |
||||
|
color: #409eff; |
||||
|
font-size: 16px; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.target-element-info p { |
||||
|
margin: 0; |
||||
|
color: #666; |
||||
|
font-size: 14px; |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
|
||||
|
/* 预览区域样式 */ |
||||
|
.preview-section { |
||||
|
background: #f8f9fa; |
||||
|
border: 1px solid #e9ecef; |
||||
|
border-radius: 6px; |
||||
|
padding: 12px; |
||||
|
margin: 12px 0; |
||||
|
} |
||||
|
|
||||
|
.preview-title { |
||||
|
margin: 0 0 8px 0; |
||||
|
color: #495057; |
||||
|
font-size: 14px; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.combination-rules h4 { |
||||
|
margin: 0 0 15px 0; |
||||
|
color: #333; |
||||
|
font-size: 16px; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/* 顺序拼接模式样式 */ |
||||
|
.sequence-mode { |
||||
|
margin-top: 15px; |
||||
|
} |
||||
|
|
||||
|
.sequence-container { |
||||
|
display: flex; |
||||
|
gap: 20px; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.selected-section, |
||||
|
.available-section { |
||||
|
flex: 1; |
||||
|
min-width: 0; |
||||
|
} |
||||
|
|
||||
|
.section-title { |
||||
|
margin: 0 0 12px 0; |
||||
|
font-size: 14px; |
||||
|
font-weight: 600; |
||||
|
color: #333; |
||||
|
padding-bottom: 8px; |
||||
|
border-bottom: 2px solid #e4e7ed; |
||||
|
} |
||||
|
|
||||
|
/* 已选择元素区域 */ |
||||
|
.selected-elements-container { |
||||
|
border: 2px dashed #d9ecff; |
||||
|
border-radius: 8px; |
||||
|
min-height: 230px; |
||||
|
max-height: 250px; |
||||
|
padding: 12px; |
||||
|
background: #f8fbff; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
|
||||
|
.empty-state { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
height: 126px; |
||||
|
color: #999; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.empty-state i { |
||||
|
font-size: 32px; |
||||
|
margin-bottom: 8px; |
||||
|
color: #d3d4d6; |
||||
|
} |
||||
|
|
||||
|
.empty-state p { |
||||
|
margin: 0; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
.selected-element-card { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
background: #fff; |
||||
|
border: 1px solid #e1f3d8; |
||||
|
border-radius: 6px; |
||||
|
padding: 12px; |
||||
|
margin-bottom: 8px; |
||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
||||
|
transition: all 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.selected-element-card:hover { |
||||
|
border-color: #95de64; |
||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); |
||||
|
} |
||||
|
|
||||
|
.element-info { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.element-order { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 24px; |
||||
|
height: 24px; |
||||
|
background: #52c41a; |
||||
|
color: #fff; |
||||
|
border-radius: 50%; |
||||
|
font-size: 12px; |
||||
|
font-weight: bold; |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
|
||||
|
.element-icon { |
||||
|
margin-right: 8px; |
||||
|
color: #52c41a; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
.element-name { |
||||
|
font-size: 14px; |
||||
|
color: #333; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.element-actions { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 4px; |
||||
|
} |
||||
|
|
||||
|
.action-btn { |
||||
|
padding: 4px; |
||||
|
min-width: 24px; |
||||
|
height: 24px; |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
.up-btn { |
||||
|
color: #409eff; |
||||
|
border-color: #409eff; |
||||
|
background: #fff; |
||||
|
} |
||||
|
|
||||
|
.up-btn:hover:not(:disabled) { |
||||
|
background: #409eff; |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.down-btn { |
||||
|
color: #409eff; |
||||
|
border-color: #409eff; |
||||
|
background: #fff; |
||||
|
} |
||||
|
|
||||
|
.down-btn:hover:not(:disabled) { |
||||
|
background: #409eff; |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.remove-btn { |
||||
|
color: #f56c6c; |
||||
|
border-color: #f56c6c; |
||||
|
background: #fff; |
||||
|
} |
||||
|
|
||||
|
.remove-btn:hover { |
||||
|
background: #f56c6c; |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.action-btn:disabled { |
||||
|
color: #c0c4cc; |
||||
|
border-color: #e4e7ed; |
||||
|
background: #f5f7fa; |
||||
|
cursor: not-allowed; |
||||
|
} |
||||
|
|
||||
|
/* 可用元素区域 */ |
||||
|
.available-elements-container { |
||||
|
border: 1px solid #e4e7ed; |
||||
|
border-radius: 8px; |
||||
|
min-height: 150px; |
||||
|
max-height: 230px; |
||||
|
overflow-y: auto; |
||||
|
padding: 12px; |
||||
|
background: #fafafa; |
||||
|
} |
||||
|
|
||||
|
.no-elements { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
height: 126px; |
||||
|
color: #999; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.no-elements p { |
||||
|
margin: 0; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
.available-element-card { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
background: #fff; |
||||
|
border: 1px solid #e4e7ed; |
||||
|
border-radius: 6px; |
||||
|
padding: 10px 12px; |
||||
|
margin-bottom: 8px; |
||||
|
cursor: pointer; |
||||
|
transition: all 0.3s ease; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.available-element-card:hover { |
||||
|
background: #e6f7ff; |
||||
|
border-color: #91d5ff; |
||||
|
transform: translateX(4px); |
||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); |
||||
|
} |
||||
|
|
||||
|
.available-element-card .element-icon { |
||||
|
margin-right: 8px; |
||||
|
color: #409eff; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
.available-element-card .element-name { |
||||
|
flex: 1; |
||||
|
font-size: 14px; |
||||
|
color: #333; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.add-icon { |
||||
|
color: #52c41a; |
||||
|
font-size: 16px; |
||||
|
opacity: 0; |
||||
|
transition: opacity 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.available-element-card:hover .add-icon { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
/* 分隔符设置 */ |
||||
|
.separator-setting { |
||||
|
margin-top: 20px; |
||||
|
padding-top: 20px; |
||||
|
border-top: 1px solid #e4e7ed; |
||||
|
} |
||||
|
|
||||
|
.separator-input-group { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 12px; |
||||
|
} |
||||
|
|
||||
|
.separator-hint { |
||||
|
color: #666; |
||||
|
font-size: 13px; |
||||
|
} |
||||
|
|
||||
|
.preview-area { |
||||
|
background: #fff; |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
.preview-area .el-input { |
||||
|
background: #fff; |
||||
|
} |
||||
|
|
||||
|
.preview-area .el-input__inner { |
||||
|
border: 1px solid #ddd; |
||||
|
background: #fff; |
||||
|
color: #333; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
.dialog-footer { |
||||
|
text-align: right; |
||||
|
padding-top: 15px; |
||||
|
border-top: 1px solid #e4e7ed; |
||||
|
} |
||||
|
|
||||
|
.dialog-footer .el-button { |
||||
|
margin-left: 10px; |
||||
|
padding: 8px 20px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/* 表单项间距优化 */ |
||||
|
.el-form-item { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.el-form-item:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
/* 滚动条样式 */ |
||||
|
.combination-content::-webkit-scrollbar, |
||||
|
.available-elements::-webkit-scrollbar { |
||||
|
width: 6px; |
||||
|
} |
||||
|
|
||||
|
.combination-content::-webkit-scrollbar-track, |
||||
|
.available-elements::-webkit-scrollbar-track { |
||||
|
background: #f1f1f1; |
||||
|
border-radius: 3px; |
||||
|
} |
||||
|
|
||||
|
.combination-content::-webkit-scrollbar-thumb, |
||||
|
.available-elements::-webkit-scrollbar-thumb { |
||||
|
background: #c1c1c1; |
||||
|
border-radius: 3px; |
||||
|
} |
||||
|
|
||||
|
.combination-content::-webkit-scrollbar-thumb:hover, |
||||
|
.available-elements::-webkit-scrollbar-thumb:hover { |
||||
|
background: #a8a8a8; |
||||
|
} |
||||
|
|
||||
|
/* 响应式设计 */ |
||||
|
@media (max-width: 768px) { |
||||
|
.sequence-container { |
||||
|
flex-direction: column; |
||||
|
gap: 15px; |
||||
|
} |
||||
|
|
||||
|
.selected-elements-container, |
||||
|
.available-elements-container { |
||||
|
min-height: 120px; |
||||
|
max-height: 150px; |
||||
|
} |
||||
|
|
||||
|
.selected-element-card { |
||||
|
padding: 8px 10px; |
||||
|
} |
||||
|
|
||||
|
.element-order { |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
font-size: 11px; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
|
||||
|
.element-name { |
||||
|
font-size: 13px; |
||||
|
} |
||||
|
|
||||
|
.action-btn { |
||||
|
padding: 2px; |
||||
|
min-width: 20px; |
||||
|
height: 20px; |
||||
|
} |
||||
|
|
||||
|
.available-element-card { |
||||
|
padding: 8px 10px; |
||||
|
} |
||||
|
|
||||
|
.separator-input-group { |
||||
|
flex-direction: column; |
||||
|
align-items: flex-start; |
||||
|
gap: 8px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue