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

修改选项卡轮播显示逻辑

v1.4.0
于肖磊 2025-08-05 15:30:32 +08:00
parent 95f21aaf2f
commit 20ee7e7fb1
10 changed files with 268 additions and 226 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/base/drag/index.vue
View File

@ -1,7 +1,7 @@
<template>
<VueDraggable v-model="from" :animation="500" target=".sort-target" handle=".icon-drag" :scroll="true" :on-sort="on_sort">
<TransitionGroup type="transition" tag="ul" name="fade" class="sort-target flex-col gap-x-20">
<li v-for="(item, index) in from" :key="index" :class="[`flex-row re gap-16 ${ className }`, props.modelType == 'nav-group' && modelIndex === index ? 'nav-index-select' : '']" @click="on_click(item, index)">
<li v-for="(item, index) in from" :key="index" :class="[`flex-row re gap-16 ${ className }`, ['nav-group', 'tabs-magic'].includes(props.modelType) && modelIndex === index ? 'model-type-index-select' : '']" @click="on_click(item, index)">
<div class="flex-1 flex-row gap-16">
<icon name="drag" size="16" class="cursor-move" />
<slot :row="item" :index="index" />
@ -129,10 +129,6 @@ const on_sort = () => {
border-radius: 100%;
line-height: 1.8rem;
}
.nav-index-select {
box-shadow: 0rem 0 0rem 0.1rem #409eff;
/* border: 1px solid #409eff; */
}
.multiple-icon-class {
padding: 0.5rem 1rem;
background: #f7f7f7;

76
src/components/common/tabs-magic-config/tabs-magic-styles.vue
View File

@ -1,40 +1,44 @@
<template>
<!-- 轮播 -->
<template v-if="magicType === 'carousel'">
<model-carousel-styles :value="form.style" :content="form.content" :is-common-style="false"></model-carousel-styles>
</template>
<!-- 导航组 -->
<template v-else-if="magicType === 'nav_group'">
<model-nav-group-styles :value="form.style" :content="form.content" :is-common-style="false"></model-nav-group-styles>
</template>
<!-- 自定义 -->
<template v-else-if="magicType === 'custom'">
<model-custom-styles :value="form.style" :content="form.content" :is-common-style="false" ></model-custom-styles>
</template>
<!-- 商品魔方 -->
<template v-else-if="magicType === 'goods_magic'">
<model-goods-magic-styles :value="form.style" :content="form.content" :default-config="data_config" :is-common-style="false"></model-goods-magic-styles>
</template>
<!-- 图片魔方 -->
<template v-else-if="magicType === 'img_magic'">
<model-img-magic-styles :value="form.style" :content="form.content" :is-common-style="false"></model-img-magic-styles>
</template>
<!-- 热区 -->
<template v-else-if="magicType === 'hot_zone'">
<model-hot-zone-styles :value="form.style" :is-common-style="false"></model-hot-zone-styles>
</template>
<!-- 文章列表 -->
<template v-else-if="magicType === 'article_list'">
<model-article-list-styles :value="form.style" :content="form.content" :default-config="data_config" :is-common-style="false"></model-article-list-styles>
</template>
<!-- 商品列表 -->
<template v-else-if="magicType === 'goods_list'">
<model-goods-list-styles :value="form.style" :content="form.content" :default-config="data_config" :is-common-style="false"></model-goods-list-styles>
</template>
<!-- 视频 -->
<template v-else-if="magicType === 'video'">
<model-video-styles :value="form.style" :content="form.content" :is-common-style="false"></model-video-styles>
</template>
<div>
<!-- 轮播 -->
<template v-if="magicType === 'carousel'">
<model-carousel-styles :value="form.style" :content="form.content" :is-common-style="false" :is-tabs-magic="true"></model-carousel-styles>
</template>
<!-- 导航组 -->
<template v-else-if="magicType === 'nav_group'">
<model-nav-group-styles :value="form.style" :content="form.content" :is-common-style="false"></model-nav-group-styles>
</template>
<!-- 自定义 -->
<template v-else-if="magicType === 'custom'">
<model-custom-styles :value="form.style" :content="form.content" :is-common-style="false" :is-tabs-magic="true"></model-custom-styles>
</template>
<!-- 商品魔方 -->
<template v-else-if="magicType === 'goods_magic'">
<model-goods-magic-styles :value="form.style" :content="form.content" :default-config="data_config" :is-common-style="false"></model-goods-magic-styles>
</template>
<!-- 图片魔方 -->
<template v-else-if="magicType === 'img_magic'">
<model-img-magic-styles :value="form.style" :content="form.content" :is-common-style="false"></model-img-magic-styles>
</template>
<!-- 热区 -->
<template v-else-if="magicType === 'hot_zone'">
<model-hot-zone-styles :value="form.style" :is-common-style="false"></model-hot-zone-styles>
</template>
<!-- 文章列表 -->
<template v-else-if="magicType === 'article_list'">
<model-article-list-styles :value="form.style" :content="form.content" :default-config="data_config" :is-common-style="false"></model-article-list-styles>
</template>
<!-- 商品列表 -->
<template v-else-if="magicType === 'goods_list'">
<model-goods-list-styles :value="form.style" :content="form.content" :default-config="data_config" :is-common-style="false"></model-goods-list-styles>
</template>
<!-- 视频 -->
<template v-else-if="magicType === 'video'">
<model-video-styles :value="form.style" :content="form.content" :is-common-style="false"></model-video-styles>
</template>
<!-- 公共样式 -->
<tabs-magic-common :value="form.style"></tabs-magic-common>
</div>
</template>
<script lang="ts" setup>

6
src/components/model-carousel/model-carousel-styles.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="common-style-height">
<el-form :model="form" label-width="75">
<template v-if="!isCommonStyle">
<template v-if="!isCommonStyle && !isTabsMagic">
<card-container class="card-container">
<div class="mb-12">内容设置</div>
<el-form-item label="内容背景">
@ -139,6 +139,10 @@ const props = defineProps({
isCommonStyle: {
type: Boolean,
default: true
},
isTabsMagic: {
type: Boolean,
default: false
}
});

46
src/components/model-custom/model-custom-styles.vue
View File

@ -54,26 +54,28 @@
<!-- 阴影配置 -->
<shadow-config v-model="form.data_style" @operation_end="operation_end"></shadow-config>
</card-container>
<div class="divider-line data-tabs-line" />
<card-container class="card-container">
<div class="mb-12">内容样式</div>
<el-form-item label="背景">
<background-common v-model:color_list="form.data_content_style.color_list" v-model:direction="form.data_content_style.direction" v-model:img_style="form.data_content_style.background_img_style" v-model:img="form.data_content_style.background_img" @mult_color_picker_event="mult_content_color_picker_event" @operation_end="operation_end" />
</el-form-item>
<el-form-item label="外间距">
<margin :value="form.data_content_style" @operation_end="operation_end"></margin>
</el-form-item>
<el-form-item label="内间距">
<padding :value="form.data_content_style" @operation_end="operation_end"></padding>
</el-form-item>
<el-form-item label="圆角">
<radius :value="form.data_content_style" @operation_end="operation_end"></radius>
</el-form-item>
<!-- 边框处理 -->
<border-config v-model:show="form.data_content_style.border_is_show" v-model:color="form.data_content_style.border_color" v-model:style="form.data_content_style.border_style" v-model:size="form.data_content_style.border_size" @operation_end="operation_end"></border-config>
<!-- 阴影配置 -->
<shadow-config v-model="form.data_content_style" @operation_end="operation_end"></shadow-config>
</card-container>
<template v-if="!isTabsMagic">
<div class="divider-line data-tabs-line" />
<card-container class="card-container">
<div class="mb-12">内容样式</div>
<el-form-item label="背景">
<background-common v-model:color_list="form.data_content_style.color_list" v-model:direction="form.data_content_style.direction" v-model:img_style="form.data_content_style.background_img_style" v-model:img="form.data_content_style.background_img" @mult_color_picker_event="mult_content_color_picker_event" @operation_end="operation_end" />
</el-form-item>
<el-form-item label="外间距">
<margin :value="form.data_content_style" @operation_end="operation_end"></margin>
</el-form-item>
<el-form-item label="内间距">
<padding :value="form.data_content_style" @operation_end="operation_end"></padding>
</el-form-item>
<el-form-item label="圆角">
<radius :value="form.data_content_style" @operation_end="operation_end"></radius>
</el-form-item>
<!-- 边框处理 -->
<border-config v-model:show="form.data_content_style.border_is_show" v-model:color="form.data_content_style.border_color" v-model:style="form.data_content_style.border_style" v-model:size="form.data_content_style.border_size" @operation_end="operation_end"></border-config>
<!-- 阴影配置 -->
<shadow-config v-model="form.data_content_style" @operation_end="operation_end"></shadow-config>
</card-container>
</template>
</el-form>
<template v-if="isCommonStyle">
<div class="divider-line data-tabs-line" />
@ -98,6 +100,10 @@ const props = defineProps({
isCommonStyle: {
type: Boolean,
default: true,
},
isTabsMagic: {
type: Boolean,
default: false
}
});
const state = reactive({

8
src/components/model-img-magic/model-img-magic-content.vue
View File

@ -160,13 +160,13 @@ const handleResize = () => {
cubeHeight.value = height;
}
} else {
const height = form.value.style_actived !== 10 ? form.value.container_height : form.value.limit_size == '1' ? form.value.image_height : 296;
const height = form.value.style_actived !== 10 ? form.value.container_height : form.value.limit_size == '1' ? form.value.image_height : 280;
if (window.innerWidth <= 1560) {
const sales = 236 / 296;
cubeWidth.value = 236;
const sales = 220 / 280;
cubeWidth.value = 220;
cubeHeight.value = height * sales;
} else {
cubeWidth.value = 296;
cubeWidth.value = 280;
cubeHeight.value = height;
}
}

119
src/components/model-tabs-magic/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="re" :style="style_container + swiper_bg_style">
<div class="re" :style="style_container + style_active_container + swiper_bg_style">
<div class="abs z-i top-0 w h" :style="swiper_bg_img_style"></div>
<div class="flex-col oh" :style="style_img_container + (!isEmpty(swiper_bg_img_style) ? `background-image: url('');` : '')">
<div class="flex-col oh" :style="style_img_container + style_active_img_container + (!isEmpty(swiper_bg_img_style) ? `background-image: url('');` : '')">
<div class="oh z-deep re" :style="tabs_container + (is_rotating_background ? swiper_bg_style : '')">
<div v-if="is_rotating_background" class="abs z-i top-0 w h" :style="swiper_bg_img_style"></div>
<div class="oh re z-deep" :style="tabs_img_container">
@ -73,72 +73,41 @@ const tabs_container = ref('');
const tabs_img_container = ref('');
// 打开滑动固定开关之后，显示的样式
const tabs_sliding_fixed_bg = ref('');
const is_rotating_background = ref(false);
// 魔方内容样式
const magic_container = ref('');
const magic_img_container = ref('');
// 样式信息数据
const new_style = computed(() => props.value.style);
// 当前选中的选项卡对应的type类型
const tabs_magic_type = computed(() => tabs_list.value.content.tabs_list[tabs_active_index.value].magic_type)
const tabs_magic_value = computed(() => tabs_list.value.content.tabs_list[tabs_active_index.value][tabs_magic_type.value])
watch(() => props.value,
(val) => {
let new_data = cloneDeep(val);
const { home_data, is_tabs_safe_distance = '0', rotating_background } = new_data.content;
const new_style = new_data?.style;
// 选项卡背景设置
const tabs_data = {
color_list: new_style.tabs_bg_color_list,
direction: new_style.tabs_bg_direction,
background_img_style: new_style.tabs_bg_background_img_style,
background_img: new_style.tabs_bg_background_img,
}
// 选项卡是否开启了安全距离
const is_general_safe_distance = common_store.is_general_safe_distance && is_tabs_safe_distance == '1';
const new_tabs_padding = {
...new_style.tabs_padding,
padding_top: (new_style.tabs_padding?.padding_top || 0) + (is_general_safe_distance ? common_store.header_height : 0),
}
// 是否开启轮播图背景设置
is_rotating_background.value = rotating_background == '1';
// 选项卡滑动固定背景
tabs_sliding_fixed_bg.value = gradient_computer(tabs_data);
tabs_container.value = gradient_computer(tabs_data) + radius_computer(new_style.tabs_radius) + margin_computer(new_style.tabs_margin) + box_shadow_computer(new_style.tabs_content) + border_computer(new_style.tabs_content) + `margin-top: ${ new_style.tabs_margin.margin_top - (is_general_safe_distance ? common_store.header_height : 0) }px;`;
tabs_img_container.value = background_computer(tabs_data) + padding_computer(new_tabs_padding);
// 魔方区域背景设置
const magic_content_data = {
color_list: new_style.magic_content_color_list,
direction: new_style.magic_content_direction,
background_img_style: new_style.magic_content_background_img_style,
background_img: new_style.magic_content_background_img,
}
magic_container.value = gradient_computer(magic_content_data) + margin_computer(new_style.magic_content_margin) + radius_computer(new_style.magic_content_radius) + border_computer(new_style.magic_content) + box_shadow_computer(new_style.magic_content);
magic_img_container.value = background_computer(magic_content_data) + padding_computer(new_style.magic_content_padding);
// 处理数据
new_data.content.tabs_list = [home_data, ...new_data.content.tabs_list];
tabs_list.value = new_data;
// 当前选中的内容
tabs_active_index.value = new_data.content.tabs_active_index;
},
{ immediate: true, deep: true }
);
const style_container = computed(() => `${common_styles_computer(props.value.style.common_style)};`);
const style_img_container = computed(() => `${common_img_computer(props.value.style.common_style)};gap:${props.value.style.data_spacing}px`);
// 获取当前选中的选项卡的数据
const active_tabs_value = computed(() => tabs_list.value.content.tabs_list[tabs_active_index.value]);
// 获取选中的类型
const tabs_magic_type = computed(() => active_tabs_value.value.magic_type)
// 获取选中的魔方数据
const tabs_magic_value = computed(() => active_tabs_value.value[tabs_magic_type.value]);
// 判断是否开启轮播图背景设置
const is_rotating_background = computed(() => active_tabs_value.value.rotating_background == '1');
// 选中的公共样式
const style_active_container = computed(() => tabs_magic_value.value.style.magic_common.is_show == '1' ? gradient_computer(tabs_magic_value.value.style.magic_common) : '');
const style_active_img_container = computed(() => tabs_magic_value.value.style.magic_common.is_show == '1' ? background_computer(tabs_magic_value.value.style.magic_common) : '');
// 选中的内容区域样式
const magic_container = computed(() => common_styles_computer(tabs_magic_value.value.style.magic_content));
const magic_img_container = computed(() => common_img_computer(tabs_magic_value.value.style.magic_content));
//#region 图片魔方的缩放比例
const new_style = computed(() => props.value.style);
// 图片魔方的缩放比例
const magic_scale = ref(1);
watchEffect(() => {
const { margin_left, margin_right, padding_left, padding_right } = new_style.value.common_style;
const magic_content_margin = new_style.value.magic_content_margin;
const magic_content_padding = new_style.value.magic_content_padding;
const content_width = magic_content_margin.margin_left + magic_content_margin.margin_right + magic_content_padding.padding_left + magic_content_padding.padding_right + border_width(new_style.value.magic_content);
// 获取公共样式的数据
const common_data = new_style.value.common_style;
const common_width = common_data.margin_left + common_data.margin_right + common_data.padding_left + common_data.padding_right + border_width(common_data);
const { margin_left, margin_right, padding_left, padding_right } = tabs_magic_value.value.style.magic_content;
const content_width = margin_left + margin_right + padding_left + padding_right + border_width(tabs_magic_value.value.style.magic_content);
// 根据容器宽度来计算内部大小
const typewidth = 390 - content_width - margin_left - margin_right - padding_left - padding_right - border_width(new_style.value.common_style);
const typewidth = 390 - content_width - common_width;
// 获得对应宽度的比例
magic_scale.value = typewidth / 390;
});
//#endregion
// 全局公共样式
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)};gap:${new_style.value.data_spacing}px;`);
//#region 轮播切换时更新背景信息
const actived_index = ref(0);
const slideChange = (index: number) => {
@ -182,5 +151,35 @@ const swiper_bg_img_style = computed(() => {
return '';
});
//#endregion
watch(() => props.value,
(val) => {
let new_data = cloneDeep(val);
const { home_data, is_tabs_safe_distance = '0' } = new_data.content;
const new_style = new_data?.style;
// 选项卡背景设置
const tabs_data = {
color_list: new_style.tabs_bg_color_list,
direction: new_style.tabs_bg_direction,
background_img_style: new_style.tabs_bg_background_img_style,
background_img: new_style.tabs_bg_background_img,
}
// 选项卡是否开启了安全距离
const is_general_safe_distance = common_store.is_general_safe_distance && is_tabs_safe_distance == '1';
const new_tabs_padding = {
...new_style.tabs_padding,
padding_top: (new_style.tabs_padding?.padding_top || 0) + (is_general_safe_distance ? common_store.header_height : 0),
}
// 选项卡滑动固定背景
tabs_sliding_fixed_bg.value = gradient_computer(tabs_data);
tabs_container.value = gradient_computer(tabs_data) + radius_computer(new_style.tabs_radius) + margin_computer(new_style.tabs_margin) + box_shadow_computer(new_style.tabs_content) + border_computer(new_style.tabs_content) + `margin-top: ${ new_style.tabs_margin.margin_top - (is_general_safe_distance ? common_store.header_height : 0) }px;`;
tabs_img_container.value = background_computer(tabs_data) + padding_computer(new_tabs_padding);
// 处理数据
new_data.content.tabs_list = [home_data, ...new_data.content.tabs_list];
tabs_list.value = new_data;
// 当前选中的内容
tabs_active_index.value = new_data.content.tabs_active_index;
},
{ immediate: true, deep: true }
);
</script>
<style lang="scss" scoped></style>

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

@ -33,16 +33,12 @@
<el-switch v-model="form.is_tabs_safe_distance" class="mr-10" active-value="1" inactive-value="0" />
<tooltip content="选项卡是否支持安全距离"></tooltip>
</el-form-item>
<el-form-item label="轮播背景">
<el-switch v-model="form.rotating_background" class="mr-10" active-value="1" inactive-value="0" />
<tooltip content="1.关闭的时候,如果没有选项卡背景会使用通用背景.<br/>2.打开的时候,如果没有选项卡背景会使用轮播背景,都没有的时候会使用通用背景"></tooltip>
</el-form-item>
</card-container>
<div class="divider-line"></div>
<card-container>
<div class="mb-12">选项卡设置</div>
<div class="flex-col gap-x-20">
<div class="card-background box-shadow-sm ptb-25 flex-row gap-16 re align-c" @click="tabs_list_click('home', 0)">
<div :class="`card-background box-shadow-sm ptb-25 flex-row gap-16 re align-c radius-sm ${ form.tabs_active_index == 0 ? 'model-type-index-select' : ''}`" @click="tabs_list_click('home', 0)">
<el-icon class="iconfont icon-jinzhi size-16 cursor-move" />
<div class="flex-col gap-10 w" style="width: calc(100% - 32px)">
<el-form-item label="显示类型" class="w mb-0">
@ -61,24 +57,28 @@
</el-form-item>
<sliding-fixed v-model="form.home_data.is_sliding_fixed" @sliding_fixed_change="sliding_fixed_change($event, 0, 'home_data')"></sliding-fixed>
<template v-if="form.tabs_active_index == 0">
<el-form-item label="魔方内容" class="w">
<el-select v-model="form.home_data.magic_type" filterable placeholder="请选择魔方内容" size="default" @change="magic_type_change(0)">
<el-form-item label="魔方内容" class="w mb-0">
<el-select v-model="form.home_data.magic_type" filterable placeholder="请选择魔方内容" size="default" @change="magic_type_change()">
<el-option v-for="item in magic_option" :key="item.value" :label="item.name" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item v-if="form.home_data.magic_type == 'carousel'" label="轮播背景" class="w mb-0">
<el-switch v-model="form.home_data.rotating_background" class="mr-10" active-value="1" inactive-value="0" />
<tooltip content="1.关闭的时候,如果没有选项卡背景会使用通用背景.<br/>2.打开的时候,如果没有选项卡背景会使用轮播背景,都没有的时候会使用通用背景"></tooltip>
</el-form-item>
<!-- 魔方内容设置 -->
<el-tabs v-model="tabs_name" class="tabs-magic-content-tabs">
<el-tab-pane label="内容设置" name="content" class="tabs-magic-content">
<tabs-magic-content :magic-type="form.home_data.magic_type" :value="form.home_data[form.home_data.magic_type]"></tabs-magic-content>
</el-tab-pane>
<el-tab-pane v-if="!['video', 'hot_zone'].includes(form.home_data.magic_type)" label="样式设置" name="styles" class="tabs-magic-content">
<el-tab-pane label="样式设置" name="styles" class="tabs-magic-content">
<tabs-magic-styles :magic-type="form.home_data.magic_type" :value="form.home_data[form.home_data.magic_type]"></tabs-magic-styles>
</el-tab-pane>
</el-tabs>
</template>
</div>
</div>
<drag :data="form.tabs_list" type="card" :space-col="25" @click="tabs_list_click" @remove="remove" @on-sort="on_sort">
<drag :data="form.tabs_list" type="card" model-type="tabs-magic" :model-index="form.tabs_active_index - 1" :space-col="25" @click="tabs_list_click" @remove="remove" @on-sort="on_sort">
<template #default="{ row, index }">
<div class="flex-col align-c jc-s gap-20 flex-1 w" style="width: calc(100% - 32px)">
<el-form-item label="数据类型" class="w mb-0">
@ -112,11 +112,15 @@
</template>
</el-form-item>
<!-- 魔方内容显示页面 -->
<el-form-item label="魔方内容" class="w">
<el-select v-model="row.magic_type" filterable placeholder="请选择魔方内容" size="default" @change="magic_type_change(index + 1)">
<el-form-item label="魔方内容" class="w mb-0">
<el-select v-model="row.magic_type" filterable placeholder="请选择魔方内容" size="default" @change="magic_type_change()">
<el-option v-for="item in magic_option" :key="item.value" :label="item.name" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item v-if="row.magic_type == 'carousel'" label="轮播背景" class="w mb-0">
<el-switch v-model="row.rotating_background" class="mr-10" active-value="1" inactive-value="0" />
<tooltip content="1.关闭的时候,如果没有选项卡背景会使用通用背景.<br/>2.打开的时候,如果没有选项卡背景会使用轮播背景,都没有的时候会使用通用背景"></tooltip>
</el-form-item>
<!-- 魔方内容设置 -->
<el-tabs v-model="tabs_name" class="tabs-magic-content-tabs">
<el-tab-pane label="内容设置" name="content" class="tabs-magic-content">
@ -198,6 +202,7 @@ const add = () => {
micro_page_list: {},
category_list: {},
magic_type: 'carousel',
rotating_background: '0',
...cloneDeep(magic_config),
});
form.value.tabs_active_index = form.value.tabs_list.length;
@ -252,8 +257,8 @@ const sliding_fixed_change = (val: string | number | boolean, index: number, typ
}
//#region 选项卡魔方内容
const tabs_name = ref('content');
const magic_type_change = (index: number) => {
const magic_type_change = () => {
tabs_name.value = 'content';
}
//#endregion
// 选项卡是否设置安全距离

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

@ -62,9 +62,6 @@
<el-form-item label="左右间距">
<slider v-model="form.tabs_spacing" :max="100"></slider>
</el-form-item>
<el-form-item label="数据间距">
<slider v-model="form.data_spacing" :max="100"></slider>
</el-form-item>
<el-form-item label="选项卡背景">
<background-common v-model:color_list="form.tabs_bg_color_list" v-model:direction="form.tabs_bg_direction" v-model:img_style="form.tabs_bg_background_img_style" v-model:img="form.tabs_bg_background_img" @mult_color_picker_event="tabs_bg_mult_color_picker_event" />
</el-form-item>
@ -95,24 +92,12 @@
<slider v-model="form.more_icon_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="内容背景">
<background-common v-model:color_list="form.magic_content_color_list" v-model:direction="form.magic_content_direction" v-model:img_style="form.magic_content_background_img_style" v-model:img="form.magic_content_background_img" @mult_color_picker_event="magic_content_mult_color_picker_event" />
<div class="mb-12">间距设置</div>
<el-form-item label="数据间距">
<slider v-model="form.data_spacing" :max="100"></slider>
</el-form-item>
<el-form-item label="圆角">
<radius :value="form.magic_content_radius"></radius>
</el-form-item>
<el-form-item label="外间距">
<margin :value="form.magic_content_margin"></margin>
</el-form-item>
<el-form-item label="内间距">
<padding :value="form.magic_content_padding"></padding>
</el-form-item>
<!-- 边框处理 -->
<border-config v-model:show="form.magic_content.border_is_show" v-model:color="form.magic_content.border_color" v-model:style="form.magic_content.border_style" v-model:size="form.magic_content.border_size"></border-config>
<!-- 阴影配置 -->
<shadow-config v-model="form.magic_content"></shadow-config>
</card-container>
</el-form>
<div class="divider-line"></div>
@ -159,10 +144,5 @@ const tabs_bg_mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.tabs_bg_color_list = arry;
form.value.tabs_bg_direction = type.toString();
};
// 魔方内容背景渐变设置
const magic_content_mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.magic_content_color_list = arry;
form.value.magic_content_direction = type.toString();
};
</script>
<style lang="scss" scoped></style>

169
src/config/const/tabs-magic.ts
View File

@ -34,6 +34,7 @@ interface tabs_page {
micro_page_list: object;
category_list: object;
magic_type: string;
rotating_background: string,
carousel: object;
video: object;
nav_group: object;
@ -48,7 +49,6 @@ interface defaultTabs {
content: {
content_top: object;
justification: string,
rotating_background: string;
show_more: string,
tabs_theme: string;
tabs_adorn_icon: string;
@ -94,17 +94,58 @@ interface defaultTabs {
more_icon_color: string;
more_icon_size: number;
data_spacing: number;
magic_content_direction: string;
magic_content_color_list: color_list[];
magic_content_background_img_style: string;
magic_content_background_img: string[];
magic_content_radius: radiusStyle;
magic_content_margin: marginStyle;
magic_content_padding: paddingStyle;
magic_content: object;
common_style: object;
};
}
const magic_common_config = {
// 魔方内容设置
magic_content: {
direction: '90deg',
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '2',
background_img: [],
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
margin: 0,
margin_top: 0,
margin_bottom: 0,
margin_left: 0,
margin_right: 0,
padding: 0,
padding_top: 0,
padding_bottom: 10,
padding_left: 10,
padding_right: 10,
// 边框样式
border_is_show: '0',
border_color: '#FF3F3F',
border_style: 'solid',
border_size: {
padding: 1,
padding_top: 1,
padding_right: 1,
padding_bottom: 1,
padding_left: 1,
},
// 阴影
box_shadow_color: '',
box_shadow_x: 0,
box_shadow_y: 0,
box_shadow_blur: 0,
box_shadow_spread: 0,
},
// 通用样式
magic_common: {
is_show: '0',
direction: '90deg',
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '2',
background_img: [],
},
}
// 魔方配置
export const magic_config = {
carousel: {
@ -156,20 +197,64 @@ export const magic_config = {
box_shadow_blur: 0,
box_shadow_spread: 0,
},
...cloneDeep(magic_common_config)
}
},
video: {
content: cloneDeep(defaultVideo.content),
style: {
...cloneDeep(defaultVideo.style),
...cloneDeep(magic_common_config)
}
},
nav_group: {
content: cloneDeep(defaultNavGroup.content),
style: {
...cloneDeep(defaultNavGroup.style),
...cloneDeep(magic_common_config)
}
},
article_list: {
content: cloneDeep(defaultArticleList.content),
style: {
...cloneDeep(defaultArticleList.style),
...cloneDeep(magic_common_config)
}
},
goods_list: {
content: cloneDeep(defaultGoodsList.content),
style: {
...cloneDeep(defaultGoodsList.style),
...cloneDeep(magic_common_config)
}
},
goods_magic: {
content: cloneDeep(defaultGoodsMagic.content),
style: {
...cloneDeep(defaultGoodsMagic.style),
...cloneDeep(magic_common_config)
}
},
img_magic: {
content: cloneDeep(defaultImgMagic.content),
style: {
...cloneDeep(defaultImgMagic.style),
...cloneDeep(magic_common_config)
}
},
hot_zone: {
content: cloneDeep(defaultHotZone.content),
style: {
...cloneDeep(defaultHotZone.style),
...cloneDeep(magic_common_config)
}
},
video: cloneDeep(defaultVideo),
nav_group: cloneDeep(defaultNavGroup),
article_list: cloneDeep(defaultArticleList),
goods_list: cloneDeep(defaultGoodsList),
goods_magic: cloneDeep(defaultGoodsMagic),
img_magic: cloneDeep(defaultImgMagic),
hot_zone: cloneDeep(defaultHotZone),
custom:{
...cloneDeep(defaultCustom),
style: {
...cloneDeep(defaultCustom.style),
data_content_style: {
...cloneDeep(magic_common_config),
data_content_style: {
...cloneDeep(defaultCustom.style.data_content_style),
color_list: [{ color: 'rgb(244, 252, 255)', color_percentage: undefined }],
}
@ -186,7 +271,6 @@ const defaultTabs: defaultTabs = {
show_more: '1',
// 选项卡风格
tabs_theme: '0',
rotating_background: '0',
// 选中装饰图标
tabs_adorn_icon: 'checked-smooth',
tabs_adorn_img: [],
@ -211,6 +295,7 @@ const defaultTabs: defaultTabs = {
micro_page_list: {},
category_list: {},
magic_type: 'carousel',
rotating_background: '0',
...cloneDeep(magic_config),
},
tabs_list: [
@ -228,6 +313,7 @@ const defaultTabs: defaultTabs = {
micro_page_list: {},
category_list: {},
magic_type: 'carousel',
rotating_background: '0',
...cloneDeep(magic_config),
},
{
@ -244,6 +330,7 @@ const defaultTabs: defaultTabs = {
micro_page_list: {},
category_list: {},
magic_type: 'carousel',
rotating_background: '0',
...cloneDeep(magic_config),
},
{
@ -260,6 +347,7 @@ const defaultTabs: defaultTabs = {
micro_page_list: {},
category_list: {},
magic_type: 'carousel',
rotating_background: '0',
...cloneDeep(magic_config),
},
],
@ -354,51 +442,6 @@ const defaultTabs: defaultTabs = {
more_icon_size: 14,
// 选项卡与轮播之间的间距
data_spacing: 0,
// 魔方内容设置
magic_content_direction: '90deg',
magic_content_color_list: [{ color: '', color_percentage: undefined }],
magic_content_background_img_style: '2',
magic_content_background_img: [],
magic_content_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
},
magic_content_margin: {
margin: 0,
margin_top: 0,
margin_bottom: 0,
margin_left: 0,
margin_right: 0,
},
magic_content_padding: {
padding: 0,
padding_top: 0,
padding_bottom: 10,
padding_left: 10,
padding_right: 10,
},
magic_content: {
// 边框样式
border_is_show: '0',
border_color: '#FF3F3F',
border_style: 'solid',
border_size: {
padding: 1,
padding_top: 1,
padding_right: 1,
padding_bottom: 1,
padding_left: 1,
},
// 阴影
box_shadow_color: '',
box_shadow_x: 0,
box_shadow_y: 0,
box_shadow_blur: 0,
box_shadow_spread: 0,
},
// 公共样式
common_style: defaultCommon,
},

5
src/styles/index.scss
View File

@ -329,4 +329,9 @@ p {
margin-bottom: 1rem;
margin-top: 1rem;
}
}
.model-type-index-select {
box-shadow: 0rem 0 0rem 0.1rem #409eff;
/* border: 1px solid #409eff; */
}