react笔记之完成meals组件

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣 关注公众号带你进入前端学习交流群

meal.js

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;

我是歌谣 放弃很容易 但是坚持一定很酷