diff --git a/src/pages/purchase/comps/comp-tabbar.js b/src/pages/purchase/comps/comp-tabbar.js
index 4b92a5f81..fed67c39b 100644
--- a/src/pages/purchase/comps/comp-tabbar.js
+++ b/src/pages/purchase/comps/comp-tabbar.js
@@ -130,10 +130,8 @@ function CompTabbar(props) {
 
   return (
     <AtTabBar
+      className='comp-tabbar'
       fixed
-      classNames={classNames({
-        'comp-tabbar': true
-      })}
       iconSize='20'
       selectedColor={colorPrimary}
       tabList={tabList}
diff --git a/src/pages/purchase/comps/comp-tabbar.scss b/src/pages/purchase/comps/comp-tabbar.scss
index d6e149032..2fa24653e 100644
--- a/src/pages/purchase/comps/comp-tabbar.scss
+++ b/src/pages/purchase/comps/comp-tabbar.scss
@@ -16,10 +16,12 @@
  | Contact: 400-821-3106
  +----------------------------------------------------------------------
  */
-.at-badge__num {
-  background-color: var(--color-dianwu-primary);
-}
-.at-tab-bar {
-  height: 100%;
-  position: absolute;
-}
+ .comp-tabbar{
+  .at-badge__num {
+    background-color: var(--color-dianwu-primary);
+  }
+  &.at-tab-bar {
+    height: 100%;
+    position: absolute;
+  }
+ }