From 43a67fc0abeffdb4b1ae01c64ad15eb3e1af6fc5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Tue, 3 Mar 2026 10:36:12 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=9F=AD=E8=A7=86=E9=A2=91?=
 =?UTF-8?q?=E6=8F=92=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../diy/components/diy/plugins-video-list.vue | 387 ++++++++++++++++++
 .../diy/components/diy/plugins-video-tabs.vue | 264 ++++++++++++
 2 files changed, 651 insertions(+)
 create mode 100644 pages/diy/components/diy/plugins-video-list.vue
 create mode 100644 pages/diy/components/diy/plugins-video-tabs.vue

diff --git a/pages/diy/components/diy/plugins-video-list.vue b/pages/diy/components/diy/plugins-video-list.vue
new file mode 100644
index 00000000..558c6bea
--- /dev/null
+++ b/pages/diy/components/diy/plugins-video-list.vue
@@ -0,0 +1,387 @@
+<template>
+    <!-- 视频列表 -->
+    <view class="oh" :style="style_container">
+        <view class="oh" :style="style_img_container">
+            <view class="pr oh" :style="style">
+                <view v-if="!['4'].includes(plugins_video_theme)" class="flex-wrap" :class="plugins_video_theme_class" :style="plugins_video_theme !== '3' ? plugins_video_spacing : ''">
+                    <view v-for="(item, index) in data_list" :key="index" class="item oh" :style="plugins_video_style" :data-value="item.data.url" @tap="url_event">
+                        <view :class="plugins_video_theme == '0' ? 'flex-row oh' : 'flex-col oh h'" :style="plugins_video_img_style">
+                            <template v-if="plugins_video_theme !== '3'">
+                                <view class="oh pr flex-row">
+                                    <template v-if="item.new_cover.length > 0">
+                                        <image :src="item.new_cover[0].url" class="img" :style="img_radius + img_size" mode="aspectFill" />
+                                    </template>
+                                    <template v-else>
+                                        <image :src="item.data.cover" class="img" :style="img_radius + img_size" mode="aspectFill" />
+                                    </template>
+                                    <!-- 角标 -->
+                                    <subscriptIndex :propValue="propValue"></subscriptIndex>
+                                </view>
+                            </template>
+                            <view v-if="field_show.includes('0') || field_show.includes('1') || field_show.includes('2') || field_show.includes('3')" class="jc-sb flex-1" :class="plugins_video_theme == '3' ? 'flex-row align-c' : 'flex-col'" :style="plugins_video_theme !== '0' ? content_padding : ''">
+                                <view class="flex-col" :class="plugins_video_theme == '3' ? 'flex-1 flex-width' : ''">
+                                    <text v-if="field_show.includes('3')" class="title" :class="plugins_video_theme == '3' ? 'text-line-1' : 'text-line-2'" :style="plugins_video_name">{{ item.new_title ? item.new_title : item.data.title }}</text>
+                                </view>
+                                <view class="flex-row jc-sb gap-8" :class="plugins_video_theme == '3' ? 'margin-left' : 'align-e margin-top'">
+                                    <text :style="plugins_video_date">{{ field_show.includes('0') ? item.data.add_time : '' }}</text>
+                                    <view v-show="field_show.includes('1')" class="flex-row align-c gap-3" :style="plugins_video_page_view">
+                                        <iconfont name="icon-eye" propContainerDisplay="flex" size="24rpx"></iconfont>
+                                        <view>
+                                            {{ item.data.access_count ? item.data.access_count : '' }}
+                                        </view>
+                                    </view>
+                                </view>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+                <view v-else class="oh" :class="plugins_video_theme_class">
+                    <swiper class="swiper" circular :autoplay="is_roll ? true : false" :interval="interval_time" :next-margin="next_margin" :display-multiple-items="slides_per_group" :style="'height:' + carousel_height_computer">
+                        <swiper-item v-for="(item1, index1) in plugins_video_carousel_list" :key="index1">
+                            <view class="flex-row ht-auto" :style="plugins_video_spacing">
+                                <view v-for="(item, index) in item1.split_list" :key="index" class="item oh ht-auto" :style="plugins_video_style" :data-value="item.data.url" @tap="url_event">
+                                    <template v-if="!isEmpty(item)">
+                                        <view class="oh flex-col ht-auto" :style="plugins_video_img_style">
+                                            <view class="oh pr wh-auto ht-auto flex-row">
+                                                <template v-if="item.new_cover.length > 0">
+                                                    <image :src="item.new_cover[0].url" class="img" :style="img_radius + 'height:100%;'" mode="aspectFill" />
+                                                </template>
+                                                <template v-else>
+                                                    <image :src="item.data.cover" class="img" :style="img_radius + 'height:100%;'" mode="aspectFill" />
+                                                </template>
+                                                <template v-if="field_show.includes('3') && name_float == '1'">
+                                                    <text class="text-line-1" :style="plugins_video_name + float_name_style">{{ item.new_title ? item.new_title : item.data.title }}</text>
+                                                </template>
+                                                <!-- 角标 -->
+                                                <subscriptIndex :propValue="propValue"></subscriptIndex>
+                                            </view>
+                                            <view v-if="field_show.includes('0') || field_show.includes('1') || field_show.includes('2') || (field_show.includes('3') && name_float == '0')" class="jc-sb flex-1 flex-col" :style="plugins_video_theme !== '0' ? content_padding : ''">
+                                                <view class="flex-col">
+                                                    <text v-if="field_show.includes('3') && name_float == '0'" class="title text-line-2" :style="plugins_video_name + plugins_video_name_height_computer">{{ item.new_title ? item.new_title : item.data.title }}</text> -->
+                                                </view>
+                                                <view :class="'flex-row jc-sb gap-8 align-e' + ((field_show.includes('3') && name_float == '0') || field_show.includes('2') ? ' margin-top' : '')">
+                                                    <text :style="plugins_video_date">{{ field_show.includes('0') ? item.data.add_time : '' }}</text>
+                                                    <view v-show="field_show.includes('1')" class="flex-row align-c gap-3" :style="plugins_video_page_view">
+                                                        <iconfont name="icon-eye" propContainerDisplay="flex" size="24rpx"></iconfont>
+                                                        <view>
+                                                            {{ item.data.access_count ? item.data.access_count : '' }}
+                                                        </view>
+                                                    </view>
+                                                </view>
+                                            </view>
+                                        </view>
+                                    </template>
+                                </view>
+                            </view>
+                        </swiper-item>
+                    </swiper>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    const app = getApp();
+    import { isEmpty, common_styles_computer, common_img_computer, padding_computer, radius_computer, get_math, gradient_handle, background_computer, gradient_computer, margin_computer, box_shadow_computer, border_computer, old_margin, get_swiper_list } from '@/common/js/common/common.js';
+    import subscriptIndex from '@/pages/diy/components/diy/modules/subscript.vue';
+    var system = app.globalData.get_system_info(null, null, true);
+    var sys_width = app.globalData.window_width_handle(system.windowWidth);
+    export default {
+        components: {
+            subscriptIndex,
+        },
+        props: {
+            propValue: {
+                type: Object,
+                default: () => {},
+            },
+            // 是否使用公共样式
+            propIsCommonStyle: {
+                type: Boolean,
+                default: true,
+            },
+            // 关键key
+            propKey: {
+                type: [String, Number],
+                default: '',
+            },
+            // 组件渲染的下标
+            propIndex: {
+                type: Number,
+                default: 1000000,
+            },
+        },
+        data() {
+            return {
+                style_container: '',
+                style_img_container: '',
+                style: '',
+                // 数据
+                data_list: [],
+                // 风格
+                plugins_video_theme: '0',
+
+                // 是否显示
+                field_show: ['0', '1'],
+                // 视频
+                plugins_video_name: '',
+                // 日期
+                plugins_video_date: '',
+                // 浏览量
+                plugins_video_page_view: '',
+                // 内容圆角
+                content_radius: '',
+                // 图片圆角
+                img_radius: '',
+                // 内间距
+                content_padding: '',
+                // 内容间距
+                content_spacing: '',
+                // 视频间距
+                plugins_video_spacing: '',
+                // plugins_video_item_height: '',
+
+                plugins_video_style: '',
+                plugins_video_img_style: '',
+                // 轮播图定时轮播
+                interval_time: 2000,
+                // 轮播图是否滚动
+                is_roll: 1,
+
+                plugins_video_theme_class: '',
+                // 轮播高度
+                carousel_height_computer: '',
+                // 视频内容高度
+                plugins_video_name_height_computer: '',
+                // 视频名称浮动样式
+                float_name_style: '',
+                name_float: '0',
+                // 图片大小
+                img_size: '',
+                // 视频轮播数据
+                plugins_video_carousel_list: [],
+                // 一行显示的数量
+                slides_per_group: 1,
+                next_margin: '0rpx',
+            };
+        },
+        watch: {
+            propKey(val) {
+                // 初始化
+                this.init();
+            },
+        },
+        created() {
+            this.init();
+        },
+        methods: {
+            isEmpty,
+            // 初始化数据
+            init() {
+                const new_content = this.propValue.content || {};
+                const new_style = this.propValue.style || {};
+                this.setData({
+                    name_float: !isEmpty(new_content.name_float) ? new_content.name_float : '0',
+                    // 判断是自动还是手动
+                    data_list:
+                        new_content.data_type == '0'
+                            ? new_content.data_list
+                            : new_content.data_auto_list && new_content.data_auto_list.length > 0
+                            ? new_content.data_auto_list.map((item) => ({
+                                  id: get_math(),
+                                  new_title: '',
+                                  new_cover: [],
+                                  data: item,
+                              }))
+                            : [],
+                    plugins_video_theme_class: this.plugins_video_theme_class_computer(new_content.theme),
+                    plugins_video_theme: new_content.theme,
+                    field_show: new_content.field_show,
+                    // 样式
+                    plugins_video_name: 'font-size:' + new_style.name_size * 2 + 'rpx;' + 'font-weight:' + new_style.name_weight + ';' + 'color:' + new_style.name_color + ';',
+                    plugins_video_date: 'font-size:' + new_style.time_size * 2 + 'rpx;' + 'font-weight:' + new_style.time_weight + ';' + 'color:' + new_style.time_color + ';',
+                    plugins_video_page_view: 'font-size:' + new_style.page_view_size * 2 + 'rpx;' + 'font-weight:' + new_style.page_view_weight + ';' + 'color:' + new_style.page_view_color + ';',
+                    content_radius: radius_computer(new_style.content_radius),
+                    img_radius: radius_computer(new_style.img_radius),
+                    // 内间距
+                    content_padding: padding_computer(new_style.padding),
+                    // 内容间距
+                    content_spacing: `gap: ${new_style.content_spacing}px;`,
+                    // 视频间距
+                    plugins_video_spacing: `gap: ${new_style.plugins_video_spacing}px;`,
+                    next_margin: new_style.rolling_fashion == 'translation' ? '-' + new_style.plugins_video_spacing_margin + 'px' : '0rpx',
+                    // 视频内容高度
+                    slides_per_group: new_style.rolling_fashion == 'translation' ?  Number(new_content.carousel_col) + 1 : 1,
+
+                });
+                // 默认数据
+                const product_style_list = [
+                    { name: '单列展示', value: '0', width:110, height: 83 },
+                    { name: '两列展示（纵向）', value: '1', width:180, height: 180 },
+                    { name: '大图展示', value: '2', width:0, height: 180 },
+                    { name: '无图模式', value: '3', width:0, height: 0 },
+                    { name: '左右滑动展示', value: '4', width:0, height: 0 },
+                ];
+                const scale = sys_width / 390;
+                let img_style = ``;
+                if (['0'].includes(new_content.theme)) {
+                    // 图片宽度
+                    if (typeof new_style.content_img_width == 'number') {
+                        img_style += `width: ${ new_style.content_img_width * scale }px;`;
+                    } else {
+                        const list = product_style_list.filter(item => item.value == new_content.theme);
+                        if (list.length > 0) {
+                            img_style += `width: ${ list[0].width * scale }px;`;
+                        } else {
+                            img_style += 'width: auto;';
+                        }
+                    }
+                }
+                if (!['3', '4'].includes(new_content.theme)) {
+                    // 图片宽度
+                    if (typeof new_style.content_img_height == 'number') {
+                        img_style += `height: ${ new_style.content_img_height * scale }px;`;
+                    } else {
+                        const list = product_style_list.filter(item => item.value == new_content.theme);
+                        if (list.length > 0) {
+                            img_style += `height: ${ list[0].height * scale }px;`;
+                        } else {
+                            img_style += 'height: auto;';
+                        }
+                    }
+                }
+                // 背景图的处理
+                const plugins_video_data = {
+                    background_img_style: new_style?.plugins_video_background_img_style || '',
+                    background_img: new_style?.plugins_video_background_img || '',
+                }
+                const plugins_video_margin = new_style.value?.margin || old_margin;
+                const margin_width = plugins_video_margin.margin_left + plugins_video_margin.margin_right;
+                // 渐变效果
+                const all_style = gradient_handle(new_style?.plugins_video_color_list || [], new_style?.plugins_video_direction || '') + margin_computer(plugins_video_margin) + box_shadow_computer(new_style) + border_computer(new_style);
+                // 视频样式
+                if (this.plugins_video_theme == '0') {
+                    this.setData({
+                        img_size: img_style,
+                        plugins_video_style:  this.content_radius + all_style,
+                        plugins_video_img_style: this.content_spacing + this.content_padding + background_computer(plugins_video_data)
+                    });
+                } else if (this.plugins_video_theme == '1') {
+                    this.setData({
+                        img_size: img_style,
+                        plugins_video_style: `width: calc(50% - ${(new_style.plugins_video_spacing + (margin_width * 2)) / 2}px);` + this.content_radius + all_style,
+                        plugins_video_img_style: background_computer(plugins_video_data)
+                    });
+                } else if (this.plugins_video_theme == '2') {
+                    this.setData({
+                        img_size: img_style,
+                        plugins_video_style: this.content_radius + all_style,
+                        plugins_video_img_style: background_computer(plugins_video_data)
+                    });
+                } else if (this.plugins_video_theme == '3') {
+                    this.setData({
+                        style: `padding: 0 ${new_style.content_spacing}px;background:#fff;` + this.content_radius,
+                    });
+                } else if (this.plugins_video_theme == '4') {
+                    // 更新轮播图的key，确保更换时能重新更新轮播图
+                    const temp_carousel_col = new_content.carousel_col || '1';
+                    // 计算间隔的空间。(gap * gap数量) / 模块数量
+                    let gap = temp_carousel_col !== '0' ? ((new_style.plugins_video_spacing * temp_carousel_col - 1) + (margin_width * temp_carousel_col)) / temp_carousel_col : '0';
+                    const multicolumn_columns_width = new_style.rolling_fashion == 'translation' ? `margin-right: ${ new_style.plugins_video_spacing + plugins_video_margin.margin_right }px;width:100%;` : `width:calc(${100 / (Number(temp_carousel_col) + 1)}% - ${gap * 2}rpx);min-width:calc(${100 / (Number(temp_carousel_col) + 1)}% - ${gap * 2}rpx);`;
+                    const { name_bg_color_list = [], name_bg_direction = '180deg', name_bg_radius, name_bg_padding, name_bg_margin } = new_style;
+                    const data = {
+                        color_list: name_bg_color_list,
+                        direction: name_bg_direction,
+                    }
+                    let location = 'position:absolute;bottom:0;left:0;right:0;'
+                    // 每页显示的数量
+                    const num = Number(temp_carousel_col) + 1;
+                    // 轮播宽度
+                    this.setData({
+                        // 滚动时间
+                        interval_time: (new_style.interval_time || 2) * 1000,
+                        // 是否滚动修改
+                        is_roll: new_style.is_roll,
+                        // plugins_video_item_height: `height: ${new_style.plugins_video_height }px`,
+                        plugins_video_style: this.content_radius + all_style + multicolumn_columns_width,
+                        // 轮播高度
+                        carousel_height_computer: new_style.plugins_video_height * scale + 'px',
+                        // 视频内容高度
+                        plugins_video_name_height_computer: `height:${new_style.name_size * 2.4 * 2}rpx;line-height:${new_style.name_size * 1.2 * 2}rpx;`,
+                        float_name_style: gradient_computer(data) + (!isEmpty(name_bg_radius) ? radius_computer(name_bg_radius) : '') + (!isEmpty(name_bg_padding) ? padding_computer(name_bg_padding) : '' ) + (!isEmpty(name_bg_padding) ? margin_computer(name_bg_margin) : '') + location,
+                        plugins_video_img_style: background_computer(plugins_video_data),
+                        plugins_video_carousel_list: get_swiper_list(this.data_list, num, new_style.rolling_fashion),
+                    });
+                }
+
+                if (this.propIsCommonStyle) {
+                    this.setData({
+                        style_container: common_styles_computer(new_style.common_style),
+                        style_img_container: common_img_computer(new_style.common_style, this.propIndex),
+                    });
+                }
+            },
+            // 视频主题样式
+            plugins_video_theme_class_computer(theme) {
+                switch (theme) {
+                    case '0':
+                        return 'style1 flex-col';
+                    case '1':
+                        return 'style2 flex-row flex-wrap';
+                    case '2':
+                        return 'style3 flex-col';
+                    case '3':
+                        return 'style4 flex-col';
+                    default:
+                        return 'style5';
+                }
+            },
+            // 跳转链接
+            url_event(e) {
+                app.globalData.url_event(e);
+            },
+        },
+    };
+</script>
+<style lang="scss" scoped>
+    .h {
+        height: 100%;
+    }
+    .style1 {
+        .item {
+            max-width: 100%;
+        }
+    }
+    .style2 {
+        .item {
+            .img {
+                width: 100%;
+            }
+        }
+    }
+    .style3 {
+        .item {
+            width: 100%;
+            .img {
+                width: 100%;
+            }
+        }
+    }
+    .style4 {
+        .item {
+            width: 100%;
+            &:not(:last-child) {
+                border-bottom: 2rpx solid #eee;
+            }
+        }
+    }
+    .style5 {
+        .item {
+            width: 100%;
+            .img {
+                width: 100%;
+            }
+        }
+    }
+</style>
diff --git a/pages/diy/components/diy/plugins-video-tabs.vue b/pages/diy/components/diy/plugins-video-tabs.vue
new file mode 100644
index 00000000..cc112eeb
--- /dev/null
+++ b/pages/diy/components/diy/plugins-video-tabs.vue
@@ -0,0 +1,264 @@
+<template>
+    <!-- 文章列表 -->
+    <view class="plugins-video-tabs" :class="'plugins-video-tabs-' + propKey" :style="style_container">
+        <view :style="style_img_container">
+            <component-diy-modules-tabs-view :propKey="propKey" :propValue="plugins_video_tabs" :propIsTop="top_up == '1'" :propTop="sticky_top" :propStyle="tabs_style" :propsTabsContainer="tabs_container" :propsTabsImgContainer="tabs_img_container" :propCustomNavHeight="propIsTabsUseSafeDistance ? (propCustomNavHeight * 2 + 'rpx') : '0rpx'" :propTabsBackground="tabs_background" :propTabsSlidingFixedBg="tabs_sliding_fixed_bg" @onTabsTap="tabs_click_event"></component-diy-modules-tabs-view>
+            <view :style="plugins_video_margin_top">
+                <view :style="plugins_video_container">
+                    <view :style="plugins_video_img_container">
+                        <component-diy-plugins-video-list :propKey="diy_key" :propValue="plugins_video_tabs" :propIsCommonStyle="false"></component-diy-plugins-video-list>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+w
+<script>
+    const app = getApp();
+    import { common_styles_computer, common_img_computer, padding_computer, margin_computer, background_computer, gradient_computer, radius_computer, isEmpty, box_shadow_computer, border_computer, old_border_and_box_shadow, old_margin, old_padding } from '@/common/js/common/common.js';
+    import componentDiyModulesTabsView from '@/pages/diy/components/diy/modules/tabs-view';
+    import componentDiyPluginsVideoList from '@/pages/diy/components/diy/plugins-video-list'; // 状态栏高度
+    var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
+    // #ifdef MP-TOUTIAO
+    bar_height = 0;
+    // #endif
+    export default {
+        props: {
+            propValue: {
+                type: Object,
+                default: () => {},
+            },
+            // 距离顶部高度
+            propTop: {
+                type: Number,
+                default: 0,
+            },
+            // 自定义导航栏高度
+            propCustomNavHeight: {
+                type: Number,
+                default: 33,
+            },
+            // 滚动距离
+            propScrollTop: {
+                type: Number,
+                default: 0,
+            },
+            // 顶部导航是否开启沉浸模式
+            propIsImmersionModel: {
+                type: Boolean,
+                default: false,
+            },
+            propKey: {
+                type: [String, Number],
+                default: '',
+            },
+            // 组件渲染的下标
+            propIndex: {
+                type: Number,
+                default: 1000000,
+            },
+            // 选项卡是否使用安全距离
+            propIsTabsUseSafeDistance: {
+                type: Boolean,
+                default: true
+            }
+        },
+        components: {
+            componentDiyModulesTabsView,
+            componentDiyPluginsVideoList,
+        },
+        data() {
+            return {
+                style_container: '',
+                style_img_container: '',
+                style: '',
+                plugins_video_tabs: {},
+                // 是否滑动置顶
+                top_up: '0',
+                tabs_style: '',
+                tabs_top: 0,
+                tabs_background: 'background:transparent',
+                custom_nav_height: 33,
+                diy_key: '',
+                // 选项卡背景设置
+                plugins_video_margin_top: '',
+                tabs_container: '',
+                tabs_img_container: '',
+                tabs_sliding_fixed_bg: '',
+                // 商品区域背景设置
+                plugins_video_container: '',
+                plugins_video_img_container: '',
+                // #ifdef MP
+                nav_safe_space: bar_height + 5,
+                // #endif
+                // #ifdef H5 || MP-TOUTIAO
+                nav_safe_space: bar_height + 7,
+                // #endif
+                // #ifdef APP
+                nav_safe_space: bar_height + 0,
+                // #endif
+                // 选项卡默认数据
+                tabs_index: 0,
+                sticky_top: 0,
+            };
+        },
+        watch: {
+            // 监听滚动距离
+            propScrollTop(newVal) {
+                if (newVal + this.sticky_top + this.custom_nav_height > this.tabs_top + this.nav_safe_space && this.top_up == '1') {
+                    let new_style = this.propValue.style || {};
+                    let tabs_bg = new_style.common_style.color_list;
+                    let new_tabs_background = '';
+                    if (tabs_bg.length > 0 && (tabs_bg[0].color || null) != null) {
+                        new_tabs_background = gradient_computer(new_style.common_style);
+                    }
+                    let new_tabs_background_img = background_computer(new_style.common_style);
+                    if (new_tabs_background_img.length > 0) {
+                        new_tabs_background_img += 'background-position: top left;';
+                    }
+                    this.tabs_background = (new_tabs_background.length > 0 ? new_tabs_background : 'background:#fff;') + new_tabs_background_img;
+                } else {
+                    this.tabs_background = 'background:transparent';
+                }
+            },
+            propTop(val) {
+                this.init();
+            },
+            propKey(val) {
+                this.setData({
+                    diy_key: val,
+                });
+                // 初始化
+                this.init();
+            },
+        },
+        created() {
+            this.init();
+        },
+        mounted() {
+            this.$nextTick(() => {
+                const self = this;
+                setTimeout(() => {
+                    self.getTop();
+                });
+                // #ifdef H5 || MP-TOUTIAO
+                // 获取自定义导航栏高度
+                this.setData({
+                    custom_nav_height: this.propCustomNavHeight,
+                });
+                // #endif
+            });
+        },
+        methods: {
+            // 初始化数据
+            init() {
+                let new_content = this.propValue.content || {};
+                let new_style = this.propValue.style || {};
+                let new_data = JSON.parse(JSON.stringify(this.propValue));
+
+                const new_tabs_data = new_data.content.tabs_list[this.tabs_index] || {};
+                new_data.content.theme = new_data.content.plugins_video_theme;
+                new_data.content.data_type = new_tabs_data.data_type;
+                new_data.content.category = new_tabs_data.category;
+                new_data.content.carousel_col = new_data.content.plugins_video_carousel_col;
+                new_data.content.data_list = new_tabs_data.data_list;
+                new_data.content.data_auto_list = new_tabs_data.data_auto_list;
+                new_data.content.data_ids = new_tabs_data.data_ids;
+                new_data.content.number = new_tabs_data.number;
+                new_data.content.sort = new_tabs_data.sort;
+                new_data.content.sort_rules = new_tabs_data.sort_rules;
+                new_data.content.field_show = new_data.content.field_show;
+                new_data.content.is_cover = new_tabs_data.is_cover;
+                // 公共样式
+                const common_style = new_style.common_style;
+                let tabs_style_obj = {
+                    padding_top: common_style.padding_top - this.propCustomNavHeight < 0 ? 0 : common_style.padding_top - this.propCustomNavHeight,
+                    padding_left: common_style.padding_left,
+                    padding_right: common_style.padding_right,
+                };
+                let new_tabs_style = padding_computer(tabs_style_obj) + margin_computer(tabs_style_obj) + `position:relative;left: -${tabs_style_obj.padding_left * 2}rpx;right: -${tabs_style_obj.padding_right * 2}rpx;width:100%;`;
+                // 如果是历史数据的话，就执行默认添加下边距
+                if (isEmpty(new_style.tabs_padding)) {
+                    new_tabs_style += 'padding-bottom: 20rpx;';
+                }
+                const { tabs_bg_color_list = [], tabs_bg_direction = '', tabs_bg_background_img_style = '', tabs_bg_background_img = [], tabs_radius = old_radius, tabs_padding = old_padding, plugins_video_content_color_list = [], plugins_video_content_direction = '', plugins_video_content_background_img_style = '', plugins_video_content_background_img = [], plugins_video_content_margin = old_margin, plugins_video_content_padding = old_padding, plugins_video_content_radius = old_radius } = new_style;
+                // 选项卡背景设置
+                const tabs_data = {
+                    color_list: tabs_bg_color_list,
+                    direction: tabs_bg_direction,
+                    background_img_style: tabs_bg_background_img_style,
+                    background_img: tabs_bg_background_img,
+                };
+                // 文章区域背景设置
+                const plugins_video_content_data = {
+                    color_list: plugins_video_content_color_list,
+                    direction: plugins_video_content_direction,
+                    background_img_style: plugins_video_content_background_img_style,
+                    background_img: plugins_video_content_background_img,
+                };
+                const plugins_video_content = new_style?.plugins_video_content || old_border_and_box_shadow;
+                const tabs_content = new_style?.tabs_content || old_border_and_box_shadow;
+                this.setData({
+                    top_up: new_content.tabs_top_up,
+                    sticky_top: this.propTop + (new_style?.tabs_margin?.margin_top || 0),
+                    plugins_video_tabs: new_data,
+                    style_container: common_styles_computer(common_style) + (new_content.tabs_top_up == '1' ? 'overflow: unset;' : ''),
+                    style_img_container: common_img_computer(common_style, this.propIndex) + radius_computer(common_style) +(new_content.tabs_top_up == '1' ? 'overflow: unset;' : ''),
+                    tabs_style: new_tabs_style,
+                    plugins_video_margin_top:  'margin-top:' + (new_style?.plugins_video_content_spacing || 0) * 2 + 'rpx',
+                    tabs_sliding_fixed_bg: gradient_computer(tabs_data),
+                    tabs_container: gradient_computer(tabs_data) + radius_computer(tabs_radius) + margin_computer(new_style?.tabs_margin || old_margin) + border_computer(tabs_content) + box_shadow_computer(tabs_content) + 'overflow: hidden;',
+                    tabs_img_container: background_computer(tabs_data) + padding_computer(tabs_padding) + 'box-sizing: border-box;overflow: hidden;',
+                    plugins_video_container: gradient_computer(plugins_video_content_data) + margin_computer(plugins_video_content_margin) + radius_computer(plugins_video_content_radius) + box_shadow_computer(plugins_video_content) + border_computer(plugins_video_content) + 'overflow: hidden;',
+                    plugins_video_img_container: background_computer(plugins_video_content_data) + padding_computer(plugins_video_content_padding) + 'box-sizing: border-box;overflow: hidden;',
+                });
+            },
+            // tabs切换事件
+            tabs_click_event(index) {
+                let new_data = JSON.parse(JSON.stringify(this.propValue));
+                new_data.content.theme = new_data.content.plugins_video_theme;
+                new_data.content.data_type = new_data.content.tabs_list[index].data_type;
+                new_data.content.category = new_data.content.tabs_list[index].category;
+                new_data.content.carousel_col = new_data.content.plugins_video_carousel_col;
+                new_data.content.data_list = new_data.content.tabs_list[index].data_list;
+                new_data.content.data_auto_list = new_data.content.tabs_list[index].data_auto_list;
+                new_data.content.data_ids = new_data.content.tabs_list[index].data_ids;
+                new_data.content.number = new_data.content.tabs_list[index].number;
+                new_data.content.sort = new_data.content.tabs_list[index].sort;
+                new_data.content.sort_rules = new_data.content.tabs_list[index].sort_rules;
+                new_data.content.field_show = new_data.content.field_show;
+                new_data.content.is_cover = new_data.content.tabs_list[index].is_cover;
+                this.setData({
+                    tabs_index: index,
+                    plugins_video_tabs: new_data,
+                    diy_key: Math.random(),
+                });
+            },
+            // 获取商品距离顶部的距离
+            getTop() {
+                const query = uni.createSelectorQuery().in(this);
+                query
+                    .select('.plugins-video-tabs-' + this.propKey)
+                    .boundingClientRect((res) => {
+                        if ((res || null) != null) {
+                            let new_data = typeof this.propValue == 'string' ? JSON.parse(JSON.stringify(this.propValue)) : this.propValue;
+                            const new_style = new_data.style || {};
+                            this.setData({
+                                tabs_top: res.top - (new_style.common_style?.margin_top || 0) + (new_style?.tabs_margin?.margin_top || 0),
+                            });
+                        }
+                    })
+                    .exec();
+            },
+        },
+    };
+</script>
+<style lang="scss" scoped>
+    .tabs-container {
+        position: relative;
+        width: 100%;
+        left: 0;
+        right: 0;
+    }
+</style>