diff --git a/src/components/model-article-list/index.vue b/src/components/model-article-list/index.vue index c3c15d53..2c0e6a8c 100644 --- a/src/components/model-article-list/index.vue +++ b/src/components/model-article-list/index.vue @@ -10,7 +10,7 @@ -
+
{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}
{{ item.data.describe || '' }}
@@ -118,7 +118,7 @@ const content_padding = ref(''); const content_spacing = ref(''); // 文章间距 const article_spacing = ref(''); -const article_item_height = ref('183'); +const article_item_height = ref('155'); const article_style = ref({}); const default_data_list: ArticleList = { @@ -229,7 +229,43 @@ const article_name_line_height_computer = computed(() => { return new_style.value.name_size * 1.2 + 'px'; }); // 轮播高度 -const carousel_height_computer = computed(() => new_style.value.article_height + 'px'); +const carousel_height_computer = computed(() => { + return new_style.value.name_size * 2 + new_style.value.article_height + 'px'; +}); + +const theme_list = [ + { name: '单列展示', value: '0', width:110, height: 83 }, + { name: '两列展示(纵向)', value: '1', width:180, height: 180 }, + { name: '大图展示', value: '2', width:0, height: 180 }, + { name: '无图模式', value: '3', width:0, height: 0 }, + { name: '左右滑动展示', value: '4', width:0, height: 0 }, +] +// 宽度和高度为空的时候,修改默认值 +const article_img_width = computed(() => { + if (typeof new_style.value.content_img_width == 'number') { + return new_style.value.content_img_width + 'px'; + } else { + const list = theme_list.filter(item => item.value == new_content.value.theme); + if (list.length > 0) { + return list[0].width + 'px'; + } else { + return 'auto'; + } + } +}); +// 宽度和高度为空的时候,修改默认值 +const article_img_height = computed(() => { + if (typeof new_style.value.content_img_height == 'number') { + return new_style.value.content_img_height + 'px'; + } else { + const list = theme_list.filter(item => item.value == new_content.value.theme); + if (list.length > 0) { + return list[0].height + 'px'; + } else { + return 'auto'; + } + } +}); // 监听value数据变化 watch( () => props.value, @@ -325,23 +361,27 @@ const article_carousel_list = computed(() => { .style1 { .item { width: 100%; - height: v-bind(carousel_height_computer); .img { - height: 100%; - width: 11rem; + height: v-bind(article_img_height); + width: v-bind(article_img_width); } } } .style2 { .item { width: calc(50% - 0.5rem); - height: v-bind(carousel_height_computer); + .img { + height: v-bind(article_img_height); + } } } .style3 { .item { width: 100%; - height: v-bind(carousel_height_computer); + .img { + width: 100%; + height: v-bind(article_img_height); + } } } .style4 { @@ -356,7 +396,6 @@ const article_carousel_list = computed(() => { .item { width: v-bind(multicolumn_columns_width); min-width: v-bind(multicolumn_columns_width); - height: v-bind(carousel_height_computer); .img { width: 100%; max-height: v-bind(article_item_height); diff --git a/src/components/model-article-list/model-article-list-content.vue b/src/components/model-article-list/model-article-list-content.vue index e3be9326..45df150d 100644 --- a/src/components/model-article-list/model-article-list-content.vue +++ b/src/components/model-article-list/model-article-list-content.vue @@ -102,11 +102,11 @@ const state = reactive({ const { form, data } = toRefs(state); const base_list = reactive({ theme_list: [ - { name: '单列展示', value: '0', height: 103 }, - { name: '两列展示(纵向)', value: '1', height: 245 }, - { name: '大图展示', value: '2', height: 245 }, - { name: '无图模式', value: '3', height: 0 }, - { name: '左右滑动展示', value: '4', height: 183 }, + { name: '单列展示', value: '0', width:110, height: 83 }, + { name: '两列展示(纵向)', value: '1', width:180, height: 180 }, + { name: '大图展示', value: '2', width:0, height: 180 }, + { name: '无图模式', value: '3', width:0, height: 0 }, + { name: '左右滑动展示', value: '4', width:0, height: 0 }, ], carousel_col_list: [ { name: '单列展示', value: '0' }, @@ -144,10 +144,12 @@ onMounted(() => { } }); // 如果历史数据没有操作,则修改默认值 - if (data.value.article_height == 155 && form.value.theme != '4') { + const { content_img_width = '', content_img_height = '' } = data.value; + // 宽度和高度为空的时候,并且不是无图模式和左右滑动模式的时候,修改默认值 + if ((typeof content_img_width != 'number' || typeof content_img_height != 'number') && !['3', '4'].includes(form.value.theme)) { const list = base_list.theme_list.filter(item => item.value == form.value.theme); if (list.length > 0) { - emits('theme_change', list[0].height); + emits('theme_change', list[0].width, list[0].height); } } }); @@ -175,9 +177,10 @@ const theme_change = (val: any) => { data.value.img_radius.radius_top_right = props.defaultConfig.img_radius_1; } } - const list = base_list.theme_list.filter(item => item.value == val); + // 切换风格时,将对应图片的默认值宽度和高度赋值 + const list = base_list.theme_list.filter(item => item.value == form.value.theme); if (list.length > 0) { - emits('theme_change', list[0].height); + emits('theme_change', list[0].width, list[0].height); } }; // 移除 diff --git a/src/components/model-article-list/model-article-list-setting.vue b/src/components/model-article-list/model-article-list-setting.vue index dda1ff74..5db382da 100644 --- a/src/components/model-article-list/model-article-list-setting.vue +++ b/src/components/model-article-list/model-article-list-setting.vue @@ -30,9 +30,9 @@ const data_config = reactive({ img_radius_1: 0, }); const form = ref(props.value); -const theme_change = (val: number) => { - if (val) { - form.value.style.article_height = val; - } + +const theme_change = (width: number, height: number) => { + form.value.style.content_img_width = width; + form.value.style.content_img_height = height; }; diff --git a/src/components/model-article-list/model-article-list-styles.vue b/src/components/model-article-list/model-article-list-styles.vue index b22ba3fa..f0294334 100644 --- a/src/components/model-article-list/model-article-list-styles.vue +++ b/src/components/model-article-list/model-article-list-styles.vue @@ -40,7 +40,15 @@ -