#yyds干货盘点 react笔记之完成meals组件

import React from 'react';
import classes from "./Meal.module.css";
/*
*   食物组件
* */
const Meal = () => {
    return (
        <div className={classes.Meal}>
            <div className={classes.ImgBox}>
                <img src="/img/meals/1.png"/>
            </div>
            <div>
                <h2 className={classes.Title}>汉堡包</h2>
                <p className={classes.Desc}>百分百纯牛肉配搭爽脆酸瓜洋葱粒与美味番茄酱经典滋味让你无法抵挡！</p>
                <div className={classes.PriceWrap}>
                    <span className={classes.Price}>12</span>
                    <div>数量</div>
                </div>
            </div>
        </div>
    );
};
export default Meal;

.Meal{
    /*开启弹性盒*/
    display: flex;
    /*设置辅轴对齐方式*/
    align-items: center;
    /*设置外边距*/
    padding: 30rem 20rem;
    border-bottom: 1px #f2f2f2 solid;
}
.ImgBox{
    width: 280rem;
}
img{
    width: 100%;
}
.Title{
    font-weight: normal;
    font-size: 18px;
    margin: 0;
}
.Desc{
    margin: 0;
    color: #bbb;
    font-size: 12px;
    padding-right: 40rem;
}
.PriceWrap{
    margin-top: 40rem;
    display: flex;
    justify-content: space-between;
}
.Price{
    font-weight: bold;
    font-size: 18px;
}
.Price::before{
    content: '￥';
    font-size: 12px;
}

import React from 'react';
import Meal from "./Meal/Meal";
import classes from './Meals.module.css';
/*
*   食物列表的组件
* */
const Meals = () => {
    return (
        /*现在将滚动条设置给了Meals*/
        <div className={classes.Meals}>
            <Meal/>
            <Meal/>
            <Meal/>
            <Meal/>
            <Meal/>
            <Meal/>
            <Meal/>
            <Meal/>
            <Meal/>
            <Meal/>
        </div>
    );
};
export default Meals;