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

模块内边距可配置

v1.0.0
于肖磊 2024-08-15 18:48:07 +08:00
parent 9eeacb66ef
commit b7af8c6d8f
5 changed files with 52 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,7 +5,7 @@
<image-empty v-model="item1.carousel_img[0]" :style="contentImgRadius"></image-empty> <image-empty v-model="item1.carousel_img[0]" :style="contentImgRadius"></image-empty>
</template> </template>
<template v-else> <template v-else>
<product-list-show :outerflex="form.outerflex" :flex="form.flex" :num="form.num" :actived="props.actived" :is-show="form.data_content.is_show" :value="item1.split_list" :content-img-radius="contentImgRadius"></product-list-show> <product-list-show :outerflex="form.outerflex" :flex="form.flex" :num="form.num" :actived="props.actived" :is-show="form.data_content.is_show" :chunk-padding="form.data_style.chunk_padding" :value="item1.split_list" :content-img-radius="contentImgRadius"></product-list-show>
</template> </template>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>

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

@ -22,7 +22,7 @@
<template v-else> <template v-else>
<div v-for="(item2, index2) in split_list" :key="index2" class="flex-col w h"> <div v-for="(item2, index2) in split_list" :key="index2" class="flex-col w h">
<image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty> <image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
<div v-if="!isEmpty(isShow)" class="flex-col w tl gap-10 pa-10"> <div v-if="!isEmpty(isShow)" class="flex-col w tl gap-10" :style="`${ padding_computer(props.chunkPadding) }`">
<div v-if="isShow.includes('0')" class="text-line-2 size-14">华为荣耀畅享平大幅度发过板华为荣耀畅享平大幅度发过板</div> <div v-if="isShow.includes('0')" class="text-line-2 size-14">华为荣耀畅享平大幅度发过板华为荣耀畅享平大幅度发过板</div>
<div v-if="isShow.includes('1')" class="identifying"><span class="num">¥</span><span>{{'51' }}</span></div> <div v-if="isShow.includes('1')" class="identifying"><span class="num">¥</span><span>{{'51' }}</span></div>
</div> </div>
@ -47,6 +47,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { isEmpty } from 'lodash'; import { isEmpty } from 'lodash';
import { padding_computer } from '@/utils';
interface Props { interface Props {
value: Array<any>; value: Array<any>;
@ -56,6 +57,7 @@ interface Props {
num: number; num: number;
actived: number; actived: number;
isShow: Array<string>; isShow: Array<string>;
chunkPadding: internalStyle;
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {

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

@ -33,18 +33,23 @@
<el-form-item label="间隔时间"> <el-form-item label="间隔时间">
<slider v-model="form.interval_time" :max="100"></slider> <slider v-model="form.interval_time" :max="100"></slider>
</el-form-item> </el-form-item>
<template v-if="tabs_content.data_type === 'commodity' && isShowTitle"> <template v-if="tabs_content.data_type === 'commodity'">
<el-form-item label="主标题"> <template v-if="isShowTitle">
<div class="flex-col gap-10 w"> <el-form-item label="主标题">
<color-picker v-model="form.heading_color" default-color="#000000"></color-picker> <div class="flex-col gap-10 w">
<text-size-type v-model:typeface="form.heading_typeface" v-model:size="form.heading_size"></text-size-type> <color-picker v-model="form.heading_color" default-color="#000000"></color-picker>
</div> <text-size-type v-model:typeface="form.heading_typeface" v-model:size="form.heading_size"></text-size-type>
</el-form-item> </div>
<el-form-item label="副标题"> </el-form-item>
<div class="flex-col gap-10 w"> <el-form-item label="副标题">
<color-picker v-model="form.subtitle_color" default-color="#000000"></color-picker> <div class="flex-col gap-10 w">
<text-size-type v-model:typeface="form.subtitle_typeface" v-model:size="form.subtitle_size"></text-size-type> <color-picker v-model="form.subtitle_color" default-color="#000000"></color-picker>
</div> <text-size-type v-model:typeface="form.subtitle_typeface" v-model:size="form.subtitle_size"></text-size-type>
</div>
</el-form-item>
</template>
<el-form-item label="内间距">
<padding :key="form.carouselKey" :value="form.chunk_padding" @update:value="chunk_padding_change"></padding>
</el-form-item> </el-form-item>
</template> </template>
</card-container> </card-container>
@ -53,6 +58,7 @@
</card-container> </card-container>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { pick } from 'lodash';
const props = defineProps({ const props = defineProps({
value: { value: {
type: Object, type: Object,
@ -75,6 +81,15 @@ const mult_color_picker_event = (arry: string[], type: number) => {
form.value.color_list = arry; form.value.color_list = arry;
form.value.direction = type.toString(); form.value.direction = type.toString();
}; };
const chunk_padding_change = (padding: any) => {
form.value.chunk_padding = Object.assign(form.value.chunk_padding, pick(padding, [
'padding',
'padding_top',
'padding_bottom',
'padding_left',
'padding_right'
]));
};
watchEffect(() => { watchEffect(() => {
form.value = props.value; form.value = props.value;

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

@ -6,7 +6,7 @@
<div class="flex-row align-c jc-c style-size flex-wrap"> <div class="flex-row align-c jc-c style-size flex-wrap">
<div v-for="(item, index) in data_magic_list" :key="index" :style="`${ item.data_style.background_style } ${ content_radius }`" :class="['img-spacing-border', { 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index) }]"> <div v-for="(item, index) in data_magic_list" :key="index" :style="`${ item.data_style.background_style } ${ content_radius }`" :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'"> <template v-if="item.data_content.data_type == 'commodity'">
<div :class="['w h flex-col gap-20', {'ptb-20 plr-15': [0, 1].includes(index) }]"> <div class="w h flex-col gap-20" :style="`${ [0, 1].includes(index) ? padding_computer(item.data_style.chunk_padding) : '' }`">
<div v-if="(!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)) && [0, 1].includes(index)" class="flex-col gap-5 tl"> <div v-if="(!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)) && [0, 1].includes(index)" 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, '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> <p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
@ -35,7 +35,7 @@
<template v-else> <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 } ${ content_radius }`"> <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 } ${ content_radius }`">
<template v-if="item.data_content.data_type == 'commodity'"> <template v-if="item.data_content.data_type == 'commodity'">
<div class="ptb-20 plr-15 w h flex-col gap-20"> <div class="w h flex-col gap-20" :style="`${ padding_computer(item.data_style.chunk_padding) }`">
<div v-if="!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)" class="flex-col gap-5 tl"> <div v-if="!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)" 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, '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> <p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
@ -64,7 +64,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { background_computer, common_styles_computer, get_math, gradient_computer, percentage_count, radius_computer } from '@/utils'; import { background_computer, common_styles_computer, get_math, gradient_computer, percentage_count, radius_computer, padding_computer } from '@/utils';
import { isEmpty, cloneDeep } from 'lodash'; import { isEmpty, cloneDeep } from 'lodash';
const props = defineProps({ const props = defineProps({
value: { value: {
@ -81,7 +81,6 @@ const state = reactive({
}); });
// 如果需要解构，确保使用toRefs // 如果需要解构，确保使用toRefs
const { form, new_style } = toRefs(state); const { form, new_style } = toRefs(state);
// const data_list = computed(() => form.value.data_magic_list);
const outer_spacing = computed(() => new_style.value.image_spacing + 'px'); const outer_spacing = computed(() => new_style.value.image_spacing + 'px');
const outer_sx = computed(() => -(new_style.value.image_spacing / 2) + 'px'); const outer_sx = computed(() => -(new_style.value.image_spacing / 2) + 'px');
// 图片间距设置 // 图片间距设置

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

@ -68,6 +68,13 @@ const data_style = {
subtitle_color: '#FF852A', subtitle_color: '#FF852A',
subtitle_typeface: 'normal', subtitle_typeface: 'normal',
subtitle_size: 14, subtitle_size: 14,
chunk_padding: {
padding: 0,
padding_top: 20,
padding_bottom: 20,
padding_left: 15,
padding_right: 15,
},
is_show: true, is_show: true,
indicator_style: 'dot', indicator_style: 'dot',
indicator_location: 'center', indicator_location: 'center',
@ -156,12 +163,19 @@ const style_click = (index: number) => {
} }
// 规整复制的数据 // 规整复制的数据
const magic_list = (index: number) => { const magic_list = (index: number) => {
return cloneDeep(style_show_list[index]).map((item) => ({ return cloneDeep(style_show_list[index]).map((item, map_index) => ({
...item, ...item,
actived_index: 0, actived_index: 0,
data_content: cloneDeep(data_content), data_content: cloneDeep(data_content),
data_style: { data_style: {
...cloneDeep(data_style), ...cloneDeep(data_style),
chunk_padding: {
padding: show_padding(index, map_index) ? 10 : 0,
padding_top: show_padding(index, map_index) ? 10 : 20,
padding_bottom: show_padding(index, map_index) ? 10 : 20,
padding_left: show_padding(index, map_index) ? 10 : 15,
padding_right: show_padding(index, map_index) ? 10 : 15,
},
carouselKey: get_math(), carouselKey: get_math(),
} }
})); }));
@ -172,6 +186,9 @@ const selected_click = (index: number) => {
selected_active.value = index; selected_active.value = index;
tabs_name.value = 'content'; tabs_name.value = 'content';
} }
const show_padding = (index:number, map_index:number) => {
return index == 7 && ![0, 1].includes(map_index)
}
//#endregion //#endregion
const data_title = (item: any) => { const data_title = (item: any) => {
let title = `共有`; let title = `共有`;