diff --git a/common/js/common/common.js b/common/js/common/common.js
index dede6101..a8da3fbb 100644
--- a/common/js/common/common.js
+++ b/common/js/common/common.js
@@ -629,4 +629,25 @@ export function get_math() {
export const percentage_count = (num, container_size) => {
const marks = (num / container_size) * 100;
return marks.toFixed(4) + '%';
+};
+
+/**
+ * 计算当前偏移量
+ *
+ * @param size 当前的组件的大小宽或者高。
+ * @param location 容器的位置的偏移量。
+ * @param container_size 对应位置的容器的大小
+ * @returns 偏移量
+ */
+export const location_compute = (size, location, container_size) => {
+ if (size + location >= container_size) {
+ const deviation = container_size - size;
+ if (deviation >= 0) {
+ return deviation;
+ } else {
+ return 0;
+ }
+ } else {
+ return location;
+ }
};
\ No newline at end of file
diff --git a/components/diy/custom.vue b/components/diy/custom.vue
index ad8ea57d..07f04b40 100644
--- a/components/diy/custom.vue
+++ b/components/diy/custom.vue
@@ -10,7 +10,7 @@
-
+
@@ -23,7 +23,7 @@
-
+
@@ -44,7 +44,7 @@
-
+
@@ -52,14 +52,14 @@
-
+
-
+
diff --git a/components/diy/data-magic.vue b/components/diy/data-magic.vue
index df66dee4..46bd15cc 100644
--- a/components/diy/data-magic.vue
+++ b/components/diy/data-magic.vue
@@ -203,8 +203,8 @@
const new_style = this.propValue.style;
const container_height = !isEmpty(new_form.container_height) ? new_form.container_height : sys_width;
const density = !isEmpty(new_form.magic_cube_density) ? new_form.magic_cube_density : 4;
- const { margin_left, margin_right, padding_left, padding_right } = new_style.common_style;
- const width = sys_width - margin_left - margin_right - padding_left - padding_right - border_width(new_style.common_style) - this.propOuterContainerPadding;
+ const { margin_left, margin_right } = new_style.common_style;
+ const width = sys_width - margin_left - margin_right - border_width(new_style.common_style) - this.propOuterContainerPadding;
this.setData({
form: new_form,
new_style: new_style,
diff --git a/components/diy/diy.vue b/components/diy/diy.vue
index b0e1a4ea..14c6cc8d 100644
--- a/components/diy/diy.vue
+++ b/components/diy/diy.vue
@@ -10,7 +10,7 @@
-
+
@@ -26,9 +26,9 @@
-
-
-
+
+
+
@@ -290,44 +290,67 @@
}
},
get_diy_prop_top() {
- // 不开启沉浸模式时的处理
- if (!this.is_immersion_model) {
- return this.temp_sticky_top + this.tabs_height;
- } else {
- // 开启沉浸模式且开启选项卡置顶时
- if (this.is_tabs_data_topped) {
- return this.tabs_height;
+ return (item) => {
+ // 不开启沉浸模式时的处理
+ if (!this.is_immersion_model) {
+ return this.temp_sticky_top + this.tabs_height;
} else {
- // 开启安全距离
- if (this.is_the_safe_distance_enabled) {
- return this.is_header_top ? this.temp_sticky_top : 0;
+ // 开启沉浸模式且开启选项卡置顶时
+ if (this.is_tabs_data_topped) {
+ return this.tabs_height;
} else {
- return 0;
+ // 开启安全距离
+ let is_general_safe_distance_num = this.temp_sticky_top;
+ // #ifdef H5 || MP-TOUTIAO
+ is_general_safe_distance_num = this.is_header_top ? this.temp_sticky_top : 0
+ // #endif
+ if (this.is_the_safe_distance_enabled) {
+ return is_general_safe_distance_num;
+ } else {
+ if (item?.content?.is_general_safe_distance == '1') {
+ return is_general_safe_distance_num;
+ } else {
+ return 0;
+ }
+ }
}
}
- }
+ }
},
get_diy_custom_nav_height() {
- // 不开启沉浸模式时的处理
- if (!this.is_immersion_model) {
+ return (item) => {
let header_height = (this.is_search_alone_row ? 66 + this.data_alone_row_space : 33);
// #ifdef H5 || MP-TOUTIAO
header_height = this.is_header_top ? header_height : 0;
// #endif
- return header_height;
- } else {
- // 开启沉浸模式且开启选项卡置顶时
- if (this.is_tabs_data_topped) {
- return 0;
+ // 不开启沉浸模式时的处理
+ if (!this.is_immersion_model) {
+ return header_height;
} else {
- // 开启沉浸模式时并且开启安全距离
- if (this.is_the_safe_distance_enabled) {
- return this.is_search_alone_row ? 66 + this.data_alone_row_space : 33;
+ // 开启沉浸模式且开启选项卡置顶时
+ if (this.is_tabs_data_topped) {
+ return 0;
} else {
- return 0
- }
- }
+ // 开启沉浸模式时并且开启安全距离
+ if (this.is_the_safe_distance_enabled) {
+ return this.is_search_alone_row ? 66 + this.data_alone_row_space : 33;
+ } else {
+ if (item?.content?.is_general_safe_distance == '1') {
+ return header_height;
+ } else {
+ return 0;
+ }
+ }
+ }
+ }
}
+ },
+ getPropIsTabsUseSafeDistance() {
+ let is_tabs_use_safe_distance = this.is_immersion_model;
+ // #ifdef H5 || MP-TOUTIAO
+ is_tabs_use_safe_distance = this.is_immersion_model && this.is_header_top;
+ // #endif
+ return is_tabs_use_safe_distance || !this.is_immersion_model;
}
},
watch: {
diff --git a/components/diy/img-magic.vue b/components/diy/img-magic.vue
index dd900472..3d2433a1 100644
--- a/components/diy/img-magic.vue
+++ b/components/diy/img-magic.vue
@@ -143,8 +143,9 @@
const container_height = !isEmpty(new_content.container_height) ? new_content.container_height : sys_width;
const density = !isEmpty(new_content.magic_cube_density) ? new_content.magic_cube_density : 4;
- const { margin_left, margin_right, padding_left, padding_right } = new_style.common_style;
- const width = sys_width - margin_left - margin_right - padding_left - padding_right - border_width(new_style.common_style) - this.propOuterContainerPadding;
+ const { margin_left, margin_right } = new_style.common_style;
+ const width = sys_width - margin_left - margin_right - border_width(new_style.common_style) - this.propOuterContainerPadding;
+ const scale = width / 390;
this.setData({
form: this.propValue.content,
new_style: this.propValue.style,
@@ -155,7 +156,7 @@
style_img_container: common_img_computer(new_style.common_style, this.propIndex) + 'box-sizing: border-box;',
img_fit: fit,
div_width: sys_width,
- container_size: container_height * (width / 390) + 'px',
+ container_size: container_height * scale + 'px',
cube_cell: sys_width / density,
content_img_container: common_styles_computer(new_style) + margin_computer(new_style?.margin || old_margin) + 'box-sizing: border-box;',
content_img_style_container: common_img_computer(new_style) + padding_computer(new_style?.padding || old_padding) + 'box-sizing: border-box;',
diff --git a/components/diy/modules/custom/data-group-rendering.vue b/components/diy/modules/custom/data-group-rendering.vue
index 42441f4a..e5a9e423 100644
--- a/components/diy/modules/custom/data-group-rendering.vue
+++ b/components/diy/modules/custom/data-group-rendering.vue
@@ -1,6 +1,6 @@
-
-
+
+
@@ -26,6 +26,7 @@ import modelLines from '@/components/diy/modules/custom/model-lines.vue';
import modelImage from '@/components/diy/modules/custom/model-image.vue';
import modelIcon from '@/components/diy/modules/custom/model-icon.vue';
import modelPanel from '@/components/diy/modules/custom/model-panel.vue';
+import { location_compute } from '@/common/js/common/common.js';
export default {
components: {
modelText,
@@ -42,6 +43,10 @@ export default {
},
required: true,
},
+ propIndex: {
+ type: Number,
+ default: 0,
+ },
propSourceList: {
type: Object,
default: () => {
@@ -96,15 +101,51 @@ export default {
propConfigLoop: {
type: String,
default: "1"
- },
+ }
},
data() {
- return {};
+ return {
+ new_list: [],
+ custom_width: 0,
+ };
+ },
+ watch: {
+ propKey(val) {
+ // 初始化
+ this.init();
+ },
},
computed: {
get_percentage_count() {
- return (num) => {
- return num * this.propScale + 'px';
+ return (num, data_follow, type, is_auto = '0', max_size = 0) => {
+ // 检查类型是否为'left'或'top'，如果是，则根据跟随数据计算样式
+ if (['left', 'top'].includes(type)) {
+ const { id = '', type: follow_type = 'left' } = data_follow || { id: '', type: 'left' };
+ // 如果id不为空且follow_type与type匹配，则返回原始值的字符串表示
+ if (id !== '' && follow_type === type) {
+ return `${num}px`;
+ }
+ // 如果条件不满足，则根据比例缩放num并返回
+ return `${num * this.propScale}px`;
+ } else {
+ // 如果is_auto设置为'1'，则根据type和max_size计算自动样式
+ if (is_auto === '1') {
+ if (type === 'width' || type === 'height') {
+ if (typeof max_size === 'number' && max_size >= 0) {
+ const scaledMaxSize = max_size * this.propScale;
+ const autoStyle = 'auto;';
+ const maxSizeStyle = ` max-${type}: ${scaledMaxSize}px;`;
+ const whiteSpaceStyle = type === 'width' ? ' white-space:nowrap;' : '';
+ return `${ autoStyle }${ maxSizeStyle }${ whiteSpaceStyle }`;
+ } else {
+ return 'auto;';
+ }
+ }
+ } else {
+ // 如果is_auto未设置或条件不满足，则根据比例缩放num并返回
+ return `${num * this.propScale}px`;
+ }
+ }
};
},
get_animation_class() {
@@ -118,7 +159,98 @@ export default {
};
}
},
+ mounted() {
+ this.init();
+ },
methods: {
+ async init() {
+ await this.get_custom_width();
+ this.set_new_list(this.propCustomList);
+ },
+ get_custom_width() {
+ // 获取当前容器的宽度
+ const query = uni.createSelectorQuery().in(this);
+ query.select('.allSignList-' + this.propIndex + this.propKey)
+ .boundingClientRect((res) => {
+ if (res) {
+ this.setData({
+ custom_width: res.width,
+ });
+ }
+ })
+ .exec();
+ },
+ async set_new_list(val) {
+ // 第一次渲染先渲染全部数据
+ this.setData({
+ new_list: val
+ });
+ // 判断是否有跟随的数据
+ const follow_list = val.filter(item => item.com_data?.data_follow?.id !== '');
+ if (follow_list.length > 0) {
+ // 等待页面渲染完成之后再获取内容
+ await this.$nextTick();
+ // 第二次如果有跟随数据，更新对应数据的内容， 如果有超出容器范围的数据，限制其超出容器范围
+ const query = uni.createSelectorQuery().in(this);
+ query.selectAll('.sign-' + this.propIndex + this.propKey)
+ .boundingClientRect((rect) => {
+ if (rect) {
+ // 将返回的内容转成map对象，方便快速查找，节省性能
+ const idMap = new Map(rect.map(item => [item.dataset.id, item]));
+ // 历史数据拷贝，方便后续操作避免每次都更新数据，统一重新渲染
+ const val = JSON.parse(JSON.stringify(this.new_list));
+ val.forEach((item1) => {
+ const { data_follow } = item1.com_data;
+ const targetItem = idMap.get(data_follow?.id);
+ if (targetItem) {
+ const text_item = item1.key == 'text' ? idMap.get((item1?.id || '')+ '') : undefined;
+ if (data_follow?.type === 'left') {
+ // 更新位置信息
+ const location_x = this.updateLocation(targetItem, data_follow, this.propScale, true);
+ // 获取组件的宽度，如果是宽度自适应，则需要重新计算位置
+ let item_width = item1.com_data.com_width;
+ // 如果是宽度自适应,需要重新判断一下处理逻辑
+ if (item1.com_data?.is_width_auto === '1' && text_item) {
+ item_width = text_item.width;
+ }
+ // 根据容器信息更新位置信息
+ item1.location.x = location_compute(item_width, location_x, this.custom_width);
+ } else if (data_follow?.type === 'top') {
+ // 更新位置信息
+ const location_y = this.updateLocation(targetItem, data_follow, this.propScale, false);
+ // 获取组件的宽度，如果是宽度自适应，则需要重新计算位置
+ let item_height = item1.com_data.com_height;
+ // 如果是高度自适应,需要重新判断一下处理逻辑
+ if (item1.com_data?.is_height_auto === '1' && text_item) {
+ item_height = text_item.height;
+ }
+ // 根据容器信息更新位置信息
+ item1.location.y = location_compute(item_height, location_y, this.propDataHeight * this.propScale);
+ }
+ }
+ });
+ this.setData({
+ new_list: val
+ });
+ }
+ })
+ .exec();
+ }
+ },
+ updateLocation(targetItem, data_follow, scale, isX) {
+ try {
+ const locationValueStr = targetItem.dataset[`location${isX ? 'X' : 'Y'}`];
+ if (locationValueStr == null) {
+ return;
+ }
+ const locationValue = parseFloat(locationValueStr);
+ if (isNaN(locationValue) || scale <= 0 || (isX ? targetItem.width < 0 : targetItem.height < 0)) return;
+
+ return ((locationValue + (data_follow?.spacing || 0)) * scale) + (isX ? targetItem.width : targetItem.height);
+ } catch (error) {
+ console.error(`Error updating location ${isX ? 'X' : 'Y'}:`, error);
+ }
+ },
url_event(e) {
this.$emit('url_event', e, this.propDataIndex, this.propDataSplitIndex);
}
diff --git a/components/diy/modules/custom/data-rendering.vue b/components/diy/modules/custom/data-rendering.vue
index 09fb8151..4ffa05a3 100644
--- a/components/diy/modules/custom/data-rendering.vue
+++ b/components/diy/modules/custom/data-rendering.vue
@@ -1,6 +1,6 @@
-
-
+
+
@@ -30,6 +30,7 @@ import modelImage from '@/components/diy/modules/custom/model-image.vue';
import modelIcon from '@/components/diy/modules/custom/model-icon.vue';
import modelPanel from '@/components/diy/modules/custom/model-panel.vue';
import modelCustomGroup from '@/components/diy/modules/custom/model-custom-group.vue';
+import { location_compute } from '@/common/js/common/common.js';
export default {
components: {
modelText,
@@ -47,6 +48,10 @@ export default {
},
required: true,
},
+ propIndex: {
+ type: Number,
+ default: 0,
+ },
propSourceList: {
type: Object,
default: () => {
@@ -110,12 +115,48 @@ export default {
}
},
data() {
- return {};
+ return {
+ new_list: [],
+ custom_width: 0,
+ };
+ },
+ watch: {
+ propKey(val) {
+ // 初始化
+ this.init();
+ },
},
computed: {
get_percentage_count() {
- return (num) => {
- return num * this.propScale + 'px';
+ return (num, data_follow, type, is_auto = '0', max_size = 0) => {
+ // 检查类型是否为'left'或'top'，如果是，则根据跟随数据计算样式
+ if (['left', 'top'].includes(type)) {
+ const { id = '', type: follow_type = 'left' } = data_follow || { id: '', type: 'left' };
+ // 如果id不为空且follow_type与type匹配，则返回原始值的字符串表示
+ if (id !== '' && follow_type === type) {
+ return `${num}px`;
+ }
+ // 如果条件不满足，则根据比例缩放num并返回
+ return `${num * this.propScale}px`;
+ } else {
+ // 如果is_auto设置为'1'，则根据type和max_size计算自动样式
+ if (is_auto === '1') {
+ if (type === 'width' || type === 'height') {
+ if (typeof max_size === 'number' && max_size >= 0) {
+ const scaledMaxSize = max_size * this.propScale;
+ const autoStyle = 'auto;';
+ const maxSizeStyle = ` max-${type}: ${scaledMaxSize}px;`;
+ const whiteSpaceStyle = type === 'width' ? ' white-space:nowrap;' : '';
+ return `${ autoStyle }${ maxSizeStyle }${ whiteSpaceStyle }`;
+ } else {
+ return 'auto;';
+ }
+ }
+ } else {
+ // 如果is_auto未设置或条件不满足，则根据比例缩放num并返回
+ return `${num * this.propScale}px`;
+ }
+ }
};
},
get_animation_class() {
@@ -129,7 +170,98 @@ export default {
};
}
},
+ mounted() {
+ this.init();
+ },
methods: {
+ async init() {
+ await this.get_custom_width();
+ this.set_new_list(this.propCustomList);
+ },
+ get_custom_width() {
+ // 获取当前容器的宽度
+ const query = uni.createSelectorQuery().in(this);
+ query.select('.allSignList-' + this.propIndex + this.propKey)
+ .boundingClientRect((res) => {
+ if (res) {
+ this.setData({
+ custom_width: res.width,
+ });
+ }
+ })
+ .exec();
+ },
+ async set_new_list(val) {
+ // 第一次渲染先渲染全部数据
+ this.setData({
+ new_list: val
+ });
+ // 判断是否有跟随的数据
+ const follow_list = val.filter(item => item.com_data?.data_follow?.id !== '');
+ if (follow_list.length > 0) {
+ await this.$nextTick();
+ // 第二次如果有跟随数据，更新对应数据的内容， 如果有超出容器范围的数据，限制其超出容器范围
+ const query = uni.createSelectorQuery().in(this);
+ query.selectAll('.sign-' + this.propIndex + this.propKey)
+ .boundingClientRect((rect) => {
+ if (rect) {
+ // 将返回的内容转成map对象，方便快速查找，节省性能
+ const idMap = new Map(rect.map(item => [item.dataset.id, item]));
+ // 历史数据拷贝，方便后续操作避免每次都更新数据，统一重新渲染
+ const val = JSON.parse(JSON.stringify(this.new_list));
+ val.forEach((item1) => {
+ const { data_follow } = item1.com_data;
+ const targetItem = idMap.get(data_follow?.id);
+ if (targetItem) {
+ const text_item = item1.key == 'text' ? idMap.get((item1?.id || '')+ '') : undefined;
+ if (data_follow?.type === 'left') {
+ // 更新位置信息
+ const location_x = this.updateLocation(targetItem, data_follow, this.propScale, true);
+ // 获取组件的宽度，如果是宽度自适应，则需要重新计算位置
+ let item_width = item1.com_data.com_width;
+ // 如果是宽度自适应,需要重新判断一下处理逻辑
+ if (item1.com_data.is_width_auto === '1' && text_item) {
+ item_width = text_item.width;
+ }
+ // 根据容器信息更新位置信息
+ item1.location.x = location_compute(item_width, location_x, this.custom_width);
+ } else if (data_follow?.type === 'top') {
+ // 更新位置信息
+ const location_y = this.updateLocation(targetItem, data_follow, this.propScale, false);
+ // 获取组件的宽度，如果是宽度自适应，则需要重新计算位置
+ let item_height = item1.com_data.com_height;
+ // 如果是高度自适应,需要重新判断一下处理逻辑
+ if (item1.com_data?.is_height_auto === '1' && text_item) {
+ item_height = text_item.height;
+ }
+ // 根据容器信息更新位置信息
+ item1.location.y = location_compute(item_height, location_y, this.propDataHeight * this.propScale);
+ }
+ }
+ });
+ this.setData({
+ new_list: val
+ });
+ }
+ })
+ .exec();
+ }
+ },
+ updateLocation(targetItem, data_follow, scale, isX) {
+ try {
+ const locationValueStr = targetItem.dataset[`location${isX ? 'X' : 'Y'}`];
+ if (locationValueStr == null) {
+ return;
+ }
+ const locationValue = parseFloat(locationValueStr);
+ if (isNaN(locationValue) || scale <= 0 || (isX ? targetItem.width < 0 : targetItem.height < 0)) return;
+
+ const computedValue = ((locationValue + (data_follow?.spacing || 0)) * scale) + (isX ? targetItem.width : targetItem.height);
+ return computedValue;
+ } catch (error) {
+ console.error(`Error updating location ${isX ? 'X' : 'Y'}:`, error);
+ }
+ },
url_event(e) {
this.$emit('url_event', e, this.propDataIndex, this.propDataSplitIndex);
}
diff --git a/components/diy/modules/custom/model-custom-group.vue b/components/diy/modules/custom/model-custom-group.vue
index fb6143b9..60937d83 100644
--- a/components/diy/modules/custom/model-custom-group.vue
+++ b/components/diy/modules/custom/model-custom-group.vue
@@ -9,7 +9,7 @@
-
+
@@ -22,7 +22,7 @@
-
+
@@ -43,7 +43,7 @@
-
+
@@ -264,7 +264,7 @@
new_style: new_style,
custom_scale: custom_scale,
custom_list_length: new_form.custom_list.length - 1,
- style_container: common_styles_computer(new_style.common_style) + (new_form.is_scroll_bar == '1' ? 'overflow: auto;' : '') + 'box-sizing: border-box;width:100%;height:100%;', // 用于样式显示
+ style_container: common_styles_computer(new_style.common_style) + (new_form.is_scroll_bar == '1' ? 'overflow: auto;' : '') + 'box-sizing: border-box;', // 用于样式显示
style_img_container: common_img_computer(new_style.common_style, this.propIndex),
style_content_container: common_styles_computer(new_data_content_style) + 'box-sizing: border-box;', // 用于样式显示
style_content_img_container: common_img_computer(new_data_content_style),
diff --git a/components/diy/modules/custom/model-text.vue b/components/diy/modules/custom/model-text.vue
index 82f2d4d5..58e4481d 100644
--- a/components/diy/modules/custom/model-text.vue
+++ b/components/diy/modules/custom/model-text.vue
@@ -1,8 +1,8 @@
-
+
-
+
{{ text_title }}
diff --git a/components/diy/modules/data-magic/custom/index.vue b/components/diy/modules/data-magic/custom/index.vue
index d9f452cb..5c7ac5b3 100644
--- a/components/diy/modules/data-magic/custom/index.vue
+++ b/components/diy/modules/data-magic/custom/index.vue
@@ -8,7 +8,7 @@
-
+
@@ -21,7 +21,7 @@
-
+
@@ -31,7 +31,7 @@
-
+
@@ -39,14 +39,14 @@
-
+
-
+
diff --git a/components/diy/seckill.vue b/components/diy/seckill.vue
index 7f8c717c..5a5ca06f 100644
--- a/components/diy/seckill.vue
+++ b/components/diy/seckill.vue
@@ -12,7 +12,7 @@
|
{{ seckill_time.time_first_text }}
-
+
@@ -606,6 +606,10 @@
}
.colon {
position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 33rpx;
top: -2rpx;
}
.slide-bottom {
diff --git a/components/diy/tabs-carousel.vue b/components/diy/tabs-carousel.vue
index e1f19da3..9f095591 100644
--- a/components/diy/tabs-carousel.vue
+++ b/components/diy/tabs-carousel.vue
@@ -2,7 +2,7 @@
-
+
@@ -101,6 +101,7 @@
swiper_bg_img_style: '',
swiper_bg_img_style_null: `background-image: url('')`,
is_rotating_background: false,
+ new_is_tabs_safe_distance: false,
};
},
created() {
@@ -137,14 +138,20 @@
background_img_style: carousel_content_background_img_style,
background_img: carousel_content_background_img,
}
+ // 头部的高度
const newPropTop = app.globalData.rpx_to_px(this.propTop * 2);
+ // 选项卡的外边距
const new_tabs_top = app.globalData.rpx_to_px((tabs_margin?.margin_top || 0) * 2);
+ // 选项卡的实际外边距
const tabs_margin_top = new_content.is_tabs_safe_distance == '1' ? newPropTop + this.propStickyTop : 0;
+ // 选项卡的内边距处理
+ const new_padding_top = new_style.common_style.padding_top - newPropTop;
this.setData({
// style_container: `${common_styles_computer(common_style)};gap:${new_style.data_spacing * 2}rpx`,
style_container: `${common_styles_computer(new_style.common_style)};`,
style_img_container: common_img_computer(new_style.common_style, this.propIndex),
carousel_margin_top: 'margin-top:' + new_style.data_spacing * 2 + 'rpx',
+ new_is_tabs_safe_distance: new_content.is_tabs_safe_distance == '1',
// 是否开启轮播图背景设置
is_rotating_background: new_content.rotating_background == '1',
tabs_sliding_fixed_bg: gradient_computer(tabs_data),
@@ -154,7 +161,7 @@
carousel_img_container: background_computer(carousel_content_data) + padding_computer(carousel_content_padding) + 'box-sizing: border-box;overflow: hidden;',
spacing_common_style: {
padding: 0,
- padding_top: new_style.common_style.padding_top + (this.propIsImmersionModel ? this.propStickyTop : 0),
+ padding_top: (this.propIsImmersionModel && new_content.is_tabs_safe_distance == '1' ? new_style.common_style.padding_top + this.propStickyTop : new_padding_top > 0 ? new_padding_top : 0),
padding_bottom: 0,
padding_left: new_style.common_style.padding_left,
padding_right: new_style.common_style.padding_right,
diff --git a/components/diy/tabs.vue b/components/diy/tabs.vue
index 5d98c62d..8f1c29dd 100644
--- a/components/diy/tabs.vue
+++ b/components/diy/tabs.vue
@@ -86,6 +86,10 @@
type: Boolean,
default: false
},
+ propNewIsTabsSafeDistance: {
+ type: Boolean,
+ default: true
+ },
propTabsSlidingFixedBg: {
type: String,
default: ''
@@ -189,7 +193,7 @@
style_img_container: this.propIsCommon ? common_img_computer(new_style.common_style, this.propIndex) : new_content.tabs_top_up == '1' ? background_computer(new_style.common_style) + padding_computer(this.propSpacingCommonStyle, 1, true) + 'box-sizing: border-box;' : '', // 如果是选项卡轮播，不需要走默认样式
tabs_top_style: new_tabs_top_style,
// 沉浸模式下并且开通了安全距离 会显示-的margin
- style_margin_container: this.propIsImmersionModel ? `margin-top: -${ newPropTop + this.propStickyTop }px;` : '',
+ style_margin_container: this.propIsImmersionModel && this.propNewIsTabsSafeDistance ? `margin-top: -${ newPropTop + this.propStickyTop }px;` : '',
// 判断是否置顶
top_up: new_top_up,
tabs_z_index: 'z-index: 11;'