Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 3cd28ed

Browse files
编写meal组件
1 parent 66e82b5 commit 3cd28ed

File tree

9 files changed

+77
-3
lines changed

9 files changed

+77
-3
lines changed

‎public/img/hamburger1.png‎

377 KB
Loading[フレーム]

‎public/img/hamburger2.png‎

383 KB
Loading[フレーム]

‎public/img/hamburger3.png‎

427 KB
Loading[フレーム]

‎src/App.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
1+
importMealsfrom'./components/meals'
22
function App () {
33
return (
4-
<div className="App">
5-
123
4+
<div style={{width: '750rem',height: '100vh'}}>
5+
<Meals></Meals>
66
</div>
77
)
88
}

‎src/components/meals/index.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react'
2+
import Meal from './meal'
3+
export default function Meals () {
4+
return (
5+
<Meal />
6+
)
7+
}

‎src/components/meals/meal/index.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react'
2+
import mealCss from './index.module.css'
3+
4+
export default function Meal () {
5+
return (
6+
<div className={mealCss.mealBox}>
7+
<img className={mealCss.mealImg} src="/img/hamburger1.png" alt="" />
8+
<div>
9+
10+
<h2 className={mealCss.title}>汉堡</h2>
11+
<p className={mealCss.desc}>金黄脆辣的外皮,里面是鲜嫩油滑的鸡腿肉,搭配清爽生菜和美味沙拉</p>
12+
<div className={mealCss.priceBox}>
13+
<p className={mealCss.price}>\<p className={mealCss.num}>12</p></p>
14+
<div> - 1 +</div>
15+
</div>
16+
</div>
17+
</div>
18+
)
19+
}
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
.mealBox {
2+
display: flex;
3+
border-bottom: 1rem solid #f2f2f2;
4+
padding: 20rem;
5+
}
6+
.mealImg {
7+
width: 200rem;
8+
height: 200rem;
9+
}
10+
.title {
11+
font-weight: normal;
12+
color: #323232;
13+
font-size: 32rem;
14+
margin-bottom: 12rem;
15+
margin-top: 12rem;
16+
}
17+
.desc {
18+
font-size: 14rem;
19+
color: #666;
20+
text-overflow: ellipsis;
21+
overflow: hidden;
22+
-webkit-line-clamp: 2;
23+
}
24+
.priceBox {
25+
display: flex;
26+
justify-content: space-between;
27+
align-items: center;
28+
margin-top: 12rem;
29+
}
30+
.price {
31+
font-size: 12rem;
32+
color: #323232;
33+
display: flex;
34+
justify-content: space-between;
35+
align-items: center;
36+
}
37+
.price .num {
38+
font-size: 30rem;
39+
color: #000;
40+
}

‎src/index.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}

‎src/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@ import React from 'react'
22
import ReactDOM from 'react-dom/client'
33
import App from './App'
44
import reportWebVitals from './reportWebVitals'
5+
import './index.css'
6+
7+
// 移动端适配
8+
document.documentElement.style.fontSize = 100 / 750 + 'vw'
59

610
const root = ReactDOM.createRoot(document.getElementById('root'))
711
root.render(

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /