问题修复
parent
d0b5bda8bd
commit
abb16dd6e7
|
|
@ -4,9 +4,9 @@
|
|||
<div class="re oh" :style="style">
|
||||
<div v-if="!['4'].includes(article_theme)" class="flex-warp" :class="article_theme_class" :style="article_theme != '3' ? article_spacing : ''">
|
||||
<div v-for="(item, index) in data_list" :key="index" class="item oh" :style="article_style">
|
||||
<div :class="article_theme == '0' ? 'flex-row oh' : 'flex-col oh'" :style="article_img_style">
|
||||
<div :class="article_theme == '0' ? 'flex-row oh' : 'flex-col oh h'" :style="article_img_style">
|
||||
<template v-if="article_theme != '3'">
|
||||
<div class="oh re w h">
|
||||
<div class="oh re">
|
||||
<template v-if="item.new_cover.length > 0">
|
||||
<image-empty v-model="item.new_cover[0].url" class="img" :style="img_radius" :error-img-style="error_img"></image-empty>
|
||||
</template>
|
||||
|
|
@ -17,9 +17,9 @@
|
|||
<subscript-index :value="props.value"></subscript-index>
|
||||
</div>
|
||||
</template>
|
||||
<div class="jc-sb flex-1" :class="article_theme == '3' ? 'flex-row align-c' : 'flex-col'" :style="article_theme != '0' ? content_padding : 'width: 0;'">
|
||||
<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 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('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>
|
||||
<div class="flex-row jc-sb gap-8" :class="article_theme == '3' ? 'ml-10' : 'align-e mt-10'">
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
<swiper :key="carousel_key" class="w flex" direction="horizontal" :loop="true" :autoplay="autoplay" :slides-per-view="Number(carousel_col) + 1" :slides-per-group="slides_per_group" :allow-touch-move="false" :space-between="new_style.article_spacing" :pause-on-mouse-enter="true" :modules="modules">
|
||||
<swiper-slide v-for="(item, index) in data_list" :key="index" class="item oh" :style="article_style">
|
||||
<div class="h oh flex-col" :style="article_img_style">
|
||||
<div class="oh re w h">
|
||||
<div class="oh re h">
|
||||
<template v-if="item.new_cover.length > 0">
|
||||
<image-empty v-model="item.new_cover[0].url" class="img" :style="img_radius" :error-img-style="error_img"></image-empty>
|
||||
</template>
|
||||
|
|
@ -49,9 +49,9 @@
|
|||
<!-- 角标设置 -->
|
||||
<subscript-index :value="props.value"></subscript-index>
|
||||
</div>
|
||||
<div class="jc-sb flex-1 flex-col" :style="article_theme != '0' ? content_padding : ''">
|
||||
<div v-if="field_show.includes('0') || field_show.includes('1') || field_show.includes('2') || field_show.includes('3')" 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 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('3')" 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>
|
||||
<div class="flex-row jc-sb gap-8 align-e mt-10">
|
||||
|
|
@ -241,7 +241,7 @@ const article_name_line_height_computer = computed(() => {
|
|||
});
|
||||
// 轮播高度
|
||||
const carousel_height_computer = computed(() => {
|
||||
return new_style.value.name_size * 2 + new_style.value.article_height + 'px';
|
||||
return new_style.value.article_height + 'px';
|
||||
});
|
||||
|
||||
const theme_list = [
|
||||
|
|
@ -414,7 +414,7 @@ const article_theme_class = computed(() => {
|
|||
height: v-bind(carousel_height_computer);
|
||||
.img {
|
||||
width: 100%;
|
||||
max-height: v-bind(article_item_height);
|
||||
height: 100%;
|
||||
}
|
||||
.title {
|
||||
height: v-bind(article_name_height_computer);
|
||||
|
|
|
|||
|
|
@ -103,6 +103,7 @@ const base_list = reactive({
|
|||
{ name: '升序(asc)', value: '1' },
|
||||
],
|
||||
field_show_list: [
|
||||
{ name: '文章标题', value: '3' },
|
||||
{ name: '日期时间', value: '0' },
|
||||
{ name: '浏览量', value: '1' },
|
||||
{ name: '描述', value: '2' },
|
||||
|
|
@ -130,9 +131,9 @@ onMounted(() => {
|
|||
// 主题改变
|
||||
const theme_change = (val: any) => {
|
||||
if (val == '3' || val == '4') {
|
||||
form.value.field_show = ['1'];
|
||||
form.value.field_show = ['1', '3'];
|
||||
} else {
|
||||
form.value.field_show = ['0', '1'];
|
||||
form.value.field_show = ['0', '1', '3'];
|
||||
}
|
||||
if (val == '0') {
|
||||
if (data.value.img_radius.radius == props.defaultConfig.img_radius_0 || (data.value.img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && data.value.img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && data.value.img_radius.radius_top_left == props.defaultConfig.img_radius_1 && data.value.img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
|
||||
|
|
|
|||
|
|
@ -133,6 +133,7 @@ const base_list = reactive({
|
|||
{ name: '升序(asc)', value: '1' },
|
||||
],
|
||||
field_show_list: [
|
||||
{ name: '文章标题', value: '3' },
|
||||
{ name: '日期时间', value: '0' },
|
||||
{ name: '浏览量', value: '1' },
|
||||
{ name: '描述', value: '2' },
|
||||
|
|
@ -159,9 +160,9 @@ onMounted(() => {
|
|||
// 监听tabs_theme_list的变化
|
||||
const article_theme_change = (val: any) => {
|
||||
if (val == '3' || val == '4') {
|
||||
form.field_show = ['1'];
|
||||
form.field_show = ['1', '3'];
|
||||
} else {
|
||||
form.field_show = ['0', '1'];
|
||||
form.field_show = ['0', '1', '3'];
|
||||
}
|
||||
if (val == '0') {
|
||||
if (styles.img_radius.radius == props.defaultConfig.img_radius_0 || (styles.img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && styles.img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && styles.img_radius.radius_top_left == props.defaultConfig.img_radius_1 && styles.img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
|
||||
|
|
|
|||
|
|
@ -141,7 +141,11 @@ watchEffect(() => {
|
|||
}
|
||||
// 判断是平移还是整屏滚动
|
||||
slides_per_group.value = new_style.value.rolling_fashion == 'translation' ? 1 : form.value.data_source_carousel_col;
|
||||
const num = new_style.value.rolling_fashion == 'translation' ? data_source_content_list.value.length : Math.ceil(data_source_content_list.value.length / form.value.data_source_carousel_col);
|
||||
let num = 0;
|
||||
// 轮播图数量
|
||||
if (!isEmpty(data_source_content_list.value)) {
|
||||
num = new_style.value.rolling_fashion == 'translation' ? data_source_content_list.value.length : Math.ceil(data_source_content_list.value.length / form.value.data_source_carousel_col);
|
||||
}
|
||||
const { padding_top, padding_bottom, margin_bottom, margin_top } = new_style.value.data_style;
|
||||
// 轮播图高度控制
|
||||
if (form.value.data_source_direction == '2') {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div ref="card_container" class="w h oh" :style="props.type === 'img' ? '' : style_container">
|
||||
<div class="w re oh" :style="style_2_container">
|
||||
<div class="w h re oh" :style="props.type === 'img' ? `height: ${ outer_height }px;` : `height: ${ outer_height }px;${ style_img_container }`">
|
||||
<swiper :key="form.data_style.carouselKey" class="w flex" :direction="form.data_style.rotation_direction" :loop="true" :autoplay="autoplay" :slides-per-view="slides_per_view" :slides-per-group="1" :space-between="props.type === 'img' ? 0 : form.data_style.data_goods_gap" :allow-touch-move="false" :pause-on-mouse-enter="true" :modules="modules" @slide-change="slideChange">
|
||||
<swiper-slide v-for="(item1, index1) in form.data_content.list" :key="index1">
|
||||
<template v-if="props.type === 'img' && !isEmpty(item1.carousel_img)">
|
||||
<template v-if="props.type === 'img'">
|
||||
<image-empty v-model="item1.carousel_img[0]" :style="form.data_style.get_img_radius" :fit="form.data_content.img_fit"></image-empty>
|
||||
</template>
|
||||
<template v-else>
|
||||
|
|
@ -28,7 +28,6 @@ interface Props {
|
|||
type: string;
|
||||
actived: number;
|
||||
goodStyle?: any;
|
||||
isUnlimitedSize?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
|
|
@ -76,11 +75,6 @@ const card_container = ref<HTMLElement | null>(null);
|
|||
const outer_height = ref(0);
|
||||
// 不拆分数据的时候为1,让商品内容在内部铺满/拆分数据的时候,为一屏显示数量,用于商品内部处理显示
|
||||
const show_num = ref(0);
|
||||
const style_2_container = computed(() => {
|
||||
const style_actived_style = props.type === 'img' ? `height: ${ outer_height.value }px;` : `height: ${ outer_height.value }px;${ style_img_container.value }`;
|
||||
const style = props.isUnlimitedSize ? 'height: 100%;' : style_actived_style;
|
||||
return style;
|
||||
});
|
||||
// 内容参数的集合
|
||||
watchEffect(() => {
|
||||
// 是否滚动
|
||||
|
|
@ -115,15 +109,12 @@ watchEffect(() => {
|
|||
slides_per_view.value = 1; // 能够同时显示的slides数量
|
||||
}
|
||||
}
|
||||
// 不是不限尺寸的时候的处理
|
||||
if (!props.isUnlimitedSize) {
|
||||
nextTick(() => {
|
||||
// 外层高度
|
||||
if (card_container.value) {
|
||||
outer_height.value = card_container.value?.clientHeight;
|
||||
}
|
||||
});
|
||||
}
|
||||
nextTick(() => {
|
||||
// 外层高度
|
||||
if (card_container.value) {
|
||||
outer_height.value = card_container.value?.clientHeight;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
|
||||
</template>
|
||||
</div>
|
||||
<div v-if="!isEmpty(isShow)" class="flex-col w tl jc-sb" :style="`width: ${ 100 - image_scale }%;`">
|
||||
<div v-if="!isEmpty(isShow)" class="flex-col w h tl jc-sb" :style="`width: ${ 100 - image_scale }%;`">
|
||||
<div v-if="isShow.includes('title')" class="text-line-2 size-14" :style="props.goodStyle.goods_title_style + `height: ${ (props.goodStyle.goods_title_size + 3) * 2 }px;`">{{ item.title }}</div>
|
||||
<div v-if="isShow.includes('price')" class="identifying" :style="props.goodStyle.goods_price_style">
|
||||
<span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
<el-radio-group v-model="form.goods_flex">
|
||||
<el-radio value="row">左图右文</el-radio>
|
||||
<el-radio value="col">上图下文</el-radio>
|
||||
<el-radio value="col_price_float">上图下文<span class="size-8">(价格浮动)</span></el-radio>
|
||||
<el-radio value="col_price_float">上图下文<span class="col-price-style size-8">(价格浮动)</span></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="每屏数量">
|
||||
|
|
@ -204,6 +204,9 @@ const url_value_dialog_call_back = (item: any[]) => {
|
|||
width: 100%;
|
||||
height: 12.4rem;
|
||||
}
|
||||
.col-price-style {
|
||||
color: red;
|
||||
}
|
||||
:deep(.el-checkbox-group .el-checkbox) {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,14 +20,14 @@
|
|||
</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>
|
||||
</div>
|
||||
<div class="w h">
|
||||
<magic-carousel :value="item" :good-style="item.data_style" :actived="form.style_actived" type="product" @carousel_change="carousel_change(index, $event)"></magic-carousel>
|
||||
<div class="w h flex-1">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="item.data_content.data_type == 'images'">
|
||||
<div class="w h" :style="`${ padding_computer(item.data_style.chunk_padding) }`">
|
||||
<magic-carousel :value="item" type="img" :actived="form.style_actived" @carousel_change="carousel_change(index, $event)"></magic-carousel>
|
||||
<magic-carousel :key="form.style_actived" :value="item" type="img" :actived="form.style_actived" @carousel_change="carousel_change(index, $event)"></magic-carousel>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="item.data_content.data_type == 'custom'">
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div v-for="(item, index) in data_magic_list" :key="index" :class="['img-spacing-border', is_unlimited_size ? '' : ' cube-selected']" :style="`${ selected_style(item) } ${ item.data_style.background_style } ${ content_radius }`">
|
||||
<div v-for="(item, index) in data_magic_list" :key="index" class="img-spacing-border cube-selected" :style="`${ selected_style(item) } ${ item.data_style.background_style } ${ content_radius }`">
|
||||
<div class="w h re" :style="`${ item.data_style.background_img_style }`">
|
||||
<template v-if="item.data_content.data_type == 'goods'">
|
||||
<div class="w h flex-col" :style="`${ padding_computer(item.data_style.chunk_padding) };gap: ${ item.data_style.title_data_gap }px;`">
|
||||
|
|
@ -67,13 +67,13 @@
|
|||
<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>
|
||||
</div>
|
||||
<div class="w h flex-1">
|
||||
<magic-carousel :value="item" :good-style="item.data_style" type="product" :actived="form.style_actived" :is-unlimited-size="is_unlimited_size" @carousel_change="carousel_change(index, $event)"></magic-carousel>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="item.data_content.data_type == 'images'">
|
||||
<div class="w h" :style="`${ padding_computer(item.data_style.chunk_padding) }`">
|
||||
<magic-carousel :value="item" type="img" :actived="form.style_actived" :is-unlimited-size="is_unlimited_size" @carousel_change="carousel_change(index, $event)"></magic-carousel>
|
||||
<magic-carousel :key="form.style_actived" :value="item" type="img" :actived="form.style_actived" @carousel_change="carousel_change(index, $event)"></magic-carousel>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="item.data_content.data_type == 'custom'">
|
||||
|
|
@ -134,9 +134,9 @@ const div_width = ref(390);
|
|||
// 如果容器高度为空,则取容器宽度
|
||||
const container_height = computed(() => is_number(form.value.container_height) ? form.value.container_height : div_width.value);
|
||||
// 是否不限尺寸
|
||||
const is_unlimited_size = computed(() => form.value.style_actived === 9 && form.value.limit_size == '0');
|
||||
// const is_unlimited_size = computed(() => form.value.style_actived === 9 && form.value.limit_size == '0');
|
||||
|
||||
const container_size = computed(() => is_unlimited_size.value ? '100%' : container_height.value + 'px');
|
||||
const container_size = computed(() => container_height.value + 'px');
|
||||
//#endregion
|
||||
//#region 图片位置计算
|
||||
//计算选中层的宽度。
|
||||
|
|
|
|||
|
|
@ -10,22 +10,15 @@
|
|||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<template v-if="form.style_actived == 9">
|
||||
<el-form-item label="限制尺寸" label-width="60">
|
||||
<el-switch v-model="form.limit_size" active-value="1" inactive-value="0" @change="handleResize"/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="form.style_actived !== 9 || form.limit_size == '1'">
|
||||
<el-form-item label="容器高度" label-width="60">
|
||||
<slider v-model="form.container_height" :min="30" :max="1000" @update:model-value="handleResize"></slider>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<el-form-item label="容器高度" label-width="60">
|
||||
<slider v-model="form.container_height" :min="30" :max="1000" @update:model-value="handleResize"></slider>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
<div class="bg-f5 divider-line" />
|
||||
<card-container>
|
||||
<div class="mb-12 flex-row jc-sb align-c">
|
||||
展示设置
|
||||
<template v-if="form.style_actived === 10">
|
||||
<template v-if="form.style_actived === 9">
|
||||
<el-radio-group v-model="form.magic_cube_density" @change="density_change">
|
||||
<el-radio-button label="4X4" :value="4" />
|
||||
<el-radio-button label="6X6" :value="6" />
|
||||
|
|
@ -47,7 +40,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<magic-cube :key="form.style_actived" :list="form.data_magic_list" :flag="form.style_actived == 10" :magic-cube-density="form.magic_cube_density" :cube-width="cubeWidth" type="data" :cube-height="cubeHeight" :default-content="data_content" :default-style="data_style" @selected_click="selected_click"></magic-cube>
|
||||
<magic-cube :key="form.style_actived" :list="form.data_magic_list" :flag="form.style_actived == 9" :magic-cube-density="form.magic_cube_density" :cube-width="cubeWidth" type="data" :cube-height="cubeHeight" :default-content="data_content" :default-style="data_style" @selected_click="selected_click"></magic-cube>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
|
|
@ -76,7 +69,7 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
// 风格数组
|
||||
const style_list = ['heng2', 'shu2', 'shang2xia1', 'shang1xia2', 'zuo1you2', 'zuo2you1', 'tianzige', 'shang2xia3', 'zuo1youshang1youxia2', 'a-1ge', 'a-4x4'];
|
||||
const style_list = ['heng2', 'shu2', 'shang2xia1', 'shang1xia2', 'zuo1you2', 'zuo2you1', 'tianzige', 'shang2xia3', 'zuo1youshang1youxia2', 'a-4x4'];
|
||||
// 每个小模块独立的样式
|
||||
const data_style = {
|
||||
color_list: [{ color: '#FFD9C3', color_percentage: 0 }, { color: '#FFECE2', color_percentage: 12 }, { color: '#FFFFFF', color_percentage: 30 }],
|
||||
|
|
@ -241,8 +234,7 @@ const style_show_list = [
|
|||
[{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 1, y: 3}, end: {x: 2, y: 4}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 3, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }],// 风格7
|
||||
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 3, y: 3}, end: {x: 3, y: 4}, num: 1, flex: 'col', outerflex: 'col', title_text_gap: 20, width: 130 }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col', outerflex: 'col', title_text_gap: 20, width: 130 }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col', outerflex: 'col', title_text_gap: 20, width: 130 }],// 风格8
|
||||
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20, width: 195 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 3, y: 3}, end: {x: 3, y: 4}, num: 1, flex: 'col_price_float', outerflex: 'col', title_text_gap: 10, width: 98 }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col_price_float', outerflex: 'col', title_text_gap: 10, width: 98 }],// 风格9
|
||||
[{ start: {x: 1, y: 1}, end: {x: 4, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20, width: 390 }],// 风格10
|
||||
[], //风格11
|
||||
[], //风格10
|
||||
]
|
||||
const tabs_name = ref('content');
|
||||
const state = reactive({
|
||||
|
|
@ -291,7 +283,7 @@ const selected_active = ref(0);
|
|||
// 切换风格
|
||||
const style_click = (index: number) => {
|
||||
form.value.style_actived = index;
|
||||
if (index !== 10) {
|
||||
if (index !== 9) {
|
||||
form.value.magic_cube_density = 4;
|
||||
form.value.data_magic_list = magic_list(index);
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ interface nav_group_styles {
|
|||
indicator_location: string;
|
||||
indicator_size: number;
|
||||
indicator_radius: radiusStyle;
|
||||
data_padding: paddingStyle;
|
||||
actived_color: string;
|
||||
color: string;
|
||||
title_color: string;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="re" :style="style_img_container">
|
||||
<swiper :key="carouselKey" class="w flex" direction="horizontal" :loop="true" :autoplay="autoplay" :slides-per-view="slides_per_view" :slides-per-group="1" :allow-touch-move="false" :pause-on-mouse-enter="true" :modules="modules" @slide-change="slideChange">
|
||||
<swiper-slide v-for="(item, index) in nav_content_list" :key="index">
|
||||
<div ref="bannerImg" class="flex flex-wrap" :style="nav_space">
|
||||
<div ref="bannerImg" class="flex flex-wrap" :style="nav_space + inner_padding">
|
||||
<div v-for="(item1, index1) in item.split_list" :key="index1" class="item flex-col align-c" :style="nav_title_space">
|
||||
<div v-if="['image_with_text', 'image'].includes(nav_style)" class="top-img flex align-c jc-c re">
|
||||
<image-empty v-model="item1.img[0]" :style="img_style"></image-empty>
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { common_styles_computer, radius_computer, get_math, common_img_computer } from '@/utils';
|
||||
import { common_styles_computer, radius_computer, get_math, common_img_computer, padding_computer } from '@/utils';
|
||||
import { isEmpty, cloneDeep, throttle } from 'lodash';
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue';
|
||||
import { Autoplay } from 'swiper/modules';
|
||||
|
|
@ -115,7 +115,9 @@ const indicator_location_style = computed(() => {
|
|||
});
|
||||
//#endregion
|
||||
// 导航间距
|
||||
const nav_space = computed(() => 'row-gap:' + (new_style.value?.space || '0') + 'px');
|
||||
const nav_space = computed(() => `row-gap:${ new_style.value?.space || '0' }px;`);
|
||||
// 轮播内边距
|
||||
const inner_padding = computed(() => padding_computer(new_style.value.data_padding));
|
||||
// 导航标题间距
|
||||
const nav_title_space = computed(() => 'row-gap:' + (new_style.value?.title_space || '0') + 'px');
|
||||
// 获取轮播图片的节点
|
||||
|
|
@ -240,6 +242,5 @@ const slideChange = (swiper: { realIndex: number }) => {
|
|||
}
|
||||
:deep(.swiper) {
|
||||
height: v-bind(newHeight);
|
||||
overflow: unset !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -54,6 +54,13 @@
|
|||
<slider v-model="form.title_size" :max="100"></slider>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
<div class="divider-line"></div>
|
||||
<card-container>
|
||||
<div class="mb-12">数据样式</div>
|
||||
<el-form-item label="内边距">
|
||||
<padding :value="form.data_padding"></padding>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
<!-- 角标 -->
|
||||
<template v-if="data_content.seckill_subscript_show == '1'">
|
||||
<div class="divider-line"></div>
|
||||
|
|
@ -93,6 +100,13 @@ const props = withDefaults(defineProps<Props>(), {
|
|||
radius_bottom_left: 0,
|
||||
radius_bottom_right: 0,
|
||||
},
|
||||
data_padding: {
|
||||
padding: 0,
|
||||
padding_top: 0,
|
||||
padding_right: 0,
|
||||
padding_bottom: 0,
|
||||
padding_left: 0,
|
||||
},
|
||||
actived_color: '#2A94FF',
|
||||
color: '#DDDDDD',
|
||||
title_color: '#000',
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ const defaultArticleList: DefaultArticleList = {
|
|||
number: defaultSetting.page_size,
|
||||
order_by_type: defaultSetting.order_by_type,
|
||||
order_by_rule: defaultSetting.order_by_rule,
|
||||
field_show: ['0', '1'],
|
||||
field_show: ['0', '1', '3'],
|
||||
is_cover: defaultSetting.is_cover,
|
||||
// 角标配置
|
||||
seckill_subscript_show: '0',
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ const defaultArticleTabs: DefaultArticleTabs = {
|
|||
{ id: '6', title: '测试五', desc: '简介', data_type: '0', keyword: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
|
||||
],
|
||||
tabs_active_index: 0,
|
||||
field_show: ['0', '1'],
|
||||
field_show: ['0', '1', '3'],
|
||||
// 角标配置
|
||||
seckill_subscript_show: '0',
|
||||
subscript_type: 'text',
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ interface defaultSearch {
|
|||
magic_cube_density: number;
|
||||
style_actived: number;
|
||||
container_height: number;
|
||||
limit_size: string;
|
||||
// limit_size: string;
|
||||
data_magic_list: data_magic[];
|
||||
};
|
||||
style: {
|
||||
|
|
@ -30,7 +30,7 @@ const defaultSearch: defaultSearch = {
|
|||
// 容器高度
|
||||
container_height: 390,
|
||||
// 是否限制尺寸
|
||||
limit_size: '1',
|
||||
// limit_size: '1',
|
||||
// 数据列表
|
||||
data_magic_list: [],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@ interface defaultSearch {
|
|||
indicator_location: string;
|
||||
indicator_size: number;
|
||||
indicator_radius: radiusStyle;
|
||||
data_padding: paddingStyle;
|
||||
actived_color: string;
|
||||
color: string;
|
||||
title_color: string;
|
||||
|
|
@ -121,6 +122,13 @@ const defaultSearch: defaultSearch = {
|
|||
radius_bottom_left: 4,
|
||||
radius_bottom_right: 4,
|
||||
},
|
||||
data_padding: {
|
||||
padding: 0,
|
||||
padding_top: 0,
|
||||
padding_bottom: 0,
|
||||
padding_left: 0,
|
||||
padding_right: 0,
|
||||
},
|
||||
actived_color: '#2A94FF',
|
||||
color: '#DDDDDD',
|
||||
// 标题样式
|
||||
|
|
|
|||
Loading…
Reference in New Issue