fix: card、skeleton、tabbar bug

src/packages/card/card.scss

@@ -1,6 +1,5 @@
-
 @mixin nut-card-border {
-	position: absolute;
+  position: absolute;
   top: 0;
   right: 0;
   left: 0;
@@ -12,45 +11,58 @@
   content: ' ';
   display: block;
 }
-.nut-card-container{
+.nut-card-container {
+  .card-title {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    .right {
+      flex: 1;
+      font-size: $font-size-body-normal;
+      font-weight: 600;
+    }
+    .left {
+      color: $text-black-4;
+    }
+  }
   background: #fff;
   border-radius: 4px;
   margin: 15px;
-  .nut-card-header{
+  .nut-card-header {
     padding: 12px;
     color: $text-black-1;
     font-size: $font-size-body-small;
     line-height: 24px;
     display: flex;
     justify-content: space-between;
-    .nut-card-title{
+    .nut-card-title {
       flex: 1;
       font-size: $font-size-body-normal;
       font-weight: 600;
       text-align: justify;
     }
-    .nut-card-supply-title{ 
+    .nut-card-supply-title {
       color: $text-black-4;
       margin-left: 12px;
     }
-    .nut-card-icon{
+    .nut-card-icon {
       margin-left: 12px;
     }
   }
-  .switch-icon-class{
+  .switch-icon-class {
     display: flex;
-    justify-content: space-between
+    justify-content: space-between;
   }
-  .mut-card-content{
+  .mut-card-content {
     padding: 12px;
     color: $text-black-2;
     font-size: $font-size-body-small;
     position: relative;
-    &:before{
+    &:before {
       @include nut-card-border;
     }
   }
-  .mut-card-bottom{
+  .mut-card-bottom {
     display: flex;
     align-items: center;
     justify-content: flex-end;
@@ -59,15 +71,14 @@
     padding: 0 12px;
     position: relative;
 
-    &::before{
+    &::before {
       @include nut-card-border;
-    }    button{
+    }
+    button {
       margin: 0 5px;
     }
   }
 }
-.full-content{
+.full-content {
   margin: 0px;
 }
-
-

src/packages/card/demo.vue

@@ -70,18 +70,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-.card-title {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  .right {
-    flex: 1;
-    font-size: $font-size-body-normal;
-    font-weight: 600;
-  }
-  .left {
-    color: $text-black-4;
-  }
-}
-</style>
+<style lang="scss" scoped></style>

src/packages/skeleton/index.js

@@ -3,26 +3,12 @@ import './skeleton.scss';
 
 const { skeletonCircle, skeletonSquare, skeletonRow, skeletonColumn } = skeleton;
 
-skeleton.install = function(Vue) {
+skeleton.install = function (Vue) {
   Vue.component(skeleton.name, skeleton);
-};
-skeletonCircle.install = function(Vue) {
   Vue.component(skeletonCircle.name, skeletonCircle);
-};
-skeletonSquare.install = function(Vue) {
   Vue.component(skeletonSquare.name, skeletonSquare);
-};
-skeletonRow.install = function(Vue) {
   Vue.component(skeletonRow.name, skeletonRow);
-};
-skeletonColumn.install = function(Vue) {
   Vue.component(skeletonColumn.name, skeletonColumn);
 };
 
-export default {
-  skeleton,
-  skeletonCircle,
-  skeletonSquare,
-  skeletonRow,
-  skeletonColumn
-};
+export default skeleton;

src/packages/steps/index.js

@@ -3,15 +3,9 @@ import './steps.scss';
 
 const { Step } = Steps;
 
-Steps.install = function(Vue) {
+Steps.install = function (Vue) {
   Vue.component(Steps.name, Steps);
-};
-
-Step.install = function(Vue) {
   Vue.component(Step.name, Step);
 };
 
-export default {
-  Steps,
-  Step
-};
+export default Steps;

src/packages/tabbar/__test__/tabbar.spec.js

@@ -37,7 +37,7 @@ describe('Tabbar.vue', () => {
   it('页签位于页面底部', () => {
     wrapper.setProps({ bottom: true });
     return Vue.nextTick().then(function () {
-      expect(wrapper.contains('.bottom')).toBe(true);
+      expect(wrapper.contains('.tabbar-bottom')).toBe(true);
     });
   });
 

src/packages/tabbar/tabbar.scss

@@ -14,7 +14,7 @@
   }
 }
 
-.bottom {
+.tabbar-bottom {
   position: fixed;
   bottom: 0;
   left: 0;

src/packages/tabbar/tabbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="nut-tabbar" :class="{ bottom: bottom }">
+  <div class="nut-tabbar" :class="{ 'tabbar-bottom': bottom }">
     <a
       class="tabbar-nav"
       v-for="(value, index) in tabList"