From 06e4d99691e682b7028502289b21c86fb967f89d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9A=E5=95=A6C=E6=A2=A6?= <15709267061@163.com>
Date: Mon, 7 Jul 2025 16:07:46 +0800
Subject: [PATCH] update

---
 src/components/XNoticeBar.vue | 62 ++++++++++++++++++-----------------
 1 file changed, 32 insertions(+), 30 deletions(-)

diff --git a/src/components/XNoticeBar.vue b/src/components/XNoticeBar.vue
index d179ee7..b32aa17 100644
--- a/src/components/XNoticeBar.vue
+++ b/src/components/XNoticeBar.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {computed, nextTick, onMounted, ref, watch} from "vue";
+import {nextTick, ref, watch} from "vue";
 import warn from '../static/icons/warn.png';
 import success from '../static/icons/info.png';
 
@@ -33,12 +33,6 @@ const {text, status, tile, textColor} = defineProps({
     }
 });
 const showIndex = ref(0);
-const textC = computed(() => {
-    return text.map((v, index) => ({
-        show: index === showIndex.value,
-        text: `${index + 1}. ${v}`,
-    }))
-});
 
 const XNoticeBox = ref();
 const Context = ref();
@@ -64,34 +58,42 @@ watch(
     {deep: true}
 )
 
-onMounted(() => {
-    setInterval(() => {
-        showIndex.value++;
-        if (showIndex.value > text.length - 1) {
-            showIndex.value = 0;
-        }
-    }, 5000);
-});
+const changeCur = ({detail: {current}}) => {
+    if (
+        Context.value[current].$el.clientWidth
+        >
+        XNoticeBox.value[current].$el.clientWidth
+    ) {
+        setTimeout(() => {
+            roll.value = true;
+        }, 500);
+    } else {
+        roll.value = false;
+    }
+}
 </script>
 
 <template>
-    <view ref="XNoticeBox" :class="['x-notice-box', STATUS[status].bg]">
-        <view ref="Context" :class="['context', roll ? 'roll' : '', STATUS[status].context]"
-              :style="{alignItems: tile ? 'start' : 'center'}">
-            <image v-if="status==='error'" class="!size-[26rpx] flex-shrink-0" :src="warn"></image>
-            <image v-else class="!size-[26rpx] flex-shrink-0" :src="success"></image>
-            <view v-if="!tile">
-                <view
-                    class="!whitespace-nowrap flex-shrink-0"
-                    :style="{color: textColor}"
-                    v-for="v in textC.filter(v => v.show)"
-                    v-html="v.text">
+    <swiper style="height: 80rpx;" autoplay vertical @change="changeCur">
+        <swiper-item v-for="v in text">
+            <view ref="XNoticeBox" :class="['x-notice-box', STATUS[status].bg]">
+                <view ref="Context" :class="['context', roll ? 'roll' : '', STATUS[status].context]"
+                      :style="{alignItems: tile ? 'start' : 'center'}">
+                    <image v-if="status==='error'" class="!size-[26rpx] flex-shrink-0" :src="warn"></image>
+                    <image v-else class="!size-[26rpx] flex-shrink-0" :src="success"></image>
+                    <view v-if="!tile">
+                        <view
+                            class="!whitespace-nowrap flex-shrink-0"
+                            :style="{color: textColor}"
+                            v-html="v">
+                        </view>
+                    </view>
+                    <text v-else :style="{color: textColor}" v-html="text">
+                    </text>
                 </view>
             </view>
-            <text v-else :style="{color: textColor}" v-html="text">
-            </text>
-        </view>
-    </view>
+        </swiper-item>
+    </swiper>
 </template>
 
 <style scoped lang="scss">