update

src/components/XNoticeBar.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {ref, onMounted} from "vue";
+import {onMounted, ref} from "vue";
 import warn from '../static/icons/warn.png';
 import success from '../static/icons/info.png';
 
@@ -14,7 +14,7 @@ const STATUS = {
     },
 };
 
-const {text, status} = defineProps({
+const {text, status, tile} = defineProps({
     text: {
         type: String,
         default: '提示：请在规定时间内，按要求提交回填1。以免影响收益。哈哈哈哈哈哈哈哈哈哈'
@@ -22,6 +22,10 @@ const {text, status} = defineProps({
     status: {
         type: String,
         default: 'error'
+    },
+    tile: {
+        type: Boolean,
+        default: false,
     }
 });
 
@@ -30,22 +34,28 @@ const Context = ref();
 const roll = ref(false);
 
 onMounted(() => {
-    if (
-        Context.value.$el.clientWidth
-        >
-        XNoticeBox.value.$el.clientWidth
-    ) {
-        roll.value = true;
+    if (!tile) {
+        if (
+            Context.value.$el.clientWidth
+            >
+            XNoticeBox.value.$el.clientWidth
+        ) {
+            roll.value = true;
+        }
     }
 });
 </script>
 
 <template>
     <view ref="XNoticeBox" :class="['x-notice-box', STATUS[status].bg]">
-        <view ref="Context" :class="['context', roll ? 'roll' : '', STATUS[status].context]">
+        <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>
-            <text class="!whitespace-nowrap flex-shrink-0">{{ text }}</text>
+            <text v-if="!tile" class="!whitespace-nowrap flex-shrink-0">{{ text }}</text>
+            <text v-else>
+                {{ text }}
+            </text>
         </view>
     </view>
 </template>
@@ -81,7 +91,6 @@ onMounted(() => {
     text-align: left;
     white-space: nowrap;
     display: inline-flex;
-    align-items: center;
     gap: 18rpx;
 }