sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

数据魔方支持自定义显示

v1.1.0
于肖磊 2024-11-06 14:49:25 +08:00
parent dbc76ff97d
commit 383df6a3b0
9 changed files with 174 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/common/magic-cube/index.vue
View File

@ -188,11 +188,13 @@ const onClickCubeItem = (event: any) => {
let selectedItem = {} as CubeItem;
//加入选中的。
if (props.type == 'data') {
console.log(props.defaultContent);
selectedItem = {
start: selectingItem.start,
end: selectingItem.end,
data_content: cloneDeep(props.defaultContent),
data_content: {
...cloneDeep(props.defaultContent),
width: Math.round((props.cubeWidth / densityNum.value) * (selectingItem.end.x - selectingItem.start.x + 1))
},
data_style: cloneDeep(props.defaultStyle),
};
} else {
@ -262,12 +264,12 @@ const selected_click = (index: number) => {
emits('selected_click', index);
};
const data_title = (item: CubeItem) => {
let title = `共有`;
let title = '';
if (item.data_content) {
if (item.data_content.data_type == 'goods') {
title += `${ item.data_content.goods_list.length }个商品`;
} else {
title += `${ item.data_content.images_list.length }个图片`;
title = `共有${ item.data_content.goods_list.length }个商品`;
} else if (item.data_content.data_type == 'images') {
title = `共有${ item.data_content.images_list.length }个图片`;
}
}
return title;
@ -324,6 +326,7 @@ const data_title = (item: CubeItem) => {
}
.cube-selected-text {
font-size: 12px;
line-height: 16px;
width: 100%;
position: absolute;
top: 50%;

6
src/components/model-custom/components/index.vue
View File

@ -389,7 +389,11 @@ const cancel = () => {
//#endregion
//#region 容器高度发生变化时的处理
const center_height = defineModel('height', { type: Number, default: 0 });
const center_width = defineModel('width', { type: Number, default: 390 });
const drag_area_height = computed(() => center_height.value + 'px');
const drag_area_width = computed(() => center_width.value + 'px');
const draggable_container = ref(true);
let data = reactive<diy_content[]>([]);
watch(() => center_height.value, () => {
@ -861,7 +865,7 @@ defineExpose({
.model-drag {
overflow-y: scroll;
.model-wall {
width: 39rem;
width: v-bind(drag_area_width);
background-image: linear-gradient(45deg, #e5e5e5 25%, transparent 25%), linear-gradient(135deg, #e5e5e5 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e5e5e5 75%), linear-gradient(135deg, transparent 75%, #e5e5e5 75%);
background-size: 32px 32px;
background-position: 0 0, 16px 0, 16px -16px, 0 16px;

7
src/components/model-custom/model-custom-content.vue
View File

@ -22,7 +22,7 @@
<Dialog ref="dialog" @accomplish="accomplish">
<div class="flex-row h w">
<!-- 左侧和中间区域 -->
<DragIndex ref="draglist" :key="dragkey" v-model:height="center_height" :source-list="form.data_source_content" :list="custom_list" @right-update="right_update"></DragIndex>
<DragIndex ref="draglist" :key="dragkey" v-model:height="center_height" v-model:width="center_width" :source-list="form.data_source_content" :list="custom_list" @right-update="right_update"></DragIndex>
<!-- 右侧配置区域 -->
<div class="settings">
<template v-if="diy_data.key === 'img'">
@ -64,11 +64,16 @@ const props = defineProps({
type: Object,
default: () => {},
},
magicWidth: {
type: Number,
default: 390,
}
});
const dialog = ref<expose | null>(null);
const draglist = ref<diy_data | null>(null);
const form = reactive(props.value);
const center_width = ref(props.magicWidth);
// 弹出框里的内容
let custom_list = reactive([]);
const center_height = ref(0);

72
src/components/model-data-magic/components/custom/index.vue Normal file
View File

@ -0,0 +1,72 @@
<template>
<div class="w h oh" :style="style_container">
<div class="w h re custom-other oh">
<div v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x) , 'top': percentage_count(item.location.y), 'width': percentage_count(item.com_data.com_width), 'height': percentage_count(item.com_data.com_height), 'z-index': (form.custom_list.length - 1) - index}">
<template v-if="item.key == 'text'">
<model-text :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content" :is-percentage="true"></model-text>
</template>
<template v-else-if="item.key == 'img'">
<model-image :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content" :is-percentage="true"></model-image>
</template>
<template v-else-if="item.key == 'auxiliary-line'">
<model-lines :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content" :is-percentage="true"></model-lines>
</template>
<template v-else-if="item.key == 'icon'">
<model-icon :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content" :is-percentage="true"></model-icon>
</template>
<template v-else-if="item.key == 'panel'">
<model-panel :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content" :is-percentage="true"></model-panel>
</template>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { padding_computer } from '@/utils';
const props = defineProps({
value: {
type: Object,
default: () => {
return {};
},
},
magicScale: {
type: Number,
default: 1,
},
dataSpacing: {
type: Number,
default: 0,
}
});
// 用于页面判断显示
const state = reactive({
form: props.value.data_content,
new_style: props.value.data_style,
});
// 如果需要解构，确保使用toRefs
const { form, new_style } = toRefs(state);
const scale = ref(1);
const percentage_count = (val: number) => {
return val * scale.value + 'px';
};
// 公共样式
const style_container = computed(() => padding_computer(new_style.value.chunk_padding));
watchEffect(() => {
// 重新赋值
form.value = props.value.data_content;
new_style.value = props.value.data_style;
const { padding_left, padding_right } = new_style.value.chunk_padding;
// 当前容器的宽度 减去 左右两边的padding值 再减去 数据间距的一半 再除以 容器的宽度 得到比例 再乘以数据魔方的比例
const width = form.value.width - padding_left - padding_right - (props.dataSpacing / 2);
scale.value = (width / form.value.width) * props.magicScale;
})
</script>
<style lang="scss" scoped>
.main-content {
position: absolute;
overflow: hidden;
}
</style>

6
src/components/model-data-magic/components/product-list-show.vue
View File

@ -23,7 +23,7 @@
</div>
</div>
</template>
<template v-else-if="props.flex == 'col'">
<template v-else-if="props.flex == 'col_price_float'">
<div v-for="(item, index) in split_list" :key="index" :style="block_size">
<div class="w h oh" :style="style_container(props.goodStyle)">
<div class="w h flex-col gap-10" :style="style_img_container(props.goodStyle)">
@ -49,7 +49,7 @@
<template v-else>
<div v-for="(item, index) in split_list" :key="index" :style="block_size">
<div class="w h oh" :style="style_container(props.goodStyle)">
<div class="w h flex-col" :style="style_img_container(props.goodStyle, 'fill')">
<div class="w h flex-col" :style="style_img_container(props.goodStyle, 'col')">
<template v-if="!isEmpty(item.new_cover)">
<image-empty v-model="item.new_cover[0]" :style="contentImgRadius"></image-empty>
</template>
@ -130,7 +130,7 @@ const style_img_container = computed(() => {
background_img: goods_background_img,
background_img_style: goods_background_img_style,
}
return type == 'fill' ? background_computer(data) : padding_computer(goods_chunk_padding) + background_computer(data);
return type == 'col' ? background_computer(data) : padding_computer(goods_chunk_padding) + background_computer(data);
} else {
return '';
}

21
src/components/model-data-magic/components/tabs-content.vue
View File

@ -35,8 +35,8 @@
<el-form-item label="内容排列">
<el-radio-group v-model="form.goods_flex">
<el-radio value="row">左图右文</el-radio>
<el-radio value="fill">上图下文</el-radio>
<el-radio value="col">上图下文<span class="size-8">(价格浮动)</span></el-radio>
<el-radio value="col">上图下文</el-radio>
<el-radio value="col_price_float">上图下文<span class="size-8">(价格浮动)</span></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="每屏数量">
@ -73,7 +73,7 @@
<el-button class="mt-20 mb-20 w" @click="img_add">+添加</el-button>
</card-container>
</template>
<template v-else>
<template v-else-if="form.data_type == 'goods'">
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">商品设置</div>
@ -87,6 +87,17 @@
<url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['goods']" :multiple="url_value_multiple_bool" @update:model-value="url_value_dialog_call_back"></url-value-dialog>
</card-container>
</template>
<template v-else-if="form.data_type == 'custom'">
<div class="bg-f5 divider-line" />
<model-custom-content :value="form" :magic-width="form.width"></model-custom-content>
</template>
<template v-else>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">视频设置</div>
</card-container>
</template>
</template>
<script setup lang="ts">
import { get_math } from '@/utils';
@ -96,10 +107,6 @@ const props = defineProps({
value: {
type: Object,
default: () => {},
},
isShowTitle: {
type: Boolean,
default: true,
}
});

23
src/components/model-data-magic/components/tabs-styles.vue
View File

@ -27,10 +27,10 @@
</el-form-item>
</template>
</template>
<el-form-item label="内间距">
<padding :key="form.carouselKey" :value="form.chunk_padding" @update:value="chunk_padding_change"></padding>
</el-form-item>
<template v-if="tabs_content.data_type === 'goods'">
<el-form-item label="内间距">
<padding :key="form.carouselKey" :value="form.chunk_padding" @update:value="chunk_padding_change"></padding>
</el-form-item>
<el-form-item label="标题间距">
<slider v-model="form.title_gap" :min="1" :max="100"></slider>
</el-form-item>
@ -42,7 +42,7 @@
<radius :key="form.carouselKey" :value="form.img_radius" @update:value="img_radius_change"></radius>
</el-form-item>
</card-container>
<template v-if="tabs_content.data_type === 'goods' && isShowTitle">
<template v-if="tabs_content.data_type === 'goods'">
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">标题样式</div>
@ -119,10 +119,13 @@
</el-form-item>
</card-container>
</template>
<div class="bg-f5 divider-line" />
<card-container>
<carousel-indicator :key="form.carouselKey" :value="form"></carousel-indicator>
</card-container>
<template v-if="['goods', 'images'].includes(tabs_content.data_type)">
<div class="bg-f5 divider-line" />
<card-container>
<carousel-indicator :key="form.carouselKey" :value="form"></carousel-indicator>
</card-container>
</template>
</template>
<script setup lang="ts">
import { pick, isEmpty, cloneDeep } from 'lodash';
@ -134,10 +137,6 @@ const props = defineProps({
content: {
type: Object,
default: () => ({}),
},
isShowTitle: {
type: Boolean,
default: true,
}
});

26
src/components/model-data-magic/index.vue
View File

@ -25,8 +25,10 @@
</div>
</div>
</template>
<template v-else>
<magic-carousel :value="item" type="img" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
<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($event, index)"></magic-carousel>
</div>
</template>
<div v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs" :style="`bottom: ${item.data_style?.indicator_bottom}px;`">
<template v-if="item.data_style.indicator_style == 'num'">
@ -63,8 +65,13 @@
</div>
</div>
</template>
<template v-else>
<magic-carousel :value="item" type="img" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
<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($event, index)"></magic-carousel>
</div>
</template>
<template v-else-if="item.data_content.data_type == 'custom'">
<customIndex :value="item" :magic-scale="magic_scale" :data-spacing="new_style.image_spacing"></customIndex>
</template>
<div v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs" :style="`bottom: ${item.data_style?.indicator_bottom}px;`">
<template v-if="item.data_style.indicator_style == 'num'">
@ -84,6 +91,7 @@
</div>
</template>
<script setup lang="ts">
import customIndex from './components/custom/index.vue';
import { background_computer, common_styles_computer, get_math, gradient_computer, radius_computer, padding_computer, common_img_computer, is_number, percentage_count } from '@/utils';
import { isEmpty, cloneDeep } from 'lodash';
const props = defineProps({
@ -325,6 +333,16 @@ const carousel_change = (index: number, key: number) => {
// 公共样式
const style_container = computed(() => common_styles_computer(new_style.value.common_style));
const style_img_container = computed(() => common_img_computer(new_style.value.common_style));
// 图片魔方的缩放比例
const magic_scale = ref(1);
const typewidth = ref(0);
watch(() => new_style.value.common_style, (val) => {
const { margin_left, margin_right, padding_left, padding_right } = val;
// 根据容器宽度来计算内部大小
typewidth.value = 390 - margin_left - margin_right - padding_left - padding_right;
// 获得对应宽度的比例
magic_scale.value = typewidth.value / 390;
}, { deep: true });
</script>
<style lang="scss" scoped>
// 图片魔方是一个正方形，根据宽度计算高度

46
src/components/model-data-magic/model-data-magic-content.vue
View File

@ -49,10 +49,10 @@
<div class="bg-f5 divider-line" />
<el-tabs v-model="tabs_name" class="content-tabs">
<el-tab-pane label="内容设置" name="content">
<tabs-content :value="form.data_magic_list[selected_active].data_content" :is-show-title="is_show_title"></tabs-content>
<tabs-content :value="form.data_magic_list[selected_active].data_content"></tabs-content>
</el-tab-pane>
<el-tab-pane label="样式设置" name="styles">
<tabs-styles :value="form.data_magic_list[selected_active].data_style" :content="form.data_magic_list[selected_active].data_content" :is-show-title="is_show_title"></tabs-styles>
<tabs-styles :value="form.data_magic_list[selected_active].data_style" :content="form.data_magic_list[selected_active].data_content"></tabs-styles>
</el-tab-pane>
</el-tabs>
</template>
@ -164,37 +164,56 @@ const data_style = {
}
// 每个小模块独立的内容
const data_content = {
// 列表数据类型
data_type: 'goods',
// 主标题副标题处理
heading_title_type: 'text',
heading_title: '主标题',
heading_title_img: [],
subtitle: '副标题',
// 商品数据处理
goods_list:[],
goods_ids: '',
goods_outerflex: 'row',
goods_flex: 'row',
goods_num: 1,
is_show: ['title', 'price'],
// 图片数据处理
img_fit: 'cover',
images_list:[
{
carousel_img: [],
carousel_link: {},
}
]
],
// 自定义数据处理
// 容器的基础高度
height: 150,
// 容器基础的宽度
width: 0,
// 图片key
img_key: '',
// 存放数据内容的id
data_source_content_value: '',
// 数据源内容
data_source_content: {},
// 数据源
data_source:'',
// 自定义内容列表
custom_list: []
}
// 不同风格的数据
const style_show_list = [
[{ start: {x: 1, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'row', outerflex: 'row', title_text_gap: 20 }, { start: {x: 1, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'row', outerflex: 'row', title_text_gap: 20 }], // 风格1
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20 }, { start: {x: 3, y: 1}, end: {x: 4, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20 }], // 风格2
[{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 1, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'row', outerflex: 'row', title_text_gap: 20 }],// 风格3
[{ start: {x: 1, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'row', outerflex: 'row', title_text_gap: 20 }, { start: {x: 1, y: 3}, end: {x: 2, y: 4}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }],// 风格4
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }],// 风格5
[{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 1, y: 3}, end: {x: 2, y: 4}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 1}, end: {x: 4, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20 }],// 风格6
[{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 1, y: 3}, end: {x: 2, y: 4}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }],// 风格7
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 3}, end: {x: 3, y: 4}, num: 1, flex: 'fill', outerflex: 'col', title_text_gap: 20 }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'fill', outerflex: 'col', title_text_gap: 20 }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'fill', outerflex: 'col', title_text_gap: 20 }],// 风格8
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 3}, end: {x: 3, y: 4}, num: 1, flex: 'col', outerflex: 'col', title_text_gap: 10 }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col', outerflex: 'col', title_text_gap: 10 }],// 风格9
[{ start: {x: 1, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'row', outerflex: 'row', title_text_gap: 20, width: 390 }, { start: {x: 1, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'row', outerflex: 'row', title_text_gap: 20, width: 390 }], // 风格1
[{ 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: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20, width: 195 }], // 风格2
[{ 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: 4, y: 4}, num: 2, flex: 'row', outerflex: 'row', title_text_gap: 20, width: 390 }],// 风格3
[{ start: {x: 1, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'row', outerflex: 'row', title_text_gap: 20, width: 390 }, { 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 }],// 风格4
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20, width: 390 }, { 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: 4, y: 4}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }],// 风格5
[{ 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: 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: 1}, end: {x: 4, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20, width: 390 }],// 风格6
[{ 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
[], //风格10
]
const tabs_name = ref('content');
@ -261,6 +280,7 @@ const magic_list = (index: number) => {
actived_index: 0,
data_content: {
...cloneDeep(data_content),
width: item.width,
heading_title: module_7_handle(index, map_index) ? '' : data_content.heading_title,
subtitle: module_7_handle(index, map_index) ? '' : data_content.subtitle,
goods_outerflex: item.outerflex,
@ -331,8 +351,6 @@ const data_title = (item: any) => {
}
return title;
};
// 除了第8个风格下的后3个不显示标题，其他的都显示
const is_show_title = computed(() => !(form.value.style_actived == 7 && ![0, 1].includes(selected_active.value)));
</script>
<style lang="scss" scoped>
.flex-item {