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

修改页面显示

v1.0.0
于肖磊 2024-08-15 09:40:04 +08:00
parent b8d8859c84
commit 55bf2e997d
7 changed files with 55 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

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

@ -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">

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

@ -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);
const { is_roll, rotation_direction, interval_time } = data_style;
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,
product_list: [...product_list], // 确保深拷贝
img_list: [...img_list] // 确保深拷贝
};
let old_data = old_list.value[key];
// 获取旧数据
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 = {
interval_time: interval_time,
is_roll: is_roll,
rotation_direction: rotation_direction
};
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%;

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

@ -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',

2
src/components/model-nav-group/model-nav-group-styles.vue
View File

@ -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>

18
src/layout/components/main/index.vue
View File

@ -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);
};
//导出

2
src/utils/index.ts
View File

@ -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;
}