style(Sku): adjust border alignment (#6272)

src/sku/components/SkuMessages.js

@@ -6,19 +6,18 @@ import { isNumeric } from '../../utils/validate/number';
 // Components
 import Cell from '../../cell';
 import Field from '../../field';
-import CellGroup from '../../cell-group';
 import SkuImgUploader from './SkuImgUploader';
 
 const [createComponent, bem, t] = createNamespace('sku-messages');
 
 export default createComponent({
   props: {
+    messageConfig: Object,
+    goodsId: [Number, String],
     messages: {
       type: Array,
       default: () => [],
     },
-    messageConfig: Object,
-    goodsId: [Number, String],
   },
 
   data() {
@@ -155,10 +154,6 @@ export default createComponent({
   },
 
   render() {
-    return (
+    return <div class={bem()}>{this.messages.map(this.genMessage)}</div>;
-      <CellGroup class={bem()} border={this.messages.length > 0}>
-        {this.messages.map(this.genMessage)}
-      </CellGroup>
-    );
   },
 });

src/sku/components/SkuStepper.js

@@ -156,24 +156,22 @@ export default createComponent({
   render() {
     return (
       <div class="van-sku-stepper-stock">
-        <div class="van-sku-stepper-container">
+        <div class="van-sku__stepper-title">
-          <div class="van-sku__stepper-title">
+          {this.stepperTitle || t('num')}
-            {this.stepperTitle || t('num')}
-          </div>
-          <Stepper
-            vModel={this.currentNum}
-            class="van-sku__stepper"
-            min={this.stepperMinLimit}
-            max={this.stepperLimit}
-            disableInput={this.disableStepperInput}
-            integer
-            onOverlimit={this.onOverLimit}
-            onChange={this.onChange}
-          />
-          {!this.hideQuotaText && this.quotaText && (
-            <span class="van-sku__stepper-quota">({this.quotaText})</span>
-          )}
         </div>
+        <Stepper
+          vModel={this.currentNum}
+          integer
+          class="van-sku__stepper"
+          min={this.stepperMinLimit}
+          max={this.stepperLimit}
+          disableInput={this.disableStepperInput}
+          onOverlimit={this.onOverLimit}
+          onChange={this.onChange}
+        />
+        {!this.hideQuotaText && this.quotaText && (
+          <span class="van-sku__stepper-quota">({this.quotaText})</span>
+        )}
       </div>
     );
   },

src/sku/demo/data.ts

@@ -162,14 +162,6 @@ export const skuData = {
         type: 'date',
         required: 0,
       },
-      {
-        datetime: '0',
-        disable: false,
-        name: '时间含日期',
-        multiple: 0,
-        type: 'time',
-        required: 0,
-      },
       {
         datetime: '0',
         disable: false,
@@ -181,33 +173,6 @@ export const skuData = {
     ],
   },
   properties: [
-    {
-      k_id: 123,
-      k: '加冰',
-      v: [
-        {
-          id: 1222,
-          name: '少冰',
-          price: 1,
-        },
-        {
-          id: 1223,
-          name: '去冰',
-          price: 1,
-        },
-      ],
-    },
-    {
-      k_id: 133,
-      k: '打包',
-      v: [
-        {
-          id: 1244,
-          name: '分开打包',
-          price: 9,
-        },
-      ],
-    },
     {
       k_id: 124,
       k: '加料',
@@ -238,8 +203,6 @@ export const initialSku = {
   s2: '1193',
   selectedNum: 3,
   selectedProp: {
-    123: [1222],
-    133: [1244],
     124: [1225, 1226],
   },
 };

src/sku/index.less

@@ -24,9 +24,8 @@
     }
   }
 
-  /* sku header */
   &-header {
-    margin-left: @padding-md;
+    margin: 0 @padding-md;
 
     &__img-wrap {
       position: relative;
@@ -55,7 +54,7 @@
       flex-direction: column;
       justify-content: flex-end;
       min-height: 96px;
-      padding: @padding-sm 36px @padding-sm @padding-xs;
+      padding: @padding-sm 20px @padding-sm @padding-xs;
       overflow: hidden;
     }
   }
@@ -108,8 +107,7 @@
   }
 
   &-group-container {
-    margin-left: @padding-md;
+    padding-top: @padding-sm;
-    padding: @padding-sm 0 2px;
 
     &--hide-soldout {
       .van-sku-row__item--disabled {
@@ -120,7 +118,7 @@
 
   /* sku row */
   &-row {
-    margin: 0 3px @padding-sm 0;
+    margin: 0 @padding-md @padding-sm;
 
     &:last-child {
       margin-bottom: 0;
@@ -194,18 +192,10 @@
     }
   }
 
-  /* sku stepper */
+  &-stepper-stock {
-  &-stepper {
+    padding: @padding-sm @padding-md;
-    &-stock {
+    overflow: hidden;
-      margin-left: @padding-md;
+    line-height: 30px;
-      padding: @padding-sm 0;
-    }
-
-    &-container {
-      min-height: 30px;
-      margin-right: 20px;
-      overflow: hidden;
-    }
   }
 
   &__stepper {
@@ -214,15 +204,12 @@
 
     &-title {
       float: left;
-      line-height: 30px;
     }
 
     &-quota {
-      display: inline-block;
       float: right;
       color: @red;
       font-size: @font-size-sm;
-      line-height: 30px;
     }
   }
 
@@ -240,6 +227,12 @@
   &-messages {
     padding-bottom: @padding-xl;
 
+    .van-cell::after {
+      top: 0;
+      right: @padding-md;
+      bottom: auto;
+    }
+
     &__image-cell {
       .van-cell__title {
         max-width: 90px;

src/style/mixins/hairline.less

@@ -18,20 +18,20 @@
   transform: scale(0.5);
 }
 
-.hairline-top(@color: @border-color, @left: 0) {
+.hairline-top(@color: @border-color, @left: 0, @right: 0) {
   .hairline-common();
 
   top: 0;
-  right: 0;
+  right: @right;
   left: @left;
   border-top: 1px solid @color;
   transform: scaleY(0.5);
 }
 
-.hairline-bottom(@color: @border-color, @left: 0) {
+.hairline-bottom(@color: @border-color, @left: 0, @right: 0) {
   .hairline-common();
 
-  right: 0;
+  right: @right;
   bottom: 0;
   left: @left;
   border-bottom: 1px solid @color;