老师求源码

来源:2-3 订单项组件

gin15

2018-10-24 00:22

老师能不能发一下源码

写回答 关注

3回答

  • 慕沐8789467
    2022-10-03 21:04:18

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

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


  • fengshunsgit
    2018-12-04 18:10:39
    .orderItem{display: flex;padding: 11px 10px 11px 15px;justify-content: space-between;align-items: center;}.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-top: 6px;padding-right: 18px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.orderItem__shop{text-align: left;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;}.orderItem__commentContainer{width:100%;}
    import React, { Component } from 'react';import './style.css';class OrderItem extends Component {render() {const {shop,product, price, picture,ifCommented} = this.props.data;return (<div className="orderItem"><div className="orderItem__picContainer"><img src = {picture}alt = ""className = "orderItem__pic" /></div><div className="orderItem__content"><div className="orderItem__product">{product}</div><div className="orderItem__shop">{shop}</div><div className="orderItem__detail"><div className="orderItem__price">{price}</div><div>{ifCommented ? (<button className="orderItem__btn orderItem__btn--grey">已评价</button>):(<button className="orderItem__btn orderItem__btn--red">评价</button>)}</div></div></div></div>);}}export default OrderItem;


  • 辣椒加冰
    2018-10-28 17:55:37

    https://github.com/vkcyan/gotoReact-

    这一节代码已经完成,css也写了

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

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

14647 学习 · 39 问题

查看课程

相似问题