修改页面显示
于肖磊
parent
b8d8859c84
commit
55bf2e997d
|
|
@ -10,7 +10,7 @@
|
|||
<card-container class="mb-8">
|
||||
<div class="mb-12">轮播设置</div>
|
||||
<el-form-item label="自动轮播">
|
||||
<el-switch v-model="form.is_roll" size="large" />
|
||||
<el-switch v-model="form.is_roll" />
|
||||
</el-form-item>
|
||||
<el-form-item label="间隔时间">
|
||||
<slider v-model="form.interval_time" :max="100"></slider>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="自动轮播">
|
||||
<el-switch v-model="form.is_roll" size="large" />
|
||||
<el-switch v-model="form.is_roll" />
|
||||
</el-form-item>
|
||||
<el-form-item label="轮播方向">
|
||||
<el-radio-group v-model="form.rotation_direction" class="ml-4">
|
||||
|
|
|
|||
|
|
@ -2,19 +2,21 @@
|
|||
<div ref="container" class="img-magic" :style="style_container">
|
||||
<div class="w h re outer-style">
|
||||
<!-- 风格9 -->
|
||||
<template v-if="form.style_actived == 8">
|
||||
<template v-if="form.style_actived == 7">
|
||||
<div class="flex-row align-c jc-c style-size flex-wrap">
|
||||
<div v-for="(item, index) in form.data_magic_list" :key="index" :class="['img-spacing-border', { 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index) }]">
|
||||
<!-- <image-empty v-model="item.img[0]" :style="content_img_radius"></image-empty> -->
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div v-for="(item, index) in form.data_magic_list" :key="index" class="cube-selected img-spacing-border" :style="`${selected_style(item)} ${ item.data_style.background_style }`">
|
||||
<el-carousel :key="item.data_style.carouselKey" indicator-position="none" :height="`${ getSelectedHeight(item) }px`" :interval="item.data_style.interval_time * 1000" arrow="never" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
|
||||
<el-carousel-item v-for="(item2, index) in item.data_content.product_list" :key="index">
|
||||
{{ item2 }}
|
||||
{{ item.actived_index }}
|
||||
<el-carousel :key="item.data_style.carouselKey" indicator-position="none" :interval="item.data_style.interval_time * 1000" arrow="never" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
|
||||
<el-carousel-item v-for="(item2, index) in item.data_content.list" :key="index">
|
||||
<template>
|
||||
|
||||
</template>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<div v-if="item.data_style.is_show" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs">
|
||||
|
|
@ -100,8 +102,8 @@ const getSelectedLeft = (item: CubeItem) => {
|
|||
return (item.start.x - 1) * cubeCellWidth.value;
|
||||
};
|
||||
// 根据当前页面大小计算成百分比
|
||||
const selected_style = (item: CubeItem) => {
|
||||
return `width: ${percentage(getSelectedWidth(item))}; height: ${percentage(getSelectedHeight(item))}; top: ${percentage(getSelectedTop(item))}; left: ${percentage(getSelectedLeft(item))};`;
|
||||
const selected_style = (item: CubeItem, ) => {
|
||||
return `width: calc(${percentage(getSelectedWidth(item))} - ${ outer_spacing.value } ); height: calc(${percentage(getSelectedHeight(item))} - ${ outer_spacing.value } ); top: ${percentage(getSelectedTop(item))}; left: ${percentage(getSelectedLeft(item))};`;
|
||||
};
|
||||
// 计算成百分比
|
||||
const percentage = (num: number) => {
|
||||
|
|
@ -128,21 +130,33 @@ watch(props.value.content, (val) => {
|
|||
// 指示器样式
|
||||
data_style.indicator_styles = indicator_style(data_style);
|
||||
data_style.background_style = background_style(data_style);
|
||||
// 获取旧数据
|
||||
if (!isEmpty(old_list.value[key])) {
|
||||
let old_data = old_list.value[key];
|
||||
|
||||
const { is_roll, rotation_direction, interval_time } = data_style;
|
||||
// 判断跟历史的是否相等，不相等更新组件时间
|
||||
if (old_data.interval_time != interval_time || old_data.is_roll != is_roll || old_data.rotation_direction != rotation_direction) {
|
||||
// 记录历史保存的时间
|
||||
old_data = {
|
||||
const { product_list, img_list } = data_content;
|
||||
data_content.list = data_content.data_type == 'commodity' ? data_content.product_list : data_content.img_list;
|
||||
const new_data = {
|
||||
interval_time: interval_time,
|
||||
is_roll: is_roll,
|
||||
rotation_direction: rotation_direction
|
||||
rotation_direction: rotation_direction,
|
||||
product_list: [...product_list], // 确保深拷贝
|
||||
img_list: [...img_list] // 确保深拷贝
|
||||
};
|
||||
let old_data = old_list.value[key];
|
||||
// 获取旧数据
|
||||
if (!isEmpty(old_data)) {
|
||||
// 旧数据
|
||||
const oldDataStringified = JSON.stringify(old_data);
|
||||
// 新数据
|
||||
const newDataStringified = JSON.stringify(new_data);
|
||||
|
||||
if (oldDataStringified !== newDataStringified) {
|
||||
// 更新旧数据
|
||||
old_data = JSON.parse(newDataStringified);
|
||||
// 更新轮播图的key，确保更换时能重新更新轮播图
|
||||
data_style.carouselKey = get_math();
|
||||
}
|
||||
} else {
|
||||
old_data = new_data;
|
||||
}
|
||||
});
|
||||
data_magic_list.value = data;
|
||||
|
|
@ -204,7 +218,7 @@ const style_container = computed(() => common_styles_computer(new_style.value.co
|
|||
}
|
||||
|
||||
.img-spacing-border {
|
||||
padding: v-bind(spacing);
|
||||
margin: v-bind(spacing);
|
||||
}
|
||||
|
||||
.style-size {
|
||||
|
|
@ -240,6 +254,13 @@ const style_container = computed(() => common_styles_computer(new_style.value.co
|
|||
margin: 0 0.3rem;
|
||||
}
|
||||
}
|
||||
// 轮播高度自适应
|
||||
:deep(.el-carousel) {
|
||||
height: 100%;
|
||||
.el-carousel__container {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-image) {
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ const data_style = {
|
|||
direction: '180deg',
|
||||
background_img_style: 2,
|
||||
background_img_url: [],
|
||||
is_roll: true,
|
||||
is_roll: false,
|
||||
rotation_direction: 'horizontal',
|
||||
interval_time: 2,
|
||||
heading_color: '#000',
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<card-container class="mb-8">
|
||||
<div class="mb-12">轮播设置</div>
|
||||
<el-form-item label="自动轮播">
|
||||
<el-switch v-model="form.is_roll" size="large" />
|
||||
<el-switch v-model="form.is_roll" />
|
||||
</el-form-item>
|
||||
<el-form-item label="间隔时间">
|
||||
<slider v-model="form.interval_time" :max="100"></slider>
|
||||
|
|
|
|||
|
|
@ -166,6 +166,7 @@ const props = defineProps({
|
|||
const diy_data = ref(props.diyData);
|
||||
const page_data = ref(props.header);
|
||||
const footer_nav = ref(props.footer);
|
||||
const content_style = ref('');
|
||||
// 监听
|
||||
watch(
|
||||
() => props.diyData,
|
||||
|
|
@ -173,12 +174,21 @@ watch(
|
|||
diy_data.value = newValue;
|
||||
}
|
||||
);
|
||||
// 监听
|
||||
watch(
|
||||
() => props.header,
|
||||
(newValue) => {
|
||||
page_data.value = newValue;
|
||||
page_settings();
|
||||
}
|
||||
);
|
||||
|
||||
watchEffect(() => {
|
||||
const content = props.header.com_data?.content || {};
|
||||
const container_common_styles = gradient_computer(content) + background_computer(content);
|
||||
|
||||
content_style.value = container_common_styles;
|
||||
})
|
||||
watch(
|
||||
() => props.footer,
|
||||
(newValue) => {
|
||||
|
|
@ -455,13 +465,6 @@ const scroll = () => {
|
|||
};
|
||||
//#endregion
|
||||
//#region 页面设置 导出 导入
|
||||
const content_style = ref('');
|
||||
watch(page_data.value.com_data, (val) => {
|
||||
const content = val?.content || {};
|
||||
const container_common_styles = gradient_computer(content) + background_computer(content);
|
||||
|
||||
content_style.value = container_common_styles;
|
||||
});
|
||||
// 在组件挂载时默认执行
|
||||
onMounted(() => {
|
||||
page_settings();
|
||||
|
|
@ -477,6 +480,7 @@ const page_settings = () => {
|
|||
item.show_tabs = false;
|
||||
});
|
||||
}
|
||||
|
||||
emits('rightUpdate', page_data.value, diy_data.value, page_data.value, footer_nav.value);
|
||||
};
|
||||
//导出
|
||||
|
|
|
|||
|
|
@ -33,7 +33,6 @@ export function gradient_computer(new_style: gradientStyle) {
|
|||
* @returns 返回一个字符串，包含生成的线性渐变样式。
|
||||
*/
|
||||
export function gradient_handle(color_list: color_list[], direction: string) {
|
||||
console.log(color_list, direction);
|
||||
let container_common_styles = ``;
|
||||
if (color_list && color_list.length > 0) {
|
||||
container_common_styles += `background: linear-gradient(${direction || '180deg'},`;
|
||||
|
|
@ -64,7 +63,6 @@ export function gradient_handle(color_list: color_list[], direction: string) {
|
|||
});
|
||||
container_common_styles += `);`;
|
||||
}
|
||||
console.log(container_common_styles);
|
||||
|
||||
return container_common_styles;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue