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

修改数据魔方显示问题

v1.0.0
于肖磊 2024-08-15 11:58:23 +08:00
parent 7151d1e6b5
commit 1f5dbf928b
3 changed files with 89 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,23 +4,66 @@
<!-- 风格9 -->
<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 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 v-for="(item, index) in data_magic_list" :key="index" :style="`${ item.data_style.background_style }`" :class="['img-spacing-border', { 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index) }]">
<template v-if="item.data_content.data_type == 'commodity'">
<div class="ptb-20 plr-15 w h">
<div class="flex-col gap-5 tl">
<p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
<p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
</div>
<div class="mt-20 w h">
<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="(item1, index1) in item.data_content.list" :key="index1">
<a>13666</a>
</el-carousel-item>
</el-carousel>
</div>
</div>
</template>
<template v-else>
<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="(item1, index1) in item.data_content.list" :key="index1">
<image-empty v-model="item1.carousel_img[0]" :style="content_img_radius"></image-empty>
</el-carousel-item>
</el-carousel>
</template>
<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">
<template v-if="item.data_style.indicator_style == 'num'">
<div :style="item.data_style.indicator_styles" class="dot-item">
<span class="num-active" :style="`color: ${ item.data_style.actived_color }`">{{ item.actived_index + 1 }}</span><span>/{{ item.data_content.product_list.length }}</span>
</div>
</template>
<template v-else>
<div v-for="(item2, index2) in item.data_content.list" :key="index2" :style="`${ item.data_style.indicator_styles }; ${ style_actived_color(item, index2)}`" class="dot-item" />
</template>
</div>
</div>
</div>
</template>
<template v-else>
<div v-for="(item, index) in 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" :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="(item1, index1) in item.data_content.list" :key="index1">
<template v-if="item.data_content.data_type == 'commodity'">
</template>
<template v-else>
<template v-if="item.data_content.data_type == 'commodity'">
<div class="ptb-20 plr-15 w h flex-col gap-20">
<div class="flex-col gap-5 tl">
<p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
<p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
</div>
<div class="w h">
<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="(item1, index1) in item.data_content.list" :key="index1">
<a>13666</a>
</el-carousel-item>
</el-carousel>
</div>
</div>
</template>
<template v-else>
<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="(item1, index1) in item.data_content.list" :key="index1">
<image-empty v-model="item1.carousel_img[0]" :style="content_img_radius"></image-empty>
</template>
</el-carousel-item>
</el-carousel>
</el-carousel-item>
</el-carousel>
</template>
<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">
<template v-if="item.data_style.indicator_style == 'num'">
<div :style="item.data_style.indicator_styles" class="dot-item">
@ -82,6 +125,8 @@ interface data_magic {
x: number;
y: number;
};
heading_title?: string;
subtitle?: string;
actived_index: number;
data_content: any;
data_style: any;
@ -191,6 +236,13 @@ const carousel_change = (index: number, key: number) => {
data_magic_list.value[key].actived_index = index;
}
}
// 根据传递的参数，从对象中取值
const trends_config = (style: any, key: string) => {
return text_style(style[`${key}_typeface`], style[`${key}_size`], style[`${key}_color`]);
}
const text_style = (typeface: string, size: number, color: string) => {
return `font-weight:${ typeface }; font-size: ${ size }px; color: ${ color };`;
}
// 公共样式
const style_container = computed(() => common_styles_computer(new_style.value.common_style));
</script>
@ -201,24 +253,25 @@ const style_container = computed(() => common_styles_computer(new_style.value.co
width: 100%;
overflow: hidden;
}
.cube-selected {
position: absolute;
text-align: center;
color: $cr-main;
box-sizing: border-box;
}
.outer-style {
width: calc(100% + v-bind(outer_spacing));
height: calc(100% + v-bind(outer_spacing));
margin: v-bind(outer_sx);
}
.img-spacing-border {
margin: v-bind(spacing);
}
.text-line-1 {
word-break: break-word;
overflow-wrap: break-word;
word-wrap: break-word;
}
.style-size {
height: 100%;
width: 100%;
@ -263,11 +316,9 @@ const style_container = computed(() => common_styles_computer(new_style.value.co
:deep(.el-image) {
height: 100%;
width: 100%;
.el-image__inner {
object-fit: cover;
}
.image-slot img {
width: 6rem;
}

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

@ -21,6 +21,7 @@
<div class="cube-selected-text">
<template v-if="[0, 1].includes(index)">375 x 375 像素</template>
<template v-else>250 x 375 像素</template>
<div>{{ data_title(item) }}</div>
</div>
</div>
</div>
@ -63,10 +64,10 @@ const data_style = {
interval_time: 2,
heading_color: '#000',
heading_typeface: 'normal',
heading_size: 12,
subtitle_color: '#000',
heading_size: 20,
subtitle_color: '#FF852A',
subtitle_typeface: 'normal',
subtitle_size: 12,
subtitle_size: 14,
is_show: true,
indicator_style: 'dot',
indicator_location: 'center',
@ -142,8 +143,9 @@ const handleResize = () => {
}
}
//#endregion
//#region 选中切换数据
const selected_active = ref(0);
// 切换风格
const style_click = (index: number) => {
form.value.data_magic_list = magic_list(index);
@ -151,6 +153,7 @@ const style_click = (index: number) => {
selected_active.value = 0;
tabs_name.value = 'content';
}
// 规整复制的数据
const magic_list = (index: number) => {
return cloneDeep(style_show_list[index]).map((item) => ({
...item,
@ -163,11 +166,23 @@ const magic_list = (index: number) => {
}));
}
// 选中的点击事件
// 选中风格内不同的块
const selected_click = (index: number) => {
selected_active.value = index;
tabs_name.value = 'content';
}
//#endregion
const data_title = (item: any) => {
let title = `共有`;
if (item.data_content) {
if (item.data_content.data_type == 'commodity') {
title += `${ item.data_content.product_list.length }个商品`;
} else {
title += `${ item.data_content.img_list.length }个图片`;
}
}
return title;
};
</script>
<style lang="scss" scoped>
.card.mb-8 {

2
src/components/model-shop-list/index.vue
View File

@ -176,7 +176,7 @@ const text_line = computed(() => {
let line = '';
if (['1', '6'].includes(product_style.value)) {
line = 'text-line-1'
} else if (['3', '4', '5'].includes(product_style.value)) {
} else if (['0', '2', '3', '4', '5'].includes(product_style.value)) {
line = 'text-line-2'
}
return line;