页面代码如下 有一些多余的样式后面有空再修改
在pages.json中页添加如下代码

    ,{
                    "path" : "goods_cash/goods_cash",
                    "style": {
                        "disableScroll": true,
                        "navigationStyle": "custom",
                        "navigationBarTitleText": "0元购",
                            // #ifdef MP
                             "navigationBarTextStyle": "white",
                            // "navigationBarBackgroundColor": "#e93323"
                            // #endif
                            
                        "app-plus": {
                            // #ifdef APP-PLUS
                            "titleNView": {
                                "type": "default"
                            }
                            // #endif
                        }
                    }
                
                }

<!-- 限时秒杀活动 -->
<template>
    <div :style="colorStyle">
        <view class='flash-sale'>
            <view class="bugu-header" :style="{ height: 'calc(' + safeAreaHeight + 'px + 440rpx)' }">
                <view class="bugu-bg" :style="{ height: 'calc(' + safeAreaHeight + 'px + 440rpx)' }">
                    <!--                    <image  src="/static/images/skill-header.png"></image>-->
                </view>
                <view class="holder" :style="{ height: safeAreaHeight + 'px' }"></view>
                <view class="nav-bar">
                    <view class="left" @tap="back">
                        <text class="iconfont icon-xiangzuo"></text>
                        <image src="https://cdn.bugubugu.info/static/app/skill-nav-title.png"></image>
                    </view>
                    <!--                    <view class="right">每日10:00开启限时秒杀</view>-->
                </view>
                <view class='header' v-if="timeList.length > 0">
                    <image v-if="timeList[active].slide" :src='timeList[active].slide'></image>
                    <image v-else src='https://cdn.bugubugu.info/attach/2023/08/79254202308151141059685.jpg'></image>
                </view>
            </view>
        </view>
        <view class='noCommodity' v-if="seckillList.length == 0 && (page != 1 || active == 0)">
            <view class='emptyBox'>
                <image :src="imgHost + '/statics/images/no-thing.png'"></image>
                <view class="tips">{{ $t(`暂无商品，去看点别的吧`) }}</view>
            </view>
        </view>
        <!-- #ifndef MP -->
        <home></home>
        <!-- #endif -->
    </div>
</template>

<script>
const safeAreaHeight = uni.getSystemInfoSync().safeArea.top

import {
    getSeckillIndexTime,
    getSeckillList
} from '../../../api/activity.js';
import home from '@/components/home/index.vue'
import colors from '@/mixins/color.js'
import { HTTP_REQUEST_URL } from '@/config/app';
export default {
    components: {
        home
    },
    mixins: [colors],
    data() {
        return {
            safeAreaHeight,
            imgHost: HTTP_REQUEST_URL,
            topImage: '',
            seckillList: [],
            timeList: [],
            active: 5,
            scrollLeft: 0,
            interval: 0,
            status: 1,
            countDownHour: "00",
            countDownMinute: "00",
            countDownSecond: "00",
            page: 1,
            limit: 8,
            loading: false,
            loadend: false,
            pageloading: false,
            intoindex: ''
        }
    },
    onLoad() {
        this.getSeckillConfig();
    },
    /**
     * 用户点击右上角分享
     */
    // #ifdef MP
    onShareAppMessage: function () {
        let that = this;
        // that.$set(that, "actionSheetHidden", !that.actionSheetHidden);
        // userShare();
        // 2023年10月18日09:59:10 原版的分享图片
        let imageUrl = that.timeList[that.active] ? that.timeList[that.active].slide : "https://cdn.bugubugu.info/attach/2023/08/79254202308151141059685.jpg";
        // let imageUrl = "https://cdn.bugubugu.info/attach/2023/10/3372a202310181013049623.png";
        return {
            title: '限时秒杀' || "",
            imageUrl,
            path: "/pages/activity/goods_seckill/index?spid=" + that.uid,
        };
    },
    onShareTimeline() {
        let that = this;
        // userShare();
        return {
            title: '限时秒杀' || "",
            query: {
                spid: that.uid || 0,
            },
            // 2023年10月18日09:59:10 原版的分享图片
            imageUrl: that.timeList[that.active].slide || "https://cdn.bugubugu.info/attach/2023/08/098c503dac9ed63f40e00239670f97a.jpg",
            // imageUrl:  "https://cdn.bugubugu.info/attach/2023/10/3372a202310181013049623.png",
        };
    },
    // #endif
    methods: {
        back() {
            uni.navigateBack({
                fail() {
                    uni.switchTab({
                        url: '/pages/index/index'
                    });
                }
            })
        },
        getSeckillConfig: function () {
            let that = this;
            getSeckillIndexTime().then(res => {
                that.topImage = res.data.lovely;
                that.timeList = res.data.seckillTime;
                that.active = res.data.seckillTimeIndex;
                that.$nextTick(() => {
                    that.intoindex = 'sort' + res.data.seckillTimeIndex
                })
                if (that.timeList.length) {
                    // wxh.time(that.data.timeList[that.data.active].stop, that);
                    that.scrollLeft = (that.active - 1.37) * 100
                    setTimeout(function () {
                        that.loading = true
                    }, 2000);
                    that.seckillList = [],
                        that.page = 1
                    that.status = that.timeList[that.active].status
                    that.getSeckillList();
                }
            });
        },
        getSeckillList: function () {
            var that = this;
            var data = {
                page: that.page,
                limit: that.limit
            };
            if (that.loadend) return;
            if (that.pageloading) return;
            this.pageloading = true
            getSeckillList(that.timeList[that.active].id, data).then(res => {
                var seckillList = res.data;
                var loadend = seckillList.length < that.limit;
                that.page++;
                that.seckillList = that.seckillList.concat(seckillList),
                    that.page = that.page;
                that.pageloading = false;
                that.loadend = loadend;
            }).catch(err => {
                that.pageloading = false
            });
        },
        settimeList: function (item, index) {
            var that = this;
            this.active = index
            if (that.interval) {
                clearInterval(that.interval);
                that.interval = null
            }
            that.interval = 0,
                that.countDownHour = "00";
            that.countDownMinute = "00";
            that.countDownSecond = "00";
            that.status = that.timeList[that.active].status;
            that.loadend = false;
            that.page = 1;
            that.seckillList = [];
            // wxh.time(e.currentTarget.dataset.stop, that);
            that.getSeckillList();
        },
        goDetails(item) {
            uni.navigateTo({
                url: '/pages/activity/goods_seckill_details/index?id=' + item.id
            })
        }
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        this.getSeckillList();
    }
}
</script>

