50 lines
1.4 KiB
JavaScript
50 lines
1.4 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import duoyun from "../../img/duoyun.png";
|
|
import fengsu from "../../img/fengsu.png";
|
|
import shidu from "../../img/shidu.png";
|
|
import ziwaixian from "../../img/ziwaixian.png";
|
|
|
|
function CenterPanel(props) {
|
|
let { timeObj,weatherObj } = props;
|
|
|
|
|
|
return (
|
|
<div className="center-panel">
|
|
<div className="first-section">
|
|
<div className="content">
|
|
<img src={duoyun} alt="" />
|
|
<div>{weatherObj.text}</div>
|
|
</div>
|
|
</div>
|
|
<div className="second-section">
|
|
<div className="content">
|
|
<img src={ziwaixian} alt="" />
|
|
<div>{weatherObj.temp}℃</div>
|
|
</div>
|
|
</div>
|
|
<div className="third-section">
|
|
<div className="content">
|
|
<img src={fengsu} alt="" />
|
|
<div>{weatherObj.windDir}</div>
|
|
</div>
|
|
</div>
|
|
<div className="forth-section">
|
|
<div className="content">
|
|
<img src={shidu} alt="" />
|
|
<div>{weatherObj.humidity}%</div>
|
|
</div>
|
|
</div>
|
|
<div className="center-section">
|
|
<div>{timeObj.week}</div>
|
|
<div>
|
|
<span className="month">{timeObj.month}/</span>
|
|
<span className="date">{timeObj.day}</span>
|
|
</div>
|
|
<div>{timeObj.lunar}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default CenterPanel;
|