#

Junjie

2026-01-30 83c63e66237dcf82d20e6e248c77e2ebf12578ba

#

 pages/home/home.vue

@@ -1,11 +1,13 @@
<template>
    <view>
        <view class="error-footer" v-if="crnErrorShow">
            <swiper class="message-swiper" autoplay circular interval="3000" duration="10000" display-multiple-items="1">
                <swiper-item v-for="(message, index) in messages" :key="index">
                    <view class="message-item">{{ message }}</view>
                </swiper-item>
            </swiper>
        <view class="footer-stack" v-if="crnErrorShow">
            <view class="error-footer">
                <swiper class="message-swiper" autoplay circular interval="3000" duration="10000" display-multiple-items="1">
                    <swiper-item v-for="(message, index) in messages" :key="index">
                        <view class="message-item">{{ message }}</view>
                    </swiper-item>
                </swiper>
            </view>
        </view>

        <view class="container">
@@ -892,19 +894,37 @@
        overflow-wrap: anywhere;
    }
    
    .error-footer {
    .footer-stack {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 5vh;
        background-color: rgba(255, 0, 0, 0.8);
        left: 1.5vw;
        right: auto;
        bottom: 2.8vh;
        height: 15vh;
        width: calc(100% - 3vw);
        z-index: 1000;
        overflow: hidden;
        box-sizing: border-box;
    }

    .error-footer {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        gap: 1vw;
        padding: 0.9vh 1vw;
        border-radius: 10px;
        background: #d64545;
        border: 1px solid rgba(244, 67, 54, 0.9);
        color: #ffffff;
        box-sizing: border-box;
        overflow: hidden;
    }

    .message-swiper {
        width: 100%;
        flex: 1;
        height: 100%;
        min-width: 0;
    }

    .message-item {
@@ -912,8 +932,11 @@
        height: 100%;
        display: flex;
        align-items: center;
        padding-left: 20px;
        font-size: 1.5vw;
        color: #fff;
        font-size: 1.2rem;
        color: #ffffff;
        text-shadow: 0 1px 2px rgba(0,0,0,0.45);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>