init

uni_modules/nutui-uni/components/noticebar/index.scss

@@ -0,0 +1,156 @@
+/* stylelint-disable keyframes-name-pattern */
+.nut-theme-dark {
+  .nut-noticebar__page {
+    color: $dark-color;
+    background: $dark-background2;
+  }
+
+  .nut-noticebar__vertical {
+    color: $dark-color;
+  }
+}
+
+.nut-noticebar__page {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: $noticebar-across-height;
+  padding: $noticebar-box-padding;
+  font-size: $noticebar-font-size;
+  color: $noticebar-color;
+  background: $noticebar-background;
+
+  &--wrapable {
+    height: auto;
+    padding: $noticebar-wrapable-padding;
+
+    .nut-noticebar__page-wrap {
+      height: auto !important;
+
+      .nut-noticebar__page-wrap-content {
+        position: relative;
+        word-wrap: break-word;
+        white-space: normal;
+      }
+    }
+  }
+
+  .nut-noticebar__page--withicon {
+    position: relative;
+    padding-right: 40px;
+  }
+
+  .nut-noticebar__page-lefticon {
+    display: flex;
+    align-items: center;
+    margin: $noticebar-lefticon-margin;
+    background-size: 100% 100%;
+  }
+
+  .nut-noticebar__page-righticon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: $noticebar-righticon-margin;
+  }
+
+  .nut-noticebar__page-wrap {
+    position: relative;
+    display: flex;
+    flex: 1;
+    height: $noticebar-across-line-height;
+    overflow: hidden;
+    line-height: $noticebar-across-line-height;
+  }
+
+  .nut-noticebar__page-wrap-content {
+    position: absolute;
+    white-space: nowrap;
+
+    &.nut-ellipsis {
+      display: inline-block;
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  // 只跑一次
+  .play {
+    animation: nut-notice-bar-play linear both running;
+  }
+
+  .play-infinite {
+    animation: nut-notice-bar-play-infinite linear infinite both running;
+  }
+
+  .play-vertical {
+    animation: nut-notice-bar-play-vertical linear infinite both running;
+  }
+}
+
+@keyframes nut-notice-bar-play {
+  to {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+@keyframes nut-notice-bar-play-infinite {
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+// 垂直方向的滚动
+@keyframes nut-notice-bar-play-vertical {
+  to {
+    transform: translateY($noticebar-across-height);
+  }
+}
+
+// 纵向
+.nut-noticebar__vertical {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  height: $noticebar-across-height;
+  padding: $noticebar-box-padding;
+  overflow: hidden;
+  font-size: $noticebar-font-size;
+  color: $noticebar-color;
+  background: $noticebar-background;
+
+  .nut-noticebar__vertical-list {
+    display: block;
+    flex: 1;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+
+    .nut-noticebar__vertical-item {
+      width: 100%;
+      
+      // display: flex;
+      // align-items: center;
+
+
+      height: $noticebar-across-height;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .nut-noticebar-custom-item {
+    position: absolute;
+    top: 999999px;
+  }
+
+  .go {
+    display: flex;
+    align-self: center;
+    margin: $noticebar-righticon-margin;
+  }
+}