Authored by QC-L

更新部分UI界面效果 review by 黄敬囿

... ... @@ -28,6 +28,7 @@
display: inline-block;
&.actived {
font-weight: 500;
font-size: 40px;
color: #000;
box-sizing: border-box;
... ...
... ... @@ -15,7 +15,7 @@
}
.product-price {
height: 60px;
height: 40px;
text-align: left;
font-family: DINAlternate-Bold;
font-size: 28px;
... ...
.swiper-bg {
height: 280px;
width: 100%;
margin-top: 20px;
margin-top: 32px;
overflow: hidden;
.index-swiper {
padding-left: 40px;
... ...
... ... @@ -75,15 +75,21 @@ export default class SelectSize extends Component {
sizeLength > 0 &&
<View className="size-list">
{
sizeList.map(item => {
sizeList.map((item, index) => {
let price;
if (item.storage_num > 0) {
price = ${item.least_price}`;
} else {
price = '-';
}
let rightStyle = ''
if (index !== 0 && index % 5 === 0) {
rightStyle = 'right-border'
} else if (index === sizeLength - 1) {
rightStyle = 'right-border'
}
return (
<View key={item.size_id} className={curSelect === item.size_id ? `actived ${sizeStyle}` : sizeStyle} onClick={this.onChangeSize.bind(this, item)}>
<View key={item.size_id} className={curSelect === item.size_id ? `actived ${sizeStyle}` : `${sizeStyle} ${rightStyle}`} onClick={this.onChangeSize.bind(this, item)}>
<View className={item.storage_num > 0 ? 'size' : 'size gray'}>{item.size_name}</View>
{
curSelect !== item.size_id &&
... ...
... ... @@ -45,7 +45,8 @@
.size-item {
border: 2px solid #ddd;
border-left: 2px solid #ddd;
border-bottom: 2px solid #ddd;
box-sizing: border-box;
text-align: center;
width: 20%;
... ... @@ -54,10 +55,12 @@
flex-direction: column;
align-items: center;
justify-content: center;
&.top-border {
border-top: 2px solid #ddd;
}
&.right-border {
border-right: 2px solid #ddd;
}
.size {
width: 100%;
... ... @@ -85,6 +88,7 @@
color: #999999;
}
}
}
.buy-btn {
... ...