feat:通知

src/components/Notice/index.ts

@@ -0,0 +1 @@
+export { default as Notice } from "./src/index.vue"

src/components/Notice/src/index.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { shallowRef, onMounted, onUnmounted } from "vue"
+
+const props = withDefaults(defineProps<{ 
+  direction?: 'x' | 'y';
+  duration?: number;
+  list: string[]
+}>(), {
+  direction: 'y',
+  duration: 5000
+})
+
+const currentIndex = shallowRef(0)
+
+let timer:null | any = null
+
+onMounted(() => {
+  timer = setInterval(() => {
+    const updateIndex = currentIndex.value + 1 
+    currentIndex.value = updateIndex < props.list.length ? updateIndex : 0
+  },props.duration)
+})
+
+onUnmounted(() => {
+  timer && clearInterval(timer)
+})
+</script>
+
+<template>
+  <div class="bg-[#fffbe8] flex items-center mb-[5px] text-[#ed6a0c] overflow-hidden">
+    <IconifyIconOffline class="mx-[8px]" icon="bell" />
+    <div class="w-full h-[32px] relative overflow-hidden" style="line-height: 32px">
+        <template v-for="(item, index) in list">
+          <Transition :name="`carousel-${props.direction}`">
+            <p class="absolute w-full" v-if="index === currentIndex">{{ item }} </p>
+          </Transition>
+        </template>
+    </div>
+  </div>
+</template>

src/components/PageContainer/src/page-container.tsx

@@ -4,6 +4,8 @@ import type { Events, Hooks } from "./types";
 
 import { type ModalConfig, PageModal } from "../../PageModal";
 
+import { Notice } from "../../Notice"
+
 import {
   PageContent,
   type ContentConfig,
@@ -140,9 +142,13 @@ const PageContainer = defineComponent({
       getContent: () => innerContentRef
     });
 
+
+    const list = ['系统需求和问题，请点击右上角工单填写，工程师会逐一回复并处理。','系统需求和问题，请点击右上角工单填写，工程师会逐一回复并处理。']
+
     return () => {
       return (
         <div class="w-full h-full" v-loading={loading.value}>
+          <Notice list= {list}  direction="y" duration={5000} />
           {renderPageSearch()}
           {renderPageContent()}
           {renderPageModal()}

src/layout/index.vue

@@ -217,6 +217,7 @@ const layoutHeader = defineComponent({
       ]"
     >
       <div v-if="set.fixedHeader">
+        <!-- <div>采销365结算</div> -->
         <layout-header />
         <!-- 主体内容 -->
         <app-main :fixed-header="set.fixedHeader" />

src/style/index.scss

@@ -197,3 +197,31 @@ body {
     flex-wrap: nowrap;
   }
 }
+
+
+.carousel-x-enter-active,
+.carousel-x-leave-active {
+  transition: transform 1s linear;
+}
+
+.carousel-x-enter-from {
+  transform:translateX(100%);
+}
+
+.carousel-x-leave-to {
+  transform: translateX(-100%);
+}
+
+
+.carousel-y-enter-active,
+.carousel-y-leave-active {
+  transition: transform 0.6s linear;
+}
+
+.carousel-y-enter-from {
+  transform:translateY(100%);
+}
+
+.carousel-y-leave-to {
+  transform: translateY(-100%);
+}