修复 bug,优化界面
This commit is contained in:
@@ -678,7 +678,7 @@ onMounted(loadData);
|
||||
<ColorInput v-model:value="formData.body_color" />
|
||||
</NFormItem>
|
||||
</div>
|
||||
<NFormItem v-if="formData.bg_type === 'image' || formData.bg_type === 'video'" label="背景显示模式">
|
||||
<NFormItem v-if="formData.layout !== 'split_content' && (formData.bg_type === 'image' || formData.bg_type === 'video')" label="背景显示模式">
|
||||
<NRadioGroup :value="(formData.config.bg_fit as string) ?? 'cover'" @update:value="v => (formData.config.bg_fit = v)">
|
||||
<NRadio v-for="opt in bgFitOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</NRadio>
|
||||
</NRadioGroup>
|
||||
@@ -699,22 +699,36 @@ onMounted(loadData);
|
||||
<span v-if="formData.layout === 'title_media'" class="text-12px opacity-60">标题+媒体布局仅水平方向生效(左对齐/居中/右对齐),垂直位置忽略</span>
|
||||
</div>
|
||||
</NFormItem>
|
||||
<NFormItem v-if="formData.layout === 'split_content'" label="媒体位置">
|
||||
<NRadioGroup :value="(formData.config.media_position as string) ?? 'left'" @update:value="v => (formData.config.media_position = v)">
|
||||
<NRadio value="left">素材|文案</NRadio>
|
||||
<NRadio value="right">文案|素材</NRadio>
|
||||
</NRadioGroup>
|
||||
</NFormItem>
|
||||
<NFormItem v-if="formData.layout === 'split_content'" label="分栏比例">
|
||||
<div class="w-full flex flex-col gap-8px">
|
||||
<NSelect
|
||||
:value="(formData.config.split_ratio as number) ?? 50"
|
||||
:options="splitRatioOptions"
|
||||
@update:value="v => (formData.config.split_ratio = v)"
|
||||
/>
|
||||
<span class="text-12px opacity-60">按页面视觉左右顺序标注({{ formData.config.media_position === 'right' ? '文案 : 素材' : '素材 : 文案' }}),默认五五等分;移动端(小屏)始终单列堆叠不受影响</span>
|
||||
</div>
|
||||
</NFormItem>
|
||||
<!-- 图文分栏:背景显示模式(仅图片/视频背景)/ 媒体位置 / 分栏比例 同一行 -->
|
||||
<div
|
||||
v-if="formData.layout === 'split_content'"
|
||||
class="grid gap-x-16px"
|
||||
:class="formData.bg_type === 'image' || formData.bg_type === 'video' ? 'grid-cols-3' : 'grid-cols-2'"
|
||||
>
|
||||
<NFormItem v-if="formData.bg_type === 'image' || formData.bg_type === 'video'" label="背景显示模式" label-placement="top">
|
||||
<NRadioGroup :value="(formData.config.bg_fit as string) ?? 'cover'" @update:value="v => (formData.config.bg_fit = v)">
|
||||
<NRadio v-for="opt in bgFitOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</NRadio>
|
||||
</NRadioGroup>
|
||||
</NFormItem>
|
||||
<NFormItem label="媒体位置" label-placement="top">
|
||||
<NRadioGroup :value="(formData.config.media_position as string) ?? 'left'" @update:value="v => (formData.config.media_position = v)">
|
||||
<NRadio value="left">素材|文案</NRadio>
|
||||
<NRadio value="right">文案|素材</NRadio>
|
||||
</NRadioGroup>
|
||||
</NFormItem>
|
||||
<NFormItem label="分栏比例" label-placement="top">
|
||||
<NTooltip trigger="focus" placement="top">
|
||||
<template #trigger>
|
||||
<NSelect
|
||||
:value="(formData.config.split_ratio as number) ?? 50"
|
||||
:options="splitRatioOptions"
|
||||
@update:value="v => (formData.config.split_ratio = v)"
|
||||
/>
|
||||
</template>
|
||||
按页面视觉左右顺序标注({{ formData.config.media_position === 'right' ? '文案 : 素材' : '素材 : 文案' }}),默认五五等分;移动端(小屏)始终单列堆叠不受影响
|
||||
</NTooltip>
|
||||
</NFormItem>
|
||||
</div>
|
||||
<NFormItem v-if="formData.layout === 'mosaic'" label="拼贴版式">
|
||||
<div class="w-full flex flex-col gap-8px">
|
||||
<NRadioGroup :value="(formData.config.mosaic_pattern as string) ?? 'big_3'" @update:value="handleMosaicPatternChange">
|
||||
|
||||
Reference in New Issue
Block a user