fix: 样式bug

src/components/CrRadioBtn.vue

@@ -39,14 +39,14 @@ export default {
   }
 };
 </script>
-<style lang="less">
+<style lang="less" scoped>
 @import "../style/var.less";
 .radio-btn {
   display: flex;
   justify-content: space-around;
   align-items: center;
   margin-bottom: 12px;
-  /deep/ .cr-radio {
+  @{deep} .cr-radio {
     margin-right: 10px;
     flex: 1;
     background: @white;
@@ -60,7 +60,7 @@ export default {
     }
     &.checked {
       background-color: @orange-light;
-      /deep/ .cr-radio__label {
+      @{deep} .cr-radio__label {
         font-weight: @font-weight-bold;
       }
     }

src/components/Tabbar.vue

@@ -93,7 +93,7 @@ export default {
       line-height: 14px;
     }
   }
-  /deep/ .cr-tabbar-item--active {
+  /deep/.cr-tabbar-item--active {
     .mongo-tabbar-item-name {
       color: #000000;
     }

src/style/var.less

+@deep: ~">>>";
+
 // Color Palette
 @black: #333333;
 @white: #fff;

src/views/Goods/detail.less

@@ -29,7 +29,7 @@
     font-weight: @font-weight-bold;
     margin: @padding-md 0;
   }
-  /deep/ .cr-cell {
+  @{deep} .cr-cell {
     &-group {
       &::after {
         display: none;
@@ -55,7 +55,7 @@
     overflow: initial;
     align-items: baseline;
     margin-bottom: 0 !important;
-    /deep/ .cr-cell {
+    @{deep} .cr-cell {
       &__title {
         width: 31%;
         flex: none;
@@ -81,7 +81,7 @@
       margin-right: 4px;
     }
     .cr-switch {
-      /deep/ &__control {
+      @{deep} &__control {
         box-shadow: none;
       }
     }
@@ -100,7 +100,7 @@
     justify-content: space-between;
     align-items: center;
     padding: 14px 0;
-    /deep/ .cr-checkbox__label {
+    @{deep} .cr-checkbox__label {
       font-size: @font-size-11;
       color: @gray-4;
       margin-left: 5px;
@@ -134,7 +134,7 @@
   .card {
     padding-bottom: 0;
   }
-  /deep/ .card-body {
+  @{deep} .card-body {
     margin-bottom: 0;
   }
 }

src/views/Goods/index.less

-@import "../../style/var.less";
-@import "../../style/mixins.less";
-
-.container {
-  background-color: @background-color;
-}
-.goods-head {
-  width: 100% !important;
-  /deep/ & > div {
-    width: 100% !important;
-    z-index: 100;
-  }
-  /deep/ .cr-tabbar {
-    background-color: #f5f5f5;
-    font-size: @font-size-16;
-    padding: @padding-lg+1 0;
-    &-item {
-      position: relative;
-      &::after {
-        position: absolute;
-        left: 0;
-        top: 26px;
-        // transition: width .2s linear;
-        content: " ";
-        display: block;
-        width: 0;
-        height: 4px;
-        background: @orange-light;
-        border-radius: @border-radius-lx;
-      }
-      &--active {
-        font-weight: 600;
-        &::after {
-          width: 32px;
-        }
-      }
-    }
-  }
-}
-
+@import "../../style/var.less";
+@import "../../style/mixins.less";
+
+.container {
+  background-color: @background-color;
+}
+.goods-head {
+  width: 100% !important;
+  @{deep} & > div {
+    width: 100% !important;
+    z-index: 100;
+  }
+  @{deep} .cr-tabbar {
+    background-color: #f5f5f5;
+    font-size: @font-size-16;
+    padding: @padding-lg+1 0;
+    &-item {
+      position: relative;
+      &::after {
+        position: absolute;
+        left: 0;
+        top: 26px;
+        // transition: width .2s linear;
+        content: " ";
+        display: block;
+        width: 0;
+        height: 4px;
+        background: @orange-light;
+        border-radius: @border-radius-lx;
+      }
+      &--active {
+        font-weight: 600;
+        &::after {
+          width: 32px;
+        }
+      }
+    }
+  }
+}
+

src/views/Goods/inform.less

@@ -30,7 +30,7 @@
         color: @orange-dark;
       }
     }
-    /deep/ .card-body {
+    @{deep} .card-body {
       padding: 20px 20px 11px 20px;
       background-color: @gray-1;
       border-radius: @border-radius-md;

src/views/Goods/modules/CompactCellGroup.vue

@@ -65,7 +65,7 @@ export default {
     background: @gray-1;
     border-radius: @border-radius-md;
     padding: @padding-md;
-    /deep/ .cr-cell {
+    @{deep} .cr-cell {
       &-group {
         &::after {
           display: none;
@@ -87,21 +87,21 @@ export default {
     display: none;
   }
   &-text_bold {
-    /deep/ .cr-cell__title {
+    @{deep} .cr-cell__title {
       color: @black;
     }
-    /deep/ .cr-cell__value {
+    @{deep} .cr-cell__value {
       color: @black;
       font-weight: @font-weight-bold;
     }
   }
   &-text_noval {
-    /deep/ .cr-cell__value {
+    @{deep} .cr-cell__value {
       display: none;
     }
   }
   &_br {
-    /deep/ .cr-cell__value {
+    @{deep} .cr-cell__value {
       flex: none;
       width: 70%;
     }

src/views/Goods/modules/GoInsureDialog.vue

@@ -88,7 +88,7 @@ export default {
   width: 300px;
   &-wrap {
     overflow: initial;
-    /deep/ .cr-popup--close {
+    @{deep} .cr-popup--close {
       top: -36px;
       right: 0;
       color: @white;
@@ -141,7 +141,7 @@ export default {
     &::after {
       bottom: 26.5px;
     }
-    /deep/ & > div:first-child {
+    @{deep} & > div:first-child {
       position: absolute;
       left: 22.5px;
       top: 35px;

src/views/Goods/modules/ProtocolIframe.vue

@@ -75,7 +75,7 @@ export default {
 }
 .protocol {
   z-index: 200;
-  /deep/ .cr-icon {
+  @{deep} .cr-icon {
     color: #d0cfcf;
     font-size: @font-size-18;
     top: 16px;

src/views/Goods/plan.less

@@ -6,7 +6,7 @@
     position: relative;
     padding-bottom: 5px;
   }
-  /deep/ .card {
+  @{deep} .card {
     &-body {
       border-radius: @border-radius-md;
       background-color: @gray-1;
@@ -23,7 +23,7 @@
     }
   }
   .no-url {
-    /deep/ .card {
+    @{deep} .card {
       &-body {
         padding: @padding-lg;
         margin-bottom: 0;

src/views/Goods/rate.less

@@ -5,11 +5,11 @@
 }
 .rate-head {
   width: 100% !important;
-  /deep/ & > div {
+  @{deep} & > div {
     width: 100% !important;
     z-index: 100;
   }
-  /deep/ .cr-tabbar {
+  @{deep} .cr-tabbar {
     font-size: @font-size-16;
     padding: @padding-lg+1 0;
     &-item {