feat: noticeBar 样式升级

ant-design · Sep 19, 2024 · b4b1ac9 · b4b1ac9
1 parent de6fff5
commit b4b1ac9
Show file tree

Hide file tree

Showing 8 changed files with 152 additions and 35 deletions.
diff --git a/compiled/alipay/src/NoticeBar/index.axml b/compiled/alipay/src/NoticeBar/index.axml
@@ -20,7 +20,7 @@
       ></icon>
     </view>
   </slot>
-  <view class="ant-notice-bar-content ant-notice-bar-content{{$id ? '-' + $id : ''}}">
+  <view class="ant-notice-bar-content {{enableMarquee ? 'ant-notice-bar-content-enableMarquee ant-notice-bar-content-enableMarquee-' + type + '' : ''}} ant-notice-bar-content{{$id ? '-' + $id : ''}}">
     <view
       class="ant-notice-bar-marquee ant-notice-bar-marquee{{$id ? '-' + $id : ''}}"
       style="{{marqueeStyle}} display: {{enableMarquee ? 'inline-block' : 'block'}}"

diff --git a/compiled/alipay/src/NoticeBar/index.less b/compiled/alipay/src/NoticeBar/index.less
@@ -36,7 +36,7 @@
 
   &-info {
     color: @COLOR_WHITE;
-    background: @COLOR_TEXT_SECONDARY;
+    background: #B2B2B2;
 
     &-scroll-left,
     &-scroll-right {
@@ -60,6 +60,51 @@
     overflow: hidden;
     vertical-align: middle;
     line-height: @default-line-height;
+    &-enableMarquee {
+      position: relative;
+      z-index: 1;
+      &::before {
+        content: ' ';
+        z-index: 2;
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 44 * @rpx;
+        height: 100%;
+        transform: scaleX(-1);
+        // background-image: linear-gradient(270deg, #FFF9ED 39%, rgba(255,249,237,0.00) 100%);
+      }
+      &::after {
+        content: ' ';
+        z-index: 2;
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 44 * @rpx;
+        height: 100%;
+        // background-image: linear-gradient(270deg, #FFF9ED 39%, rgba(255,249,237,0.00) 100%);
+      }
+      &-default {
+        &::before, &::after {
+          background-image: linear-gradient(270deg, #FFF9ED 39%, rgba(255,249,237,0.00) 100%);
+        }
+      }
+      &-error {
+        &::before, &::after {
+          background-image: linear-gradient(270deg, #FF3B30 39%, rgba(255,249,237,0.00) 100%);
+        }
+      }
+      &-primary {
+        &::before, &::after {
+          background-image: linear-gradient(270deg, #D0E4FF 39%, rgba(255,249,237,0.00) 100%);
+        }
+      }
+      &-info {
+        &::before, &::after {
+          background-image: linear-gradient(270deg, #B2B2B2 39%, rgba(255,249,237,0.00) 100%);
+        }
+      }
+    }
   }
 
   &-marquee {

diff --git a/compiled/alipay/src/NoticeBar/variable.less b/compiled/alipay/src/NoticeBar/variable.less
@@ -1,24 +1,18 @@
 @import (reference) '../style/themes/index.less';
 
 // 标准背景
-@notice-background-color: @COLOR_GOLDEN_3;
-// 标准边框颜色
-@notice-border-color: @COLOR_GOLDEN_2;
+@notice-background-color: #FFF9ED;
 // 标准字体颜色
-@notice-color: @COLOR_TANGERINE_1;
+@notice-color: #FF6010;
 // 标准字体大小
 @notice-font-size: @font-size-subtitle;
 
-// error 边框颜色
-@notice-error-border-color: @COLOR_GOLDEN_2;
 // error 字体颜色
 @notice-error-color: @COLOR_WHITE;
 // error 背景
-@notice-error-background-color: @COLOR_RED;
+@notice-error-background-color: #FF3B30;
 
-// primary 边框颜色
-@notice-primary-border-color: tint(@COLOR_BRAND1, 72%);
 // primary 字体颜色
-@notice-primary-color: @COLOR_BRAND1;
+@notice-primary-color: #1677FF;
 // primary 背景
-@notice-primary-background-color: tint(@COLOR_BRAND1, 80%);
+@notice-primary-background-color: #D0E4FF;
diff --git a/compiled/wechat/src/NoticeBar/index.wxml b/compiled/wechat/src/NoticeBar/index.wxml
@@ -25,7 +25,7 @@
       type="SoundOutline"
     ></icon>
   </view>
-  <view class="ant-notice-bar-content ant-notice-bar-content{{$id ? '-' + $id : ''}}">
+  <view class="ant-notice-bar-content {{enableMarquee ? 'ant-notice-bar-content-enableMarquee ant-notice-bar-content-enableMarquee-' + type + '' : ''}} ant-notice-bar-content{{$id ? '-' + $id : ''}}">
     <view
       class="ant-notice-bar-marquee ant-notice-bar-marquee{{$id ? '-' + $id : ''}}"
       style="{{marqueeStyle}} display: {{enableMarquee ? 'inline-block' : 'block'}}"

diff --git a/compiled/wechat/src/NoticeBar/index.wxss b/compiled/wechat/src/NoticeBar/index.wxss
@@ -6,29 +6,29 @@
   overflow: hidden;
   padding: 8px 12px;
   font-size: 15px;
-  color: #ff6010;
-  background-color: #fff9ed;
+  color: #FF6010;
+  background-color: #FFF9ED;
   box-sizing: border-box;
 }
 .ant-notice-bar-error {
   color: #ffffff;
-  background-color: #ff3141;
+  background-color: #FF3B30;
 }
 .ant-notice-bar-error-scroll-left,
 .ant-notice-bar-error-scroll-right {
-  background: #ff3141;
+  background: #FF3B30;
 }
 .ant-notice-bar-primary {
-  color: #1677ff;
-  background-color: #d0e4ff;
+  color: #1677FF;
+  background-color: #D0E4FF;
 }
 .ant-notice-bar-primary-scroll-left,
 .ant-notice-bar-primary-scroll-right {
-  background: #d0e4ff;
+  background: #D0E4FF;
 }
 .ant-notice-bar-info {
   color: #ffffff;
-  background: #666666;
+  background: #B2B2B2;
 }
 .ant-notice-bar-info-scroll-left,
 .ant-notice-bar-info-scroll-right {
@@ -50,6 +50,45 @@
   vertical-align: middle;
   line-height: 1.4;
 }
+.ant-notice-bar-content-enableMarquee {
+  position: relative;
+  z-index: 1;
+}
+.ant-notice-bar-content-enableMarquee::before {
+  content: ' ';
+  z-index: 2;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 22px;
+  height: 100%;
+  transform: scaleX(-1);
+}
+.ant-notice-bar-content-enableMarquee::after {
+  content: ' ';
+  z-index: 2;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 22px;
+  height: 100%;
+}
+.ant-notice-bar-content-enableMarquee-default::before,
+.ant-notice-bar-content-enableMarquee-default::after {
+  background-image: linear-gradient(270deg, #FFF9ED 39%, rgba(255, 249, 237, 0) 100%);
+}
+.ant-notice-bar-content-enableMarquee-error::before,
+.ant-notice-bar-content-enableMarquee-error::after {
+  background-image: linear-gradient(270deg, #FF3B30 39%, rgba(255, 249, 237, 0) 100%);
+}
+.ant-notice-bar-content-enableMarquee-primary::before,
+.ant-notice-bar-content-enableMarquee-primary::after {
+  background-image: linear-gradient(270deg, #D0E4FF 39%, rgba(255, 249, 237, 0) 100%);
+}
+.ant-notice-bar-content-enableMarquee-info::before,
+.ant-notice-bar-content-enableMarquee-info::after {
+  background-image: linear-gradient(270deg, #B2B2B2 39%, rgba(255, 249, 237, 0) 100%);
+}
 .ant-notice-bar-marquee {
   overflow: hidden;
   text-overflow: ellipsis;

diff --git a/src/NoticeBar/index.axml b/src/NoticeBar/index.axml
@@ -38,7 +38,7 @@
   </view>
   <!-- #endif -->
   <view
-    class="ant-notice-bar-content ant-notice-bar-content{{ $id ? '-' + $id : '' }}">
+    class="ant-notice-bar-content {{ enableMarquee ? `ant-notice-bar-content-enableMarquee ant-notice-bar-content-enableMarquee-${type}` : '' }} ant-notice-bar-content{{ $id ? '-' + $id : '' }}">
     <view
       class="ant-notice-bar-marquee ant-notice-bar-marquee{{ $id ? '-' + $id : '' }}"
       style="{{ marqueeStyle }} display: {{ enableMarquee ? 'inline-block' : 'block' }}"

diff --git a/src/NoticeBar/index.less b/src/NoticeBar/index.less
@@ -36,7 +36,7 @@
 
   &-info {
     color: @COLOR_WHITE;
-    background: @COLOR_TEXT_SECONDARY;
+    background: #B2B2B2;
 
     &-scroll-left,
     &-scroll-right {
@@ -60,6 +60,51 @@
     overflow: hidden;
     vertical-align: middle;
     line-height: @default-line-height;
+    &-enableMarquee {
+      position: relative;
+      z-index: 1;
+      &::before {
+        content: ' ';
+        z-index: 2;
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 44 * @rpx;
+        height: 100%;
+        transform: scaleX(-1);
+        // background-image: linear-gradient(270deg, #FFF9ED 39%, rgba(255,249,237,0.00) 100%);
+      }
+      &::after {
+        content: ' ';
+        z-index: 2;
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 44 * @rpx;
+        height: 100%;
+        // background-image: linear-gradient(270deg, #FFF9ED 39%, rgba(255,249,237,0.00) 100%);
+      }
+      &-default {
+        &::before, &::after {
+          background-image: linear-gradient(270deg, #FFF9ED 39%, rgba(255,249,237,0.00) 100%);
+        }
+      }
+      &-error {
+        &::before, &::after {
+          background-image: linear-gradient(270deg, #FF3B30 39%, rgba(255,249,237,0.00) 100%);
+        }
+      }
+      &-primary {
+        &::before, &::after {
+          background-image: linear-gradient(270deg, #D0E4FF 39%, rgba(255,249,237,0.00) 100%);
+        }
+      }
+      &-info {
+        &::before, &::after {
+          background-image: linear-gradient(270deg, #B2B2B2 39%, rgba(255,249,237,0.00) 100%);
+        }
+      }
+    }
   }
 
   &-marquee {

diff --git a/src/NoticeBar/variable.less b/src/NoticeBar/variable.less
@@ -1,24 +1,18 @@
 @import (reference) '../style/themes/index.less';
 
 // 标准背景
-@notice-background-color: @COLOR_GOLDEN_3;
-// 标准边框颜色
-@notice-border-color: @COLOR_GOLDEN_2;
+@notice-background-color: #FFF9ED;
 // 标准字体颜色
-@notice-color: @COLOR_TANGERINE_1;
+@notice-color: #FF6010;
 // 标准字体大小
 @notice-font-size: @font-size-subtitle;
 
-// error 边框颜色
-@notice-error-border-color: @COLOR_GOLDEN_2;
 // error 字体颜色
 @notice-error-color: @COLOR_WHITE;
 // error 背景
-@notice-error-background-color: @COLOR_RED;
+@notice-error-background-color: #FF3B30;
 
-// primary 边框颜色
-@notice-primary-border-color: tint(@COLOR_BRAND1, 72%);
 // primary 字体颜色
-@notice-primary-color: @COLOR_BRAND1;
+@notice-primary-color: #1677FF;
 // primary 背景
-@notice-primary-background-color: tint(@COLOR_BRAND1, 80%);
+@notice-primary-background-color: #D0E4FF;