update

src/components/XNoticeBar.vue

@@ -1,6 +1,29 @@
 <script setup>
 import {ref, onMounted} from "vue";
 import warn from '../static/icons/warn.png';
+import success from '../static/icons/info.png';
+
+const STATUS = {
+    error: {
+        bg: 'x-notice-box-error',
+        context: 'context-error'
+    },
+    success: {
+        bg: 'x-notice-box-success',
+        context: 'context-success'
+    },
+};
+
+const {text, status} = defineProps({
+    text: {
+        type: String,
+        default: '提示：请在规定时间内，按要求提交回填1。以免影响收益。哈哈哈哈哈哈哈哈哈哈'
+    },
+    status: {
+        type: String,
+        default: 'error'
+    }
+});
 
 const XNoticeBox = ref();
 const Context = ref();
@@ -18,22 +41,39 @@ onMounted(() => {
 </script>
 
 <template>
-    <view ref="XNoticeBox" class="x-notice-box">
-        <view ref="Context" :class="['context', roll ? 'roll' : '']">
-            <image class="!size-[26rpx] flex-shrink-0" :src="warn"></image>
-            <text class="!whitespace-nowrap flex-shrink-0">提示：请在规定时间内，按要求提交回填1。以免影响收益。哈哈哈哈哈哈哈哈哈哈</text>
+    <view ref="XNoticeBox" :class="['x-notice-box', STATUS[status].bg]">
+        <view ref="Context" :class="['context', roll ? 'roll' : '', STATUS[status].context]">
+            <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>
         </view>
     </view>
 </template>
 
 <style scoped lang="scss">
-.x-notice-box {
-    padding: 18rpx 24rpx;
+.x-notice-box-error {
     background-color: #FFF7E8;
 }
 
-.context {
+.x-notice-box-success {
+    background-color: #E8F3FF;
+}
+
+.context-error {
     color: rgb(255, 87, 34);
+}
+
+.context-success {
+    color: rgb(29, 33, 41);
+}
+
+.x-notice-box {
+    padding: 18rpx 24rpx;
+    width: 100%;
+    overflow: hidden;
+}
+
+.context {
     font-size: 24rpx;
     font-weight: 400;
     line-height: 22px;