新增打手端滚动公告

apps/frontend/src/styles/worker.css

@@ -20,6 +20,59 @@
   flex-wrap: wrap;
 }
 
+.worker-announcement {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: 42px;
+  margin: 0 0 16px;
+  padding: 0 14px;
+  overflow: hidden;
+  border: 1px solid #ffe0a3;
+  border-radius: 8px;
+  background: #fffaf0;
+  color: #a86600;
+}
+
+.worker-announcement-label {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 8px;
+  border-radius: 6px;
+  background: #f59f00;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.worker-announcement-viewport {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.worker-announcement-track {
+  display: inline-flex;
+  min-width: max-content;
+  gap: 56px;
+  animation: worker-announcement-scroll 22s linear infinite;
+}
+
+.worker-announcement:hover .worker-announcement-track {
+  animation-play-state: paused;
+}
+
+@keyframes worker-announcement-scroll {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(calc(-50% - 28px));
+  }
+}
+
 .worker-page-head h3,
 .worker-page-head > .ant-typography {
   margin: 0 !important;
@@ -2023,6 +2076,19 @@ body {
 }
 
 @media (max-width: 720px) {
+  .worker-announcement {
+    height: 38px;
+    margin-bottom: 10px;
+    padding: 0 10px;
+    gap: 8px;
+    font-size: 13px;
+  }
+
+  .worker-announcement-label {
+    padding: 3px 6px;
+    font-size: 12px;
+  }
+
   .worker-page-head {
     align-items: stretch;
     flex-direction: column;