mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
style(Sku): refactor image item style
This commit is contained in:
chenjiahan
neverland
parent
eac48d6ed5
commit
bea027c8c7
@ -83,7 +83,7 @@ export default createComponent({
|
||||
<div class={bem('row')} ref="row">
|
||||
{top}
|
||||
</div>
|
||||
{bottom.length && <div class={bem('row')}>{bottom}</div>}
|
||||
{bottom.length ? <div class={bem('row')}>{bottom}</div> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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 (
|
||||
<Image
|
||||
fit="cover"
|
||||
src={this.imgUrl}
|
||||
class={`${classPrefix}-img`}
|
||||
lazy-load={this.lazyLoad}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (this.largeImageMode && this.lazyLoad) {
|
||||
return <img class={`${classPrefix}-img`} src={imgUrl} vLazy={imgUrl} />;
|
||||
}
|
||||
|
||||
return <img class={`${classPrefix}-img`} src={imgUrl} />;
|
||||
},
|
||||
},
|
||||
|
||||
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 (
|
||||
<span
|
||||
@ -78,6 +78,16 @@ export default createComponent({
|
||||
]}
|
||||
onClick={this.onSelect}
|
||||
>
|
||||
{this.genImage(classPrefix)}
|
||||
<div class={`${classPrefix}-name`}>
|
||||
{this.largeImageMode ? (
|
||||
<span class={{ 'van-multi-ellipsis--l2': this.largeImageMode }}>
|
||||
{this.skuValue.name}
|
||||
</span>
|
||||
) : (
|
||||
this.skuValue.name
|
||||
)}
|
||||
</div>
|
||||
{this.largeImageMode && (
|
||||
<img
|
||||
class={`${classPrefix}-img-icon`}
|
||||
@ -85,12 +95,6 @@ export default createComponent({
|
||||
onClick={this.onPreviewImg}
|
||||
/>
|
||||
)}
|
||||
{this.genImage(classPrefix)}
|
||||
<div class={`${classPrefix}-name`}>
|
||||
<span class={this.largeImageMode ? 'van-multi-ellipsis--l2' : ''}>
|
||||
{this.skuValue.name}
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
);
|
||||
},
|
||||
|
||||
@ -109,17 +109,11 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__picture {
|
||||
margin-right: 0;
|
||||
|
||||
&-item {
|
||||
&__item,
|
||||
&__image-item {
|
||||
position: relative;
|
||||
flex: 0 0 110px;
|
||||
width: 110px;
|
||||
height: 150px;
|
||||
margin: 0 4px 6px 0;
|
||||
overflow: hidden;
|
||||
color: @text-color;
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
border-radius: @border-radius-md;
|
||||
cursor: pointer;
|
||||
|
||||
@ -130,57 +124,100 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: @sku-item-background-color;
|
||||
border-radius: @border-radius-md;
|
||||
content: '';
|
||||
}
|
||||
|
||||
&-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
width: 110px;
|
||||
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;
|
||||
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;
|
||||
}
|
||||
|
||||
&--active {
|
||||
color: @red;
|
||||
border: 1px solid currentColor;
|
||||
|
||||
&::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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 110px;
|
||||
margin: 0 4px 6px 0;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&-img {
|
||||
width: 100%;
|
||||
height: 110px;
|
||||
|
||||
&-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 18px;
|
||||
height: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
&-name {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
height: 40px;
|
||||
padding: @padding-base;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
|
||||
span {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
&--active {
|
||||
border-color: currentColor;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
color: @gray-5;
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user