<style lang="scss">
page {
    background-color: #F5F5F5 !important;
}

.noCommodity {
    padding-bottom: 30rpx;
    padding: 200rpx 0;

    .emptyBox {
        text-align: center;
        padding-top: 20rpx;

        .tips {
            color: #aaa;
            font-size: 26rpx;
        }

        image {
            width: 414rpx;
            height: 304rpx;
        }
    }
}

.flash-sale {
    .bugu-header {
        width: 750rpx;

        .bugu-bg {
            width: 750rpx;
            position: absolute;
            z-index: 0;

            background: linear-gradient(307deg, #CC1922 0%, #FE795E 100%);
            //image{
            //    width: 750rpx;
            //    height: 491rpx;
            //}
        }

        .nav-bar {
            position: relative;
            padding: 0 24rpx;
            z-index: 1;
            display: flex;
            align-items: center;
            height: 72rpx;

            .left {
                display: flex;
                align-items: center;

                .iconfont {
                    font-size: 36rpx;
                    color: white;
                }

                image {
                    margin: 0 24rpx;
                    width: 168rpx;
                    height: 38rpx;
                }
            }

            .right {
                font-size: 26rpx;
                font-weight: 400;
                color: #FFFFFF;
            }
        }

        .header {
            position: relative;
            z-index: 1;
            padding: 0 30rpx;
            margin-top: 35rpx;
        }
    }
}

.flash-sale .header {
    width: 750rpx;
    height: 342rpx;
    //margin: -215rpx auto 0 auto;
    border-radius: 20rpx;
}

.flash-sale .header image {
    width: 100%;
    height: 100%;
    border-radius: 20rpx;
}

.flash-sale .seckillList {
    padding: 0 20rpx;
}

.flash-sale .seckillList .priceTag {
    width: 75rpx;
    height: 70rpx;
}

.flash-sale .seckillList .priceTag image {
    width: 100%;
    height: 100%;
}

.flash-sale .timeLsit {
    width: 610rpx;
    white-space: nowrap;
    margin: 10rpx 0;
}

.flash-sale .timeLsit .item {
    display: inline-block;
    font-size: 20rpx;
    color: #666;
    text-align: center;
    padding: 11rpx 0;
    box-sizing: border-box;
    height: 96rpx;
    margin-right: 35rpx;
}

.flash-sale .timeLsit .item .time {
    width: 120rpx;
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
}

.flash-sale .timeLsit .item.on .time {
    color: var(--view-theme);
}

.flash-sale .timeLsit .item.on .state {
    width: 120rpx;
    height: 30rpx;
    line-height: 30rpx;
    border-radius: 15rpx;
    background: var(--view-theme);
    color: #fff;
}

.flash-sale .countDown {
    height: 92rpx;
    border-bottom: 1rpx solid #f0f0f0;
    margin-top: -14rpx;
    font-size: 28rpx;
    color: #282828;
}

.flash-sale .countDown .num {
    font-size: 28rpx;
    font-weight: bold;
    background-color: #ffcfcb;
    padding: 4rpx 7rpx;
    border-radius: 3rpx;
}

.flash-sale .countDown .text {
    font-size: 28rpx;
    color: #282828;
    margin-right: 13rpx;
}

.flash-sale .list {
    padding: 24rpx 30rpx;
}

.flash-sale .list .item {
    position: relative;
    background-color: #fff;
    border-radius: 24rpx;
    padding: 12rpx;
    display: flex;
    margin-bottom: 24rpx;
    justify-content: start;

    .right {
        flex: 1;
    }
}

.flash-sale .list .item .pictrue {
    width: 253rpx;
    height: 253rpx;
    border-radius: 24rpx;
    margin-right: 24rpx;
}

.flash-sale .list .item .pictrue image {
    width: 100%;
    height: 100%;
    border-radius: 24rpx;
}

.flash-sale .list .item .text {
    //width: 460rpx;
    font-size: 30rpx;
    color: #333;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    //height: 166rpx;
    .progress-container {
        width: 342rpx;
        height: 36rpx;
        background: #FFEEEE;
        border-radius: 18rpx;
        display: flex;
        align-items: center;

        .progress {
            display: flex;
            align-items: center;
            width: 225rpx;
            height: 36rpx;
            background: #F93A4A;
            border-radius: 18rpx;
            position: relative;

            text {
                font-size: 22rpx;
                font-weight: 400;
                color: #FFFFFF;
                padding-left: 12rpx;
            }

            image {
                position: absolute;
                right: 0;
                top: -4rpx;
                width: 44rpx;
                height: 44rpx;
            }
        }
    }

    .bottom {
        display: flex;
        align-items: flex-end;
        align-content: flex-end;
        justify-content: space-between;

        >view {
            display: flex;
            flex-direction: column;
        }

        .y_money {
            font-size: 24rpx;
            font-weight: 400;
            color: #979DA8;
            line-height: 33rpx;

            text {
                text-decoration: line-through;
            }
        }

        .money {
            line-height: 48rpx;
            font-size: 34rpx;
            font-weight: bold;
            color: #F93A4A;
            margin-top: 8rpx;
        }

        .btn {
            width: 140rpx;
            height: 60rpx;
            line-height: 60rpx;
            text-align: center;
            background: linear-gradient(137deg, #F93A4A 0%, #CC1922 100%);
            box-shadow: 0rpx 10rpx 20rpx 1rpx rgba(204, 25, 34, 0.3);
            border-radius: 30rpx;

            font-size: 30rpx;
            font-weight: 400;
            color: #FFFFFF;
        }
    }
}

.flash-sale .list .item .text .name {
    font-size: 34rpx;
    font-weight: bold;
    color: #333333;
}

.flash-sale .list .item .text .money {
    font-size: 30rpx;
}

.flash-sale .list .item .text .money .num {
    font-size: 40rpx;
    font-weight: 500;
    font-family: 'Guildford Pro';
}

.flash-sale .list .item .text .money .y_money {
    font-size: 24rpx;
    color: #999;
    text-decoration-line: line-through;
    margin-left: 15rpx;
}

.flash-sale .list .item .text .limit {
    font-size: 22rpx;
    color: #999;
    margin-bottom: 5rpx;
}

.flash-sale .list .item .text .limit .limitPrice {
    margin-left: 10rpx;
}

.flash-sale .list .item .text .progress {
    //overflow: hidden;
    background-color: #FFEFEF;
    width: 260rpx;
    border-radius: 18rpx;
    height: 18rpx;
    position: relative;
}

.flash-sale .list .item .text .progress .bg-reds {
    width: 0;
    height: 100%;
    transition: width 0.6s ease;
    background: linear-gradient(90deg, rgba(233, 51, 35, 1) 0%, rgba(255, 137, 51, 1) 100%);
}

.flash-sale .list .item .text .progress .piece {
    position: absolute;
    left: 8%;
    transform: translate(0%, -50%);
    top: 49%;
    font-size: 16rpx;
    color: #FFB9B9;
}

.flash-sale .list .item .grab {
    font-size: 28rpx;
    color: #fff;
    width: 150rpx;
    height: 54rpx;
    border-radius: 27rpx;
    text-align: center;
    line-height: 54rpx;
    position: absolute;
    right: 30rpx;
    bottom: 30rpx;
    background: #bbbbbb;
}

.flash-sale .saleBox {
    width: 100%;
    height: 230rpx;
    background: var(--view-theme);
    border-radius: 0 0 50rpx 50rpx;
}
</style>