diff --git a/src/sku/components/SkuRow.js b/src/sku/components/SkuRow.js
index 2c110fc6f..3f4de3575 100644
--- a/src/sku/components/SkuRow.js
+++ b/src/sku/components/SkuRow.js
@@ -83,7 +83,7 @@ export default createComponent({
{top}
- {bottom.length && {bottom}
}
+ {bottom.length ? {bottom}
: null}
);
}
diff --git a/src/sku/components/SkuRowItem.js b/src/sku/components/SkuRowItem.js
index e2ad21240..1289e25ec 100644
--- a/src/sku/components/SkuRowItem.js
+++ b/src/sku/components/SkuRowItem.js
@@ -1,6 +1,7 @@
import { bem } from './SkuRow';
import { createNamespace } from '../../utils';
import { isSkuChoosable } from '../utils/sku-helper';
+import Image from '../../image';
const [createComponent] = createNamespace('sku-row-item');
@@ -51,23 +52,22 @@ export default createComponent({
},
genImage(classPrefix) {
- const { imgUrl } = this;
-
- if (!imgUrl) {
- return;
+ if (this.imgUrl) {
+ return (
+
+ );
}
-
- if (this.largeImageMode && this.lazyLoad) {
- return
;
- }
-
- return
;
},
},
render() {
const choosed = this.skuValue.id === this.selectedSku[this.skuKeyStr];
- const classPrefix = this.largeImageMode ? bem('picture-item') : bem('item');
+ const classPrefix = this.largeImageMode ? bem('image-item') : bem('item');
return (
+ {this.genImage(classPrefix)}
+
+ {this.largeImageMode ? (
+
+ {this.skuValue.name}
+
+ ) : (
+ this.skuValue.name
+ )}
+
{this.largeImageMode && (
)}
- {this.genImage(classPrefix)}
-
-
- {this.skuValue.name}
-
-
);
},
diff --git a/src/sku/index.less b/src/sku/index.less
index 811fbac7b..cb22e158e 100644
--- a/src/sku/index.less
+++ b/src/sku/index.less
@@ -109,77 +109,114 @@
margin-bottom: 0;
}
- &__picture {
+ &__item,
+ &__image-item {
+ position: relative;
+ overflow: hidden;
+ color: @text-color;
+ border-radius: @border-radius-md;
+ cursor: pointer;
+
+ &::before {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: @sku-item-background-color;
+ content: '';
+ }
+
+ &--active {
+ color: @red;
+
+ &::before {
+ background: currentColor;
+ opacity: 0.1;
+ }
+ }
+ }
+
+ &__item {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 40px;
+ margin: 0 @padding-sm @padding-sm 0;
+ font-size: 13px;
+ line-height: 16px;
+ vertical-align: middle;
+
+ &-img {
+ z-index: 1;
+ width: 24px;
+ height: 24px;
+ margin: 4px 0 4px 4px;
+ object-fit: cover;
+ border-radius: @border-radius-sm;
+ }
+
+ &-name {
+ z-index: 1;
+ padding: @padding-xs;
+ }
+
+ &--disabled {
+ color: @gray-5;
+ background: @active-color;
+ cursor: not-allowed;
+
+ .van-sku-row__item-img {
+ opacity: 0.3;
+ }
+ }
+ }
+
+ &__image {
margin-right: 0;
&-item {
- position: relative;
- flex: 0 0 110px;
+ display: flex;
+ flex-direction: column;
width: 110px;
- height: 150px;
margin: 0 4px 6px 0;
- color: @text-color;
- border: 1px solid rgba(0, 0, 0, 0);
- border-radius: @border-radius-md;
- cursor: pointer;
+ border: 1px solid transparent;
- &::before {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: @sku-item-background-color;
- border-radius: @border-radius-md;
- content: '';
+ &:last-child {
+ margin-right: 0;
}
&-img {
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
- display: block;
- width: 110px;
+ width: 100%;
height: 110px;
- object-fit: cover;
- border-radius: @border-radius-md @border-radius-md 0 0;
&-icon {
position: absolute;
top: 0;
right: 0;
- z-index: 3;
width: 18px;
height: 19px;
- opacity: 1 !important;
}
}
&-name {
- position: absolute;
- top: 110px;
- left: 0;
- z-index: 1;
+ position: relative;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
- width: 110px;
height: 40px;
padding: @padding-base;
font-size: 12px;
line-height: 16px;
+
+ span {
+ word-wrap: break-word;
+ }
}
&--active {
- color: @red;
- border: 1px solid currentColor;
-
- &::before {
- background: currentColor;
- opacity: 0.1;
- }
+ border-color: currentColor;
}
&--disabled {
@@ -203,65 +240,6 @@
color: @gray-6;
}
- &__item {
- position: relative;
- display: inline-flex;
- align-items: center;
- justify-content: center;
- min-width: 40px;
- margin: 0 @padding-sm @padding-sm 0;
- overflow: hidden;
- color: @text-color;
- font-size: 13px;
- line-height: 16px;
- vertical-align: middle;
- border-radius: @border-radius-md;
- cursor: pointer;
-
- &::before {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: @sku-item-background-color;
- content: '';
- }
-
- &-img {
- z-index: 1;
- width: 24px;
- height: 24px;
- margin: 4px 0 4px 4px;
- object-fit: cover;
- border-radius: @border-radius-sm;
- }
-
- &-name {
- z-index: 1;
- padding: @padding-xs;
- }
-
- &--active {
- color: @red;
-
- &::before {
- background: currentColor;
- opacity: 0.1;
- }
- }
-
- &--disabled {
- color: @gray-5;
- background: @active-color;
- cursor: not-allowed;
-
- .van-sku-row__item-img {
- opacity: 0.3;
- }
- }
- }
-
&__scroller {
margin: 0 -@padding-md;
overflow-x: scroll;