Style.css

来源:2-3 订单项组件

xlljoy

2021-02-09 10:52

.orderItem {

display: block;

padding: 11px 10px 11px 15px;

}

.orderItem__picContainer {

padding: right 10;

display: block;

}

.orderItem__pic {

width: 90px;

height: 90px;

}

.orderItem__content {

display: inline-block;

}


.orderItem__product {

max-width: 237px;

font-size: 17px;

font-weight: 700;

coloc: #111;

padding-right: 8px;

box-sizing: border-box;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}


.orderItem__shop {

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

font-size: 13px;

color: #777;

padding-top: 9px;

padding-bottom: 13px;

}


.orderItem__detail {

display: flex;

justify-content: space-between;

height: 2px;

line-height: 22px;

padding-right: 4px;

}


.orderItem__price {

font-size: 13px;

color: #777;

vertical-align: 1px;

margin-left: 10px;

}


.orderItem__price::before {

content: "\A5";

margin-right: 1px;

}


.orderItem_btn {

width: 80px;

height: 22px;

text-align: center;

color: #fff;

border: 0;

font-size: 14px;

}


.orderItem_btn--red {

background-color: #e9203d;

}


.orderItem_btn--grey {

background-color: #999;

}



写回答 关注

2回答

  • 慕沐8789467
    2022-10-03 21:05:07

    按老师的课程学完了,供大家参考

    源码 https://github.com/carrieguo/react-demo-my-order.git


  • 极客猎手
    2021-02-09 12:12:42

    very good

React 16实现订单列表及评价功能

以订单列表为案例,讲授React项目的开发流程

14647 学习 · 39 问题

查看课程