可视化大屏Left

【青翼】

已于 2024-06-22 10:02:20 修改

阅读量1.6k

点赞数 34

文章标签： html 前端

于 2024-06-21 10:10:33 首次发布

本文链接：https://blog.csdn.net/wyhwyhwyhs/article/details/139853501

版权

左上角进行排版，icon图标可以使用iconfont-阿里巴巴矢量图标库，亲测好用

然后开始获取左上角用到的数据易客云天气API免费天气API接口|天气预报接口|全球天气API接口|气象预警|空气质量 (tianqiapi.com)用axios拿到自己想要的数据进行渲染

import {useState} from 'react' // 定义状态数据
import {useEffect} from 'react' // 模拟生命周期

import {getWeather} from '../../request/home'
// 定义首页组件
const Home = () => {
// 定义状态数据
let [weather, setWeather] = useState({}) // 数据的初始值
// 发送请求
useEffect(() => {
// 这个函数当页面渲染前会执行一次
// 当依赖的数据发生变化了，但是页面还未渲染前会执行一次
// 发送请求
getWeather({
unescape: 1,
version: "v63",
appid: '',
appsecret: ''
}).then(resp => {
// console.log(111, resp);
setWeather(resp.data)
})
}, [])
return (
<div className="container">
<header></header>
<main>
<div className='left'>
{/* 上面的天气情况 */}
<div className="weather">
{/* 标题 */}
<div className="title">环境监测</div>
{/* 天气情况正文 */}
<div className="content">
{/* 将weather中的内容自己布局渲染在页面中即可 */}
</div>
</div>
{/* 下面的图表 */}
</div>
<div className='center'></div>
<div className='right'></div>
</main>
</div>
)
}

export default Home
```

天气情况搭建结构和样式：

```js
<div className="weather">
{/* 标题 */}
<div className="title">环境监测</div>
{/* 天气情况正文 */}
<div className="content">
{/* 将weather中的内容自己布局渲染在页面中即可 */}
<div className="today-tem">
<div className="today">{weather.data ? weather.data[0].tem : '0'}<span>℃</span></div>
<div className="min-max">
<div className="line"></div>
<div className="min-max-tem">
{weather.data ? weather.data[0].tem2 : 0}~{weather.data ? weather.data[0].tem1 : 0}℃
</div>
</div>
<div className="yujing">
<div className='circle'></div>
<div className='tip'>{weather.data ? weather.data[0].air_level : 0}</div>
</div>
</div>
<div className="today-info">
<div className="tigan">
<div>
<i className='iconfont icon-tiganwendu'></i>
<span>体感</span>
</div>
<span>{weather.data ? weather.data[0].tem : 0}℃</span>
</div>
<div className="fengli">
<div>
<i className='iconfont icon-fengli'></i>
<span>风力</span>
</div>
<span>{weather.data ? weather.data[0].win_speed : 0}</span>
</div>
<div className="shidu">
<div>
<i className='iconfont icon-shidu'></i>
<span>湿度</span>
</div>
<span>{weather.data ? weather.data[0].humidity: 0}</span>
</div>
</div>
<div className="today-tomoraw">
<div className="today-info-show">
<div className='icon'>
<span>{weather.data ? weather.data[0].tem2 : 0}~{weather.data ? weather.data[0].tem1 : 0}℃</span>
<i className='iconfont icon-yueliang'></i>
</div>
<div className='text'>
<span>今天</span>
<span className='block'></span>
<span>{weather.data ? weather.data[0].wea_day : 0}</span>
</div>
</div>
<div className="middle-line"></div>
<div className="today-info-show">
<div className='icon'>
<span>{weather.data ? weather.data[1].tem2 : 0}~{weather.data ? weather.data[1].tem1 : 0}℃</span>
<i className="iconfont icon-taiyang"></i>
</div>
<div className='text'>
<span>明天</span>
<span className='block'></span>
<span>{weather.data ? weather.data[1].wea_day : 0}</span>
</div>
</div>
</div>
</div>
</div>
```

样式：

```css
.container{
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background-image: url(../../assets/images/pageBg.png);
}
header{
width: 100vw;
height: 80px;
background-image: url(../../assets/images/Top.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
main{
width: 100vw;
height: 100vh;
display: flex;
position: absolute;
left: 0;
top: 0;
}
.left{
width: 32%;
background-image: url(../../assets/images/Left.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.center{
width: 36%;
}
.right{
width: 32%;
background-image: url(../../assets/images/Right.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.weather{
margin: 80px 70px 0 50px;
color: #fff;
}
.weather .title{
height: 36px;
background-image: url(../../assets/images/titlebg.png);
background-size: 100% 100%;
padding-left: 14px;
line-height: 36px;
font-size: 14px;
}
.content{
height: 290px;
background-color: rgba(255,255,255,.1);
margin-top: 10px;
}
.today-tem{
padding: 10px;
display: flex;
justify-content: flex-start;
margin: 0 20px;
}
.today span{
font-size: 40px;
}
.min-max{
margin-left: 50px;
flex: 1;
}
.line{
width: 0;
height: 10px;
border: 2px solid #0f0;
border-radius: 2px;
margin-left: 20px;
}
.min-max-tem{
font-size: 10px;
margin-top: 4px;
}
.circle{
width: 10px;
height: 10px;
border-radius: 50%;
background-color: orange;
}
.tip{
color: orange;
font-size: 12px;
}
.today-info{
background-color: rgba(120, 120, 120, .5);
margin: 0 20px;
border: 1px solid #00f;
font-size: 12px;
}
.tigan,.fengli{
line-height: 40px;
font-size: 12px;
display: flex;
justify-content: space-between;
margin: 0 20px;
border-bottom: 1px solid #00f;
}
.shidu{
line-height: 40px;
font-size: 12px;
display: flex;
justify-content: space-between;
margin: 0 20px;
}
.today-tomoraw{
margin: 10px 20px 0;
background-color: rgba(120, 120, 120, .5);
border: 1px solid #00f;
display: flex;
justify-content: space-between;
font-size: 12px;
align-items: center;
}
.today-info-show{
width: 100%;
}
.icon{
display: flex;
justify-content: space-between;
padding: 10px;
}
.text{
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
}
.block{
display: block;
width: 35px;
height: 10px;
background-color: #0f0;
border-radius: 5px;
}
.middle-line{
width: 0;
height: 50px;
border: 1px solid #00f;
}
.yujing{
display: flex;
align-items: center;
}
.tip{
margin-left: 4px;
position: relative;
top: -2px;
}
.today-info>div>div>span{
margin-left: 6px;
}
```