28 lines
1.8 KiB
HTML
28 lines
1.8 KiB
HTML
{% set label_font_size = labelFontSize|default(14) %}
|
||
{% set label_color = labelColor|default('#333333') %}
|
||
{% set label_font_weight = labelFontWeight|default('normal') %}
|
||
{% set align_map = {'left': 'flex-start', 'center': 'center', 'right': 'flex-end'} %}
|
||
{% set justify = align_map.get(textAlign|default('center'), 'center') %}
|
||
{% set is_float = position_mode|default('inline') == 'float' %}
|
||
{% if is_float %}
|
||
<div style="position: absolute; left: {{ float_x|default(0) }}px; top: {{ float_y|default(0) }}px; z-index: {{ float_z_index|default(100) }};">
|
||
{% else %}
|
||
<div style="display: flex; justify-content: {{ justify }}; width: 100%; box-sizing: border-box;">
|
||
{% endif %}
|
||
<div style="display: inline-flex; flex-direction: {% if labelPosition == 'top' %}column-reverse{% elif labelPosition == 'left' %}row-reverse{% elif labelPosition == 'right' %}row{% else %}column{% endif %}; align-items: center; gap: 4px;">
|
||
{% if src %}
|
||
<img src="{{ src }}" style="width: {{ width }}; height: {{ height }}; display: block;" />
|
||
{% else %}
|
||
<div style="width: {{ width }}; height: {{ height }}; display: flex; border: 2px dashed #dcdfe6; background-color: #f5f7fa; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: #909399; font-size: 12px;">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
||
<circle cx="8.5" cy="8.5" r="1.5"></circle>
|
||
<polyline points="21 15 16 10 5 21"></polyline>
|
||
</svg>
|
||
<span>{{ width }} × {{ height }}</span>
|
||
</div>
|
||
{% endif %}
|
||
{% if label %}<span style="font-size: {{ label_font_size }}px; color: {{ label_color }}; font-weight: {{ label_font_weight }};">{{ label }}</span>{% endif %}
|
||
</div>
|
||
</div>
|