mobile / yoho-miniapp-ufo · Commits

Go to a project

Authored by QC-L
Commit ce029447c046d2da2fbffad522d4acf851e6afe8 1 parent 310fa6f6

修复分类页面文字过长导致布局错误的问题 review by 黄敬囿

Inline Side-by-side
Showing 2 changed files with 42 additions and 27 deletions
... ... @@ -49,10 +49,12 @@ export default class category extends Component {
s.map(item => {
return (
<View className="item" key={item.product_id} key={item.product_id}>
<Navigator url={`/pages/productDetail/index?id=${item.product_id}`} hover-class="none">
<Image src={getImgUrl(item.image_url, 140, 140)} mode="aspectFill" className="item-img" mode="aspectFill"/>
<Navigator className="item-navigator" url={`/pages/productDetail/index?id=${item.product_id}`} hover-class="none">
<View className="item-img">
<Image className="img" src={getImgUrl(item.image_url, 140, 140)} mode="aspectFill"/>
</View>
<View className="product-dec">
<View className="item-name">{item.product_name}</View>
<Text className="item-name">{item.product_name}</Text>
<View className="item-code">货号 {item.product_code}</View>
</View>
</Navigator>
... ...
... ... @@ -49,34 +49,47 @@
height: 140px;
display: flex;
align-items: center;
}
.item-img {
width: 140px;
height: 140px;
margin-right: 20px;
float: left;
}
.item-navigator {
width: 100%;
display: flex;
.product-dec {
float: left;
height: 100%;
}
.item-img {
height: 140px;
margin-right: 20px;
display: flex;
.img {
width: 140px;
height: 140px;
}
}
.item-name {
width: 100%;
font-family: DINAlternate-Bold;
font-size: 28px;
color: #000;
margin-top: 30px;
}
.product-dec {
height: 100%;
flex: 4;
display: flex;
flex-direction: column;
word-break: break-all;
.item-name {
font-family: DINAlternate-Bold;
font-size: 28px;
// color: #000;
// margin-top: 30px;
white-space: pre-line;
// width: 460px;
// flex-grow: 1;
// word-break: break-all;
}
.item-code {
width: 100%;
font-family: SFProText-Regular;
font-size: 24px;
color: #999;
margin-top: 22px;
.item-code {
// flex-grow: 1;
font-family: SFProText-Regular;
font-size: 24px;
color: #999;
margin-top: 22px;
}
}
}
}
}
}
\ No newline at end of file
... ...