修改数据魔方副标题显示问题

v1.2.0
于肖磊 2025-01-20 17:51:38 +08:00
parent 099ceff2b4
commit 80737fa704
4 changed files with 39 additions and 4 deletions

View File

@ -24,7 +24,18 @@
</div>
</el-form-item>
<el-form-item label="副标题">
<el-input v-model="form.subtitle" placeholder="请输入副标题" clearable></el-input>
<div class="flex-col gap-10 w">
<el-radio-group v-model="form.subtitle_title_type">
<el-radio value="text">文字</el-radio>
<el-radio value="image">图片</el-radio>
</el-radio-group>
<template v-if="form.subtitle_title_type == 'text'">
<el-input v-model="form.subtitle" placeholder="请输入副标题" clearable></el-input>
</template>
<template v-else>
<upload v-model="form.subtitle_title_img" :limit="1" size="50"></upload>
</template>
</div>
</el-form-item>
<el-form-item label="商品排列">
<el-radio-group v-model="form.goods_outerflex">

View File

@ -50,7 +50,14 @@
</template>
</el-form-item>
<el-form-item label="副标题">
<color-text-size-group v-model:color="form.subtitle_color" v-model:typeface="form.subtitle_typeface" v-model:size="form.subtitle_size" default-color="#000000"></color-text-size-group>
<template v-if="tabs_content.subtitle_title_type == 'text'">
<color-text-size-group v-model:color="form.subtitle_color" v-model:typeface="form.subtitle_typeface" v-model:size="form.subtitle_size" default-color="#000000"></color-text-size-group>
</template>
<template v-else>
<el-form-item label="图片高度" label-width="60" class="w form-item-child-label">
<slider v-model="form.subtitle_img_height" :min="1" :max="200"></slider>
</el-form-item>
</template>
</el-form-item>
<el-form-item label="标题内间距">
<slider v-model="form.title_gap" :min="0" :max="100"></slider>

View File

@ -19,7 +19,14 @@
<template v-else>
<p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
</template>
<p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
<template v-if="item.data_content.subtitle_title_type && item.data_content.subtitle_title_type == 'image'">
<div v-if="item.data_content.subtitle_title_img.length > 0" class="re" :style="`height: ${ item.data_style?.subtitle_img_height || 0 }px;`">
<img :style="`height: ${ item.data_style?.subtitle_img_height || 0 }px;max-width: 100%;`" :src="item.data_content.subtitle_title_img[0].url" fit="contain" />
</div>
</template>
<template v-else>
<p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
</template>
</div>
<div class="w h flex-1 oh flex-row">
<magic-carousel :key="form.style_actived" :value="item" :good-style="item.data_style" :actived="form.style_actived" type="product" @carousel_change="carousel_change(index, $event)"></magic-carousel>
@ -67,7 +74,14 @@
<template v-else>
<p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
</template>
<p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
<template v-if="item.data_content.subtitle_title_type && item.data_content.subtitle_title_type == 'image'">
<div v-if="item.data_content.subtitle_title_img.length > 0" class="re" :style="`height: ${ item.data_style?.subtitle_img_height || 0 }px`">
<img :style="`height: ${ item.data_style?.subtitle_img_height || 0 }px;max-width: 100%;`" :src="item.data_content.subtitle_title_img[0].url" fit="contain" />
</div>
</template>
<template v-else>
<p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
</template>
</div>
<div class="w h flex-1 oh flex-row">
<magic-carousel :key="form.style_actived" :value="item" :good-style="item.data_style" type="product" :actived="form.style_actived" @carousel_change="carousel_change(index, $event)"></magic-carousel>

View File

@ -125,6 +125,7 @@ const data_style = {
subtitle_color: '#FF852A',
subtitle_typeface: '400',
subtitle_size: 14,
subtitle_img_height: 28,
goods_title_typeface: 'bold',
goods_title_size: 14,
goods_title_color: "#333333",
@ -320,7 +321,9 @@ const data_content = {
heading_title_type: 'text',
heading_title: '主标题',
heading_title_img: [],
subtitle_title_type:'text',
subtitle: '副标题',
subtitle_title_img: [],
//
goods_list:[],
goods_ids: '',