feat: improve home notice ticker

web/src/mobile/styles.css

@@ -524,19 +524,57 @@ body {
   font-weight: 500;
 }
 .m-notice {
+  width: 100%;
   margin-top: 12px;
   padding: 12px 16px;
+  border: 0;
   display: flex;
   align-items: center;
   gap: 9px;
   color: #6c5a45;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
 }
 .m-notice p {
+  flex: 1;
+  min-width: 0;
   margin: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.m-notice-tag {
+  flex: none;
+  padding: 2px 6px;
+  border-radius: 4px;
+  color: #8d5b17;
+  background: #fff2d8;
+  font-size: 12px;
+  line-height: 18px;
+}
+.m-notice-tag.is-activity {
+  color: #24704b;
+  background: #e9f7ef;
+}
+.m-notice-copy {
+  animation: m-notice-enter 0.32s ease-out;
+}
+.m-notice-arrow {
+  flex: none;
+  color: #b4a590;
+  font-size: 17px;
+}
+@keyframes m-notice-enter {
+  from {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 .m-section {
   margin-top: 12px;
   padding: 17px 16px;