diff --git a/migrate-from-v1.md b/migrate-from-v1.md
index c8bfb952a7..6cd802f252 100644
--- a/migrate-from-v1.md
+++ b/migrate-from-v1.md
@@ -215,6 +215,7 @@ plugins: [
 - `onSelected` 重命名为 `onSelect`
 - 移除 `fixednavClass`，通过 `className` 实现
 - 移除 `slotList`，通过 `children` 实现
+- 该组件已废弃 `BEM` 规范，记得把 `__` 改为 `-`
 #### Indicator
 - 移除 `block`，暴露自定义节点
 - 移除 `align`，暴露自定义节点
diff --git a/src/packages/fixednav/demo.taro.tsx b/src/packages/fixednav/demo.taro.tsx
index 0cf8030ce7..63e3239cf9 100644
--- a/src/packages/fixednav/demo.taro.tsx
+++ b/src/packages/fixednav/demo.taro.tsx
@@ -167,12 +167,12 @@ const FixedNavDemo = () => {
             </>
           }
         >
-          <ul className="nut-fixednav__list">
-            <li className="nut-fixednav__list-item">1</li>
-            <li className="nut-fixednav__list-item">2</li>
-            <li className="nut-fixednav__list-item">3</li>
-            <li className="nut-fixednav__list-item">4</li>
-            <li className="nut-fixednav__list-item">5</li>
+          <ul className="nut-fixednav-list">
+            <li className="nut-fixednav-list-item">1</li>
+            <li className="nut-fixednav-list-item">2</li>
+            <li className="nut-fixednav-list-item">3</li>
+            <li className="nut-fixednav-list-item">4</li>
+            <li className="nut-fixednav-list-item">5</li>
           </ul>
         </FixedNav>
         {/* <!-- 配合 Drag 支持拖拽 ，小程序暂不支持 --> */}
diff --git a/src/packages/fixednav/demo.tsx b/src/packages/fixednav/demo.tsx
index 8d3f15d20d..8f945dfc7a 100644
--- a/src/packages/fixednav/demo.tsx
+++ b/src/packages/fixednav/demo.tsx
@@ -166,12 +166,12 @@ const FixedNavDemo = () => {
             </>
           }
         >
-          <ul className="nut-fixednav__list">
-            <li className="nut-fixednav__list-item">1</li>
-            <li className="nut-fixednav__list-item">2</li>
-            <li className="nut-fixednav__list-item">3</li>
-            <li className="nut-fixednav__list-item">4</li>
-            <li className="nut-fixednav__list-item">5</li>
+          <ul className="nut-fixednav-list">
+            <li className="nut-fixednav-list-item">1</li>
+            <li className="nut-fixednav-list-item">2</li>
+            <li className="nut-fixednav-list-item">3</li>
+            <li className="nut-fixednav-list-item">4</li>
+            <li className="nut-fixednav-list-item">5</li>
           </ul>
         </FixedNav>
         {/* <!-- 配合 Drag 支持拖拽 ，小程序暂不支持 --> */}
diff --git a/src/packages/fixednav/doc.en-US.md b/src/packages/fixednav/doc.en-US.md
index 431491860e..fca12b4e7a 100644
--- a/src/packages/fixednav/doc.en-US.md
+++ b/src/packages/fixednav/doc.en-US.md
@@ -229,12 +229,12 @@ const App = () => {
           </>
         }
       >
-        <ul className="nut-fixednav__list">
-          <li className="nut-fixednav__list-item">1</li>
-          <li className="nut-fixednav__list-item">2</li>
-          <li className="nut-fixednav__list-item">3</li>
-          <li className="nut-fixednav__list-item">4</li>
-          <li className="nut-fixednav__list-item">5</li>
+        <ul className="nut-fixednav-list">
+          <li className="nut-fixednav-list-item">1</li>
+          <li className="nut-fixednav-list-item">2</li>
+          <li className="nut-fixednav-list-item">3</li>
+          <li className="nut-fixednav-list-item">4</li>
+          <li className="nut-fixednav-list-item">5</li>
         </ul>
       </FixedNav>
     </>
@@ -321,7 +321,8 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Description | Default |
 | --- | --- | --- |
-| \--nutui-fixednav-bg-color | background color | `#fff` |
-| \--nutui-fixednav-font-color | font color | `#000` |
+| \--nutui-fixednav-background-color | background color | `$white` |
+| \--nutui-fixednav-color | font color | `$color-title` |
+| \--nutui-fixednav-button-background | button background | `$color-primary-gradient-1` |
 | \--nutui-fixednav-index | zIndex | `201` |
 | \--nutui-fixednav-item-active-color | active color | `$color-primary` |
\ No newline at end of file
diff --git a/src/packages/fixednav/doc.md b/src/packages/fixednav/doc.md
index d0ef35982f..c9c7c48275 100644
--- a/src/packages/fixednav/doc.md
+++ b/src/packages/fixednav/doc.md
@@ -228,12 +228,12 @@ const App = () => {
           </>
         }
       >
-        <ul className="nut-fixednav__list">
-          <li className="nut-fixednav__list-item">1</li>
-          <li className="nut-fixednav__list-item">2</li>
-          <li className="nut-fixednav__list-item">3</li>
-          <li className="nut-fixednav__list-item">4</li>
-          <li className="nut-fixednav__list-item">5</li>
+        <ul className="nut-fixednav-list">
+          <li className="nut-fixednav-list-item">1</li>
+          <li className="nut-fixednav-list-item">2</li>
+          <li className="nut-fixednav-list-item">3</li>
+          <li className="nut-fixednav-list-item">4</li>
+          <li className="nut-fixednav-list-item">5</li>
         </ul>
       </FixedNav>
     </>
@@ -320,7 +320,8 @@ export default App;
 
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
-| \--nutui-fixednav-bg-color | 背景颜色 | `#fff` |
-| \--nutui-fixednav-font-color | 字体颜色 | `#000` |
+| \--nutui-fixednav-background-color | 背景颜色 | `$white` |
+| \--nutui-fixednav-color | 字体颜色 | `$color-title` |
+| \--nutui-fixednav-button-background | button 的背景颜色 | `$color-primary-gradient-1` |
 | \--nutui-fixednav-index | zIndex | `201` |
 | \--nutui-fixednav-item-active-color | 激活颜色 | `$color-primary` |
\ No newline at end of file
diff --git a/src/packages/fixednav/doc.taro.md b/src/packages/fixednav/doc.taro.md
index 3a29671bf5..5b2996810d 100644
--- a/src/packages/fixednav/doc.taro.md
+++ b/src/packages/fixednav/doc.taro.md
@@ -228,12 +228,12 @@ const App = () => {
           </>
         }
       >
-        <ul className="nut-fixednav__list">
-          <li className="nut-fixednav__list-item">1</li>
-          <li className="nut-fixednav__list-item">2</li>
-          <li className="nut-fixednav__list-item">3</li>
-          <li className="nut-fixednav__list-item">4</li>
-          <li className="nut-fixednav__list-item">5</li>
+        <ul className="nut-fixednav-list">
+          <li className="nut-fixednav-list-item">1</li>
+          <li className="nut-fixednav-list-item">2</li>
+          <li className="nut-fixednav-list-item">3</li>
+          <li className="nut-fixednav-list-item">4</li>
+          <li className="nut-fixednav-list-item">5</li>
         </ul>
       </FixedNav>
     </>
@@ -320,7 +320,8 @@ export default App;
 
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
-| \--nutui-fixednav-bg-color | 背景颜色 | `#fff` |
-| \--nutui-fixednav-font-color | 字体颜色 | `#000` |
+| \--nutui-fixednav-background-color | 背景颜色 | `$white` |
+| \--nutui-fixednav-color | 字体颜色 | `$color-title` |
+| \--nutui-fixednav-button-background | button 的背景颜色 | `$color-primary-gradient-1` |
 | \--nutui-fixednav-index | zIndex | `201` |
 | \--nutui-fixednav-item-active-color | 激活颜色 | `$color-primary` |
\ No newline at end of file
diff --git a/src/packages/fixednav/doc.zh-TW.md b/src/packages/fixednav/doc.zh-TW.md
index 6acbaefa6d..5e5aa0ab7f 100644
--- a/src/packages/fixednav/doc.zh-TW.md
+++ b/src/packages/fixednav/doc.zh-TW.md
@@ -228,12 +228,12 @@ const App = () => {
           </>
         }
       >
-        <ul className="nut-fixednav__list">
-          <li className="nut-fixednav__list-item">1</li>
-          <li className="nut-fixednav__list-item">2</li>
-          <li className="nut-fixednav__list-item">3</li>
-          <li className="nut-fixednav__list-item">4</li>
-          <li className="nut-fixednav__list-item">5</li>
+        <ul className="nut-fixednav-list">
+          <li className="nut-fixednav-list-item">1</li>
+          <li className="nut-fixednav-list-item">2</li>
+          <li className="nut-fixednav-list-item">3</li>
+          <li className="nut-fixednav-list-item">4</li>
+          <li className="nut-fixednav-list-item">5</li>
         </ul>
       </FixedNav>
     </>
@@ -320,7 +320,8 @@ export default App;
 
 | 名稱 | 說明 | 默認值 |
 | --- | --- | --- |
-| \--nutui-fixednav-bg-color | 背景顏色 | `#fff` |
-| \--nutui-fixednav-font-color | 字體顏色 | `#000` |
+| \--nutui-fixednav-background-color | 背景顏色 | `$white` |
+| \--nutui-fixednav-color | 字體顏色 | `$color-title` |
+| \--nutui-fixednav-button-background | button 的背景顏色 | `$color-primary-gradient-1` |
 | \--nutui-fixednav-index | zIndex | `201` |
 | \--nutui-fixednav-item-active-color | 激活顏色 | `$color-primary` |
\ No newline at end of file
diff --git a/src/packages/fixednav/fixednav.scss b/src/packages/fixednav/fixednav.scss
index a717ff3522..6ead5f91a9 100644
--- a/src/packages/fixednav/fixednav.scss
+++ b/src/packages/fixednav/fixednav.scss
@@ -11,9 +11,11 @@
     .nut-icon {
       transform: rotate(180deg);
     }
-    .nut-fixednav__list {
+
+    .nut-fixednav-list {
       transform: translateX(0%) !important;
     }
+
     &.left {
       .nut-icon {
         transform: rotate(0deg) !important;
@@ -21,16 +23,15 @@
     }
   }
 
-  &__btn {
+  &-btn {
     box-sizing: border-box;
     position: absolute;
     right: 0;
 
     z-index: $fixednav-index;
-    width: 80px;
-    padding-left: 12px;
+    width: 70px;
     height: 100%;
-    background: $fixednav-btn-bg;
+    background: $fixednav-button-background;
     border-radius: 45px 0px 0px 45px;
     box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
     display: flex;
@@ -40,10 +41,11 @@
     .text {
       width: 24px;
       line-height: 13px;
-      font-size: 10px;
-      color: $fixednav-bg-color;
+      font-size: $font-size-small;
+      color: #fff;
       flex-shrink: 0;
     }
+
     .nut-icon {
       margin-right: 5px;
       transition: all 0.3s;
@@ -52,7 +54,7 @@
     }
   }
 
-  &__list {
+  &-list {
     position: absolute;
     right: 0;
     transform: translateX(100%);
@@ -61,15 +63,17 @@
     z-index: $fixednav-index;
     flex-shrink: 0;
     height: 100%;
-    background: $fixednav-bg-color;
+    background: $fixednav-background-color;
     display: flex;
     justify-content: space-between;
     border-radius: 25px 0px 0px 25px;
     box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
+
     padding: {
       left: 20px;
       right: 80px;
     }
+
     &-item {
       position: relative;
       flex: 1;
@@ -80,15 +84,18 @@
       align-items: center;
       min-width: 50px;
       flex-shrink: 0;
+      color: $fixednav-color;
+
       img {
         width: 20px;
         height: 20px;
         margin-bottom: 2px;
       }
-      .nut-fixednav__list-text {
+
+      .nut-fixednav-list-text {
         font-size: 10px;
-        color: $fixednav-font-color;
       }
+
       .b {
         position: absolute;
         right: 0;
@@ -105,31 +112,37 @@
       }
     }
   }
+
   &.left {
     right: auto;
     left: 0;
 
-    .nut-fixednav__btn {
+    .nut-fixednav-btn {
       flex-direction: row-reverse;
       right: auto;
       left: 0;
       border-radius: 0 45px 45px 0;
+
       .nut-icon {
         transform: rotate(180deg);
       }
     }
-    .nut-fixednav__list {
+
+    .nut-fixednav-list {
       transform: translateX(-100%);
       right: auto;
       border-radius: 0px 25px 25px 0px;
+
       padding: {
         left: 80px;
         right: 20px;
       }
+
       margin: 0;
     }
   }
 }
+
 .nut-drag .nut-fixednav {
   position: inherit;
 }
diff --git a/src/packages/fixednav/fixednav.taro.tsx b/src/packages/fixednav/fixednav.taro.tsx
index 02bd657c15..99ae384784 100644
--- a/src/packages/fixednav/fixednav.taro.tsx
+++ b/src/packages/fixednav/fixednav.taro.tsx
@@ -100,16 +100,16 @@ export const FixedNav: FunctionComponent<
       )}
       <div className="list">
         {children || (
-          <div className={`${classPrefix}__list`}>
+          <div className={`${classPrefix}-list`}>
             {list.map((item: any, index) => {
               return (
                 <div
-                  className={`${classPrefix}__list-item`}
+                  className={`${classPrefix}-list-item`}
                   onClick={(event) => handleClick(item, event)}
                   key={item.id || index}
                 >
                   <img src={item.icon} alt="" />
-                  <div className={`${classPrefix}__list-text`}>{item.text}</div>
+                  <div className={`${classPrefix}-list-text`}>{item.text}</div>
                   {item.num && <div className="b">{item.num}</div>}
                 </div>
               )
@@ -118,7 +118,7 @@ export const FixedNav: FunctionComponent<
         )}
       </div>
 
-      <div className={`${classPrefix}__btn`} onClick={() => onUpdateValue()}>
+      <div className={`${classPrefix}-btn`} onClick={() => onUpdateValue()}>
         {content || (
           <>
             <ArrowLeft color="#fff" />
diff --git a/src/packages/fixednav/fixednav.tsx b/src/packages/fixednav/fixednav.tsx
index 625668a7a9..d99a02df37 100644
--- a/src/packages/fixednav/fixednav.tsx
+++ b/src/packages/fixednav/fixednav.tsx
@@ -100,16 +100,16 @@ export const FixedNav: FunctionComponent<
       )}
       <div className="list">
         {children || (
-          <div className={`${classPrefix}__list`}>
+          <div className={`${classPrefix}-list`}>
             {list.map((item: any, index) => {
               return (
                 <div
-                  className={`${classPrefix}__list-item`}
+                  className={`${classPrefix}-list-item`}
                   onClick={(event) => handleClick(item, event)}
                   key={item.id || index}
                 >
                   <img src={item.icon} alt="" />
-                  <div className={`${classPrefix}__list-text`}>{item.text}</div>
+                  <div className={`${classPrefix}-list-text`}>{item.text}</div>
                   {item.num && <div className="b">{item.num}</div>}
                 </div>
               )
@@ -118,7 +118,7 @@ export const FixedNav: FunctionComponent<
         )}
       </div>
 
-      <div className={`${classPrefix}__btn`} onClick={() => onUpdateValue()}>
+      <div className={`${classPrefix}-btn`} onClick={() => onUpdateValue()}>
         {content || (
           <>
             <ArrowLeft color="#fff" />
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 10e2999745..d35e2f86da 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1353,13 +1353,15 @@ $signature-font-size: var(
 ) !default;
 
 //fixednav（✅）
-$fixednav-bg-color: var(--nutui-fixednav-bg-color, #fff) !default;
-$fixednav-font-color: var(--nutui-fixednav-font-color, #000) !default;
+$fixednav-background-color: var(
+  --nutui-fixednav-background-color,
+  $white
+) !default;
+$fixednav-color: var(--nutui-fixednav-color, #1a1a1a) !default;
 $fixednav-index: var(--nutui-fixednav-index, 900) !default;
-$fixednav-btn-bg: linear-gradient(
-  135deg,
-  $color-primary 0%,
-  $color-primary-stop-2 100%
+$fixednav-button-background: var(
+  --nutui-fixednav-button-background,
+  $color-primary
 ) !default;
 $fixednav-item-active-color: var(
   --nutui-fixednav-item-active-color,