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

页面设置外边距修改

v1.1.0
于肖磊 2024-11-12 16:28:18 +08:00
parent 2a97aecd21
commit 1f693eb64b
5 changed files with 34 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/common/div-content/index.vue
View File

@ -74,7 +74,7 @@
</template>
<!-- 数据魔方 -->
<template v-else-if="item.key == 'data-magic'">
<model-data-magic :key="item.com_data" :value="item.com_data" :show-tabs="item.show_tabs == '1'"></model-data-magic>
<model-data-magic :key="item.com_data" :value="item.com_data" :outer-container-padding="outerContainerPadding" :show-tabs="item.show_tabs == '1'"></model-data-magic>
</template>
<!-- 热区 -->
<template v-else-if="item.key == 'hot-zone'">
@ -82,7 +82,7 @@
</template>
<!-- 自定义 -->
<template v-else-if="item.key == 'custom'">
<model-custom :key="item.com_data" :value="item.com_data" :show-tabs="item.show_tabs == '1'"></model-custom>
<model-custom :key="item.com_data" :value="item.com_data" :outer-container-padding="outerContainerPadding" :show-tabs="item.show_tabs == '1'"></model-custom>
</template>
<!-- 营销组件 -->
<!-- 优惠券 -->
@ -122,6 +122,7 @@ interface Props {
showModelBorder: boolean;
isTabs?: boolean;
mainContentStyle: string;
outerContainerPadding: number;
}
const props = withDefaults(defineProps<Props>(), {
@ -129,6 +130,7 @@ const props = withDefaults(defineProps<Props>(), {
showModelBorder: false,
isTabs: false,
mainContentStyle: '',
outerContainerPadding: 0,
});
const diy_data = ref(props.diyData);

20
src/components/model-custom/index.vue
View File

@ -32,6 +32,10 @@ const props = defineProps({
default: () => {
return {};
},
},
outerContainerPadding: {
type: Number,
default: 0,
}
});
// 用于页面判断显示
@ -45,27 +49,19 @@ const { form, new_style } = toRefs(state);
const custom_height = computed(() => form.value.height * scale.value + 'px');
const div_width = ref(0);
const scale = ref(1);
// 获取当前宽度 和 缩放比例
onMounted(() => {
const { margin_left, margin_right, padding_left, padding_right } = new_style.value.common_style;
// 根据容器宽度来计算内部大小
div_width.value = 390 - margin_left - margin_right - padding_left - padding_right;
// 获得对应宽度的比例
scale.value = div_width.value / 390;
});
const percentage_count = (val: number, container_size: number) => {
return val * scale.value + 'px';
};
// 公共样式
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));
watch(() => new_style.value.common_style, (val) => {
const { margin_left, margin_right, padding_left, padding_right } = val;
watchEffect(() => {
const { margin_left, margin_right, padding_left, padding_right } = new_style.value.common_style;
// 根据容器宽度来计算内部大小
div_width.value = 390 - margin_left - margin_right - padding_left - padding_right;
div_width.value = 390 - margin_left - margin_right - padding_left - padding_right - props.outerContainerPadding;
// 获得对应宽度的比例
scale.value = div_width.value / 390;
}, { deep: true });
});
</script>
<style lang="scss" scoped>
.custom-other {

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

@ -111,6 +111,10 @@ const props = defineProps({
return {};
},
},
outerContainerPadding: {
type: Number,
default: 0,
}
});
// 用于页面判断显示
const state = reactive({
@ -346,13 +350,13 @@ const style_img_container = computed(() => common_img_computer(new_style.value.c
// 图片魔方的缩放比例
const magic_scale = ref(1);
const typewidth = ref(0);
watch(() => new_style.value.common_style, (val) => {
const { margin_left, margin_right, padding_left, padding_right } = val;
watchEffect(() => {
const { margin_left, margin_right, padding_left, padding_right } = new_style.value.common_style;
// 根据容器宽度来计算内部大小
typewidth.value = 390 - margin_left - margin_right - padding_left - padding_right;
typewidth.value = 390 - margin_left - margin_right - padding_left - padding_right - props.outerContainerPadding;
// 获得对应宽度的比例
magic_scale.value = typewidth.value / 390;
}, { immediate:true, deep: true });
});
</script>
<style lang="scss" scoped>
// 图片魔方是一个正方形，根据宽度计算高度

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

@ -13,7 +13,7 @@
<template v-if="search_content.is_search_show == '1'">
<card-container>
<div class="mb-12">搜索按钮</div>
<el-form-item label="搜索按钮">
<el-form-item label="按钮文字">
<color-picker v-model="form.button_inner_color" default-color="#fff"></color-picker>
</el-form-item>
<el-form-item v-if="content.search_type != 'img'" label="背景设置">

19
src/views/layout/components/main/index.vue
View File

@ -68,12 +68,12 @@
</div>
<!-- 页面设置 -->
<page-settings :show-page="page_data.show_tabs == '1'" :page-data="page_data" :scoll-top="scoll_top" @page_settings="page_settings"></page-settings>
<div class="model-wall" :style="`margin-top: ${top_margin}px;`">
<div class="model-wall" :style="`margin-top: ${top_margin}px;${main_content_up_and_down_style}` ">
<div class="model-wall-content" :style="`padding-top:${top_padding}px;padding-bottom:${bottom_navigation_show ? footer_nav_counter_store.padding_footer : 0}px;`">
<div-content :diy-data="tabs_data" :show-model-border="show_model_border" :is-tabs="true" :main-content-style="main_content_style" @on_choose="set_tabs_event(true)" @del="del"></div-content>
<div-content :diy-data="tabs_data" :show-model-border="show_model_border" :is-tabs="true" :main-content-style="main_content_style" :outer-container-padding="outer_container_padding" @on_choose="set_tabs_event(true)" @del="del"></div-content>
<div v-if="tabs_data.length > 0" class="seat"></div>
<VueDraggable v-model="diy_data" :animation="500" :touch-start-threshold="2" group="people" class="drag-area re" ghost-class="ghost" :on-sort="on_sort" :on-start="on_start" :on-end="on_end">
<div-content :diy-data="diy_data" :show-model-border="show_model_border" :main-content-style="main_content_style" @on_choose="on_choose" @del="del" @copy="copy" @move-up="moveUp" @move-down="moveDown"></div-content>
<div-content :diy-data="diy_data" :show-model-border="show_model_border" :main-content-style="main_content_style" :outer-container-padding="outer_container_padding" @on_choose="on_choose" @del="del" @copy="copy" @move-up="moveUp" @move-down="moveDown"></div-content>
</VueDraggable>
</div>
</div>
@ -88,7 +88,7 @@
</div>
</template>
<script setup lang="ts">
import { background_computer, get_math, gradient_computer, padding_computer, online_url } from '@/utils';
import { background_computer, get_math, gradient_computer } from '@/utils';
import { cloneDeep, isEmpty } from 'lodash';
import { SortableEvent, VueDraggable } from 'vue-draggable-plus';
import defaultSettings from './index';
@ -152,6 +152,8 @@ const top_margin = ref(0);
const content_style = ref('');
const content_img_style = ref('');
const main_content_style = ref('');
const main_content_up_and_down_style = ref('');
const outer_container_padding = ref(0);
const bottom_navigation_show = ref(true);
// 更新数据第一个的安全距离
const set_padding_top_value = () => {
@ -183,8 +185,13 @@ watchEffect(() => {
const new_style = data.style;
content_style.value = gradient_computer(new_style.common_style);
content_img_style.value = background_computer(new_style.common_style);
main_content_style.value = padding_computer(new_style.common_style);
const { padding_top = 0, padding_left = 0, padding_right = 0, padding_bottom = 0 } = new_style.common_style;
// 外容器的上下间距
main_content_up_and_down_style.value = `padding: ${padding_top}px 0px ${padding_bottom}px 0px;`;
// 外容器的左右间距
main_content_style.value = `padding: 0px ${ padding_right }px 0px ${ padding_left }px;`;
// 外容器的左右间距总数
outer_container_padding.value = padding_right + padding_right;
const { immersive_style, up_slide_display, data_alone_row_space, general_safe_distance_value } = new_style;
// 不开启沉浸式 和 上滑显示