fix: sku 样式错乱

nutui-uniapp · Jul 3, 2023 · ebdd0df · ebdd0df
1 parent 5445503
commit ebdd0df
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 0 deletions.
diff --git a/packages/nutui/components/sku/components/SkuHeader.vue b/packages/nutui/components/sku/components/SkuHeader.vue
@@ -45,3 +45,7 @@ export default defineComponent ({
     </view>
   </view>
 </template>
+
+<style lang="scss">
+@import '../index';
+</style>
diff --git a/packages/nutui/components/sku/components/SkuOperate.vue b/packages/nutui/components/sku/components/SkuOperate.vue
@@ -80,3 +80,7 @@ export default defineComponent ({
     </slot>
   </view>
 </template>
+
+<style lang="scss">
+@import '../index';
+</style>
diff --git a/packages/nutui/components/sku/components/SkuSelect.vue b/packages/nutui/components/sku/components/SkuSelect.vue
@@ -76,3 +76,7 @@ export default defineComponent ({
     </view>
   </view>
 </template>
+
+<style lang="scss">
+@import '../index';
+</style>
diff --git a/packages/nutui/components/sku/components/SkuStepper.vue b/packages/nutui/components/sku/components/SkuStepper.vue
@@ -95,3 +95,7 @@ export default defineComponent ({
     </view>
   </view>
 </template>
+
+<style lang="scss">
+@import '../index';
+</style>
diff --git a/packages/nutui/components/skuheader/index.scss b/packages/nutui/components/skuheader/index.scss
@@ -0,0 +1,37 @@
+.nut-theme-dark {
+  .nut-sku {
+    &-operate {
+      &-btn {
+        background: $dark-background2;
+      }
+    }
+  }
+}
+
+.nut-sku-header {
+    display: flex;
+    flex-shrink: 0;
+    height: 100px;
+    padding: 0 18px;
+    margin-top: 18px;
+
+    .nut-sku-header-img {
+      flex-shrink: 0;
+      width: $sku-product-img-width;
+      height: $sku-product-img-height;
+      margin-right: 12px;
+      border-radius: $sku-product-img-border-radius;
+    }
+
+    &-right {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      justify-content: flex-end;
+
+      &-extra {
+        font-size: 12px;
+        color: $text-color;
+      }
+    }
+  }
diff --git a/packages/nutui/components/skuheader/skuheader.vue b/packages/nutui/components/skuheader/skuheader.vue
@@ -45,3 +45,7 @@ export default defineComponent ({
     </view>
   </view>
 </template>
+
+<style lang="scss">
+@import './index';
+</style>
diff --git a/packages/nutui/components/skuoperate/index.scss b/packages/nutui/components/skuoperate/index.scss
@@ -0,0 +1,46 @@
+nut-sku-operate {
+    width: 100%;
+
+    &-desc {
+      display: block;
+      width: 100%;
+      padding: 10px 0;
+      font-size: 12px;
+      color: #de6a1c;
+      text-align: center;
+      background: #fbf9da;
+    }
+
+    &-btn {
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      height: $sku-operate-btn-height;
+      padding: 0 18px;
+      text-align: center;
+      background: $white;
+      border-top: $sku-operate-btn-border-top;
+
+      &-item {
+        width: 100%;
+        height: $sku-operate-btn-item-height;
+        margin-right: 18px;
+        font-size: $sku-operate-btn-item-font-size;
+        font-weight: $sku-operate-btn-item-font-weight;
+        line-height: $sku-operate-btn-item-line-height;
+        color: $white;
+        background: $sku-opetate-bg-default;
+        border-radius: 21px;
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+
+      &-buy {
+        background: $sku-opetate-bg-buy;
+      }
+    }
+  }
diff --git a/packages/nutui/components/skuoperate/skuoperate.vue b/packages/nutui/components/skuoperate/skuoperate.vue
@@ -81,3 +81,7 @@ export default defineComponent ({
     </view>
   </view>
 </template>
+
+<style lang="scss">
+@import './index';
+</style>