修改描述为两行显示

v1.1.0
于肖磊 2024-12-19 15:18:49 +08:00
parent 11e1538db2
commit 1f2ddf21aa
10 changed files with 54 additions and 45 deletions

View File

@ -6,6 +6,11 @@
<el-checkbox v-for="item in base_list.list_show_list.filter(item => item.type.includes(form.theme))" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item v-if="form.is_show.includes('simple_desc')" label="简述行数">
<el-radio-group v-model="form.simple_desc_row">
<el-radio v-for="item in base_list.shopping_simple_desc_row" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="['0', '1', '2'].includes(form.theme)" label="价格独行">
<el-switch v-model="form.is_price_solo" active-value="1" inactive-value="0"></el-switch>
</el-form-item>
@ -69,6 +74,10 @@ const base_list = {
shopping_cart_list: [
{ name: '进入商品详情页', value: '0' },
{ name: '商品加购', value: '1' }
],
shopping_simple_desc_row: [
{ name: '一行', value: '1' },
{ name: '两行', value: '2' }
]
};
const emit = defineEmits(['change_shop_type']);

View File

@ -20,7 +20,7 @@
<div v-if="field_show.includes('0') || field_show.includes('1') || field_show.includes('2') || field_show.includes('3')" class="jc-sb flex-1" :class="article_theme == '3' ? 'flex-row align-c' : 'flex-col'" :style="article_theme != '0' ? content_padding : 'width: 0;'">
<div class="flex-col" :class="article_theme == '3' ? 'flex-1 flex-width' : ''" :style="'gap:' + new_style.name_desc_space + 'px;'">
<div v-if="field_show.includes('3')" class="title" :class="article_theme == '3' ? 'text-line-1' : 'text-line-2'" :style="article_name">{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}</div>
<div v-if="field_show.includes('2')" class="desc text-line-1" :style="article_desc">{{ item.data.describe || '' }}</div>
<div v-if="field_show.includes('2')" :class="'desc ' + field_desc_row == '2' ? 'text-line-2' : 'text-line-1'" :style="article_desc">{{ item.data.describe || '' }}</div>
</div>
<div class="flex-row jc-sb gap-8" :class="article_theme == '3' ? 'ml-10' : 'align-e mt-10'">
<div :style="article_date">{{ field_show.includes('0') ? (!is_obj_empty(item.data) ? item.data.add_time : '2020-06-05 15:20') : '' }}</div>
@ -55,7 +55,7 @@
<div v-if="field_show.includes('0') || field_show.includes('1') || field_show.includes('2') || (field_show.includes('3') && new_content.name_float == '0')" class="jc-sb flex-1 flex-col" :style="article_theme != '0' ? content_padding : ''">
<div class="flex-col" :style="'gap:' + new_style.name_desc_space + 'px;'">
<div v-if="field_show.includes('3') && new_content.name_float == '0'" class="title text-line-2" :style="article_name">{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}</div>
<div v-if="field_show.includes('2')" class="desc text-line-1" :style="article_desc">{{ item.data.describe || '' }}</div>
<div v-if="field_show.includes('2')" :class="'desc ' + field_desc_row == '2' ? 'text-line-2' : 'text-line-1'" :style="article_desc">{{ item.data.describe || '' }}</div>
</div>
<div :class="[ 'flex-row jc-sb gap-8 align-e', { 'mt-10': (field_show.includes('3') && new_content.name_float == '0') || field_show.includes('2') }] ">
<div :style="article_date">{{ field_show.includes('0') ? (!is_obj_empty(item.data) ? item.data.add_time : '2020-06-05 15:20') : '' }}</div>
@ -299,6 +299,7 @@ const float_name_style = computed(() => {
let location = 'position:absolute;bottom:0;left:0;right:0;'
return gradient_computer(data) + radius_computer(name_bg_radius) + padding_computer(name_bg_padding) + margin_computer(name_bg_margin) + location;
});
const field_desc_row = ref('1');
// value
watch(
() => props.value,
@ -309,7 +310,14 @@ watch(
field_show.value = new_content.field_show;
//
article_name.value = 'font-size:' + new_style.name_size + 'px;' + 'font-weight:' + new_style.name_weight + ';' + 'color:' + new_style.name_color + ';';
article_desc.value = 'font-size:' + new_style.desc_size + 'px;line-height:' + new_style.desc_size + 'px;height:'+ new_style.desc_size + 'px;color:' + new_style.desc_color + ';';
//
const desc_size = new_style.desc_size;
field_desc_row.value = new_content.field_desc_row;
if (new_content.field_desc_row == '2') {
article_desc.value = 'font-size:' + desc_size + 'px;line-height:' + (desc_size > 0 ? desc_size + 3 : 0 ) + 'px;height:'+ (desc_size > 0 ? (desc_size + 3) * 2 : 0) + 'px;color:' + new_style.desc_color + ';';
} else {
article_desc.value = 'font-size:' + desc_size + 'px;line-height:' + desc_size + 'px;height:'+ desc_size + 'px;color:' + new_style.desc_color + ';';
}
article_date.value = 'font-size:' + new_style.time_size + 'px;' + 'font-weight:' + new_style.time_weight + ';' + 'color:' + new_style.time_color + ';';
article_page_view.value = 'font-size:' + new_style.page_view_size + 'px;' + 'font-weight:' + new_style.page_view_weight + ';' + 'color:' + new_style.page_view_color + ';';
content_radius.value = radius_computer(new_style.content_radius);

View File

@ -28,6 +28,11 @@
<el-checkbox v-for="item in base_list.field_show_list" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item v-if="form.field_show.includes('2')" label="描述行数">
<el-radio-group v-model="form.field_desc_row">
<el-radio v-for="item in base_list.field_desc_row" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
<template v-if="form.theme == '4'">
<el-form-item label="标题浮起">
<el-switch v-model="form.name_float" active-value="1" inactive-value="0" @change="switch_chage"></el-switch>
@ -97,32 +102,20 @@ const base_list = reactive({
{ name: '选择文章', value: '0' },
{ name: '筛选文章', value: '1' },
],
// article_category_list: [] as select_1[],
// sort_list: [
// { name: '', value: '0' },
// { name: '', value: '1' },
// { name: '', value: '2' },
// ],
// order_by_rule_list: [
// { name: 'desc', value: '0' },
// { name: 'asc', value: '1' },
// ],
field_show_list: [
{ name: '文章标题', value: '3' },
{ name: '日期时间', value: '0' },
{ name: '浏览量', value: '1' },
{ name: '描述', value: '2' },
],
field_desc_row: [
{ name: '一行', value: '1' },
{ name: '两行', value: '2' }
]
});
const emits = defineEmits(['theme_change']);
onMounted(() => {
// nextTick(() => {
// // common_store.common.article_category
// if (common_store.common.article_category.length > 0) {
// base_list.article_category_list = common_store.common.article_category;
// }
// });
//
const { content_img_width = '', content_img_height = '' } = data.value;
//

View File

@ -69,6 +69,11 @@
<el-checkbox v-for="item in base_list.field_show_list" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item v-if="form.field_show.includes('2')" label="描述行数">
<el-radio-group v-model="form.field_desc_row">
<el-radio v-for="item in base_list.field_desc_row" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
<template v-if="form.article_theme == '4'">
<el-form-item label="标题浮起">
<el-switch v-model="form.name_float" active-value="1" inactive-value="0" @change="switch_chage"></el-switch>
@ -145,6 +150,10 @@ const base_list = reactive({
{ name: '浏览量', value: '1' },
{ name: '描述', value: '2' },
],
field_desc_row: [
{ name: '一行', value: '1' },
{ name: '两行', value: '2' }
]
});
const emits = defineEmits(['theme_change']);
onMounted(() => {

View File

@ -32,7 +32,7 @@
<div class="flex-col gap-10 top-title">
<div v-if="is_show('title') || (['0', '1', '2', '3', '5'].includes(theme) && is_show('simple_desc'))" class="flex-col" :style="`gap: ${ new_style.title_simple_desc_spacing }px;`">
<div v-if="is_show('title')" :class="text_line" :style="trends_config('title', 'title')">{{ item.title }}</div>
<div v-if="['0', '1', '2', '3', '5'].includes(theme) && is_show('simple_desc')" class="text-line-1" :style="trends_config('simple_desc', 'desc')">{{ item.simple_desc }}</div>
<div v-if="['0', '1', '2', '3', '5'].includes(theme) && is_show('simple_desc')" :class="form.simple_desc_row == '2' ? 'text-line-2' : 'text-line-1'" :style="trends_config('simple_desc', 'desc')">{{ item.simple_desc }}</div>
</div>
<div v-if="show_content && is_show('plugins_view_icon') && !isEmpty(item.plugins_view_icon_data)" class="flex-row gap-5 align-c">
<div v-for="(icon_data, icon_index) in item.plugins_view_icon_data" :key="icon_index" class="radius-sm size-9 pl-3 pr-3" :style="icon_style(icon_data)">{{ icon_data.name }}</div>
@ -122,7 +122,7 @@
<div class="flex-col gap-10 top-title">
<div v-if="is_show('title') || (['0', '1', '2', '3', '5'].includes(theme) && is_show('simple_desc'))" class="flex-col" :style="`gap: ${ new_style.title_simple_desc_spacing }px;`">
<div v-if="is_show('title')" :class="text_line" :style="trends_config('title', 'title')">{{ item.title }}</div>
<div v-if="['0', '1', '2', '3', '5'].includes(theme) && is_show('simple_desc')" class="text-line-1" :style="trends_config('simple_desc', 'desc')">{{ item.simple_desc }}</div>
<div v-if="['0', '1', '2', '3', '5'].includes(theme) && is_show('simple_desc')" :class="form.simple_desc_row == '2' ? 'text-line-2' : 'text-line-1'" :style="trends_config('simple_desc', 'desc')">{{ item.simple_desc }}</div>
</div>
<div v-if="show_content && is_show('plugins_view_icon') && !isEmpty(item.plugins_view_icon_data)" class="flex-row gap-5 align-c">
<div v-for="(icon_data, icon_index) in item.plugins_view_icon_data" :key="icon_index" class="radius-sm size-9 pl-3 pr-3" :style="icon_style(icon_data)">{{ icon_data.name }}</div>
@ -424,7 +424,11 @@ const style_config = (typeface: string, size: number, color: string | object, ty
style += `line-height: ${size > 0 ? size + 3 : 0}px;height: ${size > 0 ? (size + 3) * 2 : 0}px;color: ${color};`;
}
} else if (type == 'desc') {
style += `line-height: ${size}px;height: ${size}px;color: ${color};`;
if (form.value.simple_desc_row == '2') {
style += `line-height: ${size > 0 ? size + 3 : 0}px;height: ${size > 0 ? (size + 3) * 2 : 0}px;color: ${color};`;
} else {
style += `line-height: ${size}px;height: ${size}px;color: ${color};`;
}
} else {
style += `color: ${color};`;
}

View File

@ -81,32 +81,9 @@ const base_list = reactive({
{ name: '指定商品', value: '0' },
{ name: '筛选商品', value: '1' },
],
// product_category_list: [] as select_1[],
// product_brand_list: [] as select_1[],
// sort_list: [
// { name: '', value: '0' },
// { name: '', value: '1' },
// { name: '', value: '2' },
// { name: '', value: '3' },
// { name: '', value: '4' },
// ],
// order_by_rule_list: [
// { name: '(desc)', value: '0' },
// { name: '(asc)', value: '1' },
// ],
});
const emits = defineEmits(['theme_change']);
onBeforeMount(() => {
// nextTick(() => {
// // common_store.common.article_category
// const interval = setInterval(() => {
// if (common_store.common.goods_category.length > 0 || common_store.common.brand_list.length > 0) {
// base_list.product_category_list = common_store.common.goods_category;
// base_list.product_brand_list = common_store.common.brand_list;
// clearInterval(interval);
// }
// }, 1000);
// });
//
const { content_img_width = '', content_img_height = '' } = data.value;
//

View File

@ -23,6 +23,7 @@ interface DefaultArticleList {
order_by_type: number;
order_by_rule: number;
field_show: string[];
field_desc_row: string,
is_cover: string;
seckill_subscript_show: string;
subscript_type: string;
@ -82,6 +83,7 @@ const defaultArticleList: DefaultArticleList = {
order_by_type: defaultSetting.order_by_type,
order_by_rule: defaultSetting.order_by_rule,
field_show: ['0', '1', '3'],
field_desc_row: '1',
is_cover: defaultSetting.is_cover,
// 角标配置
seckill_subscript_show: '0',

View File

@ -34,6 +34,7 @@ interface DefaultArticleTabs {
tabs_list: articleTabsList[];
tabs_active_index: number;
field_show: string[];
field_desc_row: string;
seckill_subscript_show: string;
subscript_type: string;
subscript_img_src: uploadList[];
@ -126,6 +127,7 @@ const defaultArticleTabs: DefaultArticleTabs = {
],
tabs_active_index: 0,
field_show: ['0', '1', '3'],
field_desc_row: '1',
// 角标配置
seckill_subscript_show: '0',
subscript_type: 'text',

View File

@ -20,6 +20,7 @@ interface DefaultProductList {
order_by_type: number;
order_by_rule: number;
is_show: string[];
simple_desc_row: string;
static_img: uploadList[];
is_shop_show: string;
shop_type: string;
@ -107,6 +108,7 @@ const defaultProductList: DefaultProductList = {
order_by_rule: defaultSetting.order_by_rule,
// 显示内容
is_show: ['title', 'plugins_view_icon', 'price', 'sales_count', 'original_price'],
simple_desc_row: '1',
// 价格图标地址
static_img: [{ id: 2, url: new_url + 'price.png', original: '角标', title: '角标', ext: '.png', type: 'img' }],
// 是否显示购买按钮

View File

@ -32,6 +32,7 @@ interface DefaultProductList {
tabs_active_index: number;
static_img: uploadList[];
is_show: string[];
simple_desc_row: string;
is_shop_show: string;
is_price_solo: string;
shop_type: string;
@ -148,6 +149,8 @@ const defaultProductList: DefaultProductList = {
static_img: [{ id: 2, url: new_url + 'price.png', original: '角标', title: '角标', ext: '.png', type: 'img' }],
// 显示内容
is_show: ['title', 'plugins_view_icon', 'price', 'sales_count', 'original_price'],
// 显示简介行数
simple_desc_row: '1',
// 是否显示购买按钮
is_shop_show: '1',
// 价格是否独行