OrderItem style css

来源:2-3 订单项组件

bhappyu

2019-06-19 09:13

.orderItem{
   display: block;
   padding: 11px 10px 11px 15px;
}
.orderItem__picContainer{
   padding-right: 10px;
   display: inline-block;
}
.orderItem__pic{
   width:90px;
   height: 90px;
}
.orderItem__content{
   display: inline-block;
   width:calc(100% - 100px);
}
.orderItem__product{
   max-width:237px;
   font-size:17px;
   font-weight: 700;
   color:#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: 22px;
   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;
}


写回答 关注

5回答

  • 慕沐8789467
    2022-10-03 21:06:06

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

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


  • qq_慕设计5067368
    2020-05-28 22:16:45

    ?非常感谢

  • weixin_慕斯5577966
    2019-11-07 11:14:24
    非常感谢
  • radius_wzx
    2019-10-14 15:25:21

    GOOD JOB

  • weixin_慕容8367124
    2019-07-29 14:23:29

    很好!

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

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

14647 学习 · 39 问题

查看课程

相似问题