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

修改页面设置内边距显示

v1.1.0
于肖磊 2024-11-12 17:57:26 +08:00
parent 1f693eb64b
commit 7de16a884e
5 changed files with 24 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/base/padding/index.vue
View File

@ -9,12 +9,14 @@
</el-tooltip>
</div>
<div class="type-icon-animation flex-row flex-wrap gap-x-20 oh" :style="`${ icon_data.name == 'alone' ? 'margin-top:20px;height: 100%;transform: scale(1);' : 'height:0px;transform: scale(0);margin-top:0px;'}`">
<div class="flex-width-half pr-10">
<input-number v-model="form.padding_top" :max="200" icon-name="enter-t" @update:model-value="pt_event"></input-number>
</div>
<div class="flex-width-half pl-10">
<input-number v-model="form.padding_bottom" :max="200" icon-name="enter-b" @update:model-value="pb_event"></input-number>
</div>
<template v-if="isUpDown">
<div class="flex-width-half pr-10">
<input-number v-model="form.padding_top" :max="200" icon-name="enter-t" @update:model-value="pt_event"></input-number>
</div>
<div class="flex-width-half pl-10">
<input-number v-model="form.padding_bottom" :max="200" icon-name="enter-b" @update:model-value="pb_event"></input-number>
</div>
</template>
<div class="flex-width-half pr-10">
<input-number v-model="form.padding_left" :max="200" icon-name="enter-l" @update:model-value="pl_event"></input-number>
</div>
@ -31,6 +33,10 @@ const props = defineProps({
type: Object,
default: () => {},
},
isUpDown: {
type: Boolean,
default: true,
},
});
// 用于页面判断显示
const state = reactive({

6
src/components/common/common-styles/index.vue
View File

@ -25,7 +25,7 @@
<slider v-model="form.module_z_index" :min="0" :max="10"></slider>
</el-form-item>
<el-form-item label="内边距">
<padding :value="form" @update:value="padding_change"></padding>
<padding :value="form" :is-up-down="isUpDown" @update:value="padding_change"></padding>
</el-form-item>
<el-form-item v-if="isMargin" label="外边距">
<margin :value="form" @update:value="margin_change"></margin>
@ -110,6 +110,10 @@ const props = defineProps({
type: Boolean,
default: true,
},
isUpDown: {
type: Boolean,
default: true,
}
});
// value 和初始化数据合并数据
let form = ref(props.value);

5
src/components/model-nav-group/index.vue
View File

@ -100,6 +100,11 @@ const interval_list = ref({
//监听屏幕缩放事件
onMounted(() => {
nextTick(() => {
if (!isEmpty(bannerImg.value)) {
newHeight.value = (bannerImg.value[0]?.clientHeight || 100) + 'px';
}
});
window.onresize = () => {
newHeight.value = bannerImg.value[0]?.clientHeight || 100 + 'px';
};

2
src/components/page-settings/page-styles.vue
View File

@ -102,7 +102,7 @@
<model-search-styles :value="form" :content="props.content" :is-show-common="false"></model-search-styles>
</template>
<div class="bg-f5 divider-line" />
<common-styles :value="form.common_style" :is-margin="false" :is-shadow="false" :is-radius="false" :is-floating-up="false" @update:value="common_styles_update" />
<common-styles :value="form.common_style" :is-margin="false" :is-shadow="false" :is-radius="false" :is-floating-up="false" :is-up-down="false" @update:value="common_styles_update" />
</div>
</template>
<script setup lang="ts">

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

@ -68,7 +68,7 @@
</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;${main_content_up_and_down_style}` ">
<div class="model-wall" :style="`margin-top: ${top_margin}px;`">
<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" :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>
@ -152,7 +152,6 @@ 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);
// 更新数据第一个的安全距离
@ -186,8 +185,6 @@ watchEffect(() => {
content_style.value = gradient_computer(new_style.common_style);
content_img_style.value = background_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;`;
// 外容器的左右间距总数