执法端首页添加横幅通知

src/views/enforce/enforceNotice.vue

@@ -379,7 +379,7 @@ const searchComplaint = (val) =>{
   height: 0.75rem;
   font-size: 0.4rem;
   font-weight: 600;
-  line-height: 1rem;
+  line-height: 0.75rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

src/views/enforceHome.vue

@@ -8,6 +8,7 @@
 		<!-- 中间 -->
 		<div class="warp_body">
       <div class="logobox"></div>
+      <div class="streamer" @click=""><i></i><span class="marquee"><span class="scroll-text">2024年度宝安区新安街道年度行政执法检查计划</span></span></div>
       <div class="noticbox" @click="toNoticeView"><i></i><span class="new"></span>通知</div>
 			<!-- <refresh-list v-model:freshMap="freshMap" @refresh="onRefresh" @onLoad="onLoad"> -->
 				<div class="carousel_box" @onLoad="onLoad">
@@ -217,26 +218,40 @@ onMounted(() => {
 	}
 }
 
-.noticbox  {
+
+.streamer, .noticbox {
+  display: flex;
   position: absolute;
-  top: 20%;
+  top: calc(1% + 10vh);
-  right: 0;
+  right: 3%;
   z-index: 999;
   padding: 0 0.25rem;
-  min-width: 1rem;
+  width: 90%;
   min-height: 1rem;
-  background-color: rgba(249, 238, 219, .7);
+  background-color: rgba(249, 238, 219, .9);
-  border-radius: 0.5rem 0 0 0.5rem;
+  border-radius: 0.5rem;
   color: #ab6a05;
   font-size: 0.45rem;
   line-height: 1.0rem;
   white-space: nowrap;
+  box-sizing: content-box;
+}
+
+.noticbox {
+  top: 42%;
+  right: 0;
+  padding: 0 0.2rem;
+  width: 1.85rem;
+  min-height: 1rem;
+  background-color: rgba(249, 238, 219, .7);
+  border-radius: 0.5rem 0 0 0.5rem;
+  color: #000;
 }
 
-.noticbox > i {
+.streamer > i, .noticbox > i {
   display: inline-block;
   position: relative;
-  top: 0.12rem;
+  top: 0.18rem;
   margin: 0 0.3rem 0 0;
   width: 0.6rem;
   height: 0.6rem;
@@ -244,6 +259,24 @@ onMounted(() => {
   background-size: auto 100%;
 }
 
+.streamer .marquee {
+  display: inline-block;
+  width: calc(100% - 1rem); /* 或者你想要的宽度 */
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.scroll-text {
+  display: inline-block;
+  padding-left: 100%; /* 初始时隐藏在右侧 */
+  animation: marquee 5s linear infinite; /* 设置动画 */
+}
+
+@keyframes marquee {
+  0% { transform: translateX(0); } /* 动画开始时 */
+  100% { transform: translateX(-100%); } /* 动画结束时，文字完全移动到左侧并重新开始 */
+}
+
 .noticbox span.new {
   display: block;
   position: absolute;