react笔记之完成meals组件
2024-07-04 09:22:19 阅读次数:25
css,javascript,react
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;
版权声明:本文内容来自第三方投稿或授权转载,原文地址:https://blog.51cto.com/u_15460007/6049010,作者:前端导师歌谣,版权归原作者所有。本网站转在其作品的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如因作品内容、版权等问题需要同本网站联系,请发邮件至ctyunbbs@chinatelecom.cn沟通。
上一篇:好客租房57-props深入(4props的默认值)
下一篇:golang _ 的作用